@font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family:Marcellus; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/marcellus-latin.woff2") format("woff2"); }
/* Soundboard-owned tokens, aligned with Evernight's midnight/arcane palette. */
:root { color-scheme:dark; --bg:#0d1b2a; --surface:#14263b; --raised:#1b3048; --text:#f2f4fa; --muted:#b2bed0; --line:#42536b; --accent:#c9adff; --gold:#f4d58d; --danger:#ffb2b9; --ok:#7de0bb; font-family:Inter,"Segoe UI",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 12% 0, #33244d66, transparent 60%),var(--bg); color:var(--text); line-height:1.5; }
button,input,select { font:inherit; }
button,input,select,.button { min-height:44px; border:1px solid #64758e; border-radius:9px; background:var(--raised); color:var(--text); padding:9px 12px; }
button,.button { cursor:pointer; font-weight:600; }
.button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; text-align:center; }
button:hover:enabled { border-color:var(--accent); background:#2b3a56; }
button:disabled { opacity:.45; cursor:default; }
button.primary,.button.primary { background:var(--gold); color:#19233a; border-color:var(--gold); }
button.primary:hover:enabled,.button.primary:hover { background:#ffe4a7; }
button.danger { color:var(--danger); }
button.subtle { background:transparent; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none!important; }
.skip { position:fixed; top:-100px; left:16px; z-index:20; background:var(--gold); color:var(--bg); padding:12px; }
.skip:focus { top:12px; }
.app-header { max-width:1440px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:26px 28px 20px; gap:12px 24px; }
.brand { display:flex; gap:14px; align-items:center; }
.brand>div { min-width:0; }
.brand img { flex-shrink:0; }
h1 { overflow-wrap:anywhere; }
.brand img { border-radius:10px; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-family:Marcellus,Georgia,serif; font-weight:400; }
h1 { font-size:29px; letter-spacing:-.4px; }
h2 { font-size:23px; }
h3 { font-size:16px; }
.eyebrow { font-size:10px; letter-spacing:2px; font-weight:700; color:var(--gold); margin-bottom:3px; }
.output-identity { grid-column:1/-1; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.session-console { display:grid; gap:8px; position:sticky; top:0; z-index:8; max-width:1384px; margin:0 auto 20px; padding:14px 20px; background:#101e30f5; border:1px solid var(--line); border-radius:12px; }
html { scroll-padding-block:calc(var(--console-height,200px) + 24px) 90px; }
body[data-console-tall="true"] .session-console { position:static; }
body[data-console-tall="true"] .control-column { position:static; max-height:none; }
html:has(body[data-console-tall="true"]) { scroll-padding-top:16px; }
button,.button,.check { overflow-wrap:anywhere; min-width:0; }
.check input { flex-shrink:0; }
.account-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; min-width:0; }
#account-name { font-size:13px; color:var(--muted); overflow-wrap:anywhere; max-width:230px; }
.session-line { display:flex; flex-wrap:wrap; gap:10px; align-items:center; grid-column:1/-1; }
.essential-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; grid-column:1/-1; }
.essential-actions .tag { margin-left:auto; }
.connection-status { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--muted); }
body[data-state="ready"] .status-dot { background:var(--ok); box-shadow:0 0 0 4px #7de0bb18; }
body[data-state="ready"] .connection-status { color:var(--ok); }
main { max-width:1440px; padding:0 28px; margin:auto; }
.panel { background:linear-gradient(145deg,#182b40,var(--surface)); border:1px solid #35475f; border-radius:15px; padding:22px; box-shadow:0 8px 30px #0002; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.tag { color:var(--muted); font-size:11px; border:1px solid var(--line); border-radius:20px; padding:4px 9px; white-space:nowrap; }
.help { color:var(--muted); font-size:12px; margin:8px 0; }
.connect-grid { display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(130px,1fr) 90px auto auto; gap:12px; align-items:end; }
label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px; min-width:0; }
input,select { width:100%; }
.notice { margin:14px 0; border:1px solid var(--accent); border-radius:9px; padding:12px; font-size:13px; overflow-wrap:anywhere; }
.connection-banner { display:flex; gap:12px; justify-content:space-between; align-items:center; background:#201f39; }
.connection-banner button { flex-shrink:0; }
.notice.error { color:var(--danger); border-color:#a26072; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,380px); gap:20px; margin-top:20px; align-items:start; }
.workspace>* { min-width:0; }
.control-column { display:grid; gap:20px; position:sticky; top:16px; max-height:calc(100dvh - 32px); overflow:auto; scrollbar-gutter:stable; padding:3px; margin:-3px; }
.library-panel { min-height:440px; }
.filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:8px 0 20px; border-bottom:1px solid var(--line); }
.advanced-filters { grid-column:1/-1; }
.advanced-filters summary { color:var(--muted); font-weight:400; font-size:12px; padding:12px 0; }
.filter-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-bottom:12px; }
.search { grid-column:1/-1; }
.check { flex-direction:row; align-items:center; gap:9px; min-height:44px; }
.check input { width:18px; height:18px; min-height:0; accent-color:var(--accent); }
.gain-row { border-top:1px solid #35475f; padding:15px 0 10px; }
.gain-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.gain-heading label { color:var(--text); font-size:13px; }
.gain-value { font-variant-numeric:tabular-nums; font-size:13px; color:var(--gold); }
.gain-edit { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
input[type="range"] { padding:0; min-width:0; accent-color:var(--accent); background:transparent; }
.mute { font-size:11px; min-width:64px; }
.mute[aria-pressed="true"] { color:var(--gold); border-color:var(--gold); }
.effective { color:var(--muted); font-size:11px; }
.exact-gain { display:flex; gap:8px; align-items:center; margin:8px 0; }
.exact-gain label { flex:1; flex-direction:row; align-items:center; }
.exact-gain input { width:84px; }
.exact-gain button { font-size:12px; }
.gain-exact { display:flex; gap:8px; align-items:center; margin:8px 0; }
.gain-exact input { width:90px; }
.gain-exact label { flex:1; }
ul,ol { list-style:none; margin:0; padding:0; }
.library-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; padding:19px 0; border-bottom:1px solid #35475f; }
.sound-name { font-size:14px; font-weight:650; overflow-wrap:anywhere; }
.sound-meta { font-size:11px; color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.library-row button { min-width:70px; }
.live-row { padding:13px 0; border-bottom:1px solid #35475f; }
.live-row .sound-name { font-size:13px; }
.instance-actions { display:flex; gap:8px; margin-top:9px; }
.instance-actions button { flex:1; font-size:12px; }
.empty { padding:30px 0; color:var(--muted); font-size:13px; text-align:center; }
.command-row { padding:7px 0; font-size:11px; border-bottom:1px solid #35475f; overflow-wrap:anywhere; }
.command-row[data-outcome="unknown"],.command-row[data-outcome="failed"],.command-row[data-outcome="rejected"] { color:var(--danger); }
.command-row[data-outcome="executed"] { color:var(--ok); }
footer { max-width:1440px; padding:28px; margin:auto; font-size:11px; color:var(--muted); }
.entry-panel { margin:20px 0; padding:30px; border-color:#8874b0; }
.entry-panel>p:not(.eyebrow) { max-width:70ch; margin-top:12px; }
.entry-actions { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.table-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); gap:12px; margin:18px 0; }
.table-row { border:1px solid var(--line); background:var(--bg); padding:18px; border-radius:10px; display:grid; gap:12px; }
.table-row h3,.admin-row span { overflow-wrap:anywhere; }
details>summary { cursor:pointer; min-height:44px; padding:10px 0; font-size:13px; font-weight:650; }
.diagnostics { padding-top:8px; padding-bottom:8px; }
.view-navigation { display:none; }
dialog { color:var(--text); background:var(--surface); border:1px solid #7d8ca4; border-radius:16px; padding:0; width:min(660px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:hidden; box-shadow:0 20px 80px #0009; }
dialog[open] { display:flex; flex-direction:column; }
dialog::backdrop { background:#050b15bb; }
.dialog-heading,.dialog-footer { display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; padding:20px 24px; flex-shrink:0; }
.dialog-heading { border-bottom:1px solid var(--line); }
.dialog-footer { border-top:1px solid var(--line); }
.dialog-scroll { padding:20px 24px; overflow:auto; overscroll-behavior:contain; }
.dialog-scroll section+section { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
#invitation-form { display:grid; gap:12px; margin-top:16px; }
.admin-row { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding:14px 0; font-size:13px; }
.admin-row .entry-actions { flex-shrink:0; margin:0; }
#invite-result { margin-top:18px; padding:16px; background:var(--bg); border-radius:10px; }
#invite-qr { max-width:100%; height:auto; image-rendering:pixelated; margin:12px auto; display:block; }
#confirm-form>h2,#confirm-form>p { margin:24px; }
#confirm-form>p { overflow-wrap:anywhere; }
#confirm-form .dialog-footer { justify-content:flex-end; }
@media(max-width:1100px) { .connect-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 90px; } #connect,#disconnect { grid-column:auto; } .workspace { grid-template-columns:minmax(0,1fr) minmax(290px,.8fr); gap:16px; } .panel { padding:18px; } }
@media(max-width:850px) { main { padding:0 20px; } .app-header { padding:22px 20px 18px; } .workspace { grid-template-columns:1fr; } .control-column { grid-template-columns:1fr 1fr; position:static; max-height:none; overflow:visible; padding:0; margin:0; } .diagnostics { grid-column:1/-1; } .panel { padding:18px; } .playing-panel,.mixer-panel { min-width:0; } .entry-panel { padding:24px; } }
@media(max-width:600px) {
 body { height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
 .app-header,.session-console { flex-shrink:0; }
 .session-console { position:static; }
 main { flex:1; min-height:0; overflow:auto; width:100%; overscroll-behavior:contain; scroll-padding-block:12px; }
 main { padding:0 12px; } .app-header { padding:20px 16px 14px; grid-template-columns:1fr; }
 .account-actions { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; } #account-name { max-width:none; font-size:12px; }
 .account-actions button { font-size:13px; padding:8px; }
 .session-console { margin:0 12px 14px; padding:10px 12px; gap:7px; }
 .connect-grid { grid-template-columns:minmax(0,1fr) minmax(100px,.6fr); }
 .connect-grid label:first-child { grid-column:1/-1; } #connect,#disconnect { grid-column:auto; }
 .control-column { grid-template-columns:1fr; } .filters { grid-template-columns:1fr 1fr; } .brand { gap:10px; }
 .panel { padding:16px; border-radius:12px; } .library-panel { min-height:300px; }
 .connection-banner { align-items:flex-start; flex-direction:column; }
 .view-navigation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex-shrink:0; gap:6px; background:var(--bg); border:1px solid #71839d; border-radius:12px; padding:6px; margin:8px 12px; z-index:5; box-shadow:0 3px 16px #0008; }
 .view-navigation [aria-current] { background:var(--gold); color:var(--bg); border-color:var(--gold); }
 .view-navigation button[aria-current]:hover:enabled { background:#ffe4a7; color:#0d1b2a; }
 body[data-view="library"] [data-section="playing"],body[data-view="library"] [data-section="mixer"],body[data-view="playing"] [data-section="library"],body[data-view="playing"] [data-section="mixer"],body[data-view="mixer"] [data-section="library"],body[data-view="mixer"] [data-section="playing"] { display:none; }
 .control-column:has(.playing-panel[hidden]) { display:none; }
 body[data-view="library"] .control-column { display:none; }
 .diagnostics { margin-bottom:4px; }
 .essential-actions button { flex:1 1 auto; } .essential-actions .tag { margin-left:0; }
 .output-identity { font-size:13px; } .eyebrow { font-size:10px; letter-spacing:1.4px; }
 .section-head { gap:10px; } #toggle-library { width:100%; }
 dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); }
 .dialog-heading,.dialog-footer,.dialog-scroll { padding:16px; }
 .admin-row { flex-direction:column; align-items:stretch; gap:10px; }
 .admin-row .entry-actions { flex-wrap:wrap; }
 footer { display:none; } :focus-visible { scroll-margin-block:20px; }
 body[data-console-tall="true"] { height:auto; overflow:visible; display:block; }
 body[data-console-tall="true"] main { overflow:visible; }
}
@media(min-width:851px) { .control-column { top:calc(var(--console-height,180px) + 20px); max-height:calc(100dvh - var(--console-height,180px) - 40px); } }
@media(max-width:360px) { .filters,.filter-options { grid-template-columns:1fr; } }
@media(max-height:650px) { .session-console { position:static; } .control-column { position:static; max-height:none; } html { scroll-padding-top:16px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

/* Keep the skip link clipped even in full-page captures of a scrolled viewport. */
.skip:not(:focus-visible) { clip-path:inset(100%); width:1px; height:1px; overflow:hidden; }
@media(max-width:520px) { .connect-grid { grid-template-columns:minmax(0,1fr) minmax(120px,.8fr); } }