:root{
  --bg:#0b0f19; --fg:#d7e1ff; --muted:#9aa4c2;
  --neon:#67e8f9; --neon2:#a78bfa; --accent:#22d3ee;
  --border:rgba(255,255,255,.15); --glass:rgba(255,255,255,.06);
  --radius:14px; --maxw:1100px; --space:clamp(16px,2.5vw,28px);
  --header-h:72px; --header-clear:22px;
}
*{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);background: radial-gradient(1200px 700px at 70% -10%, #0f1630 0%, #0b0f19 50%, #070a12 100%);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"; overflow-x:hidden;}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
.container{width:min(100% - 2*var(--space), var(--maxw)); margin-inline:auto}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; position:relative}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.brand svg{width:28px; height:28px; filter:drop-shadow(0 0 6px rgba(103,232,249,.8))}
.brand span{font-weight:700; letter-spacing:.3px}
.btn-ghost{padding:.55rem .9rem; border:1px solid var(--border); border-radius:999px}
.btn-ghost:hover{border-color:var(--neon)}
.nav-blue{color:#22d3ee}
.menu-toggle{display:none; align-items:center; gap:.5rem; padding:.55rem .9rem; border:1px solid var(--border); border-radius:999px;
  background:rgba(255,255,255,.02); color:var(--fg); cursor:pointer;}
.menu-toggle:hover{border-color:var(--neon)}
.mobile-menu{display:none; position:absolute; right:0; top:calc(100% + 10px); width:max-content; max-width:calc(100vw - 2*var(--space));
  padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(to bottom, rgba(8,12,22,.90), rgba(8,12,22,.86));
  backdrop-filter: blur(6px); box-shadow:0 10px 34px rgba(0,0,0,.35); text-align:right;}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:.6rem .8rem; border-radius:8px; color:#22d3ee; white-space:nowrap;}
.mobile-menu a:hover{background:rgba(255,255,255,.05); text-decoration:none}
@media (max-width:900px){ header nav{ display:none } .menu-toggle{ display:inline-flex } }
header{position:fixed; top:0; left:0; right:0; z-index:100; backdrop-filter: blur(8px);
  background:linear-gradient(to bottom, rgba(8,12,22,.85), rgba(8,12,22,.35)); border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top);}
#header-spacer{ height: var(--header-h) }
@media (min-width:1024px){ #header-spacer{ height: calc(var(--header-h) + var(--header-clear)) } }
section{ padding:clamp(28px,5vw,70px) 0; position:relative }
section.tone::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.28) 100%),
    radial-gradient(80% 60% at 20% 20%, rgba(103,232,249,.08), transparent 70%),
    radial-gradient(70% 50% at 80% 0%, rgba(167,139,250,.07), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 50px);
  opacity:.8;}
.hero-title{ font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.12; text-shadow:0 0 24px rgba(103,232,249,.2), 0 0 6px rgba(167,139,250,.25) }
.lead{ color:#ECF1FF; max-width:70ch; margin:0 auto; text-align:center }
.muted{ color:var(--muted) }
.search-wrap{ margin:18px auto 10px; display:flex; flex-direction:column; gap:8px; max-width:900px }
.search{ width:100%; border:1px solid var(--border); background:var(--glass); color:var(--fg); border-radius:999px; padding:.8rem 1rem; outline:none; }
.search:focus{ border-color:var(--neon) }
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.chips button{ padding:.35rem .7rem; border-radius:999px; border:1px solid var(--border); background:var(--glass); color:var(--fg); }
.chips button[aria-pressed="true"]{ border-color:var(--neon); box-shadow:0 0 0 2px rgba(103,232,249,.25) inset }
.grid{ display:grid; gap:clamp(14px,2vw,22px) } .grid.cols-4{ grid-template-columns: repeat(2,1fr) }
@media (min-width:900px){ .grid.cols-4{ grid-template-columns: repeat(4,1fr) } }
.symbol-grid a{ display:block; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--glass); text-align:center; font-weight:700; letter-spacing:.2px; }
.symbol-grid a:hover{ border-color:var(--neon); text-decoration:none }
.quick-links{ text-align:center; margin:8px 0 18px } .quick-links a{ color:#9bdff0 }
.tf{ margin-top:20px } .chart{ height: 340px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); overflow:hidden; }
footer{ padding:34px 0; color:var(--muted); border-top:1px solid var(--border); background:transparent; }
.foot-flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:space-between }
.disclaimer{ display:block; margin-top:8px; line-height:1.5; text-align:center }
.status-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin:10px 0 16px; }
.status-grid .tile{ border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:var(--glass); }
.status-grid .tile h4{ margin:0 0 4px; font-size:13px; color:#9bdff0 }
.status-grid .tile .v{ font-size:13px; color:#cfe8ff }
.status-grid .tile .muted{ font-size:12px }
.grid-overlay{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, rgba(103,232,249,.12), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(167,139,250,.10), transparent 45%),
    linear-gradient(transparent 0 98%, rgba(255,255,255,.08) 99%),
    linear-gradient(90deg, transparent 0 98%, rgba(255,255,255,.08) 99%);
  background-size:100% 100%,100% 100%,50px 50px,50px 50px;}
.skip-link{ position:absolute; left:-999px; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ position:fixed; left:var(--space); top:var(--space); width:auto; height:auto; padding:.6rem 1rem; background:#000; border:1px solid var(--border); z-index:9999 }
:focus-visible{ outline:2px dashed var(--neon2); outline-offset:2px }