/* ==========================================================================
   Funk Pocket 16th — (a) 網站原生外觀
   全部沿用 style.css 的 :root 變數與設計規格:
   帶藍的黑底、全站唯一暖色 --tungsten、沒有卡片 / 陰影 / 圓角 / 裝飾圖示,
   分隔只用 1px 低透明度的線,標題用極細明體。

   工具需要的狀態差異也用這套語彙表達:
   暖色只給「實音」與「正在作用的控制」;悶音是冷白,休止是灰。
   播放中的亮格與鐘擺擺動是功能,不算裝飾動畫。

   例外(2026-10-21 友弟測試後):工具是拿來操作的,所以能按的東西
   (模式、預設律動、選單、和弦、文字按鈕)都加上 1px 直角細框,一眼看得出是按鈕;
   排版也比名片頁緊湊。這個例外只限工具頁。
   ========================================================================== */

.page-tool .stage {
  padding-top: clamp(1.25rem, 5vh, 3rem);
  padding-bottom: clamp(2.5rem, 8vh, 5rem);
}

.f16 {
  --line: rgba(121, 131, 143, .16);
  --line-soft: rgba(121, 131, 143, .10);
  --line-strong: rgba(121, 131, 143, .38);   /* 按鈕外框 */
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  /* .stage 是 flex,不給寬度會縮成內容寬(CLAUDE.md 記過的坑) */
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
}

/* 多語系字型:簡中、日、韓改用各自的系統字,避免漢字套到繁中字形 */
:lang(zh-Hans) .f16 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --serif: "Songti SC", "Noto Serif SC", SimSun, serif; }
:lang(ja) .f16      { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
:lang(ko) .f16      { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --serif: AppleMyungjo, "Noto Serif KR", Batang, serif; }

/* --------------------------------------------------------------------------
   標題與播放控制
   -------------------------------------------------------------------------- */

.f16-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.f16-kicker {
  margin: 0 0 .6rem;
  color: var(--tungsten);
  font-size: .75rem;
  letter-spacing: .3em;
}

.f16-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: .08em;
  color: var(--paper);
}

.f16-title-dim { color: var(--paper-dim); }

.f16-sub {
  margin: .6rem 0 0;
  max-width: var(--measure);
  color: var(--paper-dim);
  font-size: .9375rem;
  line-height: 1.8;
}

.f16-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.f16-wrist {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 11rem;
}

.f16-wrist-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 1.125rem;
  color: var(--paper-dim);
  transition: transform .08s ease-out;
}

.f16-wrist-icon.is-down,
.f16-wrist-icon.is-up { color: var(--paper); }

.f16-label {
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--paper-dim);
}

/* 固定寬度:狀態文字長短會變,寬度跟著變的話整列會重新換行、播放鈕上下跳 */
.f16-wrist-status {
  width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: .1rem;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--paper);
  white-space: nowrap;
}

.f16-dir.is-down { color: var(--paper); }
.f16-dir.is-up { color: var(--paper-dim); }

.f16-auto {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--paper-dim);
}

.f16-auto::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--tungsten);
}

/* display:flex 會蓋過 hidden 屬性,這裡要明講 */
.f16-auto[hidden] { display: none; }

.f16-play {
  appearance: none;
  background: transparent;
  border: 1px solid var(--tungsten-d);
  border-radius: 0;
  color: var(--tungsten);
  font: inherit;
  font-size: .875rem;
  letter-spacing: .12em;
  padding: .75rem 1.5rem;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}

.f16-play:hover { border-color: var(--tungsten); }

.f16-play.is-playing {
  background: var(--tungsten);
  border-color: var(--tungsten);
  color: var(--ink);
}

.f16-select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%),
    linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--paper);
  font: inherit;
  font-size: .8125rem;
  padding: .45rem 2rem .45rem .7rem;
  cursor: pointer;
  transition: border-color .3s ease;
}

