:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #e2e9e8;
  background: #101b22;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { min-height: 100svh; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid #87e2c3; outline-offset: 3px; }
#app { position: relative; isolation: isolate; }
#world { position: fixed; inset: 0; display: block; width: 100vw; height: 100svh; cursor: grab; touch-action: none; }
#world:active { cursor: grabbing; }
#hud { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#hud > * { pointer-events: auto; }
.glass-surface {
  background: linear-gradient(145deg, rgba(11,23,28,.92), rgba(12,26,30,.80));
  border: 1px solid rgba(188,223,210,.12);
  box-shadow: 0 13px 60px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.brand {
  position: absolute; top: 24px; left: 26px;
  display: flex; align-items: center; gap: 17px;
  border-radius: 4px; padding: 17px 19px; min-width: 480px;
}
.brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 55px; flex: 0 0 52px;
  border: 1px solid rgba(145,214,191,.28); background: #0b2427;
  overflow: hidden; position: relative;
}
.mark-vortex { width: 30px; height: 30px; border: 3px solid #89d5b3; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: relative; transform: rotate(-30deg); animation: brand-spin 5s linear infinite; }
.mark-vortex:before, .mark-vortex:after { content: ''; position: absolute; border: 2px solid #a3e8c7; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; }
.mark-vortex:before { inset: 4px; }
.mark-vortex:after { inset: 11px; }
@keyframes brand-spin { to { transform: rotate(330deg); } }
.brand-text { min-width: 0; }
.eyebrow, .section-index, .radar-title, .subhead, .key-hints, .scale-label, .console-foot, .radar-foot, .live-indicator, .cam-num, .subtitle, .cinematic-caption, .telemetry-bottom, .data-cell label, .data-cell small {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  letter-spacing: .11em;
}
.eyebrow { font-size: 9px; color: #88ada4; font-weight: 700; white-space: nowrap; }
.eyebrow-sep { color: #d4ab7a; }
.brand h1 { margin: 3px 0 2px; font-size: 35px; letter-spacing: -.07em; line-height: 1; font-weight: 850; }
.brand h1 span { font-weight: 350; color: #a3e6c5; }
.subtitle { color: #b0b6b0; font-size: 9px; white-space: nowrap; letter-spacing: .095em; }
.separator { padding: 0 5px; color: #d4a47a; }
.live-indicator { font-size: 9px; color: #aee5c7; margin: -30px 0 0 auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.live-indicator i, .tiny-dot { width: 6px; height: 6px; border-radius: 50%; background: #80eab2; box-shadow: 0 0 11px #80eab2; display: inline-block; animation: live 1.6s ease-in-out infinite; }
.live-indicator.paused { color: #dfb480; }
.live-indicator.paused i { background: #dfb480; box-shadow: none; animation: none; }
@keyframes live { 50% { opacity: .25; } }
.console-panel { position: absolute; top: 24px; right: 26px; bottom: 24px; width: 340px; padding: 20px 22px; border-radius: 5px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #37565a transparent; }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.section-index { color: #84a6a0; font-size: 9px; font-weight: 650; }
.panel-head h2 { font-size: 18px; font-weight: 730; letter-spacing: .075em; margin: 7px 0 18px; }
.icon-btn { border: 1px solid #3e5958; border-radius: 2px; color: #c7d8d3; background: rgba(123,155,151,.07); width: 30px; height: 30px; font-size: 16px; }
.icon-btn:hover { background: #25443d; }
.button-bar { display: flex; gap: 8px; }
.button-bar button { height: 43px; border-radius: 3px; text-align: center; font-size: 11px; letter-spacing: .1em; font-weight: 800; }
.primary { flex: 1.45; background: #a0e6bc; color: #12312c; border: 1px solid #b3f3ce; }
.primary:hover { background: #c0f7d1; }
.secondary { flex: 1; background: #152c30; color: #e7eae5; border: 1px solid rgba(202,226,218,.19); }
.secondary:hover { background: #254047; }
.subhead { display: flex; gap: 11px; align-items: center; font-size: 9px; color: #9fbbaf; font-weight: 750; margin: 24px 0 16px; }
.subhead-line { flex: 1; height: 1px; background: rgba(172,200,191,.15); }
.slider-control { margin-bottom: 16px; }
.slider-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.slider-label label { color: #ced7d2; font-size: 12px; }
.slider-label output { color: #a5edc4; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 11px; font-weight: 800; white-space: nowrap; }
.slider-control input[type=range] {
  appearance: none; -webkit-appearance: none; cursor: ew-resize; width: 100%; height: 4px;
  border: 0; border-radius: 3px; margin: 2px 0 5px; display: block;
  background: linear-gradient(to right, #9ce1bc 0 var(--progress), #365052 var(--progress) 100%);
}
.slider-control input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; border-radius: 2px; background: #c2f6d2; border: 2px solid #466d62; box-shadow: 0 0 0 2px #102324; }
.slider-control input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 2px; background: #c2f6d2; border: 2px solid #466d62; }
.scale-label { font-size: 8px; color: #798d88; display: flex; justify-content: space-between; margin-top: 9px; }
.camera-select { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.camera-select button {
  text-align: left; height: 43px; padding: 8px 10px; color: #ced9d6;
  font-size: 10px; font-weight: 650; letter-spacing: .07em;
  border-radius: 3px; background: rgba(89,120,120,.10);
  border: 1px solid rgba(175,212,205,.16);
}
.camera-select button.selected { background: #2a5148; border-color: #9fdfb8; color: #d4f8df; }
.camera-select button:hover { border-color: #9fdfb8; }
.cam-num { margin-right: 9px; font-size: 9px; opacity: .57; }
.switch-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(202,226,218,.12); margin-top: 20px; padding-top: 18px; }
.switch-row strong { font-size: 10px; font-weight: 800; letter-spacing: .1em; display: block; margin-bottom: 5px; }
.switch-row span { color: #819e95; font-size: 10px; }
.switch { position: relative; height: 26px; width: 46px; border-radius: 14px; border: 1px solid #627e73; background: #2a3d41; transition: background .2s ease; }
.switch i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #90a7a0; border-radius: 50%; transition: transform .2s ease; }
.switch.active { background: #549a76; border-color: #9addb5; }
.switch.active i { background: #c2f6d2; transform: translateX(20px); }
.console-foot { color: #6e8b85; font-size: 8px; line-height: 1.9; letter-spacing: .06em; margin-top: 22px; border-top: 1px solid rgba(202,226,218,.11); padding-top: 13px; }
.telemetry { position: absolute; left: 26px; bottom: 67px; width: 488px; border-radius: 4px; padding: 15px 17px 10px; }
.telemetry-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.signal { font-size: 9px; font-family: Consolas, monospace; color: #a6e7c2; letter-spacing: .1em; }
.data-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.data-cell { padding: 0 12px; border-right: 1px solid rgba(207,226,212,.12); }
.data-cell:first-child { padding-left: 0; }
.data-cell:last-child { border-right: 0; }
.data-cell label { display: block; color: #a1b8b0; font-size: 9px; margin-bottom: 4px; }
.data-cell strong { display: inline-block; color: #e3f6ed; font-size: 33px; font-weight: 680; letter-spacing: -.06em; line-height: 1.15; }
.data-cell:first-child strong { color: #b1edc8; }
.data-cell small { display: block; font-size: 8px; letter-spacing: .05em; margin-top: 4px; color: #85a49d; }
.telemetry-bottom { margin-top: 16px; border-top: 1px solid rgba(203,226,216,.13); padding-top: 10px; display: flex; justify-content: space-between; color: #91aea3; font-size: 9px; }
.telemetry-bottom b { color: #d6e7df; }
.tiny-dot { width: 5px; height: 5px; margin-right: 4px; }
.radar { position: absolute; left: 26px; bottom: 260px; width: 240px; padding: 14px; border-radius: 4px; }
.radar-title { display: flex; justify-content: space-between; font-size: 9px; color: #dae9df; font-weight: 800; }
.radar-scan { color: #a2e8bd; font-size: 8px; }
#radar-canvas { display: block; width: 100%; height: auto; margin: 12px 0; border: 1px solid rgba(130,176,163,.18); }
.radar-foot { display: flex; justify-content: space-between; color: #809f95; font-size: 8px; }
.cinematic-caption { position: absolute; left: 286px; bottom: 307px; font-size: 10px; color: #afc1b9; display: flex; align-items: center; gap: 11px; line-height: 1.7; text-shadow: 0 2px 10px #000; }
.cinematic-caption b { font-size: 17px; color: #ebeee8; font-family: Inter, sans-serif; letter-spacing: .06em; }
.caption-bar { width: 3px; height: 36px; background: #9ad8ae; }
.key-hints { position: absolute; left: 26px; bottom: 24px; padding: 10px 13px; display: flex; align-items: center; gap: 16px; border-radius: 4px; }
.key-hints span { color: #92a7a3; font-size: 9px; }
kbd { font: inherit; padding: 2px 4px; margin-right: 2px; color: #d4e6db; border: 1px solid rgba(185,211,197,.24); border-radius: 2px; }
#free-hint { display: none; color: #b8e9d0; }
#free-hint.enabled { display: inline; }
.restore-ui { display: none; position: absolute; right: 24px; top: 24px; padding: 12px 15px; font-family: Consolas, monospace; font-size: 10px; color: #d5f4df; background: #0a2525cc; border: 1px solid #6c9b89; border-radius: 3px; letter-spacing: .11em; backdrop-filter: blur(15px); }
.ui-hidden #hud .brand, .ui-hidden #hud .console-panel, .ui-hidden #hud .telemetry, .ui-hidden #hud .radar, .ui-hidden #hud .key-hints, .ui-hidden #hud .cinematic-caption { display: none; }
.ui-hidden .restore-ui { display: block; }
#loading { position: fixed; z-index: 99; inset: 0; background: #0a161b; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; transition: opacity .8s ease, visibility .8s ease; }
#loading.loaded { opacity: 0; visibility: hidden; }
#loading .loading-kicker { color: #82b9ab; letter-spacing: .35em; font: 11px Consolas, monospace; }
#loading strong { font-size: clamp(38px, 7vw, 82px); letter-spacing: -.07em; font-weight: 770; color: #c2edd4; }
#loading span { font: 10px Consolas, monospace; color: #91aea6; letter-spacing: .23em; }
.loadbar { height: 2px; width: 165px; overflow: hidden; background: #244743; margin-top: 12px; }
.loadbar i { display: block; height: 100%; background: #9ce7bb; animation: sweep 1s ease-in-out infinite alternate; }
@keyframes sweep { from { width: 12%; } to { width: 100%; } }
#loading.failed { padding: 20px; text-align: center; }
#loading.failed strong { font-size: 25px; color: #f2a69b; letter-spacing: .02em; }
@media (max-height: 930px) and (min-width: 900px) {
  .console-panel { padding-top: 16px; padding-bottom: 14px; }
  .slider-control { margin-bottom: 11px; }
  .subhead { margin: 17px 0 12px; }
  .panel-head h2 { margin-bottom: 13px; }
  .console-foot { margin-top: 12px; }
  .radar { width: 185px; bottom: 242px; }
  .cinematic-caption { left: 232px; bottom: 265px; }
}
@media (max-width: 1250px) {
  .brand { min-width: auto; padding: 13px 15px; top: 16px; left: 16px; }
  .brand h1 { font-size: 28px; }
  .console-panel { right: 16px; top: 16px; bottom: 16px; width: 314px; }
  .telemetry { left: 16px; bottom: 61px; width: 410px; }
  .data-cell strong { font-size: 28px; }
  .radar { left: 16px; width: 185px; }
  .key-hints { left: 16px; bottom: 16px; }
  .cinematic-caption { left: 220px; }
}
@media (max-width: 890px) {
  .brand { width: calc(100% - 28px); max-width: 435px; top: 12px; left: 14px; }
  .eyebrow, .subtitle { font-size: 8px; }
  .brand-mark { width: 43px; height: 45px; flex-basis: 43px; }
  .console-panel { top: 87px; right: 12px; bottom: 68px; width: min(295px, 48vw); }
  .radar { left: 12px; bottom: 202px; width: 150px; padding: 9px; }
  .radar-title, .radar-foot { font-size: 7px; }
  .radar-scan { font-size: 7px; }
  .telemetry { width: calc(100% - min(295px, 48vw) - 37px); max-width: 390px; left: 12px; bottom: 68px; padding: 10px; }
  .data-cell { padding: 0 6px; }
  .data-cell strong { font-size: 24px; }
  .data-cell label, .data-cell small { font-size: 7px; }
  .telemetry-bottom { font-size: 8px; gap: 5px; }
  .key-hints { bottom: 12px; left: 12px; right: 12px; flex-wrap: wrap; justify-content: center; font-size: 8px; gap: 8px; }
  .cinematic-caption { display: none; }
}
@media (max-width: 600px) {
  .brand { width: calc(100vw - 24px); left: 12px; top: 10px; height: 65px; padding: 9px 11px; gap: 10px; }
  .brand h1 { font-size: 25px; }
  .brand-mark { width: 37px; height: 40px; flex-basis: 37px; }
  .live-indicator { margin-top: -24px; font-size: 7px; }
  .subtitle { white-space: normal; font-size: 7px; }
  .eyebrow { font-size: 7px; letter-spacing: .02em; }
  .console-panel { right: 10px; top: 86px; bottom: 93px; width: min(272px, 76vw); padding: 13px 15px; background: rgba(9,23,27,.9); }
  .panel-head h2 { font-size: 16px; margin-bottom: 14px; }
  .sliders .slider-control { margin-bottom: 13px; }
  .radar { left: 10px; top: 87px; bottom: auto; width: 112px; padding: 7px; }
  .radar-title { display: block; }
  .radar-scan { display: none; }
  #radar-canvas { margin: 7px 0; }
  .telemetry { left: 10px; bottom: 82px; width: calc(100vw - 20px); height: auto; max-width: none; padding: 8px 11px; }
  .telemetry-top { margin-bottom: 4px; }
  .data-cell strong { font-size: 22px; }
  .data-cell label, .data-cell small { font-size: 7px; }
  .data-cell small { margin-top: 1px; }
  .telemetry-bottom { margin-top: 7px; padding-top: 6px; }
  .key-hints { height: 63px; bottom: 8px; display: flex; align-content: center; }
  .key-hints span { font-size: 8px; }
  .restore-ui { top: 10px; right: 10px; }
}
@media (max-width: 400px) {
  .console-panel { width: 235px; }
  .radar { width: 91px; }
  .brand-mark { display: none; }
  .live-indicator { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}