@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap');

:root { --ink:#25304d; --muted:#61708c; --paper:#fff9ee; --line:#dce7f1; --blue:#3979e7; --purple:#7757c8; --green:#20a96b; --dark:#26365d; --yellow:#ffc94d; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:radial-gradient(circle at 15% 10%,#fff2bd 0,transparent 24rem),radial-gradient(circle at 88% 24%,#ddecff 0,transparent 28rem),var(--paper); color:var(--ink); font-family:Nunito,sans-serif; } main,footer { max-width:1120px; margin:auto; padding-left:28px; padding-right:28px; }
.hero { position:relative; padding:112px 0 86px; }.hero::after { content:"✦  ✧  ✦"; position:absolute; right:5%; top:90px; color:#f3b321; font-size:28px; letter-spacing:18px; transform:rotate(10deg); }.hero-sun { display:grid; place-items:center; width:86px; height:86px; margin-bottom:14px; border-radius:50%; background:#fff0b5; box-shadow:0 8px 0 #f5d96e; font-size:46px; transform:rotate(-8deg); }.kicker,.section-heading>p,.question>span,.takeaway>span { color:#5265bd; font-weight:900; font-size:12px; letter-spacing:1.1px; }.hero h1 { max-width:900px; margin:17px 0; color:#293860; font-family:'Baloo 2',sans-serif; font-size:clamp(44px,7vw,76px); font-weight:800; line-height:.98; letter-spacing:-2.8px; }.hero h1 em { color:#e26655; font-style:normal; }.intro { max-width:650px; color:var(--muted); font-size:20px; font-weight:600; line-height:1.6; }.start { display:inline-flex; gap:12px; margin-top:28px; padding:15px 20px; border-radius:999px; background:var(--blue); box-shadow:0 5px 0 #205ab9; color:#fff; text-decoration:none; font-weight:900; transition:transform .2s; }.start:hover { transform:translateY(-2px); }
.question { padding:36px 42px; border:3px solid #cce1fa; border-radius:26px; background:#eaf5ff; box-shadow:0 8px 0 #cde6ff; }.question p { max-width:820px; margin:8px 0 0; font-family:'Baloo 2',sans-serif; font-size:clamp(25px,3.5vw,38px); font-weight:700; line-height:1.18; }
.section-heading h2,.evidence h2 { margin:5px 0 0; font-family:'Baloo 2',sans-serif; font-size:clamp(34px,4vw,48px); line-height:1; letter-spacing:-1.2px; }.subtitle { color:var(--muted); font-size:17px; font-weight:700; }
.live-lab,.flow,.simulator,.facts,.evidence { padding:88px 0; }.live-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 16px; }.data-status { color:var(--muted); font-weight:800; }.data-status.ready { color:#168559; }.live-toolbar button { padding:11px 17px; border:0; border-radius:999px; background:var(--purple); box-shadow:0 4px 0 #5738a2; color:#fff; cursor:pointer; font:900 14px Nunito,sans-serif; }.live-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.live-card { padding:25px; border:3px solid var(--line); border-radius:23px; background:#fff; box-shadow:0 7px 0 #d9e7f2; }.live-card.voltage { background:#eef6ff; border-color:#c9e1fa; }.live-card.current { background:#f2edff; border-color:#dfd1ff; }.live-card.power { background:#fff6d9; border-color:#fee5a0; }.live-card span,.live-card small { display:block; font-weight:900; }.live-card span { color:#5a6680; }.live-card b { display:block; margin:10px 0 2px; color:#2a3e72; font-family:'Baloo 2',sans-serif; font-size:clamp(30px,4vw,48px); line-height:1; }.live-card small { color:var(--muted); }.mini-chart-card { margin-top:19px; padding:25px; border:3px solid #d3e9dc; border-radius:25px; background:#f5fff9; }.mini-chart-card p { margin:0; color:#42986e; font-size:12px; font-weight:900; letter-spacing:1px; }.mini-chart-card h3 { margin:4px 0 13px; font-family:'Baloo 2',sans-serif; font-size:25px; line-height:1; }.mini-chart-card svg { display:block; width:100%; height:auto; border-radius:14px; background:linear-gradient(to bottom,transparent 32%,#d9f1e245 33%,transparent 34%,transparent 65%,#d9f1e245 66%,transparent 67%); }.mini-chart-card polyline { fill:none; stroke:#20a96b; stroke-linecap:round; stroke-linejoin:round; stroke-width:5; }.mini-chart-card path { fill:#7ce0a640; }.chart-labels { display:flex; justify-content:space-between; color:#627990; font-size:12px; font-weight:800; }.data-note { margin:15px 0 0; color:var(--muted); font-size:14px; font-weight:700; line-height:1.5; }
.flow-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:12px; align-items:center; margin-top:38px; }.flow-grid article { min-height:206px; padding:23px; border:3px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 6px 0 #dae7f0; transition:transform .2s; }.flow-grid article:hover { transform:translateY(-4px) rotate(-1deg); }.flow-grid article:nth-of-type(2) { background:#f1edff; border-color:#ddd2ff; }.flow-grid article:nth-of-type(3) { background:#edfff5; border-color:#c9efd9; }.flow-grid article:nth-of-type(4) { background:#fff3ec; border-color:#ffd8c4; }.flow-grid i { color:#ef9e51; font-size:34px; font-style:normal; font-weight:900; }.flow-icon { display:grid; width:56px; height:56px; place-items:center; border-radius:18px; background:#e8f4ff; font-size:30px; }.flow-grid h3 { margin:17px 0 6px; font-family:'Baloo 2',sans-serif; font-size:23px; line-height:1.05; }.flow-grid p { color:var(--muted); font-size:15px; font-weight:700; line-height:1.45; }
.simulator { position:relative; }.simulator::before { content:"🎮"; position:absolute; right:3%; top:80px; font-size:60px; transform:rotate(12deg); }.simulation-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:18px; margin-top:28px; }.control-panel,.system-map { border-radius:26px; padding:30px; }.control-panel { background:linear-gradient(150deg,#473b86,#26365d); box-shadow:0 9px 0 #202c4c; color:#fff; }.scenario-status { display:flex; gap:8px; align-items:center; color:#d9d9ff; font-size:13px; font-weight:900; }.scenario-status span:first-child { width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:#5ff0a7; box-shadow:0 0 0 3px #57da9b55; }.control-panel h3 { margin:22px 0 10px; font-family:'Baloo 2',sans-serif; font-size:32px; line-height:1; }.control-panel p { color:#e1e8ff; font-size:16px; font-weight:600; line-height:1.55; }.buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }.buttons button { padding:12px 16px; border:2px solid #9eb0df; border-radius:999px; background:transparent; color:#fff; cursor:pointer; font-family:Nunito,sans-serif; font-weight:900; }.buttons button:disabled { opacity:.4; cursor:not-allowed; }.buttons .primary { border-color:#ffd451; background:#ffc94d; box-shadow:0 4px 0 #d7a52d; color:#3e315e; }.system-map { display:flex; align-items:center; justify-content:center; gap:12px; border:3px solid #dce9f7; background:linear-gradient(145deg,#fff,#f2fbff); color:var(--ink); }.node { width:119px; min-height:110px; display:grid; place-content:center; gap:8px; text-align:center; border:3px solid #dbe5ef; border-radius:20px; background:#fff; box-shadow:0 5px 0 #dce8f1; }.node b { font-size:14px; }.node small { color:var(--muted); font-size:12px; font-weight:800; }.link { width:36px; height:5px; border-radius:4px; background:#7cb6e9; }.sample-strip { display:flex; flex-wrap:wrap; gap:8px; min-height:69px; padding:24px 0; }.sample-strip span { padding:9px 12px; border:2px solid #cfe2fa; border-radius:999px; background:#eaf5ff; color:#3a6598; font-size:12px; font-weight:900; } body[data-state="offline"] #link-cloud { background:repeating-linear-gradient(90deg,#eb9a34 0 7px,transparent 7px 14px); } body[data-state="offline"] #node-cloud { opacity:.45; transform:rotate(-3deg); } body[data-state="offline"] .scenario-status span:first-child { background:#f7aa37; box-shadow:0 0 0 3px #f7aa3755; } body[data-state="recovered"] .node { border-color:#56ca91; background:#effff6; } body[data-state="recovered"] .link { background:#49c98a; }
.facts { position:relative; overflow:hidden; background:linear-gradient(140deg,#364d91,#26365d); color:#fff; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:max(28px,calc((100vw - 1120px)/2 + 28px)); padding-right:max(28px,calc((100vw - 1120px)/2 + 28px)); }.facts::after { content:"⚡"; position:absolute; right:7%; bottom:-38px; color:#ffffff15; font-size:190px; }.facts .section-heading>p { color:#b5caff; }.fact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px; }.fact-grid article { position:relative; z-index:1; padding:24px; border:2px solid #ffffff26; border-radius:22px; background:#ffffff14; }.fact-grid b { display:block; color:#ffdc68; font-family:'Baloo 2',sans-serif; font-size:38px; line-height:1; }.fact-grid span { display:block; margin-top:10px; color:#e0eaff; font-size:14px; font-weight:700; line-height:1.4; }.evidence { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }.evidence ol { margin:0; padding:0; list-style:none; }.evidence li { position:relative; padding:4px 0 27px 72px; min-height:92px; border-bottom:2px dashed #d8e2ee; }.evidence li::before { content:"✓"; position:absolute; left:0; top:0; display:grid; width:44px; height:44px; place-items:center; border-radius:50%; background:#dff8e9; color:#18955b; font-weight:900; font-size:24px; }.evidence b,.evidence span { display:block; }.evidence b { font-family:'Baloo 2',sans-serif; font-size:21px; line-height:1.1; }.evidence span { margin-top:6px; color:var(--muted); font-size:15px; font-weight:700; line-height:1.45; }.takeaway { padding:45px; border:3px solid #ffe38f; border-radius:28px; background:#fff5c8; box-shadow:0 8px 0 #f3dc85; margin:0 0 80px; }.takeaway p { max-width:830px; margin:8px 0 0; font-family:'Baloo 2',sans-serif; font-size:28px; font-weight:700; line-height:1.22; } footer { padding-bottom:42px; color:#65718b; font-size:13px; font-weight:800; text-align:center; }
@media (max-width:800px) { .hero { padding-top:70px; }.hero::after,.simulator::before { display:none; }.hero h1 { letter-spacing:-2px; }.flow-grid { grid-template-columns:1fr; }.flow-grid i { transform:rotate(90deg); text-align:center; }.simulation-layout,.evidence { grid-template-columns:1fr; }.system-map { flex-wrap:wrap; }.fact-grid,.live-cards { grid-template-columns:repeat(2,1fr); }.evidence { gap:30px; } } @media (max-width:450px) { main,footer { padding-left:18px;padding-right:18px; }.question,.takeaway { padding:26px; }.fact-grid,.live-cards { grid-template-columns:1fr; }.live-toolbar { align-items:flex-start; flex-direction:column; }.system-map { padding:20px 8px; gap:7px; }.node { width:104px; }.link { width:18px; } }