.f16-select:hover { border-color: var(--tungsten-d); }
.f16-select option { background: var(--ink-soft); color: var(--paper); }
.f16-select-wide { width: 100%; }

/* --------------------------------------------------------------------------
   區塊
   -------------------------------------------------------------------------- */

.f16-section {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.f16-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.f16-h2 {
  margin: 0 0 .75rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--tungsten);
}

.f16-h3 {
  margin: 0;
  font-family: var(--serif, var(--display));
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--paper);
}

.f16-desc {
  margin: .6rem 0 0;
  max-width: var(--measure);
  color: var(--paper-dim);
  font-size: .9375rem;
  line-height: 1.8;
}

.f16-textbtn {
  appearance: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: .4rem .8rem;
  color: var(--paper);
  font: inherit;
  font-size: .8125rem;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}

.f16-textbtn:hover {
  color: var(--tungsten);
  border-color: var(--tungsten-d);
}

/* --------------------------------------------------------------------------
   步進器:圖例、律動標題、16 格
   -------------------------------------------------------------------------- */

.f16-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.f16-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--paper-dim);
  font-size: .875rem;
}

.f16-legend li {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}

.f16-legend b {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--paper);
}

.f16-legend b.is-accent { color: var(--tungsten); }
.f16-legend b.is-rest { color: rgba(121, 131, 143, .6); }

.f16-quick {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* 手機上三顆按鈕放不下時整顆換行,不要把按鈕裡的字折成兩行 */
.f16-quick .f16-textbtn { white-space: nowrap; }

/* 自動換題:下一題預告 */
.f16-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin-bottom: 1rem;
  padding: .55rem .8rem;
  border: 1px solid var(--tungsten-d);
}

.f16-next[hidden] { display: none; }

/* 還沒到最後一小節:只佔位,淡淡的 */
.f16-next.is-idle { border-color: var(--line); }
.f16-next.is-idle .f16-next-label { color: var(--paper-dim); }
.f16-next-sym.is-empty { color: rgba(121, 131, 143, .45); }

/* 題號列 */
.f16-codebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}

.f16-code-val {
  font-family: var(--mono);
  font-size: .875rem;
  letter-spacing: .12em;
  color: var(--tungsten);
  user-select: all;
  -webkit-user-select: all;
}

.f16-code-msg {
  font-size: .8125rem;
  color: var(--paper-dim);
}

.f16-code-load {
  display: flex;
  gap: .4rem;
  margin-left: auto;
}

.f16-code-input {
  width: 7.5rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: .4rem .6rem;
  color: var(--paper);
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.f16-code-input::placeholder {
  color: var(--paper-dim);
  letter-spacing: .04em;
  text-transform: none;
}

.f16-code-input:focus { border-color: var(--tungsten-d); }

.f16-next-label {
  color: var(--tungsten);
  font-size: .75rem;
  letter-spacing: .2em;
}

.f16-next-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.1rem;
}

.f16-next-beat {
  display: flex;
  gap: .45rem;
}

.f16-next-sym {
  width: .9rem;
  text-align: center;
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1;
}

.f16-next-sym.is-accent { color: var(--tungsten); }
.f16-next-sym.is-ghost { color: var(--paper); }
.f16-next-sym.is-rest { color: rgba(121, 131, 143, .5); }

.f16-pattern {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-bottom: 1.5rem;
}

.f16-pattern-line { margin: 0; }

.f16-badge {
  margin-right: 1rem;
  color: var(--tungsten);
  font-size: .75rem;
  letter-spacing: .2em;
}

.f16-pattern-title {
  font-family: var(--serif, var(--display));
  font-weight: 300;
  font-size: 1.125rem;
  color: var(--paper);
}

.f16-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--paper-dim);
}

.f16-stats strong {
  color: var(--paper);
  font-weight: 500;
}

