/* VINYLSTACK — CONFIDENTIAL & PROPRIETARY · private Playground build */
.playground-page{background:#101513;color:#eeeade;min-height:100vh}
.playground-page>.listening-layout,.playground-page>.vs-page-context,.playground-page>.vs-site-footer,.playground-page>[data-silent-story]{display:none!important}
.playground-page .vs-site-header{background:transparent;border-bottom:1px solid #ffffff0b}
.playground{max-width:1900px;padding:22px 3vw 60px;margin:auto}
.pg-heading{display:flex;align-items:center;gap:14px;margin:0 0 24px}
.pg-heading h1{font:500 20px/1.2 Georgia,serif;letter-spacing:-.3px;margin:0}
.pg-heading>span{font-size:9px;color:#9ea68b;letter-spacing:.13em;text-transform:uppercase;border-left:1px solid #ffffff20;padding-left:14px}
.pg-layout{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,5.7fr) minmax(130px,1fr);gap:28px;align-items:start}
.pg-centre{min-width:0}.pg-shelves{display:flex;align-items:start;justify-content:center;gap:28px;min-height:270px;padding:2px 10px 8px;overflow-x:auto;scrollbar-width:thin}
.pg-album{flex:0 0 154px;text-align:center;min-width:0}
.pg-cover{display:block;border:0;background:transparent;padding:0;border-radius:1px;width:154px;height:154px;min-height:0;box-shadow:2px 9px 18px #0007;transition:transform .25s,box-shadow .25s;position:relative}
.pg-cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px;pointer-events:none}
.pg-cover:hover:enabled{background:transparent;transform:translateY(-3px)}
.pg-cover[aria-pressed=true]{box-shadow:0 0 0 2px #bccba777,2px 10px 22px #0009}
.pg-album h2{font-size:11px;font-weight:450;line-height:1.45;letter-spacing:.02em;margin:10px 0 4px;overflow-wrap:anywhere}
.pg-album .pg-artist{font-size:9px;color:#a5a998;margin:0 0 10px}
.pg-faces{display:flex;justify-content:center;gap:10px;animation:pg-reveal .28s ease both}
.pg-face{padding:0;border:0;background:transparent!important;min-height:0;border-radius:50%;width:70px;cursor:grab;touch-action:none;position:relative;color:#dfe2d1}
.pg-face img{width:70px;height:70px;display:block;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 5px #0007)}
.pg-face span{font-size:8px;display:block;letter-spacing:.08em;margin-top:4px;white-space:nowrap}
.pg-face.is-on-deck img{opacity:.16}.pg-face.is-on-deck{cursor:default}.pg-face:active{cursor:grabbing}
.pg-remove{margin:10px auto 0;font-size:9px!important;opacity:.7}
.pg-deck{position:relative;margin:4px -2% 0;border-radius:40%;transition:filter .2s}
.pg-deck.is-target{filter:drop-shadow(0 0 16px #c4d99c20)}
.pg-deck .deck-stage{width:100%;aspect-ratio:920/452}
.pg-deck .deck-stage:focus{outline:none}.pg-deck .deck-options-trigger{display:none}
.pg-now{font-size:11px;line-height:1.6;min-height:28px;text-align:center;margin:20px 0 8px;color:#acb4a2;letter-spacing:.025em}
.pg-import{padding-top:110px;text-align:center;max-width:210px;justify-self:center}
.pg-blank-sleeve{width:130px;height:130px;border-radius:1px;border:0;background:#d9d3bd!important;box-shadow:3px 10px 24px #0005;position:relative;margin:0 auto 24px;padding:0;transform:rotate(-5deg);transition:transform .3s}
.pg-blank-record{display:block;border:1px solid #7d826b45;border-radius:50%;width:98px;height:98px;position:absolute;top:16px;left:16px}
.pg-blank-record:before{content:'';position:absolute;inset:31px;border:1px solid #7d826b50;border-radius:50%}
.pg-plus{color:#646c55;font-size:24px;font-weight:200;position:relative}
.pg-import.is-over .pg-blank-sleeve,.pg-blank-sleeve:hover{transform:rotate(0) translateY(-4px)}
.pg-import.is-reading .pg-blank-record{border-style:dotted;animation:pg-turn 5s linear infinite}
.pg-import h2{font:500 16px/1.4 Georgia,serif;letter-spacing:-.2px;margin:0 0 8px}
.pg-import>p{font-size:11px;line-height:1.7;color:#b2b7a6;margin:0}
.pg-import .pg-privacy{font-size:9px;line-height:1.8;color:#7f8a7d;margin:18px 0}
.pg-import .pg-file-status{font-size:11px;color:#d3dfbd;min-height:35px;overflow-wrap:anywhere}
.pg-guide{padding-top:195px;max-width:180px;transition:opacity 1s}.pg-guide.is-learned{opacity:.35}
.pg-step{font-size:8px;letter-spacing:.15em;color:#9aab87}
.pg-guide p{font:400 21px/1.45 Georgia,serif;letter-spacing:-.3px;margin:15px 0}
.pg-guide small{font-size:10px;line-height:1.7;color:#84917f;display:block}
.pg-controls{margin:12px auto 0;text-align:center;max-width:430px;font-size:10px;color:#899781}
.pg-controls summary{display:inline-block;cursor:pointer;padding:8px 12px;letter-spacing:.035em}
.pg-controls[open]{border-top:1px solid #ffffff10;padding-bottom:12px}
.pg-controls .transport{margin:8px 0 14px!important;gap:15px!important}.pg-controls .scrubber{max-width:340px;margin:0 auto 12px}
.pg-text-button{padding:5px 0;border:0;background:transparent!important;border-radius:0;min-height:24px;font-size:11px;color:#a4b591;cursor:pointer}
.pg-error{max-width:700px;margin:20px auto;text-align:center;font-size:12px;color:#efd3b3;line-height:1.5}
.pg-drag-image{position:fixed;z-index:3000;pointer-events:none;width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 15px 18px #0009);opacity:.9;will-change:transform}
.pg-flight{position:fixed;inset:0;z-index:2999;pointer-events:none}.pg-disc-lift{position:absolute;z-index:10;border:0;background:transparent!important;border-radius:50%;padding:0;min-height:0;cursor:grab;touch-action:none;transform:translate(-50%,-50%)}
.pg-disc-lift:focus-visible{outline:1px solid #c4d99c99;outline-offset:6px}
.playground-page .renderer-notice{max-width:500px;text-align:center;font-size:11px;margin:10px auto}
@keyframes pg-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes pg-turn{to{transform:rotate(360deg)}}
@media(min-width:1650px){.pg-layout{grid-template-columns:200px minmax(0,1fr) 180px;gap:35px}.pg-album{flex-basis:174px}.pg-cover{width:174px;height:174px}.pg-face,.pg-face img{width:80px;height:80px}.pg-shelves{min-height:295px}}
@media(max-width:1050px){.pg-layout{grid-template-columns:140px minmax(0,1fr);gap:18px}.pg-guide{grid-column:2;padding:0;text-align:center;max-width:none;grid-row:2}.pg-guide p{font-size:17px;display:inline;margin:0 8px}.pg-guide small{display:inline}.pg-step{display:none}.pg-cover{width:135px;height:135px}.pg-album{flex-basis:135px}.pg-face,.pg-face img{width:60px;height:60px}.pg-shelves{min-height:245px;gap:22px}.pg-import{padding-top:120px}.pg-blank-sleeve{width:112px;height:112px}.pg-blank-record{inset:12px;width:auto;height:auto}}
@media(max-width:650px){.playground{padding:18px 14px 36px}.pg-heading{margin-bottom:20px}.pg-layout{display:flex;flex-direction:column;gap:14px}.pg-centre{width:100%;order:0}.pg-shelves{justify-content:safe center;min-height:222px;gap:22px}.pg-cover{width:120px;height:120px}.pg-album{flex-basis:120px}.pg-face,.pg-face img{width:54px;height:54px}.pg-faces{gap:10px}.pg-guide{order:1;align-self:center;padding:0 15px}.pg-guide small{display:block}.pg-import{order:2;align-self:center;padding-top:26px;max-width:320px;width:100%}.pg-blank-sleeve{width:88px;height:88px;margin-bottom:15px}.pg-blank-record:before{inset:20px}.pg-import .pg-privacy{margin:10px 0}.pg-deck{margin:0 -10px}.pg-now{margin-top:12px}.pg-controls{margin-top:0}}
@media(prefers-reduced-motion:reduce){.playground *{animation:none!important;transition:none!important}}

/* The supplied direction: a quiet green room with the real deck as its centre. */
.playground-page{background:radial-gradient(ellipse at 50% 44%,#19281c 0,#0e1711 50%,#080e0a 100%)}
.pg-heading{display:block;text-align:center;margin:2px 0 30px}.pg-heading>span{border:0;padding:0;font-size:9px;letter-spacing:.23em}
.pg-heading h1{font:600 clamp(25px,2.8vw,42px)/1.15 system-ui,sans-serif;letter-spacing:-1.7px;margin:10px 0}.pg-heading h1 em{font-style:normal;color:#ade89d}.pg-heading p{font-size:13px;margin:0;color:#d5dfd2}
.pg-layout{grid-template-columns:minmax(175px,1fr) minmax(0,4.4fr) minmax(205px,1.12fr);gap:20px}
.pg-right{padding-top:10px}.pg-deck-choices{border:1px solid #c0d8ae22;border-radius:14px;padding:20px 13px}
.pg-deck-choices h2{font:500 22px/1.25 system-ui,sans-serif;letter-spacing:-.7px;margin:12px 0 20px}
.pg-preset{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid #ffffff08;border-radius:10px;background:#ffffff02;padding:5px;margin-top:9px;min-height:75px}
.pg-preset[aria-pressed=true]{border-color:#b0e59c99;background:#b0e59c08;box-shadow:0 0 13px #8ec77913}.pg-preset img{width:47%;height:auto;object-fit:contain;border-radius:6px}.pg-preset strong{font-size:10px;font-weight:500;display:block}.pg-preset small{font-size:8px;color:#94a18f;line-height:1.5;display:block;margin-top:5px}
.pg-guide{padding:22px 12px 0;max-width:none}.pg-guide p{font-size:16px;margin:10px 0}.pg-guide.is-learned{opacity:.55}
.pg-import{padding:24px 16px;border:1px solid #c0d8ae22;border-radius:14px;margin-top:10px;max-width:none}.pg-import h2{font:500 21px/1.25 system-ui,sans-serif;letter-spacing:-.6px}.pg-blank-sleeve{width:114px;height:114px;margin:8px auto 24px}.pg-blank-record{inset:12px;width:auto;height:auto}
.pg-shelves{justify-content:safe center;gap:22px}.pg-faces{flex-wrap:wrap}
@media(min-width:1650px){.pg-layout{grid-template-columns:230px minmax(0,1fr) 260px;gap:30px}}
@media(max-width:1050px){.pg-layout{grid-template-columns:150px minmax(0,1fr)}.pg-right{grid-column:2}.pg-deck-choices{padding:16px}.pg-deck-choices h2{font-size:19px}.pg-deck-choices h2 br{display:none}[data-pg-presets]{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pg-guide{text-align:center}}
@media(max-width:650px){.pg-layout{display:flex}.pg-heading{margin-bottom:24px}.pg-right{order:1;width:100%;padding:0}.pg-import{order:2;width:100%;padding:22px;max-width:400px}.pg-deck-choices{border:0;padding:12px 0}.pg-deck-choices h2{margin:7px 0}.pg-preset{margin:0}.pg-guide{padding-top:10px}}

body.playground-page>.playground{padding:22px 3vw 48px;margin:auto;max-width:1900px}
.pg-heading h1{max-width:none;margin:10px auto}.pg-shelves{padding-bottom:25px;min-height:270px}.pg-face{height:auto!important}.pg-album h2{min-height:32px}
@media(max-width:650px){body.playground-page>.playground{padding:18px 14px 36px}.pg-shelves{min-height:245px}}

/* Enlarge the actual stage, keeping the renderer and pointer projection aligned. */
.pg-shelves{position:relative;z-index:2}
.pg-import,.pg-right{position:relative;z-index:2}
.pg-import{text-align:left}
.pg-import h2{margin:12px 0 8px;font-size:23px}
.pg-file-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:235px;padding:22px 10px 18px;margin:22px 0 0;border:1px dashed #b6caaa45;border-radius:12px;background:#07110c33;color:#e7ecdf;cursor:pointer;transition:background .2s,border-color .2s}
.pg-file-drop:hover,.pg-import.is-over .pg-file-drop{background:#acd7980b;border-color:#b5e6a3aa}
.pg-file-drop:focus-visible{outline:2px solid #b5e6a3;outline-offset:4px}
.pg-file-drop .pg-blank-sleeve{display:grid;place-items:center;flex-shrink:0;width:86px;height:86px;margin:4px auto 24px}
.pg-file-drop .pg-blank-record{inset:10px}.pg-file-drop .pg-blank-record:before{inset:20px}
.pg-file-drop strong{font-size:12px;font-weight:500;line-height:1.5}
.pg-file-drop>span:not(.pg-upload-art){font-size:11px;color:#b4c7aa;margin:4px 0 10px}
.pg-file-drop small{font-size:10px;line-height:1.7;color:#8f9c88}
.pg-import .pg-privacy{font-size:10px;margin:18px 0 0}.pg-privacy strong{display:block;color:#c6d2bc;font-size:11px;font-weight:500;margin-bottom:5px}
.pg-file-status:empty{display:none}
.pg-preset strong{font-size:12px;line-height:1.35}.pg-preset small{font-size:10px;line-height:1.45}
@media(min-width:1200px){.pg-deck{width:119.6%;margin:-10% 0 -10% -9.8%}.pg-now{margin-top:8px}}
@media(max-width:1050px) and (min-width:651px){.pg-layout{grid-template-columns:1fr 1fr}.pg-centre{grid-column:1/-1;grid-row:1}.pg-import{grid-column:1;grid-row:2;width:100%;padding:24px}.pg-right{grid-column:2;grid-row:2}.pg-right [data-pg-presets]{grid-template-columns:1fr}.pg-deck{margin-top:-6%;margin-bottom:-6%}.pg-file-drop{min-height:220px}}
@media(max-width:650px){.pg-import>.pg-step{display:block}.pg-import h2{font-size:24px}.pg-file-drop{min-height:220px}.pg-preset strong{font-size:11px}.pg-preset small{font-size:9px}}

.pg-vinyl-tray{max-width:1440px;margin:28px auto 0;padding:22px 24px 14px;border:1px solid #c0d8ae22;border-radius:14px;background:#07110c22}
.pg-vinyl-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}.pg-vinyl-heading h2{font:500 17px/1.4 system-ui,sans-serif;letter-spacing:-.35px;margin:7px 0 3px}.pg-vinyl-heading p{font-size:10px;color:#91a18a;margin:0;line-height:1.5}
.pg-vinyl-heading .pg-text-button{white-space:nowrap;margin-top:7px;font-size:10px}.pg-vinyl-heading .pg-text-button:disabled{opacity:.5}
.pg-style-rail{display:flex;align-items:center;gap:12px;margin-top:14px;min-width:0}
.pg-styles{display:flex;align-items:start;justify-content:safe center;gap:15px;min-width:0;flex:1;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding:10px 5px 8px}
.pg-vinyl-style{flex:0 0 128px;min-width:0;min-height:0;padding:0 4px;border:0;background:transparent!important;text-align:center;scroll-snap-align:center;color:#d7dfd0;font-size:11px;line-height:1.4;cursor:pointer}
.pg-style-sample{display:block;position:relative;width:112px;height:112px;margin:0 auto 11px;border-radius:50%;background:radial-gradient(circle,#d4cbb4 0 28%,transparent 29%),conic-gradient(#fff1,#fff4,#0005,#fff2,#fff1),var(--vinyl-color);box-shadow:0 6px 13px #0004;transition:box-shadow .2s,transform .2s}
.pg-style-sample img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}.pg-style-sample:has(img:not([hidden])){background:transparent}
.pg-vinyl-style:hover:enabled .pg-style-sample{transform:translateY(-3px)}.pg-vinyl-style[aria-pressed=true] .pg-style-sample{box-shadow:0 0 0 1px #b5e6a3,0 0 18px #91d77b33}.pg-vinyl-style[aria-pressed=true]{color:#c0ecad}.pg-vinyl-style:focus-visible{outline:2px solid #b5e6a3;outline-offset:5px;border-radius:8px}.pg-vinyl-style:disabled{cursor:wait;opacity:.65}
.pg-rail-arrow{flex:0 0 32px;width:32px;height:32px;min-height:0;padding:0;border:1px solid #bacab087;border-radius:50%;background:transparent;color:#e1eada;font-size:20px;cursor:pointer}.pg-rail-arrow:disabled{opacity:.3;cursor:default}
.pg-style-status{font-size:10px;line-height:1.5;min-height:15px;color:#899a81;margin:9px 0 0;text-align:center}
@media(max-width:1050px){.pg-vinyl-tray{margin-top:24px}.pg-vinyl-tray .pg-step{display:block}}
@media(max-width:650px){.pg-vinyl-tray{padding:18px 12px 12px;margin-top:20px}.pg-vinyl-heading{gap:8px}.pg-vinyl-heading h2{font-size:16px}.pg-vinyl-heading p{max-width:215px}.pg-style-rail{gap:5px}.pg-styles{gap:12px}.pg-vinyl-style{flex-basis:102px;font-size:10px}.pg-style-sample{width:88px;height:88px}.pg-rail-arrow{flex-basis:28px;width:28px;height:28px}}
@media(max-width:650px){body.playground-page>.playground{display:flex;flex-direction:column}.pg-layout{display:contents}.pg-vinyl-tray{order:1;width:100%;margin-bottom:16px}.pg-right{order:2}.pg-import{order:3}.pg-error{order:4}}

/* A local recording becomes a sleeve and a playable side, without leaving the browser. */
.pg-import {background:linear-gradient(145deg,#b4d99b06,transparent 65%);padding:25px 20px 20px}
.pg-import h2 {font-size:25px;line-height:1.13;letter-spacing:-.04em;margin:16px 0 9px}
.pg-import>p:not(.pg-file-status):not(.pg-local-note) {font-size:13px;line-height:1.5}
.pg-file-drop {position:relative;min-height:240px;padding:25px 10px 20px;gap:6px;margin:23px 0 24px;background:linear-gradient(145deg,#17271840,#06100630);transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.pg-file-drop:hover:not(:disabled),.pg-import.is-over .pg-file-drop {background:#a8de9310;box-shadow:inset 0 0 35px #a8de9308,0 0 20px #a8de9307}
.pg-import.is-over .pg-file-drop {transform:translateY(-3px);border-style:solid}
.pg-import.is-over .pg-file-drop::after {content:'Release to make your vinyl';position:absolute;inset:auto 5px 14px;background:#102513;color:#d8ffca;padding:12px 2px;border-radius:8px;font-size:12px}
.pg-upload-art {position:relative;display:grid;place-items:center;width:86px;height:86px;margin:5px 0 13px;color:#c5cebc}
.pg-upload-cloud {width:58px;height:58px;transition:transform .25s}
.pg-file-drop:hover .pg-upload-cloud {transform:translateY(-4px)}
.pg-upload-art img {width:82px;height:82px;object-fit:cover;border-radius:3px;box-shadow:0 6px 24px #0006;transform:rotate(-5deg)}
.pg-upload-art img:not([hidden])~.pg-upload-orbit {display:none}
.pg-upload-orbit {display:none;position:absolute;inset:-5px;border:1px solid #b4d99b20;border-top-color:#b4d99b;border-radius:50%;animation:pg-turn 2s linear infinite}
.pg-import.is-reading .pg-upload-orbit {display:block}
.pg-import[data-import-state="ready"] .pg-upload-cloud {display:none}
.pg-file-drop strong {font-size:13px;line-height:1.35;font-weight:500}
.pg-file-drop>span:not(.pg-upload-art) {font-size:11px;color:#b8c5b2}
.pg-file-drop small {font-size:10px;line-height:1.6;color:#99a493;margin-top:7px}
.pg-file-drop:disabled {cursor:progress;opacity:1}
.pg-import-promises {display:grid;gap:17px;padding:0;margin:0;list-style:none}
.pg-import-promises li {display:flex;align-items:center;gap:10px;color:#d4ddcf;font-size:11px;line-height:1.5}
.pg-import-promises svg {width:19px;height:19px;flex:0 0 19px;fill:none;stroke:#bac6b1;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg-import-progress {margin:20px 0 0;padding-top:17px;border-top:1px solid #c0d8ae20}
.pg-import-filename {font-size:11px;color:#dbe5d5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0 0 13px}
.pg-import-progress ol {list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pg-import-progress li {display:flex;align-items:center;gap:8px;font-size:11px;color:#7e8c77}
.pg-import-progress li>span {display:grid;place-items:center;width:18px;height:18px;border:1px solid #72876a50;border-radius:50%;font-size:9px;flex:0 0 18px}
.pg-import-progress li[data-state="active"] {color:#edf7e7}
.pg-import-progress li[data-state="active"]>span {border-color:#b8ed9b;box-shadow:0 0 9px #b4d99b30}
.pg-import-progress li[data-state="done"] {color:#b6d7a6}
.pg-import-progress li[data-state="done"]>span {background:#b4d99b16;border-color:#b4d99b40}
.pg-import .pg-file-status {margin:17px 0 0;font-size:11px;line-height:1.65;overflow-wrap:anywhere;color:#c1d6b5;min-height:0}
.pg-import .pg-file-status:empty {display:none}
.pg-import[data-import-state="error"] .pg-file-status {color:#e8bf9c}
.pg-import[data-import-state="error"] .pg-file-drop {border-color:#dfaa7355}
.pg-import-play {display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;margin:15px 0 0;padding:12px;border:1px solid #b4d99b55;border-radius:7px;background:#b4d99b12;color:#d8edca;font:inherit;font-size:12px;text-align:left;cursor:pointer}
.pg-import-play:hover {background:#b4d99b22}
.pg-import-play:focus-visible {outline:2px solid #b4d99b;outline-offset:3px}
.pg-import-play:disabled {opacity:.5;cursor:wait}
.pg-import .pg-local-note {font-size:9px;line-height:1.5;color:#92a08b;margin:18px 0 0}
.pg-import [hidden] {display:none!important}
.pg-album.is-preparing {opacity:.5}
@media(min-width:1650px){.pg-import {padding:28px 23px 22px}.pg-file-drop {min-height:265px}.pg-import-promises li {font-size:12px}}
@media(max-width:600px){.pg-import {padding:24px}.pg-file-drop {min-height:225px}.pg-import-promises li {font-size:12px}.pg-import h2 {font-size:28px}}
.pg-import-promises li,.pg-import-progress li {padding:0;border:0;border-radius:0;min-height:0;background:none}
/* Keep accessible controls clickable where the enlarged transparent stage overlaps. */
.pg-controls {position:relative;z-index:3}

/* Hero composition: the stage spans the viewport, independently of the side panels.
   Crop only the scene's empty canvas margins; its real size still drives hit testing. */
body.playground-page>.playground {
    --sleeve:clamp(132px,9vw,168px);
    display:grid;grid-template-columns:clamp(220px,13vw,300px) minmax(0,1fr) clamp(240px,14vw,320px);
    column-gap:28px;row-gap:0;width:100%;max-width:none;padding:18px 2.5vw 42px;
}
.pg-heading {grid-column:1/-1;grid-row:1;margin:0 0 22px}
.pg-heading h1 {font-size:clamp(28px,2.6vw,42px);margin:7px auto;line-height:1.1}
.pg-heading>span {font-size:9px}.pg-heading p {font-size:13px}
.pg-shelves {grid-column:2;grid-row:2;min-width:0;min-height:0;align-self:start;padding:3px 10px 12px;gap:24px;z-index:3}
.pg-album {flex-basis:var(--sleeve)}.pg-cover {width:var(--sleeve);height:var(--sleeve)}
.pg-album h2 {min-height:30px;font-size:11px;line-height:1.35;margin:8px 0 3px}
.pg-album .pg-artist {font-size:10px;line-height:1.3;margin-bottom:9px}
.pg-faces {gap:8px}.pg-face,.pg-face img {width:calc((var(--sleeve) - 8px)/2)}
.pg-face span {font-size:9px;line-height:1.3}
.pg-centre {grid-column:1/-1;grid-row:3;width:100%;min-width:0;position:relative;z-index:1}
.pg-deck {width:100%;margin:0;border-radius:0;overflow:clip}
[data-pg-deck-host] {display:flow-root}
.pg-deck .deck-stage {width:100%;max-width:none;margin:-8% 0 -9%;aspect-ratio:920/452}
.pg-now {font-size:13px;min-height:21px;line-height:1.5;margin:2px 0 0}
.pg-guide {padding:0;text-align:center;max-width:none;margin:6px auto 0}
.pg-guide .pg-step {display:none}.pg-guide p {font:400 15px/1.5 system-ui,sans-serif;display:inline;margin:0 10px 0 0;color:#d2dec8}
.pg-guide small {font-size:11px;display:inline}.pg-guide.is-learned {opacity:.65}
.pg-controls {position:relative;z-index:3;margin:3px auto 0;font-size:11px}
.pg-controls summary {padding:8px 12px}.pg-controls[open] {margin-top:10px}
.pg-import {grid-column:1;grid-row:2/4;align-self:start;justify-self:stretch;margin:5px 0 0;width:100%;max-width:none;padding:23px 20px 19px}
.pg-import h2 {font-size:25px}.pg-file-drop {min-height:215px;padding:18px 9px;margin:20px 0}
.pg-upload-art {margin:0 0 8px}.pg-file-drop small {margin-top:3px}
.pg-import-promises {gap:12px}.pg-import-promises li {font-size:11px}
.pg-right {grid-column:3;grid-row:2/4;align-self:start;padding:5px 0 0;width:100%}
.pg-deck-choices {padding:23px 16px 17px}.pg-deck-choices h2 {font-size:24px;margin:12px 0 19px}
.pg-preset {min-height:76px;margin-top:8px}.pg-preset strong {font-size:12px}.pg-preset small {font-size:10px}
.pg-vinyl-tray {grid-column:1/-1;grid-row:4;width:min(82vw,1600px);max-width:none;justify-self:center;margin:18px 0 0;padding:18px 22px 12px}
.pg-vinyl-heading h2 {font-size:16px}.pg-style-rail {margin-top:8px}.pg-style-sample {width:clamp(88px,7vw,116px);height:clamp(88px,7vw,116px)}
.pg-vinyl-style {flex:1 0 112px;max-width:165px}.pg-error {grid-column:1/-1;grid-row:5}

/* Supporting tools move out of the stage's way before the deck has to shrink. */
@media(max-width:1600px){
    body.playground-page>.playground {grid-template-columns:1fr 1fr;column-gap:24px;padding:18px 2vw 36px;--sleeve:144px}
    .pg-shelves {grid-column:1/-1;grid-row:2;padding-bottom:6px}
    .pg-centre {grid-row:3}.pg-vinyl-tray {grid-row:4;width:100%;margin:16px 0 26px}
    .pg-import {grid-column:1;grid-row:5;max-width:580px;justify-self:end;margin:0;padding:23px;width:100%}
    .pg-right {grid-column:2;grid-row:5;max-width:580px;justify-self:start;padding:0}
    .pg-right [data-pg-presets] {display:grid;grid-template-columns:1fr 1fr;gap:9px}
    .pg-deck-choices {padding:23px}.pg-deck-choices h2 br {display:none}.pg-preset {margin:0;min-height:96px}
    .pg-file-drop {min-height:200px}.pg-error {grid-row:6}
}
@media(max-width:1050px){
    body.playground-page>.playground {--sleeve:132px;padding:16px 18px 32px}
    .pg-heading {margin-bottom:18px}.pg-step {display:block}.pg-heading h1 {font-size:32px}
    .pg-deck .deck-stage {width:112%;margin:-9% -6% -10%}
    .pg-right [data-pg-presets] {grid-template-columns:1fr}.pg-preset {min-height:76px}
    .pg-import {padding:23px}.pg-import-promises li {font-size:12px}
    .pg-vinyl-style {flex:0 0 112px}
}
@media(max-width:650px){
    body.playground-page>.playground {display:grid;grid-template-columns:minmax(0,1fr);padding:16px 0 30px;--sleeve:124px}
    .pg-heading {grid-column:1;padding:0 16px;margin-bottom:17px}.pg-heading>span {font-size:8px}
    .pg-heading h1 {font-size:29px;letter-spacing:-1.2px}.pg-heading p {font-size:11px}
    .pg-shelves {grid-column:1;gap:20px;padding:3px 18px 8px}.pg-album h2 {font-size:10px;min-height:28px}.pg-album .pg-artist {font-size:9px}
    .pg-centre {grid-column:1}.pg-deck .deck-stage {width:120%;margin:-9% -10% -11%}
    .pg-now {font-size:11px;padding:0 18px;margin-top:5px}.pg-guide {padding:0 18px;margin-top:7px}
    .pg-guide p {display:block;font-size:13px;margin:0}.pg-guide small {display:block;font-size:10px;margin-top:2px}
    .pg-controls {width:calc(100% - 28px);font-size:10px}.pg-controls summary {min-height:38px;padding:10px 12px}
    .pg-vinyl-tray {grid-column:1;grid-row:4;width:calc(100% - 28px);padding:16px 10px 10px;margin:12px 0 20px}
    .pg-vinyl-heading {gap:8px}.pg-vinyl-heading h2 {font-size:15px}.pg-style-sample {width:88px;height:88px}
    .pg-vinyl-style {flex:0 0 102px}.pg-style-rail {gap:5px}
    .pg-import {grid-column:1;grid-row:5;justify-self:center;width:calc(100% - 28px);max-width:520px;padding:23px}
    .pg-right {grid-column:1;grid-row:6;justify-self:center;width:calc(100% - 28px);max-width:520px;margin:20px 0 0}
    .pg-deck-choices {border:1px solid #c0d8ae22;padding:23px}.pg-right [data-pg-presets] {grid-template-columns:1fr 1fr}
    .pg-preset {min-height:82px}.pg-preset strong {font-size:11px}.pg-preset small {font-size:9px}
    .pg-deck-choices h2 {font-size:24px;margin:12px 0 19px}.pg-error {grid-column:1;grid-row:7}
}

/* Keep every import state behind the cabinet, just like the deck picker.
   The scene passes pointer events through its transparent, non-control areas. */
.pg-import {z-index:0;border:0;background:none;padding:30px 28px 32px;isolation:isolate}
.pg-import::before {content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border:1px solid #b7df9d70;border-radius:17px;background:radial-gradient(ellipse at 15% 0%,#6ea44d26,transparent 64%),linear-gradient(145deg,#14241ae8,#0a160de8);box-shadow:inset 0 1px 0 #dcffc014,0 0 70px #80ce5819,0 22px 70px #0004;transition:border-color .25s,box-shadow .25s}
.pg-import>* {position:relative;z-index:2}
/* Progress/result replaces the introduction instead of growing over the deck.
   Once ready, the cover, result and placement button are the useful content. */
.pg-import:not([data-import-state="idle"]) .pg-import-promises {display:none}
.pg-import[data-import-state="ready"] .pg-import-progress {display:none}
.pg-import:focus-within::before,.pg-import.is-over::before {border-color:#c3f7a4b3;box-shadow:inset 0 1px 0 #dcffc026,0 0 85px #80ce5830,0 22px 70px #0004}
.pg-import>.pg-step {display:block;font-size:10px;font-weight:500;letter-spacing:.24em;line-height:1.6;color:#e3eedc}
.pg-import h2 {font-size:clamp(32px,1.65vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.045em;color:#faf9f0;margin:18px 0 13px}
.pg-import>p:not(.pg-file-status):not(.pg-local-note) {font-size:clamp(15px,.82vw,20px);line-height:1.55;color:#f1f2e9}
.pg-import .pg-file-drop {min-height:clamp(235px,11vw,320px);margin:26px 0 25px;padding:26px 14px;gap:8px;border-color:#c0dca176;border-radius:13px;background:radial-gradient(ellipse at 50% 42%,#82b75b14,transparent 72%),#06110b40;box-shadow:inset 0 0 45px #a9d67f08}
.pg-import .pg-file-drop:hover:not(:disabled),.pg-import.is-over .pg-file-drop {border-color:#d5f8b9;background:#a8de9314;box-shadow:inset 0 0 55px #a8de9312,0 0 30px #a8de9320}
.pg-import .pg-upload-art {width:90px;height:90px;margin:0 0 12px;color:#e0e8d3}
.pg-import .pg-upload-cloud {width:64px;height:64px;filter:drop-shadow(0 0 14px #c6f4a52e)}
.pg-import .pg-file-drop strong {font-size:clamp(16px,.87vw,22px);font-weight:500;color:#fbfcf4}
.pg-import .pg-file-drop>span:not(.pg-upload-art) {font-size:clamp(12px,.64vw,16px);margin:0 0 4px;color:#cddbc2}
.pg-import .pg-file-drop small {font-size:clamp(12px,.64vw,16px);line-height:1.6;color:#b6c4ac}
.pg-import .pg-import-promises {gap:18px}
.pg-import .pg-import-promises li {font-size:clamp(13px,.72vw,18px);line-height:1.5;gap:12px;color:#f0f3e9}
.pg-import .pg-import-promises svg {width:25px;height:25px;flex-basis:25px;padding:3px;stroke:#eff5e3;background:#d5edbd19;border-radius:50%}
.pg-import .pg-local-note {font-size:clamp(10px,.55vw,13px);color:#b3c3a7;margin:20px 0 0}
.pg-import .pg-file-status,.pg-import .pg-import-filename,.pg-import .pg-import-progress li {font-size:13px}
.pg-import .pg-import-play {font-size:15px;padding:15px;background:#abd78b20}
@media(min-width:1601px){
    .pg-import {width:clamp(300px,14.7vw,450px);margin-top:12px;padding:clamp(26px,1.3vw,36px) clamp(22px,1.2vw,34px) 42px}
}
@media(max-width:650px){
    .pg-import {padding:28px 24px 30px}
    .pg-import h2 {font-size:34px}.pg-import .pg-file-drop {min-height:260px}
}

/* Deck choices share the recording card's light, scale and place in the room. */
/* Keep the whole picker behind the cabinet, including its raised choice cards. */
.pg-right {z-index:0;isolation:isolate}
/* The full-width scene includes empty space above the lower picker cards. */
.pg-centre {pointer-events:none}
.pg-centre .deck-stage button,.pg-centre .pg-controls {pointer-events:auto}
.pg-deck-choices {position:relative;isolation:auto;border:0;background:none;padding:30px 22px 38px}
.pg-deck-choices::before {content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border:1px solid #b7df9d70;border-radius:17px;background:radial-gradient(ellipse at 85% 0%,#6ea44d26,transparent 64%),linear-gradient(215deg,#14241ae8,#0a160de8);box-shadow:inset 0 1px 0 #dcffc014,0 0 70px #80ce5819,0 22px 70px #0004}
.pg-deck-choices>* {position:relative;z-index:2}
.pg-deck-choices>.pg-step {display:block;font-size:10px;font-weight:500;letter-spacing:.24em;line-height:1.6;color:#e3eedc}
.pg-deck-choices h2 {font-size:clamp(32px,1.65vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.045em;color:#faf9f0;margin:18px 0 27px}
.pg-deck-choices h2 br {display:block}
.pg-right [data-pg-presets] {display:grid;grid-template-columns:minmax(0,1fr);gap:13px}
.pg-deck-browse {display:flex;align-items:center;gap:8px;margin:-12px 0 17px;color:#c1d2b5;font-size:12px}
.pg-deck-browse>span {flex:1}
.pg-deck-browse button {display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;min-height:38px;padding:0;border:1px solid #b8df9d8c;border-radius:50%;background:#101e14;color:#edf7e5;font-size:21px;cursor:pointer;transition:background .2s,box-shadow .2s,opacity .2s}
.pg-deck-browse button:hover:not(:disabled) {background:#284c2a;box-shadow:0 0 16px #a6ed7833}
.pg-deck-browse button:disabled {opacity:.28;cursor:default}
.pg-deck-scroll {height:507px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a9d39165 transparent;padding:10px;margin:-10px;scroll-padding:10px;border-radius:12px}
.pg-deck-scroll:focus-visible,.pg-deck-browse button:focus-visible {outline:2px solid #defbc9;outline-offset:3px}
.pg-right .pg-preset {position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:13px;width:100%;min-height:112px;margin:0;padding:7px;border:1px solid #c1d5b51b;border-radius:12px;background:linear-gradient(125deg,#101d13,#0a130df5);color:#faf9f0;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.pg-preset-preview {position:relative;display:grid;place-items:center;align-self:center;min-width:0;aspect-ratio:1.55;overflow:hidden;border:1px solid #bdcdb326;border-radius:8px;background:radial-gradient(ellipse at 50% 45%,#1b291b,#060d08 82%);box-shadow:inset 0 1px 0 #e8ffda08}
.pg-preset .pg-preset-preview img {position:absolute;left:50%;top:50%;display:block;width:116%;max-width:none;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;pointer-events:none;filter:drop-shadow(0 5px 6px #0008);transform:translate(-50%,-67%);transition:transform .25s}
.pg-preset-copy {min-width:0;padding:9px 4px 9px 0}
.pg-right .pg-preset strong {font-size:clamp(14px,.67vw,18px);font-weight:550;line-height:1.3;letter-spacing:-.025em;color:#fafbf3}
.pg-right .pg-preset small {font-size:clamp(12px,.55vw,15px);line-height:1.45;margin-top:7px;color:#b6c5ae}
.pg-right .pg-preset:hover {border-color:#c4eca47a;background:#142419;box-shadow:0 0 22px #9fe57814}
.pg-preset:hover .pg-preset-preview img {transform:translate(-50%,-67%) scale(1.045)}
.pg-right .pg-preset[aria-pressed=true] {border-color:#baf79ede;background:linear-gradient(125deg,#abd78b1c,#18301755),#142218;box-shadow:0 0 0 1px #b5f08a35,0 0 24px #9de97438,inset 0 0 24px #b8ef9610}
.pg-preset[aria-pressed=true] .pg-preset-preview {border-color:#aee89480;background:radial-gradient(ellipse at 50% 40%,#a6d78124,#071109aa 82%)}
.pg-preset-check {position:absolute;right:7px;top:7px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#bae99d;color:#142610;font:600 10px/1 system-ui,sans-serif;opacity:0}
.pg-preset[aria-pressed=true] .pg-preset-check {opacity:1}
.pg-right .pg-preset:focus-visible {outline:2px solid #defbc9;outline-offset:4px}
@media(min-width:1601px){
    .pg-right {width:clamp(320px,14.7vw,450px);justify-self:end;margin-right:-1.25vw;padding-top:12px}
    .pg-deck-choices {padding:clamp(26px,1.3vw,36px) clamp(20px,1.05vw,30px) 46px}
    .pg-right .pg-preset {min-height:clamp(96px,4.7vw,130px)}
}
@media(min-width:1051px) and (max-width:1600px){
    .pg-right [data-pg-presets] {grid-template-columns:repeat(2,minmax(0,1fr))}
    .pg-right .pg-preset {grid-template-columns:minmax(0,1fr);gap:1px}
    .pg-preset-copy {padding:10px 9px 12px}
    .pg-preset-preview {aspect-ratio:1.65}
}
@media(max-width:1050px){
    .pg-deck-choices {padding:28px 22px 30px}
    .pg-deck-choices h2 {font-size:32px}
    .pg-right .pg-preset {gap:10px;min-height:108px}
}
@media(max-width:650px){
    .pg-right [data-pg-presets] {grid-template-columns:minmax(0,1fr)}
    .pg-deck-choices {padding:28px 20px 30px}
    .pg-deck-choices h2 {font-size:34px}
    .pg-right .pg-preset {min-height:112px}
    .pg-right .pg-preset strong {font-size:15px}
    .pg-right .pg-preset small {font-size:12px}
}

/* An invitation to pick a record, with the same presence as the real deck. */
body.playground-page>.playground {--sleeve:clamp(190px,12vw,280px)}
.pg-heading {margin-bottom:18px}
.pg-heading>span {font-size:10px;letter-spacing:.25em;color:#e3eedc}
.pg-heading h1 {font-size:clamp(34px,2.6vw,52px);letter-spacing:-.045em;margin:10px auto}
.pg-heading p {font-size:clamp(15px,1vw,19px);line-height:1.5;color:#f1f4e9}
.pg-record-rail {grid-column:2;grid-row:2;display:flex;align-items:start;gap:10px;min-width:0;width:100%;max-width:calc(var(--sleeve)*5 + clamp(22px,1.4vw,36px)*4 + 136px);justify-self:center;position:relative;z-index:0}
/* Reserve the arrow gutters even when everything fits: adding a recording only
   grows the scrollable contents, never the visible shelf or its neighbours. */
.pg-record-rail>[hidden] {display:block!important;visibility:hidden;pointer-events:none}
.pg-record-rail .pg-shelves {flex:1;min-width:0;width:100%;padding:18px 18px 26px;gap:clamp(22px,1.4vw,36px);scroll-snap-type:x proximity;scrollbar-width:none}
.pg-record-rail .pg-shelves::-webkit-scrollbar {display:none}
.pg-record-arrow {width:40px;height:40px;flex-basis:40px;margin-top:calc(var(--sleeve)/2 - 2px);font-size:25px;border-color:#d7e7c9b3;background:#0a160dcc;color:#f4faed;box-shadow:0 0 20px #9bdf6412;transition:border-color .2s,background .2s}
.pg-record-arrow:hover:enabled {background:#a3dc8526;border-color:#caf6b0}
.pg-record-arrow:focus-visible {outline:2px solid #defbc9;outline-offset:4px}
.pg-album {scroll-snap-align:center;position:relative;--face-caption:clamp(12px,.7vw,16px)}
.pg-album {--record-scale:1}
.pg-album .pg-cover {width:calc(var(--sleeve)*var(--record-scale));height:calc(var(--sleeve)*var(--record-scale));margin-inline:auto;margin-top:calc(var(--sleeve)*(1 - var(--record-scale)))}
.pg-cover {border-radius:5px;cursor:pointer;box-shadow:0 10px 24px #0008,0 0 0 1px #d4e0c624;transition:transform .25s,box-shadow .25s}
.pg-cover img {border-radius:5px}
.pg-cover:hover:enabled {transform:translateY(-4px) scale(1.02);box-shadow:0 14px 28px #0008,0 0 0 1px #ceeab580,0 0 26px #a4e07e29}
.pg-cover[aria-pressed=true],.pg-cover[aria-pressed=true]:hover:enabled {box-shadow:0 0 0 2px #baf79edb,0 0 10px #c6ffac6b,0 0 32px #8bdd7050,0 12px 28px #0009}
.pg-cover:focus-visible {outline:2px solid #efffe0;outline-offset:7px}
/* Fixed metadata slots keep long imported titles/credits from moving the deck.
   The complete strings remain in the DOM and native hover titles. */
.pg-album h2 {font-size:clamp(15px,.85vw,20px);font-weight:550;line-height:1.3;letter-spacing:-.02em;height:2.6em;min-height:0;margin:14px 0 4px;color:#fafbf3;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pg-album .pg-artist {font-size:clamp(12px,.65vw,16px);line-height:1.4;height:1.4em;color:#b8c6ae;margin:0 0 16px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
/* Every sleeve reserves the full-size side row, including single-sided imports. */
.pg-faces {gap:10px;flex-wrap:nowrap;align-items:start;height:calc((var(--sleeve) - 10px)/2 + 8px + var(--face-caption)*1.4)}
.pg-faces[hidden] {display:flex!important;visibility:hidden;pointer-events:none}
.pg-face,.pg-face img {width:calc((var(--sleeve) - 10px)/2)}
.pg-album .pg-face {width:max(44px,calc((var(--sleeve) - 10px)/2*var(--record-scale)));flex-shrink:0}
.pg-album .pg-face img {width:100%}
.pg-face img {height:auto;aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 5px 7px #0009);transition:filter .2s,transform .2s}
.pg-face:not(.is-on-deck):hover img {transform:translateY(-3px);filter:drop-shadow(0 0 9px #b6f69366) drop-shadow(0 5px 7px #0009)}
.pg-face:focus-visible {outline:2px solid #defbc9;outline-offset:5px}
.pg-face span {font-size:var(--face-caption);line-height:1.4;font-weight:500;color:#f0f5e8;letter-spacing:.025em;margin-top:8px}
/* Use the rail's existing lower gutter instead of adding another card row. */
.pg-remove {position:absolute;top:100%;inset-inline:0;width:100%;height:24px;min-height:24px;margin:2px 0 0;padding:0;font-size:11px!important;line-height:1.5;white-space:nowrap}
/* Set the tools just below the sleeve tops. Their lit surfaces tuck behind the
   cabinet; controls keep their existing higher layer and remain reachable. */
@media(min-width:1601px){
    body.playground-page>.playground {grid-template-columns:clamp(300px,14.7vw,450px) minmax(0,1fr) clamp(320px,14.7vw,450px)}
    .pg-import {margin-top:calc(18px + clamp(24px,2vw,60px))}
    .pg-right {padding-top:calc(18px + clamp(24px,2vw,60px));margin-right:0}
    .pg-import::before,.pg-deck-choices::before {bottom:-24px}
}
@media(max-width:1600px){
    body.playground-page>.playground {--sleeve:clamp(180px,17vw,240px)}
    .pg-record-rail {grid-column:1/-1}
}
@media(max-width:650px){
    body.playground-page>.playground {--sleeve:clamp(144px,39vw,190px)}
    .pg-heading {margin:2px 0 12px}
    .pg-heading>span {font-size:8px;letter-spacing:.19em}
    .pg-heading h1 {font-size:34px;line-height:1.08;max-width:340px}
    .pg-heading p {font-size:14px;max-width:280px;margin:0 auto}
    .pg-record-rail {gap:5px}
    .pg-record-rail .pg-shelves {padding:16px 14px 26px;gap:20px}
    .pg-record-arrow {width:30px;height:30px;flex-basis:30px;font-size:20px;margin-top:calc(var(--sleeve)/2 + 1px)}
    .pg-album h2 {font-size:14px;margin-top:12px}
    .pg-album .pg-artist {font-size:12px;margin-bottom:13px}
    .pg-face span {font-size:12px}
}

/* A tray of real vinyl, lit as part of the same room as the two side panels. */
.pg-vinyl-tray {
    --vinyl-sample:clamp(108px,6.5vw,156px);
    width:min(94vw,1900px);margin-top:24px;padding:28px 32px 22px;
    border:1px solid #b7df9d60;border-radius:17px;
    background:radial-gradient(ellipse at 50% 0%,#79b65322,transparent 72%),linear-gradient(150deg,#14241ae8,#09130de8);
    box-shadow:inset 0 1px 0 #dcffc014,0 0 70px #80ce5816,0 20px 65px #0003;
}
.pg-vinyl-heading .pg-step {display:block;font-size:10px;font-weight:500;letter-spacing:.24em;line-height:1.6;color:#e3eedc}
.pg-vinyl-heading h2 {font-size:clamp(24px,1.3vw,34px);font-weight:600;line-height:1.15;letter-spacing:-.04em;color:#faf9f0;margin:12px 0 7px}
.pg-vinyl-heading p {font-size:clamp(12px,.65vw,15px);line-height:1.5;color:#b8c6ae;max-width:none}
.pg-vinyl-heading .pg-text-button {font-size:13px;color:#d0e2c4;padding:8px 11px;border:1px solid #b7df9d40;border-radius:18px;margin:4px 0 0;white-space:normal}
.pg-vinyl-heading .pg-text-button:focus-visible {outline:2px solid #defbc9;outline-offset:4px}
.pg-style-rail {gap:16px;margin-top:12px}
.pg-styles {gap:20px;padding:20px 14px 14px}
.pg-vinyl-style {flex:0 0 calc(var(--vinyl-sample) + 24px);max-width:none;font-size:clamp(13px,.7vw,17px);font-weight:500;line-height:1.35;color:#e4ebdd;padding:0 4px}
.pg-style-sample {width:var(--vinyl-sample);height:var(--vinyl-sample);margin-bottom:16px;box-shadow:0 7px 16px #0008;transition:box-shadow .2s,transform .2s}
.pg-vinyl-style:hover:enabled .pg-style-sample {transform:translateY(-4px);box-shadow:0 0 0 1px #ceeab566,0 0 24px #a4e07e26,0 10px 20px #0008}
.pg-vinyl-style[aria-pressed=true] .pg-style-sample {box-shadow:0 0 0 2px #baf79edb,0 0 10px #c6ffac55,0 0 30px #8bdd7050,0 8px 20px #0008}
.pg-vinyl-style[aria-pressed=true] {color:#d8ffc0}
.pg-style-rail .pg-rail-arrow {width:40px;height:40px;flex-basis:40px;font-size:25px;border-color:#d7e7c9b3;color:#f4faed;background:#0a160dcc}
.pg-style-rail .pg-rail-arrow:hover:enabled {background:#a3dc8526;border-color:#caf6b0}
.pg-style-rail .pg-rail-arrow:focus-visible {outline:2px solid #defbc9;outline-offset:4px}
.pg-style-status {font-size:12px;line-height:1.5;color:#b3c3a7;margin-top:13px}
@media(max-width:1600px){.pg-vinyl-tray {width:100%;margin:20px 0 28px}}
@media(max-width:650px){
    .pg-vinyl-tray {--vinyl-sample:96px;width:calc(100% - 28px);padding:24px 12px 18px;margin:18px 0 24px}
    .pg-vinyl-heading {gap:12px}.pg-vinyl-heading h2 {font-size:26px}
    .pg-vinyl-heading .pg-text-button {font-size:12px;max-width:92px}
    .pg-style-rail {gap:5px;margin-top:8px}.pg-styles {gap:12px;padding:18px 10px 12px}
    .pg-style-rail .pg-rail-arrow {width:30px;height:30px;flex-basis:30px;font-size:20px}
    .pg-style-status {font-size:11px}.pg-style-sample {margin-bottom:12px}
}

/* Keep the record and finishes together. Guidance lives inside the optional
   controls; the full-size deck moves into the spare space below the sleeves. */
.pg-controls {margin-top:0}
.pg-cue-colour {display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0;color:#b8c6ae;font-size:12px}
.pg-cue-colour select {font:inherit;color:#edf5e5;background:#142019;border:1px solid #b7df9d60;border-radius:6px;padding:7px 10px}
.pg-controls[open] .pg-now {margin-top:4px}
.pg-controls[open] .pg-guide {margin:6px 12px 14px}
@media(min-width:1051px){
    .pg-centre {margin-top:clamp(-64px,-2.5vw,-28px)}
    .pg-vinyl-tray {margin-top:12px;padding-top:18px;padding-bottom:16px}
    .pg-vinyl-heading h2 {margin:8px 0 5px}
    .pg-style-rail {margin-top:4px}
    .pg-styles {padding-top:12px;padding-bottom:10px}
    .pg-style-status {margin-top:8px}
}

/* One continuous rail, with each collection labelled from its first finish to
   its last. The extra line uses existing tray headroom, keeping the deck large. */
.pg-styles {justify-content:flex-start;align-items:stretch;gap:30px;padding-top:4px;scrollbar-width:none}
.pg-styles::-webkit-scrollbar {display:none}
.pg-vinyl-collection {flex:0 0 auto;min-width:0;margin:0;padding:0;border:0;background:none;scroll-snap-align:start;scroll-margin-inline:14px}
.pg-vinyl-collection h3 {display:flex;align-items:center;gap:16px;margin:0 4px 12px;color:#cfdfc3;font-size:12px;font-weight:500;line-height:18px;letter-spacing:.12em;white-space:nowrap}
.pg-vinyl-collection h3::before,.pg-vinyl-collection h3::after {content:'';height:1px;flex:1;min-width:16px;background:linear-gradient(90deg,#b7df9d20,#b7df9d80)}
.pg-vinyl-collection h3::after {transform:scaleX(-1)}
.pg-vinyl-collection h3 span {position:sticky;left:12px;right:12px;z-index:1;flex:0 0 auto;padding:0 8px;background:#112015}
.pg-collection-finishes {display:flex;align-items:start;gap:20px}
.pg-style-rail .pg-rail-arrow {margin-top:30px}
@media(max-width:650px){
    .pg-styles {gap:24px;padding-top:8px}
    .pg-collection-finishes {gap:12px}
    .pg-vinyl-collection h3 {font-size:11px;letter-spacing:.07em;gap:12px;margin-bottom:12px}
}

/* The grooved surface turns; the label remains the record's lifting grip. */
.pg-disc-scrub {position:absolute;z-index:9;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent!important;padding:0;min-height:0;touch-action:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 32 36'%3E%3Cpath d='M13 4c-3 0-5 2-5 5v10c0 2 3 2 3 0v-2 5c0 2 3 2 3 0v-3 5c0 2 3 2 3 0v-5 13c0 3 4 3 4 0V17l3-5c1-3-2-4-4-1l-1 1V9c0-3-2-5-6-5Z' fill='%23f4f5ed' stroke='%23111c19' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 19 33,pointer}
.pg-disc-scrub:focus-visible {outline:2px solid #d5ecc466;outline-offset:3px}
.pg-disc-scrub[aria-pressed=true] {cursor:grabbing}

/* One workbench beneath the deck: appearance, familiar playback, hands-on help. */
.pg-workbench {position:relative;z-index:3;padding-top:0!important;overflow:hidden}
.pg-tabs {display:flex;align-items:stretch;gap:clamp(8px,2vw,32px);border-bottom:1px solid #b8db9e30;margin:0 -2px 18px}
.pg-tabs [role=tab] {position:relative;display:flex;align-items:center;justify-content:center;gap:11px;flex:1;min-width:0;min-height:64px;margin:0;padding:16px 8px;border:0;border-radius:0;background:transparent;color:#b5c4ac;font:inherit;font-size:clamp(14px,1vw,20px);font-weight:550;line-height:1.25;cursor:pointer;transition:color .18s,background .18s}
.pg-tabs [role=tab] svg {width:23px;height:23px;flex:0 0 23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.pg-tabs [role=tab]::after {content:'';position:absolute;inset:auto 8px -1px;height:2px;background:transparent;border-radius:3px}
.pg-tabs [role=tab][aria-selected=true] {color:#e1ffca;background:radial-gradient(ellipse at 50% 100%,#a4ee7b18,transparent 75%)}
.pg-tabs [role=tab][aria-selected=true]::after {background:#bbef9e;box-shadow:0 0 14px #a7ee7b80}
.pg-tabs [role=tab]:hover {color:#f2ffe8;background-color:#b2ef8a08}
.pg-tabs [role=tab]:focus-visible,.pg-tab-panel:focus-visible {outline:2px solid #c8f6ac;outline-offset:-4px;border-radius:7px}
.pg-tab-panel[hidden] {display:none!important}
.pg-tab-panel {min-width:0;min-height:220px}
.pg-workbench .pg-vinyl-heading {align-items:center}
.pg-workbench .pg-vinyl-heading .pg-step {color:#bdd3ae}
.pg-workbench .pg-vinyl-heading p {margin:7px 0 0}
.pg-traditional-layout {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;max-width:1040px;min-height:250px;margin:0 auto;gap:36px}
.pg-workbench .pg-controls {position:static;width:100%;max-width:620px;margin:0 auto;padding:8px 0 12px;text-align:center;color:#cad8bd;font-size:14px}
.pg-controls h2 {font-size:clamp(24px,1.8vw,32px);line-height:1.15;letter-spacing:-.04em;color:#faf9ef;margin:10px 0}
.pg-workbench .pg-now {max-width:none;margin:8px 0 18px;font-size:14px;line-height:1.5;color:#c4d2b9}
.pg-workbench .pg-controls .transport {gap:18px!important;margin:16px 0!important}
.pg-workbench .pg-controls .icon-button {width:48px;height:48px;min-width:48px;min-height:48px}
.pg-workbench .pg-controls .primary-button {width:58px;height:58px;border-color:#bbeaa1;box-shadow:0 0 20px #a3e78120}
.pg-workbench .pg-controls .scrubber {width:100%;max-width:480px;gap:12px;margin:0 auto 12px;font-size:12px}
.pg-workbench .pg-controls .scrubber input {min-width:0;min-height:32px}
.pg-workbench .pg-controls .pg-text-button {font-size:13px;padding:9px 14px;border:1px solid #bdd5a83d;border-radius:24px;color:#d4e6c4}
.pg-workbench .pg-controls .pg-text-button:disabled {opacity:.45;cursor:default}
.pg-controls-note {border-left:1px solid #b8db9e30;padding:18px 0 18px 36px}
.pg-workbench .pg-guide {max-width:none;padding:0;margin:0;text-align:left}
.pg-workbench .pg-guide p {font-family:inherit;font-size:21px;line-height:1.3;letter-spacing:-.03em;color:#f0f4e8;margin:12px 0 8px}
.pg-workbench .pg-guide small {display:block;font-size:13px;line-height:1.6;color:#bdccb2}
.pg-workbench .pg-cue-colour {justify-content:flex-start;margin:20px 0 0;font-size:13px}
.pg-gesture-heading {display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:8px}
.pg-gesture-heading p {font-size:14px;color:#c2d2b6;margin:0;line-height:1.5}
.pg-gestures {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.pg-gesture {min-width:0;margin:0;padding:0 14px 12px;border:0;border-right:1px solid #bbdd9c20;background:none;box-shadow:none}
.pg-gesture:last-child {border-right:0}
.pg-gesture-art {display:block;width:100%;max-width:280px;height:auto;margin:0 auto 6px;overflow:visible}
.pg-gesture-arrow {fill:none;stroke:#bcf29a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg-gesture h3 {font-size:clamp(18px,1.2vw,23px);line-height:1.2;letter-spacing:-.03em;margin:0 0 10px;color:#f7f9ed;font-weight:600}
.pg-gesture p {font-size:14px;line-height:1.6;color:#d2ddc9;margin:0 0 8px}
.pg-gesture small {display:block;font-size:12px;line-height:1.5;color:#a6ba9a}
.pg-gesture-footnote {font-size:12px;line-height:1.6;color:#b2c5a5;border-top:1px solid #bbdd9c20;margin:10px 0 0;padding-top:12px;text-align:center}
@media(max-width:1000px){
    .pg-gestures {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
    .pg-gesture:nth-child(2) {border-right:0}.pg-gesture-art {max-width:230px}
    .pg-traditional-layout {gap:24px}.pg-controls-note {padding-left:24px}
}
@media(max-width:650px){
    .pg-tabs {gap:0;margin-bottom:18px}.pg-tabs [role=tab] {flex-direction:column;gap:8px;min-height:87px;padding:12px 5px;font-size:13px;line-height:1.3}
    .pg-tabs [role=tab] svg {width:21px;height:21px;flex-basis:21px}.pg-tabs [role=tab]::after {left:4px;right:4px}
    .pg-tab-panel {min-height:200px}.pg-traditional-layout {grid-template-columns:1fr;gap:18px}
    .pg-controls-note {border-left:0;border-top:1px solid #b8db9e30;padding:20px 4px 4px}
    .pg-workbench .pg-controls .transport {gap:12px!important}.pg-workbench .pg-controls .scrubber {gap:7px}
    .pg-gesture-heading {display:block}.pg-gesture-heading p {margin-top:8px;font-size:13px}
    .pg-gestures {grid-template-columns:1fr;gap:8px}.pg-gesture {border-right:0;border-bottom:1px solid #bbdd9c20;padding:6px 6px 20px}
    .pg-gesture:last-child {border-bottom:0}.pg-gesture-art {max-width:250px}.pg-gesture h3 {font-size:23px}
    .pg-gesture-footnote {margin-top:0;text-align:left}
}

/* Quiet guidance, lit like the cards around the deck. Never intercept a gesture. */
.pg-deck-hint {position:fixed;z-index:100;pointer-events:none;width:min(280px,calc(100vw - 24px));padding:18px 20px;border:1px solid #b7df9d70;border-radius:15px;background:radial-gradient(ellipse at 90% 0%,#78b85829,transparent 70%),linear-gradient(145deg,#15271bf5,#09160ef5);box-shadow:inset 0 1px 0 #dcffc018,0 0 30px #80ce5824,0 12px 32px #0005;backdrop-filter:blur(10px);color:#edf4e6;opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}
.pg-deck-hint.is-visible {opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.pg-deck-hint strong {display:block;font-size:19px;line-height:1.15;font-weight:600;letter-spacing:-.025em;color:#f5faee;margin-bottom:8px}
.pg-deck-hint span {display:block;font-size:13px;line-height:1.5;color:#d6e3ce}
.pg-deck-hint small {display:block;margin-top:11px;padding-top:9px;border-top:1px solid #b7df9d30;font-size:11px;line-height:1.4;color:#b8cfa7}
@media(prefers-reduced-motion:reduce){.pg-deck-hint {transition:none;transform:none}}

.pg-folder-button {display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin:-10px 0 23px;padding:10px 14px;border:1px solid #b7df9d45;border-radius:9px;background:#aad88c0c;color:#d9eacb;font:inherit;font-size:14px;cursor:pointer}
.pg-folder-button:hover {background:#aad88c20;border-color:#b7df9d99}.pg-folder-button:focus-visible {outline:2px solid #b7df9d;outline-offset:3px}.pg-folder-button:disabled {opacity:.5;cursor:wait}

/* Only the sleeve turns. Its footprint, record sides and deck stay still. */
.pg-cover {perspective:1100px}
.pg-sleeve-turn {display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.pg-cover .pg-sleeve-front,.pg-cover .pg-sleeve-back {position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pg-cover .pg-sleeve-back {transform:rotateY(180deg)}
@media(hover:hover){.pg-cover.has-rear:hover .pg-sleeve-turn {transform:rotateY(180deg)}}
.pg-cover.has-rear:focus-visible .pg-sleeve-turn,.pg-cover.has-rear.show-rear .pg-sleeve-turn {transform:rotateY(180deg)}
@media(prefers-reduced-motion:reduce){.pg-sleeve-turn {transition:none}}

/* The listening room's real surface trace, framed as part of the Playground. */
.pg-character-layout {display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.3fr);gap:clamp(28px,5vw,90px);align-items:center;padding:12px clamp(4px,2vw,28px) 24px;max-width:1450px;margin:auto}
.pg-character-layout h2 {font-size:clamp(25px,2vw,35px);line-height:1.12;letter-spacing:-.045em;color:#f3f6ec;margin:10px 0 20px;font-weight:600}
.pg-character-compare {display:flex;gap:8px;margin-bottom:24px}
.pg-character-compare button {flex:1;border:1px solid #c4e2ae40;border-radius:30px;background:#07120c80;color:#cedbc4;padding:11px 15px;font:inherit;font-size:14px;cursor:pointer}
.pg-character-compare button[aria-pressed=true] {background:#b9e997;color:#14220d;border-color:#cffbb6;box-shadow:0 0 20px #a9ec7530}
.pg-character-setting {margin:20px 0 22px}
.pg-character-setting label {display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:17px;color:#eff5e8;font-weight:550}
.pg-character-setting output {font-size:13px;font-variant-numeric:tabular-nums;color:#c4eea8}
.pg-character-setting input {display:block;width:100%;margin:15px 0 8px;accent-color:#bbe99d;cursor:pointer}
.pg-character-scale {display:flex;justify-content:space-between;font-size:12px;color:#bfceb4}
.pg-character-setting p {font-size:12px;color:#96a68b;margin:8px 0 0}
.pg-character-switch {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid #b7d69c24;cursor:pointer}
.pg-character-switch strong,.pg-character-switch small {display:block;font-weight:400}.pg-character-switch strong {font-size:15px;color:#e5ecdc}.pg-character-switch small {font-size:12px;color:#a8b79d;margin-top:5px;line-height:1.4}
.pg-character-switch input {appearance:none;position:relative;flex:0 0 42px;width:42px;height:24px;border-radius:20px;border:1px solid #b2d89a50;background:#273624;cursor:pointer;transition:background .15s}
.pg-character-switch input::after {content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#9cad8f;transition:transform .15s}
.pg-character-switch input:checked {background:#addd8b;border-color:#d6f8bd}.pg-character-switch input:checked::after {transform:translateX(18px);background:#173114}
.pg-character-layout button:focus-visible,.pg-character-layout input:focus-visible {outline:2px solid #daf5c8;outline-offset:5px}
.pg-character-pulse {min-width:0;position:relative;padding:28px 0;background:radial-gradient(ellipse at 50% 52%,#99d37b10,transparent 72%)}
.pg-character-pulse h2 {margin-bottom:9px}.pg-character-intro {font-size:15px;color:#bdccb1;margin:0 0 30px}
.pg-character-trace {margin:0;padding:24px 22px 20px;border:1px solid #b6d49f47;border-radius:16px;background:linear-gradient(140deg,#1d302088,#07110bbd);box-shadow:inset 0 1px #e4ffd20b,0 0 45px #92d2660b}
.pg-character-trace figcaption {display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline;font-size:10px;letter-spacing:.17em;color:#d9e8ca}
.pg-character-trace [data-trace-status] {font-size:12px;letter-spacing:0;color:#a6b59c}.pg-character-trace[data-active=true] [data-trace-status] {color:#c2eca5}
.pg-character-trace canvas {display:block;width:100%;height:82px;margin:24px 0}
.pg-trace-key {display:flex;flex-wrap:wrap;gap:9px 17px;font-size:11px;color:#bacaaf;line-height:1.5}.pg-trace-key span {display:inline-flex;align-items:center;gap:7px}.pg-trace-key i {width:12px;height:3px;border-radius:3px;background:var(--trace-colour);box-shadow:0 0 6px color-mix(in srgb,var(--trace-colour),transparent 65%)}
.pg-character-status {font-size:14px;color:#d9edc8;line-height:1.5;margin:21px 0 10px}.pg-character-note {font-size:13px;line-height:1.7;color:#a7b69c;max-width:42em;margin:12px 0 18px}.pg-character-session {font-size:11px;color:#879c7c}
@media(max-width:780px){.pg-character-layout{grid-template-columns:1fr;gap:8px;padding:8px 4px 10px}.pg-character-pulse{padding-top:16px}.pg-character-trace{padding:18px 14px}.pg-character-intro{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.pg-character-layout *{transition:none!important}}

/* A small hi-fi component: the music graph is independent of this display. */
.pg-eq-console {color:#e8efdf}
.pg-eq-header {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.pg-eq-header h2 {font-size:clamp(26px,2vw,36px);font-weight:550;letter-spacing:-.04em;margin:9px 0 0;line-height:1.1}
.pg-eq-console button {font:inherit;cursor:pointer}.pg-eq-console button:focus-visible,.pg-eq-console input:focus-visible,.pg-eq-fader-scroll:focus-visible {outline:2px solid #d6fbb6;outline-offset:5px}
.pg-eq-bypass {display:flex;align-items:center;gap:10px;border:1px solid #b9d99944;border-radius:7px;padding:11px 14px;color:#d5dfcb;background:linear-gradient(#2c352a,#192319);box-shadow:0 3px 6px #0006;font-size:12px!important;white-space:nowrap}
.pg-eq-bypass i {width:6px;height:6px;background:#a9ed78;border-radius:50%;box-shadow:0 0 8px #b9fa84}.pg-eq-bypass[aria-pressed=true] i {background:#eece82;box-shadow:0 0 8px #e4b257}
.pg-eq-displays {display:grid;grid-template-columns:minmax(0,1.8fr) minmax(220px,1fr);gap:18px;margin-bottom:28px}
.pg-eq-screen,.pg-eq-levels {min-width:0;margin:0;padding:17px 20px 13px;border:1px solid #83947050;border-radius:7px;background:radial-gradient(ellipse at 50% 90%,#a2d8780b,transparent),#07100b;box-shadow:inset 0 2px 10px #000b,0 1px #ffffff0b}
.pg-eq-screen figcaption {display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.12em;color:#c5dbb0}.pg-eq-screen figcaption i {font-style:normal;color:#849574}.pg-eq-screen [data-eq-mode] {color:#aede86;font-size:8px;white-space:nowrap}
.pg-eq-screen canvas {display:block;width:100%;height:100px;margin-top:12px}.pg-eq-axis {display:flex;justify-content:space-between;font-size:9px;color:#849876;margin-top:7px}
.pg-eq-levels {background:radial-gradient(ellipse at 50% 45%,#b7892517,transparent 90%),#13120b;border-color:#c3aa6344;padding-top:17px;color:#dec892}
.pg-eq-window-title {display:block;font-size:9px;letter-spacing:.19em;margin-bottom:18px;color:#ddc996}.pg-eq-meter>div {display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:10px}.pg-eq-meter strong {font-size:11px;font-weight:500}.pg-eq-meter output {font:10px ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}.pg-eq-meter {margin-bottom:13px;--eq-level:0%}
.pg-eq-meter-track {height:14px;display:block;position:relative;background:#9e783715;border:1px solid #b3914330;overflow:hidden}.pg-eq-meter-track i {position:absolute;inset:0;background:linear-gradient(90deg,#edc36c 0 80%,#f0a255 80% 93%,#ed6a57 93%);clip-path:inset(0 calc(100% - var(--eq-level)) 0 0);filter:drop-shadow(0 0 3px #f6c47c);transition:clip-path .055s linear}.pg-eq-meter-track::after {content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(3.333% - 2px),#14150d calc(3.333% - 2px) 3.333%)}.pg-eq-meter[data-clip=true] output {color:#ff8977}
.pg-eq-meter-scale {display:flex;justify-content:space-between;font-size:8px;letter-spacing:.05em;color:#a58e5b;margin-top:-6px}
.pg-eq-fader-scroll {overflow-x:auto;scrollbar-color:#92aa7a #07100b;scrollbar-width:thin;padding:3px 0 13px}.pg-eq-fader-bank {display:flex;min-width:590px;gap:14px}.pg-eq-db {width:30px;flex:0 0 30px;display:flex;flex-direction:column;justify-content:space-between;height:154px;margin-top:32px;font:9px ui-monospace,monospace;color:#9fac91;text-align:right}.pg-eq-faders {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));flex:1;gap:clamp(6px,1.6vw,25px)}
.pg-eq-band {display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;cursor:pointer}.pg-eq-band output {font:11px ui-monospace,SFMono-Regular,monospace;color:#c3e79e;font-variant-numeric:tabular-nums;min-width:42px;text-align:center;background:#07130b90;border:1px solid #b2d68720;border-radius:4px;padding:4px}
.pg-eq-track {display:flex;justify-content:center;align-items:center;width:100%;height:168px;position:relative;background:repeating-linear-gradient(to bottom,transparent 0 16px,#a9c58924 16px 17px,transparent 17px 33px);border-radius:4px}
.pg-eq-track::before {content:'';position:absolute;top:6px;bottom:6px;width:7px;border:1px solid #a3b28e30;background:#050a07;box-shadow:inset 0 0 4px #000;border-radius:5px}
.pg-eq-track input {position:relative;appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:38px;height:168px;margin:0;background:transparent;cursor:ns-resize;touch-action:pan-x}
.pg-eq-track input::-webkit-slider-runnable-track {width:7px;height:100%;background:transparent}.pg-eq-track input::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:34px;height:18px;margin-left:-13.5px;border-radius:3px;border:1px solid #adb79c;background:linear-gradient(to bottom,#697362,#2e372b 42%,#d4efb1 43%,#bde697 56%,#414b37 57%,#242d21);box-shadow:0 3px 5px #000b,0 0 10px #a8da7330}
.pg-eq-track input::-moz-range-track {width:7px;background:transparent}.pg-eq-track input::-moz-range-thumb {width:34px;height:18px;border-radius:3px;border:1px solid #adb79c;background:linear-gradient(#697362,#2e372b 42%,#d4efb1 43%,#bde697 56%,#414b37 57%,#242d21);box-shadow:0 3px 5px #000b}
.pg-eq-band strong {font-size:12px;font-weight:500;color:#e6efd9}.pg-eq-band small {font-size:8px;color:#91a37e;letter-spacing:.1em;margin-top:-5px}
.pg-eq-footer {border-top:1px solid #b6ce9b26;margin-top:10px;padding-top:19px;display:flex;justify-content:space-between;align-items:center;gap:15px}.pg-eq-presets {display:flex;gap:7px;flex-wrap:wrap}.pg-eq-presets button {border:1px solid #a2ba8840;border-radius:5px;background:#0c160e;color:#c4d2b8;padding:8px 17px;font-size:12px}.pg-eq-presets button[aria-pressed=true] {background:#c0e89d;color:#1b2b11;border-color:#d1f4b5;box-shadow:0 0 14px #b9e88d22}
.pg-eq-headroom {font-size:8px;letter-spacing:.1em;color:#aab89a;white-space:nowrap}.pg-eq-headroom output {display:inline-block;min-width:65px;margin-left:8px;font:11px ui-monospace,monospace;letter-spacing:0;color:#d3e9bc}
.pg-eq-status {font-size:13px;line-height:1.5;margin:22px 0 5px;color:#d0e5bd}.pg-eq-note {font-size:11px;line-height:1.6;color:#9eb08c;margin:0;max-width:65em}
@media(max-width:800px){.pg-eq-displays{grid-template-columns:1fr}.pg-eq-levels{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.pg-eq-window-title,.pg-eq-meter-scale{grid-column:1/-1}.pg-eq-window-title{margin-bottom:14px}.pg-eq-meter-scale{margin-top:0}.pg-eq-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.pg-tabs{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#809e6c transparent}.pg-tabs [role=tab]{flex:0 0 104px}.pg-eq-header{align-items:flex-start}.pg-eq-bypass{padding:10px;font-size:10px!important}.pg-eq-screen{padding:14px 12px}.pg-eq-screen figcaption{font-size:8px;letter-spacing:.04em}.pg-eq-presets button{padding:9px 14px}.pg-eq-screen figcaption i{display:none}}
@media(prefers-reduced-motion:reduce){.pg-eq-console *{transition:none!important}}

[data-pg-privacy]{grid-column:1/-1;position:relative;z-index:3;max-width:1050px;margin:24px auto 0;padding:12px 20px;color:#adc1ad;font-size:13px;line-height:1.6}.pg-privacy summary{cursor:pointer;text-align:center;color:#c2d8b7}.pg-privacy button{background:#c7eab3;color:#102414;border:0;padding:9px 14px;border-radius:20px;cursor:pointer;margin:0 12px 10px 0}.pg-privacy a{margin-left:12px;color:#c7eab3}.pg-privacy [role=status]{display:inline-block}

/* Landscape tablets need a listening scene, not desktop sleeves stacked above
   a full-width deck. Size the real stage so pointer projection stays accurate.
   Use the stable viewport height; Safari's retracting toolbar must not move a
   cartridge under somebody's finger. Taller workbench tabs can still grow. */
@media (min-width:768px) and (max-width:1600px) and (min-height:700px) and (orientation:landscape) {
    body.playground-page>.playground {--sleeve:clamp(112px,12.5svh,138px);grid-template-columns:clamp(180px,17.5vw,245px) minmax(0,1fr) clamp(180px,17.5vw,245px);column-gap:12px;padding-top:8px}
    .pg-heading {margin-bottom:4px}
    .pg-heading>span {font-size:8px;line-height:12px}
    .pg-heading h1 {font-size:28px;line-height:1.1;margin:4px auto}
    .pg-heading p {font-size:13px;line-height:1.4}
    .pg-record-rail {grid-column:2;align-self:start;gap:8px;max-width:calc(var(--sleeve)*5 + 200px)}
    .pg-record-rail .pg-shelves {min-height:0;gap:18px;padding:8px 12px}
    .pg-record-arrow {width:44px;height:44px;flex-basis:44px;margin-top:calc(var(--sleeve)/2 - 14px)}
    .pg-album {--face-caption:11px}
    .pg-album h2 {font-size:12px;line-height:1.3;margin:6px 0 0}
    .pg-album .pg-artist {font-size:11px;line-height:1.4;margin-bottom:4px}
    .pg-faces {gap:8px;height:calc((var(--sleeve) - 8px)/2 + 4px + var(--face-caption)*1.4)}
    .pg-album .pg-face {width:max(44px,calc((var(--sleeve) - 8px)/2*var(--record-scale)))}
    .pg-face span {margin-top:4px}
    .pg-centre {width:min(100%,max(680px,calc((100svh - 642px)*3.11)));justify-self:center;align-self:start;margin-top:-20px}
    .pg-deck .deck-stage {width:100%;margin:-8% 0 -9%}
    /* Keep the surrounding cards in the scene, behind the cabinet. Their
       contents scroll locally on shorter tablets instead of moving the deck. */
    .pg-import {grid-column:1;grid-row:2/4;justify-self:stretch;align-self:start;width:100%;max-width:none;max-height:calc(100svh - 390px);margin:18px 0 0;padding:16px 14px;overflow:auto;overscroll-behavior:contain;border-radius:17px;scrollbar-width:thin;scrollbar-color:#a9d39165 transparent}
    .pg-import>.pg-step,.pg-deck-choices>.pg-step {font-size:8px;letter-spacing:.16em}
    .pg-import h2,.pg-deck-choices h2 {font-size:24px;line-height:1.1;margin:8px 0}
    .pg-import>p:not(.pg-file-status):not(.pg-local-note) {font-size:12px;line-height:1.4}
    .pg-import .pg-file-drop {min-height:0;padding:12px 8px;margin:10px 0 8px;gap:4px}
    .pg-import .pg-upload-art {width:44px;height:44px;margin:0 0 4px}
    .pg-import .pg-upload-cloud {width:40px;height:40px}
    .pg-import .pg-file-drop strong {font-size:13px;line-height:1.3}
    .pg-import .pg-file-drop>span:not(.pg-upload-art),.pg-import .pg-file-drop small {font-size:11px;line-height:1.4}
    .pg-import .pg-folder-button {min-height:44px;margin:0 0 12px;padding:8px 10px;font-size:12px}
    .pg-import .pg-import-promises {gap:6px}
    .pg-import .pg-import-promises li {font-size:11px;line-height:1.4;gap:7px}
    .pg-import .pg-import-promises svg {width:20px;height:20px;flex-basis:20px}
    .pg-import .pg-local-note {font-size:10px;line-height:1.4;margin-top:8px}
    .pg-import .pg-import-play {font-size:12px;min-height:44px;padding:10px}
    .pg-right {grid-column:3;grid-row:2/4;justify-self:stretch;align-self:start;width:100%;max-width:none;margin:18px 0 0;padding:0}
    .pg-deck-choices {padding:16px 14px 20px}
    .pg-deck-browse {gap:6px;margin:0 0 12px;font-size:10px;line-height:1.4}
    .pg-deck-browse button {width:44px;height:44px;min-height:44px;flex-basis:44px}
    .pg-deck-scroll {max-height:clamp(176px,calc(100svh - 550px),354px)}
    .pg-right [data-pg-presets] {grid-template-columns:minmax(0,1fr);gap:8px}
    .pg-right .pg-preset {grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:76px;gap:7px;padding:5px}
    .pg-preset-copy {padding:3px 0}
    .pg-right .pg-preset strong {font-size:12px;line-height:1.25}
    .pg-right .pg-preset small {font-size:10px;line-height:1.35;margin-top:4px}
    .pg-preset-check {width:12px;height:12px;right:4px;top:4px;font-size:8px}
    .pg-vinyl-tray {--vinyl-sample:64px;margin:6px 0 24px;padding:0 18px 8px}
    .pg-tabs {gap:4px;margin-bottom:4px}
    .pg-tabs [role=tab] {min-height:44px;padding:8px 4px;gap:7px;font-size:12px}
    .pg-tabs [role=tab] svg {width:18px;height:18px;flex-basis:18px}
    .pg-tab-panel {min-height:0}
    #pg-panel-vinyl {display:grid;grid-template-columns:140px minmax(0,1fr);gap:2px 12px;align-items:center}
    .pg-workbench .pg-vinyl-heading {flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
    .pg-workbench .pg-vinyl-heading .pg-step {font-size:8px}
    .pg-workbench .pg-vinyl-heading p {margin:3px 0 0;font-size:11px}
    .pg-workbench [data-pg-style-target] {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
    .pg-workbench [data-pg-original] {min-height:44px;padding:6px 12px;font-size:11px}
    .pg-style-rail {gap:8px;margin-top:0}
    .pg-styles {gap:22px;padding:0 10px 4px}
    .pg-vinyl-collection h3 {font-size:10px;line-height:14px;margin-bottom:6px}
    .pg-collection-finishes {width:max-content;gap:14px}
    /* Explicit intrinsic widths prevent WebKit from starting the next
       collection before the current flex row's final finish has ended. */
    .pg-vinyl-style {width:calc(var(--vinyl-sample) + 24px);min-width:calc(var(--vinyl-sample) + 24px);flex-basis:calc(var(--vinyl-sample) + 24px);padding:0;font-size:11px;line-height:1.3}
    .pg-style-sample {margin-bottom:6px}
    .pg-style-rail .pg-rail-arrow {width:44px;height:44px;flex-basis:44px;margin-top:18px}
    .pg-style-status {grid-column:1/-1;font-size:11px;line-height:1.4;margin-top:2px}
}
@media (min-width:768px) and (max-width:1600px) and (min-height:700px) and (max-height:850px) and (orientation:landscape) {
    body.playground-page>.playground {--sleeve:104px}
    .pg-heading {display:flex;justify-content:center;align-items:center;gap:10px 20px;flex-wrap:wrap}
    .pg-heading>span {display:none}
    .pg-heading h1 {font-size:26px;margin:0}
}

.pg-startup{grid-column:1/-1;grid-row:2;text-align:center;align-self:start;color:#bed4b2;font-size:15px;z-index:3;padding:12px}.pg-startup[hidden]{display:none}.pg-startup button{font:inherit;background:#bddfa2;color:#13210e;border:0;border-radius:30px;padding:10px 20px;cursor:pointer}.pg-startup button:focus-visible{outline:2px solid white;outline-offset:4px}

/* Useful, server-rendered help sits below the instrument, outside its scene grid. */
.pg-help{width:min(1240px,calc(100% - 48px));margin:64px auto 80px;padding-top:36px;border-top:1px solid #aed39b38;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,88px);color:#d1dccb}
.pg-help h2{font-size:clamp(26px,2.5vw,38px);line-height:1.15;color:#efece2;margin:16px 0 20px;letter-spacing:-.03em}.pg-help h3{color:#efece2;font-size:20px;margin:0 0 16px}.pg-help p{font-size:15px;line-height:1.7}.pg-help a{color:#c0e5ac;text-underline-offset:4px}.pg-help-intro>a{display:inline-block;margin:12px 22px 0 0}.pg-help details{border-top:1px solid #aed39b2b;padding:16px 0}.pg-help summary{cursor:pointer;color:#e4ebdf;font-size:16px;line-height:1.5;min-height:28px}.pg-help details p{margin-bottom:0}.pg-help summary:focus-visible,.pg-help a:focus-visible{outline:2px solid #c0e5ac;outline-offset:5px}
@media(max-width:760px){.pg-help{grid-template-columns:1fr;width:calc(100% - 32px);margin-top:40px;gap:32px}}