@import url('style.css') layer(legacy);
@import url('experience.css') layer(legacy);
@import url('community.css') layer(legacy);
@font-face{font-family:Space Mono;src:url('SpaceMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Roboto Mono;src:url('RobotoMono.ttf') format('truetype');font-weight:100 700;font-display:swap}
@font-face{font-family:Clash Display;src:url('ClashDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{color-scheme:light;font-family:'Space Mono','Roboto Mono',monospace;font-weight:400;color:#333;background:#fafafa}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:auto;min-height:100%;overflow:visible;background:#fafafa;color:#333}body{font:13px/1.55 'Space Mono','Roboto Mono',monospace}button,input,textarea,summary{font:inherit}button{cursor:pointer;color:inherit}button,summary,input{border-radius:0}button{background:none;border:0}button:focus-visible,summary:focus-visible{outline:2px solid #347dff;outline-offset:3px}input:focus-visible{outline:none;box-shadow:inset 0 -2px #347dff}button:disabled{cursor:wait;opacity:.5}[hidden]{display:none!important}svg{fill:none;stroke:currentColor;stroke-width:1}button svg{width:20px;height:20px}p{margin:0 0 16px}.landing-layout{position:relative;max-width:1280px;min-height:max(832px,100svh);margin:auto;padding:32px}
.about-panel{position:relative;width:274px;padding:20px 20px 21px;background:#fafafa;filter:drop-shadow(0 0 2px #bbb);clip-path:polygon(0 0,100% 0,100% 49.5%,93% 53%,93% 72%,100% 76%,100% 91%,93% 100%,0 100%);box-shadow:inset 0 0 7px #bcbcbc;z-index:3}.about-panel p{font-size:13px;line-height:1.55;letter-spacing:-.5px}.about-mark{display:block;width:43px;height:54px;object-fit:contain;margin:0 0 8px}.about-panel form{margin-top:30px}.about-panel label{display:block;font-size:12px;margin-bottom:8px}.line-field{display:flex;height:31px;border:1px solid #d3d3d3;background:#fff}.line-field input{min-width:0;flex:1;background:transparent;border:0;padding:4px 7px;font-size:12px;outline:0}.line-field button{flex:0 0 30px;padding:0;border-left:1px solid #ddd;display:grid;place-items:center}.line-field button:hover{background:#eee}.line-field button:active{background:#aaa;color:#fff;box-shadow:inset 0 2px 5px #888}.form-status:empty,.collection-load-status:empty{display:none}.form-status{font-size:11px;margin:8px 0 0;max-width:210px}
#selector-scene{position:absolute;top:28px;right:32px;left:auto;bottom:auto;width:284px;height:auto;min-height:0;display:block;background:none;z-index:4;opacity:1;transform:none;padding:0;overflow:visible}#selector-scene h2{font:13px 'Space Mono','Roboto Mono',monospace;color:#8c9299;background:#f4f4f4;padding:7px 12px;margin:0;border:1px solid #d6d6d6;min-height:33px}.selector-pair{display:flex;flex-direction:column;position:static;gap:0;width:100%;transform:none;max-height:none;overflow:visible;padding:0;margin:0}.selector-choice{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:34px;width:100%;text-align:left;border:1px solid #d6d6d6;border-top:0;padding:5px 11px;background:#fafafa;clip-path:polygon(0 0,100% 0,100% 67%,94% 100%,0 100%);transition:background .2s}.selector-choice:hover{background:#f0f0f0}.selector-choice:active{box-shadow:inset 0 2px 4px #ccc}.selector-shape{display:block;position:relative;width:29px;height:20px;flex:0 0 29px;mask:none;background:none;transform:none;opacity:1}.selector-shape::before{content:'[  ]';white-space:pre;color:#777;font-size:17px;position:absolute;inset:-3px 0 0}.selector-shape::after{content:'';position:absolute;width:6px;height:6px;top:6px;left:11px;background:transparent}.selector-choice[aria-pressed=true] .selector-shape::after{background:#347dff}.selector-name{font:13px 'Space Mono','Roboto Mono',monospace;text-transform:uppercase;letter-spacing:-.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.selector-choice:hover .selector-name{color:#000}.upload-panel{margin-top:12px}.upload-panel summary{list-style:none;display:flex;align-items:center;gap:13px;min-height:35px;padding:6px 16px;background:linear-gradient(#aaa,#8e8e8e);box-shadow:inset 0 2px 5px #777;color:#f3f3f3;clip-path:polygon(0 0,94% 0,100% 45%,100% 100%,0 100%);cursor:pointer;font-size:13px}.upload-panel summary::-webkit-details-marker{display:none}.upload-panel summary svg{width:17px;height:17px}.upload-content{padding:14px 12px 10px;border:1px solid #ddd;border-top:0}.upload-content p{font-size:10px;color:#929292;margin:7px 0 0;white-space:nowrap}.upload-content .collection-open{display:block;margin:14px 0 0;font-size:10px;text-align:left;color:#777;padding:0}.upload-content .collection-open:hover{text-decoration:underline}.collection-load-status{font-size:11px;color:#777;margin-top:8px}
#stage{position:relative;inset:auto;margin:-226px auto 0;width:490px;min-height:0;height:auto;overflow:visible;background:none;transform:none;isolation:isolate}.record-object{position:relative;width:100%;height:550px}.sculpture{position:absolute;inset:0 4% auto;width:92%;height:auto;aspect-ratio:1;transform:none;perspective:none;filter:none;opacity:1;animation:none;background:none;z-index:0;transition:translate .8s cubic-bezier(.2,.65,.2,1)}.record-disc{width:100%;height:100%;border-radius:50%;background:#909090;overflow:hidden;box-shadow:inset 0 0 0 1px #aaa;position:relative}.track-spin{position:absolute;inset:0;transform:none;animation:none}.disc-marks{position:absolute;inset:0;animation:record-turn 28s linear infinite;animation-play-state:paused}.disc-marks i{position:absolute;display:block;width:48%;height:48%;background:#050505;mask:url('mark-centre.svg') center/190% no-repeat}.disc-marks i:first-child{top:0;left:4%;transform:rotate(110deg)}.disc-marks i:last-child{bottom:6%;right:0;transform:rotate(-70deg)}.audio-playing .disc-marks{animation-play-state:running}@keyframes record-turn{to{rotate:360deg}}.sculpture .music-ink{position:absolute;inset:0;mask:none;background:none;transform:none;opacity:0;filter:none;animation:none;transition:opacity 1s}.has-listened .sculpture .music-ink{opacity:1}.music-ink .art-layer{position:absolute;inset:0;background-size:cover;background-position:center;animation:none;opacity:1}.mark-control{position:absolute;inset:0;border:0;background:transparent;width:100%;height:100%;touch-action:pan-y;z-index:1;cursor:grab}.mark-control:active{cursor:grabbing}.record-object:hover .sculpture{translate:0 -50px}.record-object:has(.listen:hover) .sculpture{translate:0 0}.record-object:has(.mark-control:active) .sculpture{translate:0 -65px}.sleeve-glass{position:absolute;top:80px;bottom:0;left:0;right:0;background:linear-gradient(125deg,#ffffff30,#efefef24 60%,#ffffff12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);clip-path:polygon(0 17%,7.6% 0,42% 0,50.6% 8.2%,85.3% 8.2%,87.8% 0,100% 0,100% 100%,0 100%);z-index:2;pointer-events:none}.sleeve-outline{position:absolute;top:80px;left:0;width:100%;height:470px;z-index:3;pointer-events:none;stroke:#d5d5d5;stroke-width:1;fill:none}.sleeve-outline .fold{stroke:#f8f8f8;stroke-width:1}.sleeve-outline .shine{stroke-width:5;stroke:#eee}.sleeve-outline circle{fill:#eee;stroke:none}.sleeve-wordmark{position:absolute;z-index:4;top:159px;left:0;width:100%;text-align:center;font:700 82px/1 'Clash Display',sans-serif;letter-spacing:-4px;color:#bcbcc0;-webkit-text-stroke:.7px #e2e2e2;pointer-events:none}.sleeve-mark{position:absolute;width:176px;height:194px;object-fit:contain;left:22px;bottom:25px;z-index:4;filter:brightness(0);pointer-events:none}.perforation{position:absolute;bottom:14px;width:43px;height:43px;background:radial-gradient(circle,#d8d8d8 1.8px,transparent 2px) 0 0/7px 7px;z-index:4;clip-path:polygon(0 0,100% 0,100% 75%,70% 75%,70% 100%,0 100%)}.perforation.left{left:14px}.perforation.right{right:14px}.play-control{position:absolute;right:12px;bottom:68px;z-index:5;display:grid;justify-items:center;inline-size:46px;text-align:center}.play-label{display:block;font-size:11px;line-height:1;margin-bottom:9px}.listen{display:grid;place-items:center;width:46px;height:46px;padding:0;background:#fff;border:1px solid #d5d5d5;border-radius:50%;box-shadow:none;transition:box-shadow .2s,background .2s}.listen:hover,.listen:active{box-shadow:inset 0 2px 5px #999}.listen:active{background:#eee}.listen-state{display:grid;place-items:center;width:24px;min-width:0;height:24px;margin:0;padding:0;line-height:0;color:#ff3939}.listen-state svg{grid-area:1 / 1;width:24px;height:24px;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.listen-state .state-pause,.listen-state .state-wait{display:none}.listen-state[data-state=playing] .state-play,.listen-state[data-state=loading] .state-play,.listen-state[data-state=buffering] .state-play{display:none}.listen-state[data-state=playing] .state-pause,.listen-state[data-state=loading] .state-wait,.listen-state[data-state=buffering] .state-wait{display:block}.state-wait{animation:wait-pulse 1s ease-in-out infinite alternate}@keyframes wait-pulse{to{opacity:.3}}.player-strip{display:flex;width:100%;height:35px;gap:4px;margin-top:4px;font-size:12px}.strip-play,.elapsed,.strip-track{display:flex;align-items:center;justify-content:center;border:1px solid #d7d7d7;background:#f6f6f6;padding:0 7px;color:#333;min-width:0}.strip-play{width:28px;flex:0 0 28px;padding:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 65%)}.strip-play svg{width:15px;height:15px;fill:#888;stroke:none}.elapsed{flex:0 0 53px}.strip-track{flex:1;justify-content:flex-start;clip-path:polygon(0 0,100% 0,100% 70%,96% 100%,0 100%);text-align:left}.now-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.under-player{display:flex;justify-content:space-between;align-items:center;min-height:34px;opacity:0;transition:opacity .2s}#stage:hover .under-player,#stage:focus-within .under-player,.under-player:has(.audio-status:not(:empty)){opacity:1}.under-player button{padding:6px}.audio-status{font-size:11px;position:static;min-height:0}.track-navigation{display:none}.music-detail{position:relative;inset:auto;width:100%;transform:none;margin:8px 0 0;padding:20px;border:1px solid #ddd;background:#fafafa;opacity:1;text-align:center;display:none}.details-open .music-detail{display:block}.record-line{display:block}.track-caption{display:block;color:inherit;text-decoration:none}.track-caption strong{font-size:14px;display:block}.track-caption small{font-size:12px}.detail-actions{display:flex;justify-content:center;gap:20px;margin:15px 0}.detail-actions button{width:32px;height:32px}.track-curator{font-size:11px}.comment-label{display:none}.comment-controls{display:flex;justify-content:flex-end;gap:12px}.comment-controls button{width:32px;height:32px}.comment-status,.track-comments{font-size:12px}#track-comment{width:100%;font:14px 'Space Mono','Roboto Mono',monospace;border:0;border-bottom:1px solid #aaa;background:none;padding:10px;resize:vertical}.details-close{position:absolute;top:6px;right:6px;z-index:2;width:30px;height:30px}dialog{font-family:'Space Mono','Roboto Mono',monospace}dialog .song-wordmark,dialog .community-wordmark{font-family:'Clash Display',sans-serif}dialog::backdrop{background:#fafafaab;backdrop-filter:blur(5px)}
@media(min-width:1280px){#stage{margin-top:-226px}}
@media(min-width:901px) and (max-width:1150px){.landing-layout{padding:24px}.about-panel{width:230px;padding:18px 14px}.about-panel p{font-size:11px}.about-panel label{font-size:10px}#selector-scene{right:24px;top:24px;width:230px}.selector-name{font-size:11px}#stage{width:420px;margin-top:-175px}.record-object{height:471px}.sleeve-glass{top:69px}.sleeve-outline{top:69px;height:403px}.sleeve-wordmark{top:136px;font-size:70px}.sleeve-mark{width:151px;height:166px}.upload-content p{font-size:8px}}
@media(max-width:900px){.landing-layout{padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:28px;min-height:100svh}.about-panel{grid-column:1;grid-row:2;width:100%;max-width:300px;margin:0 auto}#selector-scene{grid-column:2;grid-row:2;position:relative;inset:auto;width:100%;max-width:300px;margin:auto auto 0;align-self:start}#stage{grid-column:1 / -1;grid-row:1;width:min(490px,100%);margin:54px auto 0}.under-player{opacity:1}.about-panel p{font-size:12px}.selector-pair{max-height:none}}
@media(max-width:540px){.landing-layout{display:flex;flex-direction:column;padding:18px;gap:26px}#stage{order:1;width:100%;max-width:390px;margin:36px auto 0}.record-object{height:auto;aspect-ratio:490 / 550}.sleeve-glass{top:14.545%;bottom:0}.sleeve-outline{top:14.545%;height:85.455%}.sleeve-wordmark{top:28.9%;font-size:clamp(48px,15.5vw,65px);letter-spacing:-3px}.sleeve-mark{left:4.5%;bottom:4.5%;width:36%;height:35%}.play-control{right:2.45%;bottom:12.36%}.listen{width:42px;height:42px}.play-label{font-size:10px}.perforation{width:32px;height:32px;background-size:6px 6px}.perforation.left{left:11px}.perforation.right{right:11px}.player-strip{font-size:10px}.elapsed{flex-basis:48px}.record-object:hover .sculpture{translate:0 0}.record-object:has(.mark-control:active) .sculpture{translate:0 -24px}#selector-scene{order:2;width:100%;max-width:390px;margin:0 auto}.about-panel{order:3;max-width:390px;width:100%;margin:0 auto 24px}.about-panel p{font-size:13px}.about-panel label{font-size:12px}.line-field{height:40px}.line-field input{font-size:16px}.line-field button{flex-basis:40px}.selector-choice{min-height:44px}.selector-name{font-size:13px}.upload-panel summary{min-height:44px}.upload-content p{font-size:10px}.about-panel{clip-path:polygon(0 0,100% 0,100% 49.5%,96% 53%,96% 72%,100% 76%,100% 94%,96% 100%,0 100%)}.about-panel form{margin-top:24px}.about-panel .line-field{max-width:90%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.record-object:hover .sculpture,.record-object:has(.mark-control:active) .sculpture{translate:0 0}}
/* Reset the original wheel's structural offsets, including dynamically added rows. */
.about-mark{filter:brightness(0);width:58px;margin-left:-9px;margin-top:-5px;margin-bottom:13px}
.selector-pair{align-items:stretch;justify-content:flex-start;scroll-snap-type:none;scrollbar-width:auto}
.selector-choice{flex-direction:row;flex:0 0 auto;transform:none;animation:none;height:34px;min-height:34px}
.selector-choice .selector-shape,.selector-choice:hover .selector-shape,.selector-choice:hover .selector-name{transform:none}
.selector-shape{aspect-ratio:auto;height:20px}
.selector-shape::before{mask:none;-webkit-mask:none;background:none;transform:none;filter:none}
.selector-name{word-spacing:0}
.selector-choice:focus-visible{outline:2px solid #347dff;outline-offset:-3px}
.disc-marks i{width:40%;height:40%;mask-size:150%}
.disc-marks i:first-child{top:2%;left:17%;transform:rotate(96deg)}
.disc-marks i:nth-child(2){top:24%;left:58%;transform:rotate(-25deg)}
.disc-marks i:last-child{top:52%;left:25%;transform:rotate(155deg)}
.sleeve-wordmark{font-size:88px;letter-spacing:-5px;transform:scaleX(.94)}
.sleeve-mark{width:220px;height:235px;left:0;bottom:-1px}
.mark-control{touch-action:none}
@media(max-width:540px){.selector-choice{height:44px;min-height:44px}.sleeve-wordmark{font-size:clamp(48px,16.4vw,70px)}.sleeve-mark{width:45%;height:43%;left:0;bottom:0}}
.selector-shape::before{content:'';inset:3px 2px;border-left:1px solid #888;border-right:1px solid #888;background:linear-gradient(#888,#888) left top/4px 1px no-repeat,linear-gradient(#888,#888) right top/4px 1px no-repeat,linear-gradient(#888,#888) left bottom/4px 1px no-repeat,linear-gradient(#888,#888) right bottom/4px 1px no-repeat}
.selector-shape::after{top:7px}
.record-disc{animation:record-turn 28s linear infinite;animation-play-state:paused}.disc-marks{animation:none}.audio-playing .record-disc{animation-play-state:running}
.changing-track .sculpture{translate:0 -45px}
@media(max-width:540px){.changing-track .sculpture{translate:0 -20px}}
@media(prefers-reduced-motion:reduce){.changing-track .sculpture{translate:0 0}}
/* Rotate inside the stationary circular clip, so transformed bounds cannot widen the page. */
.record-disc{animation:none}.track-spin{animation:record-turn 28s linear infinite;animation-play-state:paused}.audio-playing .track-spin{animation-play-state:running}
.sculpture .music-ink{display:block;mix-blend-mode:normal}
.upload-content .collection-open{position:static;inset:auto;transform:none;width:auto;height:auto}
@media(min-width:901px){.landing-layout{display:grid;grid-template-columns:1fr 490px 1fr;align-items:start}.about-panel{grid-column:1;grid-row:1}#stage{grid-column:2;grid-row:1;margin:176px 0 0}}
@media(min-width:901px) and (max-width:1150px){.landing-layout{grid-template-columns:1fr 420px 1fr}#stage{margin-top:176px}}

/* Figma details: independent strokes follow the cut corners, rather than clipping a rectangular border. */
.selector-choice{gap:12px;border:0;padding:5px 12px}.selector-shape{width:24px;flex-basis:24px;height:20px}.selector-shape::before{inset:0;border:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2020%22%3E%3Cpath%20d%3D%22M5%204H3v12h2M19%204h2v12h-2%22%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") center/24px 20px no-repeat}.selector-shape::after{left:9px;top:7px}
.selector-choice::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1%200V999H940L999%20670%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6d6%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.about-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1%201H999V495L930%20530V720L999%20760V910L930%20999H1Z%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6d6%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.strip-track,.strip-play{position:relative}.strip-track::after,.strip-play::after{content:"";position:absolute;inset:0;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat}.strip-track::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1%201H999V700L960%20999H1Z%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6d6%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E")}.strip-play::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1%201H999V999H500L1%20650Z%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6d6%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E")}
@media(max-width:540px){.about-panel::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1%201H999V495L960%20530V720L999%20760V940L960%20999H1Z%22%20fill%3D%22none%22%20stroke%3D%22%23d6d6d6%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E")}}

/* Preserve the prototype’s letter shapes independently of installed fonts. */
.sleeve-wordmark{display:block;top:32.18%;left:14.08%;width:72.04%;height:auto;transform:none;object-fit:contain}

/* Measured against the aligned 1280 × 832 Figma frame (not the surrounding prototype UI). */
@media(min-width:901px){#stage{margin-top:175.5px;margin-left:1px}}
.sculpture{inset:0 auto auto 5.51%;width:88.776%}.record-disc{background:#8d8d8d;box-shadow:none}.sleeve-glass{background:#d9d9d933}.sleeve-outline .sleeve-record-outline{fill:none;stroke:#d5d5d5;stroke-width:1}.sleeve-outline .fold{stroke:#e7e7e7;stroke-width:1.5}.sleeve-outline .shine{stroke:#e7e7e7;stroke-width:7;stroke-linecap:butt}.sleeve-outline .fold-tail{stroke:#e7e7e7;stroke-width:1.5}.sleeve-outline .fold-pin{fill:#d9d9d9;stroke:none}
.sleeve-mark{left:6.12245%;bottom:5%;width:31.42857%;height:32.72727%;filter:none}.about-mark{width:40px;height:48px;margin:0 0 13px;filter:none}.sleeve-wordmark{left:13.829%;width:72.34%;top:27.517%;overflow:visible}
.play-control{right:11px;bottom:68.5px}.play-label{font-size:12px;line-height:14px;margin-bottom:5px}.listen-state svg{stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.perforation{width:41px;height:41px;bottom:14px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2041%2041%22%3E%3Cg%20fill%3D%22%23d9d9d9%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%223%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%223%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%223%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%223%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%223%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2224%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2224%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2224%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2224%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2224%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2231%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2231%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2231%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2231%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2231%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2238%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2238%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%2238%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2238%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat;clip-path:none}.perforation.left{left:14px}.perforation.right{right:14px;transform:scaleX(-1)}
#selector-scene h2{height:33px;min-height:33px;line-height:17px}.selector-choice{height:34px;min-height:34px;gap:10px;padding:5px 11px}.selector-shape{width:28px;flex-basis:28px;height:20px}.selector-shape::before{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2020%22%3E%3Cpath%20d%3D%22M5%201H2v18h3M23%201h3v18h-3%22%20fill%3D%22none%22%20stroke%3D%22%23828384%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") center/28px 20px no-repeat}.selector-shape::after{left:11px;top:7px}.selector-choice[aria-pressed=true] .selector-shape::after{background:#2989ff}.selector-name{letter-spacing:-.6px}
.player-strip{margin-top:4px;height:34px}.strip-play{flex-basis:26px;width:26px}.elapsed{flex-basis:52px}.strip-play,.elapsed,.strip-track{background:#fafafa}.player-strip{gap:4px}
@media(max-width:540px){.play-control{right:2.245%;bottom:12.455%}.play-label{font-size:10px;line-height:12px}.perforation{width:8.367%;height:7.455%;bottom:2.545%}.perforation.left{left:2.857%}.perforation.right{right:2.857%}.selector-choice{height:44px;min-height:44px}.elapsed{flex-basis:48px}}

/* Disc marks fitted against aligned prototype pixels; artwork and animation remain live. */
.disc-marks i:nth-child(1){left:13%;top:2%;width:43%;height:43%;transform:rotate(99deg)}
.disc-marks i:nth-child(2){left:63%;top:28%;width:41%;height:41%;transform:rotate(48deg)}
.disc-marks i:nth-child(3){left:10%;top:55%;width:45%;height:45%;transform:rotate(160deg)}
.selector-choice{padding-left:13px}.perforation{bottom:18px}@media(max-width:540px){.perforation{bottom:3.273%}}

/* figma9: original design detail geometry. Figma strokes are 1px inside strokes in #d5d4d4 at every width. */
.sleeve-outline{stroke:#d5d4d4}
.sleeve-outline .sleeve-edge{fill:none;stroke:#d5d4d4;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.sleeve-outline .sleeve-record-outline{stroke:#d5d4d4;stroke-width:1;vector-effect:non-scaling-stroke}
.sleeve-outline .fold-line{fill:none;stroke:#d5d4d4;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-linecap:butt}
.sleeve-outline .fold-thick{fill:#d9d9d9;stroke:#d5d4d4;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.sleeve-outline .fold-pin{fill:#d9d9d9;stroke:none}
.strip-play,.strip-track{border:0;background:#fafafa;position:relative}
.strip-play::after,.strip-track::after{content:"";position:absolute;inset:0;pointer-events:none;background:#d5d4d4}
.strip-play{clip-path:polygon(0 0,100% 0,100% 100%,12.33px 100%,0 calc(100% - 8.66px))}
.strip-play::after{background-image:none;clip-path:polygon(evenodd,0 0,100% 0,100% 100%,12.33px 100%,0 calc(100% - 8.66px),0 0,1px 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - 1px),12.65px calc(100% - 1px),1px calc(100% - 9.18px),1px 1px)}
.strip-track{clip-path:polygon(0 0,100% 0,100% calc(100% - 8.66px),calc(100% - 12.21px) 100%,0 100%);padding-left:8px}
.strip-track::after{background-image:none;clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - 8.66px),calc(100% - 12.21px) 100%,0 100%,0 0,1px 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - 9.18px),calc(100% - 12.53px) calc(100% - 1px),1px calc(100% - 1px),1px 1px)}
.elapsed{border:1px solid #d5d4d4}
.player-strip{gap:3.76px}
.strip-play{flex:0 0 27.92px;width:27.92px}
.strip-play,.elapsed,.strip-track{background:#f3f3f3}
/* figma9: Figma sets this text at 14px (13px strip/timecode), Space Mono, -4% tracking. Desktop only; tablet/phone keep their adapted sizes. */
@media(min-width:1151px){.selector-name,.about-panel p{font-size:14px;letter-spacing:-.04em}.about-panel p{line-height:20px}#selector-scene h2,.upload-panel summary{font-size:14px;letter-spacing:-.01em}.elapsed,.strip-track,.now-title{font-size:13px;letter-spacing:-.04em}}

/* figma10: continuous outer right border down the whole collections list (Chris). Rows keep their own diagonals; their old right-edge segment is removed so the weight is not doubled. */
.selector-pair{position:relative;inset:auto}
.selector-pair{--row-h:34px}@media(max-width:540px){.selector-pair{--row-h:44px}}
/* figma11: the line stops where the last row's diagonal meets the right edge (67% of row height), not at the row baseline. */
.selector-pair::after{content:"";position:absolute;top:0;bottom:calc(var(--row-h) * .33);right:0;width:1px;background:#d6d6d6;pointer-events:none;z-index:1}

/* Safari: the turning disc keeps its round cut (border-radius+overflow on an animated layer) — isolate it. Hermes 31 Oct, matches the app fix. */
.record-disc{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}