:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#d9e8ee; background:#07101a; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button, input, select { font:inherit; }
button { cursor:pointer; transition:background .18s, border-color .18s, transform .18s; }
button:active { transform:translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid #9ae2ff; outline-offset:3px; }
.app { min-height:100vh; display:flex; flex-direction:column; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; border-bottom:1px solid #243747; background:#0a1420; }
.identity { display:flex; align-items:center; gap:17px; }
.brandGlyph { width:44px; height:44px; display:grid; place-items:center; border:1px solid #6faec6; color:#daeeff; font-size:27px; font-weight:800; letter-spacing:-6px; padding-right:8px; }
.brandGlyph span { color:#d8ab68; font-weight:300; }
.brand {font-size:17px; font-weight:820; letter-spacing:.20em; }
.edition { color:#7292a4; letter-spacing:.12em; font-size:10px; margin-left:5px; font-weight:400; }
.subbrand { color:#677f94; font-size:9px; letter-spacing:.2em; margin-top:5px; }
.subbrand b { color:#c59a64; margin:0 5px; }
.topRight { display:flex; gap:30px; align-items:center; font-size:10px; letter-spacing:.16em; color:#7f98a7; }
.status { color:#b7ded8; display:flex; align-items:center; gap:9px; }
.dot { width:6px; height:6px; background:#9fecd1; border-radius:50%; box-shadow:0 0 10px #92e8ca; }
.layout { flex:1; display:grid; grid-template-columns:minmax(0,1fr) 366px; min-height:calc(100vh - 78px); }
.viewportColumn { min-width:0; display:flex; flex-direction:column; }
.viewport { position:relative; flex:1; min-height:580px; overflow:hidden; background:#09131e; }
#viewportCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.viewport:before { content:""; position:absolute; pointer-events:none; inset:0; z-index:1; background:linear-gradient(180deg,rgba(4,14,26,.25),transparent 33%, transparent 68%, rgba(4,14,26,.31)); }
.corner { position:absolute; z-index:3; pointer-events:none; }
.readoutTL { top:40px; left:42px; }
.readoutTL h1 {font-size:36px; line-height:1.06; font-weight:400; letter-spacing:-.04em; margin:16px 0 11px; color:#d8eaf3; }
.readoutTL h1 em { color:#9bc0d0; font-weight:300; font-style:normal; }
.overline,.reticleLabel,.micro { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; letter-spacing:.16em; color:#84a6b5; }
.subtitle { font-size:12px; color:#88a7b6; }
.readoutTR { top:44px; right:40px; text-align:right; }
.numeric { font-size:27px; margin:13px 0 5px; letter-spacing:.04em; font-weight:300; }
.micro { font-size:9px; color:#6b8595; }
.readoutBL { bottom:43px; left:42px; display:flex; align-items:center; gap:17px; }
.readoutBL .line { height:48px; width:2px; background:linear-gradient(#e9c089,#629dc0); }
.valueRow { display:flex; align-items:baseline; gap:12px; margin-top:5px; }
.valueRow strong { font-size:31px; font-weight:350; }
.valueRow span { font-size:11px; color:#809aa9; font-family:ui-monospace, Menlo, monospace; }
.readoutBR { right:40px; bottom:39px; text-align:right; }
.mono { font-size:10px; margin-top:8px; letter-spacing:.07em; color:#abc8d2; font-family:ui-monospace, Menlo, monospace; }
.mono.faint { color:#566f7b; }
.crosshair { position:absolute; z-index:2; left:50%; top:49%; width:26px; height:26px; transform:translate(-50%,-50%); pointer-events:none; opacity:.40; border-left:1px solid #678aa0; border-right:1px solid #678aa0; border-radius:50%; }
.crosshair:before { content:""; position:absolute; width:48px; height:1px; background:#678aa0; left:-11px; top:12px; }
.centerDot { width:4px; height:4px; border:1px solid #d7eff8; border-radius:50%; position:absolute; top:11px; left:10px; background:#0b1820; }
.viewerHint { position:absolute; z-index:4; left:50%; transform:translateX(-50%); bottom:17px; font-size:9px; letter-spacing:.17em; color:#6c8795; white-space:nowrap; pointer-events:none; }
.viewerHint span { padding:0 8px; color:#d7a971; }
.bottomstrip { padding:17px 34px; border-top:1px solid #253948; background:#0b1723; display:flex; gap:20px; justify-content:space-between; font-size:9px; letter-spacing:.13em; color:#718a9c; flex-wrap:wrap; }
.index {color:#d6a86e; padding-right:6px;}
.controls {background:#101b28; border-left:1px solid #243645; padding:29px 26px 16px; overflow:auto; max-height:calc(100vh - 78px); }
.controlHead h2 {font-weight:400; font-size:31px; line-height:1.14; letter-spacing:-.03em; margin:13px 0 10px; }
.eyebrow {font-size:9px; letter-spacing:.2em; color:#dcb989; }
.controlHead p {margin:0 0 23px; font-size:11px; line-height:1.7; color:#8198a9;}
.section { border-top:1px solid #293948; padding:19px 0 21px; }
.sectionTitle {font-size:10px; letter-spacing:.12em; color:#b6c6d0; font-weight:750; margin-bottom:17px; }
.sectionTitle span {font-family:ui-monospace, Menlo,monospace; font-weight:400; color:#ae845a; margin-right:12px; }
.presets { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
button { border:1px solid #374858; color:#adc5d1; padding:11px 9px; background:#152334; border-radius:3px; font-size:11px; }
button:hover {background:#21354a; border-color:#698ba0;}
button.selected {background:#293b4c; color:#f8e1b9; border-color:#b58e60; }
.range { margin:0 0 16px; }
.range:last-child {margin-bottom:2px;}
.range label { display:flex; justify-content:space-between; color:#9fb1c0; font-size:11px; margin-bottom:9px; }
.range output { color:#d1eaf3; font-family:ui-monospace, Menlo,monospace; font-size:11px; }
input[type=range] { width:100%; appearance:none; height:3px; background:#3b5162; cursor:pointer; border-radius:2px; margin:0; }
input[type=range]::-webkit-slider-thumb { appearance:none; width:11px; height:11px; background:#dcaf78; border-radius:50%; box-shadow:0 0 0 3px #101b28; }
input[type=range]::-moz-range-thumb { width:11px; height:11px; background:#dcaf78; border-radius:50%; border:0; }
.rowFields {display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.rowFields label {font-size:8px; letter-spacing:.1em; color:#839bad; }
select { width:100%; margin-top:8px; padding:9px 7px; background:#162537; border:1px solid #354858; border-radius:3px; color:#bed3db; font-size:10px; }
.switches { display:grid; gap:13px; margin-top:19px; }
.switches label { display:flex; align-items:center; gap:10px; font-size:11px; color:#9faebd; cursor:pointer; }
.switches input {accent-color:#d6ae7b; width:14px; height:14px; margin:0;}
.actions {padding-bottom:10px;}
.actionRow {display:flex; gap:7px; margin-bottom:7px;}
.actionRow button { flex:1; white-space:nowrap; padding:11px 5px; }
button.primary {background:#d6aa77; color:#142332; border-color:#d6aa77; font-weight:700;}
button.primary:hover {background:#f0c28f;}
.soundButton { width:100%; margin-top:5px; text-align:center; border-color:#5c7c83; }
.audioStatus {margin-top:10px; color:#6d8b9c; font-size:10px; line-height:1.5; }
.foot {margin:18px 0 5px; font-size:9px; color:#839ba9; letter-spacing:.09em; }
.foot span {display:block; margin-top:7px; font-size:8px; color:#5e7382;}
@media (max-width:1020px) { .layout {grid-template-columns:minmax(0,1fr) 330px;} .readoutTL {left:25px;top:28px;} .readoutTL h1 {font-size:29px;} .readoutTR {right:25px;top:29px;} .controls {padding:25px 20px;} }
@media (max-width:760px) { .topbar{height:69px;padding:0 17px;} .topRight .version,.topRight .status {display:none;} .layout{display:block;} .viewport{min-height:470px;height:65vh;} .controls{max-height:none; padding:28px 22px;} .bottomstrip {gap:10px;padding:14px 18px;font-size:8px;} .readoutTR{right:15px;} .readoutTL{left:18px;} .readoutTL h1 {font-size:27px;} .readoutBL {left:18px;bottom:28px;} .readoutBR{right:18px;bottom:28px;} .readoutBR .faint {display:none;} .viewerHint{display:none;} }