:root{--ink: #f4f1ea;--dim: rgba(244, 241, 234, .55);--line: rgba(244, 241, 234, .14);--panel: rgba(14, 13, 18, .72);--accent: hsl(46 90% 62%);--danger: hsl(4 80% 68%);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;transform:scaleX(-1);filter:saturate(.55) brightness(.5) contrast(1.05)}#canvas{pointer-events:none}#brand{position:absolute;top:max(18px,env(safe-area-inset-top));left:22px;pointer-events:none}#brand h1{font:500 20px/1 ui-serif,Georgia,serif;letter-spacing:.14em;text-transform:lowercase}#status{margin-top:6px;color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:lowercase}#tools{position:absolute;top:max(16px,env(safe-area-inset-top));right:18px;z-index:3;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}#tools button{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);font-family:inherit;font-size:12px;letter-spacing:.06em;cursor:pointer;transition:border-color .15s ease,color .15s ease}#tools button:hover:not(:disabled){border-color:#f4f1ea59}#tools button:disabled{opacity:.4;cursor:default}#record-toggle{display:inline-flex;align-items:center;gap:7px}#record-toggle:before{content:"";width:7px;height:7px;border:1px solid currentColor;border-radius:50%}#record-toggle.recording{border-color:var(--danger);color:var(--danger)}#record-toggle.recording:before{border-color:var(--danger);background:var(--danger);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.25}}#recmenu{position:absolute;top:56px;right:18px;z-index:5;display:flex;flex-direction:column;gap:4px;width:250px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}#recmenu.gone{display:none}#recmenu button{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font-family:inherit;font-size:12.5px;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease}#recmenu button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}#recmenu .hint{margin:6px 2px 0}#panel{position:absolute;top:64px;right:18px;bottom:18px;z-index:2;width:300px;max-width:calc(100vw - 36px);padding:20px;overflow-y:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:opacity .22s ease,transform .22s ease}#panel.hidden{transform:translate(14px);opacity:0;pointer-events:none}#panel section+section{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}#panel h2{margin-bottom:10px;color:var(--dim);font:500 10px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}.hint{margin-top:10px;color:var(--dim);font-size:11.5px;line-height:1.5}.segmented{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.timbres{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.group-label{margin:12px 0 6px;color:var(--dim);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}.segmented button,.timbres button{padding:9px 6px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--dim);font-family:inherit;font-size:12px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.segmented button:hover,.timbres button:hover{border-color:#f4f1ea4d;color:var(--ink)}.segmented button.on,.timbres button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink)}select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#0000004d;color:var(--ink);font-family:inherit;font-size:13px}.knob{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:10px;margin-bottom:9px;color:var(--dim);font-size:12px}input[type=range]{width:100%;height:3px;appearance:none;border-radius:999px;background:#f4f1ea2e;cursor:pointer}input[type=range]::-webkit-slider-thumb{width:13px;height:13px;appearance:none;border-radius:50%;background:var(--accent)}input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--accent)}.check{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px;color:var(--dim);font-size:12px;line-height:1.45;cursor:pointer}.check input{margin-top:2px;accent-color:var(--accent)}.hint+.check{margin-top:16px}#legend{position:absolute;top:76px;left:22px;z-index:1;max-width:290px;opacity:.75;pointer-events:none}#legend.gone{display:none}#legend h3{margin-bottom:8px;color:var(--dim);font:500 10px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}#legend ul{padding:0;list-style:none}#legend li{margin-bottom:4px;color:var(--dim);font-size:12px;line-height:1.5}#legend b{color:#f4f1eae6;font-weight:500}#panel section.disabled{opacity:.35;pointer-events:none}#chordmap{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;z-index:1;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:min(92vw,720px);transform:translate(-50%);pointer-events:none}#chordmap.gone{display:none}.chip{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:56px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#0e0d128c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s ease,background .15s ease}.chip .g{color:var(--dim);font-size:10px;letter-spacing:.05em}.chip .n{color:#f4f1eaeb;font-size:13px;font-weight:500}.chip .r{color:var(--dim);font-size:10px}.chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,rgba(14,13,18,.55))}#songstrip{position:absolute;top:64px;left:50%;z-index:2;display:flex;gap:6px;max-width:min(48vw,760px);padding:4px;overflow-x:auto;transform:translate(-50%);scrollbar-width:none}#songstrip.gone{display:none}.songcard{flex:0 0 auto;max-width:190px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font-family:inherit;text-align:center;cursor:pointer;transition:border-color .15s ease,opacity .15s ease}.songcard .n{display:block;font-size:13px;font-weight:600}.songcard .g{display:block;margin-top:2px;color:var(--dim);font-size:10px;line-height:1.35}.songcard.on{border-color:var(--accent)}.songcard.on.hit{border-color:#35d477;box-shadow:0 0 16px #28bd6680}.songcard.on.hit .n{color:#5ae293}.songcard.done{opacity:.4}.songcard.warn{border-color:#e8ab308c}.songcard.bad{border-color:#dd473c99;opacity:.55}#song{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:#08070bd1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-y:auto}#song.gone{display:none}#song-card{position:relative;width:min(560px,100%);max-height:min(80vh,720px);padding:34px 36px;overflow-y:auto;border:1px solid var(--line);border-radius:18px;background:#100e15}#song-card textarea{width:100%;margin:6px 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0000004d;color:var(--ink);font:13px/1.6 ui-monospace,SF Mono,Menlo,monospace;resize:vertical}#song-card .row{display:flex;gap:8px;margin-bottom:8px}#song-card .action{padding:9px 18px;border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--accent);font-family:inherit;font-size:13px;cursor:pointer}#song-card .action:hover{background:var(--accent);color:#08070b}#song-card .action.quiet{border-color:var(--line);color:var(--dim)}#song-card .action.quiet:hover{background:transparent;border-color:#f4f1ea59;color:var(--ink)}#song-card h2{margin-bottom:14px;font:400 26px/1.2 ui-serif,Georgia,serif}#song-card h3{margin:22px 0 8px;color:var(--accent);font:500 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}#song-card p{color:#f4f1eabf;font-size:14px;line-height:1.7}#song-card .close{position:absolute;top:16px;right:18px;padding:6px 10px;border:none;border-radius:8px;background:transparent;color:var(--dim);font-size:14px;cursor:pointer}#song-card .close:hover{color:var(--ink)}#song-card .gesture-list{padding:0;list-style:none}#song-card .gesture-list li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:13px;line-height:1.5}#song-card .gesture-list b{flex:0 0 26%;color:#f4f1eaeb;font-weight:500}#song-card .gesture-list li.bad b{color:var(--danger)}#song-card .knob.wide{grid-template-columns:1fr;gap:6px;margin-top:10px}#help{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:#08070bd1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-y:auto}#help.gone{display:none}#help-card{position:relative;width:min(560px,100%);max-height:min(80vh,720px);padding:34px 36px;overflow-y:auto;border:1px solid var(--line);border-radius:18px;background:#100e15}#help-card .close{position:absolute;top:16px;right:18px;padding:6px 10px;border:none;border-radius:8px;background:transparent;color:var(--dim);font-size:14px;cursor:pointer}#help-card .close:hover{color:var(--ink)}#help-card h2{margin-bottom:16px;font:400 26px/1.2 ui-serif,Georgia,serif}#help-card h3{margin:26px 0 8px;color:var(--accent);font:500 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}#help-card p{color:#f4f1eabf;font-size:14px;line-height:1.7}#help-card p.lead{color:#f4f1eae6}#help-card .gesture-list{padding:0;list-style:none}#help-card .gesture-list li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:13.5px;line-height:1.5}#help-card .gesture-list b{flex:0 0 40%;color:#f4f1eaeb;font-weight:500}#start{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 40%,#16141d,#08070b 70%)}#start.gone{display:none}#start .card{max-width:420px;text-align:center}#start h2{margin-bottom:18px;font:400 34px/1 ui-serif,Georgia,serif;letter-spacing:.2em;text-transform:lowercase}#start p{margin-bottom:14px;color:#f4f1eabf;font-size:14px;line-height:1.65}#start .fine{color:var(--dim);font-size:12px}#start .error{min-height:18px;color:var(--danger)}#start .notice{color:#e7c074}#start-button{margin:14px 0 18px;padding:12px 34px;border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--accent);font-family:inherit;font-size:14px;letter-spacing:.08em;cursor:pointer;transition:background .18s ease,color .18s ease}#start-button:hover:not(:disabled){background:var(--accent);color:#08070b}#start-button:disabled{opacity:.5;cursor:default}@media(max-width:1180px){#legend{display:none}}@media(max-width:720px){#legend{display:none}#songstrip{top:118px;max-width:92vw}#panel{inset:auto 14px 14px;width:auto;max-height:62vh}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}