@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{color-scheme:dark;--text:#f6edeb;--muted:#a99aaa;--accent:#ff7b2d;--glass:rgba(5,5,12,.82)}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;min-height:660px}body{background:#000;color:var(--text);font-family:'DM Sans',sans-serif}#app{position:relative;overflow:hidden;background:#000}#scene{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%;outline:none}.grain{display:none;pointer-events:none;position:absolute;inset:0;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.13' filter='url(%23n)'/%3E%3C/svg%3E")}.topbar{position:absolute;left:5.2%;right:5.2%;top:36px;display:flex;align-items:center;justify-content:space-between;z-index:5}.brand{font-size:22px;font-weight:700;letter-spacing:-1.15px;color:var(--text);text-decoration:none}.brand span{color:var(--accent)}.top-right{font-size:9px;letter-spacing:2px;color:#c0b4c1;display:flex;align-items:center;gap:12px}.live-dot{width:7px;height:7px;border-radius:50%;background:#efa477;box-shadow:0 0 15px #ff865d}.top-right button{margin-left:16px;border:1px solid #6b5665;border-radius:9px;padding:6px 11px;background:#ffffff0b;color:white;font-size:20px;cursor:pointer}.intro{position:absolute;top:32%;left:8%;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2.5px;color:#e6ae99;font-weight:700}.intro h1{font-size:clamp(40px,5vw,82px);line-height:1.13;letter-spacing:-2px;margin:22px 0}.intro h1 em{font-family:'Playfair Display',serif;color:var(--accent);font-weight:500}.intro p{font-size:14px;line-height:1.9;color:#b6a7b9}.panel{position:absolute;right:5%;top:50%;transform:translateY(-45%);width:278px;padding:25px 24px;background:var(--glass);backdrop-filter:blur(18px);border:1px solid #ffffff20;border-radius:16px;box-shadow:0 25px 65px #0004;transition:opacity .25s,translate .25s}.panel.collapsed{opacity:0;pointer-events:none;translate:30px 0}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.panel h2{font-size:21px;margin:7px 0 0;letter-spacing:-.5px}.panel-icon{color:#d6a1bc;font-size:26px}.panel label{display:flex;justify-content:space-between;font-size:11px;color:#e5d9e4;margin:17px 0 8px}.panel output{color:var(--accent);font-variant-numeric:tabular-nums}.panel input[type=range]{width:100%;margin:0;accent-color:var(--accent);height:3px;cursor:pointer}.palette-wrap{margin-top:21px}.palette-label{font-size:9px;letter-spacing:1.9px;color:#b5a2b6}.palettes{display:flex;gap:12px;margin-top:12px}.swatch{background:var(--sw);width:23px;height:23px;border:3px solid #ffffff22;border-radius:50%;cursor:pointer}.swatch.active{outline:1px solid white;outline-offset:3px}.actions{display:flex;gap:6px;margin-top:20px}.actions button{background:#ffffff0d;color:#e7dce7;border:1px solid #ffffff23;border-radius:6px;padding:9px 9px;flex:1;font-size:10px;cursor:pointer}.actions button:hover,.top-right button:hover{background:#ffffff20}.telemetry{margin-top:24px;padding-top:14px;border-top:1px solid #ffffff20}.telemetry span{display:flex;justify-content:space-between;font-size:8px;color:#a79aaa;letter-spacing:1px;margin-top:9px}.telemetry b{color:#e5c4b7;font-size:8px;font-weight:500;letter-spacing:.3px}footer{position:absolute;bottom:35px;left:5.2%;right:5.2%;display:flex;justify-content:space-between;color:#8a788c;letter-spacing:1.7px;font-size:9px;pointer-events:none}.heart{color:#e98b93}@media(max-width:930px){.intro{top:17%;left:6%}.intro h1{font-size:46px}.panel{right:4%;top:auto;bottom:75px;transform:none;width:260px;padding:18px}.topbar{top:20px}.intro p{display:none}}@media(max-width:570px){html,body,#app{min-height:760px}.intro{top:90px}.intro h1{font-size:35px;margin:12px 0}.panel{bottom:45px;right:5%;left:5%;width:auto;padding:17px;max-height:390px;overflow:auto}.panel label{margin:10px 0 5px}.panel-head{margin-bottom:8px}.telemetry{display:none}footer{bottom:13px;font-size:7px}.top-right{font-size:0}.live-dot{display:none}}

.actions button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent),transparent 78%)}
.panel{border-color:#ffffff14;box-shadow:0 20px 90px #000b,0 0 35px #521a8515}
.intro h1 em{text-shadow:0 0 24px color-mix(in srgb,var(--accent),transparent 67%)}

/* v0.7 experimental controls */
.section-label{margin:18px 0 11px;font-size:10px;letter-spacing:.17em;color:#c69cff;font-weight:700}
.checkrow{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin:14px 0!important}
.checkrow input[type=checkbox]{appearance:auto;width:18px;height:18px;accent-color:#b370ff;cursor:pointer}

/* v0.8: give the growing laboratory its own scroll, even on desktop. */
.panel{max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) #ffffff10;}
.panel::-webkit-scrollbar{width:7px}.panel::-webkit-scrollbar-thumb{background:var(--accent);border-radius:9px}.panel::-webkit-scrollbar-track{background:#ffffff0d;border-radius:9px}
.actions{flex-wrap:wrap}.actions button{flex:1 1 42%;min-width:88px}
@media(max-width:930px){.panel{max-height:min(62dvh,620px)}}
@media(max-width:570px){.panel{max-height:min(50dvh,420px)}}