:root{
  --bg:#060a12;--panel:rgba(12,18,32,.84);--panel-2:rgba(10,16,28,.72);--line:rgba(160,188,255,.14);--line-strong:#415780;--text:#e7efff;--muted:#9fb1d1;--accent:#7cc7ff;--accent-2:#ffd166;--shadow:0 18px 50px rgba(0,0,0,.30);--radius:18px
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);background:radial-gradient(circle at top,rgba(68,96,154,.20),transparent 28%),radial-gradient(circle at 20% 20%,rgba(70,180,255,.12),transparent 20%),linear-gradient(180deg,#050810,#070b14 40%,#050810);font:14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
.app{height:100%;display:grid;grid-template-columns:360px 1fr;gap:14px;padding:14px}
.panel,.canvas-wrap{background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel{display:flex;flex-direction:column;min-width:280px}
.panel-header{padding:18px 18px 14px;border-bottom:1px solid rgba(160,188,255,.08)}
.eyebrow{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:11px;margin:0 0 8px}
h1{margin:0;font-size:24px;line-height:1.15}
.subtitle{margin:8px 0 0;color:var(--muted);font-size:13px}
.panel-scroll{padding:14px 18px 18px;overflow:auto}
.group{border:1px solid rgba(160,188,255,.10);border-radius:14px;background:rgba(6,10,18,.32);padding:12px;margin:0 0 12px}
.group h2{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#c7d6f0}
.stack{display:grid;gap:10px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions .wide{grid-column:1 / -1}
label{display:grid;gap:6px;color:#d8e4f8;font-size:13px}
.inline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.inline .value{color:var(--accent-2);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
select,input[type=range],input[type=text],button{width:100%;font:inherit}
select,input[type=range],input[type=text]{accent-color:var(--accent)}
select,input[type=text]{background:var(--panel-2);color:var(--text);border:1px solid var(--line-strong);border-radius:10px;padding:9px 10px;outline:none}
input[type=range]{margin:0}
button{border:1px solid #4d658f;border-radius:12px;padding:10px 12px;color:var(--text);background:linear-gradient(180deg,#203351,#18253b);cursor:pointer}
button:hover{filter:brightness(1.08)}
button.primary{background:linear-gradient(180deg,#2d5fa8,#21457a);border-color:#5f8dd9}
button:focus-visible,select:focus-visible,input[type=text]:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toggle{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid rgba(160,188,255,.10);border-radius:12px;padding:10px 12px}
.toggle input{width:auto}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.orbital-stats{grid-template-columns:1fr}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(160,188,255,.10);border-radius:14px;padding:10px 12px;min-height:72px}
.card .k{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.card .v{font-size:18px;font-variant-numeric:tabular-nums}.card small{color:var(--muted);display:block;margin-top:3px;font-size:11px}
.diagnostic-shell{display:grid;gap:10px}
.diagnostic-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.diagnostic-badge{background:rgba(255,255,255,.04);border:1px solid rgba(160,188,255,.10);border-radius:12px;padding:10px 12px;color:var(--muted);font-size:12px;display:grid;gap:6px}
.diagnostic-badge strong{color:var(--text);font-size:16px;line-height:1.15}
.diagnostic-grid{display:grid;gap:10px}
.diagnostic-card{min-height:auto}
.diagnostic-card .v{font-size:16px;line-height:1.25}
.diagnostic-card small{line-height:1.45}
.report{margin:0;white-space:pre-wrap;max-height:220px;overflow:auto;background:rgba(255,255,255,.03);border:1px solid rgba(160,188,255,.10);border-radius:14px;padding:10px 12px;color:#dfe8ff;font-size:12px;line-height:1.5}
.legend{color:var(--muted);font-size:12px;line-height:1.5}.legend code{color:#dfe9ff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:.1rem .35rem;border-radius:999px}
.footer{color:var(--muted);font-size:11px;margin-top:12px;line-height:1.5}
.canvas-wrap{position:relative;min-width:0}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.hud{position:absolute;left:16px;right:16px;top:16px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}
.hud .pill{pointer-events:none;display:inline-flex;align-items:center;gap:8px;background:rgba(5,9,17,.74);border:1px solid rgba(160,188,255,.14);backdrop-filter:blur(10px);border-radius:999px;padding:8px 12px;box-shadow:0 10px 25px rgba(0,0,0,.22);color:var(--muted)}
.hud strong{color:var(--text)}
.hint{position:absolute;left:16px;bottom:16px;max-width:440px;background:rgba(5,9,17,.78);border:1px solid rgba(160,188,255,.14);backdrop-filter:blur(10px);border-radius:14px;padding:10px 12px;color:#dce7fa;box-shadow:0 10px 25px rgba(0,0,0,.22)}
.hint .mini{color:var(--muted);font-size:11px;margin-top:3px}
.shortcut-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,12,.72);backdrop-filter:blur(10px);z-index:50}
.shortcut-overlay.open{display:flex}
.shortcut-panel{width:min(760px,100%);max-height:min(88vh,900px);overflow:auto;background:rgba(10,16,28,.95);border:1px solid rgba(160,188,255,.16);border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.45);padding:18px}
.shortcut-panel header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.shortcut-panel h3{margin:0;font-size:20px}
.shortcut-panel p{margin:0;color:var(--muted)}
.shortcut-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.shortcut-card{background:rgba(255,255,255,.03);border:1px solid rgba(160,188,255,.10);border-radius:14px;padding:12px}
.shortcut-card h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#c7d6f0}
.shortcut-card ul{margin:0;padding-left:18px;color:#dce7fa}
.shortcut-card li{margin:0 0 6px}
.shortcut-card code{color:#dfe9ff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:.1rem .35rem;border-radius:999px}
.shortcut-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.presentation-dock{position:absolute;right:16px;bottom:16px;left:16px;display:none;gap:12px;padding:16px;border-radius:18px;background:rgba(4,9,16,.86);border:1px solid rgba(160,188,255,.16);backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.32);color:var(--text);z-index:15}
.presentation-mode .panel{display:none}
.presentation-mode .app{grid-template-columns:1fr}
.presentation-mode .presentation-dock{display:grid}
.presentation-mode .canvas-wrap{min-height:calc(100vh - 28px)}
.presentation-dock-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.presentation-eyebrow{margin:0 0 4px;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.presentation-dock h2{margin:0;font-size:22px;line-height:1.15}
.presentation-dock p{margin:6px 0 0;color:var(--muted)}
.presentation-dock-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:min(300px,100%)}
.presentation-brief{margin:0;white-space:pre-wrap;max-height:260px;overflow:auto;background:rgba(255,255,255,.03);border:1px solid rgba(160,188,255,.10);border-radius:14px;padding:12px;color:#dfe8ff;font-size:12px;line-height:1.55}
.presentation-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:12px}
.presentation-meta strong{color:var(--text)}
@media(max-width:900px){body{overflow:auto}.app{height:auto;min-height:100%;grid-template-columns:1fr}.panel{max-height:none}.canvas-wrap{height:70vh;min-height:520px}.panel-scroll{max-height:none}}
@media(max-width:700px){.diagnostic-badges{grid-template-columns:1fr}.shortcut-grid{grid-template-columns:1fr}.presentation-dock-header{flex-direction:column}.presentation-dock-actions{justify-content:flex-start;min-width:0}}
@media(max-width:560px){.app{padding:8px;gap:8px}.stats{grid-template-columns:1fr}.hud{left:10px;right:10px;top:10px}.hud .pill{font-size:11px;padding:7px 9px}.hint{left:10px;right:10px;bottom:10px}.canvas-wrap{min-height:460px;height:65vh}}