:root{color-scheme:dark;--bg:#111816;--panel:#1a2420;--line:#34423b;--text:#eef2e9;--muted:#a3b2a8;--green:#c5eda2;--red:#eeb8a7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0,#21312788,transparent 55%),var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.45}button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:5px}button{touch-action:manipulation}a{color:inherit}.top{max-width:1060px;padding:25px 30px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:23px;font-weight:750;letter-spacing:-1px}.mark{color:var(--green);font-size:28px}.lab{color:var(--muted);font-size:12px;letter-spacing:.5px;font-weight:400;border-left:1px solid var(--line);padding-left:14px;margin-left:7px}.save-wrap{font-size:12px;color:var(--muted);text-align:right;max-width:260px}#saveState[data-state=saved]:before{content:'●';color:var(--green);font-size:8px;margin-right:7px}#saveState[data-state=error]{color:var(--red)}main{max-width:790px;margin:12px auto 50px;padding:0 24px}.progress-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}.text-button{background:none;border:0;padding:7px 0;font-size:13px;color:var(--muted)}.text-button:hover{color:var(--text)}.track-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:12px 0 23px}.track-block{border:0;background:none;padding:0;text-align:left;color:var(--muted);min-width:0}.track-label{display:flex;justify-content:space-between;gap:3px;font-size:11px;white-space:nowrap}.track-name{overflow:hidden;text-overflow:ellipsis}.track-bar{display:flex;gap:3px;margin-top:8px}.track-bar span{height:4px;flex:1;border-radius:3px;background:#3a4840}.track-bar span.done{background:var(--green)}.track-bar span.issue{background:#edc57c}.track-block.current{color:var(--text)}.track-block.current .track-bar{outline:1px solid #788c7c;outline-offset:4px;border-radius:2px}.card{background:linear-gradient(140deg,#223027,#1a2420 45%);border:1px solid #3a4a40;border-radius:22px;padding:30px 34px 14px;box-shadow:0 24px 65px #0003}.card-top{display:flex;justify-content:space-between;align-items:center}.eyebrow{text-transform:uppercase;font-size:10px;font-weight:650;letter-spacing:1.8px;color:var(--muted)}.tag{border:1px solid #415346;border-radius:30px;padding:4px 10px;font-size:11px;color:#b7c5b9}h1{font-size:31px;font-weight:600;line-height:1.15;letter-spacing:-.8px;margin:10px 0 17px}.variant-line{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}.steps{display:flex;gap:7px}.step{width:26px;height:26px;border-radius:50%;border:1px solid #4c5c50;background:none;font-size:11px;padding:0;color:var(--muted)}.step.current{border:2px solid var(--green);color:var(--text)}.step.yes{background:#394e32;color:var(--green)}.step.no{background:#573f37;color:var(--red)}.step.unsure{background:#46504a;color:#e0e5df}.step.technical{box-shadow:0 0 0 2px #d6b56c}.player{display:flex;align-items:center;gap:20px;margin-top:23px}.play{width:62px;height:62px;flex-shrink:0;border-radius:50%;border:0;background:var(--green);color:#1d2c1b;box-shadow:0 4px 20px #b2e39714;font-size:24px}.timeline{flex:1;min-width:0;position:relative}.timeline canvas{width:100%;height:62px;display:block}#seek{position:absolute;top:0;left:0;width:100%;height:62px;opacity:0;cursor:pointer;margin:0}#seek:focus-visible{opacity:.7;accent-color:var(--green)}.times{display:flex;justify-content:space-between;gap:5px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}#phase{color:#c2d8b9}.player-tools{display:flex;align-items:center;gap:22px;margin:12px 0 22px}.player-tools .text-button{font-size:11px}#guitar[aria-pressed=true]{color:var(--green)}#audioState{font-size:11px;margin-left:auto;color:var(--muted)}.question{border-top:1px solid var(--line);padding-top:23px}.accent{color:var(--green)}h2{font-size:23px;line-height:1.3;font-weight:550;letter-spacing:-.35px;margin:9px 0}.question p{font-size:13px;color:#bbc7bc;line-height:1.6;margin:10px 0 22px;max-width:560px}.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.answer{border:1px solid #4b5d4f;background:#ffffff04;border-radius:12px;padding:16px 12px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;position:relative;transition:background .15s,transform .15s}.answer:hover{transform:translateY(-2px);background:#ffffff0c}.answer-icon{font-size:19px;color:var(--muted)}.answer.yes .answer-icon{color:var(--green)}.answer.no .answer-icon{color:var(--red)}.answer.selected.yes{border-color:var(--green);background:#c5eda21a}.answer.selected.no{border-color:var(--red);background:#eeb8a715}.answer.selected.unsure{border-color:#d3dcd2;background:#ffffff10}kbd{font-size:9px;color:#8c9c90;font-family:inherit;position:absolute;top:4px;right:7px}.answer-status{color:var(--muted);font-size:11px;text-align:center;min-height:37px;padding-top:10px}details{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:13px 0;font-size:12px;color:var(--muted)}summary::-webkit-details-marker{display:none}summary:before{content:'＋';margin-right:9px}details[open] summary:before{content:'−'}#noteIndicator{color:var(--green)}.detail-content{padding:0 0 17px}textarea{width:100%;height:80px;resize:vertical;padding:11px;background:#111b15;border:1px solid #485a4c;border-radius:9px;color:var(--text);font-size:13px}.check{display:flex;align-items:flex-start;gap:8px;font-size:12px;margin-top:12px}.check input{accent-color:var(--green);margin-top:4px}.check small{display:block;color:var(--muted);font-size:11px}.card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0 0}.key-help{font-size:10px;color:#8e9e92}.footnote{text-align:center;color:#8e9e92;font-size:11px;max-width:540px;margin:19px auto}.break-card{text-align:center;padding:45px}.complete-icon{font-size:48px;color:var(--green);margin:20px}.break-card p{color:var(--muted);font-size:14px}.primary{background:var(--green);color:#1d2c1b;border:0;border-radius:10px;padding:13px 26px;margin:16px 15px}.break-card .text-button{display:block;margin:auto}dialog{background:#1c2921;color:var(--text);border:1px solid var(--line);border-radius:20px;padding:25px;max-width:600px;width:calc(100% - 32px)}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.icon-button{border:0;background:none;font-size:25px;padding:0 10px}dialog p{color:var(--muted);font-size:13px}.map-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}.map-title{background:none;border:0;text-align:left;padding:0;font-size:13px}.map-title small{display:block;color:var(--muted);font-size:10px}.legend{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:10px;margin-top:18px}[hidden]{display:none!important}@media(max-width:600px){.top{padding:17px 18px}.brand{font-size:21px}.lab{display:none}main{padding:0 14px;margin-top:4px}.card{padding:22px 20px 10px;border-radius:18px}.track-progress{gap:7px;margin-bottom:18px}.track-label{font-size:9px;flex-direction:column;gap:0}.track-bar{gap:2px}.track-name{max-width:100%}h1{font-size:27px}.player{gap:14px;margin-top:19px}.play{width:52px;height:52px;font-size:21px}h2{font-size:21px}.question{padding-top:18px}.question p{font-size:12px;margin-bottom:18px}.answers{gap:7px}.answer{padding:13px 4px;font-size:12px;gap:5px}.answer-icon{font-size:17px}kbd,.key-help{display:none}.player-tools{margin-bottom:17px;gap:18px}.step{width:23px;height:23px;font-size:10px}.steps{gap:5px}.save-wrap{font-size:10px}.question p{line-height:1.5}.footnote{font-size:10px}.map-row{flex-wrap:wrap}.break-card{padding:30px 20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.identifiers{display:flex;align-items:center;gap:12px;margin:-5px 0 16px;color:var(--muted);font-size:10px}.identifiers #ids{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.identifiers button{font-size:10px;flex-shrink:0}

#details{margin-bottom:16px;border-bottom:0}#details summary{padding:11px 0}.question p{margin-bottom:13px}@media(max-width:600px){.step{width:28px;height:28px}.steps{gap:4px}.card-top{margin-top:0}.top{padding-bottom:10px}.track-progress{margin-bottom:15px}.player-tools{margin-bottom:12px}.question{padding-top:14px}.card{padding-top:18px}h1{margin-bottom:13px}.player{margin-top:16px}.question p{margin-bottom:8px}}

#shareText{width:100%;padding:8px;background:#111b15;color:var(--text);border:1px solid var(--line);border-radius:7px;font-size:11px;margin-bottom:12px}.answer:disabled{cursor:default;opacity:.5}

/* Vector icons share a centered visual box, independent of font baselines. */
.ui-icon{display:block;width:1em;height:1em;flex:none}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.3}
.text-button .ui-icon{width:14px;height:14px}
.answer-icon,#playIcon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:none}
.answer{align-items:center;line-height:1.25}.answer-icon .ui-icon{width:18px;height:18px}
.play,.step,.icon-button{display:inline-flex;align-items:center;justify-content:center;line-height:1}
#playIcon .ui-icon{width:26px;height:26px}.step .ui-icon{width:13px;height:13px}
summary{display:flex;align-items:center;gap:8px}summary:before{display:inline-flex;align-items:center;justify-content:center;line-height:1;width:14px;height:14px;margin-right:0;flex:none}
.brand .mark{display:inline-flex;align-items:center;line-height:1}

