@layer od-layout{ :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile)>:where(*){min-width:0}.od-stack{display:flex;flex-direction:column;gap:var(--od-gap,8px)}.od-row{display:flex;align-items:center;gap:var(--od-gap,8px)}.od-row-top{display:flex;align-items:flex-start;gap:var(--od-gap,8px)}.od-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--od-gap,8px)}.od-fill{flex:1 1 0;min-width:0}.od-fixed{flex:none}.od-grid{display:grid;gap:var(--od-gap,12px);grid-template-columns:repeat(var(--od-cols,3),minmax(0,1fr))}.od-stat,.od-field,.od-cell{display:grid;gap:var(--od-gap,2px)}:where(.od-stat,.od-field,.od-cell)>:where(*){display:block}.od-tile{display:grid;grid-template-rows:auto 1fr}:where(.od-tile)>:where(*){display:block}.od-media{display:block;width:100%;height:auto;aspect-ratio:var(--od-ratio,auto)}.od-media-cover{object-fit:cover}.od-truncate{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.od-clamp-2,.od-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.od-clamp-2{-webkit-line-clamp:2}.od-clamp-3{-webkit-line-clamp:3}.od-lines-2{min-height:calc(2 * 1.4em)}.od-nowrap{white-space:nowrap}.od-keep{word-break:keep-all;overflow-wrap:anywhere}.od-screen{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%}.od-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0}.od-rail{display:flex;gap:var(--od-gap,8px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-inline:var(--od-rail-pad,16px);scroll-padding-inline:var(--od-rail-pad,16px)}.od-rail::-webkit-scrollbar{display:none}:where(.od-rail)>:where(*){flex:none;scroll-snap-align:start}:where(.od-rail)>:where(:last-child){margin-inline-end:var(--od-rail-pad,16px)}.od-spacer{flex:none;visibility:hidden;pointer-events:none}.od-touch{min-width:44px;min-height:44px}}
/* /OD-LAYOUT-PRIMITIVES v1 */
@font-face{font-family:Space;src:url('assets/fonts/SpaceGrotesk-Variable.ttf')}@font-face{font-family:Plex;src:url('assets/fonts/IBMPlexMono-Regular.ttf')}
:root{--bg:#0a0b09;--surface:#121310;--surface2:#1b1c18;--line:#3b3c34;--text:#f2eee5;--muted:#aaa89e;--accent:#d8ff43;--danger:#ff806f;--radius:3px;--shadow:0 28px 80px #000a;--ease:220ms cubic-bezier(.2,.8,.2,1)}*{box-sizing:border-box}html{background:var(--bg);color:var(--text);scroll-behavior:smooth}body{margin:0;font:16px/1.55 Space,system-ui,sans-serif;background:radial-gradient(circle at 70% 20%,#202219 0,transparent 32%),var(--bg);min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}img{max-width:100%}.mono{font-family:Plex,monospace}.muted{color:var(--muted)}.app-header{position:sticky;top:0;z-index:40;background:#0a0b09ed;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:16px clamp(18px,4vw,56px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font-weight:780;font-size:20px;letter-spacing:-.04em}.brand-mark{width:31px;aspect-ratio:1;border:7px solid var(--text);border-radius:50%;box-shadow:inset 0 0 0 3px var(--bg)}.primary-nav{display:flex;justify-content:center;gap:6px}.nav-btn,.icon-btn,.ghost,.chip,.star,.track,.cover-card{border:0;color:inherit;background:transparent}.nav-btn{padding:10px 14px;color:var(--muted);border-bottom:2px solid transparent}.nav-btn[aria-pressed=true]{color:var(--text);border-color:var(--accent)}.header-actions{display:flex;gap:8px}.icon-btn,.ghost{min-height:44px;padding:10px 14px;border:1px solid var(--line);background:#11120f}.add{border:0;background:var(--accent);color:#0b0c08;font-weight:760}.shell{max-width:1600px;margin:auto;padding:0 clamp(18px,4vw,56px) 100px}.hero{padding:56px 0 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}.hero h1{font-size:clamp(52px,8vw,118px);line-height:.82;letter-spacing:-.075em;margin:0;max-width:8ch}.hero-copy{max-width:42ch;color:var(--muted);margin:18px 0 0}.count{font:12px Plex;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}.toolbar{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:10px;margin-bottom:20px}.field-inline{background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 14px}.field-inline input{width:100%;border:0;background:transparent;color:var(--text);min-height:48px;outline:0}.chip{min-height:48px;padding:0 16px;border:1px solid var(--line);background:var(--surface);white-space:nowrap}.stage{position:relative;min-height:480px;border-block:1px solid var(--line);background:#0b0c0a;overflow:hidden;isolation:isolate}.stage:after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,#090a08);pointer-events:none;z-index:1}#depthCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.48}.shelf{position:relative;z-index:2;min-height:480px;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,34px);padding:58px clamp(24px,7vw,120px) 72px;perspective:1300px;background:url('assets/render/record-bin-wide.png') center/cover no-repeat;mix-blend-mode:normal}.shelf:before{content:"";position:absolute;inset:0;background:#08090673;z-index:-1}.cover-card{width:clamp(150px,19vw,286px);text-align:left;transition:transform var(--ease),filter var(--ease);transform:rotateY(var(--turn,0deg)) translateZ(0);filter:saturate(.72) brightness(.7)}.cover-card:nth-child(1){--turn:10deg}.cover-card:nth-child(3){--turn:-10deg}.cover-card[aria-current=true]{transform:translateY(-22px) translateZ(70px);filter:none}.cover-frame{display:block;background:#171814;padding:10px;box-shadow:var(--shadow)}.cover-frame img{width:100%;height:auto;display:block}.cover-meta{display:block;margin-top:14px}.cover-title,.cover-artist{display:block}.cover-title{font-weight:740;font-size:18px}.cover-artist{color:var(--muted);font-size:14px}.selected{padding:72px 0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:clamp(32px,5vw,72px);align-items:start}.deck{position:relative;min-height:660px;background:#171813 url('assets/render/turntable-wide.png') center/cover no-repeat;box-shadow:var(--shadow);overflow:hidden}.deck:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090a0778,transparent 60%);pointer-events:none}.vinyl-wrap{position:absolute;z-index:2;left:9%;top:16%;width:min(56%,520px);aspect-ratio:1}.vinyl{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#151612 0 2px,#080906 3px 6px);box-shadow:0 28px 70px #000c;display:grid;place-items:center;transition:transform 360ms ease-out}.vinyl.spinning{animation:spin 8s linear infinite}.label{width:34%;aspect-ratio:1;border-radius:50%;object-fit:cover}.spindle{position:absolute;width:3%;aspect-ratio:1;background:#c5c7b7;border-radius:50%;z-index:3}.groove-marker{position:absolute;left:50%;top:50%;width:var(--ring,78%);aspect-ratio:1;border:3px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #0a0b09;transition:width 260ms ease-out}.cue-badge{position:absolute;z-index:4;left:24px;bottom:24px;background:#0b0c09e8;border:1px solid var(--line);padding:14px 16px;max-width:300px}.cue-badge b,.cue-badge span{display:block}.cue-badge span{font:12px Plex;color:var(--accent);margin-top:3px}.detail h2{font-size:clamp(44px,5vw,72px);line-height:.9;letter-spacing:-.055em;margin:14px 0 8px}.detail .artist{font-size:21px;color:var(--muted)}.facts{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.fact{font:12px Plex;border:1px solid var(--line);padding:7px 9px}.notice{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;color:var(--muted);font-size:14px}.notice strong{color:var(--accent)}.side-tabs{display:flex;gap:6px;margin:24px 0 10px}.side-tab{border:1px solid var(--line);background:transparent;color:var(--muted);min-width:52px;min-height:44px}.side-tab[aria-selected=true]{background:var(--text);color:#0b0c09}.tracks{display:grid}.track{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:13px 4px;border-bottom:1px solid #2d2e29;min-height:52px}.track span{display:block}.track .duration{font:12px Plex;color:var(--muted)}.track[aria-current=true]{color:var(--accent)}.track[aria-current=true] .duration{color:var(--accent)}.rating-note{margin-top:28px;display:grid;gap:18px}.stars{display:flex;gap:4px}.star{font-size:25px;color:#74736a;min-width:36px;min-height:44px}.star.on{color:var(--accent)}label{font:12px Plex;letter-spacing:.07em;text-transform:uppercase}.rating-note textarea{width:100%;min-height:88px;resize:vertical;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:12px}.save-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.save{min-height:46px;border:0;background:var(--accent);color:#090a07;padding:0 18px;font-weight:760}.status{font:12px Plex;color:var(--muted)}.states{border-top:1px solid var(--line);padding:56px 0}.states h2{font-size:clamp(34px,4vw,56px);margin:0 0 10px;letter-spacing:-.04em}.state-controls{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.service{min-height:82px;border:1px solid var(--line);padding:18px;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:20px}.service.loading{background:linear-gradient(90deg,#141510 25%,#24261c 50%,#141510 75%);background-size:240% 100%;animation:pulse 1.3s infinite}.service.error{border-color:var(--danger);color:#ffd2cc}.service.success{border-color:var(--accent)}.modal{position:fixed;inset:0;z-index:80;background:#000b;display:grid;place-items:center;padding:18px}.modal[hidden]{display:none}.dialog{width:min(680px,100%);max-height:92vh;overflow:auto;background:#11120f;border:1px solid var(--line);padding:24px}.dialog-head{display:flex;justify-content:space-between;gap:16px;align-items:start}.dialog h2{font-size:36px;line-height:1;margin:0 0 8px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.form-field{display:grid;gap:7px}.form-field.full{grid-column:1/-1}.form-field input,.form-field select,.form-field textarea{width:100%;background:#090a08;border:1px solid var(--line);color:var(--text);padding:12px;min-height:48px}.form-field textarea{min-height:88px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.toast{position:fixed;right:24px;bottom:24px;z-index:100;background:var(--accent);color:#090a07;padding:13px 18px;font-weight:720;box-shadow:var(--shadow)}.toast[hidden]{display:none}.mobile-nav{display:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{to{background-position:-240% 0}}
@media(max-width:900px){.app-header{grid-template-columns:1fr auto}.primary-nav{display:none}.header-actions .ghost{display:none}.shell{padding-bottom:110px}.hero{padding-top:36px}.hero h1{font-size:clamp(54px,14vw,90px)}.toolbar{grid-template-columns:1fr auto}.toolbar .chip:last-child{display:none}.shelf{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:10vw}.cover-card{min-width:230px;scroll-snap-align:center}.selected{grid-template-columns:1fr}.deck{min-height:600px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:repeat(3,1fr);background:#0a0b09f2;border-top:1px solid var(--line);padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(14px)}.mobile-nav button{border:0;background:transparent;color:var(--muted);min-height:52px}.mobile-nav button.active{color:var(--accent)}}
@media(max-width:560px){.app-header{padding:12px 16px}.brand{font-size:18px}.hero{grid-template-columns:1fr}.hero .count{display:none}.hero-copy{font-size:15px}.toolbar{grid-template-columns:1fr}.toolbar>.chip{display:none}.stage,.shelf{min-height:390px}.shelf{background-image:url('assets/render/record-bin-mobile.png');padding-block:44px 58px}.cover-card{min-width:190px}.selected{padding-top:44px}.deck{min-height:500px;background-image:url('assets/render/turntable-mobile.png')}.vinyl-wrap{left:7%;top:18%;width:70%}.cue-badge{left:14px;bottom:14px}.detail h2{font-size:52px}.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}.service{align-items:flex-start;flex-direction:column}.toast{left:16px;right:16px;bottom:82px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.vinyl.spinning{animation:none}}