/* ---------- tokens ---------- */
:root{
  /* colour: light. Neutrals carry a trace of the prussian accent hue (250). */
  color-scheme:light;
  --paper:oklch(95.5% 0.005 250); --sheet:oklch(98.5% 0.003 250); --sheet-2:oklch(97.2% 0.004 250);
  --ink:oklch(25% 0.03 260); --slate:oklch(48% 0.025 258);
  --rule:oklch(88.5% 0.008 250); --rule-strong:oklch(62% 0.015 250);
  --accent:oklch(39% 0.085 253); --accent-hover:oklch(33% 0.085 253); --accent-subtle:oklch(92.5% 0.03 253); --on-accent:var(--sheet);
  --focus:oklch(50% 0.15 256);
  --mark:oklch(57% 0.2 22 / .9); --scrim:oklch(22% 0.015 260 / .18);
  --checker-a:oklch(99% 0 0); --checker-b:oklch(89.8% 0 0);

  /* type */
  --font-ui:'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display:'Spectral', Georgia, serif;
  --text-xs:0.75rem;      /* 12 */
  --text-sm:0.8125rem;    /* 13 */
  --text-md:0.875rem;     /* 14 */
  --text-lg:1.0625rem;    /* 17 */
  --text-xl:1.375rem;     /* 22 */
  --text-2xl:1.75rem;     /* 28 */
  --leading-tight:1.15; --leading-ui:1.4; --leading-body:1.5;

  /* spacing: 4px grid */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  /* shape */
  --radius-sm:3px; --radius-md:6px;
  --hairline:1px; --ring:2px;

  /* motion */
  --ease-out:cubic-bezier(.23, 1, .32, 1); --dur-press:160ms;

  /* fixed geometry (artwork and layout constants) */
  --sidebar-w:280px; --strip-w:152px; --plate-w:184px; --zoom-w:300px;
  --control-h:32px; --swatch-h:24px; --color-w:44px; --num-w:112px; --select-max:260px;
  --stage-min:360px; --stage-offset:80px; --checker:20px; --scrim-spread:9999px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:oklch(19.5% 0.01 255); --sheet:oklch(24% 0.013 255); --sheet-2:oklch(21.5% 0.012 255);
    --ink:oklch(93% 0.006 255); --slate:oklch(72% 0.02 255);
    --rule:oklch(31% 0.014 255); --rule-strong:oklch(56% 0.02 255);
    --accent:oklch(77% 0.08 254); --accent-hover:oklch(83% 0.07 254); --accent-subtle:oklch(33% 0.05 254); --on-accent:var(--paper);
    --focus:oklch(78% 0.13 256);
    --scrim:oklch(10% 0.01 260 / .4);
    --checker-a:oklch(30% 0.006 255); --checker-b:oklch(25% 0.006 255);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:oklch(19.5% 0.01 255); --sheet:oklch(24% 0.013 255); --sheet-2:oklch(21.5% 0.012 255);
  --ink:oklch(93% 0.006 255); --slate:oklch(72% 0.02 255);
  --rule:oklch(31% 0.014 255); --rule-strong:oklch(56% 0.02 255);
  --accent:oklch(77% 0.08 254); --accent-hover:oklch(83% 0.07 254); --accent-subtle:oklch(33% 0.05 254); --on-accent:var(--paper);
  --focus:oklch(78% 0.13 256);
  --scrim:oklch(10% 0.01 260 / .4);
  --checker-a:oklch(30% 0.006 255); --checker-b:oklch(25% 0.006 255);
}

