/* Spider — printed comic panels, scarlet ink and cobalt. */
html[data-skin=spider]{
 color-scheme:light;--bg:#e9e4db;--surface:#faf4e9;--text:#182940;--muted:#566172;--line:#aeb3bc;
 --spider-red:#bb293c;--spider-blue:#234c95;--spider-paper:#fff5df;--spider-edge:#182940;
 --control:#ece8df;--control-hover:#e5d9d0;--selected:var(--spider-red);--selected-ink:var(--spider-paper);
 --ochre:var(--spider-red);--coral:var(--spider-red);--warm-ink:var(--spider-paper);--asmm-link:var(--spider-blue);
 --spider-panel:#f2e4d9;--spider-digit:var(--spider-red);--spider-outline:#182940;--spider-shadow:#fff5df;
 --spider-halftone:#18294014;--spider-accent-soft:#efd4d0;--spider-face:'Court Condensed',Impact,'Arial Black',sans-serif;
}
html[data-skin=spider][data-theme=dark]{
 color-scheme:dark;--bg:#0b1220;--surface:#152238;--text:#faf0dd;--muted:#b1bfd1;--line:#465773;
 --spider-red:#e24753;--spider-blue:#78a5f1;--spider-edge:#08111e;
 --control:#20334f;--control-hover:#2d4261;--selected:#b82b3e;--spider-panel:#b82b3e;
 --spider-digit:#fff5df;--spider-outline:#172840;--spider-shadow:#5074b3;
 --spider-halftone:#06142638;--spider-accent-soft:#472c3d;
}
html[data-skin=spider] body{background:var(--bg)}
html[data-skin=spider] .site-header{border-bottom:3px solid var(--spider-red);box-shadow:0 3px 0 var(--spider-blue)}
html[data-skin=spider] .title-row{margin:19px 0 16px}
html[data-skin=spider] h1{font:800 italic 42px/1.15 var(--spider-face);color:var(--spider-red);letter-spacing:.015em;margin:0;text-shadow:1px 1px 0 var(--surface)}
html[data-skin=spider] h1:before{content:none}
html[data-skin=spider] .title-row .eyebrow{font-size:9px;line-height:1.6;letter-spacing:.14em;margin-bottom:7px}
html[data-skin=spider] .school-link{color:var(--asmm-link);border-color:var(--asmm-link);border-radius:2px}
html[data-skin=spider] .school-link:is(:hover,:focus-visible){background:var(--control);color:var(--asmm-link)}
html[data-skin=spider] .workspace{border:2px solid var(--spider-edge);border-radius:5px;background:var(--surface);box-shadow:4px 4px 0 var(--spider-edge)}
html[data-skin=spider] :is(.mode-switch button,.transport button,.settings-details summary){font:800 italic 22px/1.2 var(--spider-face);text-transform:uppercase;letter-spacing:.035em}
html[data-skin=spider] :is(h2,.panel-top .eyebrow,.subdivision-panel h2){font-weight:800;letter-spacing:.07em}
html[data-skin=spider] .mode-switch{padding:9px;gap:8px;border-bottom:2px solid var(--spider-edge)}
html[data-skin=spider][data-theme] :is(.language-switch button,.appearance-button,.mode-switch button,.signatures button,select,.poly-choices button,.poly-speed-actions button,#backbeat,.swing-labels button,#swing-reset,.practice-fields input,.preset-form input,.share-link-label input,.preset-form button,.small-buttons button,.preset-row button,#install-app){border-color:var(--line);border-radius:2px}
html[data-skin=spider][data-theme] :is(.language-switch button[aria-pressed=true],.mode-switch button[aria-pressed=true],.signatures button[aria-pressed=true],.poly-speed-actions button[aria-pressed=true],#backbeat[aria-pressed=true],.preset-form button){background:var(--selected);color:var(--selected-ink);border-color:var(--selected)}
html[data-skin=spider] .rhythm-top{border-bottom:2px solid var(--spider-edge)}
html[data-skin=spider] .subdivision-panel{border-left:1px solid var(--line)}
html[data-skin=spider][data-theme] .pixel-beats .beat{background:var(--control);border-color:var(--line);border-radius:2px}
html[data-skin=spider] .beat-number{font:800 italic 23px/1 var(--spider-face)}
html[data-skin=spider][data-theme] .beat.accent .beat-meta{background:var(--spider-accent-soft);color:var(--spider-red)}
html[data-skin=spider][data-theme=dark] .beat.accent .beat-meta{color:#ffd0c8}
html[data-skin=spider][data-theme] .pixel-beats .beat.active .beat-meta{background:var(--selected);color:var(--selected-ink);border-bottom-color:var(--spider-edge)}
html[data-skin=spider][data-theme] .pixel-beats .beat.muted{background:var(--surface);border-color:var(--line)}
html[data-skin=spider][data-theme] .beat.muted .meter-face{background:var(--control)}
html[data-skin=spider][data-theme] .beat.muted .beat-caption{color:var(--muted)}
html[data-skin=spider][data-theme] .pixel-beats .beat.muted.active .beat-meta{background:var(--control-hover);color:var(--text)}
html[data-skin=spider][data-theme] .subdivision-button{position:relative;isolation:isolate;overflow:hidden;background:#234c95;color:var(--spider-paper);border:2px solid var(--spider-edge);border-radius:3px;box-shadow:2px 2px 0 var(--spider-edge)}
html[data-skin=spider] .subdivision-name{color:var(--spider-paper)}
html[data-skin=spider] .subdivision-track{--subdivision-line:var(--line);--subdivision-dot:var(--muted)}
html[data-skin=spider] .subdivision-track i.active{background:var(--selected);outline-color:var(--spider-blue)}
html[data-skin=spider] .tempo-panel{position:relative;isolation:isolate;background:var(--spider-panel);padding:17px 20px 16px}
html[data-skin=spider] .tempo-panel:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,var(--spider-halftone) .7px,transparent .95px) 0 0 / 5px 5px;mask-image:linear-gradient(90deg,#000,transparent 32% 68%,#000)}
html[data-skin=spider] .dial{container-type:inline-size;width:235px;height:170px}
html[data-skin=spider] .dial input{font:800 italic clamp(40px,49cqw,115px)/1.15 var(--spider-face);letter-spacing:-.015em;padding:0 9px 0 0;color:var(--spider-digit);-webkit-text-stroke:2px var(--spider-outline);paint-order:stroke fill;text-shadow:3px 3px 0 var(--spider-shadow),5px 5px 0 var(--spider-outline);caret-color:var(--spider-digit)}
html[data-skin=spider] .dial .eyebrow{font-size:9px;letter-spacing:.2em;margin-bottom:4px}
html[data-skin=spider] .tempo-caption{margin-top:7px;gap:8px}
html[data-skin=spider][data-theme=dark] .tempo-panel{--text:var(--spider-paper);--muted:#ffe1d8;--line:#ed95a0;--coral:var(--spider-paper);--ochre:var(--spider-paper);--surface:#b82b3e}
html[data-skin=spider][data-theme] .step-btn{background:var(--surface);color:var(--text);border:2px solid var(--spider-edge);border-radius:3px;box-shadow:2px 2px 0 var(--spider-edge)}
html[data-skin=spider][data-theme] .step-btn:hover:not(:disabled){background:var(--text);color:var(--surface);border-color:var(--spider-edge)}
html[data-skin=spider] .step-btn:active:not(:disabled){box-shadow:inset 0 0 0 2px currentColor}
html[data-skin=spider] .transport{gap:10px}
html[data-skin=spider][data-theme] .transport button{border:2px solid var(--spider-edge);border-radius:3px;color:var(--spider-paper)}
html[data-skin=spider][data-theme] .play-btn{background:#bb293c}
html[data-skin=spider][data-theme] .tap-btn{background:#234c95}
html[data-skin=spider][data-theme] .tap-btn.tapped{background:#426cb5}
html[data-skin=spider][data-theme] input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--text) 0 var(--fill),var(--line) var(--fill) 100%)}
html[data-skin=spider][data-theme] input[type=range]::-webkit-slider-thumb{background:var(--spider-paper);border-color:var(--spider-edge);border-radius:2px;outline:none;box-shadow:none}
html[data-skin=spider][data-theme] input[type=range]::-moz-range-track{background:var(--line)}
html[data-skin=spider][data-theme] input[type=range]::-moz-range-progress{background:var(--text)}
html[data-skin=spider][data-theme] input[type=range]::-moz-range-thumb{background:var(--spider-paper);border-color:var(--spider-edge);border-radius:2px;outline:none;box-shadow:none}
html[data-skin=spider][data-theme] :is(.settings-details,.subdivision-options button){background:var(--surface);border-color:var(--line);border-radius:3px}
html[data-skin=spider][data-theme] .subdivision-options button[aria-pressed=true]{background:var(--selected);color:var(--selected-ink);border-color:var(--selected)}
html[data-skin=spider][data-theme] .switch{background:var(--control);border-color:var(--line)}
html[data-skin=spider][data-theme] .switch[aria-checked=true]{background:var(--selected);border-color:var(--selected)}
html[data-skin=spider][data-theme] .switch[aria-checked=true] span{background:var(--selected-ink)}
html[data-skin=spider][data-theme] #swing-reset.at-center{background:var(--control);border-color:var(--line)}
html[data-skin=spider][data-theme] :is(.swing-labels button:hover:not(:disabled),.grouping-row button:hover,.preset-row button:hover,.small-buttons button:hover){background:var(--selected);color:var(--selected-ink)}
html[data-skin=spider] :is(.appearance-dialog,.subdivision-dialog,.sound-dialog){border:2px solid var(--spider-edge);border-radius:4px;box-shadow:4px 4px 0 var(--spider-edge)}
html[data-skin=spider] :is(.appearance-dialog,.subdivision-dialog)::backdrop{background:#0b122066}
html[data-skin=spider] :is(.sound-current,.sound-option-copy strong){font:800 italic 21px/1.15 var(--spider-face);text-transform:uppercase;letter-spacing:.015em}
/* Fixed preview colours stay faithful when a different skin is active. */
.skin-grid [data-appearance-skin=spider][data-appearance-theme=light]{--sample-bg:#f2e4d9;--sample-ink:#bb293c;--sample-line:#234c95;--sample-frame:#faf4e9}
.skin-grid [data-appearance-skin=spider][data-appearance-theme=dark]{--sample-bg:#b82b3e;--sample-ink:#fff5df;--sample-line:#78a5f1;--sample-frame:#152238}
[data-appearance-skin=spider] .preview-value{font:800 italic 33px/1 'Court Condensed',Impact,sans-serif;letter-spacing:.01em;text-shadow:1px 1px 0 #182940}
@media(max-width:619px){
 html[data-skin=spider] h1{font-size:31px}
 html[data-skin=spider] .title-row{margin:17px 0 13px}
 html[data-skin=spider] .mode-switch{padding:7px;gap:6px}
 html[data-skin=spider] :is(.mode-switch button,.transport button){font-size:20px}
 html[data-skin=spider] .tempo-panel{padding:13px 10px 15px}
 html[data-skin=spider] .dial{height:144px}
 html[data-skin=spider] .dial input{-webkit-text-stroke:1.5px var(--spider-outline);text-shadow:2px 2px 0 var(--spider-shadow),3px 3px 0 var(--spider-outline)}
}
@media(max-width:359px){html[data-skin=spider] h1{font-size:28px}html[data-skin=spider] .dial{height:128px}html[data-skin=spider] .tempo-caption{font-size:10px;gap:4px}}
@media(min-width:620px) and (max-height:900px){html[data-skin=spider] .transport{background:var(--spider-panel);border-color:var(--spider-edge)}}