:root { color-scheme:dark; --bg:#090c12; --panel:rgba(18,24,36,.92); --text:#e9edf6; --muted:#9aa6b9; --border:rgba(255,255,255,.09); --accent:#57c3ff; --green:#36d58b; --amber:#f6a623; --red:#ff5964; --orange:#ff7b2f; --shadow:rgba(0,0,0,.42); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--text); background:radial-gradient(circle at 50% -10%,#1c2d45 0,#0d111a 43%,var(--bg) 75%); font-family:"Space Grotesk",sans-serif; }
button,select { font:inherit; }
button { cursor:pointer; }
.glow { position:fixed; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.14; }.glow-one { width:520px;height:520px;top:-180px;right:-120px;background:#3b9eff; }.glow-two { width:420px;height:420px;bottom:8%;left:-180px;background:#d0528e; }
.shell { position:relative;z-index:1;width:min(1320px,94vw);margin:auto;padding:38px 0 64px; }
.hero,.panel-heading { display:flex;justify-content:space-between;align-items:flex-end;gap:28px; }.hero { margin-bottom:22px; }
.breadcrumb { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;color:var(--muted);font-size:.78rem; }.breadcrumb a { color:var(--accent);text-decoration:none; }
.eyebrow,.section-kicker { margin:0 0 8px;color:var(--accent);font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase; }
h1 { margin:0;font-size:clamp(2.5rem,6vw,5rem);line-height:.95;letter-spacing:-.055em; }h2,p { margin-top:0; }.subhead { max-width:700px;margin:16px 0 0;color:var(--muted);font-size:1.03rem; }
.meta { display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end; }.meta-card { min-width:155px;padding:13px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(10,14,22,.65);box-shadow:0 12px 30px var(--shadow); }.meta-card span { display:block;margin-bottom:5px;color:var(--muted);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase; }.meta-card strong { font-size:.84rem; }
.rotation-panel,.detail-panel,.method-panel { margin-top:18px;padding:24px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg,rgba(25,33,49,.94),rgba(10,14,22,.9));box-shadow:0 20px 55px var(--shadow); }.rotation-panel { border-color:rgba(87,195,255,.25); }
.panel-heading { margin-bottom:18px; }.panel-heading h2,.detail-panel h2,.method-panel h2 { margin-bottom:0;font-size:clamp(1.4rem,2.8vw,2.15rem); }.panel-heading p:not(.section-kicker),.detail-panel p:not(.section-kicker),.method-panel>p:last-child { max-width:680px;margin:8px 0 0;color:var(--muted);font-size:.82rem;line-height:1.6; }
.heading-controls { display:flex;flex-direction:column;align-items:flex-end;gap:8px; }.view-toggle,.range-toggle { display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:13px;background:rgba(8,12,19,.75); }.view-toggle button,.range-toggle button { padding:10px 16px;border:0;border-radius:9px;color:var(--muted);background:transparent;font-weight:700; }.view-toggle button.active,.range-toggle button.active { color:var(--text);background:rgba(87,195,255,.18); }.range-toggle button { min-width:52px;padding:8px 11px;font-size:.72rem; }
.sector-filter { display:flex;align-items:center;gap:7px;overflow-x:auto;padding:0 0 12px;scrollbar-width:thin; }.sector-filter>span { flex:none;color:var(--muted);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; }.sector-filter button { flex:none;padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:rgba(8,12,19,.6);font-size:.7rem; }.sector-filter button.active { color:var(--text);border-color:rgba(87,195,255,.5);background:rgba(87,195,255,.16); }.subsector-filter { margin-bottom:4px; }
.transport { display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:12px;margin-bottom:12px;padding:10px 12px;border:1px solid var(--border);border-radius:13px;background:rgba(8,12,19,.55); }.play { display:flex;align-items:center;justify-content:center;gap:7px;min-width:90px;padding:9px 14px;border:1px solid rgba(87,195,255,.3);border-radius:10px;color:var(--text);background:rgba(87,195,255,.14);font-weight:700; }.transport input { width:100%;height:32px;margin:-8px 0;accent-color:var(--accent);cursor:pointer;touch-action:none; }.transport label { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.66rem; }.transport select { padding:7px;border:1px solid var(--border);border-radius:8px;color:var(--text);background:#101623; }
.frame-readout { display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:center;margin-bottom:12px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(8,12,19,.5); }.frame-readout strong { color:var(--accent); }.frame-readout span,.frame-readout small { color:var(--muted);font-size:.7rem; }.frame-readout small { justify-self:end; }
.chart-wrap { overflow:hidden;border:1px solid var(--border);border-radius:18px;background:rgba(7,11,18,.78); }#rotationChart { display:block;width:100%;height:auto;min-height:520px; }.bubble-trail { fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.2;pointer-events:none; }.bubble-trail.selected { stroke-width:3;opacity:.7; }.bubble { cursor:pointer;transition:cx .5s linear,cy .5s linear,r .3s ease,opacity .2s ease; }.bubble:hover,.bubble.selected { stroke:#fff;stroke-width:3; }.bubble-label { pointer-events:none;fill:#f3f6fb;font-size:12px;font-weight:700;text-anchor:middle;dominant-baseline:middle;text-shadow:0 1px 5px #000; }.axis-label { fill:#9aa6b9;font-size:12px; }.tick-label { fill:#778399;font-size:11px; }.quadrant-title { font-size:16px;font-weight:700;letter-spacing:.06em; }
.legend { display:flex;flex-wrap:wrap;gap:15px;margin-top:13px;color:var(--muted);font-size:.68rem; }.legend span { display:flex;align-items:center;gap:6px; }.legend i { width:9px;height:9px;border-radius:50%; }.leaders { background:var(--green); }.fading { background:var(--amber); }.laggards { background:var(--red); }.recovering { background:var(--orange); }
.detail-panel { display:grid;grid-template-columns:minmax(240px,.7fr) minmax(360px,1.3fr);gap:24px; }.detail-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:9px; }.stat { padding:14px;border:1px solid var(--border);border-radius:13px;background:rgba(8,12,19,.55); }.stat span,.stat small { display:block;color:var(--muted);font-size:.61rem; }.stat strong { display:block;margin:8px 0 3px;font-size:1rem; }.constituents { grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px; }.constituents span { padding:7px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.68rem; }
footer { display:flex;align-items:center;gap:16px;margin-top:22px;color:var(--muted);font-size:.72rem; }footer button { padding:10px 17px;border:0;border-radius:999px;color:#07111b;background:var(--accent);font-weight:700; }footer button:disabled { opacity:.55; }
@media(max-width:760px){.shell{padding-top:24px}.hero,.panel-heading{align-items:flex-start;flex-direction:column}.meta{width:100%;justify-content:flex-start}.meta-card{flex:1;min-width:135px}.rotation-panel,.detail-panel,.method-panel{padding:16px;border-radius:19px}.heading-controls,.view-toggle,.range-toggle{width:100%;align-items:stretch}.view-toggle button,.range-toggle button{flex:1;min-width:0}.transport{grid-template-columns:auto minmax(100px,1fr)}.transport label{grid-column:1/-1;justify-self:end}.frame-readout{grid-template-columns:1fr auto}.frame-readout small{grid-column:1/-1;justify-self:start}.chart-wrap{overflow-x:auto}#rotationChart{width:760px;min-height:548px}.detail-panel{grid-template-columns:1fr}.detail-stats{grid-template-columns:1fr 1fr}.constituents{grid-column:1}.breadcrumb{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.bubble{transition:none}}