/* Hallmark · shape: app screen + landing hero · genre: atmospheric · theme: Kiln (deal 3/3, seed three-metronome-tool-brass-37d7·093b16ca·2026-10-31·r0)
 * nav: top bar with quiet anchors · signature: the brass pendulum swinging on the audio clock, weight drag sets tempo · states: running, stopped, muted, dragging weight, reduced motion, no-script · kiln: ember
 * axes: dark/high-contrast-serif/warm · posture: full-palette · contrast: pass · v2.0.0
 * waive: trow-row long label — table-row pattern, each cell wraps inside its own grid track, nowrap would break 390px */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a tool-plus-landing page invites section padding rituals; kept six screens, each one idea, and let the tempo table carry the figures */
@import url("../tokens.css");
@import url("../base.css");

:root {
  --met-wood: #4a382c;
  --met-wood-dark: #3a2c22;
  --met-brass: #c9963f;
  --met-brass-dark: #8f6a2c;
  --met-panel: #e8e0d0;
  --met-floor: oklch(21% 0.016 45);
  --met-shadow: oklch(8% 0.01 40 / 0.55);
  --met-panel-shade: oklch(84% 0.02 80);
  --met-tick: oklch(30% 0.02 40);
  --met-term: oklch(45% 0.02 40);
  --met-brand: oklch(35% 0.02 40);
  --beat-ring: oklch(94% 0.02 80 / 0.35);
  --beat-ring-down: oklch(70% 0.2 45 / 0.5);
  --vol-track: oklch(96% 0.01 80 / 0.25);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { height: auto; }

/* ============ Hero：工具即首屏 ============ */
.hero { position: relative; height: 100svh; min-height: 620px; background: var(--color-paper); overflow: clip; }
#gl { position: absolute; inset: 0; }
#gl canvas { display: block; touch-action: none; }

/* ---------- 顶栏 ---------- */
.topbar { position: absolute; inset: 0 0 auto 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); z-index: var(--z-sticky); }
.topbar a, .topbar button { pointer-events: auto; }
.wordmark { display: flex; align-items: baseline; gap: var(--space-sm); text-decoration: none; }
.wordmark__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); letter-spacing: var(--tracking-display); }
.wordmark__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.nav { display: flex; align-items: baseline; gap: var(--space-md); }
.nav a { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none; }
.nav a:hover { color: var(--color-ink); }
.hint { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.hint__sep { width: var(--rule-hair); height: 14px; background: var(--color-rule); }
.tophint { position: absolute; inset: 0 0 auto 0; justify-content: flex-end; padding: var(--space-2xl) var(--space-lg) 0 0; z-index: var(--z-raised); pointer-events: none; }

/* ---------- 拍点（由音频时钟驱动 .is-on） ---------- */
.dockwrap { position: absolute; left: 50%; translate: -50% 0; bottom: var(--space-lg); display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); z-index: var(--z-raised); }
.beats { display: flex; gap: var(--space-sm); }
.beat { width: 10px; height: 10px; border-radius: var(--radius-pill); background: transparent; box-shadow: inset 0 0 0 1.5px var(--beat-ring); transition: background-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.beat--down { box-shadow: inset 0 0 0 1.5px var(--beat-ring-down); }
.beat.is-on { background-color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.beat--down.is-on { background-color: var(--color-accent); box-shadow: inset 0 0 0 1.5px var(--color-accent); }

/* ---------- 控制坞 ---------- */
.dock { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-well); }
.dock__group { display: flex; align-items: center; gap: var(--space-sm); }
.dock__rule { width: var(--rule-hair); align-self: stretch; background: var(--color-rule); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 44px; padding: var(--space-2xs) var(--space-md); border: none; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--text-md); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); }
.btn:active { translate: 0 1px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); min-width: 116px; }
.btn--primary:hover { background: var(--color-focus); }
.btn--ghost { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.btn--ghost:hover { background: var(--color-paper-3); }
.btn--step { min-width: 44px; min-height: 44px; padding: 0; }
.btn__icon { width: 18px; height: 18px; fill: currentColor; }

.tempo__figure { min-width: 132px; text-align: center; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 96px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.tempo__unit { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; color: var(--color-muted); margin-top: var(--space-2xs); }
.tempo__side { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }

.range { appearance: none; -webkit-appearance: none; width: 264px; height: 28px; background: linear-gradient(to right, var(--heat-2), var(--heat-4), var(--heat-6)) center / 100% 2px no-repeat; cursor: pointer; }
.range::-webkit-slider-runnable-track { background: transparent; }
.range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--color-accent); border: none; }
.range::-moz-range-track { background: transparent; }
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--color-accent); border: none; }
.range:disabled { opacity: 0.45; cursor: not-allowed; }
.range__scale { display: flex; justify-content: space-between; width: 264px; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }

.seg { display: flex; gap: var(--space-3xs); padding: var(--space-3xs); background: var(--color-paper); border-radius: var(--radius-pill); }
.seg__btn { min-height: 40px; padding: 0 var(--space-sm); border: none; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg__btn:hover { color: var(--color-ink); }
.seg__btn[aria-pressed="true"] { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.seg__btn:disabled { opacity: 0.45; cursor: not-allowed; }

.vol { appearance: none; -webkit-appearance: none; width: 96px; height: 28px; background: linear-gradient(to right, var(--vol-track), var(--vol-track)) center / 100% 2px no-repeat; cursor: pointer; }
.vol::-webkit-slider-runnable-track { background: transparent; }
.vol::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--color-ink-2); border: none; }
.vol::-moz-range-track { background: transparent; }
.vol::-moz-range-thumb { width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--color-ink-2); border: none; }
.vol:disabled { opacity: 0.45; cursor: not-allowed; }

