:root { color-scheme: dark; font-family: "Segoe UI", system-ui, sans-serif; color: #f3f5f6; background: #10151b; font-synthesis: none; }
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 62% 35%, rgba(76,94,108,.32), transparent 34%), linear-gradient(135deg,#161d24,#0a0e12 74%); }
button { color: inherit; font: inherit; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.topbar, .hero-copy, .control-panel, .footer { position: fixed; z-index: 2; }
.topbar { top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; font: 500 11px/1 Consolas,monospace; letter-spacing: .14em; }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: #e5b927; }
.status { display: flex; gap: 9px; align-items: center; color: #9aa5af; font: 400 9px/1 Consolas,monospace; letter-spacing: .13em; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #63e6a5; box-shadow: 0 0 12px rgba(99,230,165,.85); }
.hero-copy { top: 50%; left: 4.2vw; width: min(31vw,440px); transform: translateY(-48%); pointer-events: none; }
.eyebrow { margin: 0 0 20px; color: #e5b927; font: 500 10px/1 Consolas,monospace; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(44px,5.4vw,82px); font-weight: 500; line-height: .93; letter-spacing: -.06em; }
h1 em { color: #9ca7b1; font-weight: 400; }
.lede { max-width: 390px; margin: 24px 0 0; color: #9ba5ae; font-size: 13px; line-height: 1.7; }
.metrics { display: flex; gap: 26px; margin-top: 30px; }
.metrics div { display: flex; flex-direction: column; gap: 5px; }
.metrics strong { font-size: 17px; font-weight: 500; }
.metrics span { color: #68737e; font: 400 8px/1 Consolas,monospace; letter-spacing: .13em; }
.control-panel { top: 50%; right: 30px; width: 238px; padding: 17px; transform: translateY(-46%); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: rgba(12,16,21,.76); box-shadow: 0 28px 70px rgba(0,0,0,.3); backdrop-filter: blur(18px); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; color: #6f7b85; font: 500 8px/1 Consolas,monospace; letter-spacing: .15em; }
#view-label { color: #dde2e6; }
.view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.view-button { min-height: 35px; border: 1px solid rgba(255,255,255,.09); border-radius: 2px; background: rgba(255,255,255,.025); color: #8b96a0; cursor: pointer; font-size: 10px; }
.view-button:hover { border-color: rgba(255,255,255,.25); color: #fff; }
.view-button.is-active { border-color: rgba(229,185,39,.65); background: rgba(229,185,39,.11); color: #fff; }
.panel-note { margin: 13px 0 0; color: #73808a; font: 400 8px/1.75 Consolas,monospace; }
.footer { right: 32px; bottom: 23px; left: 32px; display: flex; justify-content: space-between; color: #5e6973; font: 400 8px/1 Consolas,monospace; letter-spacing: .13em; pointer-events: none; }
.loading { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; gap: 15px; align-items: center; justify-content: center; background: #10151b; color: #8d98a1; font: 500 9px/1 Consolas,monospace; letter-spacing: .17em; transition: opacity 300ms ease, visibility 300ms ease; }
.loading.is-hidden { visibility: hidden; opacity: 0; }
.loading-ring { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.15); border-top-color: #e5b927; border-radius: 50%; animation: spin 900ms linear infinite; }
.error { position: fixed; z-index: 20; inset: 30% 12%; padding: 28px; border: 1px solid #ff7d6e; border-radius: 12px; background: #15191f; color: #ffb3aa; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .topbar { padding: 16px; }
  .status { display: none; }
  .hero-copy { top: 84px; left: 16px; width: calc(100vw - 32px); transform: none; }
  h1 { font-size: clamp(34px,10vw,54px); }
  .lede, .metrics { display: none; }
  .control-panel { top: auto; right: 16px; bottom: 44px; left: 16px; width: auto; transform: none; }
  .panel-note { display: none; }
  .view-grid { grid-template-columns: repeat(3,1fr); }
  .footer { right: 16px; bottom: 18px; left: 16px; }
  .footer span:first-child { display: none; }
}