:root{--bg: #161616;--concrete: #2b2b2b;--concrete-2: #333;--line: #000;--ink: #e8e8e3;--dim: #8a8a82;--hot: #ff5722;--hot-2: #ffab40;--cyan: #26c6da;--cyan-2: #80deea;--violet: #b388ff;--green: #69f0ae;--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(120% 80% at 50% -10%,#242424 0%,var(--bg) 60%,#0d0d0d 100%);color:var(--ink);font-family:Courier New,ui-monospace,monospace;font-weight:700;letter-spacing:.5px;-webkit-font-smoothing:none;overflow-x:hidden;min-height:100%}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;background:var(--grain);background-size:180px 180px;opacity:.05;mix-blend-mode:overlay}button{font-family:inherit;font-weight:700;border:0;background:none;color:inherit;cursor:pointer}input{font-family:inherit;font-weight:700}a{color:inherit;text-decoration:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--ink);color:#000;border:3px solid #000;padding:9px 14px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;box-shadow:4px 4px #000,inset 0 2px #ffffff47,inset 0 -4px 7px #00000038;transition:transform .05s,box-shadow .05s,filter .1s}.btn:hover{filter:brightness(1.12) saturate(1.1)}.btn:active{transform:translate(4px,4px);box-shadow:0 0 #000,inset 0 2px 5px #0006}.btn:focus-visible{outline:3px solid var(--cyan-2);outline-offset:2px}.btn.sm{padding:5px 9px;font-size:11px;box-shadow:3px 3px #000,inset 0 2px #ffffff40,inset 0 -3px 6px #00000038}.btn.sm:active{transform:translate(3px,3px);box-shadow:0 0 #000}.btn.sq{width:40px;height:40px;padding:0}.btn.sq svg{width:16px;height:16px}.btn-play{background:var(--hot);width:52px;height:40px}.btn-play svg{width:17px;height:17px}.ic{width:30px;height:30px;display:grid;place-items:center;color:var(--dim);border:2px solid transparent;transition:color .12s,border-color .12s}.ic:hover{color:var(--cyan);border-color:#000}.ic svg{width:16px;height:16px}.panel{background:linear-gradient(180deg,#363636,#2c2c2c);border:3px solid var(--line);border-left:6px solid var(--cyan);box-shadow:6px 6px #000000b3,inset 0 1px #ffffff0d;padding:12px}.panel-title{margin:0 0 9px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:9px}.panel-title:before{content:"";width:9px;height:14px;background:var(--hot);box-shadow:2px 2px #000}.val{color:var(--cyan-2);font-size:13px;background:#0a0a0a;padding:3px 6px;border:2px solid #444;text-align:center;box-shadow:inset 0 0 6px #000c,inset 0 0 0 1px #000;text-shadow:0 0 6px rgba(128,222,234,.5);flex:none}.tag{font-size:10px;letter-spacing:2px;text-transform:uppercase;background:var(--hot);color:#000;padding:4px 9px;border:2px solid #000;box-shadow:3px 3px #000}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;min-width:60px;height:9px;background:linear-gradient(180deg,#000,#1c1c1c);outline:none;border:2px solid #555;box-shadow:inset 0 1px 3px #000c;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:20px;background:linear-gradient(180deg,#ff7a52,var(--hot));border:2px solid #000;box-shadow:0 0 0 1px #000,inset 0 2px #fff6,2px 2px #00000080}input[type=range]::-moz-range-thumb{width:14px;height:20px;border-radius:0;background:var(--hot);border:2px solid #000}input[type=range]:focus-visible{border-color:var(--cyan)}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;touch-action:none}.site-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px 18px;background:linear-gradient(180deg,#f2f2ec,#d9d9d0);color:var(--line);border-bottom:4px solid var(--line)}.site-header:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:repeating-linear-gradient(90deg,var(--hot) 0 18px,#000 18px 26px)}.logo{font-size:26px;letter-spacing:4px;line-height:1;text-shadow:2px 2px 0 #bdbdb3,3px 3px 0 rgba(0,0,0,.15)}.logo small{display:block;margin-top:1px;font-size:10px;letter-spacing:5px;text-transform:uppercase;color:#6a6a60;text-shadow:none}.site-nav{display:flex;gap:18px}.site-nav a{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#4a4a44;padding:4px 2px;border-bottom:3px solid transparent}.site-nav a:hover{color:#000}.site-nav a.is-active{color:#000;border-bottom-color:var(--hot)}.site-nav a.is-soon{opacity:.4;cursor:default}.header-tools{display:flex;align-items:center;gap:8px}.header-tools .ic{color:#4a4a44}.header-tools .ic:hover{color:#000;border-color:#000}.stage-layer{position:relative;z-index:2;min-height:calc(100vh - 190px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto;padding:22px 18px 0;pointer-events:none}.stage-layer>*{pointer-events:auto;min-width:0}.hero{grid-row:1;align-self:start;max-width:420px}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--hot)}.eyebrow i{width:26px;height:12px;background:var(--hot);box-shadow:2px 2px #000}.hero h1{margin:0;font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:2px;text-transform:uppercase;text-shadow:3px 3px 0 rgba(0,0,0,.85)}.speed{position:absolute;left:18px;top:clamp(220px,34vh,330px);border-left-color:var(--hot)}.speed-switch{display:flex}.speed-switch button{min-width:52px;padding:7px 10px;font-size:12px;letter-spacing:1px;color:var(--ink);background:linear-gradient(180deg,#3a3a3a,#2c2c2c);border:3px solid #000;box-shadow:inset 0 2px 4px #00000080}.speed-switch button+button{border-left-width:0}.speed-switch button.is-on{background:#000;color:var(--hot);border-color:var(--hot);box-shadow:0 0 9px #ff57228c inset}.view{position:absolute;right:18px;top:clamp(220px,34vh,330px);border-left-color:var(--violet)}.btn-view{background:var(--concrete-2);color:var(--ink);font-size:11px;letter-spacing:1.5px}.btn-view svg{width:15px;height:15px}.btn-view>span:first-child{display:grid;place-items:center}.player{grid-row:2;justify-self:center;width:min(780px,100%);margin-bottom:10px;display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(160px,1.4fr) auto;align-items:center;gap:14px;padding:11px 14px 11px 16px;background:linear-gradient(180deg,#363636,#2c2c2c);border:3px solid var(--line);border-left:6px solid var(--hot);box-shadow:8px 8px #000c,inset 0 1px #ffffff0d,inset 0 -10px 24px #0000002e}.now{display:flex;align-items:center;gap:11px;min-width:0}.now-cover{width:44px;height:44px;flex:none;border:2px solid #000;box-shadow:3px 3px #000;overflow:hidden}.now-cover canvas{width:100%;height:100%;display:block}.now-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.now-meta strong{font-size:12px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-meta em{font-style:normal;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transport{display:flex;align-items:center;gap:7px}.scrub{display:flex;align-items:center;gap:9px;min-width:0}.vol{display:flex;align-items:center;gap:7px}.vol input[type=range]{width:76px;min-width:0}.shelf{grid-row:3;margin:0 -18px;padding:14px 18px 20px;background:linear-gradient(180deg,#1e1e1e,#131313);border-top:3px solid #000;box-shadow:inset 0 3px #ffffff0d,0 -10px 26px #0000008c}.shelf-head{display:flex;align-items:center;gap:12px;padding-bottom:10px;margin-bottom:14px;border-bottom:3px solid #000;box-shadow:0 3px #ffffff0a}.shelf-head h2{margin:0;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:9px}.shelf-head h2:before{content:"";width:9px;height:14px;background:var(--cyan);box-shadow:2px 2px #000}.shelf-count{font-size:10px;letter-spacing:2px;color:var(--hot)}.rail-nav{margin-left:auto;display:flex;gap:6px}.rail-nav .btn[disabled]{opacity:.3;pointer-events:none}.rail{display:flex;min-width:0;gap:14px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:4px 4px 10px 0}.rail::-webkit-scrollbar{height:10px}.rail::-webkit-scrollbar-track{background:#0d0d0d;border:2px solid #000}.rail::-webkit-scrollbar-thumb{background:var(--hot);border:2px solid #000}.sleeve{position:relative;flex:none;width:clamp(120px,12vw,148px);padding:0;text-align:left;background:none;transition:transform .06s}.sleeve-art{display:block;border:3px solid #000;box-shadow:4px 4px #000;transition:box-shadow .06s,transform .06s}.sleeve-art canvas{width:100%;display:block;aspect-ratio:1}.sleeve:hover .sleeve-art{transform:translate(-2px,-2px);box-shadow:6px 6px #000}.sleeve:active .sleeve-art{transform:translate(4px,4px);box-shadow:0 0 #000}.sleeve.is-on .sleeve-art{box-shadow:4px 4px #000,0 0 0 3px var(--hot)}.sleeve-meta{display:block;margin-top:9px}.sleeve-meta strong{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sleeve-meta em{display:block;font-style:normal;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sleeve.is-on .sleeve-meta strong{color:var(--hot)}.site-footer{position:relative;z-index:3;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 18px;background:linear-gradient(180deg,#e9e9e2,#d2d2c8);color:#4a4a44;border-top:4px solid var(--line);font-size:10px;letter-spacing:1px;text-transform:uppercase}.site-footer:before{content:"";position:absolute;left:0;right:0;top:-4px;height:4px;background:repeating-linear-gradient(90deg,var(--cyan) 0 18px,#000 18px 26px)}.foot-note{margin-left:auto;opacity:.7}.kbd{background:#000;color:var(--ink);padding:2px 7px;border:2px solid #555;margin:0 2px;box-shadow:2px 2px #0006}.boot{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;background:var(--bg);transition:opacity .45s ease,visibility .45s}.boot span{width:44px;height:44px;border:4px solid #000;background:linear-gradient(180deg,#ff7a52,var(--hot));box-shadow:6px 6px #000;animation:spin 1.1s steps(8) infinite}.boot.is-done{opacity:0;visibility:hidden}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}.boot span{animation:none}.rail{scroll-behavior:auto}}@media(max-width:920px){.site-nav{display:none}.stage-layer{padding:16px 12px 0}.speed{left:12px;top:auto;bottom:250px}.view{right:12px;top:auto;bottom:250px}.shelf{margin:0 -12px;padding:12px 12px 18px}.player{grid-template-columns:1fr auto;grid-template-areas:"now transport" "scrub scrub";gap:10px}.now{grid-area:now}.transport{grid-area:transport}.scrub{grid-area:scrub}.vol{display:none}.hero h1{font-size:26px}.foot-note{display:none}}