/* ---------- base ---------- */
html{ height:100%; scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0; min-height:100%; background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-size:var(--text-md); line-height:var(--leading-body);
}
.layout{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; gap:0; min-height:100vh; }
aside{
  position:sticky; top:env(safe-area-inset-top,0px); align-self:start; height:100vh; overflow:auto;
  background:var(--sheet-2); border-right:var(--hairline) solid var(--rule); padding:var(--space-6) var(--space-6) var(--space-12);
}
h1{ font-family:var(--font-display); font-weight:600; font-size:var(--text-2xl); line-height:var(--leading-tight); margin:0 0 var(--space-3); letter-spacing:-0.015em; text-wrap:balance; }
.lede{ color:var(--slate); margin:0 0 var(--space-6); font-size:var(--text-md); line-height:var(--leading-body); max-width:65ch; text-wrap:pretty; }
.group{ margin:0 0 var(--space-5); }
.group > .lab{ display:block; font-weight:600; font-size:var(--text-sm); line-height:var(--leading-ui); color:var(--ink); margin-bottom:var(--space-2); }
.palettes{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); }
.pal{ border:var(--hairline) solid var(--rule); background:transparent; border-radius:var(--radius-md); padding:var(--space-2); cursor:pointer; display:flex; flex-direction:column; gap:var(--space-1); align-items:stretch; color:var(--ink); font:inherit; font-size:var(--text-xs); }
.pal .sw{ height:var(--swatch-h); border-radius:var(--radius-sm); display:flex; overflow:hidden; }
.pal .sw i{ flex:1; }
.pal[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-subtle); }
.colors{ display:flex; gap:var(--space-3); }
.colors label{ display:flex; flex-direction:column; align-items:center; gap:var(--space-1); font-size:var(--text-xs); color:var(--slate); }
input[type=color]{ width:var(--color-w); height:var(--control-h); border:var(--hairline) solid var(--rule-strong); border-radius:var(--radius-sm); background:var(--sheet); padding:var(--ring); cursor:pointer; }
input[type=range]{ width:100%; accent-color:var(--accent); }
input[type=checkbox]{ accent-color:var(--accent); margin:0; }
.val{ float:right; font-weight:400; color:var(--slate); font-variant-numeric:tabular-nums; }
.check{ display:flex; gap:var(--space-2); align-items:center; font-size:var(--text-md); line-height:var(--leading-ui); cursor:pointer; }
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip{ font:inherit; font-size:var(--text-sm); line-height:var(--leading-ui); border:var(--hairline) solid var(--rule); background:transparent; color:var(--ink); border-radius:var(--radius-sm); padding:var(--space-1) var(--space-2); cursor:pointer; }
.chip[aria-pressed="true"]{ background:var(--accent-subtle); border-color:var(--accent); color:var(--ink); }
.note{ font-size:var(--text-sm); line-height:var(--leading-ui); color:var(--slate); border-top:var(--hairline) solid var(--rule); padding-top:var(--space-5); margin-top:var(--space-8); }
main{ padding:var(--space-6) var(--space-8) var(--space-16); min-width:0; }
.plates{ display:flex; flex-wrap:wrap; gap:var(--space-6) var(--space-5); align-items:flex-start; }
.plate{ width:var(--plate-w); background:var(--sheet); border:var(--ring) solid transparent; padding:calc(var(--space-4) - var(--ring)); }
.plate[hidden]{ display:none; }
.strip{ display:flex; justify-content:center; }
.strip canvas{ display:block; width:var(--strip-w); outline:var(--hairline) solid var(--rule); }
.cap{ margin-top:var(--space-3); }
.cap .no{ font-size:var(--text-xs); font-weight:500; color:var(--slate); font-variant-numeric:tabular-nums; }
.cap h2{ font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; line-height:var(--leading-tight); letter-spacing:-0.005em; margin:var(--space-1) 0 var(--space-2); text-wrap:balance; }
.cap p{ margin:0; font-size:var(--text-sm); color:var(--slate); line-height:var(--leading-ui); }
.cap .rep{ margin-top:var(--space-2); font-size:var(--text-xs); color:var(--slate); font-variant-numeric:tabular-nums; }
.busy{ font-size:var(--text-sm); color:var(--slate); margin:0 0 var(--space-3); min-height:1.4em; }

