/* Modded-Cycles — shared styles: home, flasher, guide.
 * The page takes the colours of the unit: light grey casing, charcoal keys, the red of a lit trig key.
 * Dark theme: the page goes dark, the drawn unit keeps its own colours (--mc-*).
 * Plain CSS (no nesting): the flasher's smoke test parses it with jsdom. */

:root{
  color-scheme:light;
  --paper:#e3e2de;
  --casing:#cfcecb;
  --well:#c5c4c0;
  --line:#b9b8b3;
  --line-2:#a3a29d;
  --ink:#1c1c1b;
  --ink-2:#383836;
  --muted:#5b5a56;
  --ctl:#46474b;          /* page controls shaped like the unit's keys */
  --ctl-ink:#e8e7e3;
  --ctl-edge:#2e2f32;
  --mc-casing:#cfcecb;    /* the drawn unit, the same in both themes */
  --mc-well:#c5c4c0;
  --mc-key:#46474b;
  --mc-key-ink:#e8e7e3;
  --red:#ec5a36;
  --red-ink:#a8381a;
  --lcd:#b2b6e2;
  --lcd-ink:#1f2457;
  --ok:#2b6a3b;
  --warn:#875300;
  --bad:#a3291b;
  --f:"Familjen Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-lcd:"Tiny5",ui-monospace,monospace;
  --f-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:6px;
  --wrap:1180px;
  --gut:24px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#1b1b1b;
    --casing:#2b2b2a;
    --line:#3b3b39;
    --line-2:#5c5c59;
    --ink:#ecebe7;
    --ink-2:#c8c7c2;
    --muted:#9b9a95;
    --ctl:#cfcecb;
    --ctl-ink:#1c1c1b;
    --ctl-edge:#7d7c78;
    --red-ink:#ff8a66;
    --ok:#71d08c;
    --warn:#e9b44f;
    --bad:#ff7b6b;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1b1b1b;
  --casing:#2b2b2a;
  --line:#3b3b39;
  --line-2:#5c5c59;
  --ink:#ecebe7;
  --ink-2:#c8c7c2;
  --muted:#9b9a95;
  --ctl:#cfcecb;
  --ctl-ink:#1c1c1b;
  --ctl-edge:#7d7c78;
  --red-ink:#ff8a66;
  --ok:#71d08c;
  --warn:#e9b44f;
  --bad:#ff7b6b;
}

/* one language at a time: <x data-l="fr"> / <x data-l="en"> */
html[lang="fr"] [data-l="en"],html:not([lang="fr"]) [data-l="fr"]{display:none !important}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--f);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
p{margin:0 0 1em}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--line-2)}
a:hover{text-decoration-color:var(--red)}
::selection{background:var(--red);color:#1c1c1b}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
code{font:.86em/1 var(--f-code);background:var(--casing);padding:.15em .35em;border-radius:3px;white-space:nowrap}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(42px,6.2vw,78px);letter-spacing:-.035em;line-height:.98}
h2{font-size:clamp(26px,3vw,34px)}
h3{font-size:20px;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.muted{color:var(--muted)}

/* header */
.top{display:flex;align-items:baseline;gap:28px;padding-top:22px;flex-wrap:wrap}
.brand{font-weight:700;font-size:20px;letter-spacing:-.02em;text-decoration:none;margin-right:auto}
.top nav{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
.top nav a{text-decoration:none}
.top nav a:hover,.top nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}
.lang{display:flex;gap:2px;align-items:baseline;color:var(--muted)}
.lang button{font:inherit;color:var(--muted);background:none;border:0;padding:0 3px;cursor:pointer}
.lang button[aria-pressed="true"]{color:var(--ink);font-weight:700}
/* theme switch: a moon in the light theme, a sun in the dark one */
.theme-btn{align-self:center;display:grid;place-items:center;width:32px;height:32px;margin:-6px -6px -6px 0;padding:0;border:0;border-radius:var(--r);
  background:none;color:var(--ink-2);cursor:pointer}
.theme-btn:hover{color:var(--ink);background:var(--casing)}
.theme-btn .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .moon{display:none}
}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}

/* buttons: a charcoal key that lights up red */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:0;border-radius:var(--r);
  background:var(--ctl);color:var(--ctl-ink);font:600 17px/1.1 var(--f);text-decoration:none;cursor:pointer;
  box-shadow:0 2px 0 var(--ctl-edge);transition:background .1s,color .1s}
