:root {
  color-scheme: light;
  --ink: oklch(23% 0.012 62);
  --subtle-ink: oklch(42% 0.014 65);
  --paper: oklch(92% 0.018 75);
  --bench: oklch(84% 0.025 70);
  --metal: oklch(77% 0.022 72);
  --metal-light: oklch(88% 0.018 75);
  --metal-dark: oklch(64% 0.021 70);
  --screen: oklch(21% 0.017 67);
  --screen-ink: oklch(90% 0.068 82);
  --signal: oklch(44% 0.14 39);
  --signal-strong: oklch(34% 0.1 39);
  --signal-dark: oklch(30% 0.08 38);
  --signal-ink: oklch(98% 0.012 75);
  --ring: oklch(55% 0.17 44 / .48);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 7%, oklch(96% 0.02 78 / .9), transparent 30rem),
    linear-gradient(135deg, oklch(80% 0.03 72), oklch(88% 0.022 74));
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

.workbench {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(1rem, 4vw, 3.5rem);
}

.metronome {
  width: min(100%, 900px);
  overflow: hidden;
  border: 1px solid oklch(47% 0.018 65 / .38);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--metal-light), var(--metal) 42%, oklch(70% 0.02 70));
  box-shadow: 0 2px 0 oklch(100% 0 0 / .65) inset, 0 -4px 8px oklch(35% 0.01 60 / .2) inset, 0 28px 60px oklch(32% 0.014 60 / .28);
}