/* 一拍一組。手機一行一拍,平板兩拍,桌機四拍一行 */
.f16-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 40rem) {
  .f16-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 68rem) {
  .f16-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

.f16-beat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--paper-dim);
}

.f16-beat-label.is-one,
.f16-beat-side.is-back { color: var(--paper); }

.f16-one {
  margin-left: .5rem;
  color: var(--tungsten);
  letter-spacing: .16em;
}

.f16-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--line);
}

.f16-step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 6.25rem;
  padding: .45rem .4rem .4rem;
  border-right: 1px solid var(--line);
  border-top: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* 實音:頂端一條鎢絲燈色的線,底色極淡 */
.f16-step.is-accent {
  background: rgba(232, 181, 99, .09);
  border-top-color: var(--tungsten);
}

/* 播放中:整格提亮,底部一條冷白線當播放頭。不加過渡,亮格要跟聲音同一瞬間 */
.f16-step.is-playing { background: rgba(201, 207, 216, .09); }
.f16-step.is-accent.is-playing { background: rgba(232, 181, 99, .22); }

.f16-step.is-playing::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--paper);
}

.f16-step-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--paper-dim);
}

.f16-step.is-accent .f16-step-sub { color: var(--paper); }

.f16-lock {
  appearance: none;
  background: none;
  border: 0;
  padding: .25rem;
  margin: -.25rem;
  line-height: 0;
  color: rgba(121, 131, 143, .5);
  cursor: pointer;
  transition: color .3s ease;
}

.f16-lock:hover { color: var(--paper); }
.f16-lock.is-locked { color: var(--tungsten); }

.f16-lock-i {
  display: block;
  width: .7rem;
  height: .82rem;
}

.f16-step-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: .25rem 0;
  margin: .25rem 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* 實音用樂譜上的重音記號 >,悶音 ×,休止 — */
.f16-sym {
  display: block;
  height: 1.6rem;
  font-family: var(--display);
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 1;
}

.is-accent .f16-sym { color: var(--tungsten); font-weight: 300; }
.is-ghost .f16-sym { color: var(--paper); }
.is-rest .f16-sym { color: rgba(121, 131, 143, .45); }

.f16-step-name {
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--paper-dim);
  white-space: nowrap;
}

.is-accent .f16-step-name { color: var(--paper); }

.f16-step-stroke {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .25rem;
  padding-top: .35rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--paper-dim);
}

.f16-step-mark { opacity: .7; }

.f16-tip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: 1.5rem;
  color: var(--paper-dim);
  font-size: .875rem;
  line-height: 1.8;
}

.f16-tip p { margin: 0; }

.f16-tip strong {
  color: var(--paper);
  font-weight: 500;
}

.f16-tip-lock {
  display: inline-block;
  width: .7rem;
  height: .82rem;
  margin: 0 .2rem;
  vertical-align: -.1em;
  color: var(--tungsten);
}

.f16-kbd {
  padding: 0 .25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--paper);
}

.f16-code {
  font-family: var(--mono);
  color: var(--paper);
}

/* 觸控裝置沒有鍵盤,快捷鍵提示收起來 */
@media (hover: none) and (pointer: coarse) {
  .f16-keys,
  .kbd-hint { display: none; }
}

/* --------------------------------------------------------------------------
   隨機出題 / 速度與節拍器
   -------------------------------------------------------------------------- */

.f16-cols {
  display: grid;
  gap: 2.25rem 3rem;
}

@media (min-width: 64rem) {
  .f16-cols { grid-template-columns: 7fr 5fr; }
}

.f16-gen { margin-top: 1rem; }

/* 四種出題模式:2×2 框格,選中的外框換成暖色 */
.f16-modes {
  display: grid;
  gap: .6rem;
  margin-top: 1.25rem;
}

@media (min-width: 40rem) {
  .f16-modes { grid-template-columns: repeat(2, 1fr); }
}

.f16-mode {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: .75rem .85rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease;
}

.f16-mode:hover { border-color: var(--paper-dim); }