/* Compact secondary actions retain accessible names and hover hints. */
.compact-icon{width:32px;height:32px;padding:6px;border-radius:8px;flex:none}
.compact-icon:hover{background:#ffffff0a}.compact-icon .ui-icon{width:17px;height:17px}
#copyLink.copied{color:var(--green)}.identifiers{gap:7px}
.player-tools{gap:12px}.solo-toggle{padding:5px 9px;border:1px solid transparent;border-radius:8px}
.solo-toggle .ui-icon{width:18px;height:18px}.solo-toggle[aria-pressed=true]{border-color:#88ac70;background:#c5eda212}
.answer-status:empty{display:none}.question h2{margin-top:0}

.track-bar span.yes{background:var(--green)}.track-bar span.no{background:var(--red)}.track-bar span.unsure{background:#edc57c}.track-bar span.issue{outline:1px solid #d6b56c;outline-offset:2px}.track-bar span.issue:not(.yes):not(.no):not(.unsure){background:#8da8c4}
.drum-volume{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:11px;color:var(--muted)}.drum-volume input{width:100px;min-width:50px;accent-color:var(--green)}.drum-volume output{width:45px;text-align:right;font-variant-numeric:tabular-nums}.player-tools{flex-wrap:wrap}#audioState:empty{display:none}@media(max-width:420px){.drum-volume input{width:75px}.player-tools{gap:12px}}

.join-card{max-width:560px;margin:40px auto;padding:30px}.join-card p,.join-card small{color:var(--muted)}#nickname{max-width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:12px}.track-progress{grid-template-columns:repeat(10,minmax(0,1fr));row-gap:16px}@media(max-width:700px){.track-progress{grid-template-columns:repeat(5,minmax(0,1fr))}.join-card{margin:20px 14px}}