.sec{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; line-height:var(--leading-tight); letter-spacing:-0.01em; margin:0 0 var(--space-2); }
.secnote{ color:var(--slate); font-size:var(--text-md); line-height:var(--leading-body); margin:0 0 var(--space-5); max-width:65ch; text-wrap:pretty; }
main > section + section{ margin-top:var(--space-16); }
.framebox{ padding:0; }
.framectl{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); align-items:flex-end; margin-bottom:var(--space-5); }
.framectl .check{ min-height:var(--control-h); }
.framectl label.f{ display:flex; flex-direction:column; gap:var(--space-1); font-size:var(--text-sm); font-weight:600; line-height:var(--leading-ui); }
select{ font:inherit; font-weight:400; font-size:var(--text-md); height:var(--control-h); padding:0 var(--space-2); border:var(--hairline) solid var(--rule-strong); background:var(--sheet); color:var(--ink); border-radius:var(--radius-sm); max-width:var(--select-max); }
.btn{ font:inherit; font-size:var(--text-md); font-weight:600; line-height:var(--leading-ui); background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--radius-md); min-height:var(--control-h); padding:0 var(--space-4); display:inline-flex; align-items:center; cursor:pointer; }
.btn[disabled]{ opacity:.5; cursor:progress; }
:is(input, select):disabled{ opacity:.5; cursor:not-allowed; }
.btn[hidden]{ display:none; }
.frameviews{ display:grid; grid-template-columns:minmax(0,1fr) var(--zoom-w); gap:var(--space-5); align-items:start; }
.thumbwrap{ min-width:0; }
#thumb, #zoom{ display:block; }
#zoom{ width:var(--zoom-w); height:var(--zoom-w); outline:var(--hairline) solid var(--rule); }
.figcap{ font-size:var(--text-sm); line-height:var(--leading-ui); color:var(--slate); margin:var(--space-2) 0 0; }
#finfo{ font-size:var(--text-sm); color:var(--slate); margin:var(--space-3) 0 0; font-variant-numeric:tabular-nums; }
.plate{ cursor:pointer; }
.plate.sel{ border-color:var(--accent); background:var(--accent-subtle); }
.plate.corner .strip canvas{ height:var(--strip-w); }
@media (max-width:1100px){ .frameviews{ grid-template-columns:1fr; } }
@media (max-width:760px){
  .layout{ grid-template-columns:1fr; }
  aside{ position:static; height:auto; border-right:0; border-bottom:var(--hairline) solid var(--rule); }
  main{ padding:var(--space-6) var(--space-4) var(--space-12); }
  .plates{ justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* ---------- states ---------- */
:where(a, button, input, select, summary, [tabindex]):focus-visible{ outline:var(--ring) solid var(--focus); outline-offset:var(--ring); }
@media (hover:hover) and (pointer:fine){
  .btn:not([disabled]):hover{ background:var(--accent-hover); }
  .btn.ghost:hover{ background:var(--accent-subtle); }
  .chip:not([aria-pressed="true"]):hover, .pal:not([aria-pressed="true"]):hover{ border-color:var(--rule-strong); }
  .plate:not(.sel):hover{ border-color:var(--rule); }
  :is(select, input[type=number], input[type=color]):not(:disabled):hover{ border-color:var(--slate); }
  summary:hover::marker{ color:var(--ink); }
}
:is(.btn:not([disabled]), .chip, .pal):active{ transform:scale(.97); }
@media (prefers-reduced-motion: no-preference){
  .btn, .chip, .pal{ transition:transform var(--dur-press) var(--ease-out); }
}

/* ---------- site nav (shared by both pages) ---------- */
.sitenav{ display:flex; gap:var(--space-5); margin:0 0 var(--space-8); font-size:var(--text-sm); border-bottom:var(--hairline) solid var(--rule); }
.sitenav a{ color:var(--slate); text-decoration:none; padding:var(--space-2) 0; margin-bottom:calc(-1 * var(--hairline)); border-bottom:var(--ring) solid transparent; }
.sitenav a:hover{ color:var(--ink); }
.sitenav a[aria-current="page"]{ color:var(--ink); font-weight:600; border-bottom-color:var(--ink); }

/* ---------- attractor viewer ---------- */
select.wide{ width:100%; max-width:none; }
.eq{ font-family:var(--font-display); font-style:italic; font-size:var(--text-md); line-height:var(--leading-body); margin:var(--space-3) 0 0; white-space:pre-wrap; color:var(--ink); }
.param{ margin:0 0 var(--space-3); }
.param .row{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; }
.param input[type=number]{ width:var(--num-w); }
input[type=number]{ font:inherit; font-size:var(--text-sm); height:var(--control-h); padding:0 var(--space-2); border:var(--hairline) solid var(--rule-strong); border-radius:var(--radius-sm); background:var(--sheet); color:var(--ink); width:100%; font-variant-numeric:tabular-nums; }
label.f{ display:flex; flex-direction:column; gap:var(--space-1); font-size:var(--text-sm); font-weight:600; line-height:var(--leading-ui); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin:var(--space-2) 0; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-2); margin:var(--space-2) 0; }
details > summary{ cursor:pointer; }
aside details.group > summary.lab{ display:list-item; }
summary::marker{ color:var(--slate); }
aside details.group{ border-block:var(--hairline) solid var(--rule); padding-block:var(--space-3); }
aside details.group > summary{ margin-bottom:0; }
aside details[open].group > summary{ margin-bottom:var(--space-2); }
.group:has(> #copy){ margin-top:var(--space-8); }
.btnrow{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-2) 0 0; }
.btn.ghost{ background:transparent; color:var(--accent); border:var(--hairline) solid var(--accent); padding:0 calc(var(--space-4) - var(--hairline)); }
.btn.ghost:has(+ .vh:focus-visible){ outline:var(--ring) solid var(--focus); outline-offset:var(--ring); }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.status{ font-size:var(--text-sm); color:var(--slate); margin:var(--space-2) 0 0; min-height:1.3em; font-variant-numeric:tabular-nums; }
.exportbox{ border-top:var(--hairline) solid var(--rule); padding-top:var(--space-5); margin-top:var(--space-6); }
.exportbox .check{ margin-top:var(--space-2); }
.group .check + .check{ margin-top:var(--space-2); }
main.viewer{ padding:var(--space-6); display:flex; flex-direction:column; }
.stage{ position:relative; flex:1; min-height:var(--stage-min); height:calc(100vh - var(--stage-offset)); overflow:hidden; border:var(--hairline) solid var(--rule); background:var(--sheet); }
.stage.checker{ background-color:var(--checker-a); background-image:linear-gradient(45deg,var(--checker-b) 25%,transparent 25%,transparent 75%,var(--checker-b) 75%),linear-gradient(45deg,var(--checker-b) 25%,transparent 25%,transparent 75%,var(--checker-b) 75%); background-size:var(--checker) var(--checker); background-position:0 0,calc(var(--checker) / 2) calc(var(--checker) / 2); }
.stage canvas{ display:block; width:100%; height:100%; touch-action:none; }
.stage canvas:focus-visible{ outline:var(--ring) solid var(--focus); outline-offset:calc(-1 * var(--ring)); }
.outline{ position:absolute; pointer-events:none; border:var(--hairline) dashed var(--mark); box-shadow:0 0 0 var(--scrim-spread) var(--scrim); }
.outline[hidden]{ display:none; }
@media (max-width:760px){ .stage{ height:70vh; } main.viewer{ padding:var(--space-4); } }