@import url('/lab/brand.css');*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:var(--lyfar-font-sans);background:#10141d;color:#f5f5ef}canvas{display:block;touch-action:none}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #ffffff40;background:#ffffff12;color:inherit;padding:11px 16px;border-radius:5px;backdrop-filter:blur(12px)}button:hover,button[aria-pressed=true]{background:var(--lyfar-purple);border-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--lyfar-orange);outline-offset:3px}header{position:absolute;top:28px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;z-index:3;pointer-events:none}header>*{pointer-events:auto}a{color:inherit;text-decoration:none}.signature{font-size:15px;font-weight:650;letter-spacing:-.4px}.signature small{font-weight:400;opacity:.55;margin-left:12px}.back{font-size:13px;opacity:.65}.copy{position:absolute;left:32px;top:110px;pointer-events:none;z-index:2}h1{font-size:clamp(44px,6.6vw,100px);line-height:.9;letter-spacing:-.07em;margin:0;font-weight:500}.copy p{font-size:14px;line-height:1.5;max-width:290px;opacity:.65;margin-top:22px}.panel{position:absolute;bottom:28px;left:32px;right:32px;z-index:3;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.panel label{font-size:12px;display:flex;gap:10px;align-items:center;background:#0003;border:1px solid #ffffff20;padding:10px 14px;border-radius:5px;backdrop-filter:blur(15px)}input[type=range]{width:100px;accent-color:var(--lyfar-orange)}.readout{margin-left:auto;font-size:13px;opacity:.75;font-variant-numeric:tabular-nums}.badge{font-size:12px;background:#0003;backdrop-filter:blur(12px);border:1px solid #ffffff22;padding:10px 14px;border-radius:30px}.status{position:absolute;right:32px;top:110px;font-size:12px;line-height:1.8;text-align:right;opacity:.65;z-index:2}.hint{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);font-size:12px;opacity:.55;white-space:nowrap;pointer-events:none}.toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(30px,7vw,80px);letter-spacing:-.05em;pointer-events:none;opacity:0;transition:opacity .15s;z-index:5}.toast.show{opacity:1}@media(max-width:600px){header{top:20px;left:20px;right:20px}.signature small{display:none}.copy{left:20px;top:85px}.copy p{font-size:12px;max-width:220px;margin-top:14px}h1{font-size:52px}.panel{left:16px;right:16px;bottom:18px;gap:7px}.panel button{padding:10px 12px;font-size:12px}.panel label{font-size:11px;padding:9px}.readout{font-size:11px}.status{right:20px;top:235px;font-size:10px}.hint{bottom:145px;font-size:10px}.back{font-size:12px}input[type=range]{width:74px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}body{background:#c3cdd2;color:#192b32}main{display:grid;grid-template-columns:1fr 340px;height:100%;padding-right:6vw}.copy{top:110px}.copy p{margin:0 0 22px}.copy h1{font-size:clamp(60px,8vw,118px)}#desk{position:absolute;left:19%;top:26%;width:620px;height:470px;perspective:1200px;transform:rotate(-12deg)}#case{position:absolute;left:20px;top:25px;width:330px;height:330px;transform:rotateX(26deg) rotateY(-10deg);transform-style:preserve-3d;filter:drop-shadow(25px 35px 16px #1e29304a)}#tray{width:100%;height:100%;border-radius:4px;background:linear-gradient(125deg,#44525b,#1c2930);border:9px solid #a4b0b866;position:absolute;box-shadow:inset 0 0 0 2px #fff5}.tray-ring{position:absolute;inset:15px;border:4px solid #111;border-radius:50%;box-shadow:0 0 0 4px #ffffff14}.spindle{position:absolute;width:22px;height:22px;border:5px dotted #aaa;border-radius:50%;left:145px;top:145px}#cover{position:absolute;inset:0;border:6px solid #d2dde7aa;transform-origin:left center;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.8,.2,1);background:#fff3;box-shadow:3px 4px 10px #0005}#case.open #cover{transform:rotateY(-145deg)}.cover-art{overflow:hidden;position:absolute;inset:3px;background:var(--cover,#f15d3d);padding:18px;backface-visibility:hidden;color:#18252d}.cover-art span{font-size:12px;line-height:1.1;display:block}.cover-art strong{position:absolute;bottom:63px;left:18px;font-size:38px;font-weight:500;line-height:.9;letter-spacing:-2px;max-width:240px}.cover-art small{position:absolute;bottom:18px;left:18px;font-size:9px}.arc{position:absolute;border:23px solid #192b32;border-radius:50%;width:230px;height:230px;right:-100px;top:-70px}.arc.b{width:320px;height:320px;right:-145px;top:-115px}.arc.c{width:410px;height:410px;right:-190px;top:-160px}#disc{position:absolute;width:292px;height:292px;left:245px;top:150px;border-radius:50%;background:repeating-radial-gradient(circle,#fff0 0 2px,#fff4 2.3px 2.6px),conic-gradient(#bdd3df,#ffe0d5,#baf9df,#728dca,#e2f2fc,#fff8d4,#d5a0df,#bdd3df);box-shadow:12px 20px 20px #24353c55, inset 0 0 0 2px #fff7;cursor:grab;touch-action:none;transition:box-shadow .3s;z-index:2}#disc:active{cursor:grabbing;box-shadow:20px 30px 25px #24353c66}.hole{position:absolute;inset:43%;background:#8b9ba4;border:7px solid #e4ebee;border-radius:50%;box-shadow:0 0 0 12px #ffffff66}.disc-label{position:absolute;inset:40px;border:1px solid #52616a55;border-radius:50%;text-align:center;padding-top:7px;font-size:9px;letter-spacing:2px}.disc-label b{display:block;font-size:14px;letter-spacing:0;margin-top:9px}.disc-label small{position:absolute;bottom:26px;left:10px;right:10px;font-size:7px;letter-spacing:0}.desk-note{position:absolute;bottom:-8px;left:15px;font-size:11px;opacity:.5;transform:rotate(12deg)}.player{grid-column:2;margin:auto 0 160px;z-index:3}.edition{font-size:11px;opacity:.5}.player h2{font-size:33px;font-weight:500;letter-spacing:-1px;margin-bottom:10px}.player p{font-size:13px;opacity:.65;max-width:280px;line-height:1.5}.transport{display:flex;gap:8px;margin:25px 0 16px}button{border-color:#192b3240;background:#ffffff33}button:hover,button[aria-pressed=true]{background:#192b32;color:white}.progress{display:flex;align-items:center;gap:12px;font-size:10px}.progress input{width:100%}#tracks{margin-top:18px}#tracks button{display:flex;width:100%;justify-content:space-between;border:0;border-top:1px solid #192b3220;background:transparent;padding:12px 3px;font-size:12px;color:inherit}#tracks button.active{font-weight:700}#tracks button:hover{background:#fff3}.utility{display:flex;gap:8px;margin-top:20px}.utility button{font-size:11px}.panel label{border-color:#192b3220;background:#fff2}.editions{display:flex;gap:7px}dialog{background:#f4f3ec;color:#18252d;border:0;border-radius:3px;padding:45px;max-width:650px;width:90%;box-shadow:0 25px 150px #0008}dialog::backdrop{background:#1a2b32a0;backdrop-filter:blur(8px)}dialog h2{font-size:48px;font-weight:500;letter-spacing:-3px;line-height:1}dialog p{line-height:1.6}#close-book{position:absolute;right:15px;top:10px;border:0;font-size:25px}.colophon{font-size:11px;opacity:.5}#book-art{height:120px;background:repeating-linear-gradient(130deg,var(--cover,#f15d3d) 0 20px,#18252d 20px 24px);margin:25px 0}#book-page{float:right;font-size:12px;margin-top:15px}@media(max-width:1000px){#desk{left:6%;transform:scale(.85) rotate(-12deg);transform-origin:left top}.player{width:280px}main{grid-template-columns:1fr 280px;padding-right:30px}.copy{top:85px}.copy h1{font-size:70px}}@media(max-width:650px){main{display:block;padding:0}.copy{top:75px}.copy p{font-size:10px;max-width:220px;margin-bottom:8px}.copy h1{font-size:48px}.copy h1 br{display:none}#desk{top:23%;left:4%;transform:scale(.55) rotate(-12deg)}.player{position:absolute;left:20px;right:20px;bottom:162px;margin:0;width:auto}.edition,.player p,#tracks,.progress{display:none}.player h2{font-size:23px;margin:0}.transport{margin:12px 0 0;float:left}.utility{float:right;margin-top:12px;gap:5px}.utility button{font-size:10px;padding:11px 9px}.transport button{padding:9px 12px}.panel{bottom:18px}.editions{width:100%;gap:5px}.editions button{flex:1;font-size:10px;padding:10px 7px}.readout{font-size:9px;max-width:145px}.desk-note{display:none}dialog{padding:30px}dialog h2{font-size:38px}}