.f16-mode:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.f16-mode:disabled:hover { border-color: var(--line-strong); }

.f16-mode.is-selected {
  border-color: var(--tungsten);
  background: rgba(232, 181, 99, .06);
}

.f16-mode-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem 1rem;
}

.f16-mode-name {
  color: var(--paper);
  font-size: 1rem;
  transition: color .3s ease;
}

.f16-mode.is-selected .f16-mode-name { color: var(--tungsten); }

.f16-mode-tag {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--paper-dim);
}

.f16-mode-desc {
  display: block;
  margin-top: .35rem;
  color: var(--paper-dim);
  font-size: .875rem;
  line-height: 1.75;
}

.f16-opts {
  display: grid;
  gap: .6rem;
  margin-top: .6rem;
}

@media (min-width: 40rem) {
  .f16-opts { grid-template-columns: repeat(2, 1fr); }
}

.f16-opt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
}

label.f16-opt { cursor: pointer; }

.f16-opt-title {
  display: block;
  color: var(--paper);
  font-size: .9375rem;
}

.f16-opt-desc {
  display: block;
  margin-top: .2rem;
  color: var(--paper-dim);
  font-size: .8125rem;
}

.f16-one-tag {
  margin-right: .6rem;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .16em;
  color: var(--tungsten);
}

.f16-check {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--tungsten);
  cursor: pointer;
}

.f16-fields {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
}

.f16-field {
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}

/* Swing 和節拍器並排 */
.f16-pair { display: grid; }

@media (min-width: 40rem) {
  .f16-pair {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }
}

/* Swing 刻度:對齊滑塊可移動的範圍(滑塊 .75rem,左右各縮一半)。
   50~75% 對應 0~100%:常用區間 54~62% → 16%~48%,58% → 32%,三連音 66% → 64% */
.f16-swing-scale {
  position: relative;
  height: 4px;
  margin: .35rem .375rem 0;
}

.f16-swing-band {
  position: absolute;
  left: 16%;
  width: 32%;
  top: 0;
  bottom: 0;
  background: rgba(201, 207, 216, .3);
}

.f16-swing-m58 {
  position: absolute;
  left: 32%;
  top: -2px;
  width: 6px;
  height: 8px;
  margin-left: -3px;
  background: var(--paper);
}

.f16-swing-tick {
  position: absolute;
  left: 64%;
  top: -4px;
  width: 1px;
  height: 12px;
  background: var(--tungsten);
}

.f16-swing-legend {
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .75rem;
  line-height: 1.7;
  color: var(--paper-dim);
}

.f16-swing-key {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  margin-right: .5rem;
}

.f16-swing-key.band {
  height: 4px;
  background: rgba(201, 207, 216, .3);
}

.f16-swing-key.m58::before,
.f16-swing-key.tick::before {
  content: "";
  display: block;
  margin: 0 auto;
}

.f16-swing-key.m58::before {
  width: 6px;
  height: 8px;
  background: var(--paper);
}

.f16-swing-key.tick::before {
  width: 1px;
  height: 11px;
  background: var(--tungsten);
}

.f16-field-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: .6rem;
}

.f16-nudge {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.f16-value {
  font-family: var(--mono);
  font-size: 1.125rem;
  color: var(--paper);
}

.f16-value small {
  font-size: .6875rem;
  color: var(--paper-dim);
}

.f16-small-value {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--paper);
}

.f16-step-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 0;
  width: 2.1rem;
  height: 1.6rem;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: .6875rem;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}

.f16-step-btn:hover {
  color: var(--tungsten);
  border-color: var(--tungsten-d);
}

/* 滑桿:一條細線,方形滑塊 */
.f16-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 1.25rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.f16-range::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(121, 131, 143, .45);
}

.f16-range::-moz-range-track {
  height: 1px;
  background: rgba(121, 131, 143, .45);
}