.dock__label { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }

/* ---------- 无脚本回退 ---------- */
.noscript-note { position: absolute; left: 50%; translate: -50% 0; bottom: calc(var(--space-2xl) + var(--space-2xl)); font-size: var(--text-sm); color: var(--color-muted); z-index: var(--z-raised); }

/* ============ 落地页分区 ============ */
.section { padding-block: var(--section-gap); }
.section--band { background: var(--color-paper-2); color: var(--color-ink); border-block: var(--rule-hair) solid var(--color-rule); }
.section__head { margin-bottom: var(--space-xl); }
.section__title { font-size: var(--text-section); }
.section__note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* 宣言：逐词点亮 */
.claim { min-height: 72svh; display: grid; align-content: center; }
.claim__text { max-width: 24ch; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-3xl); line-height: 1.3; letter-spacing: var(--tracking-display); }
.claim__line { display: block; white-space: nowrap; }
.claim__word { color: color-mix(in oklab, var(--color-ink) 30%, var(--color-paper)); transition: color var(--dur-long) var(--ease-out); }
.claim__word.is-lit { color: var(--color-ink); }
.claim__src { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

/* 材质三行 */
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--space-lg); align-items: baseline; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.mrow:last-of-type { border-bottom: var(--rule-hair) solid var(--color-rule); }
.mrow__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
.mrow__note { max-width: 46ch; font-size: var(--text-md); color: var(--color-ink-2); text-wrap: pretty; }
.mrow__fig { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; color: var(--color-ink-2); white-space: nowrap; }

/* 速度术语表：点行定速 */
.trow-row { display: grid; grid-template-columns: 14px minmax(0, 0.9fr) minmax(0, 1.1fr) auto auto; gap: var(--space-md); align-items: center; width: 100%; padding: var(--space-sm); background: transparent; border: none; border-top: var(--rule-hair) solid var(--color-rule); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.trow-row:last-of-type { border-bottom: var(--rule-hair) solid var(--color-rule); }
.trow-row:hover { background: var(--color-paper-2); }
.trow-row:focus-visible { outline-offset: -2px; }
.trow__key { width: 14px; height: 14px; border-radius: 3px; }
.trow__term { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); letter-spacing: var(--tracking-display); }
.trow__cn { font-size: var(--text-sm); color: var(--color-muted); }
.trow__range { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.trow__range small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); letter-spacing: 0; }
.trow__hint { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); white-space: nowrap; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.trow-row:hover .trow__hint { opacity: 1; }

/* 三步用法 */
.steps { display: grid; gap: var(--space-lg); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; }
.step__no { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-2xl); letter-spacing: -0.03em; color: var(--color-ink-2); font-variant-numeric: lining-nums tabular-nums; }
.step__body p { max-width: 52ch; }
.step__body .step__title { font-weight: 500; }
.step__body .step__note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2xs); }

/* 页脚 */
.footer { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); }
.footer__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.footer__keys { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.footer__note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ============ 响应式 ============ */
@media (max-width: 56rem) {
  .dockwrap { left: var(--space-lg); right: var(--space-lg); translate: 0 0; }
  .dock { justify-content: center; flex-wrap: wrap; }
  .dock__rule { display: none; }
  .tempo__figure { font-size: 72px; }
  .range { width: 200px; }
  .range__scale { width: 200px; }
  .hint, .nav { display: none; }
  .mrow { grid-template-columns: minmax(0, 1fr) auto; }
  .mrow__note { grid-column: 1 / -1; }
  .trow-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .trow__cn, .trow__hint { display: none; }
  .section { padding-block: var(--section-gap-s); }
}

@media (max-width: 40rem) {
  .hero { min-height: 100svh; }
  .dockwrap { gap: var(--space-sm); bottom: var(--space-xs); left: var(--space-xs); right: var(--space-xs); translate: 0 0; }
  /* 紧凑双行网格：行1 播放 | 数字+步进+滑杆；行2 拍号 | 轻敲+音量 */
  .dock { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); }
  .dock__rule { display: none; }
  .dock__group { justify-content: center; }
  .dock__label { display: none; }
  #tapBtn { white-space: nowrap; padding: var(--space-3xs) var(--space-xs); font-size: 13px; }
  .dock__group:nth-of-type(7) .btn__icon { display: none; }
  .seg__btn { padding: 0 7px; }
  .tempo__side { flex-direction: row; align-items: center; gap: var(--space-xs); }
  .tempo__figure { font-size: 40px; min-width: 52px; text-align: left; }
  .tempo__unit { display: none; }
  .btn { min-height: 34px; padding: var(--space-3xs) var(--space-md); }
  .btn--primary { min-width: 0; flex: 1; }
  .btn--step { min-width: 34px; min-height: 34px; }
  .btn__icon { width: 15px; height: 15px; }
  .range { flex: 1; width: auto; min-width: 0; height: 24px; }
  .range::-webkit-slider-thumb { width: 22px; height: 22px; }
  .range::-moz-range-thumb { width: 22px; height: 22px; }
  .range__scale { display: none; }
  .seg { padding: var(--space-3xs); gap: var(--space-3xs); }
  .seg__btn { min-height: 30px; padding: 0 var(--space-xs); font-size: var(--text-xs); }
  .vol { width: 56px; height: 24px; }
  .vol::-webkit-slider-thumb { width: 16px; height: 16px; }
  .vol::-moz-range-thumb { width: 16px; height: 16px; }
  .claim { min-height: 56svh; }
  .claim__text { font-size: var(--text-2xl); }
  .step__no { font-size: var(--text-xl); }
}