:root{color-scheme:dark;font:14px system-ui,sans-serif;color:#dddeda;background:#101719}*{box-sizing:border-box}body{margin:0}header{height:78px;border-bottom:1px solid #ffffff15;display:flex;align-items:center;gap:44px;padding:0 30px;background:#111b1d}.brand{font:26px Georgia,serif;letter-spacing:5px;color:#e1c88f}.brand small{display:block;font:8px system-ui;letter-spacing:5px;padding-left:29px}.subtitle{color:#8b9c9d;font-size:12px}.subtitle b{margin-left:16px;color:#c8b98f;font-size:10px;letter-spacing:2px}.online{margin-left:auto;color:#8dbca4;font-size:12px}main{display:grid;grid-template-columns:minmax(0,1fr) 308px;height:calc(100dvh - 78px);min-height:650px}.scene{position:relative;overflow:hidden;background:#162a2c}canvas{width:100%;height:100%;display:block;outline:none}.location{position:absolute;top:30px;left:32px;pointer-events:none}.location small,.eyebrow{font-size:9px;letter-spacing:2px;color:#9fb6ad}h1{font:32px Georgia,serif;margin:10px 0;color:#ece6ce}.location p{font-size:12px;color:#95aaa4}.camera{position:absolute;left:32px;top:140px;display:flex;gap:5px}button,select{font:inherit;color:inherit;border:1px solid #ffffff20;background:#172527;border-radius:5px;padding:9px 10px}button{cursor:pointer;font-size:11px}button:hover{border-color:#d8c18d}.active{color:#ead29a;border-color:#b49d66;background:#34413a}.hud{position:absolute;top:22px;right:18px;text-align:right;font-size:10px;color:#a9c7bc;display:grid;gap:7px}.help{position:absolute;bottom:20px;left:24px;right:24px;display:flex;align-items:center;gap:10px;font-size:10px;color:#a3b8b3;background:#0e1a1ddd;padding:12px;border:1px solid #ffffff12;border-radius:6px}.help button{margin-left:auto}kbd{color:#d9dcca;font:10px system-ui}i{opacity:.4}aside{padding:27px 23px;background:#121e21;overflow:auto;border-left:1px solid #ffffff13}h2{font:23px Georgia,serif;margin:10px 0}h2 span{float:right;font:10px system-ui;color:#bca575;padding-top:7px}.muted{font-size:11px;color:#7f9995;margin-bottom:25px}label{display:block;margin-top:17px;font-size:11px;color:#b8c8c2}select{display:block;width:100%;margin-top:8px;font-size:12px;padding:10px}input[type=range]{width:100%;display:block;margin:10px 0 0;accent-color:#c5af7c}output{float:right;color:#dac389}.check{display:flex;gap:8px;align-items:center;font-size:11px}input[type=checkbox]{accent-color:#bca475}.note{font-size:10px;line-height:1.6;color:#7f9894}hr{border:0;border-top:1px solid #ffffff12;margin:23px 0}.primary{width:100%;background:#c8b582;color:#142326;font-weight:600;margin-top:19px;padding:13px}@media(max-width:800px){header{padding:0 16px}.subtitle{display:none}main{height:auto;display:block}.scene{height:70dvh;min-height:480px}aside{overflow:visible}.location{left:20px}.location p{max-width:230px}.camera{left:20px;top:155px}.hud{top:auto;bottom:90px}.help{gap:6px;left:10px;right:10px}.help button{font-size:9px}}
body.booting{background:#070b12;color:#ead6a3}
body.booting header{background:#101617;border-bottom:1px solid rgba(220,186,116,.22)}
body.booting main{position:relative;min-height:calc(100dvh - 82px);overflow:hidden;background:linear-gradient(rgba(4,8,14,.72),rgba(4,8,14,.78)),url('portal-vesper-hero.png') center/cover no-repeat,#070b12}
body.booting .scene>*,body.booting aside{visibility:hidden!important;opacity:0!important}
body.booting main::after{content:'';position:absolute;inset:0;z-index:50;background:linear-gradient(rgba(4,8,14,.18),rgba(4,8,14,.28));pointer-events:none}