:root{--bg: #f6f7f9;--panel: #ffffff;--ink: #1b1f24;--muted: #5b6470;--line: #e2e5ea;--accent: #2f6df6;--viewport: #eef1f5;color-scheme:light dark}@media (prefers-color-scheme: dark){:root{--bg: #14171c;--panel: #1c2027;--ink: #e8eaed;--muted: #98a2b0;--line: #2a2f38;--accent: #6b9bff;--viewport: #10131a}}*{box-sizing:border-box}html,body{margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}.site-header,.theory,.site-footer{max-width:1100px;margin-inline:auto;padding:1.5rem 1.25rem 0}.site-header h1{margin:0;font-size:2rem;letter-spacing:-.02em}.site-header p{margin:.25rem 0 0;color:var(--muted)}.app{max-width:1100px;margin:1.25rem auto 0;padding:0 1.25rem;display:grid;gap:1.25rem;grid-template-columns:1fr}@media (min-width: 820px){.app{grid-template-columns:1.4fr 1fr;align-items:stretch}}.app__viewport{background:var(--viewport);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-height:340px}#viewport{width:100%;height:100%;min-height:340px;aspect-ratio:4 / 3}#viewport canvas{display:block;width:100%;height:100%}.app__panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem}.readout__caption{margin:0;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.readout__length{display:flex;align-items:baseline;gap:.35rem;margin-top:.15rem}.readout__value{font-size:3rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent)}.readout__unit{font-size:1.1rem;color:var(--muted)}.readout__derived{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;margin:.9rem 0 0;font-size:.9rem}.readout__derived dt{color:var(--muted)}.readout__derived dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.controls{display:flex;flex-direction:column;gap:1rem}.control{display:block}.control__label{display:block;font-size:.9rem;margin-bottom:.35rem}.control__inputs{display:flex;align-items:center;gap:.75rem}.control__inputs input[type=range]{flex:1;accent-color:var(--accent)}.control__number{width:5.5rem;padding:.35rem .5rem;font:inherit;text-align:right;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;font-variant-numeric:tabular-nums}.theory h2{margin-bottom:.5rem}.equation{display:block;margin:1rem 0;font-size:1.3rem;overflow-x:auto}.theory__vars{color:var(--muted);padding-left:1.1rem}.theory__vars b{color:var(--ink)}.site-footer{padding-block:2rem;color:var(--muted);font-size:.9rem}a{color:var(--accent)}