:root{--bg:#08090c;--panel:#11131a;--panel2:#191c27;--line:#2a2e3c;--text:#f0f2f9;--muted:#a3aabe;--accent:#cda2ff;--accent-rgb:205,162,255;--pad-color:#cda2ff;--radius:18px;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:radial-gradient(ellipse 900px 550px at 35% 5%,rgba(var(--accent-rgb),.08),transparent 68%),var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body[data-board="funny"]{--accent:#ffda60;--accent-rgb:255,218,96;--pad-color:#ffda60}
body[data-board="dj"]{--accent:#68e3e8;--accent-rgb:104,227,232;--pad-color:#68e3e8}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.55}
[hidden]{display:none!important}
a{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:2147483647;border-radius:8px;background:var(--accent);color:#08090c;padding:10px 16px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px;font-size:12px;color:var(--muted)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline;color:var(--text)}
.breadcrumbs [aria-current]{color:#d0d5e3}
.hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 0 36px}
.hero-copy{max-width:810px}
.eyebrow{font-size:11px;line-height:1.5;letter-spacing:.18em;color:var(--muted);font-weight:700;margin:0 0 9px}
.hero .eyebrow{color:var(--accent)}
h1{font-size:clamp(34px,4.9vw,58px);letter-spacing:-.04em;line-height:1.07;margin:0 0 18px}
h1 span{display:block;color:var(--accent);font-size:.53em;letter-spacing:-.025em;margin-top:12px}
.lede{font-size:16px;line-height:1.8;color:#b9c1d3;margin:0 0 22px;max-width:740px}
.hero-meta{display:flex;flex-wrap:wrap;gap:7px 22px;font-size:12px;color:#c6ccdb}
.hero-art{height:195px;min-width:195px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}
.hero-art>span{display:block;font-size:84px;filter:drop-shadow(0 9px 20px rgba(0,0,0,.5));transform:rotate(-8deg)}
.hero-art>i{font:700 9px/1 system-ui,sans-serif;letter-spacing:.22em;position:absolute;bottom:10px;color:var(--accent)}
.hero-orbit{position:absolute;inset:8px;border:1px solid rgba(var(--accent-rgb),.25);border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.12),transparent 70%);z-index:-1}
.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.1);inset:17px}
.hero-orbit:after{inset:-12px;border-style:dashed}
.board-links{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.board-links a{font-size:12px;color:var(--muted);text-decoration:none;border:1px solid transparent;border-radius:7px;padding:7px 12px}
.board-links a:hover{color:var(--text);background:var(--panel)}
.board-links a[aria-current]{color:var(--accent);border-color:rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.07)}
.board{padding:22px;background:linear-gradient(155deg,#141721,#0e1017);border:1px solid #303444;border-radius:22px;box-shadow:0 20px 55px #0004;margin-bottom:42px;scroll-margin-top:76px}
.board-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:19px}
.board-title .eyebrow{font-size:9px;margin-bottom:3px}
.board-title h2{font-size:21px;line-height:1.3;margin:0;letter-spacing:-.025em}
.board-toolbar{display:flex;justify-content:space-between;gap:14px;margin-bottom:13px;align-items:center;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filter{background:#1b1f2c;color:var(--muted);border:1px solid #2b3041;padding:8px 12px;border-radius:99px;font-size:12px;line-height:1.3;font-weight:600}
.filter:hover{color:var(--text);border-color:#50566b}
.filter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#0b0d12}
#sound-search{flex:1 1 180px;max-width:255px;padding:9px 14px;min-width:140px;border-radius:99px;border:1px solid var(--line);background:#0d0f17;color:var(--text);font-size:13px}
#sound-search::placeholder{color:#9099af}
.controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:11px 13px;background:#090b11;border:1px solid #242938;border-radius:11px;margin-bottom:20px;color:var(--muted);font-size:12px}
.controls label{display:flex;align-items:center;gap:9px}
input[type="range"]{accent-color:var(--accent);cursor:pointer}
.controls input[type="range"]{width:110px}
.check-label{display:flex;align-items:center;gap:8px;cursor:pointer}
input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;flex:0 0 auto}
.btn{border:1px solid #343a4c;border-radius:8px;background:#1b2030;color:var(--text);padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;line-height:1.4;font-weight:600;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:#6b7389;background:#242a3c}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#0c0d14}
.btn.primary:hover{filter:brightness(1.08)}
.btn.stop{color:#ffb0bd;background:#26131c;border-color:#5a2939;margin-left:auto}
kbd{font:600 10px/1.2 ui-monospace,Menlo,Consolas,monospace;background:#242a39;border:1px solid #3d455a;color:#d0d6e4;padding:3px 5px;border-radius:4px}
.sound-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px 13px}
.sound-pad{position:relative;min-width:0;aspect-ratio:1.14;border-radius:var(--radius);--pad-color:var(--accent)}
.sound-pad[data-group="answers"]{--pad-color:#cda2ff}.sound-pad[data-group="rounds"]{--pad-color:#a6ddcc}.sound-pad[data-group="suspense"]{--pad-color:#a6b6ff}.sound-pad[data-group="celebrate"]{--pad-color:#ffca75}
.sound-pad[data-group="cartoon"]{--pad-color:#ffda60}.sound-pad[data-group="punchline"]{--pad-color:#ffab7c}.sound-pad[data-group="reactions"]{--pad-color:#b7dfa3}
.sound-pad[data-group="hype"]{--pad-color:#6fe4e5}.sound-pad[data-group="transitions"]{--pad-color:#9bb3ff}.sound-pad[data-group="drums"]{--pad-color:#c5a1ff}
.pad-trigger{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius);background:radial-gradient(ellipse 130% 100% at 25% 0%,#ffffff70,transparent 65%),var(--pad-color);color:#151520;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px 9px 13px;box-shadow:0 5px 0 color-mix(in srgb,var(--pad-color) 50%,#10101a),0 9px 18px #0005,inset 0 -2px 0 #0001;transition:filter .12s,transform .08s,box-shadow .08s;user-select:none;-webkit-user-select:none}
.pad-trigger:hover{filter:brightness(1.07)}
.pad-trigger:active,.is-playing .pad-trigger,.is-repeating .pad-trigger{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--pad-color) 50%,#10101a),0 4px 12px #0003;filter:brightness(1.1)}
.is-repeating .pad-trigger{outline:2px solid var(--pad-color);outline-offset:5px}
.is-repeating:after{content:"⟳";position:absolute;right:11px;bottom:7px;color:#141422;font-weight:800;pointer-events:none}
.pad-key{position:absolute;left:9px;top:9px;background:#0002;border-radius:5px;font:700 10px/1 ui-monospace,Menlo,Consolas,monospace;color:#151520b3;padding:4px 6px}
.pad-emoji{font-size:31px;line-height:1.15;filter:drop-shadow(0 2px 2px #0002)}
.pad-name{font-size:12px;line-height:1.15;font-weight:800;text-align:center;overflow-wrap:anywhere}
.pad-detail{font-size:9px;line-height:1.2;font-weight:500;color:#151520b8;text-align:center}
.pad-loop-badge{position:absolute;left:32px;top:9px;border:1px solid #15152040;border-radius:4px;font-size:8px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;font-weight:800;padding:2px 4px}
body[data-board="game-show"] .sound-pad{aspect-ratio:1.02}
body[data-board="game-show"] .pad-trigger{gap:5px;padding:31px 7px 12px}
body[data-board="game-show"] .pad-emoji{font-size:28px}
.pad-download{position:absolute;top:7px;right:7px;z-index:2;border:0;border-radius:7px;background:#0002;color:#171728;width:28px;height:28px;font-size:20px;line-height:1;padding:0;display:grid;place-items:center}
.pad-download:hover{background:#0004;color:#fff}
.empty-state{text-align:center;color:var(--muted);padding:38px 12px;font-size:14px}
.board-status{font-size:12px;min-height:1.6em;color:var(--accent);margin:20px 0 3px}
.hint{font-size:11px;color:#8f98ad;margin:0;line-height:1.8}
.noscript{padding:12px;background:#2b2432;border:1px solid #675776;border-radius:9px;color:#f4d9ff}
.dj-controls{display:grid;grid-template-columns:minmax(200px,1.7fr) minmax(180px,1fr) 100px;gap:18px;padding:0 2px 22px;margin-bottom:2px}
.dj-controls label{font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#d7deed}
.dj-controls output{margin-left:auto;font-size:11px;font-weight:400;color:var(--accent)}
.dj-controls input[type="range"]{width:100%;margin:0;height:32px}
input[type="number"],select{background:#0b0e16;color:var(--text);border:1px solid #353b4d;border-radius:7px;min-height:36px;padding:6px 10px;font-size:13px}
.dj-controls select,.dj-controls input[type="number"]{width:100%;height:36px}
.unit{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:400}
.quiz-tools{display:grid;grid-template-columns:1fr 1fr;gap:25px;background:radial-gradient(ellipse at 15% 0%,#39234e55,transparent 70%),#11141d;border:1px solid #41354f;border-radius:20px;padding:22px 28px;margin-bottom:18px}
.timer-face{align-self:center;text-align:center;border-right:1px solid #393141;padding-right:24px}
.timer-face h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0;font-weight:600}
#timer-display{font-variant-numeric:tabular-nums;font-size:clamp(70px,9vw,116px);letter-spacing:-.06em;line-height:1.12;font-weight:800;color:#f0e8fb}
#timer-display.timer-urgent{color:#ff9cae}
#timer-display.timer-finished{color:#ff9cae;text-shadow:0 0 24px #ff648044}
.timer-caption{font-size:11px;color:var(--muted);margin:4px 0 0}
.timer-settings{display:flex;gap:12px 15px;flex-wrap:wrap;align-content:center;align-items:center}
.timer-presets{width:100%;display:flex;gap:7px}
.timer-presets .btn{min-width:65px}
.timer-settings>label[for="timer-duration"]{display:flex;gap:7px;align-items:center;font-size:12px;width:100%;color:#d7deed}
#timer-duration{width:88px;margin-left:auto}
.timer-actions{display:flex;gap:8px}
.timer-actions .btn{min-width:81px}
.timer-settings .check-label{font-size:11px;color:var(--muted)}
.timer-settings .timer-bed-option{width:100%}
.present-button{font-size:11px;margin-left:auto}
#present-exit{display:none}
body.presenting{overflow:hidden}
body.presenting #performance-area{position:fixed;inset:0;z-index:2147483647;overflow-y:auto;background:#08090c;padding:64px max(20px,calc((100vw - 1350px)/2)) 24px;overscroll-behavior:contain}
body.presenting #present-exit{display:inline-flex;position:fixed;top:13px;right:20px;z-index:2147483647;background:#252032;border-color:#655079}
body.presenting .quiz-tools{margin-bottom:20px}
body.presenting #timer-display{font-size:clamp(90px,12vw,170px)}
body.presenting .timer-caption{display:none}
body.presenting #present-mode{display:none}
body.presenting .board{margin-bottom:0}
body.presenting .sound-grid{grid-template-columns:repeat(9,minmax(0,1fr))}
body.presenting .board-title .eyebrow{display:none}
body.presenting .pad-name{font-size:11px}
.content{max-width:900px;margin:0 auto}
.content h2,.related h2{font-size:clamp(23px,3vw,31px);letter-spacing:-.03em;line-height:1.2;margin:40px 0 15px}
.content p{font-size:15px;color:#b1bacd;line-height:1.9;margin:0 0 16px}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:23px 0 33px}
.guide-card{padding:20px 18px;border:1px solid var(--line);border-radius:13px;background:#11141c}
.guide-card .step{font:600 11px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--accent)}
.guide-card h3{font-size:16px;letter-spacing:-.02em;line-height:1.3;margin:9px 0 8px}
.guide-card p{font-size:13px;line-height:1.75;margin:0;color:#9faac0}
.content details{border:1px solid var(--line);border-radius:11px;background:#10131b;margin:9px 0;padding:0 17px}
.content summary{cursor:pointer;padding:15px 5px 15px 0;font-size:14px;font-weight:600;line-height:1.6}
.content details p{font-size:13px;line-height:1.85;margin:0 0 17px;color:#aab5ca}
.related{margin:49px 0 43px;padding-top:25px;border-top:1px solid var(--line)}
.related>.eyebrow{font-size:10px;margin:0 0 4px}
.related h2{font-size:23px;margin:0 0 18px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.related-card{display:flex;flex-direction:column;position:relative;padding:20px 37px 20px 18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none;gap:3px}
.related-card:hover{border-color:var(--accent)}
.related-label{font-size:15px;font-weight:700}
.related-card>span+span{font-size:11px;color:var(--muted)}
.related-card b{position:absolute;right:15px;top:18px;font-weight:400;color:var(--accent)}
body>.homepage-content{width:98%;margin:10px auto 0;padding:20px;background:#101217;border:1px solid #292d37;border-radius:10px;box-shadow:0 5px 14px #0003}
.sb-site-footer{display:block;padding:24px 18px 30px;color:#a0a0a8;font-size:12px;text-align:center}
.sb-site-footer a{color:#a0a0a8}
.sb-site-footer a:hover{color:var(--accent)}
@media(min-width:1600px){body.presenting .sound-pad{aspect-ratio:1.25}}
@media(max-width:980px){.hero-art{min-width:140px;height:150px}.hero-art>span{font-size:65px}.hero{gap:22px}.sound-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.pad-name{font-size:11px}.quiz-tools{padding:20px;gap:20px}.timer-settings{gap:10px}.present-button{margin-left:0}body.presenting .sound-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:750px){.wrap{padding:0 16px}.breadcrumbs{margin:17px 0 23px;font-size:11px}.hero{padding-bottom:27px}.hero-art{display:none}.hero .eyebrow{font-size:10px}.hero-meta{gap:8px 16px;font-size:11px}.lede{font-size:14px;line-height:1.8}.board{padding:17px;border-radius:17px}.board-title h2{font-size:18px}.board-links{gap:4px}.board-links a{padding:7px 9px;font-size:11px}.board-toolbar{gap:11px}.filters{gap:5px}.filter{padding:8px 10px;font-size:11px}#sound-search{max-width:none;flex-basis:100%}.sound-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 10px}.sound-pad{aspect-ratio:1.05}.pad-trigger{padding:27px 6px 10px;gap:6px;border-radius:13px}.sound-pad{border-radius:13px}.pad-emoji{font-size:28px}.pad-key{left:6px;top:7px;font-size:9px;padding:3px 4px}.pad-download{width:26px;height:26px;font-size:19px;right:5px;top:5px}.controls{gap:11px;font-size:11px;padding:10px}.controls input[type="range"]{width:85px}.btn{font-size:11px;padding:8px 10px}.dj-controls{grid-template-columns:1fr 1fr;gap:14px 16px}.dj-controls>label:first-child{grid-column:1/-1}.dj-controls>label:last-child input{max-width:none}.quiz-tools{grid-template-columns:1fr 1.1fr;gap:15px;padding:20px 15px}.timer-face{padding-right:14px}#timer-display{font-size:70px}.timer-caption{font-size:10px}.timer-settings .check-label{font-size:10px}.timer-presets{gap:5px}.timer-presets .btn{min-width:0;flex:1}.timer-actions .btn{min-width:63px}.timer-settings>label[for="timer-duration"]{font-size:11px;flex-wrap:wrap}.timer-settings .unit{font-size:9px}#timer-duration{width:72px}.present-button{width:100%}.guide-grid{gap:10px}.guide-card{padding:16px 13px}.guide-card h3{font-size:14px}.guide-card p{font-size:12px}.related-grid{gap:10px}.related-card{padding:16px 28px 16px 13px}.related-label{font-size:13px}.related-card>span+span{font-size:10px}.related-card b{right:11px;top:14px}body.presenting #performance-area{padding:62px 15px 20px}body.presenting .sound-grid{grid-template-columns:repeat(5,minmax(0,1fr))}body.presenting #timer-display{font-size:95px}}
@media(max-width:520px){.hero-meta{gap:7px 13px}.board-links a:first-child{width:100%;padding-left:0}.board-links{gap:3px}.board-links a{padding:7px 8px}.board-title{align-items:flex-start;margin-bottom:16px;gap:8px}.board-title .btn{font-size:10px;padding:7px 8px}.board-title h2{font-size:16px}.board-title .eyebrow{font-size:8px}.board{padding:14px 12px}.sound-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 9px}.sound-pad{aspect-ratio:1.03}.pad-emoji{font-size:28px}.pad-name{font-size:11px}.controls{gap:10px}.controls .btn.stop{width:100%;margin:0}.controls>label:first-child{flex:1}.controls input[type="range"]{width:83px}.quiz-tools{grid-template-columns:1fr;gap:17px;padding:18px}.timer-face{border-right:0;border-bottom:1px solid #393141;padding:0 0 13px}.timer-face h2{font-size:10px}#timer-display{font-size:99px}.timer-caption{display:none}.timer-settings{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}.timer-presets{grid-column:1/-1}.timer-settings>label[for="timer-duration"]{grid-column:1/-1;flex-wrap:nowrap}.timer-settings .timer-actions{grid-column:1}.timer-settings .check-label{grid-column:2;font-size:10px;line-height:1.4}.timer-actions .btn{min-width:0;flex:1}.present-button{grid-column:1/-1}.guide-grid,.related-grid{grid-template-columns:1fr}.guide-card{padding:18px}.guide-card h3{font-size:16px}.guide-card p{font-size:13px}.content p{font-size:14px}.content details{padding:0 14px}.content summary{font-size:13px}.content h2{margin-top:32px}.related-label{font-size:15px}.related-card>span+span{font-size:12px}body>.homepage-content{padding:8px}body.presenting .sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}body.presenting #timer-display{font-size:94px}body.presenting .quiz-tools{grid-template-columns:1fr}body.presenting #present-exit{right:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pad-trigger{transition:none}}
body:is([data-board="funny"],[data-board="dj"]) .sound-pad{aspect-ratio:1.02}
body:is([data-board="funny"],[data-board="dj"]) .pad-trigger{gap:5px;padding:31px 7px 12px}
body:is([data-board="funny"],[data-board="dj"]) .pad-emoji{font-size:28px}
@media(max-width:750px){body:is([data-board="funny"],[data-board="dj"]) .sound-pad{aspect-ratio:.94}body:is([data-board="funny"],[data-board="dj"]) .pad-trigger{gap:4px;padding:29px 6px 10px}body:is([data-board="funny"],[data-board="dj"]) .pad-detail{font-size:8px}}
@media(max-width:520px){body:is([data-board="funny"],[data-board="dj"]) .sound-pad{aspect-ratio:.85;min-height:125px}body:is([data-board="funny"],[data-board="dj"]) .pad-name{font-size:10px}body:is([data-board="funny"],[data-board="dj"]) .pad-emoji{font-size:24px}}
@media(max-width:980px){body.presenting[data-board="game-show"] .sound-pad{aspect-ratio:.97}body.presenting[data-board="game-show"] .pad-emoji{font-size:24px}body.presenting[data-board="game-show"] .pad-detail{font-size:8px}}
@media(max-width:750px){body[data-board="game-show"] .sound-pad{aspect-ratio:.94}body[data-board="game-show"] .pad-trigger{gap:4px;padding:29px 6px 10px}body[data-board="game-show"] .pad-emoji{font-size:25px}.pad-loop-badge{top:7px;left:26px;font-size:7px;padding:2px 3px}body[data-board="game-show"] .pad-detail{font-size:8px}.timer-settings .timer-bed-option{line-height:1.5}}
@media(max-width:520px){body[data-board="game-show"] .sound-pad,body.presenting[data-board="game-show"] .sound-pad{aspect-ratio:.85;min-height:125px}body[data-board="game-show"] .pad-name{font-size:10px}body[data-board="game-show"] .pad-emoji{font-size:24px}.timer-settings .timer-bed-option{grid-column:1/-1;font-size:11px}.pad-loop-badge{top:auto;bottom:7px;left:50%;transform:translateX(-50%)}.sound-pad[data-loop="true"] .pad-trigger{padding-bottom:26px}}
