/* Shared styles for every lesson's interactive visual (rendered in an iframe). */
:root{
  color-scheme:light;
  --bg:#FAFBF8;--surface:#FFFFFF;--fg:#16211C;--muted:#56655D;--line:#E1E7E2;
  --accent:#0B7A55;--accent-soft:#E4F3EB;--sun:#B56F0E;--sun-soft:#FCF1DE;--danger:#B23A2E;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --body:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--surface);color:var(--fg);font:15px/1.6 var(--body)}
input[type=range]{accent-color:var(--accent);width:100%}
button{font:inherit;font-size:14px;font-weight:500;background:var(--accent-soft);color:var(--accent);border:0;border-radius:8px;padding:8px 14px;cursor:pointer}
button:hover{background:#D3EBDF}
.row{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.row label{font-size:14px;color:var(--muted);min-width:150px}
.row span{font:500 14px var(--mono);min-width:84px;text-align:right}
.k{background:var(--bg);border-radius:10px;padding:10px 12px}
.k p{margin:0;font-size:12.5px;color:var(--muted)}
.k b{font:700 21px var(--body);display:block;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.note{font-size:14.5px;color:var(--muted)}
@media (max-width:480px){.row{flex-wrap:wrap;gap:4px 12px}.row label{min-width:100%}}