:root{--accent:#e3ad70;--white:#f5f7fa;--muted:#a7b5be;--glass:rgba(10,20,31,.78);--border:rgba(205,232,247,.14);color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07121a;color:var(--white);font-family:'DM Sans',Inter,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#viewport{position:absolute;inset:0}#viewport canvas{display:block;width:100%;height:100%}.veil{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,13,23,.79) 0%,rgba(4,13,23,.23) 38%,transparent 62%,rgba(4,13,23,.28) 100%),linear-gradient(0deg,rgba(3,12,22,.83) 0%,transparent 24%);z-index:1}
#app{position:absolute;inset:0;pointer-events:none;z-index:2}.topbar{height:79px;display:flex;justify-content:space-between;align-items:center;padding:0 35px;border-bottom:1px solid var(--border);background:rgba(5,13,22,.60);backdrop-filter:blur(22px)}.topbar >*,.leftpanel >*,.rightpanel >*,.bottombar >*{pointer-events:auto}.brand{display:flex;align-items:center;gap:13px}.brandmark{height:39px;width:39px;display:grid;place-items:center;background:var(--accent);color:#101a22;border-radius:11px;font-size:22px;font-weight:900;box-shadow:0 0 26px color-mix(in srgb,var(--accent),transparent 68%)}.brand small{display:block;font-weight:700;letter-spacing:.18em;color:var(--muted);font-size:9px}.brand strong{font:700 17px 'Space Grotesk',sans-serif;letter-spacing:.055em}.navright{display:flex;gap:15px;align-items:center}.tag{display:flex;gap:8px;align-items:center;font-size:10px;letter-spacing:.16em;font-weight:700;color:#b9c8d4}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#77e5a9;box-shadow:0 0 13px #77e5a9}.navbtn{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;color:white;font-size:11px;font-weight:700;letter-spacing:.08em;padding:11px 14px}.navbtn:hover{border-color:var(--accent)}.leftpanel{position:absolute;left:35px;top:113px;max-width:380px}.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--accent);font-weight:800;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';display:inline-block;width:24px;height:1px;background:var(--accent)}h1{font:700 clamp(39px,4.7vw,67px)/.94 'Space Grotesk',sans-serif;margin:18px 0 11px;letter-spacing:-.065em;white-space:nowrap}h1 b{color:var(--accent)}.subhead{font-size:12px;letter-spacing:.1em;font-weight:700;color:#c7d3df}.description{max-width:310px;font-size:12px;line-height:1.8;color:#a6b8c3;margin-top:16px}.scene-label{margin-top:27px;display:flex;align-items:center;gap:12px;font-size:10px;font-weight:700;letter-spacing:.1em;color:#d8ecfa}.scene-label span{border:1px solid var(--accent);border-radius:50%;height:23px;width:23px;color:var(--accent);display:grid;place-items:center;font-size:10px}
.rightpanel{position:absolute;right:35px;top:104px;width:307px;max-height:calc(100vh - 232px);overflow:auto;padding:22px 23px 19px;background:var(--glass);backdrop-filter:blur(22px);border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 75px rgba(0,0,0,.27);scrollbar-width:thin;scrollbar-color:#5a6d7c transparent}.paneltop{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;margin-bottom:15px;border-bottom:1px solid var(--border)}.paneltop strong{font-size:11px;letter-spacing:.16em}.paneltop span{font:10px 'Space Grotesk',sans-serif;color:#8db6b9}.control{margin:17px 0 21px}.controlhead{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.11em;font-weight:700;color:#adc2cf}.value{font:700 12px 'Space Grotesk',sans-serif;color:var(--accent);letter-spacing:0}input[type=range]{appearance:none;width:100%;height:4px;background:linear-gradient(90deg,var(--accent) 0%,rgba(255,255,255,.14) 0%);border-radius:99px;margin:16px 0 4px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;height:12px;width:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent),transparent 80%)}.controlrange{display:flex;justify-content:space-between;color:#607889;font-size:9px}.toggle{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid rgba(255,255,255,.075);gap:8px}.toggle label{font-size:10px;font-weight:700;letter-spacing:.06em;color:#c4d6e0}.switch{appearance:none;position:relative;width:34px;height:19px;background:#3a4654;border-radius:20px;cursor:pointer;transition:.2s}.switch:before{content:'';position:absolute;width:13px;height:13px;left:3px;top:3px;background:#eaf3f6;border-radius:50%;transition:.2s}.switch:checked{background:var(--accent)}.switch:checked:before{transform:translateX(15px);background:#16222b}.actionrow{display:flex;gap:8px;margin-top:16px}.primary{flex:1;background:var(--accent);color:#11212a;border:0;border-radius:7px;font-size:10px;letter-spacing:.08em;font-weight:800;padding:12px 9px}.secondary{background:rgba(255,255,255,.07);color:white;border:1px solid var(--border);border-radius:7px;font-weight:800;letter-spacing:.07em;padding:12px 12px;font-size:10px}.primary:hover{filter:brightness(1.13)}.secondary:hover{border-color:var(--accent)}
.bottombar{position:absolute;bottom:26px;left:35px;right:35px;min-height:103px;display:flex;align-items:center;gap:20px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(102px,1fr));width:min(760px,calc(100% - 340px));background:rgba(10,20,31,.78);backdrop-filter:blur(19px);border:1px solid var(--border);border-radius:11px;min-height:94px}.metric{padding:18px 17px;position:relative}.metric+.metric:before{content:'';position:absolute;left:0;top:21px;bottom:20px;width:1px;background:var(--border)}.metric label{display:block;font-size:9px;letter-spacing:.1em;font-weight:700;color:#94abb9;white-space:nowrap}.metric strong{display:block;font:700 24px 'Space Grotesk',sans-serif;color:white;margin-top:7px}.metric strong em{font-size:11px;color:var(--accent);font-style:normal;font-weight:500;margin-left:4px}.footdetails{margin-left:auto;text-align:right;color:#8ea8b7;font:11px/1.8 'Space Grotesk',sans-serif}.footdetails strong{color:#d4e7eb;display:block;font-weight:600}.legend{display:flex;gap:11px;align-items:center;font-size:10px;color:#a9bec7;letter-spacing:.06em}.legend i{height:6px;width:6px;border:1px solid var(--accent);border-radius:50%}.scene-chip{position:absolute;right:372px;top:115px;padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:rgba(10,20,31,.52);color:#c3d3dc;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.08em}.scene-chip strong{color:var(--accent)}.hint{position:absolute;bottom:143px;left:35px;color:#a9bbc6;font-size:10px;letter-spacing:.05em}.hint kbd{display:inline-block;border:1px solid #758493;border-radius:4px;padding:2px 5px;font:10px monospace;color:#e8f3f8;margin:0 3px}.toast{position:absolute;left:50%;top:95px;transform:translateX(-50%) translateY(-15px);opacity:0;padding:13px 18px;background:rgba(9,21,28,.93);border:1px solid var(--accent);border-radius:8px;pointer-events:none;font:600 11px 'Space Grotesk',sans-serif;letter-spacing:.05em;transition:.25s}.toast.visible{opacity:1;transform:translateX(-50%)}
@media(max-width:1060px){.leftpanel{left:20px;top:97px}.rightpanel{right:20px;width:270px;top:97px;max-height:calc(100vh - 200px)}.bottombar{left:20px;right:20px;bottom:18px}.metrics{width:calc(100% - 210px)}.footdetails{display:none}.scene-chip{display:none}.hint{bottom:125px;left:20px}}
@media(max-width:720px){.topbar{padding:0 13px;height:62px}.navright .tag{display:none}.brand small{font-size:7px}.brand strong{font-size:13px}.brandmark{width:32px;height:32px}.navbtn{padding:8px}.leftpanel{left:14px;top:77px;max-width:calc(100% - 180px)}h1{font-size:32px;white-space:normal}.description,.scene-label,.subhead{display:none}.rightpanel{width:210px;right:12px;top:79px;max-height:calc(100vh - 190px);padding:13px}.paneltop{padding-bottom:11px;margin-bottom:9px}.control{margin:13px 0}.controlhead,.toggle label{font-size:8px}.bottombar{left:12px;right:12px;bottom:10px}.metrics{width:100%;min-height:70px;grid-template-columns:repeat(4,minmax(0,1fr))}.metric{padding:10px 6px}.metric label{font-size:7px;white-space:normal;min-height:18px}.metric strong{font-size:16px}.metric strong em{font-size:8px}.hint{bottom:90px;left:12px;font-size:8px}.navright{gap:5px}}