:root{--bg: #eef1f6;--stage-bg: #ffffff;--panel-bg: #f6f8fc;--panel-border: #dde3ee;--ink: #1a2233;--ink-soft: #5b6678;--ink-faint: #93a0b5;--accent: #4f6bed;--accent-2: #7c5cff;--shadow: 0 .625em 2.5em rgba(30, 45, 90, .14);--ring-track: #dde3ee;--warn-y: #e6c94d;--limb-idle: #aab6ca}@media (prefers-color-scheme: dark){:root{--bg: #0c0f16;--stage-bg: #141926;--panel-bg: #1b2230;--panel-border: #2b3446;--ink: #e8edf6;--ink-soft: #a4b0c4;--ink-faint: #6b7890;--accent: #6f8bff;--accent-2: #9b7bff;--shadow: 0 .75em 3em rgba(0, 0, 0, .5);--ring-track: #2b3446;--warn-y: #e6c94d;--limb-idle: #4a5670}}:root[data-theme=light]{--bg: #eef1f6;--stage-bg: #ffffff;--panel-bg: #f6f8fc;--panel-border: #dde3ee;--ink: #1a2233;--ink-soft: #5b6678;--ink-faint: #93a0b5;--accent: #4f6bed;--accent-2: #7c5cff;--shadow: 0 .625em 2.5em rgba(30, 45, 90, .14);--ring-track: #dde3ee;--warn-y: #e6c94d;--limb-idle: #aab6ca}:root[data-theme=dark]{--bg: #0c0f16;--stage-bg: #141926;--panel-bg: #1b2230;--panel-border: #2b3446;--ink: #e8edf6;--ink-soft: #a4b0c4;--ink-faint: #6b7890;--accent: #6f8bff;--accent-2: #9b7bff;--shadow: 0 .75em 3em rgba(0, 0, 0, .5);--ring-track: #2b3446;--warn-y: #e6c94d;--limb-idle: #4a5670}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}#app{min-height:100%;padding:1.2em;display:flex;flex-direction:column;align-items:center;justify-content:center}.stage{position:relative;width:min(74em,96vw);background:var(--stage-bg);border:.0625em solid var(--panel-border);border-radius:1.25em;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:auto 1fr;container-type:inline-size;font-size:clamp(.8125em,1.35cqw,1.125em)}.hdr{display:flex;align-items:center;justify-content:space-between;padding:1.1em 1.4em;gap:1em;border-bottom:.0625em solid var(--panel-border)}.brand{display:flex;align-items:center;gap:.7em;min-width:0}.brand .logo{width:2.3em;height:2.3em;border-radius:.7em;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:#fff;font-size:1.2em}.brand h1{font-size:1.35em;margin:0;letter-spacing:.0125em;line-height:1.1}.brand p{margin:.15em 0 0;font-size:.82em;color:var(--ink-soft)}.exercise-flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:1em;text-align:center;font-size:clamp(1.6em,6cqw,3.2em);font-weight:700;color:var(--ink);background:var(--stage-bg);animation:exercise-flash-pop 1.8s ease-out}.exercise-flash[hidden]{display:none}@keyframes exercise-flash-pop{0%{opacity:0;transform:scale(.92)}10%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:0}}.body{padding:1.1em 1.6em 1.4em;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:.85em}.card{background:var(--panel-bg);border:.0625em solid var(--panel-border);border-radius:.9em;padding:.9em 1em}.card h2{margin:0 0 .7em;font-size:.82em;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);font-weight:700;display:flex;align-items:center;gap:.5em}.card h2 .h2-note{text-transform:none;letter-spacing:0;font-weight:500}.seg-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.3em;border:.0625em solid var(--panel-border);border-radius:.75em;padding:.3em;background:var(--stage-bg)}.seg-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--ink-soft);border-radius:.55em;padding:.65em .5em;font-size:.88em;font-weight:600;cursor:pointer;text-align:center;line-height:1.2}.seg-btn[aria-pressed=true]{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 .25em .9em color-mix(in srgb,var(--accent) 40%,transparent)}.chip-row{display:flex;gap:.55em;flex-wrap:wrap}.chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.0625em solid var(--panel-border);background:var(--stage-bg);color:var(--ink-soft);border-radius:.75em;padding:.65em 1.1em;font-size:.92em;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.5em}.chip[aria-pressed=true]{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 .25em .9em color-mix(in srgb,var(--accent) 40%,transparent)}.chip .ic{font-size:1.15em}.hint{font-size:.78em;color:var(--ink-faint);margin-top:.5em;line-height:1.4}.strong-beat-only-row{display:flex;align-items:center;gap:.5em;margin-top:1em;font-size:.92em;cursor:pointer}.cfg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9em;max-width:62%}.cfg-item{display:flex;flex-direction:column;gap:.3em}.cfg-label{font-size:.74em;color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.stepper{display:flex;align-items:center;gap:.5em;border:.0625em solid var(--panel-border);border-radius:.6em;background:var(--stage-bg);padding:.4em .6em}.stepper .val{font-size:1.3em;font-weight:800;font-variant-numeric:tabular-nums;flex:1;text-align:center}.stepper button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--ink-soft);font-size:1.1em;cursor:pointer;width:1.6em;height:1.6em;border-radius:.35em}.stepper button:hover{background:var(--panel-border)}.cfg-sub{font-size:.76em;color:var(--ink-faint)}.listen-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.0625em solid var(--panel-border);background:var(--stage-bg);color:var(--ink);border-radius:.5em;padding:.3em .7em;font-size:.82em;font-weight:700;cursor:pointer;align-self:flex-start}.cta-row{display:flex;justify-content:flex-end;margin-top:.2em}.btn-start{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-radius:.75em;padding:.8em 1.6em;font-size:1em;font-weight:800;box-shadow:0 .4em 1.25em color-mix(in srgb,var(--accent) 45%,transparent)}.foot-note{font-size:.75em;color:var(--ink-faint);text-align:center;max-width:40em;line-height:1.5;margin:.8em 0 0}.rotate-hint{display:none}@media (orientation: portrait){#app{display:none}.rotate-hint{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;text-align:center;padding:2em;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1.1em;line-height:1.5}}.rings-card{display:flex;flex-direction:column;gap:.6em}.rings-row{display:flex;align-items:center;gap:1.1em}.ring-col{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:none;width:8.4em}.rings-wrap{position:relative;width:8.4em;height:8.4em}.rings-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}.ring-track{stroke:var(--ring-track)}.ring-fill{stroke:var(--accent)}.ring-fill-outer{stroke:var(--accent-2)}.ring-ticks{stroke:var(--warn-y)}.beat-dot{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center}.beat-dot.pulse-strong{fill:#e6392b}.beat-dot.is-active{animation:strike-pulse .3s ease-out}.ring-center{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.ring-center .num{font-size:1.9em;font-weight:800;color:var(--ink);line-height:1}.rings-legend{font-size:.72em;color:var(--ink-faint);text-align:center;line-height:1.4}.rings-legend b{color:var(--ink-soft)}.figure-card{display:flex;align-items:center;justify-content:center}.figure-card svg.topdown{width:100%;max-width:22em;height:auto}.edge{fill:none;stroke:var(--accent-2);stroke-width:3;opacity:.85}.edge-dotted{stroke-dasharray:1 5;stroke-linecap:round}.edge-gradient-start{stop-color:#e6392b}.edge-gradient-end{stop-color:var(--accent)}.limb-ring{fill:none;stroke:var(--accent);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}.limb-dot{fill:var(--limb-idle)}.limb-label{fill:var(--ink-faint);font-weight:700}.limb-point.is-active .limb-dot{fill:var(--accent)}.limb-point.is-active.pulse-strong .limb-dot{fill:#e6392b}.limb-point.is-active .limb-ring{animation:strike-pulse .3s ease-out}@keyframes strike-pulse{0%{opacity:.5;transform:scale(.65)}to{opacity:0;transform:scale(1.3)}}.bpm-col{display:flex;flex-direction:column;gap:.2em}.bpm-num{font-size:1.7em;font-weight:800;color:var(--ink)}.bpm-num .u{font-size:.5em;font-weight:700;color:var(--ink-faint);margin-left:.3em}.bpm-ex{font-size:.85em;color:var(--ink-soft)}.bpm-ex small{display:block;font-size:.8em;color:var(--ink-faint)}.top-row{display:grid;grid-template-columns:1.3fr 1fr;gap:.9em;align-items:stretch}.session-progress-lbl{font-size:.78em;color:var(--ink-faint);text-align:right}.session-progress-lbl b{color:var(--ink);font-size:1.1em}.back-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.0625em solid var(--panel-border);background:var(--stage-bg);color:var(--ink-soft);border-radius:.5em;padding:.25em .6em;font-size:.76em;font-weight:600;cursor:pointer;margin-top:.2em}.hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:.35em}.mic-indicator{font-size:.72em;font-weight:600;color:var(--ink-soft);border:.0625em solid var(--panel-border);border-radius:.5em;padding:.2em .55em;white-space:nowrap}.mic-indicator[data-state=active]{color:#157f3b;border-color:#157f3b}.mic-indicator[data-state=calibrating]{color:var(--accent);border-color:var(--accent)}.mic-indicator[data-state=active-noisy],.mic-indicator[data-state=dead-mic]{color:#9a7b12;border-color:var(--warn-y)}.mic-indicator[data-state=lost],.mic-indicator[data-state=no-permission]{color:#b23b3b;border-color:#b23b3b}.graph-card{margin-top:.9em}.graph-title{font-size:.82em;color:var(--ink-soft);margin:0 0 .5em;font-weight:600}.quality-graph.qgraph{position:relative;overflow:hidden;height:6em;border-radius:.5em;background:var(--panel-bg);border:.0625em solid var(--panel-border)}.qgraph-strip{position:absolute;top:0;left:85%;height:100%;will-change:transform}.qgraph-path{stroke-width:2}.qgraph-path-avg{stroke-width:1.5;opacity:.55}.qgraph-now{position:absolute;top:0;bottom:0;left:85%;width:.125em;background:var(--warn-y);pointer-events:none}
