:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d1420;color:#eaf0f3;overflow:hidden}
.app{height:100dvh;min-height:530px;position:relative;background:radial-gradient(circle at 54% 43%,#24313b 0,#101821 36%,#080d13 86%);isolation:isolate}
#viewport{position:absolute;inset:0;z-index:1;cursor:grab}#viewport:active{cursor:grabbing}#viewport canvas{display:block;width:100%;height:100%}
.topbar{pointer-events:none;position:absolute;top:0;left:0;right:0;height:79px;padding:0 clamp(22px,3vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(190,203,212,.14);z-index:4;font-size:12px;letter-spacing:.145em}
.brand{color:#d6dde1;font-weight:400}.brand-strong{color:#fff;font-weight:780}.brand-mark{color:#d4a96c;font-size:23px;vertical-align:-2px;margin-right:9px}.topbar-label{color:#7b8b99;margin-left:12px}.topbar-right{font-size:10px;color:#9baab5}.status-dot{height:6px;width:6px;background:#d9af74;border-radius:50%;display:inline-block;margin:0 9px 1px 0;box-shadow:0 0 10px #d9af74}.sep{color:#4e6071;margin:0 13px}
.hero-title{pointer-events:none;position:absolute;top:clamp(108px,17vh,190px);left:clamp(24px,4vw,86px);z-index:3;max-width:380px}
.eyebrow{color:#c29b67;letter-spacing:.24em;font-size:10px;font-weight:730;display:flex;align-items:center;gap:12px;white-space:nowrap}.eyebrow-rule{display:inline-block;width:24px;height:1px;background:#9d7955}
h1{font-weight:750;font-size:clamp(55px,5.1vw,96px);letter-spacing:-.065em;line-height:1.0;margin:24px 0 14px}h1 em{display:block;font-style:normal;font-weight:350;color:#e5ba83;letter-spacing:-.045em}.hero-title p{color:#e6ebea;font-size:17px;font-weight:300;margin:0 0 14px}.hero-micro{color:#798994;line-height:1.8;font-size:11px;letter-spacing:.07em}.hero-micro span{padding:0 5px;color:#dcb27d}
.control-card{position:absolute;right:clamp(16px,3.3vw,68px);bottom:clamp(64px,12vh,136px);z-index:5;width:354px;max-width:calc(100vw - 32px);padding:25px 25px 21px;background:rgba(13,21,30,.91);border:1px solid rgba(164,186,203,.22);box-shadow:0 16px 76px #0008;backdrop-filter:blur(18px);border-radius:6px}
.control-card-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.14em;color:#a9b4bb}.LIVE{color:#e1b27a;font-size:10px}.readout{display:flex;align-items:center;justify-content:space-between;margin-top:32px;margin-bottom:21px}.micro{font-size:9px;color:#748693;letter-spacing:.15em;display:block}.fnumber{font-size:46px;font-weight:450;letter-spacing:-.065em;margin-top:9px;font-variant-numeric:tabular-nums}.pupil{border-left:1px solid #30404b;padding-left:21px;font-size:25px;color:#ddb17d;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.pupil small{display:block;color:#758895;font-size:8px;letter-spacing:.15em;margin-top:5px}
input[type=range]{width:100%;height:5px;accent-color:#d0a672;cursor:ew-resize;outline:none}.range-label{display:flex;justify-content:space-between;font-size:11px;color:#e5e4df;font-weight:600;margin-top:10px}.range-label small{font-size:9px;color:#697e8d;font-weight:400;margin-left:2px}
.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:23px 0 22px}.buttons button{border:1px solid rgba(179,199,210,.2);background:#1c2a35;color:#d2dbe0;min-height:39px;border-radius:4px;cursor:pointer;font-size:10px;letter-spacing:.055em;font-weight:650}.buttons button:last-child{grid-column:span 2}.buttons button:hover,.buttons button.active{border-color:#b99163;background:#3f342e;color:#f4dac0}.sym{font-size:19px;vertical-align:-2px;margin-right:5px}.control-foot{padding-top:20px;border-top:1px solid rgba(170,187,198,.15);display:flex;justify-content:space-between;gap:5px}.control-foot strong{font-size:11px;font-weight:500;letter-spacing:.045em;color:#d9e1e3;display:block;margin-top:10px}
.focus-label{pointer-events:none;position:absolute;left:clamp(24px,4vw,86px);bottom:120px;color:#91a5b3;font-size:10px;letter-spacing:.13em;z-index:3;max-width:340px}.cross{color:#e0b278;font-size:25px;vertical-align:-4px;padding-right:6px}
.bottom-hint{pointer-events:none;position:absolute;bottom:33px;left:50%;transform:translateX(-50%);color:#748693;font-size:10px;letter-spacing:.11em;white-space:nowrap;z-index:3}
.loading{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.13em;background:#14202bcf;padding:25px 32px;border:1px solid #324554;display:flex;gap:17px;align-items:center}.spin{border:2px solid #334451;border-top-color:#d3a56f;width:22px;height:22px;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.error{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);background:#39252b;color:#ffd6cc;padding:20px;z-index:9;max-width:80vw;font-size:14px}
@media(max-width:860px){.topbar-right{display:none}.topbar{height:61px}.hero-title{top:84px;left:22px}.hero-title h1{font-size:54px;margin:14px 0 6px}.hero-title p{font-size:13px}.hero-micro{display:none}.control-card{right:12px;left:12px;bottom:37px;width:auto;padding:14px 17px}.control-card-top{font-size:9px}.readout{margin:15px 0 12px}.fnumber{font-size:33px}.pupil{font-size:19px}.buttons{margin:13px 0 12px}.buttons button{min-height:34px}.control-foot{display:none}.focus-label{bottom:340px;left:18px;font-size:9px}.bottom-hint{display:none}}