:root{--ink: #1f2b46;--navy: #17366a;--menu-ink: #2a4478;--secondary: #4f6796;--muted: #8aa0c6;--caption: #7f96bf;--border-blue: #d9e5ff;--border-btn: #d8e3f8;--border-teal: #dceaf7;--hairline: #f0f6fa;--wash-blue: #eef4ff;--wash-teal: #e2f4f4;--panel-tint: #f4fbfc;--teal: #009999;--teal-dark: #007777;--teal-edge: #007d7d;--teal-deep: #006767;--teal-ink: #2b5f79;font-family:Nunito,Avenir Next Rounded,Trebuchet MS,Verdana,sans-serif;background:radial-gradient(circle at top left,#fff,#f2f7ff 45%,#eaf2ff);color:var(--ink)}*{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh}.app{width:min(1180px,100%);margin:0 auto;padding:.9rem 1rem 1.4rem;display:flex;flex-direction:column;gap:.75rem}.app-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.app-bar-title h1{margin:0;font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:900;color:var(--navy);line-height:1.1}.app-bar-sub{margin:2px 0 0;font-size:.8rem;font-weight:800;color:var(--secondary)}.app-bar-menus{display:flex;gap:8px;flex-wrap:wrap}.menu-wrap{position:relative}.menu-trigger{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 13px;border-radius:10px;border:2px solid var(--border-btn);background:#fff;color:var(--secondary);font-family:inherit;font-size:.88rem;font-weight:800;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}.menu-trigger:hover{border-color:#a8d4e2}.menu-trigger.is-open{background:var(--teal);border-color:var(--teal-edge);color:#fff}.menu-trigger:active{transform:translateY(1px)}.menu-trigger-hint{font-size:.72rem;font-weight:800;color:var(--muted);padding-left:9px;border-left:2px solid var(--hairline)}.menu-trigger.is-open .menu-trigger-hint{color:#ffffffd9;border-left-color:#ffffff4d}.menu-caret{width:15px;height:15px;flex-shrink:0}.menu-panel{position:absolute;top:calc(100% + 8px);width:var(--menu-width, auto);max-width:calc(100vw - 28px);max-height:min(72vh,560px);overflow:auto;border:2px solid var(--border-blue);border-radius:14px;background:#fff;padding:10px;box-shadow:0 16px 30px #1d2f5933;z-index:80;animation:menu-in .15s ease}.menu-panel-left{left:0}.menu-panel-right{right:0}@keyframes menu-in{0%{opacity:0;transform:translateY(-4px)}}.menu-section{display:grid;gap:8px}.menu-heading{font-size:.68rem;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--caption);margin:2px 2px 0}.menu-divider{border-top:1px solid var(--hairline);margin:10px 0}.menu-check{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:.8rem;font-weight:800;color:var(--menu-ink);cursor:pointer}.menu-check input{width:17px;height:17px;accent-color:var(--teal);flex-shrink:0}.menu-field{display:grid;gap:5px;font-size:.78rem;font-weight:800;color:var(--teal-ink)}.menu-field select,.menu-field input{width:100%;min-height:38px;padding:6px 10px;border-radius:11px;border:2px solid var(--border-teal);background:#fff;color:var(--teal-ink);font-family:inherit;font-size:.82rem;font-weight:800}.menu-field select:hover,.menu-field input:hover{border-color:#a8d4e2}.levels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:6px}.level-card{display:grid;gap:2px;text-align:left;padding:8px 10px;border-radius:10px;border:2px solid var(--border-teal);background:#fff;color:var(--menu-ink);font-family:inherit;cursor:pointer;transition:background .12s ease,border-color .12s ease}.level-card:hover:not(.active){background:var(--wash-blue);border-color:#a8d4e2}.level-card strong{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:.85rem;font-weight:900}.level-check{color:var(--teal);font-size:.9rem}.level-notes{font-size:.71rem;font-weight:700;color:var(--muted);line-height:1.25}.level-score{font-size:.71rem;font-weight:900;color:var(--secondary)}.level-card.active{border-color:var(--teal);background:var(--wash-teal)}.level-card.active .level-score{color:var(--teal-dark)}.segmented{display:flex;gap:8px}.segmented button{flex:1 1 0;min-height:38px;padding:6px 10px;border-radius:11px;border:2px solid var(--border-teal);background:#fff;color:var(--teal-ink);font-family:inherit;font-size:.82rem;font-weight:800;cursor:pointer;white-space:nowrap}.segmented button:hover:not(.active){border-color:#a8d4e2}.segmented button.active{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:900}.level-progress{height:8px;border-radius:999px;background:#e6ebf5;overflow:hidden}.level-progress-fill{height:100%;width:0;background:var(--teal);border-radius:999px;transition:width .25s ease}.stage{display:grid;grid-template-columns:minmax(0,4fr) minmax(190px,1fr);grid-template-areas:"mic target";gap:12px;align-items:start}.mic-panel{grid-area:mic;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;border:2px solid var(--border-teal);background:#fff}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head h2{margin:0;font-size:1.05rem;font-weight:900;color:#163a52}.mic-stop{min-height:36px;padding:0 14px;border-radius:11px;border:2px solid #ffd7d7;background:#fff;color:#d34545;font-family:inherit;font-size:.82rem;font-weight:800;cursor:pointer}.mic-stop:hover{border-color:#ff5b5b}.pitch-lane{position:relative;height:clamp(250px,40vh,360px);border-radius:14px;border:2px solid var(--border-teal);background:linear-gradient(180deg,#f9fbff,#f0f5ff);overflow:hidden;transition:background-color .18s ease,border-color .18s ease}.pitch-canvas{width:100%;height:100%;display:block}.pitch-lane.is-idle .pitch-canvas{opacity:.4}.mic-cta{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:1rem;background:#f9fbffb8}.start-mic-btn{display:inline-flex;align-items:center;gap:11px;padding:15px 32px;border:0;border-radius:999px;background:var(--teal);color:#fff;font-family:inherit;font-size:clamp(1rem,2vw,1.2rem);font-weight:900;cursor:pointer;box-shadow:0 4px 0 var(--teal-deep),0 10px 22px #007a7a40;transition:background .12s ease}.start-mic-btn:hover{background:var(--teal-dark)}.start-mic-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--teal-deep),0 4px 12px #007a7a40}.start-mic-icon{width:26px;height:26px;flex-shrink:0}.mic-cta-hint{margin:0;max-width:34ch;text-align:center;font-size:.84rem;font-weight:700;color:var(--secondary)}.range-guidance{position:absolute;right:.7rem;top:.7rem;background:#141f37d1;color:#fff;font-weight:800;font-size:.8rem;padding:.4rem .55rem;border-radius:8px}.success-flag{position:absolute;left:50%;top:14px;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#eafdf0;border:2px solid #57cb74;font-weight:900;color:#1c7a37;animation:menu-in .15s ease}.checkmark{color:#22a543;font-size:1.15rem}.confetti{position:absolute;right:-10px;top:-10px;width:54px;height:28px;background:radial-gradient(circle,#ff2f31 0 3px,transparent 3px),radial-gradient(circle,#fffb6d 0 3px,transparent 3px),radial-gradient(circle,#79e59b 0 3px,transparent 3px),radial-gradient(circle,#2297ea 0 3px,transparent 3px);background-size:20px 20px;background-position:0 0,16px 8px,26px -2px,40px 8px}.mic-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mic-status{margin:0;flex:1 1 180px;font-size:.86rem;font-weight:800;color:var(--teal-ink)}.hold-meter{display:flex;align-items:center;gap:9px;flex:1 1 200px;max-width:320px}.progress-track{flex:1;height:14px;background:#e6ebf5;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0;border-radius:999px;transition:width 80ms linear}.hold-count{font-size:.72rem;font-weight:900;color:var(--secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.target-rail{grid-area:target;display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px;border-radius:18px;border:3px solid var(--border-teal);background:#fff;text-align:center}.rail-label{font-size:.66rem;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--caption)}.rail-note{font-size:1.4rem;font-weight:900;line-height:1.1}.bell-button{width:100%;padding:0;border:0;background:transparent;cursor:pointer;display:flex;justify-content:center}.bell-image{width:100%;max-width:130px;height:auto;transition:transform .12s ease}.bell-image.is-ringing{transform:translateY(-3px) scale(1.04)}.bell-placeholder{width:100%;border:2px dashed #c4cedf;border-radius:12px;padding:2rem .75rem;font-size:.78rem;font-weight:700;color:#6d7585}.rail-actions{display:grid;gap:6px;width:100%}.rail-btn{min-height:38px;padding:6px 10px;border-radius:11px;border:2px solid var(--border-teal);background:#fff;color:var(--teal-ink);font-family:inherit;font-size:.82rem;font-weight:800;cursor:pointer}.rail-btn:hover:not(.primary){border-color:#a8d4e2}.rail-btn.primary{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:900}.rail-btn.primary:hover{background:var(--teal-dark)}.rail-btn:active{transform:translateY(1px)}.completion-banner{padding:12px 14px;border-radius:16px;border:2px solid #3ca95a;background:linear-gradient(90deg,#edfdf2,#f7fff1,#edfffa);font-weight:900;line-height:1.35;color:#1c7a37}.note-suggestion{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;border:2px solid var(--border-blue);background:#fff;box-shadow:0 8px 24px #0c162c14}.note-suggestion p{margin:0;font-weight:800;color:var(--menu-ink)}.note-suggestion-actions{display:flex;gap:8px}.note-suggestion-actions button{min-height:38px;padding:6px 14px;border-radius:11px;border:2px solid var(--border-teal);background:#fff;color:var(--teal-ink);font-family:inherit;font-size:.82rem;font-weight:800;cursor:pointer}.note-suggestion-actions button:first-child{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:900}@media (max-width: 820px){.app{padding:.75rem}.stage{grid-template-columns:1fr;grid-template-areas:"target" "mic"}.target-rail{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px;text-align:left}.rail-head{order:2}.bell-button{order:1;width:auto}.bell-image{max-width:76px}.rail-actions{order:3;grid-auto-flow:column;width:auto;margin-left:auto}.pitch-lane{height:clamp(220px,34vh,300px)}}@media (max-width: 520px){.app-bar-menus{width:100%}.menu-wrap{flex:1}.menu-trigger{width:100%;justify-content:space-between;padding:0 11px;font-size:.82rem;white-space:nowrap}.menu-trigger-hint{display:none}.app-bar-menus{position:relative}.menu-wrap{position:static}.menu-panel{left:0;right:0;width:auto;max-width:none}.rail-actions{width:100%;margin-left:0;grid-auto-flow:column}}.score-strip{display:flex;align-items:stretch;gap:10px;margin-bottom:10px;flex-wrap:wrap}.score-block,.streak-block{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 14px;border-radius:12px;background:#fff;border:2px solid var(--border-blue);min-width:92px}.score-label{font-size:.62rem;font-weight:900;letter-spacing:.12em;color:var(--caption)}.score-value{font-size:1.5rem;font-weight:900;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}.score-value--small{font-size:1.05rem}.score-block--goal,.score-block--best{margin-left:auto}.score-block--best{margin-left:0}.streak-value{display:flex;align-items:baseline;gap:6px;font-size:1.5rem;font-weight:900;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}.streak-mult{font-size:.9rem;font-weight:900;color:#e8590c}.streak-block.is-hot{border-color:#ffc078;background:#fff6ed;animation:streak-pulse 1.1s ease-in-out infinite}@keyframes streak-pulse{0%,to{box-shadow:0 0 #e8590c00}50%{box-shadow:0 0 0 4px #e8590c21}}.toast-layer{position:relative;height:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:5}.hit-toast,.streak-toast{position:absolute;top:4px;display:flex;align-items:baseline;gap:10px;padding:7px 18px;border-radius:999px;font-weight:900;white-space:nowrap;animation:toast-rise 1s ease forwards}.hit-toast{background:#eafdf0;border:2px solid #57cb74;color:#1c7a37}.hit-toast-points{color:#12662c;font-variant-numeric:tabular-nums}.hit-toast-points em{font-style:normal;color:#e8590c}.streak-toast{top:46px;background:#fff4e6;border:2px solid #ffa94d;color:#d9480f;font-size:1.05rem;animation-duration:1.4s}@keyframes toast-rise{0%{transform:translateY(6px) scale(.9);opacity:0}14%{transform:translateY(0) scale(1.04);opacity:1}24%{transform:translateY(0) scale(1)}74%{opacity:1}to{transform:translateY(-14px);opacity:0}}.level-celebration{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:40}.level-celebration-card{text-align:center;padding:26px 44px;border-radius:22px;background:#fff;border:3px solid var(--teal);box-shadow:0 18px 50px #17366a38;animation:celebrate-in .32s cubic-bezier(.34,1.45,.64,1)}.level-celebration-card h2{margin:0 0 6px;font-size:1.5rem;font-weight:900;color:var(--teal-dark);letter-spacing:.01em}.celebration-stars{font-size:2.6rem;letter-spacing:8px;line-height:1;margin:6px 0 10px}.celebration-stars .star.on{color:#ffc93c;display:inline-block;animation:star-pop .4s cubic-bezier(.34,1.6,.64,1) backwards}.celebration-stars .star.on:nth-child(2){animation-delay:.14s}.celebration-stars .star.on:nth-child(3){animation-delay:.28s}.celebration-stars .star.off{color:#dfe7f5}@keyframes star-pop{0%{transform:scale(0) rotate(-25deg)}to{transform:scale(1) rotate(0)}}.celebration-score{margin:0;font-size:1.15rem;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums}.celebration-best{margin:2px 0 0;font-size:.85rem;font-weight:800;color:var(--caption)}@keyframes celebrate-in{0%{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}.level-stars{display:block;font-size:.85rem;letter-spacing:2px;line-height:1;margin-top:2px}.level-stars .on{color:#ffc93c}.level-stars .off{color:#dfe7f5}.level-best{font-style:normal;color:var(--caption);font-weight:700}@media (prefers-reduced-motion: reduce){.streak-block.is-hot,.hit-toast,.streak-toast,.level-celebration-card,.celebration-stars .star.on{animation:none}}@media (max-width: 700px){.score-strip{gap:8px}.score-block,.streak-block{padding:6px 11px;min-width:76px}.score-value,.streak-value{font-size:1.2rem}.level-celebration-card{padding:20px 28px}}.app[data-skin]{position:relative;padding-top:18px}.app[data-skin]:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:var(--skin-bg, transparent);pointer-events:none}.app[data-skin]:after{content:"";position:fixed;left:0;right:0;bottom:0;height:46vh;z-index:-1;background:var(--skin-scenery, none);background-repeat:no-repeat;background-position:bottom center;background-size:100% 100%;opacity:var(--skin-scenery-opacity, 1);pointer-events:none}.app[data-skin] .app-bar-title h1{color:var(--skin-title, var(--navy))}.app[data-skin] .app-bar-sub,.app[data-skin] .score-label{color:var(--skin-caption, var(--caption))}.app[data-skin] .score-block,.app[data-skin] .streak-block,.app[data-skin] .mic-panel,.app[data-skin] .target-rail{background:var(--skin-panel, #ffffff);border-color:var(--skin-panel-border, var(--border-blue))}.app[data-skin] .score-value,.app[data-skin] .streak-value{color:var(--skin-ink, var(--navy))}.app[data-skin] .level-progress{background:var(--skin-track, #e6ebf5)}.app[data-skin] .level-progress-fill{background:var(--skin-accent, var(--teal))}.app[data-skin=quest]{--skin-bg: #241a4d;--skin-panel: #2f2560;--skin-panel-border: #463a86;--skin-title: #ffd25b;--skin-ink: #fdf8ee;--skin-caption: #b3a6e0;--skin-accent: #ea6ba3;--skin-track: #1c1440;--skin-veil: rgba(30, 21, 66, .62);--skin-scenery: radial-gradient(60% 90% at 18% 108%, #3d2f7a 0 100%, transparent 100%), radial-gradient(52% 78% at 72% 110%, #4a3a8f 0 100%, transparent 100%), radial-gradient(70% 62% at 46% 116%, #2c2168 0 100%, transparent 100%)}.app[data-skin=quest] .mic-status,.app[data-skin=quest] .hold-count,.app[data-skin=quest] .panel-head h2,.app[data-skin=quest] .rail-label{color:#e9e2ff}.app[data-skin=island]{--skin-bg: linear-gradient(#bfeaf7 0%, #d9f2fb 52%, #ffeec9 100%);--skin-panel: #fffdf6;--skin-panel-border: #ffd9a0;--skin-title: #e07b2c;--skin-ink: #24466b;--skin-caption: #7f96bf;--skin-accent: #6abb4a;--skin-track: #e7f0da;--skin-veil: rgba(255, 253, 246, .72);--skin-scenery: radial-gradient(120% 60% at 50% 118%, #ffe2ad 0 100%, transparent 100%), radial-gradient(14% 22% at 12% 74%, #6abb4a 0 100%, transparent 100%), radial-gradient(11% 18% at 88% 80%, #57a83f 0 100%, transparent 100%)}.app[data-skin=lab]{--skin-bg: #0f2740;--skin-panel: #14344f;--skin-panel-border: #2b5c7f;--skin-title: #56e0d0;--skin-ink: #f2fbff;--skin-caption: #8fc4d8;--skin-accent: #56e0d0;--skin-track: #0a1f34;--skin-veil: rgba(12, 32, 51, .62);--skin-scenery: repeating-linear-gradient(90deg, rgba(86, 224, 208, .09) 0 1px, transparent 1px 46px), repeating-linear-gradient(0deg, rgba(86, 224, 208, .09) 0 1px, transparent 1px 46px);--skin-scenery-opacity: .9}.app[data-skin=lab]:after{height:100vh}.app[data-skin=lab] .mic-status,.app[data-skin=lab] .hold-count,.app[data-skin=lab] .panel-head h2,.app[data-skin=lab] .rail-label,.app[data-skin=quest] .panel-head h2{color:#dff3fb}.app[data-skin] .mic-cta{background:var(--skin-veil, rgba(249, 251, 255, .72))}.app[data-skin=quest] .pitch-lane,.app[data-skin=lab] .pitch-lane{background:#ffffff0d;border-color:var(--skin-panel-border)}.app[data-skin=quest] .mic-cta-hint,.app[data-skin=lab] .mic-cta-hint{color:var(--skin-caption)}.pitch-ladder{position:absolute;left:0;top:0;bottom:0;width:88px;pointer-events:none;z-index:2}.ladder-rung{position:absolute;left:10px;transform:translateY(-50%);display:flex;align-items:center;gap:7px;font-weight:900;font-size:.82rem;color:var(--skin-caption, var(--caption));transition:top .28s ease}.ladder-dot{width:11px;height:11px;border-radius:50%;flex:none;opacity:.55}.ladder-rung.is-target{font-size:1.05rem}.ladder-rung.is-target .ladder-dot{width:15px;height:15px;opacity:1}.ladder-edge{position:absolute;left:13px;font-size:.56rem;font-weight:900;letter-spacing:.14em;color:var(--skin-caption, var(--caption));opacity:.65}.ladder-edge--high{top:6px}.ladder-edge--low{bottom:6px}@media (max-width: 700px){.pitch-ladder{width:62px}.ladder-rung{left:6px;font-size:.72rem;gap:5px}.ladder-rung.is-target{font-size:.9rem}}.done-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--skin-panel-border, var(--border-btn));background:var(--skin-panel, #ffffff);color:var(--skin-ink, var(--navy));font-family:inherit;font-weight:900;font-size:.92rem;padding:9px 18px;border-radius:12px;cursor:pointer}.done-btn:hover{border-color:var(--teal);color:var(--teal-dark)}.session-veil{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:grid;place-items:center;padding:18px;background:#0f193299}.session-card{width:min(420px,94vw);text-align:center;padding:28px 26px 22px;border-radius:22px;background:#fff;border:3px solid var(--teal);box-shadow:0 18px 50px #17366a4d;animation:celebrate-in .3s cubic-bezier(.34,1.45,.64,1)}.session-card h2{margin:0 0 4px;font-size:1.55rem;font-weight:900;color:var(--teal-dark)}.session-sub{margin:0 0 16px;font-size:.9rem;font-weight:800;color:var(--caption)}.session-stats{display:flex;justify-content:center;gap:10px}.session-stats>div{flex:1;display:flex;flex-direction:column;gap:3px;padding:10px 6px;border-radius:12px;background:var(--wash-blue)}.session-value{font-size:1.4rem;font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums}.session-total{margin:14px 0 0;font-size:.85rem;font-weight:800;color:var(--caption)}.session-actions{margin-top:16px}.session-primary{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:14px;padding:13px 30px;font-family:inherit;font-size:1.02rem;font-weight:900;color:#fff;background:var(--teal);box-shadow:0 4px 0 var(--teal-edge);cursor:pointer}.session-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--teal-edge)}@media (prefers-reduced-motion: reduce){.session-card{animation:none}}