.f16-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: .75rem;
  height: .75rem;
  margin-top: calc(-.375rem + .5px);
  background: var(--tungsten);
  border: 0;
  border-radius: 0;
}

.f16-range::-moz-range-thumb {
  width: .75rem;
  height: .75rem;
  background: var(--tungsten);
  border: 0;
  border-radius: 0;
}

.f16-marks {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .4rem;
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--paper-dim);
}

.f16-presets-title { margin: 1.25rem 0 .5rem; }

/* 預設律動:2×2 框格,名稱在上、說明在下,看得出是可以按的 */
.f16-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.f16-preset {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  width: 100%;
  height: 100%;
  appearance: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: .6rem .7rem;
  font: inherit;
  font-size: .875rem;
  text-align: left;
  color: var(--paper);
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}

.f16-preset:hover {
  color: var(--tungsten);
  border-color: var(--tungsten-d);
}

.f16-preset-sub {
  color: var(--paper-dim);
  font-size: .75rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   和弦與指板
   -------------------------------------------------------------------------- */

.f16-chords {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.25rem 0 1.5rem;
}

.f16-chord {
  appearance: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: .45rem .8rem;
  font-family: var(--mono);
  font-size: .875rem;
  color: var(--paper-dim);
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}

.f16-chord:hover { color: var(--paper); }

.f16-chord.is-selected {
  color: var(--tungsten);
  border-color: var(--tungsten);
}

.f16-chord-grid {
  display: grid;
  gap: 2rem 3.5rem;
  align-items: center;
}

@media (min-width: 64rem) {
  .f16-chord-grid { grid-template-columns: 4fr 8fr; }
}

.f16-chord-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 1rem;
}

.f16-chord-name {
  font-family: var(--serif, var(--display));
  font-weight: 300;
  font-size: 1.375rem;
  color: var(--paper);
}

.f16-chord-desc {
  margin: .75rem 0 0;
  color: var(--paper-dim);
  font-size: .9375rem;
  line-height: 1.85;
}

.f16-facts {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .8125rem;
}

.f16-facts div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.f16-facts dt { color: var(--paper-dim); }

.f16-facts dd {
  margin: 0;
  color: var(--paper);
}

.f16-fret-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.f16-fret-svg {
  display: block;
  width: 100%;
  min-width: 540px;
  height: auto;
  user-select: none;
}

.f16-noscript {
  padding: 0 var(--gutter);
  color: var(--paper-dim);
}

/* --------------------------------------------------------------------------
   進場:沿用全站的 rise,跟其他頁同一個節奏
   -------------------------------------------------------------------------- */

.f16 > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.f16 > *:nth-child(1) { animation-delay: .15s; }
.f16 > *:nth-child(2) { animation-delay: .22s; }
.f16 > *:nth-child(3) { animation-delay: .29s; }
.f16 > *:nth-child(n+4) { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  /* fill-mode: both 會把元素停在 opacity 0,必須寫回來(CLAUDE.md 記過的坑) */
  .f16 > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .f16-wrist-icon { transform: none !important; }
}

/* 頁尾版權:跟社群連結同一個次要色,字再小一點,不搶東西 */
.f16-copy {
  margin: 1.25rem 0 0;
  color: var(--paper-dim);
  font-size: .7rem;
  letter-spacing: .08em;
}

/* 撥弦記號切到 D U 時出現的那一行(UD 的梗)。
   掛在按鈕列正下方、對齊「撥弦記號」按鈕,落在 .f16-bar 底部 1.25rem 的留白裡,不多佔一行 */
.f16-ud-note {
  position: absolute;
  left: 0;
  top: 100%;
  margin: .2rem 0 0;
  white-space: nowrap;
  color: var(--tungsten);
  font-size: .6875rem;
  line-height: 1.3;
  letter-spacing: .04em;
}

