/* The free speed and key player on /slow-down-song/ and /change-song-key/ (assets/speed-key.js), in the practice room's
   look: a #111 panel, #161616 cards with the room's Speed and Pitch controls, a teal fill for the main action and
   anything switched on, and Space Mono only for small labels and readouts. The page itself comes from base.css and
   site.css. Pages load this with ?v=<content hash>: after editing it, run  node tests/page_css_tags.mjs --fix */
.sk{position:relative;margin-top:24px;max-width:860px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:var(--shadow-card)}
.sk-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;border:1px dashed rgba(45,212,191,.38);border-radius:10px;background:rgba(45,212,191,.024);padding:28px 20px 24px;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.sk-drop:hover,.sk-drop.over,.sk-drop:focus-within{background:rgba(45,212,191,.06);border-color:var(--teal)}
.sk-drop:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:3px}
.sk-drop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.sk-drop>svg{width:30px;height:30px}
.sk-drop strong{font:600 16px/1.4 'Archivo',sans-serif;color:#fff}
.sk-drop small{font-size:12px;line-height:1.5;color:var(--muted)}
.sk-pick{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border:1px solid var(--teal);border-radius:10px;background:var(--teal);color:var(--ink);font:600 15px/1.2 'Archivo',sans-serif;letter-spacing:.2px;box-shadow:0 6px 20px rgba(45,212,191,.18);transition:background .15s,border-color .15s}
.sk-drop:hover .sk-pick,.sk-drop.over .sk-pick{background:var(--teal-bright);border-color:var(--teal-bright)}
.sk-touch{display:none}
@media(pointer:coarse){.sk-touch{display:inline}.sk-mouse{display:none}}
/* With a song open, the chooser shrinks to one row and steps back to a secondary button. */
.has-song .sk-drop{flex-direction:row;justify-content:center;padding:10px}
.has-song .sk-drop>svg,.has-song .sk-drop>strong,.has-song .sk-drop>small{display:none}
.has-song .sk-pick{min-height:44px;padding:10px 18px;border-color:var(--line2);background:var(--control);color:#fff;font-size:14px;box-shadow:none}
.has-song .sk-drop:hover .sk-pick,.has-song .sk-drop.over .sk-pick{background:#1c2a27;border-color:rgba(45,212,191,.5)}
.sk-status{margin:16px 0 4px}
.sk-bar{height:4px;border-radius:2px;background:#262626;overflow:hidden}
.sk-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal-dark),var(--teal));transition:width .2s}
.sk-status p{font-size:13.5px;margin:10px 0 0;text-align:center}
.sk-error{margin:16px 0 4px;padding:12px 14px;border-radius:10px;background:rgba(212,168,75,.08);border:1px solid var(--gold-border);color:var(--text);font-size:14px}
.sk-file{font:400 11px/1.4 'Space Mono',monospace;color:var(--muted);margin:16px 2px 10px;word-break:break-all}
.sk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Speed and key: the room's adjust cards. The page's own job comes first and its card is the larger one. */
.sk-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sk-card{min-width:0;background:var(--well);border:1px solid #2a2a2a;border-radius:10px;padding:12px 16px 14px}
.sk-card.off{opacity:.5}
.sk-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.sk-head label,.sk-head span{font:500 13px/1.2 'Montserrat',sans-serif;color:#fff}
.sk-reset{min-height:32px;padding:4px 0 4px 12px;border:0;background:transparent;color:var(--teal);font:500 12px/1 'Archivo',sans-serif;cursor:pointer}
.sk-reset:disabled{color:#555;cursor:default}
.sk-number{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 2px}
.sk-number output{flex:1;text-align:center;font:600 34px/1.15 'Montserrat',sans-serif;letter-spacing:-1px;color:#fff;font-variant-numeric:tabular-nums}
.sk-number output span{font-size:14px;font-weight:500;color:var(--muted);margin-left:2px;letter-spacing:0}
.sk-step{flex:none;width:48px;height:48px;border:1px solid var(--line2);border-radius:10px;background:var(--control);color:#fff;font:500 24px/1 'Archivo',sans-serif;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s}
@media(hover:hover){.sk-step:hover:not(:disabled){background:#1c2a27;border-color:rgba(45,212,191,.5)}}
.sk-step:disabled{opacity:.35;cursor:default}
.sk-card input[type=range]{display:block;width:100%;height:32px;margin:4px 0 0;accent-color:var(--teal);cursor:ew-resize}
.sk-card input[type=range]:disabled{cursor:default}
.sk-hint{font-size:12.5px;line-height:1.45;color:var(--muted);margin:4px 0 0;min-height:18px}
.sk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sk-chip{min-height:36px;padding:0 13px;border:1px solid var(--line2);border-radius:18px;background:var(--control);color:#d5dad9;font:600 13px/1 'Archivo',sans-serif;font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s}
@media(hover:hover){.sk-chip:hover:not([aria-pressed="true"]){background:#1c2a27;border-color:rgba(45,212,191,.5)}}
.sk-chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.sk-songkey{display:flex;align-items:center;gap:8px;margin-top:8px;font:400 10px/1.2 'Space Mono',monospace;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.sk-songkey select{flex:1;min-width:0;min-height:36px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:var(--control);color:#fff;font:500 13px/1 'Archivo',sans-serif;letter-spacing:0;text-transform:none}
.sk-lead .sk-number output{font-size:40px}
.sk-mode{margin:12px 2px 0;font-size:13px;line-height:1.5;color:var(--text2)}

/* The song on a waveform, with the loop on it: the console's player in miniature. */
.sk-deck{margin-top:12px;background:var(--well);border:1px solid #2a2a2a;border-radius:10px;padding:14px 16px}
.sk-wave{position:relative;height:96px;border-radius:6px;background:#101010;cursor:pointer;touch-action:pan-y;outline:none;overflow:hidden;-webkit-user-select:none;user-select:none}
.sk-wave:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.sk-wave canvas{position:absolute;top:0;left:0;height:100%;display:block}
#sk-canvas{width:100%}
.sk-played{position:absolute;top:0;bottom:0;left:0;width:0;overflow:hidden;pointer-events:none}
.sk-playhead{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 8px rgba(45,212,191,.9);pointer-events:none}
.sk-loop{position:absolute;top:0;bottom:0;border-left:2px solid var(--gold);border-right:2px solid var(--gold);background:rgba(212,168,75,.07);pointer-events:none}
.sk-loop.on{background:rgba(212,168,75,.18)}
.sk-loop.point{border-right:0}
.sk-transport{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
/* Play is the console's play button: a teal disc with a dark glyph. */
.sk-play{width:52px;height:52px;border-radius:50%;border:0;background:var(--teal);color:#0a0a0a;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 24px rgba(45,212,191,.09);flex:none;touch-action:manipulation;transition:background .15s}
@media(hover:hover){.sk-play:hover{background:var(--teal-bright)}}
.sk-play svg{width:20px;height:20px}
.sk-play .sk-pause,.sk-play.on .sk-go{display:none}
.sk-play.on .sk-pause{display:block}
.sk-readout{display:flex;flex-direction:column;gap:4px;min-width:104px}
.sk-time{font:400 13px/1 'Space Mono',monospace;color:#fff;font-variant-numeric:tabular-nums}
.sk-transport-speed{font:400 10.5px/1.2 'Space Mono',monospace;color:var(--muted)}
.sk-loopctl{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:40px;padding:0 14px;border:1px solid var(--line2);border-radius:20px;background:var(--control);color:#fff;font:600 13px/1 'Archivo',sans-serif;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s}
@media(hover:hover){.sk-btn:hover:not(:disabled):not([aria-pressed="true"]){background:#1c2a27;border-color:rgba(45,212,191,.5)}}
.sk-btn:disabled{opacity:.4;cursor:default}
.sk-btn i{width:8px;height:8px;border-radius:50%;background:#555}
.sk-btn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#120d02}
.sk-btn[aria-pressed="true"] i{background:#120d02}
.sk-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:10px 0 0}

/* Download MP3: the song at this speed and key, saved. The ask for a free account, the progress, then the file. */
.sk-export{margin-top:12px;background:var(--well);border:1px solid #2a2a2a;border-radius:10px;padding:14px 16px}
.sk-export-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.sk-save{border-color:rgba(45,212,191,.55);color:var(--teal)}
.sk-save svg{width:16px;height:16px;flex:none}
.sk-export-line{flex:1 1 240px;margin:0;font-size:13px;line-height:1.5;color:var(--text2)}
.sk-signin{margin-top:14px;padding-top:14px;border-top:1px solid #262626}
.sk-signin p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--text)}
.sk-signin .sk-google{width:auto;margin:0 0 12px}
.sk-signin .sk-google::before{content:none} /* the site's call-to-action pulse is for the splitter, not a sign-in */
.sk-signin .sk-signin-email{font-size:13px;color:var(--muted);margin:0}
.sk-signin-email a{color:var(--teal)}
.sk-signin .sk-signin-error{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:rgba(212,168,75,.08);border:1px solid var(--gold-border);font-size:13.5px}
.sk-export-status{margin-top:14px}
.sk-export-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.sk-export-meta p{margin:0;font-size:13px;line-height:1.45;color:var(--text2)}
.sk-ready{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:10px;background:rgba(45,212,191,.06);border:1px solid var(--teal-border)}
.sk-ready p{margin:0;min-width:0}
.sk-ready strong{display:block;font:600 14px/1.35 'Archivo',sans-serif;color:#fff}
.sk-ready span{display:block;margin-top:2px;font:400 11px/1.4 'Space Mono',monospace;color:var(--muted);word-break:break-all}
.sk-ready .sk-btn{flex:none}

/* The way into the room: the song, split into stems. */
.sk-next{margin:16px 0 0;padding:20px 18px;border-radius:10px;background:linear-gradient(180deg,rgba(45,212,191,.08),rgba(45,212,191,.025));border:1px solid var(--teal-border);text-align:center}
.sk-next p{color:var(--text);margin:0 0 14px;font-size:14.5px;line-height:1.6}
.sk-next .sk-next-line{font-size:12.5px;color:var(--muted);margin:12px auto 0;max-width:560px}
button.cta:disabled{cursor:progress;background:#20514a;border-color:#20514a;color:#9dece0;box-shadow:none}
@media(max-width:760px){.sk{padding:18px;border-radius:10px}}
@media(max-width:600px){.sk-export{padding:12px}.sk-save{width:100%}.sk-signin .sk-google{width:100%}.sk-controls{grid-template-columns:1fr}.sk{padding:14px}.sk-drop{padding:24px 14px 20px}.sk-deck{padding:12px}.sk-wave{height:80px}.sk-loopctl{margin-left:0;width:100%}.sk-loopctl .sk-btn{flex:1 1 0;padding:0 8px}.sk-play{width:48px;height:48px}.sk-next{padding:18px 14px}}
@media(prefers-reduced-motion:reduce){.sk-bar i,.sk-drop,.sk-pick,.sk-step,.sk-chip,.sk-play,.sk-btn{transition:none}}