| :root { color-scheme: dark; --ink:#07100f; --panel:#0d1817; --line:#29413e; --muted:#78908c; --text:#d8e5e1; --amber:#ffb547; --cyan:#31d4bd; --red:#ff665f; --grid:rgba(92,137,129,.07); } |
| * { box-sizing:border-box; } |
| body { margin:0; min-width:1040px; min-height:100vh; color:var(--text); background-color:var(--ink); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),radial-gradient(circle at 34% 12%,#16302b 0,transparent 38%); background-size:24px 24px,24px 24px,auto; font-family:Bahnschrift,"DIN Alternate",sans-serif; letter-spacing:.02em; } |
| button,select { font:inherit; } |
| .masthead { height:92px; padding:18px 28px; display:flex; align-items:flex-end; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(7,16,15,.86); } |
| .eyebrow { margin:0 0 4px; color:var(--amber); font:600 10px "Cascadia Code",monospace; letter-spacing:.23em; } |
| h1 { margin:0; font-size:31px; line-height:1; text-transform:uppercase; letter-spacing:.035em; } |
| .connection-lockup { display:flex; align-items:center; gap:12px; text-align:right; }.connection-lockup b,.connection-lockup small { display:block; }.connection-lockup b { font-size:13px; }.connection-lockup small { margin-top:4px; color:var(--muted); font:9px "Cascadia Code",monospace; } |
| .signal { width:8px; height:8px; display:inline-block; border-radius:50%; background:#48605d; box-shadow:0 0 0 5px rgba(72,96,93,.12); }.signal[data-tone="ok"] { background:var(--cyan); box-shadow:0 0 0 5px rgba(49,212,189,.1),0 0 16px var(--cyan); }.signal[data-tone="error"] { background:var(--red); } |
| .workbench { display:grid; grid-template-columns:minmax(610px,1.7fr) minmax(340px,.8fr); gap:12px; padding:12px; } |
| .panel { background:linear-gradient(145deg,rgba(15,30,28,.97),rgba(9,19,18,.98)); border:1px solid var(--line); box-shadow:0 16px 44px rgba(0,0,0,.2); } |
| .panel-head { min-height:48px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.panel-head>div { display:flex; align-items:center; gap:9px; }.index { color:var(--amber); font:10px "Cascadia Code",monospace; }.panel h2 { margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }.live-readout { color:var(--muted); font:10px "Cascadia Code",monospace; } |
| .monitor { grid-row:span 2; }.viewport-shell { position:relative; margin:14px; aspect-ratio:1; overflow:hidden; background:#020605; border:1px solid #36504c; }.viewport-shell::before,.viewport-shell::after { content:""; position:absolute; z-index:2; pointer-events:none; }.viewport-shell::before { inset:10px; border:1px solid rgba(255,255,255,.08); }.viewport-shell::after { inset:0; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.1) 4px); } |
| canvas { width:100%; height:100%; object-fit:contain; display:block; }.empty-state { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:13px; color:var(--muted); text-align:center; }.empty-state[hidden] { display:none; }.empty-state strong { color:#a9bbb7; font-size:14px; letter-spacing:.1em; }.empty-state small { font-size:11px; }.reticle { width:94px; height:94px; border:1px solid rgba(49,212,189,.55); border-radius:50%; position:relative; box-shadow:0 0 40px rgba(49,212,189,.08); }.reticle::before,.reticle::after { content:""; position:absolute; background:var(--cyan); opacity:.55; }.reticle::before { width:130px; height:1px; left:-18px; top:46px; }.reticle::after { height:130px; width:1px; top:-18px; left:46px; } |
| .viewport-meta { position:absolute; z-index:3; left:14px; right:14px; bottom:12px; display:flex; justify-content:space-between; color:#b6c7c3; font:10px "Cascadia Code",monospace; text-shadow:0 2px 3px #000; }.legend { padding:0 15px 14px; display:flex; gap:22px; color:var(--muted); font:9px "Cascadia Code",monospace; }.legend i { display:inline-block; width:15px; height:8px; margin-right:6px; border:1px solid var(--cyan); }.legend .target-key { border-color:var(--amber); }.legend .zone-key { border-style:dashed; border-color:var(--amber); } |
| .controls { padding-bottom:14px; }.controls label { display:block; margin:14px 14px 0; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }.controls select { width:100%; margin-top:7px; padding:10px 12px; color:var(--text); background:#091311; border:1px solid var(--line); }.controls button { width:calc(100% - 28px); margin:10px 14px 0; padding:11px 12px; color:var(--text); background:#152522; border:1px solid #35514c; cursor:pointer; transition:transform .15s,border-color .15s,background .15s; }.controls button:hover { transform:translateY(-1px); border-color:#6d8b85; }.controls .primary { color:#06110f; font-weight:700; background:var(--cyan); border-color:var(--cyan); }.button-pair { display:flex; margin:0 14px; gap:8px; }.button-pair button { width:50%; margin-left:0; margin-right:0; }.rule { margin:16px 14px 5px; border-top:1px solid var(--line); }.record span { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--red); }.record.active { border-color:var(--red); color:#ffd5d2; background:#331714; }.safety-note { margin:12px 14px 0; color:var(--muted); font-size:10px; line-height:1.6; } |
| .health { grid-column:span 2; }.health-grid { display:grid; grid-template-columns:repeat(4,1fr); }.health-grid article { min-height:92px; padding:14px; border-right:1px solid var(--line); }.health-grid article:last-child { border:0; }.health-grid small,.metric-strip small { display:block; color:var(--muted); font:9px "Cascadia Code",monospace; letter-spacing:.1em; }.health-grid b { display:block; margin:9px 0 5px; color:var(--cyan); font:17px "Cascadia Code",monospace; }.health-grid span { color:#90a4a0; font-size:10px; }.findings { display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 14px; }.findings p { margin:0; padding:7px 9px; color:#a9bbb7; background:#111f1d; border-left:2px solid var(--muted); font-size:10px; }.findings p[data-tone="error"] { border-color:var(--red); }.findings p[data-tone="warning"] { border-color:var(--amber); }.findings p[data-tone="ok"] { border-color:var(--cyan); }.findings p span { margin-right:8px; color:var(--muted); font:9px "Cascadia Code",monospace; } |
| .telemetry { grid-column:span 2; }.metric-strip { display:grid; grid-template-columns:repeat(4,1fr); }.metric-strip div { padding:14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.metric-strip div:nth-child(4n) { border-right:0; }.metric-strip b { display:block; margin-top:8px; color:#e7eeeC; font:17px "Cascadia Code",monospace; }.vector-readout { display:flex; gap:25px; padding:10px 14px; color:var(--muted); background:#091311; border-top:1px solid var(--line); font:9px "Cascadia Code",monospace; }.vector-readout b { margin-left:6px; color:var(--amber); } |
| .events { grid-column:span 2; }.events ol { max-height:190px; overflow:auto; margin:0; padding:0; list-style:none; }.events li { display:flex; gap:18px; padding:9px 14px; border-top:1px solid rgba(41,65,62,.45); font-size:11px; }.events time { flex:0 0 75px; color:var(--muted); font:9px "Cascadia Code",monospace; }.events li[data-tone="error"] span { color:#ff938d; }.events li[data-tone="warning"] span { color:var(--amber); }.muted { color:var(--muted); }.recording-state { color:var(--muted); font:9px "Cascadia Code",monospace; }.recording-state.active { color:var(--red); animation:pulse 1.2s infinite; }.text-button { color:var(--amber); background:none; border:0; cursor:pointer; font:10px "Cascadia Code",monospace; } |
| .toast { position:fixed; right:20px; bottom:20px; max-width:390px; padding:12px 16px; color:#07100f; background:var(--cyan); box-shadow:0 12px 36px #000; transform:translateY(80px); opacity:0; transition:.25s; font-size:12px; }.toast.visible { transform:none; opacity:1; }.toast[data-tone="error"] { background:var(--red); } |
| @keyframes pulse { 50% { opacity:.42; } } |
| @media (max-width:1100px) { body { min-width:760px; }.workbench { grid-template-columns:1fr; }.monitor { grid-row:auto; }.health,.telemetry,.events { grid-column:auto; }.health-grid { grid-template-columns:repeat(2,1fr); }.metric-strip { grid-template-columns:repeat(3,1fr); } } |
|
|