/* 速度刻度:每個數字對準滑塊在那個數值時的中心(50~170 → 0~100%)。
   容器左右各縮 .375rem(滑塊寬度的一半),百分比才會跟滑塊位置一致。
   每個數字都置中對準;說明文字排在數字下面(最右邊的 170 說明靠右,其他從數字左緣往右排)。 */
.f16-tempo-marks {
  position: relative;
  height: 2.6em;
  margin: .4rem .375rem 0;
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.3;
  color: var(--paper-dim);
}
.f16-tempo-marks > span {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* 中間的刻度:數字置中對準(往左推半個數字寬,等寬字型 1 個字 = 1ch),說明從數字左緣往右排。
   說明如果也置中,窄螢幕上「50」和「90」的說明會互相疊到(英文、日文實測會撞) */
.f16-tempo-marks > .is-mid { align-items: flex-start; transform: translateX(calc(var(--digits) * -.5ch)); }
/* 最右邊的 170 從右緣錨定(right: 0)再往右推半個數字寬:用 left: 100% 的話可用寬度是 0,說明會被擠成一字一行 */
.f16-tempo-marks > .is-end { align-items: flex-end; transform: translateX(calc(var(--digits) * .5ch)); }
.f16-tempo-marks b { font-weight: 400; color: var(--paper); }
/* 說明最多佔到下一個刻度前(刻度間距 33.3%),放不下就折成兩行,不會跟隔壁的字疊在一起。
   窄螢幕(英文、320 寬的手機)才會折行,所以只在窄螢幕把刻度區加高到三行 */
.f16-tempo-marks > span { max-width: 31%; }
.f16-tempo-marks > span > [data-i18n] { white-space: normal; }
@media (max-width: 26rem) {
  .f16-tempo-marks { height: 3.9em; }
}
/* 更窄的手機(iPhone SE 這類 320 寬):130 和 170 的說明擠在同一段,170 的說明錯開到下一行 */
@media (max-width: 22.5rem) {
  .f16-tempo-marks > .is-end > [data-i18n] { margin-top: 1.3em; }
  /* 英文的 wrist limit 錯開後又會折成兩行,多留一行 */
  :lang(en) .f16-tempo-marks { height: 5.2em; }
}

/* 160 的旗標:掛在滑桿上方,文字往左延伸,結尾的數字 160 置中對準滑塊位置 */
.f16-tempo-flag {
  position: relative;
  height: 1.4em;
  margin: .5rem .375rem .2rem;
  font-size: .6875rem;
  line-height: 1.4em;
  color: var(--tungsten);
}
.f16-tempo-flag > span {
  position: absolute;
  bottom: 0;
  white-space: nowrap;
  /* 160 三個字的一半約 0.95em:整串往左推到「160」的中心剛好落在這個位置 */
  transform: translateX(calc(-100% + .95em));
}
.f16-tempo-flag b {
  margin-left: .45em;
  font-family: var(--mono);
  font-weight: 400;
}
.f16-tempo-flag b::after {
  /* 數字底下一小段直線,指向滑桿 */
  content: "";
  position: absolute;
  right: .95em;
  bottom: -.3rem;
  width: 1px;
  height: .3rem;
  background: currentColor;
}

/* 練習計時。數值固定寬度、等寬數字:秒數與小節數一直在跳,寬度跟著變的話整列會重新換行(同鐘擺狀態那個坑) */
.f16-timer { min-width: 9rem; }
.f16-timer .f16-label {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.f16-timer-reset {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: .04em;
  color: var(--paper-dim);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: rgba(121, 131, 143, .5);
  cursor: pointer;
}
.f16-timer-reset:hover,
.f16-timer-reset:focus-visible { color: var(--tungsten); }
.f16-timer-value {
  width: 10rem;
  margin-top: .1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

/* 和弦試聽的兩顆按鈕(刷弦 / 琶音)排在一起,窄的時候整組換行 */
.f16-chord-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.f16-chord-btns .f16-textbtn { white-space: nowrap; }