.instrument-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.2rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.6rem) 1rem; }
.brand-lockup { display: flex; align-items: center; gap: .8rem; }
.brand-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px oklch(100% 0 0 / .35), 0 1px 2px oklch(30% .04 35 / .5); }
.eyebrow { margin: 0 0 .08rem; color: var(--subtle-ink); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
h1 { margin: 0; font-size: 1.55rem; letter-spacing: .08em; }
.state { margin: 0; padding: .42rem .72rem; border: 1px solid oklch(43% .013 60 / .28); border-radius: 999px; color: var(--subtle-ink); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.metronome[data-playing="true"] .state { border-color: oklch(57% .17 39 / .58); color: var(--signal-dark); background: oklch(93% .04 62 / .58); }

.display-bay { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr); gap: 1rem; margin: 0 clamp(1rem, 4vw, 2.6rem); padding: clamp(1.25rem, 3vw, 2rem); border: 8px solid oklch(58% .018 67); border-radius: 17px; background: linear-gradient(145deg, oklch(49% .016 66), oklch(61% .018 68)); box-shadow: 0 2px 3px oklch(35% .01 60 / .42) inset, 0 1px 0 oklch(100% 0 0 / .27); }
.tempo-readout, .beat-readout { min-height: 170px; padding: 1.1rem 1.25rem; border-radius: 8px; background: linear-gradient(135deg, oklch(17% .015 65), var(--screen)); box-shadow: 0 1px 0 oklch(100% 0 0 / .11), 0 3px 8px oklch(24% .012 60 / .58) inset; }
.tempo-readout > label, .measure-label { display: block; color: oklch(72% .035 80); font-size: .76rem; font-weight: 700; letter-spacing: .12em; }
.bpm-value { display: flex; align-items: baseline; gap: .55rem; }
#bpm-input { width: min(100%, 5ch); margin-top: .15rem; padding: 0; border: 0; background: transparent; color: var(--screen-ink); font-family: ui-monospace, "Cascadia Mono", monospace; font-size: clamp(4rem, 10vw, 6.6rem); font-weight: 650; line-height: 1; letter-spacing: -.1em; }
#bpm-input { appearance: textfield; -moz-appearance: textfield; }
#bpm-input::-webkit-inner-spin-button, #bpm-input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
#bpm-unit { color: oklch(72% .04 80); font-family: ui-monospace, monospace; font-size: .85rem; font-weight: 700; letter-spacing: .08em; }
.measure-label b { color: var(--screen-ink); font-size: 1rem; }
.beat-lights { display: grid; grid-template-columns: repeat(4, 1fr); gap: .52rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.beat-lights li { display: grid; aspect-ratio: 1; max-width: 50px; place-items: center; border: 1px solid oklch(78% .03 80 / .24); border-radius: 50%; color: oklch(67% .025 79); font-family: ui-monospace, monospace; font-size: .78rem; transition: background .12s, color .12s, box-shadow .12s, transform .12s; }
.beat-lights li.is-active { border-color: var(--signal-strong); background: var(--signal-strong); color: var(--signal-ink); box-shadow: 0 0 18px oklch(50% .14 42 / .45); transform: scale(1.08); }
.beat-lights li.is-accent { box-shadow: 0 0 0 2px oklch(80% .07 80 / .32); }
.beat-lights li.is-hidden { visibility: hidden; }

.transport { display: flex; justify-content: center; align-items: center; gap: .9rem; padding: clamp(1.2rem, 3vw, 1.8rem) 1rem; }
.play-button { display: inline-flex; min-width: 220px; align-items: center; justify-content: center; gap: .7rem; padding: 1rem 1.35rem; border: 1px solid var(--signal-dark); border-radius: 12px; color: var(--signal-ink); background: linear-gradient(180deg, oklch(64% .19 41), var(--signal)); box-shadow: 0 2px 0 oklch(38% .13 35), 0 7px 11px oklch(35% .04 36 / .22); font-size: 1.08rem; font-weight: 800; letter-spacing: .04em; transition: transform .14s, box-shadow .14s, filter .14s; }
.play-button:hover { filter: brightness(1.05); }
.play-button:active { transform: translateY(2px); box-shadow: 0 0 0 var(--signal-dark); }
.play-icon { width: 0; height: 0; border-block: .46rem solid transparent; border-left: .68rem solid currentColor; }
.metronome[data-playing="true"] .play-icon { width: .68rem; height: .78rem; border: 0; background: linear-gradient(90deg, currentColor 0 32%, transparent 32% 66%, currentColor 66%); }
kbd { padding: .18rem .35rem; border: 1px solid oklch(100% 0 0 / .38); border-bottom-width: 2px; border-radius: 4px; color: oklch(100% 0 0 / .8); font-family: inherit; font-size: .65rem; font-weight: 600; }
.step-button { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid oklch(46% .014 64 / .42); border-radius: 10px; color: var(--ink); background: linear-gradient(180deg, oklch(90% .02 75), oklch(73% .021 71)); box-shadow: 0 1px 0 oklch(100% 0 0 / .62) inset, 0 2px 2px oklch(37% .014 64 / .2); font-size: 1.55rem; }
.step-button:active { transform: translateY(1px); box-shadow: 0 1px 1px oklch(37% .014 64 / .25) inset; }

.controls { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border-top: 1px solid oklch(45% .014 63 / .25); background: oklch(86% .02 74 / .46); }
.control { min-width: 0; padding: 1.25rem clamp(1rem, 2vw, 1.45rem); border-right: 1px solid oklch(45% .014 63 / .22); border-bottom: 1px solid oklch(45% .014 63 / .22); }
.control-heading { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.control label, .control-heading, fieldset legend { color: var(--ink); font-size: .86rem; font-weight: 800; }
.control output { color: var(--signal-dark); font-family: ui-monospace, monospace; font-size: .85rem; font-weight: 800; }
.tempo-control { grid-column: span 7; }
.tap-control { grid-column: span 5; }
.compact-control { grid-column: span 4; margin: 0; min-inline-size: 0; border: 0; border-right: 1px solid oklch(45% .014 63 / .22); border-bottom: 1px solid oklch(45% .014 63 / .22); }
.toggle-control { grid-column: span 5; }
.sound-control { grid-column: span 3; }
.volume-control { grid-column: span 4; }
input[type="range"] { width: 100%; height: 1.4rem; margin: .75rem 0 .2rem; accent-color: var(--signal-strong); }
.range-ends { display: flex; justify-content: space-between; color: var(--subtle-ink); font-family: ui-monospace, monospace; font-size: .75rem; }
.tap-button, .segmented button { border: 1px solid oklch(45% .014 63 / .42); color: var(--ink); background: oklch(91% .016 74); box-shadow: 0 1px 0 oklch(100% 0 0 / .68) inset; font-weight: 800; }
.tap-button { width: 100%; margin-top: .52rem; padding: .63rem .7rem; border-radius: 8px; }
.tap-button:active { background: oklch(79% .03 73); }
.helper { min-height: 1.2rem; margin: .48rem 0 0; color: var(--subtle-ink); font-size: .8rem; line-height: 1.45; }
fieldset { min-inline-size: 0; }
fieldset legend { padding: 0; margin: 0; }
.segmented { display: flex; margin-top: .7rem; }
.segmented button { flex: 1; min-height: 36px; padding: .35rem; border-right-width: 0; }
.segmented button:first-child { border-radius: 7px 0 0 7px; }
.segmented button:last-child { border-right-width: 1px; border-radius: 0 7px 7px 0; }
.segmented button[aria-pressed="true"] { position: relative; z-index: 1; border-color: var(--signal-dark); color: var(--signal-ink); background: var(--signal-strong); box-shadow: 0 1px 0 oklch(100% 0 0 / .18) inset; }
.segmented span { font-size: .73em; opacity: .78; }
.switch-row { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 1rem; }
.switch-row b, .switch-row small { display: block; }
.switch-row small { margin-top: .22rem; color: var(--subtle-ink); font-size: .72rem; font-weight: 500; }
.switch-row input { position: absolute; opacity: 0; }
.switch-row i { position: relative; width: 42px; height: 24px; flex: none; border-radius: 99px; background: oklch(54% .015 65); box-shadow: 0 1px 2px oklch(35% .01 60 / .25) inset; }
.switch-row i::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: oklch(97% .01 72); box-shadow: 0 1px 2px oklch(25% .01 60 / .35); content: ""; transition: transform .16s; }
.switch-row input:checked + i { background: var(--signal); }
.switch-row input:checked + i::after { transform: translateX(18px); }
.sound-control label { display: block; margin-bottom: .58rem; }
select { width: 100%; padding: .53rem 2rem .53rem .65rem; border: 1px solid oklch(45% .014 63 / .42); border-radius: 7px; color: var(--ink); background-color: oklch(91% .016 74); font-weight: 700; }
.audio-note { margin: 0; padding: .82rem clamp(1rem, 3vw, 2.6rem); color: var(--subtle-ink); background: oklch(73% .025 70 / .24); font-size: .75rem; line-height: 1.5; }

@media (max-width: 640px) {
  .workbench { place-items: start center; padding: 0; }
  .metronome { min-height: 100vh; border: 0; border-radius: 0; }
  .instrument-head { padding-top: 1.4rem; }
  .display-bay { grid-template-columns: 1fr; gap: .7rem; margin-inline: 1rem; padding: .75rem; border-width: 6px; }
  .tempo-readout, .beat-readout { min-height: 130px; }
  .beat-readout { display: flex; min-height: 110px; flex-direction: column; justify-content: center; }
  .beat-lights { margin-top: 1rem; }
  #bpm-input { font-size: 5.2rem; }
  .tempo-control, .tap-control, .compact-control, .toggle-control, .sound-control, .volume-control { grid-column: span 12; }
  .play-button { min-width: 0; flex: 1; }
  .control { padding: 1.1rem 1rem; }
  .toggle-control { min-height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}