@font-face { font-family:Onest; font-style:normal; font-weight:400 700; font-display:swap; src:url("/assets/fonts/onest-variable.ttf") format("truetype"); }
:root { color-scheme:dark; font-family:Onest,sans-serif; font-synthesis:none; color:#fff5e9; background:#2d0c00; --cream:#fff5e9; --muted:#e0b696; --ring-size:min(108vw,464px); --primary-size:clamp(78px,22vw,95px); --side-size:clamp(60px,16.4vw,71px); }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; min-height:100svh; overflow-x:clip; background:radial-gradient(ellipse at 50% 39%,#923405 0%,#702102 31%,#461200 61%,#260900 100%); }
button,input,select,textarea { font:inherit; }
button { color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button:disabled { cursor:default; }
[hidden] { display:none!important; }
button:focus-visible,a:focus-visible,#ring:focus-visible { outline:2px solid #ffe0bb; outline-offset:5px; }
.screen-pulse { position:fixed; inset:0; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 39%,#ff791d 0%,#dc4e0b 42%,#b33308 100%); }
.metronome { position:relative; width:min(100%,470px); min-height:100dvh; margin:auto; padding:max(30px,env(safe-area-inset-top)) 26px max(clamp(12px,calc(9dvh - 20px),66px),env(safe-area-inset-bottom)); display:grid; grid-template-rows:auto 1fr auto; align-items:start; overflow:clip; }
.brand-header { display:flex; align-items:flex-start; justify-content:space-between; width:100%; gap:8px; }
.brand-copy { min-width:0; }
#instruction { margin:0; color:#fff7ee; font-size:clamp(25px,6.9vw,30px); line-height:1.17; font-weight:500; letter-spacing:-.025em; }
.brand-copy p { margin:5px 0 0; color:#e1b99c; font-size:clamp(11px,3.15vw,13.4px); line-height:1.4; white-space:nowrap; letter-spacing:.003em; }
.support { display:grid; place-items:center; flex:none; width:44px; height:44px; margin:-3px -7px 0 0; color:#fff7ee; border-radius:50%; text-decoration:none; }
.support svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linejoin:round; }
.support[aria-disabled="true"] { cursor:default; }
.ring-section { position:relative; width:100%; height:calc(var(--ring-size)*.86); margin-top:clamp(26px,7dvh,66px); }
.ring-stage { position:absolute; width:var(--ring-size); aspect-ratio:1; top:calc(var(--ring-size)*-.07); left:50%; transform:translateX(-50%); container-type:inline-size; }
#ring { display:block; width:100%; height:100%; overflow:visible; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; fill:none; -webkit-tap-highlight-color:transparent; }
#ring.is-dragging { cursor:grabbing; }
#ring[aria-disabled="true"] { cursor:default; }
#ring:focus,#ring:focus-visible { outline:none; }
.ring-section:has(#ring:focus-visible) .ring-track { stroke:#fff8ec; stroke-width:2.3; }
.ring-track { fill:none; stroke:#ffd0a9; stroke-width:1.45; }
.ring-minor-ticks { stroke:#f5bd91; stroke-width:.95; opacity:.85; }
.ring-major-ticks { stroke:#fff5e9; stroke-width:2.15; }
.ring-markers { pointer-events:none; }
.ring-markers text { fill:#fff0df; font-size:11.5px; font-weight:400; }
.handle { stroke:#fff2dc; stroke-width:.9; }
[data-handle] { pointer-events:none; }
.ring-wave { pointer-events:none; fill:none; stroke:#ffdab7; stroke-width:.75; opacity:0; transform-box:view-box; transform-origin:195px 195px; }
.ring-handle-touch { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; touch-action:none; -webkit-tap-highlight-color:transparent; }
.ring-handle-touch [data-handle-hit] { pointer-events:all; }
.metronome[data-state="running"] .ring-handle-touch { display:none; }
.cadence-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60%; display:flex; flex-direction:column; align-items:center; text-align:center; pointer-events:none; padding-top:5px; }
#cadence-button,#cadence-input { width:100%; padding:0; margin:0; border:0; border-radius:0; color:#fff8f0; background:transparent; font-size:clamp(88px,25.6cqw,116px); line-height:1.02; font-weight:600; letter-spacing:-.065em; font-variant-numeric:tabular-nums; text-align:center; pointer-events:auto; }
#cadence-input { appearance:none; -webkit-appearance:none; caret-color:#ffa14a; -webkit-text-fill-color:#fff8f0; }
#cadence-input:focus,#cadence-input:focus-visible { outline:none; box-shadow:none; }
#cadence-input::selection { background:transparent; color:inherit; }
#cadence-button[data-touch-return]:focus-visible { outline:none; }
#cadence-button:disabled { opacity:1; -webkit-text-fill-color:#fff8f0; color:#fff8f0; pointer-events:none; }
.edit-underline { flex:none; width:30px; height:1.5px; margin-top:9px; border-radius:999px; background:#ff9b40; }
.unit { margin:12px -10px 0; color:#fff0df; font-size:clamp(12px,3.55cqw,15px); line-height:1.4; font-weight:400; letter-spacing:.01em; white-space:nowrap; }
.inline-error { margin:0; color:#ffe0bf; font-size:12px; line-height:1.4; text-align:center; }
.cadence-error { position:absolute; top:34%; left:50%; transform:translate(-50%,-100%); width:max-content; max-width:60%; padding:3px 9px; font-size:12px; font-weight:600; border-radius:7px; background:#ca2637; color:#fff8f0; pointer-events:none; }
.cadence-error:empty { display:none; }
.control-area { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:118px; align-items:start; width:min(80vw,344px); justify-self:center; position:relative; margin-top:clamp(8px,calc(4dvh - 12px),26px); }
.adjustments,.actions,.session-control,.secondary-controls { display:contents; }
.circle-control { grid-row:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; width:100%; height:118px; padding:calc((var(--primary-size) - var(--side-size))/2) 0 0; border:0; background:none; color:var(--cream); text-align:center; }
.left-control { grid-column:1; }
.right-control { grid-column:3; }
.primary,.end { grid-column:2; padding-top:0; }
.control-face { display:grid; place-items:center; flex:none; width:var(--side-size); height:var(--side-size); border:1px solid #f2c6a381; border-radius:50%; background:#ffe2c61c; }
.primary .control-face,.end .control-face { width:var(--primary-size); height:var(--primary-size); background:#fff9f1; color:#3c1000; border:0; }
.control-face svg { width:28px; height:28px; fill:currentColor; }
.primary-icon { transform:translateX(1px); }
.end .control-face svg { width:30px; height:30px; }
.control-label { display:block; width:100%; margin-top:12px; font-size:clamp(12px,3.35vw,14px); line-height:18px; font-weight:400; white-space:nowrap; }
.control-icon.music-note { width:25px; height:29px; }
.note-stem { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.control-icon.step-dots { width:34px; height:26px; }
.metronome[data-step="second"] .second-step-dot { fill:none; stroke:currentColor; stroke-width:1.25; opacity:.7; }
.adjust-button { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.adjust-button .adjust-icon { width:30px; height:30px; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; fill:none; }
.adjust-button:disabled { opacity:.4; }
.circle-control:is(:active,[data-held]):not(:disabled) .control-face { background:#ffe5cc30; }
.primary:active .control-face,.end:active .control-face { background:#f3e4d5; }
.audio-error { position:absolute; width:100%; left:0; top:calc(100% + 8px); }
.options-sheet { position:fixed; inset:auto; width:168px; max-width:calc(100vw - 24px); margin:0; padding:7px; overflow:visible; border:1px solid #e3ae8299; border-radius:16px; color:#fff5eb; background:linear-gradient(145deg,#77381ded,#50200eea); box-shadow:0 6px 16px #23080026; }
.options-sheet::backdrop { background:transparent; }
.options-sheet::after { content:""; position:absolute; width:13px; height:13px; bottom:-7.5px; left:calc(var(--arrow-x,50%) - 6.5px); transform:rotate(45deg); background:#532310; border-right:1px solid #e3ae8299; border-bottom:1px solid #e3ae8299; }
.option { display:grid; grid-template-columns:20px minmax(0,1fr) 16px; align-items:center; column-gap:7px; width:100%; height:44px; padding:0 7px; border:0; border-radius:10px; background:transparent; color:inherit; font-size:13px; font-weight:400; text-align:left; white-space:nowrap; }
.option + .option { border-top:1px solid #ffdab51a; }
.option[aria-checked="true"] { background:#ed8c3e39; box-shadow:inset 0 0 0 1px #f5b07138; }
.option-symbol { width:20px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.option-radio { width:14px; height:14px; border:1px solid #e8c0a791; border-radius:50%; }
[aria-checked="true"] .option-radio { border:1.5px solid #fff4e5; background:#ff8c38; box-shadow:inset 0 0 0 2px #8c451f; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.sr-only:focus-visible { width:auto; height:auto; clip-path:none; top:4px; right:4px; margin:0; padding:4px; background:#642b13; z-index:1; }
@media (max-height:700px) {
  .metronome { padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  #instruction { font-size:24px; }
  .brand-copy p { font-size:11px; margin-top:4px; }
  .ring-section { margin-top:10px; }
  .control-area,.circle-control { height:110px; grid-template-rows:110px; }
}
@media (prefers-reduced-motion:reduce) { .screen-pulse,.ring-wave { opacity:0!important; } }