:root { color-scheme: light dark; --bg:#f6f8fc; --card:#fff; --ink:#24334c; --muted:#62718a; --border:#dbe2ee; --accent:#2855b7; --positive:#31747f; --negative:#a04868; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.65 system-ui,-apple-system,sans-serif; }
main { max-width:1040px; margin:auto; padding:20px; }
h1 { font-size:24px; line-height:1.3; margin:0 0 8px; }
h2 { font-size:18px; margin:0 0 12px; }
p { margin:8px 0; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.07em; margin:0 0 6px; }
.intro,.note { color:var(--muted); }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid #edb243; outline-offset:3px; }
.controls,.steps,.metrics,.pager { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.controls { padding:12px 14px; margin:16px 0; background:var(--card); border:1px solid var(--border); border-radius:12px; }
.controls label { display:flex; align-items:center; gap:8px; }
.controls input[type=range] { width:130px; accent-color:var(--accent); }
.steps { gap:6px; margin:12px 0; }
.steps button,.pager button,.reset { border:1px solid var(--border); background:var(--card); color:var(--ink); padding:7px 11px; border-radius:8px; }
.steps button[aria-pressed=true] { background:var(--accent); border-color:var(--accent); color:white; }
.pager button:disabled { cursor:default; opacity:.45; }
.metrics { margin:16px 0; }
.metric { flex:1; min-width:115px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px; }
.metric span { display:block; color:var(--muted); font-size:12px; }
.metric output { font:700 22px/1.4 ui-monospace,monospace; }
.panels { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:14px; }
.panel { min-width:0; padding:16px; background:var(--card); border:1px solid var(--border); border-radius:12px; }
.matrix { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:16px 0; }
.matrix button { min-height:50px; padding:6px 2px; border:1px solid var(--border); border-radius:8px; font:600 15px ui-monospace,monospace; }
.matrix button[data-sign=positive] { background:#e2f1f1; color:#235e68; }
.matrix button[data-sign=negative] { background:#f9e8ee; color:#953d5d; }
.matrix button[aria-pressed=true] { outline:3px solid var(--accent); outline-offset:1px; }
.formula { overflow-wrap:anywhere; font-family:ui-monospace,monospace; color:var(--accent); }
.calculation { margin:12px 0; padding:12px; border-radius:8px; background:var(--bg); overflow-wrap:anywhere; }
.legend { font-size:12px; color:var(--muted); }
.source-cells { display:flex; flex-wrap:wrap; gap:5px; margin:12px 0; }
.source-cells span { border:1px solid var(--border); padding:3px 6px; border-radius:5px; font:12px/1.6 ui-monospace,monospace; }
.chart { margin-top:16px; }
.chart img { display:block; width:100%; height:auto; background:white; border-radius:8px; }
.interactive-chart { display:block; width:100%; height:auto; background:white; border-radius:8px; }
[data-chart-point] { cursor:pointer; }
[data-chart-point]:focus-visible { outline:2px solid #edb243; }
[data-chart-point][aria-pressed=true] path,[data-chart-point][aria-pressed=true] use { stroke:#edb243; stroke-width:3px; }
.chart select { max-width:100%; border:1px solid var(--border); border-radius:6px; padding:5px; background:var(--card); color:var(--ink); }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
td,th { padding:6px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
tr[data-active=true] { color:var(--accent); font-weight:700; background:var(--bg); }
.footer { margin-top:14px; font-size:12px; color:var(--muted); }
a { color:var(--accent); }
@media (max-width:620px) { main { padding:14px; } h1 { font-size:21px; } .panels { grid-template-columns:1fr; } .panel { padding:12px; } .matrix { gap:6px; } .matrix button { min-height:44px; font-size:14px; } .controls { gap:12px; } }
@media (max-width:340px) { .matrix button { font-size:12px; } }
@media (prefers-color-scheme:dark) { :root { --bg:#172132; --card:#202d42; --ink:#e4ebf7; --muted:#a2b3ce; --border:#3b4c67; --accent:#94b7ff; } .steps button[aria-pressed=true] { color:#15233b; } .matrix button[data-sign=positive] { background:#203f47; color:#a2d8dc; } .matrix button[data-sign=negative] { background:#4c2e3e; color:#edb0c6; } }