styles.css

:root { color-scheme: light; --ink:#17212b; --muted:#56616d; --line:#d8dee6; --blue:#087ea4; --orange:#f28e2b; --purple:#a23ea4; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:linear-gradient(145deg,#eef7fa 0,#fff 42%,#fbf2e8 100%); }
main { width:min(1180px,94vw); margin:0 auto; padding:56px 0 72px; }
header { background:#fff; border:1px solid var(--line); border-radius:22px; padding:42px; box-shadow:0 18px 50px #26384a16; }
.eyebrow { color:var(--blue); font-weight:800; letter-spacing:.12em; font-size:.78rem; }
h1 { max-width:900px; margin:.25rem 0 1rem; font-size:clamp(2rem,5vw,4.4rem); line-height:1.02; letter-spacing:-.045em; }
.lead { max-width:850px; color:var(--muted); font-size:1.15rem; line-height:1.65; }
nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
a { color:#fff; background:var(--ink); padding:10px 15px; border-radius:999px; text-decoration:none; font-weight:700; }
a:hover { background:var(--blue); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0; }
.metrics article { background:#ffffffcc; border:1px solid var(--line); border-radius:16px; padding:21px; }
.metrics strong { display:block; font-size:1.45rem; }
.metrics span { color:var(--muted); font-size:.9rem; }
.viewer,.note { background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px; margin-top:22px; box-shadow:0 18px 50px #26384a10; }
.tabs { display:flex; gap:8px; }
.tabs button { border:1px solid var(--line); background:#f6f8fa; border-radius:10px; padding:10px 18px; font-weight:750; cursor:pointer; }
.tabs button.active { color:#fff; background:var(--blue); border-color:var(--blue); }
#caption { font-weight:750; }
#result { display:block; width:100%; border:1px solid var(--line); border-radius:14px; background:#f7f7f7; }
.legend { display:flex; gap:24px; margin:15px 4px 2px; font-weight:700; }
.legend span::before { content:""; display:inline-block; width:22px; height:4px; margin-right:8px; vertical-align:middle; border-radius:2px; }
.shock::before { background:var(--orange); } .core::before { background:var(--purple); }
.note p { color:var(--muted); line-height:1.65; }
@media (max-width:760px) { main{padding-top:20px} header{padding:25px} .metrics{grid-template-columns:1fr 1fr} }