:root{font-family:DM Sans,sans-serif;color:#ebece0;background:#161a17;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-size:15px}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #dae99a;outline-offset:5px}button{color:inherit}button:disabled{cursor:default}html,body,#root{height:100%}body{overflow:hidden}.site{position:fixed;inset:0;overflow:hidden}::selection{background:#d8e992;color:#161a17}.site-header{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 4%;gap:20px;background:linear-gradient(#0e120fdd,transparent);pointer-events:none}.site-header>*{pointer-events:auto}.wordmark{display:flex;align-items:center;gap:13px;font-family:Space Grotesk,sans-serif;font-size:15px;line-height:1.2;letter-spacing:-.4px}.wordmark b{font-size:23px;font-weight:600}.logo-dot{color:#d9ec94;font-size:26px}.logo-record{width:38px;height:38px;border-radius:50%;border:2px solid #d7e98e;background:radial-gradient(circle,#d7e98e 0 3px,transparent 4px 9px,#d7e98e 10px 11px,transparent 12px);transform:rotate(-20deg)}.header-right{display:flex;align-items:center;gap:35px}.edition{font-family:Space Grotesk,sans-serif;font-size:10px;letter-spacing:1.5px;color:#91978a}.language-toggle{display:flex;gap:8px;align-items:center;font-size:12px}.language-toggle button{border:0;background:none;padding:10px 6px;color:#949d90}.language-toggle button[aria-pressed=true]{color:#d8e991;font-weight:700}.language-toggle span{color:#59614f}.notices{position:absolute;z-index:5;top:88px;left:4%;display:grid;gap:6px;width:min(300px,92%);pointer-events:none}.notices .notice{border-radius:8px;text-align:left;padding:9px 14px;font-size:10px;letter-spacing:.5px}.world{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,#2c3526,#0e120f 70%)}.world canvas{touch-action:manipulation}.eyebrow{font-family:Space Grotesk,sans-serif;font-size:10px;letter-spacing:2px;font-weight:500;line-height:1.6}.live-dot{display:inline-block;width:6px;height:6px;background:#d8e991;border-radius:50%;margin-right:7px;vertical-align:middle}.intro-copy{position:absolute;z-index:3;left:5%;bottom:9%;max-width:440px;opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s;pointer-events:none}.intro-copy.visible{opacity:1;transform:none;pointer-events:auto}.intro-copy:not(.visible){visibility:hidden;transition:opacity .6s,transform .6s,visibility 0s .6s}.intro-copy .eyebrow{color:#c9d1b3;margin:0 0 18px}h1{font-family:Space Grotesk,sans-serif;font-size:clamp(34px,4vw,60px);line-height:1.06;font-weight:500;letter-spacing:-2.5px;margin:0 0 20px;text-shadow:0 4px 30px #000a}h1 span{display:block}.accent-line{color:#d8e992}.hero-subtitle{color:#c2c8b8;font-size:14px;line-height:1.7;margin:0 0 22px;text-shadow:0 2px 12px #000c}.skip-intro{border:1px solid #d8e99266;background:#0e120f99;border-radius:30px;padding:10px 18px;font-size:11px;letter-spacing:1px}.key-hint{position:absolute;z-index:3;bottom:22px;left:50%;transform:translate(-50%);margin:0;padding:9px 18px;border-radius:30px;background:#0e120fcc;border:1px solid #ffffff1a;font-family:Space Grotesk,sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#d8e992;white-space:nowrap;pointer-events:none;animation:hint 2.4s ease-in-out infinite}@keyframes hint{50%{opacity:.55}}.machine-controls{position:absolute;z-index:4;left:50%;bottom:18px;transform:translate(-50%);width:min(760px,94%);display:grid;gap:8px;padding:10px;border-radius:12px;background:#121712f2;border:1px solid #d8e99255}.has-scene .machine-controls:not(:focus-within){clip-path:inset(50%);width:1px;height:1px;padding:0;border:0;overflow:hidden}.control-sections{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.control-platforms{display:flex;gap:6px}.selector{display:flex;text-align:left;gap:10px;border:1px solid #46503d;background:#1d241d;border-radius:6px;padding:10px 12px}.selector.selected{border-color:#d8e992;background:#2e3926}.selector-index{font-family:Space Grotesk,sans-serif;font-size:10px;color:#859376;margin-top:3px}.selector strong{display:block;font-family:Space Grotesk,sans-serif;font-size:13px;font-weight:500}.selector small{display:block;color:#8e9984;font-size:10px;margin-top:4px}.platform-choice{flex:1;border:1px solid #46503d;background:#1d241d;border-radius:6px;padding:9px;font-size:11px;letter-spacing:1px}.platform-choice[aria-pressed=true].spotify{background:#1ed760;color:#0e120f}.platform-choice[aria-pressed=true].youtube{background:#ff4e45;color:#0e120f}.no-scene .world{display:flex;align-items:center;justify-content:center}.no-scene .machine-controls{top:150px;bottom:auto;left:4%;transform:none;width:min(420px,92%)}.no-scene .control-sections{grid-template-columns:1fr 1fr}.static-machine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.25);width:240px;height:385px;background:#634635;border-radius:130px 130px 10px 10px;border:7px solid #e0b881;box-shadow:inset 0 0 0 5px #394c30,0 24px 45px #0006;display:flex;flex-direction:column;align-items:center;padding:8px}.static-arch{width:100%;height:215px;border:4px solid #c5d58a;border-radius:110px 110px 0 0;background:#233024;display:flex;align-items:center;flex-direction:column;justify-content:center;overflow:hidden;gap:25px}.static-arch>span{font-family:Space Grotesk,sans-serif;font-size:14px;letter-spacing:5px;color:#d3c091}.static-discs{display:flex;transform:rotate(-18deg)}.static-discs i{width:84px;height:84px;border-radius:50%;border:1px solid #55634b;background:radial-gradient(circle,#151c15 4px,#debc80 5px 17px,#171f17 18px);margin:-12px}.static-keys{display:flex;gap:7px;padding:9px;background:#c3aa82;width:100%;justify-content:center}.static-keys i{width:35px;height:10px;background:#d8e992}.static-keys i:nth-child(2){background:#e99f7e}.static-keys i:nth-child(3){background:#a6bcdb}.static-keys i:nth-child(4){background:#c2a1d2}.static-grille{margin:8px;width:92%;flex:1;background:repeating-linear-gradient(0deg,#3d3e2c 0 3px,#a8885b 3px 10px)}.content-panel{position:absolute;z-index:4;top:0;right:0;bottom:0;width:clamp(420px,44vw,600px);overflow-y:auto;overscroll-behavior:contain;padding:104px 34px 34px;background:#121712f0;border-left:1px solid #d8e99233;box-shadow:-30px 0 60px #0008;opacity:0;transform:translate(40px);visibility:hidden;transition:opacity .45s,transform .45s,visibility 0s .45s}.content-panel.panel-ready{opacity:1;transform:none;visibility:visible;transition:opacity .45s,transform .45s}.content-panel:focus{outline:none}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:16px}.panel-heading .eyebrow{color:#bdc99c;margin:0 0 8px}h2{font-family:Space Grotesk,sans-serif;font-weight:500;font-size:32px;letter-spacing:-1.2px;margin:0}.close-panel{flex-shrink:0;background:none;border:1px solid #48513e;border-radius:30px;padding:10px 15px;font-size:11px;color:#b6c2a5}.close-panel span{margin-left:8px}.panel-demo{display:none}.platform-status{font-size:11px;color:#a9b59a;margin:0 0 20px}.cards{display:grid;gap:25px}.collection-card{border:1px solid #424b38;border-radius:10px;padding:25px;background:#1c231b;display:grid;grid-template-columns:150px 1fr;gap:20px}.cover{width:100%;aspect-ratio:1;border-radius:6px;object-fit:cover;position:relative;overflow:hidden;background:#d7e593;color:#243020;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}.cover-orbit{position:absolute;inset:-20%;border:1px solid #53644155;border-radius:50%;transform:rotate(-30deg) scaleY(.65);box-shadow:0 12px #53644122,0 24px #53644122,0 36px #53644122}.cover-disc{width:65%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#d9e58f 0 6%,#da9e79 7% 22%,#2b3926 23% 55%,#455037 56% 57%,#2b3926 58%);position:absolute;top:12%;left:25%;box-shadow:10px 12px #23311b14}.cover>span{font-family:Space Grotesk,sans-serif;z-index:1;font-weight:600;font-size:22px;letter-spacing:-1px;line-height:1.1;max-width:150px}.cover>small{font-size:6px;letter-spacing:1px;z-index:1;margin-top:9px}.cover-artist{background:#c1a2d0}.cover-explore{background:#e9aa88}.card-body .eyebrow{color:#becb9f;text-transform:uppercase}h3{font-family:Space Grotesk,sans-serif;font-size:30px;letter-spacing:-1px;line-height:1.2;font-weight:500;margin:12px 0}.description{color:#b1bca5;line-height:1.7;font-size:14px;max-width:640px}.curator-note{font-size:11px;color:#8f9e80;line-height:1.7}.platform-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;align-items:center}.platform{border:1px solid #697b51;padding:12px 15px;border-radius:5px;font-size:11px;display:flex;gap:20px;background:#2b3b23}.platform:hover{border-color:#d8e992}.platform.youtube{background:#352823;border-color:#735544}.platform.preferred{order:-1;flex-basis:100%;justify-content:space-between;font-size:13px;padding:15px 18px}.platform.spotify.preferred{background:#1ed760;border-color:#1ed760;color:#0e120f}.platform.youtube.preferred{background:#ff4e45;border-color:#ff4e45;color:#0e120f}.platform-links:has(.platform-row){flex-direction:column;align-items:stretch}.platform-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.platform-row .platform.preferred{flex:1 1 auto;flex-basis:auto}button.platform{font:inherit;font-size:12px;font-weight:600;color:#eef3df;cursor:pointer;text-align:left}button.platform:disabled{cursor:default;opacity:.75}.platform.secondary{background:transparent}.save-status{flex-basis:100%;margin:2px 0 0;font-size:11px;line-height:1.5;color:#d8e992}.save-status.error{color:#f1a17f}.save-status a{text-decoration:underline;margin-left:6px}.platform-status.connected{color:#d8e992}.disconnect{margin-left:10px;background:none;border:0;padding:0;font:inherit;color:#a9b59a;text-decoration:underline;cursor:pointer}.track-actions a.preferred{color:#d8e992;font-weight:700}.pending{font-size:10px;color:#aab39e;padding:9px 0;margin-right:12px}.save-hint{font-size:10px;line-height:1.5;color:#95a184}.track-list{grid-column:1/-1;list-style:none;padding:0;margin:0}.track-list li{display:flex;gap:17px;padding:13px 0;border-top:1px solid #3a4430;align-items:center}.track-number{font-size:10px;color:#93a181;font-family:Space Grotesk,sans-serif;min-width:20px}.track-list strong{font-weight:500;font-size:13px;display:block}.track-list li>div>span{font-size:11px;display:block;color:#99a98b;margin-top:4px}.track-list small{font-size:9px;display:block;color:#a7ad97;margin-top:4px}.track-actions{margin-left:auto;display:flex;gap:12px;font-size:10px}.track-actions a{padding:8px}.sync-time{font-size:10px;color:#99a58b;margin-top:25px}.notice{padding:12px 6%;color:#d3d6b6;background:#2c3023;font-size:11px;line-height:1.7;margin:0}.content-panel .notice{padding:12px 18px;margin-bottom:20px;border-radius:4px}.demo-notice{text-align:center;background:#3a3023;color:#eed4ad;letter-spacing:1px}.empty-state{padding:35px 0;color:#adb99d;line-height:1.6}.empty-state button,.empty-state a{display:inline-block;background:#d7e791;color:#23301f;padding:12px 20px;margin-right:12px;border:0;border-radius:4px;font-size:12px}.content-panel footer{margin-top:30px;padding-top:18px;border-top:1px solid #3a4430}.content-panel footer .eyebrow{font-size:8px;color:#a1b18c}.content-panel footer p{font-size:11px;color:#859577;margin:6px 0 0}.cover>span{font-size:17px}h3{font-size:24px}@media(max-width:850px){.edition{display:none}.content-panel{top:auto;left:0;width:auto;height:58%;padding:22px 18px 26px;border-left:0;border-top:1px solid #d8e99244;border-radius:18px 18px 0 0;box-shadow:0 -20px 50px #0009;transform:translateY(40px)}.control-sections{grid-template-columns:1fr 1fr}}@media(max-width:620px){.site-header{padding:16px 5%}.wordmark{font-size:12px}.wordmark b{font-size:19px}.logo-record{width:32px;height:32px}.notices{top:70px;left:5%;width:90%}.notices .notice{font-size:9px;padding:6px 12px}.stage-glass .notices,.stage-ready .notices{display:none}.no-scene .machine-controls{top:128px}.no-scene .selector small{display:none}.content-panel .panel-demo{display:block}.intro-copy{left:6%;right:6%;bottom:7%}h1{font-size:36px;letter-spacing:-1.5px}.hero-subtitle{font-size:13px}h2{font-size:25px}.collection-card{display:flex;flex-direction:column;gap:14px;padding:16px}.cover{max-width:200px;align-self:center}.static-machine{transform:translate(-50%,-50%) scale(.84)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}