/* Shared look for interactive demos embedded in posts (iframes). Every demo links this file. */
:root{
  --bg:#f7f7f5; --surface:#ffffff; --tint:#eef2fb; --ink:#16181d; --ink-2:#4a505b; --muted:#737985; --line:#e4e4e0;
  --accent:#2347c5; --accent-ink:#ffffff; --you:#2347c5; --ok:#2f8a4f; --warn:#b4540a;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111215; --surface:#1a1b20; --tint:#1c2438; --ink:#eeeef0; --ink-2:#babec7; --muted:#8c919b; --line:#2a2b31;
  --accent:#8aa4ff; --accent-ink:#0f1220; --you:#8aa4ff; --ok:#5cc27f; --warn:#f0a35e; color-scheme:dark;}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--surface);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3,b.title{font-family:var(--display);letter-spacing:-.01em}
button{font:inherit;font-weight:700;font-size:14px;cursor:pointer;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 14px}
button[aria-pressed="true"],button.primary{background:var(--ink);color:var(--surface);border-color:var(--ink)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hint{font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}