:root{--bg:#07111f;--bg2:#0b1830;--panel:#111f35;--panel2:#162943;--text:#eef7ff;--muted:#9fb3c8;--line:#2b4564;--accent:#35d0ff;--accent2:#8b5cf6;--good:#35d39a;--warn:#ffbf47;--bad:#ff6b7a;--grid:rgba(159,179,200,.13);--shadow:0 18px 50px rgba(0,0,0,.28)}
[data-theme="light"]{--bg:#eef7ff;--bg2:#f8fbff;--panel:#fff;--panel2:#edf3fa;--text:#102033;--muted:#52677f;--line:#c8d8e8;--accent:#008fc7;--accent2:#6d44d8;--good:#0e9b69;--warn:#b77700;--bad:#d63b50;--grid:rgba(71,101,128,.12);--shadow:0 16px 44px rgba(50,83,112,.16)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 12% 8%,rgba(53,208,255,.12),transparent 28%),radial-gradient(circle at 86% 4%,rgba(139,92,246,.12),transparent 30%),linear-gradient(135deg,var(--bg),var(--bg2));min-height:100vh}.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg2) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.topbar-inner{max-width:1480px;margin:auto;padding:11px 18px;display:flex;justify-content:space-between;gap:12px;align-items:center}.brand{display:flex;gap:12px;align-items:center}.logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101d;font-weight:950}.brand strong{display:block}.brand span{display:block;color:var(--muted);font-size:.8rem}.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}button,.btn,select,input{font:inherit}.btn,button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:11px;padding:9px 12px;font-weight:800;cursor:pointer;text-decoration:none}.btn:hover,button:hover{border-color:var(--accent)}.btn.primary,button.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07111e;border:none}.wrap{max-width:1480px;margin:auto;padding:26px 18px 50px}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}.card,.hero-main,.hero-side{background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.hero-main,.hero-side,.card{padding:20px}.eyebrow{color:var(--accent);font-weight:900;letter-spacing:.11em;text-transform:uppercase;font-size:.78rem}.hero h1{font-size:clamp(2rem,4.4vw,4.5rem);line-height:.98;letter-spacing:-.045em;margin:.2em 0}.lead{color:var(--muted);line-height:1.65;font-size:1.04rem}.formula{padding:13px 15px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(53,208,255,.07),rgba(139,92,246,.07));margin:8px 0}.formula b{display:block;font-size:1.18rem}.formula small{color:var(--muted)}.layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px}.controls{display:grid;gap:12px}.control{border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--panel2)}.control-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.value{padding:4px 8px;border:1px solid var(--line);border-radius:9px;font-variant-numeric:tabular-nums;color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent)}.hint,.small{font-size:.8rem;color:var(--muted);line-height:1.45}.main{display:grid;gap:18px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.metric{border:1px solid var(--line);border-radius:15px;padding:13px;background:var(--panel2)}.metric span{color:var(--muted);font-size:.75rem;text-transform:uppercase;font-weight:800;letter-spacing:.06em}.metric strong{display:block;font-size:1.55rem;margin-top:4px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.panel-title h2{font-size:1.08rem;margin:0}.tag{font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:var(--accent);font-weight:800}.chart{width:100%;height:auto;display:block;background:color-mix(in srgb,var(--panel2) 76%,transparent);border-radius:15px}.gridline{stroke:var(--grid);stroke-width:1}.axis{stroke:var(--line);stroke-width:1}.axis-label{fill:var(--muted);font-size:12px}.text{fill:var(--text);font-size:12px}.muted{fill:var(--muted);font-size:11px}.good{color:var(--good)}.warn{color:var(--warn)}.bad{color:var(--bad)}.explain{color:var(--muted);line-height:1.65}.concepts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.concept{border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--panel2)}.concept b{display:block;margin-bottom:5px}.concept span{color:var(--muted);font-size:.84rem;line-height:1.5}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:.65rem;border-bottom:1px solid var(--line);text-align:left}th{color:var(--accent)}.footer{text-align:center;color:var(--muted);font-size:.82rem;margin-top:26px}.split2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bars{display:grid;gap:8px}.bar{height:18px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;overflow:hidden}.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}.callout{border-left:4px solid var(--accent);padding:12px 14px;border-radius:12px;background:var(--panel2);color:var(--muted);line-height:1.55}.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.78rem}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);border:1px solid var(--line);padding:12px;border-radius:14px;white-space:pre-wrap;line-height:1.45;color:var(--text)}
@media(max-width:1000px){.hero,.layout,.split2{grid-template-columns:1fr}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.topbar-inner{align-items:flex-start;flex-direction:column}.controls,.metrics,.concepts{grid-template-columns:1fr}.wrap{padding:18px 12px 40px}.hero-main,.hero-side,.card{padding:16px}}