:root{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:white;background:#58595b;color-scheme:dark}*{box-sizing:border-box}body{margin:0;display:flex;min-height:100vh}button,input,select{font:inherit}button{color:inherit;background:none;border:0;cursor:pointer;border-radius:6px}button:hover{background:#ffffff18}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:4px}aside{background:#000;width:22.35%;min-width:235px;max-width:354px;padding:42px 21px 25px;position:fixed;height:100dvh;display:flex;flex-direction:column}h1{font-size:clamp(36px,3.1vw,53px);letter-spacing:-1.5px;margin:0 30px 32px}.section-label{font-size:26px;font-weight:700;text-align:left;padding:10px 38px 14px;border-bottom:1px solid #414042;border-radius:0;display:flex;gap:15px}nav{overflow:auto}nav button{width:100%;text-align:left;padding:18px 38px;font-size:22px;font-weight:700;border-bottom:1px solid #414042;border-radius:0}nav button.active{background:#1b1b1b;border-left:3px solid white;padding-left:35px}.subtle{color:#aaa;font-size:18px;padding:16px 38px;text-align:left}.sidebar-bottom{margin-top:auto;padding:20px 24px 0}.sidebar-bottom button{display:flex;align-items:center;gap:15px;font-size:29px;font-weight:700;width:100%;text-align:left;margin-top:12px;padding:6px}.sidebar-bottom p{font-size:15px;color:#999;margin:22px 6px 0}main{margin-left:clamp(235px,22.35%,354px);padding:32px 16px;width:calc(100% - clamp(235px,22.35%,354px))}header{display:flex;align-items:center;gap:30px;border-bottom:2px solid #000;padding:6px 14px 23px;flex-wrap:wrap}.board-heading{display:flex;align-items:center;gap:8px}h2{font-size:34px;margin:0 24px 0 0;letter-spacing:-.5px}.board-heading button{font-size:32px;padding:0 6px}.search{display:flex;align-items:center;gap:20px;font-size:24px;font-weight:700;margin-left:auto}.search input{border:1px solid white;border-radius:30px;background:transparent;height:33px;width:225px;padding:0 14px;color:white}.search input::placeholder{color:#fff;text-align:right}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 14px;font-size:17px;flex-wrap:wrap}.toolbar>div{display:flex;align-items:center;gap:12px}select{color:white;background:#55575a;border:0;border-radius:5px;padding:7px}.master label{display:flex;align-items:center;gap:10px}.master input{width:95px}input[type=range]{accent-color:#fff;cursor:pointer}.master output{min-width:35px}#stop-all{border:1px solid #777;padding:6px 10px;background:#5b5d60}section{padding:0 5px 32px;min-height:280px;border-bottom:2px solid #000;margin-bottom:18px}.category-heading{display:flex;align-items:center;gap:8px;margin:2px 8px 24px}.category-heading button:first-child{font-size:24px;font-weight:700;padding:3px 0}.category-heading .edit-category{opacity:.6;margin-left:4px;font-size:20px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:18px;align-items:start}.card{background:#000;border-radius:19px;height:202px;position:relative;padding:20px 18px 12px;max-width:340px;border:2px solid transparent}.card.playing{border-color:white;box-shadow:0 0 0 3px #ffffff20}.card h3{font-size:25px;margin:0 15px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag{position:absolute;right:5px;top:20px;color:#aaa;cursor:grab;padding:0 3px;font-size:22px;touch-action:none}.play{position:absolute;left:calc(50% - 35px);top:63px;width:58px;height:68px;font-size:46px}.stop{position:absolute;left:20px;top:107px;font-size:20px;color:#bbb}.side-controls{position:absolute;right:15px;top:57px;display:flex;flex-direction:column;gap:3px}.side-controls button{font-size:27px;width:31px;height:31px;padding:0}.side-controls button[aria-pressed=true]{background:white;color:black}.timeline{position:absolute;bottom:13px;left:8px;right:8px;display:flex;align-items:center;gap:8px;font-size:15px}.timeline progress{width:100%;height:5px;accent-color:white;border:none;border-radius:9px;background:#58595b}.timeline progress::-webkit-progress-bar{background:#58595b;border-radius:9px}.timeline progress::-webkit-progress-value{background:white;border-radius:9px}.timeline span{white-space:nowrap}.badge{font-size:14px;position:absolute;left:20px;bottom:39px;color:#aaa}.empty{border:1px dashed #e0e0e0;border-radius:18px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:10px;font-size:18px}.empty button{font-size:22px;font-weight:700}.list .grid{grid-template-columns:1fr}.list .card{max-width:none;height:115px}.list .play{top:6px;left:auto;right:145px}.list .side-controls{top:20px;right:16px;flex-direction:row}.list .stop{left:auto;right:126px;top:28px}.list .card h3{max-width:50%}.list .drag{right:auto;left:2px;top:20px}.list .badge{bottom:36px}footer{font-size:16px;color:#333;padding:0 14px;display:flex;justify-content:space-between;gap:20px}dialog{background:#141414;color:#fff;border:1px solid #555;border-radius:18px;padding:26px;width:min(460px,92vw);box-shadow:0 20px 100px #0008}dialog::backdrop{background:#0007}dialog h2{font-size:28px}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.dialog-heading button{font-size:30px}#dialog-body{display:grid;gap:18px}#dialog-body label{display:grid;gap:8px;font-size:18px}#dialog-body label.check{display:flex;align-items:center;gap:12px}#dialog-body input:not([type=checkbox]):not([type=range]),#dialog-body select{width:100%;padding:10px;border:1px solid #555;border-radius:6px;background:#222;color:white}#dialog-body p{font-size:17px;line-height:1.5;color:#bbb;margin:0}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.dialog-actions button{padding:10px 18px;border:1px solid #555}.dialog-actions .primary{background:white;color:black}.danger{color:#ffaaaa;text-align:left;padding:8px 0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#151515;border:1px solid #555;border-radius:9px;padding:12px 22px;font-size:18px;display:none;z-index:10;max-width:90vw}.drop-target{outline:3px dashed white;outline-offset:5px}.dragging{opacity:.4}@media(max-width:1000px){aside{min-width:205px;padding-left:12px;padding-right:12px}main{margin-left:22.35%;width:77.65%}h1{margin-left:20px;font-size:38px}.section-label,nav button{padding-left:20px}nav button.active{padding-left:17px}.search{margin-left:0}header{gap:18px}}@media(max-width:760px){body{display:block}aside{position:relative;width:100%;max-width:none;min-width:0;height:auto;padding:20px}h1{margin:0 0 14px;font-size:38px}.section-label{font-size:21px;padding:0 0 10px}nav{display:flex}nav button{width:auto;white-space:nowrap;padding:12px;font-size:18px}nav button.active{padding-left:12px;border-left:0;border-bottom:3px solid #fff}.subtle{padding:10px 0}.sidebar-bottom{padding:0;display:flex;gap:18px;align-items:center}.sidebar-bottom button{width:auto;font-size:22px;margin:0}.sidebar-bottom p{margin:0 0 0 auto;font-size:14px}main{margin:0;width:100%;padding:20px 12px}h2{font-size:28px;margin-right:10px}.search{width:100%;font-size:20px}.search input{flex:1}.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.card{max-width:none}.toolbar{padding:14px 0}.master{flex-wrap:wrap}footer{line-height:1.6}.list .card h3{max-width:40%;font-size:20px}}

@media(min-width:761px) and (max-width:1000px){main{margin-left:max(205px,22.35%);width:calc(100% - max(205px,22.35%))}}
[hidden]{display:none!important}

.trim-controls{border:1px solid #555;border-radius:8px;padding:14px;display:grid;gap:12px;margin:0;min-width:0}.trim-controls legend{padding:0 7px;font-weight:700}.trim-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trim-fields label{min-width:0}.trim-controls output{font-size:17px;color:#ccc}.trim-controls button{text-align:left;text-decoration:underline;padding:0;font-size:17px}dialog{max-height:90dvh;overflow:auto}

.search{position:relative}.search input{padding-right:30px}.search::after{content:"⌕";position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;pointer-events:none}

#categories section{transition:background-color .15s,box-shadow .15s;border-radius:8px}#categories section.file-hover{background:#ffffff16;box-shadow:inset 0 0 0 2px #ffffffa6}section.file-hover .empty{background:#ffffff12;border-color:white}.upload-feedback{margin-left:auto;font-size:16px;font-weight:500;letter-spacing:0;color:#fff}.upload-feedback:empty{display:none}.upload-error{color:#552020}.upload-busy .upload-feedback{opacity:.85}.category-heading{flex-wrap:wrap}section.file-hover .upload-feedback{background:#ffffff22;padding:5px 9px;border-radius:12px}

.fade-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.fade-fields label{min-width:0}.fade-fields input{min-width:0}

.card{border-color:var(--clip-border,#777777)}.card.playing{border-color:var(--clip-border,#777777);box-shadow:0 0 0 3px #ffffff80}.border-setting{display:flex;align-items:end;gap:18px}.border-setting button{padding:10px 0;font-size:17px;text-decoration:underline}#dialog-body .border-setting input[type=color]{width:72px;height:38px;padding:4px;cursor:pointer}

.category-heading .category-drag{font-size:23px;font-weight:400;color:#fff;opacity:.65;padding:3px 6px;cursor:grab;touch-action:none;user-select:none}.category-heading .category-drag:hover{opacity:1}.category-heading button[data-collapse]{font-size:24px;font-weight:700;padding:3px 0}.category-moving{opacity:.45}.category-before{box-shadow:0 -3px 0 #fff}.category-after{box-shadow:0 3px 0 #fff}

section.category-drag-preview{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;min-height:0;max-height:240px;overflow:hidden;margin:0;padding:14px;border:1px solid #ffffffb3;border-radius:12px;background:#7d7f83;opacity:.82;box-shadow:0 14px 30px #0005;transition:transform 65ms ease-out;will-change:transform}section.category-drag-preview .category-heading{margin:0 0 12px}section.category-drag-preview .upload-feedback,section.category-drag-preview .edit-category{display:none}section.category-drag-preview .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}section.category-drag-preview .card{height:160px;max-width:none}section.category-drag-preview .card h3{font-size:20px}section.category-drag-preview .empty{min-height:110px}section.category-drag-preview .category-drag{cursor:grabbing}@media(prefers-reduced-motion:reduce){section.category-drag-preview{transition:none}}

#stop-all{background:#dd1100;border-color:#dd1100;color:#fff;font-size:22px;font-weight:700;padding:9px 16px}footer{color:#e0e0e0}

.card.copy-drag{opacity:.7}.card.copy-drag::after{content:"＋ Copy";position:absolute;right:12px;bottom:38px;background:#fff;color:#000;padding:4px 7px;border-radius:5px;font-size:16px;pointer-events:none}

.duplicate-sound{border:1px solid #666;padding:10px 12px;text-align:left}.duplicate-sound:disabled{opacity:.5;cursor:wait}

/* Light mode; dark remains the default palette. */
:root[data-theme=light]{color-scheme:light;color:#202124;background:#eef0f2}
[data-theme=light] aside{background:#fff;border-right:1px solid #d1d4d8}
[data-theme=light] button:hover{background:#0000000b}
[data-theme=light] button:focus-visible,[data-theme=light] input:focus-visible,[data-theme=light] select:focus-visible{outline-color:#202124}
[data-theme=light] .section-label,[data-theme=light] nav button{border-bottom-color:#d1d4d8}
[data-theme=light] nav button.active{background:#e8ebee;border-left-color:#202124}
[data-theme=light] .subtle,[data-theme=light] .sidebar-bottom p,[data-theme=light] footer{color:#575c62}
[data-theme=light] header,[data-theme=light] section{border-bottom-color:#b9bec5}
[data-theme=light] .search input{color:#202124;background:#fff;border-color:#828891}
[data-theme=light] select{background:#fff;color:#202124}
[data-theme=light] input[type=range]{accent-color:#34383d}
[data-theme=light] .card{background:#fff}
[data-theme=light] .card.playing{box-shadow:0 0 0 3px #20212466}
[data-theme=light] .drag,[data-theme=light] .stop,[data-theme=light] .badge{color:#62676e}
[data-theme=light] .side-controls button[aria-pressed=true]{background:#202124;color:#fff}
[data-theme=light] .timeline progress{accent-color:#202124;background:#d7dbe0}
[data-theme=light] .timeline progress::-webkit-progress-bar{background:#d7dbe0}
[data-theme=light] .timeline progress::-webkit-progress-value{background:#202124}
[data-theme=light] .empty{color:#41464c;border-color:#9299a2}
[data-theme=light] dialog{background:#fff;color:#202124;border-color:#bdc2c9}
[data-theme=light] #dialog-body input:not([type=checkbox]):not([type=range]),[data-theme=light] #dialog-body select{background:#f4f5f6;color:#202124;border-color:#aab1ba}
[data-theme=light] #dialog-body p,[data-theme=light] .trim-controls output{color:#575c62}
[data-theme=light] .trim-controls,[data-theme=light] .dialog-actions button,[data-theme=light] .duplicate-sound{border-color:#aab1ba}
[data-theme=light] .dialog-actions .primary{background:#202124;color:#fff}
[data-theme=light] .danger{color:#b51b12}
[data-theme=light] #toast{background:#fff;color:#202124;border-color:#aab1ba;box-shadow:0 4px 18px #0002}
[data-theme=light] .category-heading .category-drag,[data-theme=light] .upload-feedback{color:#34383d}
[data-theme=light] .upload-error{color:#b51b12}
[data-theme=light] #categories section.file-hover{background:#2021240a;box-shadow:inset 0 0 0 2px #596675}
[data-theme=light] section.file-hover .empty{background:#20212405;border-color:#596675}
[data-theme=light] section.file-hover .upload-feedback{background:#20212412}
[data-theme=light] .category-before{box-shadow:0 -3px 0 #34383d}
[data-theme=light] .category-after{box-shadow:0 3px 0 #34383d}
[data-theme=light] section.category-drag-preview{background:#e3e6ea;border-color:#8c949f}
[data-theme=light] #stop-all{background:#dd1100;color:#fff}
@media(max-width:760px){[data-theme=light] nav button.active{border-bottom-color:#202124}}

.sound-effects{border:1px solid #777;border-radius:8px;padding:12px;margin:12px 0}.sound-effects summary{cursor:pointer;font-weight:700}.sound-effects label{margin-top:12px}.sound-effects output{float:right;font-variant-numeric:tabular-nums}.sound-effects input[type=range]{width:100%}

.settings-tabs{display:flex;gap:8px;border-bottom:1px solid #777;margin-bottom:18px;padding-bottom:8px}.settings-tabs button{flex:1;padding:10px;border-radius:6px}.settings-tabs [aria-selected=true]{background:#eee;color:#171717}.settings-tabs+div[hidden],[role=tabpanel][hidden]{display:none!important}[data-theme=light] .settings-tabs [aria-selected=true]{background:#282b30;color:white}#preview-sound{border:1px solid #888;border-radius:6px;padding:10px 18px;width:100%;margin-top:12px}.sound-effects .sound-effects{border:0;padding:0}

.category-size{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:16px;white-space:nowrap}.category-size input{width:95px;min-height:24px;margin:0}.category-size output{min-width:35px;font-variant-numeric:tabular-nums}
#categories .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(245px * var(--card-scale,1))),1fr))}
#categories .card{height:calc(202px * var(--card-scale,1));max-width:calc(340px * var(--card-scale,1));padding:calc(20px * var(--card-scale,1)) 18px 12px}
#categories .card h3{font-size:calc(25px * var(--card-scale,1))}
#categories .play{top:calc(63px * var(--card-scale,1));font-size:calc(46px * var(--card-scale,1));height:calc(68px * var(--card-scale,1))}
#categories .side-controls{top:calc(57px * var(--card-scale,1))}
#categories .side-controls button{font-size:calc(27px * var(--card-scale,1));height:calc(31px * var(--card-scale,1));width:calc(31px * var(--card-scale,1))}
#categories .stop{top:calc(107px * var(--card-scale,1))}
.list #categories .grid{grid-template-columns:1fr}.list #categories .card{max-width:none;height:calc(115px * var(--card-scale,1))}.list #categories .play{top:6px}.list #categories .side-controls{top:20px}.list #categories .stop{top:28px}
@media(max-width:760px){#categories .card{max-width:none}.category-size{gap:6px}.category-size input{width:80px}.list #categories .card h3{font-size:calc(20px * var(--card-scale,1))}}

.size-icon{display:inline-block;border:1.5px solid currentColor;border-radius:3px;font-size:0;position:relative;flex-shrink:0}.size-icon::after{content:"";position:absolute;left:30%;top:30%;border-left:5px solid currentColor;border-top:3px solid transparent;border-bottom:3px solid transparent}.size-icon-small{width:14px;height:12px}.size-icon-small::after{border-left-width:3px;border-top-width:2px;border-bottom-width:2px}.size-icon-large{width:24px;height:20px}.category-size{gap:10px}#categories .card{padding-left:max(10px,calc(18px * var(--card-scale,1)));padding-right:max(10px,calc(18px * var(--card-scale,1)))}#categories .card h3{font-size:max(17px,calc(25px * var(--card-scale,1)))}#categories .side-controls{right:max(5px,calc(15px * var(--card-scale,1)));gap:1px}#categories .side-controls button{width:max(22px,calc(31px * var(--card-scale,1)));height:max(22px,calc(31px * var(--card-scale,1)))}#categories .badge{left:10px;bottom:30px;font-size:13px}#categories .timeline{bottom:9px;gap:4px;font-size:14px}#categories .drag{top:calc(20px * var(--card-scale,1))}.list #categories .card{height:max(105px,calc(115px * var(--card-scale,1)))}

#record-toggle{border:1px solid #888;padding:12px;border-radius:8px;font-weight:700}#record-player{width:100%}@media(max-width:760px){.sidebar-bottom{flex-wrap:wrap}}

#stacks-panel{position:fixed;right:0;top:0;bottom:0;width:min(440px,100vw);z-index:9;background:#171717;color:white;border-left:1px solid #777;box-shadow:-12px 0 40px #0005;padding:24px;overflow:auto;animation:stack-in .2s ease-out} @keyframes stack-in{from{transform:translateX(100%)}to{transform:translateX(0)}}.stack-heading,.stack-create,.stack-row-title{display:flex;align-items:center;gap:10px}.stack-heading{justify-content:space-between;margin-bottom:20px}.stack-heading button{font-size:32px}.stack-create{margin-bottom:18px}.stack-create button,#stack-add,.stack-transport button{border:1px solid #888;padding:9px 12px}#stack-help-toggle{border-radius:50%;padding:3px 9px}#stacks-panel p{font-size:17px;line-height:1.5;color:#bbb}#stacks-panel label{display:grid;gap:8px;font-size:18px;margin:14px 0}#stacks-panel input:not([type=checkbox]),#stacks-panel select{width:100%;min-width:0;background:#292929;color:white;border:1px solid #777;border-radius:6px;padding:9px}#stacks-panel fieldset{border:0;padding:0;margin:0;min-width:0}#stacks-panel .stack-check{display:flex;align-items:center}#stack-items{padding:0;list-style:none}#stack-items li{border:1px solid #666;border-radius:8px;padding:10px;margin:10px 0}.stack-row-title strong{font-size:18px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stack-row-title button{padding:4px;flex-shrink:0}.stack-grip{cursor:grab}#stacks-panel .stack-pause{display:flex;align-items:center;font-size:16px;margin-bottom:0}#stacks-panel .stack-pause input{width:75px;padding:6px}#stack-items li.stack-current{border-color:#fff;background:#ffffff15}#stack-items li.stack-drop{border-top:3px solid #fff}.stack-transport{position:sticky;bottom:-24px;background:#171717;padding:12px 0 24px;border-top:1px solid #666;margin-top:20px}.stack-transport p{margin:0 0 10px}#stack-delete{display:block;margin-top:18px}#stacks-panel button:disabled{opacity:.4;cursor:default}[data-theme=light] #stacks-panel,[data-theme=light] .stack-transport{background:#fff;color:#202124}[data-theme=light] #stacks-panel p{color:#555}[data-theme=light] #stacks-panel input:not([type=checkbox]),[data-theme=light] #stacks-panel select{background:#f4f5f6;color:#202124}[data-theme=light] #stack-items li.stack-current{background:#e3e8ee;border-color:#202124}[data-theme=light] #stack-items li.stack-drop{border-top-color:#202124}@media(prefers-reduced-motion:reduce){#stacks-panel{animation:none}}@media(max-width:760px){#stacks-panel{width:100%;padding:20px}.sidebar-bottom{gap:10px}.sidebar-bottom button{font-size:20px}}

.stack-add-card{position:absolute;right:26px;top:8px;width:25px;height:25px;font-size:25px;padding:0;z-index:1}#categories .card h3{margin-right:42px}#stacks-panel.stack-receiving{box-shadow:inset 0 0 0 3px #aaa,-12px 0 40px #0005}

.list #categories .stack-add-card{top:auto;bottom:29px;right:16px}.list #categories .card{height:max(130px,calc(115px * var(--card-scale,1)))}

#stacks-panel{background:#000;width:min(460px,100vw);padding:28px 22px}.stack-heading{gap:6px;margin-bottom:32px}.stack-heading h2{font-size:46px;flex:1;margin:0}.stack-heading button{font-size:33px;padding:3px}#stack-help-toggle{border:0;border-radius:6px;padding:3px}.simple-stack{border-bottom:1px solid #aaa;padding:0 0 18px;margin-bottom:20px}.simple-stack-heading{display:flex;align-items:center;gap:4px}.stack-expand{font-size:24px;padding:0 3px}.stack-title{font-size:29px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;text-align:left;padding:3px}.simple-stack-controls{display:flex;gap:1px}.simple-stack-controls button{font-size:27px;padding:3px;width:29px;height:33px}.simple-stack-controls button[aria-pressed=true]{background:white;color:black}.simple-stack-sounds{padding-left:28px;margin-top:12px}.simple-stack-sound{font-size:25px;font-weight:600;padding:7px 5px;cursor:grab;border-radius:5px;overflow-wrap:anywhere}.simple-stack-sound small{display:block;font-size:15px;font-weight:400;opacity:.65;margin-top:4px}.simple-stack-sound.stack-current{background:#ffffff20}.simple-stack-sound.stack-drop{border-top:2px solid currentColor}.stack-selected .stack-title{text-decoration:underline;text-decoration-color:#ffffff40;text-underline-offset:6px}.stack-status-line{font-size:16px}.stack-empty-hint{font-weight:400}#dialog-body #stack-editor fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:14px}#dialog-body #stack-editor label{display:grid;gap:6px}#dialog-body #stack-editor .stack-check,#dialog-body #stack-editor .stack-pause{display:flex;align-items:center}#dialog-body #stack-editor .stack-pause input{width:80px}#dialog-body #stack-editor p{margin:0}#dialog-body #stack-editor button{padding:6px}#dialog-body #stack-items{margin:0}#dialog-body #stack-add{border:1px solid #777;padding:9px} [data-theme=light] .simple-stack-controls button[aria-pressed=true]{background:#202124;color:white}[data-theme=light] .simple-stack-sound.stack-current{background:#20212415}[data-theme=light] .stack-selected .stack-title{text-decoration-color:#20212440}@media(max-width:760px){#stacks-panel{width:100%}}@media(max-width:380px){.stack-title{font-size:25px}.simple-stack-controls button{width:25px;font-size:24px}.stack-heading h2{font-size:40px}}

[data-theme=light] .simple-stack{border-bottom-color:#888}

.simple-stack-sound.stack-drop-after{border-bottom:2px solid currentColor}.simple-stack.stack-drop-target{outline:2px dashed currentColor;outline-offset:5px;background:#ffffff12}[data-theme=light] .simple-stack.stack-drop-target{background:#00000008}

.simple-stack-sound{position:relative;padding-right:30px}.stack-track-remove{position:absolute;right:0;top:4px;width:26px;height:28px;font-size:25px;font-weight:400;color:inherit;opacity:.65;padding:0;cursor:pointer}.stack-track-remove:hover,.stack-track-remove:focus-visible{opacity:1}.stack-track-remove:disabled{opacity:.2;cursor:default}
/* Reserve space for Stacks instead of covering the soundboard. */
:root{--stack-panel-width:clamp(320px,32vw,460px)}
@media(min-width:761px){
 #stacks-panel{width:var(--stack-panel-width)}
 main{min-width:0;transition:width .2s ease-out}
 body.stacks-layout-open main{width:calc(100% - clamp(235px,22.35%,354px) - var(--stack-panel-width))}
 body.stacks-layout-open .board-heading{flex-wrap:wrap;min-width:0;gap:4px}
 body.stacks-layout-open .board-heading h2{width:100%;overflow-wrap:anywhere;margin-bottom:6px}
 body.stacks-layout-open header{gap:14px;padding-left:0;padding-right:0}
 body.stacks-layout-open .search{width:100%;min-width:0;gap:10px;margin-left:0}
 body.stacks-layout-open .search input{width:0;min-width:0;flex:1}
 body.stacks-layout-open .toolbar{padding-left:0;padding-right:0}
 body.stacks-layout-open .toolbar>div{flex-wrap:wrap}
 body.stacks-layout-open .card{min-width:0}
 body.stacks-layout-open footer{flex-wrap:wrap;padding-left:0;padding-right:0}
}
@media(min-width:761px) and (max-width:1000px){body.stacks-layout-open main{width:calc(100% - max(205px,22.35%) - var(--stack-panel-width))}}
@media(max-width:760px){body.stacks-layout-open>aside,body.stacks-layout-open>main{display:none}#stacks-panel{position:relative;width:100%;min-height:100dvh;border-left:0;box-shadow:none}}
@media(prefers-reduced-motion:reduce){main{transition:none}}

#stacks-panel{animation:none;transform:translateX(100%);transition:transform 320ms cubic-bezier(.42,0,.58,1)}#stacks-panel.stack-visible{transform:translateX(0)}main{transition:width 320ms cubic-bezier(.42,0,.58,1)}@media(prefers-reduced-motion:reduce){#stacks-panel,main{transition:none}}

#categories .card{transition:height 320ms cubic-bezier(.42,0,.58,1),max-width 320ms cubic-bezier(.42,0,.58,1),padding 320ms cubic-bezier(.42,0,.58,1)}#categories .card h3,#categories .play,#categories .side-controls,#categories .side-controls button,#categories .stop,#categories .drag{transition:font-size 320ms cubic-bezier(.42,0,.58,1),top 320ms cubic-bezier(.42,0,.58,1),right 320ms cubic-bezier(.42,0,.58,1),width 320ms cubic-bezier(.42,0,.58,1),height 320ms cubic-bezier(.42,0,.58,1)}@media(prefers-reduced-motion:reduce){#categories .card,#categories .card *{transition:none!important}}

/* Resolve grid columns once; card transforms provide the visual transition. */
main{transition:none!important}#categories .card,#categories .card *{transition:none!important}

/* Industry typography, with real weights and italics. */
@font-face{font-family:Industry;src:url("fonts/industry-light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-light-italic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-book.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-book-italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-medium-italic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-demi.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-demi-italic.otf") format("opentype");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-bold-italic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Industry;src:url("fonts/industry-black-italic.otf") format("opentype");font-weight:900;font-style:italic;font-display:swap}
 :root{font-family:Industry,"Helvetica Neue",Arial,sans-serif;font-weight:400}button,input,select,textarea{font-family:inherit}h1{font-weight:900}h2,.section-label,nav button,.sidebar-bottom button{font-weight:700}#categories .card h3{font-weight:600}.toolbar, .dialog-actions button,#dialog-body label{font-weight:500}#dialog-body p,.timeline,.badge,footer{font-weight:400}

/* Fort hosted Industry Pro: condensed family across every interface control. */
:root{font-family:"Industry Pro",Industry,"Helvetica Neue",Arial,sans-serif;font-stretch:condensed}button,input,select,textarea{font-family:inherit;font-stretch:inherit}h1{font-weight:800}

/* Larger condensed type, with room for readable controls on small screens. */
:root{font-size:20px}
.search input{height:39px}
#categories .timeline progress{min-width:0;flex:1}
#categories .timeline{font-variant-numeric:tabular-nums}
#categories .badge{bottom:32px}
#categories .side-controls button{font-size:max(18px,calc(23px * var(--card-scale,1)))}
#categories .card h3{line-height:1.15}
@media(max-width:760px){.sidebar-bottom{flex-wrap:wrap;gap:8px 14px}.sidebar-bottom p{flex-basis:100%;margin:4px 0 0}.toolbar>div{flex-wrap:wrap}.search input{min-width:0}.sidebar-bottom button{gap:8px}dialog{padding:22px}}

#categories .card{min-height:140px}#categories .timeline span{flex-shrink:0}

#dialog-body [role="tabpanel"]:not([hidden]){display:grid;gap:16px}#dialog-body .check{line-height:1.3}

@keyframes menu-tab-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}#dialog-body [role="tabpanel"]:not([hidden]){animation:menu-tab-in 220ms cubic-bezier(.42,0,.58,1)}@media(prefers-reduced-motion:reduce){#dialog-body [role="tabpanel"]{animation:none!important}}



#boards button{font-weight:300}

.board-row{position:relative}.board-row [data-board]{padding-right:38px}.board-row .board-delete{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:28px;height:32px;padding:0;border:0;font-family:Arial,sans-serif;font-size:22px;font-weight:300;text-align:center;opacity:.55}.board-row .board-delete:hover,.board-row .board-delete:focus-visible{opacity:1}.dialog-actions .delete-confirm{background:#b51d14;color:white;border-color:#b51d14}@media(max-width:760px){.board-row{flex-shrink:0}.board-row [data-board]{padding-right:38px}}

#dialog .dialog-actions .delete-confirm{background:#b51d14;color:white;border-color:#b51d14}

/* One consistent, larger control group, including Add to Stack. */
#categories .side-controls .stack-add-card{position:static;inset:auto;z-index:auto}
#categories .side-controls{gap:2px}
#categories .side-controls button{font-size:max(24px,calc(27px * var(--card-scale,1)));width:max(28px,calc(34px * var(--card-scale,1)));height:max(28px,calc(34px * var(--card-scale,1)));flex-shrink:0;line-height:1}
#categories .card{height:max(190px,calc(232px * var(--card-scale,1)))}
#categories .card h3{margin-right:20px}
.list #categories .card{height:max(140px,calc(125px * var(--card-scale,1)))}
.list #categories .play{right:calc(max(28px,34px * var(--card-scale,1)) * 4 + 32px)}
.list #categories .stop{right:calc(max(28px,34px * var(--card-scale,1)) * 4 + 18px);top:82px}
.list #categories .card h3{max-width:calc(100% - max(28px,34px * var(--card-scale,1)) * 4 - 100px)}
#dialog-body #new-stack-label[hidden]{display:none}

#stop-all{letter-spacing:1px}

#stop-all{background:#fff;color:#000;border-color:#fff}

/* Give card content four extra pixels of breathing room. */
#categories .card{padding:calc(20px * var(--card-scale,1) + 4px) max(14px,calc(18px * var(--card-scale,1) + 4px)) 16px;height:max(198px,calc(232px * var(--card-scale,1) + 8px))}
#categories .side-controls{right:max(9px,calc(15px * var(--card-scale,1) + 4px));top:calc(57px * var(--card-scale,1) + 4px)}
#categories .timeline{left:12px;right:12px;bottom:13px}
#categories .badge{left:14px;bottom:36px}
#categories .drag{right:9px;top:calc(20px * var(--card-scale,1) + 4px)}
.list #categories .card{height:max(148px,calc(125px * var(--card-scale,1) + 8px))}
.list #categories .side-controls{top:24px;right:20px}
.list #categories .drag{left:6px;right:auto;top:24px}

/* Center Play and distinguish idle from active playback. */
#categories .card .play{top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;height:68px}
#categories .play-icon{width:max(28px,calc(40px * var(--card-scale,1)));height:max(34px,calc(48px * var(--card-scale,1)));overflow:visible;pointer-events:none}
#categories .play-icon path{fill:none;stroke:currentColor;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#categories .card.playing .play-icon path{fill:#fff;stroke:#fff}
[data-theme=light] #categories .card.playing .play{background:#202124}

html[data-theme] #stop-all{background:#fff;color:#000;border-color:#fff}

.rapid-fire-row{display:flex;align-items:start;gap:12px}.rapid-fire-row>label{flex-shrink:0}.rapid-fire-help summary{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;cursor:pointer;list-style:none;font-family:Arial,sans-serif;font-size:15px}.rapid-fire-help summary::-webkit-details-marker{display:none}.rapid-fire-help p{margin-top:10px!important}.rapid-fire-help[open]{flex:1}

/* Mobile uses a persistent left icon rail. */
aside{transition:width 320ms cubic-bezier(.42,0,.58,1),min-width 320ms cubic-bezier(.42,0,.58,1),max-width 320ms cubic-bezier(.42,0,.58,1),padding 320ms cubic-bezier(.42,0,.58,1)}
@media(max-width:760px){
 body{display:flex}aside{position:fixed;inset:0 auto 0 0;width:64px;min-width:64px;max-width:64px;height:100dvh;padding:18px 6px 12px;z-index:10;overflow-y:auto}
 aside h1{font-size:0;margin:0 0 20px;text-align:center;letter-spacing:0}aside h1::before{content:'SF';font-size:24px;font-weight:800}
 #boards-heading{display:none}
 #boards{display:flex;flex-direction:column;flex-shrink:0;overflow:visible;gap:8px}
 .board-row{width:52px;height:58px}
 #boards .board-row [data-board]{width:44px;height:40px;padding:0;margin:0 4px;font-size:0;border:0;border-radius:6px}
 #boards .board-row [data-board]::before{content:'▦';font-size:26px;font-family:Arial,sans-serif}
 #boards .board-row [data-board].active{box-shadow:inset 3px 0 currentColor}
 #boards .board-row .board-delete{top:auto;bottom:0;right:14px;transform:none;width:24px;height:20px;font-size:18px;padding:0}
 #add-board{font-size:0;padding:0;width:44px;min-height:40px;margin:4px auto 12px;text-align:center;flex-shrink:0}#add-board::before{content:'+';font:26px Arial,sans-serif}
 .sidebar-bottom{margin-top:auto;padding:8px 0 0;display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px;align-items:center;flex-shrink:0}
 .sidebar-bottom button{width:44px;height:44px;min-height:44px;margin:0;padding:0;display:flex;justify-content:center;align-items:center;font-size:24px;gap:0}
 .sidebar-bottom button span,.sidebar-bottom p{display:none}
 main{margin:0 0 0 64px;width:calc(100% - 64px);min-width:0;padding:18px 10px}
 header{padding:0 0 16px;gap:14px}.board-heading{flex-wrap:wrap;gap:4px;min-width:0}.board-heading h2{width:100%;overflow-wrap:anywhere;margin:0 0 4px}
 .toolbar{gap:12px}.toolbar>div{gap:8px;flex-wrap:wrap}.master input{width:70px}.search{gap:8px}.search input{min-width:0;width:0;flex:1}
 .category-heading{margin-left:0;margin-right:0;gap:5px}.category-size{gap:5px}.category-size input{width:65px}
 body.stacks-layout-open>aside{display:flex}body.stacks-layout-open>main{display:none}
 #stacks-panel{position:fixed;top:0;bottom:0;left:64px;right:0;margin:0;width:calc(100% - 64px);min-height:100dvh;padding:20px 12px;z-index:9}
 .stack-heading{gap:4px}.stack-heading h2{font-size:36px}.stack-heading button{font-size:26px}.simple-stack-sounds{padding-left:12px}.stack-title{font-size:25px}
 footer{flex-wrap:wrap;padding:0;gap:8px}
}
@media(prefers-reduced-motion:reduce){aside{transition:none}}

@media(max-width:760px){#boards .board-row [data-board]{text-align:center}}

/* Shared label column; icons occupy their own fixed-width column. */
.menu-icon{font-style:normal;display:flex;align-items:center;justify-content:center;width:24px;flex-shrink:0}
@media(min-width:761px){
 aside h1{margin-left:38px;margin-right:0}
 #boards-heading{padding-left:38px}
 #boards [data-board]{padding-left:38px}
 #boards [data-board].active{padding-left:35px}
 #add-board{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:center;padding-left:0;padding-right:0;text-align:left}
 .sidebar-bottom{padding-left:0;padding-right:0}
 .sidebar-bottom button{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:center;padding:6px 0;text-align:left}
 .sidebar-bottom button svg{justify-self:center}
 .sidebar-bottom button span{text-align:left}
 .sidebar-bottom p{margin-left:38px;margin-right:0}
}
@media(max-width:760px){#add-board .menu-icon,#add-board span{display:none}.sidebar-bottom .menu-icon{width:24px}}

@media(max-width:760px){#boards .board-delete{display:none}.board-row{height:44px}}

.mobile-board-delete{display:none}@media(max-width:760px){.mobile-board-delete{display:block}}

@media(max-width:760px){
 .board-heading{width:100%;display:flex;flex-wrap:nowrap;align-items:center;gap:2px}
 .board-heading h2{flex:1;min-width:0;width:auto;margin:0 4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .board-heading button{flex:0 0 28px;width:28px;min-height:40px;padding:0;font-size:26px}
}

.soundboard-icon{display:none}@media(max-width:760px){#boards .board-row [data-board]::before{content:none}#boards .board-row [data-board]{display:flex;align-items:center;justify-content:center}.soundboard-icon{display:block;flex-shrink:0}}

html[data-theme] #stop-all{background:transparent;border:0;color:inherit;padding:4px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}html[data-theme] #stop-all:hover{background:#8882}
#master-mute{display:inline-flex;align-items:center;justify-content:center;width:36px;height:40px;padding:4px;flex-shrink:0}#master-mute .mute-cross{display:none}#master-mute[aria-pressed=true] .mute-cross{display:block}#master-mute[aria-pressed=true] .mute-waves{display:none}#master-mute[aria-pressed=true]{background:#8883}

/* Header audio controls; search lives with sidebar navigation. */
header>.master{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.sidebar-search{margin:0 0 18px;min-width:0}.sidebar-search .search{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin:0;font-size:20px;padding-left:38px}
.sidebar-search .search input{width:100%;min-width:0;height:36px;flex:none}.sidebar-search .search::after{top:auto;bottom:8px;transform:none;font-size:20px}
#search-toggle{display:none}
@media(min-width:761px){body.stacks-layout-open .sidebar-search .search{width:100%;margin:0;gap:8px}body.stacks-layout-open .sidebar-search .search input{width:100%;flex:none}body.stacks-layout-open header>.master{margin-left:0}}
@media(max-width:760px){
 header>.master{width:100%;margin-left:0;gap:8px;justify-content:space-between;flex-wrap:nowrap}header>.master label{gap:6px}header>.master input{width:65px}header>.master output{min-width:28px}
 .sidebar-search{margin:0 0 12px;flex-shrink:0}#search-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:auto;padding:0}
 .sidebar-search .search{position:fixed;left:74px;top:12px;width:calc(100vw - 88px);padding:12px;background:#171717;color:white;border:1px solid #777;border-radius:12px;box-shadow:0 8px 24px #0004;z-index:30;font-size:0;gap:0;visibility:hidden;opacity:0;transform:translateX(-10px);transition:opacity 240ms cubic-bezier(.42,0,.58,1),transform 240ms cubic-bezier(.42,0,.58,1),visibility 240ms}
 .sidebar-search .search::after{right:21px;bottom:20px}.sidebar-search .search input{font-size:20px;width:100%;height:36px}
 .mobile-search-open .sidebar-search .search{visibility:visible;opacity:1;transform:none}
 [data-theme=light] .sidebar-search .search{background:#fff;color:#202124}
}
@media(prefers-reduced-motion:reduce){.sidebar-search .search{transition:none}}

.category-sort{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:32px;flex:0 0 28px;opacity:.75;border-radius:5px;cursor:pointer}.category-sort:hover,.category-sort:focus-within{opacity:1;background:#8883}.category-sort:focus-within{outline:2px solid currentColor;outline-offset:2px}.category-sort select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.category-heading{flex-wrap:wrap}

.usage-tips{margin:0;padding-left:18px;line-height:1.6}.usage-tips li{padding-left:2px}footer{align-items:flex-start}#playing-count{white-space:nowrap}
@media(min-width:761px){.sidebar-bottom{width:max-content;max-width:100%;margin-left:auto;margin-right:auto}.sidebar-bottom button{width:100%}.sidebar-bottom p{margin-left:38px;white-space:nowrap}}

/* Let disclosure height move the following categories throughout the animation. */
#categories>section{min-height:0;overflow-anchor:none}.category-content{display:flow-root}.category-content[hidden]{display:none}

.category-heading button[data-collapse]{font-size:28px}

.tips-label{display:flex;align-items:center;gap:8px;font-size:18px}#tips-toggle{width:24px;height:24px;padding:0;border:1px solid currentColor;border-radius:50%;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.tips-help{max-width:100%}#tips-list{display:flow-root}#tips-list[hidden]{display:none}#tips-list .usage-tips{padding-top:10px}

.category-layout-controls{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.category-layout-controls .category-size{margin-left:0}.category-layout-controls .category-drag{flex-shrink:0}

section.category-drag-preview{transition:none;contain:layout paint;backface-visibility:hidden}#categories>section{overflow-anchor:none}

#boards-heading{justify-content:space-between;align-items:center;gap:8px}#boards-heading #add-board{display:inline-flex;align-items:center;justify-content:center;width:32px;min-height:32px;flex:0 0 32px;margin:0;padding:0;font:28px Arial,sans-serif}#boards-heading #add-board::before{content:none}
@media(max-width:760px){#boards-heading{display:flex;justify-content:center;padding:0;border:0;margin:0 0 8px}#boards-heading>span{display:none}#boards-heading #add-board{width:44px;min-height:40px;flex-basis:44px}}

@media(min-width:761px){#boards-heading{padding-right:0}}

/* Original supplied wordmark, framed without its surrounding whitespace. */
aside h1.brand{font-size:0;line-height:1;margin-left:0;margin-right:0;flex-shrink:0}.brand-wordmark{display:block;position:relative;width:100%;aspect-ratio:1426/260;overflow:hidden}.brand-wordmark img{position:absolute;display:block;width:112.76%;max-width:none;height:auto;left:-6.17%;top:-51.54%;filter:invert(1);mix-blend-mode:screen}[data-theme=light] .brand-wordmark img{filter:none;mix-blend-mode:multiply}
@media(max-width:760px){aside h1.brand::before{content:'SB'}aside h1.brand .brand-wordmark{display:none}}

/* Figure from the user's Fort webfont subscription. */
:root{font-family:"Figure",Arial,sans-serif;font-stretch:normal;font-weight:400}button,input,select,textarea{font-family:inherit;font-stretch:normal}.sidebar-bottom button{font-size:22px;font-weight:700}#boards-heading{font-size:22px}#boards [data-board]{font-size:18px;font-weight:400}.board-heading h2{font-size:28px;font-weight:400}.category-heading button[data-collapse]{font-size:22px}.card h3,#categories .card h3{font-size:max(16px,calc(20px * var(--card-scale,1)))}.sidebar-search .search{font-size:18px}.sidebar-bottom p{font-size:12px}footer{font-size:13px}.toolbar{font-size:15px}.master{font-size:15px}.timeline{font-size:12px}
@media(max-width:760px){.sidebar-bottom button,#boards [data-board],#boards-heading{font-size:0}.board-heading h2{font-size:22px}.category-heading button[data-collapse]{font-size:20px}.sidebar-search .search{font-size:0}.sidebar-bottom p{display:none}}

@media(max-width:760px){.sidebar-bottom .menu-icon{font-size:24px}}

.brand-wordmark{width:80%;margin-inline:auto}

.board-heading h2{font-weight:700}

.board-heading h2{font-weight:800}.category-heading button[data-collapse]{font-weight:500}

.sidebar-search .search input::placeholder{text-align:left;color:currentColor;opacity:.6}

#board-title{font-weight:800}

.stacks-description{font-size:15px;line-height:1.5;color:inherit;opacity:.7;margin:0 0 22px}

@media(min-width:761px){
 aside h1.brand{width:100%;margin-left:auto;margin-right:auto}
 .sidebar-search{width:100%;margin-left:auto;margin-right:auto}
 .sidebar-search .search{padding-left:0}
 #boards-heading{position:relative;justify-content:center;padding-left:32px;padding-right:32px;text-align:center}
 #boards-heading #add-board{position:absolute;right:0;top:50%;transform:translateY(-50%)}
 #boards{width:100%;margin-left:auto;margin-right:auto}
 #boards .board-row [data-board]{text-align:center;padding-left:32px;padding-right:32px}
 #boards .board-row [data-board].active{padding-left:29px}
}

@media(min-width:761px){#boards-heading{justify-content:flex-start;text-align:left}#boards .board-row [data-board]{text-align:left}}

.board-row .board-archive{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:28px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;opacity:.6}.board-row .board-archive:hover{opacity:1}
#archived-boards{display:flex;align-items:center;gap:10px;margin:12px auto 0;padding:8px;font-size:14px;opacity:.7}#archived-boards[hidden]{display:none}.archive-entry{display:flex;align-items:center;justify-content:space-between;gap:14px}.archive-entry>span{min-width:0;overflow-wrap:anywhere}.archive-entry small{display:block;opacity:.6;margin-top:5px}.archive-entry button{border:1px solid #888;padding:8px 12px;flex-shrink:0}
@media(min-width:761px){#boards .board-row [data-board]{padding-right:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:760px){#boards .board-archive{display:none}#archived-boards{width:44px;min-height:40px;justify-content:center;flex-shrink:0}#archived-boards>span{display:none}}

.services-list{display:grid;gap:0}.service-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #8885}.service-row:last-child{border-bottom:0}.service-row strong{font-weight:600}.service-row p{font-size:14px;margin:6px 0 0;opacity:.7;line-height:1.4}.service-status{font-size:12px;white-space:nowrap;border:1px solid #8887;border-radius:20px;padding:5px 9px;opacity:.75}.services-note{font-size:14px;opacity:.7;line-height:1.5}
@media(min-width:761px){.sidebar-bottom #connected-services{font-size:18px}}

.settings-tabs{flex-wrap:wrap}.settings-tabs [role=tab]{white-space:nowrap}

.settings-tabs [role=tab]{font-size:15px;padding:10px 8px;flex:1 1 auto}

/* Frame the supplied SoundBoxr artwork without its surrounding whitespace. */
.brand-wordmark{aspect-ratio:3118/514}.brand-wordmark img{width:103.66%;left:-1.28%;top:-13.42%}

.brand-mobile{display:none}
@media(max-width:760px){
 aside h1.brand::before{content:none}
 aside h1.brand .brand-mobile{display:block;position:relative;width:36px;height:36px;overflow:hidden;margin:0 auto}
 .brand-mobile img{position:absolute;width:123.31%;max-width:none;height:auto;left:-13.16%;top:-9.4%;filter:invert(1);mix-blend-mode:screen}
 [data-theme=light] .brand-mobile img{filter:none;mix-blend-mode:multiply}
}