:root { font-family: Inter, 'Segoe UI', Arial, sans-serif; color: #eff7fa; background:#08131e; font-synthesis: none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
* { box-sizing: border-box; }
html, body, #app { position:relative; padding:0; margin:0; width:100%; height:100%; height:100dvh; overflow:hidden; }
button, input { font: inherit; }
button { cursor:pointer; }
button:focus-visible, input:focus-visible {outline:2px solid #a7e5ef;outline-offset:3px;}
.simulation-canvas {position:absolute;inset:0;overflow:hidden;}
.simulation-canvas canvas {width:100%;height:100%;display:block;outline:none;touch-action:none;}
.ui-root {position:absolute;inset:0;pointer-events:none;z-index:2;}
.ui-root button, .ui-root input, .ui-root label {pointer-events:auto;}
.top-shade {position:absolute;inset:0 0 auto;height:240px;background:linear-gradient(to bottom,rgba(2,9,17,.83),transparent);pointer-events:none;}
.identity {position:absolute;top:32px;left:39px;display:flex;gap:14px;align-items:flex-start;}
.brand-symbol {width:43px;height:43px;border:1px solid rgba(188,225,231,.5);display:grid;place-items:center;border-radius:5px;position:relative;background:rgba(142,182,201,.1);box-shadow:inset 0 0 20px rgba(202,231,251,.055);}
.brand-symbol:after {content:'';width:32px;height:32px;border:1px dashed rgba(152,216,229,.42);border-radius:50%;position:absolute;animation:rotate-ring 19s linear infinite;}
.symbol-wind {color:#c2eff5;font-size:19px;font-weight:300;}
@keyframes rotate-ring {to{transform:rotate(360deg)}}
.eyebrow,.panel-eyebrow,.section-title,.metric-label,.range-ends,.control-foot,.hint-strip,.brand-subtitle,.top-right,.hero-label p,.seed {letter-spacing:1.6px;font-size:9px;font-weight:750;}
.eyebrow {color:#9db6c4;font-size:9px;letter-spacing:1.65px;margin:0 0 4px;}
.line-sep{color:#54788c;margin:0 6px;}
.logo {font-size:27px;font-weight:850;letter-spacing:3px;line-height:1.06;}
.logo-accent {color:#92d9e5;}
.brand-subtitle {font-size:9px;color:#a8c1cd;margin-top:7px;letter-spacing:1.1px;}
.seed {color:#d3e3ea;font-size:8px;padding-left:12px;}
.top-right {position:absolute;top:38px;right:386px;display:flex;gap:16px;align-items:center;color:#94aab8;font-size:9px;}
.live-pill{display:flex;align-items:center;gap:8px;padding:9px 13px;background:rgba(22,38,51,.60);border:1px solid rgba(169,199,217,.23);border-radius:4px;color:#e1f3f4;white-space:nowrap;}
.live-dot {width:6px;height:6px;background:#90ecb3;border-radius:50%;box-shadow:0 0 8px #8cdea8;animation:breathe 2.5s ease-in-out infinite;}
.live-pill.standby .live-dot {background:#f1a078;box-shadow:none;animation:none;}
@keyframes breathe {50%{opacity:.38;}}
.edition-tag {white-space:nowrap;}
.hero-label{position:absolute;top:29%;left:43px;display:flex;align-items:stretch;gap:20px;max-width:440px;opacity:.99;}
.vertical-accent{width:2px;background:linear-gradient(to bottom,#a3e0ee,#5d8299 40%,transparent);box-shadow:0 0 20px rgba(151,226,242,.32);}
.hero-label p{color:#a7d2e1;margin:0 0 15px;}
.hero-divider{margin:0 9px;color:#fff;}
.hero-label h1 {margin:0;font-size:clamp(28px,3.1vw,53px);line-height:1.04;font-weight:790;letter-spacing:-1.8px;text-shadow:0 2px 32px rgba(0,10,18,.5);}
.hero-label h1 em {font-weight:400;font-style:normal;color:#bfdae4;}
.subtitle {display:block;max-width:300px;font-size:12px;color:#cadce6;line-height:1.65;margin-top:18px;}
.control-panel {position:absolute;top:17px;right:18px;bottom:17px;width:344px;display:flex;flex-direction:column;background:linear-gradient(145deg,rgba(12,28,42,.97),rgba(7,20,31,.96));border:1px solid rgba(179,210,227,.23);box-shadow:0 20px 65px rgba(0,6,14,.65),inset 0 1px rgba(220,247,255,.06);border-radius:8px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:hidden;pointer-events:auto;}
.control-panel:before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,#a0d6de,transparent);opacity:.7;}
.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 23px 19px;border-bottom:1px solid rgba(144,179,198,.13);}
.panel-eyebrow{color:#76aebd;letter-spacing:1.6px;font-size:9px;}
.panel-heading h2{font-size:18px;margin:6px 0 0;letter-spacing:-.5px;font-weight:700;}
.icon-button{border:1px solid rgba(161,189,206,.21);background:rgba(255,255,255,.03);color:#cce1eb;border-radius:4px;width:29px;height:29px;font-size:20px;line-height:1;}
.icon-button:hover{background:rgba(163,206,231,.16);}
.panel-content{padding:22px 23px 15px;overflow-y:auto;min-height:0;scrollbar-color:#475d69 transparent;scrollbar-width:thin;}
.section-title{display:flex;justify-content:space-between;align-items:center;color:#7e9fab;font-size:10px;letter-spacing:1.4px;margin-bottom:13px;}
.intensity-readout{font-size:19px;color:#f2c1a3;font-weight:800;letter-spacing:0;}
.ef-selector{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
.ef-choice {border:1px solid rgba(156,190,210,.19);background:rgba(144,165,185,.07);border-radius:3px;color:#9bb3c1;font-size:10px;font-weight:700;height:32px;transition:background .2s,color .2s,border .2s;}
.ef-choice:hover{border-color:#9bd2e3;color:#ecf8fa;}
.ef-choice.active {background:#b6d8de;color:#0b2330;border-color:#d8f7f5;box-shadow:0 0 17px rgba(170,235,245,.16);}
.ef-comment{display:flex;justify-content:space-between;color:#c1d3da;font-size:10px;margin-top:12px;}
.ef-comment span+span{color:#7e9ba9;}
.range-heading{border-top:1px solid rgba(153,193,210,.14);padding-top:23px;margin-top:22px;margin-bottom:17px;}
.mini-mark{font-size:9px;color:#b6d9dc;letter-spacing:.6px;}
.control-group{display:block;margin:0 0 17px;}
.control-line{display:flex;justify-content:space-between;margin:0 0 8px;font-size:12px;color:#d3e1e9;}
.control-line output{font-size:11px;color:#aed8df;font-variant-numeric:tabular-nums;}
input[type=range]{-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;width:100%;display:block;margin:0;background:linear-gradient(90deg,#96d7e1 var(--progress,50%),#324a59 var(--progress,50%));cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#dbf7f8;border:2px solid #4a9dae;box-shadow:0 0 0 3px rgba(133,216,233,.09);}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#dbf7f8;border:2px solid #4a9dae;}
.range-ends{display:flex;justify-content:space-between;color:#547080;font-size:8px;letter-spacing:.5px;margin-top:7px;}
.camera-heading{border-top:1px solid rgba(153,193,210,.14);padding-top:18px;margin-top:3px;}
.camera-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:22px;}
.camera-choice{border:1px solid rgba(156,190,210,.17);background:rgba(129,169,190,.05);border-radius:4px;padding:9px 3px;color:#9db6c3;display:flex;gap:5px;flex-direction:column;align-items:center;font-size:10px;}
.camera-choice span{font-size:19px;line-height:1;color:#a4c6d3;}
.camera-choice:hover{color:white;border-color:#8ebeca;}
.camera-choice.active{background:rgba(148,219,236,.16);border-color:rgba(171,228,235,.65);color:#e8faff;}
.main-actions{display:flex;gap:8px;}
.main-button{display:flex;align-items:center;justify-content:center;gap:9px;border-radius:4px;padding:12px 8px;font-size:11px;font-weight:720;white-space:nowrap;}
.main-button.primary{flex:1.7;background:#b9e0e5;border:1px solid #dcf6f5;color:#0b2534;}
.main-button.primary:hover{background:#d2f3f7;}
.main-button.reset{flex:1;background:rgba(151,195,219,.09);border:1px solid rgba(151,195,219,.2);color:#bed4e1;}
.main-button.reset:hover{background:rgba(151,195,219,.19);}
.button-icon{font-size:16px;}
.slow-option{border:0;background:transparent;color:#c3d6df;display:flex;gap:9px;align-items:center;margin-top:16px;padding:2px 0 4px;font-size:11px;width:100%;text-align:left;}
.toggle-indicator{width:22px;height:12px;background:#32495a;border-radius:14px;position:relative;transition:background .25s;}
.toggle-indicator:after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:#9cb0bc;left:2px;top:2px;transition:transform .2s;}
.slow-option.active .toggle-indicator{background:#488e99;}
.slow-option.active .toggle-indicator:after{transform:translateX(10px);background:#e9faff;}
.slow-factor{margin-left:auto;color:#829ea9;font-weight:800;}
.control-foot{display:flex;justify-content:space-between;color:#587382;font-size:7px;letter-spacing:.6px;margin-top:23px;border-top:1px solid rgba(145,180,198,.14);padding-top:12px;}
.bottom-telemetry{position:absolute;bottom:55px;left:40px;display:flex;align-items:center;background:rgba(4,16,28,.56);border:1px solid rgba(158,195,207,.18);padding:14px 19px;gap:19px;border-radius:5px;backdrop-filter:blur(12px);}
.metric-label{font-size:8px;color:#91aeba;margin-bottom:7px;letter-spacing:1px;}
.metric-value{font-size:22px;color:#f1f8fa;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums;}
.metric-value small{font-size:10px;font-weight:500;color:#9eb7c4;letter-spacing:0;}
.metric-divider{width:1px;height:36px;background:rgba(164,195,216,.21);}
.incident-feed{position:absolute;left:43px;bottom:160px;max-width:390px;display:flex;flex-direction:column;gap:6px;}
.event-item{color:#e0f0f5;font-size:10px;display:flex;gap:10px;align-items:center;padding:9px 12px;background:rgba(13,26,37,.68);border-left:2px solid #9bccd8;backdrop-filter:blur(9px);animation:slide-in .3s ease-out;}
.event-item.secondary{opacity:.55;}
.event-pulse{height:5px;width:5px;border-radius:50%;background:#ccecf7;flex:none;}
@keyframes slide-in{from{transform:translateX(-9px);opacity:0}to{transform:translateX(0);opacity:1}}
.hint-strip{position:absolute;bottom:18px;left:40px;color:#bad0d9;font-size:8px;display:flex;gap:8px;align-items:center;letter-spacing:.5px;}
.hint-key{font-size:8px;color:#d2f1fa;border:1px solid rgba(181,218,232,.31);padding:4px 5px;background:rgba(9,27,40,.37);border-radius:2px;margin-left:8px;}
.hint-key:first-child{margin-left:0;}
.restore-ui{position:absolute;top:21px;right:21px;background:rgba(11,27,39,.86);color:#d8f3f4;border:1px solid rgba(178,223,238,.5);padding:13px 17px;border-radius:4px;font-size:12px;display:none;gap:12px;align-items:center;}
.paused-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);letter-spacing:3px;font-weight:700;font-size:12px;padding:15px 22px;background:rgba(7,18,27,.74);border:1px solid rgba(162,197,221,.4);display:none;white-space:nowrap;}
.paused-overlay span{color:#9be5ef;margin-right:11px;}
.paused-overlay.visible{display:block;}
.ui-hidden .identity,.ui-hidden .top-right,.ui-hidden .hero-label,.ui-hidden .control-panel,.ui-hidden .bottom-telemetry,.ui-hidden .incident-feed,.ui-hidden .hint-strip,.ui-hidden .top-shade,.ui-hidden .paused-overlay{display:none;}
.ui-hidden .restore-ui{display:flex;}
.mobile-actions {display:none;}
@media(max-height:810px) and (min-width:901px){.panel-heading{padding:15px 20px}.panel-content{padding:15px 21px}.control-group{margin-bottom:11px}.range-heading{margin-top:13px;padding-top:14px}.camera-heading{padding-top:12px}.camera-grid{margin-bottom:12px}.control-foot{margin-top:12px}.hero-label{top:28%;}}
@media(max-width:1200px){.top-right{right:375px}.hero-label{max-width:320px}.bottom-telemetry{gap:12px;padding:12px}.extra-metric{display:none}.metric-value{font-size:19px}.hero-label h1{font-size:clamp(27px,3.2vw,44px)}}
@media(max-width:900px){.identity{top:23px;left:22px;transform:scale(.84);transform-origin:top left}.top-right{top:23px;right:16px}.edition-tag{display:none}.hero-label{top:22%;left:24px}.hero-label h1{font-size:36px}.control-panel{top:auto;left:10px;right:10px;bottom:10px;width:auto;height:min(54vh,490px);}.panel-heading{padding:11px 17px}.panel-heading h2{font-size:15px}.panel-content{padding:12px 17px}.section-title{margin-bottom:9px}.range-heading{margin-top:13px;padding-top:13px}.control-group{margin-bottom:12px}.camera-heading{margin-top:5px}.camera-grid{margin-bottom:13px}.control-foot{margin-top:12px}.bottom-telemetry{left:15px;bottom:calc(min(54vh,490px) + 24px);padding:9px 12px;gap:10px}.metric-value{font-size:17px}.metric-label{font-size:7px}.incident-feed{bottom:calc(min(54vh,490px) + 99px);left:15px;max-width:280px}.hint-strip{display:none}.hero-label .subtitle{max-width:240px}.restore-ui{top:auto;right:16px;bottom:70px}.ui-hidden .mobile-actions{display:flex}}
@media(max-width:540px){.identity{left:12px;top:14px;transform:scale(.67)}.top-right{top:12px;right:9px}.live-pill{font-size:8px;padding:7px 9px}.hero-label{left:14px;top:118px;gap:10px}.hero-label h1{font-size:28px}.hero-label p{font-size:8px;margin-bottom:8px}.subtitle{font-size:10px;margin-top:7px;max-width:230px!important}.control-panel{height:52vh}.bottom-telemetry{bottom:calc(52vh + 20px);left:9px;padding:8px;gap:9px;}.metric-label{font-size:6px;letter-spacing:.3px}.metric-value{font-size:14px}.metric-value small{font-size:8px}.metric-divider{height:24px}.incident-feed{display:none}.top-shade{height:160px}.panel-heading{padding:10px 14px}.panel-content{padding:11px 14px}.main-actions{padding-bottom:4px}.camera-choice{font-size:9px}.ui-hidden .restore-ui{display:flex}}
@media(prefers-reduced-motion:reduce){.brand-symbol:after,.live-dot{animation:none}.event-item{animation:none}}