.btn:hover{background:var(--red);color:#1c1c1b}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ctl-edge)}

/* footer */
.foot{margin-top:120px;padding:28px 0 48px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.foot p{margin:0;max-width:62ch}
.foot nav{display:flex;gap:18px}

/* ---- the Model:Cycles drawing (assets/cycles.js) ---- */
.mc{width:100%;height:auto;overflow:visible}
.mc text{font-family:var(--f)}
.mc-edge{fill:#b4b3ae}
.mc-body{fill:var(--mc-casing)}
.mc-plate{fill:none;stroke:#b2b1ac;stroke-width:1.4}
.mc-well{fill:var(--mc-well);stroke:#acaba6;stroke-width:1.2}
.mc-tape rect{fill:#202022}
.mc-tape .tape-t{fill:#efeee8;font-size:17px;font-weight:700;letter-spacing:.34em}
.key-cap{fill:var(--mc-key)}
.key .kt{fill:var(--mc-key-ink);font-size:12px;font-weight:700;letter-spacing:.04em}
.key .kt.num{font-size:13px}
.key.pad .pt{fill:var(--mc-key-ink);font-size:17px;font-weight:700}
.key .ul{fill:var(--mc-key-ink)}
.ico{fill:none;stroke:var(--mc-key-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.key.on .key-cap,.key.lit .key-cap{fill:var(--red)}
.key.on .kt,.key.lit .kt,.key.on .pt,.key.lit .pt{fill:#2b1710}
.key.on .ul,.key.lit .ul{fill:#2b1710}
.key.lit .ico{stroke:#2b1710}
.kn-ring{fill:#3c3d41}
.kn-cap{fill:#56575b}
.knob.big .kn-ring{fill:#495b5f}
.knob.big .kn-cap{fill:#62757a}
.kn-led{fill:#bebdb8;stroke:#a6a5a0;stroke-width:1}
.knob.lit .kn-ring{stroke:var(--red);stroke-width:5}
.knob.lit .kn-led{fill:var(--red);stroke:var(--red)}
.lcd-bezel{fill:#303134}
.lcd.lit .lcd-bezel{stroke:var(--red);stroke-width:5}
.lcd-glass{fill:var(--lcd)}
.lcd-t{fill:var(--lcd-ink);font-family:var(--f-lcd) !important;font-size:11px}
.lcd-t.inv{fill:var(--lcd)}
.lcd-sel{fill:var(--lcd-ink)}
.lcd-logo{fill:var(--lcd-ink);font-family:var(--f-lcd) !important;font-size:23px;letter-spacing:.02em}
/* while controls are lit, the rest of the panel steps back and stops blinking */
.mc .key,.mc .knob,.mc .lb,.mc .lb2,.mc .lb3,.mc .name,.mc .pg-led,.mc .pwr,.mc-tape{transition:opacity .15s}
.mc.focus .key:not(.lit),.mc.focus .knob:not(.lit){opacity:.28}
.mc.focus .lb,.mc.focus .lb2,.mc.focus .lb3,.mc.focus .name,.mc.focus .pg-led,.mc.focus .pwr,.mc.focus .mc-tape{opacity:.3}
.mc.focus .key.on:not(.lit) .key-cap{fill:var(--mc-key)}
.mc.focus .key.on:not(.lit) .kt,.mc.focus .key.on:not(.lit) .pt{fill:var(--mc-key-ink)}
.mc.focus .key.on:not(.lit) .ul{fill:var(--mc-key-ink)}
.lb{fill:#3a3a38;font-size:10.5px;font-weight:700;letter-spacing:.03em}
.lb2{fill:#74736f;font-size:8.5px;font-weight:600;letter-spacing:.03em;text-decoration:underline}
.lb3{fill:#74736f;font-size:7px;font-weight:600}
.name{fill:#2a2a28;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.pg-led{fill:#bebdb8}
.pg-led.on{fill:var(--red)}
.pwr{fill:none;stroke:#5b5a56;stroke-width:1.5;stroke-linecap:round}

@media (max-width:720px){
  :root{--gut:18px}
  body{font-size:16px}
  .top{gap:10px 20px}
  .foot{margin-top:80px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}