:root{color-scheme:dark;--bg: #0b1020;--bg-deep: #070a12;--panel: rgba(12, 18, 35, .78);--panel-strong: rgba(16, 24, 45, .92);--stroke: rgba(155, 173, 216, .18);--stroke-strong: rgba(180, 193, 255, .32);--text: #edf2ff;--muted: rgba(237, 242, 255, .72);--accent: #7df0c3;--accent-strong: #38d6a6;--warning: #ffd66e;--shadow: 0 30px 80px rgba(0, 0, 0, .42);--radius-xl: 30px;--radius-lg: 22px;--radius-md: 16px}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif;background:radial-gradient(circle at top left,rgba(125,240,195,.18),transparent 28%),radial-gradient(circle at top right,rgba(104,144,255,.22),transparent 30%),linear-gradient(180deg,#0a0e1a,#070a12);color:var(--text)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 92%);mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 92%)}.app-shell{position:relative;display:grid;gap:22px;width:100vw;max-width:none;margin:0;padding:8px 0 6px}.exercise-toast-host{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;pointer-events:none}.exercise-toast{position:fixed;left:50%;top:max(16px,env(safe-area-inset-top));box-sizing:border-box;min-width:240px;max-width:min(92vw,520px);max-height:calc(100vh - 32px);padding:.95rem 1.1rem;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:#0a0e1ceb;color:#f7f7fb;box-shadow:0 18px 50px #00000052;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:center;font-size:.92rem;line-height:1.35;letter-spacing:.01em;white-space:normal;overflow-wrap:anywhere;opacity:0;transform:translate(-50%) translateY(-10px) scale(.98);will-change:opacity,transform;transition:opacity .16s ease,transform .16s ease}.exercise-toast.is-visible{opacity:1;transform:translate(-50%) translateY(0) scale(1)}.exercise-toast[data-tone=success]{border-color:#69e8ad6b;box-shadow:0 18px 50px #0b6f4a38}.exercise-toast[data-tone=warning]{border-color:#f7c96f6b;box-shadow:0 18px 50px #764c0f3d}.hero-card,.roll-card{position:relative;overflow:hidden;border:1px solid var(--stroke);background:linear-gradient(180deg,#141c32e0,#080c17e0);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.hero-card{display:grid;gap:22px;padding:28px;border-radius:var(--radius-xl)}.hero-card:after,.roll-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(135deg,rgba(125,240,195,.08),transparent 36%,rgba(56,214,166,.04))}.eyebrow,.panel-label,.stat-label,.marker-label,.panel-note,.meter-header,.status-pill{letter-spacing:.08em;text-transform:uppercase}.eyebrow,.panel-label,.stat-label,.panel-note,.meter-header,.status-pill{font-size:.74rem;color:var(--muted)}.hero-copy{max-width:980px}.hero-copy h1,.roll-header h2{margin:8px 0 0;font-weight:700;line-height:.95;letter-spacing:-.05em}.hero-copy h1{font-size:clamp(2.6rem,6vw,5rem)}.lede{margin:16px 0 0;max-width:58ch;font-size:1.06rem;line-height:1.55;color:var(--muted)}.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stat{padding:18px 16px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);background:#05091273}.stat strong{display:block;margin-top:10px;font-size:clamp(1.4rem,3vw,2.1rem);font-weight:700;letter-spacing:-.04em}.controls-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.roll-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}.roll-layout.is-exercise-open{grid-template-columns:minmax(0,1fr) 320px}.exercise-panel{display:grid;gap:14px;align-self:start;padding:16px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at top left,rgba(255,214,110,.12),transparent 32%),#05091280}.exercise-panel[hidden]{display:none}.exercise-panel-header{display:flex;justify-content:space-between;gap:18px;align-items:end}.exercise-note{max-width:32ch;text-align:right}.exercise-card{display:grid;gap:14px;padding:16px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,#0d1424eb,#070a12eb)}.exercise-card-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.exercise-details-toggle{min-height:40px;padding:0 14px;font-size:.82rem}.exercise-details{display:grid;gap:14px}.exercise-details[hidden]{display:none}.exercise-card-copy{display:grid;gap:8px}.exercise-badge{display:inline-flex;width:fit-content;padding:7px 10px;border-radius:999px;background:#ffd66e24;color:var(--warning);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.exercise-title{margin:0;font-size:clamp(1.4rem,2.8vw,2rem);font-weight:700;letter-spacing:-.04em}.exercise-description,.exercise-feedback,.exercise-reveal{margin:0;color:var(--muted);line-height:1.6}.exercise-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}.exercise-field{display:grid;gap:8px}.exercise-field[hidden]{display:none!important}.exercise-field--wide{grid-column:1 / -1}.exercise-field span{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.exercise-field select{min-height:52px;padding:0 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#0a0f1be6;color:var(--text);font:inherit;color-scheme:dark}.exercise-field select option{background:#0d1424;color:var(--text)}.exercise-field input[type=number]{min-height:52px;padding:0 16px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:var(--text);font:inherit}.exercise-field input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.exercise-actions{display:flex;flex-wrap:wrap;gap:12px}.exercise-panel.is-details-collapsed .exercise-card{gap:12px}.exercise-status-card{display:grid;gap:12px;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#ffffff08}.exercise-live-card{display:grid;gap:12px;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at top right,rgba(125,240,195,.08),transparent 34%),#ffffff08}.exercise-live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.exercise-live-stat{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a}.exercise-live-stat strong{display:block;margin-top:6px;font-size:1.05rem;letter-spacing:-.03em}.exercise-reveal{color:var(--text)}.exercise-guidance{margin:0;color:var(--text);line-height:1.5}.exercise-status-head{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--text)}.exercise-feedback[data-tone=success]{color:var(--accent)}.exercise-feedback[data-tone=warning]{color:var(--warning)}.exercise-phase-line{margin:0;display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--text)}.exercise-memory-countdown{margin:0;min-height:1.25em;text-align:center;font-size:1.45rem;letter-spacing:.03em;color:var(--accent);font-weight:700}.exercise-progress-track{height:12px;overflow:hidden;border-radius:999px;background:#ffffff0f}.exercise-progress-fill{width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffb86d,var(--accent));transition:width 80ms linear}.primary-button,.secondary-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;min-height:50px;padding:0 18px;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease}.primary-button{color:#05130f;background:linear-gradient(135deg,var(--accent),#d5ffe9);box-shadow:0 16px 32px #38d6a642}.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}.secondary-button{color:var(--text);background:#ffffff0f;border:1px solid rgba(255,255,255,.08)}.secondary-button.is-active{border-color:#7df0c394;background:#38d6a62e;color:#e9fff7;box-shadow:0 10px 22px #38d6a629}.secondary-button:disabled,.primary-button:disabled{cursor:not-allowed;opacity:.56;transform:none;box-shadow:none}.status-pill{margin-left:auto;padding:12px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:#ffffff0d}.reference-controls-group{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.reference-controls{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#05091275;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.reference-controls label{white-space:nowrap}.reference-controls input[type=range]{width:130px;accent-color:var(--accent)}.reference-controls span{min-width:44px;text-align:right;color:var(--text);font-weight:700}.meter-card{padding:18px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);background:#05091266}.meter-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.meter-track{height:12px;overflow:hidden;border-radius:999px;background:#ffffff0f}.meter-fill{width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--warning),var(--accent));transition:width 80ms linear}.roll-card{display:grid;gap:18px;padding:24px;border-radius:var(--radius-xl)}.roll-header{display:flex;gap:18px;justify-content:space-between;align-items:end}.roll-header h2{font-size:clamp(1.5rem,3vw,2.35rem)}.panel-note{max-width:38ch;margin:0;line-height:1.5;text-align:right}.roll-stage{position:relative;min-height:calc(100vh - 56px);overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at top,rgba(56,214,166,.08),transparent 34%),linear-gradient(180deg,#090e1bf0,#060912fa)}#pianoRoll{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;cursor:grab;touch-action:manipulation}.roll-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.current-marker{position:absolute;left:14px;right:14px;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}.marker-label{position:absolute;top:-11px;left:0;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#0b1020db;color:#edf2ffc2;font-size:.67rem}.current-note-chip{position:absolute;left:14px;bottom:14px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#0b1020db;font-weight:700;color:var(--text)}@media (max-width: 840px){.hero-stats,.roll-layout{grid-template-columns:1fr}.roll-header,.exercise-card-head{flex-direction:column;align-items:start}.panel-note{text-align:left}.exercise-panel-header{flex-direction:column;align-items:start}.exercise-note{text-align:left}.exercise-panel{min-height:auto}.status-pill{margin-left:0}.reference-controls{width:100%;justify-content:space-between;border-radius:14px}.reference-controls input[type=range]{width:min(52vw,190px)}}@media (max-width: 640px){.app-shell{width:100vw;padding:8px 0 10px}.hero-card,.roll-card{padding:18px;border-radius:24px}.roll-stage{min-height:calc(100vh - 40px)}.exercise-config-grid{grid-template-columns:1fr}.exercise-live-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.exercise-actions{flex-direction:column}.exercise-actions .primary-button,.exercise-actions .secondary-button,.exercise-field select{width:100%}}@media (max-width: 560px){.exercise-live-grid{grid-template-columns:1fr}}