@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Spectral:wght@500;700&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#eef0f2;--ivory:#fbfbf8;--ink:#1b2430;--ink-2:#4a5462;--muted:#6b7380;--line:#d5d9de;--felt:#8c1c2b;--brass:#8a6a1f;--ok:#2f6b3a;--series-1:#2a78d6;--series-2:#eb6834;--key-white:#f7f5ef;--key-black:#16191e;--lacquer:#101317;--display:"Spectral", Georgia, serif;--ui:"IBM Plex Sans", system-ui, sans-serif;--gutter:16px}@media (prefers-color-scheme:dark){:root:where(:not([data-theme=light])){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--paper:#161b22;--ivory:#1e252e;--ink:#e8eaed;--ink-2:#b9c0c9;--muted:#8d96a3;--line:#313a46;--felt:#e0606e;--brass:#d4b062;--ok:#6fbf7e;--series-1:#3987e5;--series-2:#d95926;--key-white:#d9d6cd}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--paper:#161b22;--ivory:#1e252e;--ink:#e8eaed;--ink-2:#b9c0c9;--muted:#8d96a3;--line:#313a46;--felt:#e0606e;--brass:#d4b062;--ok:#6fbf7e;--series-1:#3987e5;--series-2:#d95926;--key-white:#d9d6cd}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font:16px/1.5 var(--ui);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow:hidden}button,input,select,textarea{font:inherit;color:inherit}button,.btn,.tabs a{touch-action:manipulation}:focus-visible{outline:3px solid var(--series-1);outline-offset:2px}.app{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"bar""content""tabs";height:100dvh;display:grid}.topbar{min-width:0;padding:calc(env(safe-area-inset-top) + 10px) var(--gutter) 10px;border-bottom:1px solid var(--line);grid-area:bar;align-items:center;display:flex}.topbar .piece{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-family:var(--display);color:var(--ink);font-size:18px;font-weight:500;text-decoration:none;overflow:hidden}.content{overscroll-behavior:contain;grid-area:content;min-height:0;overflow-y:auto}.tabs{padding:12px 0 calc(env(safe-area-inset-bottom) + 14px);background:color-mix(in srgb, var(--felt) 5%, var(--ivory));-webkit-user-select:none;user-select:none;grid-area:tabs;grid-template-columns:repeat(5,1fr);display:grid}.tabs a{letter-spacing:.02em;color:var(--ink-2);flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:500;line-height:16px;text-decoration:none;display:flex;position:relative}.tabs a:before{content:"";background:color-mix(in srgb, var(--felt) 17%, var(--ivory));opacity:0;border-radius:16px;width:64px;height:32px;margin-left:-32px;transition:transform .25s cubic-bezier(.2,0,0,1),opacity .15s linear;position:absolute;top:0;left:50%;transform:scaleX(.4)}.tabs a:active:before{opacity:.55;transform:none}.tabs svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px;margin:4px 0;position:relative}.tabs span{position:relative}.tabs a[aria-current=page]{color:var(--ink);font-weight:600}.tabs a[aria-current=page]:before{opacity:1;transform:none}.tabs a[aria-current=page] svg{stroke-width:2.1px}@media (prefers-reduced-motion:reduce){.tabs a:before{transition:none}}@media (width>=900px){:root{--gutter:24px}.app{grid-template:"bar tabs""content content"minmax(0,1fr)/minmax(0,1fr) auto}.topbar{padding:12px var(--gutter)}.topbar .piece{color:var(--ink-2)}.tabs{padding:0 var(--gutter) 0 0;border-top:0;border-bottom:1px solid var(--line);background:0 0;align-items:center;gap:2px;display:flex}.tabs a{letter-spacing:0;color:var(--ink-2);border-radius:8px;flex-direction:row;gap:7px;padding:6px 12px;font-size:15px;line-height:1.5}.tabs svg{width:18px;height:18px}.tabs a:hover{color:var(--ink)}.tabs a[aria-current=page]{background:var(--ivory)}.tabs a:before{display:none}.tabs a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--felt);font-weight:500}.tabs svg{margin:0}}main{width:100%;max-width:1100px;padding:20px var(--gutter) 40px;margin:0 auto}.practice-host{flex-direction:column;display:flex}.practice{flex-direction:column;flex:1;display:flex}.statusbar{padding:10px var(--gutter);justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex}.practice .stage{flex-direction:column;flex:1;justify-content:center;padding:8px clamp(16px,6vw,96px) 28px;display:flex}.conn{min-width:0;color:var(--ink-2);align-items:center;gap:8px;display:inline-flex}.conn .dot{background:var(--felt);border-radius:50%;flex:none;width:9px;height:9px}.conn[data-on=true] .dot{background:var(--ok)}.focus-line{flex-wrap:wrap;align-items:baseline;gap:16px;margin:0 0 8px;display:flex}.section-label{font-family:var(--display);letter-spacing:-.02em;font-size:clamp(44px,8vw,104px);font-weight:700;line-height:1}.section-label.quiet{color:var(--muted);font-size:clamp(30px,5vw,64px);font-weight:500}.state{align-items:center;gap:14px;margin-top:18px;font-size:clamp(24px,3.6vw,44px);font-weight:500;line-height:1.2;display:flex}.state-mark{background:var(--muted);border-radius:50%;flex:none;width:16px;height:16px}.state[data-kind=ready] .state-mark{background:var(--ok)}.state[data-kind=recording] .state-mark{background:var(--felt);animation:1s ease-in-out infinite pulse}.state[data-kind=pausing] .state-mark{background:var(--brass)}.state[data-kind=evaluating] .state-mark{background:var(--brass);animation:1.2s ease-in-out infinite pulse}.state[data-kind=speaking] .state-mark{background:var(--series-1);animation:.8s ease-in-out infinite pulse}.state[data-kind=error] .state-mark,.state[data-kind=offline] .state-mark{background:var(--felt)}@keyframes pulse{50%{opacity:.25}}@media (prefers-reduced-motion:reduce){.state-mark{animation:none!important}}.countdown{background:var(--line);border-radius:3px;max-width:420px;height:6px;margin-top:12px;overflow:hidden}.countdown span{background:var(--brass);height:100%;transition:width .2s linear;display:block}.state-detail{color:var(--ink-2);max-width:60ch;margin:8px 0 0;font-size:clamp(16px,2vw,20px)}.praise{border-left:3px solid var(--ok);max-width:48ch;color:var(--ok);margin:24px 0 0;padding-left:12px;font-size:clamp(17px,2vw,22px);line-height:1.35}.praise+.advice{margin-top:12px}.advice{font-family:var(--display);max-width:24ch;margin:24px 0 0;font-size:clamp(26px,4.6vw,56px);font-weight:500;line-height:1.15}.detail-link{color:var(--ink-2);align-self:flex-start;margin-top:12px}.advice.spoken{max-width:40ch;font-size:clamp(21px,3vw,30px);line-height:1.25}.bench{background:var(--paper);position:sticky;bottom:0}.bench-main{padding:0 var(--gutter) 12px}.bench-row{padding:10px var(--gutter);border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;display:flex}.range-form{color:var(--ink-2);align-items:center;gap:8px;display:inline-flex}.range-form input{border:1px solid var(--line);background:var(--ivory);text-align:center;border-radius:10px;width:56px;min-height:44px;padding:8px;font-size:16px}.actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px;display:flex}.btn{border:1px solid var(--line);background:var(--ivory);text-align:center;cursor:pointer;border-radius:10px;justify-content:center;align-items:center;min-height:44px;padding:9px 18px;font-weight:500;display:inline-flex}.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn.wide{width:100%}.btn.quiet{background:0 0;min-height:38px;padding:6px 14px;font-size:15px}.btn.danger{color:var(--felt)}.btn.link.back{color:var(--ink-2);padding-left:0;text-decoration:none}.btn.link.back:before{content:"‹";margin-right:6px;font-size:1.3em;line-height:1}.btn.link{text-underline-offset:4px;background:0 0;border:0;min-height:0;padding:10px 4px;font-weight:400;text-decoration:underline}.btn:disabled{opacity:.5;cursor:default}.cost{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}@media (width<=520px){.cost{font-size:13px}}.keybed{background:var(--lacquer);border-top:3px solid var(--felt);padding-top:5px}.keyboard{width:100%;height:58px;display:block}@media (width>=900px){.keyboard{height:72px}}.keyboard .white{fill:var(--key-white);stroke:#9a978f}.keyboard .black{fill:var(--key-black)}.keyboard .on{fill:#c0283c}h1{font-family:var(--display);letter-spacing:-.01em;margin:4px 0 18px;font-size:clamp(28px,5vw,40px);font-weight:700;line-height:1.1}h2{font-family:var(--display);margin:32px 0 10px;font-size:clamp(21px,3vw,26px);font-weight:500}.lede{color:var(--ink-2);max-width:65ch}.panel{background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:16px}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.split{grid-template-columns:1fr 1fr;gap:10px;max-width:520px;display:grid}.field{gap:4px;max-width:520px;margin-bottom:16px;display:grid}.field span{color:var(--ink-2);font-size:14px}.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--paper);border-radius:10px;width:100%;min-height:44px;padding:9px 12px;font-size:16px}.field textarea{color:var(--ink);resize:vertical;line-height:1.45}.plan-list{padding-left:20px;line-height:1.6}.hint{color:var(--muted);font-size:14px}.error-text{color:var(--felt)}.pieces{gap:12px;margin:0;padding:0;list-style:none;display:grid}@media (width>=900px){.pieces{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}}.piece-card{align-content:start;gap:12px;display:grid}.piece-card.current{box-shadow:inset 3px 0 0 var(--felt)}.piece-head{gap:2px;display:grid}.piece-head .rename{color:var(--ink-2);justify-self:start;padding:2px 0;font-size:14px}.piece-head .field{margin-bottom:4px}.piece-head .title{font-family:var(--display);font-size:21px;line-height:1.2}.tempo-editor{grid-template-columns:auto 64px auto 64px auto;align-items:center;gap:8px;display:grid}.tempo-editor .hint{margin-right:auto}@media (width<=420px){.tempo-editor{grid-template-columns:64px auto 64px 1fr}.tempo-editor .hint{grid-column:1/-1}.tempo-editor .btn{justify-self:end}}.tempo-editor input{border:1px solid var(--line);background:var(--paper);text-align:center;border-radius:8px;width:64px;min-height:38px;padding:6px;font-size:16px}.tempo-editor .btn{min-height:38px;padding:6px 12px}.piece-actions{grid-template-columns:1fr 1fr auto;gap:8px;display:grid}.piece-actions .btn{padding:6px 10px}.attempts{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}.attempts li{border-bottom:1px solid var(--line)}.attempts button{text-align:left;cursor:pointer;background:0 0;border:0;gap:2px;width:100%;padding:12px 0;display:grid}.attempts .meta{color:var(--muted);gap:4px;font-size:13px;display:flex}.attempts .meta strong{color:var(--ink);font-variant-numeric:tabular-nums;margin-left:auto}.attempts .headline{max-width:70ch}@media (hover:hover){.attempts button:hover .headline{text-underline-offset:3px;text-decoration:underline}}.obs{margin:0;padding:0;list-style:none}.obs li{border-bottom:1px solid var(--line);max-width:75ch;padding:12px 0}.obs .where{font-weight:600}.obs .sev3 .where:before{content:"●";color:var(--felt);margin-right:8px}.obs .adv{color:var(--ink-2)}.chart-scroll,.table-scroll{margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);overflow-x:auto}.chart{width:100%;min-width:600px;height:auto;display:block;overflow:visible}.chart text{fill:var(--muted);font:12px var(--ui)}.chart .grid{stroke:var(--line);stroke-width:1px}.legend{color:var(--ink-2);flex-wrap:wrap;gap:4px 18px;margin:4px 0 8px;font-size:14px;display:flex}.legend i{border-radius:50%;width:10px;height:10px;margin-right:6px;display:inline-block}table.data{border-collapse:collapse;font-variant-numeric:tabular-nums}table.data th,table.data td{text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;padding:8px 14px 8px 0}table.data.narrow th,table.data.narrow td{white-space:normal}table.data th{color:var(--ink-2);font-weight:500}table.data tr.clickable{cursor:pointer}table.data tr.clickable:hover td{background:var(--ivory)}.badge{color:var(--brass);border:1px solid;border-radius:999px;padding:1px 8px;font-size:13px}.big-score{font-family:var(--display);font-size:clamp(52px,8vw,72px);font-weight:700;line-height:1}.map-summary{flex-wrap:wrap;align-items:baseline;gap:20px}.map-legend{color:var(--muted);flex-wrap:wrap;flex-basis:100%;align-items:center;gap:6px;font-size:13px;display:inline-flex}.swatch{border-radius:3px;width:12px;height:12px;margin-left:8px;display:inline-block}.swatch.good,.bar-band.good,.system-avg.good{background:color-mix(in srgb, var(--ok) 22%, var(--ivory));--edge:var(--ok)}.swatch.fair,.bar-band.fair,.system-avg.fair{background:color-mix(in srgb, var(--brass) 24%, var(--ivory));--edge:var(--brass)}.swatch.weak,.bar-band.weak,.system-avg.weak{background:color-mix(in srgb, var(--felt) 22%, var(--ivory));--edge:var(--felt)}.swatch.issue{border:2px solid var(--felt);background:0 0}.map-actions{align-items:center;gap:12px;margin:8px 0 12px;display:flex}.map-score{color:#1b2430;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 8px 8px 56px;position:relative;overflow:hidden}.map-sheet svg{width:100%;height:auto;display:block}.map-sheet g.note.issue,.map-sheet g.note.issue *{fill:#b3202f;stroke:#b3202f}.map-overlay{pointer-events:none;position:absolute;inset:0}.map-overlay>*{pointer-events:auto;position:absolute}.bar-band{border:0;border-top:3px solid var(--edge,var(--line));font:500 12px var(--ui);color:#1b2430;cursor:pointer;background:#f1f2f4;border-radius:0 0 4px 4px;padding:0}.bar-band.none{color:#8d96a3}.bar-band.selected{outline-offset:1px;outline:2px solid #1b2430}.bar-band:focus-visible{outline:2px solid var(--series-1)}.bar-playing{background:color-mix(in srgb, var(--series-1) 14%, transparent);border:1px solid var(--series-1);border-radius:4px;pointer-events:none!important}.bar-band.playing{box-shadow:inset 0 -3px 0 var(--series-1)}.system-avg{width:48px;font:600 12px var(--ui);color:#1b2430;border-left:3px solid var(--edge,var(--line));background:#f1f2f4;border-radius:4px;justify-content:center;align-items:center;display:flex}.issue-note{cursor:help;border-radius:50%}.issue-note:hover{box-shadow:0 0 0 2px #b3202f}.issue-place{cursor:help;background:#b3202f12;border:1px dashed #b3202f8c;border-radius:4px}.issue-place.sev3{background:#b3202f21;border-style:solid}.issue-place.sev1{background:#8a6a1f14;border-color:#8a6a1f80}.issue-place:hover{background:#b3202f2e}.map-tip{z-index:5;background:var(--ink);max-width:340px;color:var(--ivory);font:14px/1.4 var(--ui);border-radius:6px;gap:8px;padding:10px 12px;display:grid;box-shadow:0 6px 20px #00000040;pointer-events:none!important}.map-tip .where{opacity:.75;font-size:12px}.map-tip .adv{color:color-mix(in srgb, var(--brass) 70%, var(--ivory))}
