/* Interactive, archive-backed product views. Every visible transport is real DOM. */
.archive-player{--archive-progress:0%;--archive-ink:#c7df5f;min-width:0;background:#090a09;color:var(--ink);border:1px solid #252723;border-radius:12px;padding:22px}
.archive-player .ui-icon{width:18px;height:18px}
.archive-head{display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid #252723;padding-bottom:15px}
.archive-app{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500}
.archive-app>.ui-icon{color:var(--archive-ink)}
.archive-state{display:flex;align-items:center;gap:6px;color:#a5ad9b;font-size:10px;white-space:nowrap}
.archive-state:before{content:'';width:5px;height:5px;background:#727a67;border-radius:50%}
.archive-player[data-playing=true] .archive-state{color:var(--archive-ink)}
.archive-player[data-playing=true] .archive-state:before{background:var(--archive-ink)}
.archive-title{text-align:center;padding:21px 0 0}
.archive-title h3{font-size:clamp(19px,1.9vw,27px);line-height:1.25;font-weight:500;letter-spacing:-.025em}
.archive-title p{font-size:12px;color:#aab09f;margin-top:5px}
.archive-art{height:218px;position:relative;display:grid;place-items:center;overflow:hidden;margin:0 0 6px}
.archive-vinyl{position:relative;width:186px;height:186px;border-radius:50%;border:1px solid #454a3c;background:#070807;transform:rotate(var(--record-turn,0deg));box-shadow:inset 0 0 0 11px #10120d,inset 0 0 0 12px #272c20,inset 0 0 0 22px #0c0e09,inset 0 0 0 23px #24291d,inset 0 0 0 34px #0c0e09,inset 0 0 0 35px #24291d,inset 0 0 0 46px #0c0e09,inset 0 0 0 47px #24291d}
.archive-vinyl:before{content:'';position:absolute;inset:65px;border-radius:50%;background:var(--accent)}
.archive-vinyl:after{content:'LAYRS';position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:8px;color:#172000;letter-spacing:-.03em;padding-bottom:16px}
.archive-spindle{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.archive-spindle:after{content:'';width:7px;height:7px;background:#070807;border:1px solid #5b673e;border-radius:50%;z-index:1}
.archive-arm{position:absolute;left:calc(50% + 86px);top:17px;width:18px;height:146px;border:4px solid #a7ac9e;border-left:0;border-bottom:0;border-radius:0 12px 0 0;transform:rotate(-16deg);transform-origin:top;transition:transform 350ms var(--ease)}
.archive-arm:after{content:'';position:absolute;width:10px;height:24px;left:-5px;bottom:-13px;background:#c6cdba;border:3px solid #5a6350;border-radius:2px;transform:rotate(-16deg)}
.archive-player[data-animating=true] .archive-arm{transform:rotate(12deg)}
.archive-scope{width:100%;height:100%;display:block}
.archive-wave{position:relative;height:48px;background:#11150c;border-radius:4px;overflow:clip;cursor:crosshair;touch-action:pan-y}
.archive-wave canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.archive-wave [data-archive-wave-played]{clip-path:inset(0 calc(100% - var(--archive-progress)) 0 0)}
.archive-cursor{position:absolute;top:0;bottom:0;left:var(--archive-progress);width:1px;background:var(--accent);pointer-events:none}
.archive-seek{display:block}
.archive-seek input{min-height:44px}
.archive-transport{display:flex;align-items:center;gap:13px;margin-top:2px;min-height:52px}
.archive-play{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--accent);color:#101500;flex-shrink:0}
.archive-play:hover{background:var(--accent-hover)}
.archive-play .archive-pause-icon{display:none}
.archive-player[data-playing=true] .archive-play-icon{display:none}
.archive-player[data-playing=true] .archive-pause-icon{display:block}
.archive-clock{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#a6b198}
.archive-clock strong{font-size:22px;font-weight:400;letter-spacing:-.035em;color:var(--ink);margin-right:5px}
.archive-volume{display:flex;align-items:center;gap:7px;max-width:105px;margin-left:auto}
.archive-volume>.ui-icon{width:15px;height:15px;color:#aab59a}
.archive-volume input{min-height:44px;min-width:35px}
.archive-motion{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;color:#aeb99d;flex-shrink:0}
.archive-motion .ui-icon{width:14px;height:14px}
.archive-motion:hover{background:#1c2314}
.archive-message{font-size:11px;color:#a6b198;margin-top:13px;line-height:1.5;min-height:1.5em}
.archive-choices{display:flex;gap:6px;margin-top:16px}
.archive-choices button{display:flex;align-items:center;justify-content:center;flex:1;gap:6px;min-height:44px;padding:8px;border:0;background:#1b2114;color:#b2bca3;font-size:12px;border-radius:4px}
.archive-choices button[aria-pressed=true]{color:#0c1006;background:var(--accent)}
.archive-prompt{margin-top:12px;font-size:12px;background:#12160d;border-radius:4px}
.archive-prompt summary{min-height:44px;padding:10px 12px;font-size:12px}
.archive-prompt p{padding:0 12px 12px;line-height:1.5;color:#b9c1ae;overflow-wrap:anywhere}
.archive-prompt .archive-seed{font-size:10px;color:#929c83}
.compose-feature .archive-player{border:0;border-radius:0;margin-top:auto;padding:0 28px 18px;background:transparent}
.compose-feature .archive-art{height:230px}
.compose-feature .archive-head{padding-top:12px}
.compose-feature .archive-title{padding-top:20px}
.compose-feature .archive-title h3{font-size:22px}
.compose-feature .archive-message{margin-top:10px}
.compose-feature .feature-meta{padding-top:18px}
.hero-screen .archive-player{min-height:480px}
@media(min-width:1600px){.hero-screen .archive-art{height:248px}.hero-screen .archive-vinyl{width:214px;height:214px}.hero-screen .archive-vinyl:before{inset:75px}.hero-screen .archive-arm{left:calc(50% + 101px);top:21px;height:160px}.hero-screen .archive-title{padding-top:25px}}
@media(max-width:1100px){.archive-player{padding:18px}.archive-art{height:195px}.archive-vinyl{width:170px;height:170px}.archive-vinyl:before{inset:59px}.archive-arm{left:calc(50% + 80px);top:15px;height:126px}.archive-volume{max-width:85px}.archive-clock strong{font-size:20px}.hero-screen .archive-player{min-height:450px}}
@media(max-width:800px){.hero-screen .archive-art{height:240px}.hero-screen .archive-vinyl{width:210px;height:210px}.hero-screen .archive-vinyl:before{inset:74px}.hero-screen .archive-arm{left:calc(50% + 98px);top:18px;height:162px}.archive-volume{max-width:125px}.archive-title h3{font-size:25px}.archive-title p{font-size:13px}.archive-message{font-size:12px}}
@media(max-width:520px){.archive-player{padding:16px;border-radius:8px}.archive-art,.hero-screen .archive-art{height:200px}.hero-screen .archive-vinyl{width:174px;height:174px}.hero-screen .archive-vinyl:before{inset:61px}.hero-screen .archive-arm{left:calc(50% + 80px);top:15px;height:136px}.archive-title h3{font-size:21px}.archive-app{font-size:13px}.archive-state{font-size:9px}.archive-title p{font-size:11px}.archive-transport{gap:9px}.archive-clock{font-size:10px}.archive-clock strong{font-size:20px}.archive-volume{max-width:85px;gap:5px}.archive-volume>.ui-icon{width:13px;height:13px}.archive-motion{width:32px}.compose-feature .archive-player{padding:0 20px 18px}.compose-feature .archive-art{height:215px}.hero-screen .archive-player{min-height:0}}
@media(prefers-reduced-motion:reduce){.archive-arm{transition:none}.archive-vinyl{transform:none!important}}
.genre-starter{display:flex;align-items:center;gap:14px;margin:0 0 18px;min-width:0}
.genre-starter>label{font-size:13px!important;margin:0!important;flex-shrink:0;color:var(--muted)}
.genre-starter select{display:block;min-height:44px;min-width:0;width:180px;background:#080a05;color:var(--ink);border:1px solid #353d2a;border-radius:3px;padding:9px 32px 9px 12px;font-size:14px}
@media(max-width:520px){.genre-starter{gap:10px}.genre-starter>label{font-size:12px!important}.genre-starter select{width:100%;font-size:13px}}
.lyrical-feature .lyrical-starter-label{font-size:12px;color:var(--muted);margin-top:44px}
.lyrical-feature .lyrical-starter-label+blockquote{margin-top:18px}

/* Native dropdown chevrons sit inside an inset frame, with room to breathe. */
.genre-starter{display:grid;grid-template-columns:minmax(112px,.7fr) minmax(0,1.3fr);align-items:center;gap:14px}
.genre-starter>.genre-select-wrap{min-width:0;padding-right:14px;border:1px solid #414a35;border-radius:4px;background:#0c0f09;transition:border-color 160ms ease,background-color 160ms ease}
.genre-starter>.genre-select-wrap:hover{border-color:#73815d;background:#12180c}
.genre-starter>.genre-select-wrap:focus-within{border-color:var(--accent);outline:1px solid var(--accent);outline-offset:1px}
.genre-starter .genre-select-wrap>select{appearance:auto;-webkit-appearance:menulist;display:block;width:100%;max-width:100%;min-width:0;min-height:48px;margin:0;border:0;border-radius:0;background:#0c0f09;color:#f4f5ef;font:inherit;font-size:14px;line-height:1.4;padding:11px 0 11px 14px;outline:0;cursor:pointer;color-scheme:dark}
@media(max-width:520px){.genre-starter{grid-template-columns:1fr;gap:8px}.genre-starter>label{font-size:13px!important}.genre-starter .genre-select-wrap>select{font-size:16px}}
/* Paired lyrics/style fields need their full column width for the selection. */
.prompt-pair .genre-starter{grid-template-columns:1fr;gap:8px}

/* Opaque option colours also cover native popups that do not inherit dark mode. */
.genre-select-wrap select option,.cpg-select-wrap select option{background-color:#0c0f09;color:#f4f5ef}