/* Shared by every page: colour tokens (light + dark), reset, top bar, theme toggle, decorative clouds. */
/* Shared by lesson pages: header, section tabs, notes, flashcards, quiz, results, layout. */
:root{
  --ink:#1c1f24;--ink-2:rgba(28,31,36,.62);--ink-3:rgba(28,31,36,.2);
  --paper:#EDEAE2;--paper-2:#F5F3ED;--white:#FAFAF7;
  --red:#993328;--red-bg:rgba(153,51,40,.08);
  --green:#3D6B48;--green-bg:rgba(61,107,72,.08);
  --gold:#A87D2D;--gold-bg:rgba(168,125,45,.08);
  --blue:#3B5D8C;--blue-bg:rgba(59,93,140,.08);
  --on-accent:#FAFAF7;
  --radius:10px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
  color-scheme:light;
}
[data-theme=dark]{
  --ink:#E6E2D8;--ink-2:rgba(230,226,216,.6);--ink-3:rgba(230,226,216,.22);
  --paper:#191b1f;--paper-2:#1f2227;--white:#24272d;
  --red:#C97465;--red-bg:rgba(201,116,101,.12);
  --green:#7CA98A;--green-bg:rgba(124,169,138,.12);
  --gold:#C9A15C;--gold-bg:rgba(201,161,92,.12);
  --blue:#84A3CC;--blue-bg:rgba(132,163,204,.12);
  --on-accent:#191b1f;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
.topbar{position:relative;z-index:2;border-bottom:1px solid var(--ink-3);background:color-mix(in srgb, var(--ink) 5%, var(--paper))}
.topbar .in{max-width:680px;margin:0 auto;padding:12px 16px;display:flex;align-items:baseline;gap:10px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em}
.topbar a{color:var(--ink);text-decoration:none;font-weight:500;text-transform:uppercase}
.topbar a:hover{color:var(--gold)}
.topbar .here{color:var(--ink-2)}
.topbar .theme{margin:-12px -12px -12px auto;background:none;border:none;cursor:pointer;color:var(--ink-2);
  font-size:14px;padding:12px;line-height:1;min-width:44px;min-height:44px}
.topbar .theme:hover{color:var(--ink)}
.topbar .theme::before{content:"☾"}
[data-theme=dark] .topbar .theme::before{content:"☀"}
/* Decorative clouds */
.cloud{position:fixed;z-index:0;pointer-events:none;user-select:none;opacity:.55}
[data-theme=dark] .cloud{opacity:.4;filter:invert(1)}
/* Clouds float in the middle of the empty side bands, whatever the page's content width.
   Each shared sheet sets --content-w for its layout; the docked side navbar sets --nav-w.
   --gl / --gr = the horizontal centre of the left / right band (from each screen edge). */
:root{--content-w:680px;--nav-w:0px;
  --band:calc((100vw - var(--nav-w) - var(--content-w)) / 2);
  --gl:calc(var(--nav-w) + var(--band) / 2);--gr:calc(var(--band) / 2)}
.nav-docked{--nav-w:264px}
/* each cloud is at most its own size and at most ~70% of its band, centred in the band with a little jitter */
.cloud{width:var(--w)}
.cloud.c1{--w:min(200px,calc(var(--band) * .72));top:12%;left:calc(var(--gl) - var(--w) / 2 + var(--band) * .06);transform:rotate(-8deg)}
.cloud.c3{--w:min(170px,calc(var(--band) * .62));top:46%;left:calc(var(--gl) - var(--w) / 2 - var(--band) * .08);transform:rotate(10deg)}
.cloud.c5{--w:min(120px,calc(var(--band) * .5));bottom:10%;left:calc(var(--gl) - var(--w) / 2 + var(--band) * .1);transform:rotate(3deg);opacity:.4}
.cloud.c2{--w:min(150px,calc(var(--band) * .6));top:16%;right:calc(var(--gr) - var(--w) / 2 - var(--band) * .05);transform:rotate(5deg)}
.cloud.c6{--w:min(70px,calc(var(--band) * .35));top:38%;right:calc(var(--gr) - var(--w) / 2 + var(--band) * .12);transform:rotate(-12deg);opacity:.4}
.cloud.c9{--w:min(190px,calc(var(--band) * .7));top:58%;right:calc(var(--gr) - var(--w) / 2 - var(--band) * .06);transform:rotate(8deg);opacity:.45}
.cloud.c4{--w:min(100px,calc(var(--band) * .45));bottom:8%;right:calc(var(--gr) - var(--w) / 2 + var(--band) * .08);transform:rotate(-4deg)}
@media(max-width:1200px){.cloud{display:none}}