:root{--ink: #f4f1ea;--dim: rgba(244, 241, 234, .58);--faint: rgba(244, 241, 234, .34);--line: rgba(244, 241, 234, .14);--panel: rgba(13, 12, 17, .82);--raise: rgba(255, 255, 255, .06);--accent: hsl(38 92% 62%);--right: hsl(146 62% 55%);--wrong: hsl(6 78% 62%);color-scheme:dark}*{box-sizing:border-box;margin:0}html,body{height:100%;overflow:hidden;background:#08070b;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}#stage{position:fixed;inset:0}#video,#canvas{position:absolute;inset:0;width:100%;height:100%}#video{object-fit:cover;filter:brightness(.72) contrast(1.04)}#canvas{pointer-events:none}#stage.calibrating #canvas{pointer-events:auto;cursor:crosshair}.gone{display:none!important}#brand{position:absolute;top:max(16px,env(safe-area-inset-top));left:20px;pointer-events:none}#brand h1{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}#status{margin-top:4px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}#tools{position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}#tools button{border:1px solid var(--line);background:var(--panel);color:var(--dim);border-radius:999px;padding:7px 14px;font:inherit;font-size:12px;letter-spacing:.04em;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#tools button:hover{color:var(--ink);border-color:var(--faint)}#tools button[aria-pressed=true]{color:#0b0a0f;background:var(--accent);border-color:transparent}#start,#help,#lessons,#song,#tuner{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:#060509b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:auto}#calibrate{position:absolute;inset:0;display:grid;padding:18px;pointer-events:none}#calibrate.at-bl{place-items:end start}#calibrate.at-br{place-items:end end}#calibrate.at-tl{place-items:start start}#calibrate.at-tr{place-items:start end}#calibrate.at-tl,#calibrate.at-tr{padding-top:64px}#calibrate .card{pointer-events:auto;width:min(400px,100%);padding:20px 22px;gap:11px}#calibrate .step{color:var(--ink)!important;font-size:15px!important}.card{width:min(560px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px #00000080}.card h2{font-size:20px;font-weight:600}.card p{font-size:14px;line-height:1.55;color:var(--dim)}.card p b{color:var(--ink);font-weight:600}.start-title{font-size:26px!important;letter-spacing:-.01em}.start-lead{font-size:15px!important;color:var(--ink)!important}.start-note,.card .quiet{font-size:12.5px!important;color:var(--faint)!important}.start-warn{font-size:13px!important;color:var(--accent)!important}.start-error{font-size:13px!important;color:var(--wrong)!important}button.primary{align-self:flex-start;border:none;border-radius:999px;padding:11px 24px;font:inherit;font-weight:600;background:var(--accent);color:#100c04;cursor:pointer}button.primary:disabled{opacity:.55;cursor:default}button.ghost{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font:inherit;font-size:13px;background:transparent;color:var(--dim);cursor:pointer}button.ghost:hover{color:var(--ink);border-color:var(--faint)}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row.stepper{align-items:center;gap:8px;font-size:13px;color:var(--ink)}.row.stepper button{min-width:34px;padding:6px 0;text-align:center;font-size:15px;line-height:1}#panel{position:absolute;top:62px;right:16px;width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 90px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px 20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:16px}.section{display:flex;flex-direction:column;gap:8px}.section>h3{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.choices{display:flex;gap:6px;flex-wrap:wrap}.choices button{flex:1 1 auto;border:1px solid var(--line);background:var(--raise);color:var(--dim);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;cursor:pointer}.choices button[aria-pressed=true]{background:var(--accent);border-color:transparent;color:#100c04;font-weight:600}.slider{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:13px;color:var(--dim)}.slider input{grid-column:1 / -1;width:100%;accent-color:var(--accent)}.slider .value{color:var(--ink);font-variant-numeric:tabular-nums;font-size:12px}.check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dim);cursor:pointer}.check input{accent-color:var(--accent);width:15px;height:15px}#coach{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(840px,calc(100vw - 28px));display:flex;gap:22px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px 22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#coach .diagram{flex:0 0 auto}#coach .words{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}.coach-name{font-size:34px;font-weight:600;letter-spacing:-.01em;line-height:1}.coach-line{font-size:17px;color:var(--dim);line-height:1.4}.coach-line.right{color:var(--right)}.coach-line.wrong{color:var(--wrong)}.coach-meta{display:flex;gap:12px;font-size:12.5px;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}.hold{height:6px;border-radius:999px;background:var(--raise);overflow:hidden}.hold>span{display:block;height:100%;width:0;background:var(--right);transition:width 90ms linear}.lesson-list{display:flex;flex-direction:column;gap:8px;max-height:min(52vh,420px);overflow-y:auto}.lesson{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:1px solid var(--line);background:var(--raise);color:var(--ink);border-radius:12px;padding:12px 14px;font:inherit;cursor:pointer}.lesson:hover:not(:disabled){border-color:var(--faint)}.lesson:disabled{opacity:.45;cursor:default}.lesson .title{font-size:14px;font-weight:600}.lesson .sub{font-size:12px;color:var(--faint)}.lesson .grow{flex:1 1 auto;min-width:0}.lesson .score{font-size:12px;color:var(--right);font-variant-numeric:tabular-nums}#song-card textarea{width:100%;min-height:170px;resize:vertical;background:#00000059;border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5}#song-card textarea:focus{outline:1px solid var(--accent)}.tuner-dial{display:flex;flex-direction:column;gap:8px;align-items:center;padding:14px 0 6px}.tuner-note{font-size:46px;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.tuner-note.right{color:var(--right)}.tuner-note.wrong{color:var(--accent)}.tuner-scale{position:relative;width:min(340px,100%);height:26px;border-radius:999px;background:var(--raise);border:1px solid var(--line)}.tuner-scale .mark{position:absolute;left:50%;top:3px;bottom:3px;width:2px;margin-left:-1px;border-radius:2px;background:var(--right);opacity:.6}.tuner-scale .pip{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);transition:left 70ms linear,background .14s ease}.tuner-strings{display:flex;flex-direction:column;gap:4px}.tuner-string{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--raise)}.tuner-string .name{font-size:15px;font-weight:600;min-width:34px}.tuner-string .which{flex:1 1 auto;font-size:12.5px;color:var(--faint)}.tuner-string .tick{color:transparent;font-size:14px}.tuner-string.done{border-color:var(--right)}.tuner-string.done .tick{color:var(--right)}@media(max-width:620px){#coach{flex-direction:column;align-items:flex-start;gap:10px}#panel{inset:auto 0 0;width:100%;max-height:70vh;border-radius:16px 16px 0 0}}