.sb-shell { width:min(1500px,calc(100% - 64px)); margin:auto; padding:60px 0 90px; }
.sb-heading { display:flex; justify-content:space-between; gap:48px; align-items:center; padding-bottom:44px; }
.sb-heading h1 { font-size:clamp(66px,7vw,106px); font-weight:500; line-height:.87; letter-spacing:-.055em; margin:26px 0; }
.sb-heading h1 em { font-weight:400; }
.sb-deck { max-width:540px; font-size:20px; line-height:1.5; color:#59534b; }
.sb-plate { width:320px; flex:0 0 320px; padding:28px 30px; border:1px solid #bfae91; transform:rotate(2deg); position:relative; }
.sb-plate>span:not(.sb-stamp) { font:700 10px var(--sans); letter-spacing:.13em; text-transform:uppercase; }
.sb-plate strong { display:block; font-size:29px; font-weight:500; line-height:1.15; margin-top:24px; }
.sb-plate p { font-size:15px; color:#62584b; line-height:1.6; }
.sb-stamp { position:absolute; right:22px; top:20px; border:2px solid #9c553a; color:#9c553a; width:40px; height:40px; border-radius:50%; display:grid;place-items:center;font:italic 28px var(--serif); }
.sb-console { display:grid; grid-template-columns:minmax(160px,1fr) minmax(165px,1fr) minmax(145px,.8fr) auto; gap:28px; align-items:center; padding:25px 28px; background:#202c36; color:#f5edde; border-radius:8px;box-shadow:0 14px 28px #19222b18; }
.sb-console label { display:block;font:700 10px var(--sans); text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px; }
.sb-master label { display:flex;justify-content:space-between;gap:16px; }
.sb-master output { font-weight:400;letter-spacing:0; }
.sb-master input { width:100%;accent-color:#d8b280; }
.sb-mode select { width:100%;padding:9px 10px;background:#2d3b46;border:1px solid #68747c;color:#fff4e5;font:14px var(--sans);border-radius:4px; }
#modeHint { display:block;font-size:12px;color:#d2c8b7;margin-top:7px; }
.sb-meter>span { display:block;font:11px var(--sans);color:#d5cabb; }
.sb-meter strong { color:#fff4e5; }
#liveDot { display:inline-block;width:6px;height:6px;border-radius:50%;background:#7d817c;margin-right:7px; }
#liveDot.active { background:#d8b280;box-shadow:0 0 9px #d8b28080; }
#levelMeter { height:7px;background:#48535a;margin:13px 0;border-radius:3px;overflow:hidden; }
#levelMeter>i { display:block;height:100%;width:0;background:#d8b280;transition:width .06s linear; }
.sb-buttons { display:grid;gap:8px; }
.sb-buttons .button { color:#f8edde;border-color:#9e978b;background:transparent;font-size:10px;min-height:37px;padding:10px 15px; }
.sb-buttons .sb-stop { background:#bf704e;border-color:#bf704e;color:#fff; }
.sb-buttons kbd { margin-left:10px;font-size:9px;opacity:.85; }
.sb-library-heading { display:flex;justify-content:space-between;align-items:center;gap:22px;margin:35px 0 20px; }
.sb-filters { display:flex;gap:6px;flex-wrap:wrap; }
.sb-filters button { border:1px solid #cbbca2;border-radius:4px;padding:9px 12px;background:transparent;font:600 11px var(--sans);cursor:pointer;color:#4c4439; }
.sb-filters button[aria-pressed="true"] { background:#ded0b8;border-color:#bba17c; }
.sb-keyboard { display:flex;align-items:center;gap:8px;white-space:nowrap;font:11px var(--sans); }
.sb-keyboard input { accent-color:#865236; }
.sb-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px; }
.sb-card { min-width:0;border:1px solid #c6b69b;border-radius:7px;background:linear-gradient(140deg,#fcf7ec9e,#eadeca70);position:relative;overflow:hidden;transition:box-shadow .12s,border-color .12s; }
.sb-card[data-live="true"] { border-color:var(--pad-accent);box-shadow:0 0 0 2px var(--pad-accent),0 8px 24px #33281615; }
.sb-card[data-selected="true"] { background:#f8f0e2; }
.sb-pad { width:100%;min-height:178px;border:0;background:transparent;text-align:left;cursor:pointer;padding:20px 20px 17px;color:var(--ink); }
.sb-pad:hover { background:#ffffff55; }
.sb-pad-top { display:flex;gap:10px;justify-content:space-between;padding-right:28px;font:10px var(--sans);text-transform:uppercase;letter-spacing:.07em;color:#746856; }
.sb-pad-state { color:var(--pad-accent); }
.sb-wave { width:100%;height:39px;display:block;margin:18px 0 15px;color:var(--pad-accent); }
.sb-wave path { stroke:currentColor;stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke; }
.sb-pad strong { display:block;font:500 25px var(--serif);letter-spacing:-.025em;line-height:1.1; }
.sb-pad small { display:block;font:11px var(--sans);color:#776a57;margin-top:9px; }
.sb-favorite { position:absolute;right:12px;top:12px;background:transparent;border:0;cursor:pointer;font-size:23px;color:#9b774b;padding:3px 6px; }
.sb-card-settings { display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid #c6b69b70; }
.sb-card-settings input { min-width:0; flex:1;width:100%;accent-color:var(--pad-accent); }
.sb-card-settings label { font:9px var(--sans);text-transform:uppercase;letter-spacing:.06em; }
.sb-card-settings output { min-width:33px;text-align:right;font:10px var(--sans); }
.sb-message { font-size:16px;color:#78402a;line-height:1.5; }
.sb-message:empty { display:none; }
.sb-empty { text-align:center;padding:50px 24px;border:1px dashed #bca98b; }
.sb-selected { display:flex;justify-content:space-between;gap:30px;align-items:center;margin-top:35px;padding:30px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line); }
.sb-selected h2 { margin:12px 0;font-size:36px;font-weight:500;letter-spacing:-.035em; }
#selectedQuote { font-style:italic;font-size:19px;margin:10px 0;color:#655644; }
.sb-selected-meta { font:11px var(--sans);color:#756957; }
.sb-selected-actions { display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;max-width:570px; }
.sb-selected-actions .button { font-size:10px; }
.sb-selected-actions>a { display:block;flex-basis:100%;text-align:right;margin-top:8px; }
.sb-footnotes { display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:42px; }
.sb-footnotes h2 { font-size:29px;font-weight:500; }
.sb-footnotes p { font-size:16px;line-height:1.65;color:#5e574d; }
.sb-footnotes a { font-size:13px;text-underline-offset:3px; }
.sb-credit { display:block;margin-top:22px;font-size:12px;color:#7a6d5c; }
.sb-credit a { font-size:12px; }
.soundboard-page [hidden] { display:none!important; }
@media(max-width:1200px) { .sb-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .sb-console { grid-template-columns:1fr 1fr; } .sb-buttons { grid-template-columns:1fr 1fr; } .sb-selected { align-items:start;flex-direction:column; } .sb-selected-actions { justify-content:start; } .sb-selected-actions>a { text-align:left; } }
@media(max-width:760px) { .sb-shell { width:calc(100% - 32px);padding-top:34px; } .sb-heading { gap:20px; } .sb-heading h1 { font-size:70px; } .sb-plate { display:none; } .sb-console { padding:20px;gap:22px; } .sb-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; } .sb-library-heading { align-items:start;flex-direction:column;gap:15px; } .sb-filters { width:100%;overflow:auto;flex-wrap:nowrap;padding-bottom:5px; } .sb-filters button { white-space:nowrap; } .sb-pad { padding:16px 14px;min-height:174px; } .sb-pad strong { font-size:23px; } .sb-pad-top { font-size:9px; } .sb-card-settings { padding:10px;gap:7px; } .sb-card-settings label { display:none; } .sb-selected { padding:26px 4px; } .sb-footnotes { grid-template-columns:1fr;gap:10px; } }
@media(max-width:440px) { .sb-heading h1 { font-size:66px; } .sb-deck { font-size:18px; } .sb-console { gap:20px 16px; } .sb-buttons { grid-column:1 / -1; } .sb-meter { grid-column:1 / -1; } .sb-pad strong { font-size:22px; } .sb-pad { min-height:190px; } .sb-selected-actions .button { flex:1;white-space:nowrap; } }
@media(prefers-reduced-motion:reduce) { .sb-card,#levelMeter>i { transition:none; } }