/* ──────────────────────────────────────────────────────────────────────────
   Monochrome. Colour is reserved for things that carry meaning; everything else is
   separated by value and whitespace.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --paper:    #fbfaf8;
  --surface:  #ffffff;
  --sunk:     #f2f1ee;
  --ink:      #121212;
  --ink-2:    #4a4a48;
  --ink-3:    #8a8985;
  --rule:     #e2e0da;
  --rule-2:   #cfccc4;
  --focus:    #121212;
  --radius:   3px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #0e0e0f;
    --surface: #161617;
    --sunk:    #1c1c1e;
    --ink:     #f2f1ee;
    --ink-2:   #b4b2ad;
    --ink-3:   #75736e;
    --rule:    #2a2a2c;
    --rule-2:  #3a3a3d;
    --focus:   #f2f1ee;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 14px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
}
#app { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }

/* ── Header ───────────────────────────────────────────────────────── */
/* The title and the tabs: one row of one height on every tab, so switching tabs moves nothing.
   What a tab needs at the top is in the tab bar under it */
header {
  display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; flex: none;
  height: 56px; padding: 0 20px; border-bottom: 1px solid var(--rule); background: var(--surface);
}
header .tabs { flex: none; }
.tabbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: none;
  min-height: 58px; padding: 8px 20px; border-bottom: 1px solid var(--rule); background: var(--surface);
}
header h1 {
  font-size: 13px; margin: 0 18px 0 0; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
header h1 small {
  display: block; font-size: 11px; font-weight: 400; letter-spacing: .02em;
  text-transform: none; color: var(--ink-3); margin-top: 2px;
}
label { color: var(--ink-3); font-size: 12px; letter-spacing: .04em; }

button {
  font: inherit; font-size: 13px; color: var(--ink-2); background: transparent;
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  padding: 5px 11px; cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
button:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-3); }
button.on, button.on:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
button:disabled { opacity: .35; cursor: default; }
input:focus, button:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

main { --side-w: 312px; position: relative; flex: 1; display: grid; grid-template-columns: 1fr var(--side-w); min-height: 0; overflow: hidden; }


/* ── Stage ────────────────────────────────────────────────────────── */
#table { display: flex; flex-direction: column; min-height: 0; overflow: auto; background: var(--paper); }

/* ── Side panel ───────────────────────────────────────────────────── */
#side {
  border-left: 1px solid var(--rule); background: var(--surface);
  padding: 20px; display: flex; flex-direction: column; gap: 22px; overflow: hidden; min-height: 0;
}
#side section { flex: none; }
#side section h2 {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 9px; font-weight: 600;
  padding-bottom: 7px; border-bottom: 1px solid var(--rule);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}

/* ── Tabs ─────────────────────────────────────────────────────────── */
header .tabs { gap: 0; margin-right: 6px; }
header .tabs .tab { border-radius: 0; margin-left: -1px; }
header .tabs .tab:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
header .tabs .tab:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
/* What a tab is, in words, where its toolbar would go (the Feel tab) */
.gen-title { display: flex; align-items: center; gap: 10px; margin-left: 6px; min-width: 0; color: var(--ink-3); font-size: 12px; }

/* ── The particle lab ─────────────────────────────────────────────────
   A system of its own: a stage, and a panel generated from the effect spec. The chrome
   stays monochrome — the only colour on screen is what an effect's own ramp puts there.
   ────────────────────────────────────────────────────────────────── */
#table.fx { padding: 0; gap: 0; justify-content: stretch; overflow: hidden; }
.fx-stage {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 62%),
    var(--paper);
}
.fx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

.fx-hint {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em;
  border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(6px); pointer-events: none;
}
.fx-hint-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.fx-count { font-variant-numeric: tabular-nums; }

/* The lab's panel carries far more than a game's readouts, so it gets a wider column
   and a little less padding — nothing inside it should ever scroll sideways. */
main.fx { --side-w: 368px; }
main.fx #side { padding: 18px 16px; }

.fx-panel {
  display: flex; flex-direction: column; gap: 14px; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  margin: -4px -4px 0; padding: 4px;
}
/* Grid and flex children default to min-width:auto, which is what pushes a panel wide */
.fx-panel *, .fx-row > *, .fx-sub-row > *, .fx-stack > * { min-width: 0; }
.fx-curve, .fx-ramp, .fx-stops { max-width: 100%; }
#side .fx-panel { flex: 1 1 auto; }
.fx-sec { flex: none; }

/* A section head is the disclosure control; shut sections keep the panel navigable */
.fx-head {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 9px; font-weight: 600; padding-bottom: 7px; border-bottom: 1px solid var(--rule);
  cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none;
}
.fx-head::before { content: '+'; font-size: 11px; color: var(--ink-3); width: 8px; }
.fx-head.on::before { content: '−'; }
.fx-head:hover { color: var(--ink); }
.fx-body { display: flex; flex-direction: column; gap: 2px; }
/* `display` on the class beats the user agent's [hidden] rule, so say it again here */
.fx-body[hidden] { display: none; }

/* The four fixed sections at the top and bottom are not collapsible — no disclosure mark */
/* The one control that *makes* something. A pill means a state you switch on, so this is
   square, drawn in ink rather than grey, and carries a plus — it should not be mistaken
   for one more filter sitting next to the archetypes. */
.fx-action {
  margin-left: auto; font: inherit; font-size: 11px; font-weight: 600;
  text-transform: none; letter-spacing: .01em; cursor: pointer;
  padding: 3px 9px 3px 7px; border-radius: var(--radius);
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; gap: 4px;
}
.fx-action::before { content: '+'; font-weight: 500; font-size: 13px; line-height: 1; }
.fx-action:hover { background: var(--ink); color: var(--paper); }
.fx-action:active { transform: translateY(1px); }
.fx-action:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }
.fx-head.fixed { cursor: default; }
.fx-head.fixed::before { content: none; }
.fx-head.fixed:hover { color: var(--ink-3); }

/* One control per line: name, body, value — the value column is fixed so nothing jumps */
.fx-row { display: grid; grid-template-columns: 70px 1fr 52px; align-items: center; gap: 8px; margin-bottom: 3px; }
.fx-row label { font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.fx-val { font-size: 11px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.fx-pair { display: flex; flex-direction: column; gap: 0; }

.fx-stack { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.fx-sub { font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.fx-note { font-size: 10.5px; color: var(--ink-3); opacity: .8; line-height: 1.4; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--rule-2); border-radius: 2px; }
input[type=range]::-moz-range-track { height: 2px; background: var(--rule-2); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 10px; height: 10px; margin-top: -4px;
  border-radius: 50%; background: var(--ink); border: 0;
}
input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 0; }
input[type=range]:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* The picker is a contact sheet: each cell is a long exposure of the effect itself */
.fx-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.fx-card {
  display: block; padding: 0; cursor: pointer; text-align: left; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
}
.fx-card img { display: block; width: 100%; aspect-ratio: 8 / 5; background: var(--sunk); }
.fx-card .nm {
  display: block; font: inherit; font-size: 10.5px; padding: 3px 6px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--rule); background: var(--surface);
}
.fx-card:hover { border-color: var(--rule-2); }
.fx-card:hover .nm { color: var(--ink); }
.fx-card.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.fx-card.on .nm { background: var(--ink); color: var(--paper); border-top-color: var(--ink); }
/* A generated effect is marked, so the hand-written ones stay recognisable */
.fx-card.gen .nm { font-style: italic; }
.fx-card.gen .nm::before { content: '✦ '; font-style: normal; opacity: .6; }


.fx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-chip {
  font: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink-3);
}
.fx-chip:hover { color: var(--ink); border-color: var(--rule-2); }
.fx-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Curve and ramp: edited in place, because a number cannot say what a shape says */
.fx-curve { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sunk); cursor: crosshair; touch-action: none; display: block; }
.fx-ramp { border: 1px solid var(--rule); border-radius: var(--radius) var(--radius) 0 0; display: block; }
.fx-stops { position: relative; height: 14px; border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--sunk); }
.fx-stop {
  position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; padding: 0;
  border: 1px solid var(--ink-3); border-radius: 2px; background: var(--c, #fff); cursor: ew-resize;
}
.fx-stop.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.fx-color { width: 100%; height: 22px; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); cursor: pointer; }

.fx-sub-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) 40px auto; gap: 4px; align-items: center; margin-bottom: 4px; }
.fx-select, .fx-num, .fx-text {
  font: inherit; font-size: 11px; padding: 3px 5px; min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.fx-presets { max-height: 272px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }

/* ── A drawing brought to life ────────────────────────────────────────
   The paper is fitted whole and the particle canvas sits exactly on it, so nothing is drawn
   on the letterbox. Placed by script, since the fit depends on the stage's size.
   ────────────────────────────────────────────────────────────────── */
.sk-frame {
  position: absolute;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 6px 24px rgba(0,0,0,.14);
}
.sk-paper, .ph-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-frame .sk-paper {
  cursor: none; touch-action: none; user-select: none; background: #ebebeb;
  transition: filter .35s ease;
}
/* The paper sits on a darker desk with an edge and a shadow, so where you can draw is plain */
.sk-stage { background: color-mix(in srgb, var(--ink) 8%, var(--sunk)); }
.ph-fx { pointer-events: none; }
.ph-scan { inset: 0; }
.ph-stage.busy .sk-frame .sk-paper { filter: brightness(.7) saturate(.6); cursor: progress; }

/* The tool pad: a square over the scene, dimmed. Transparent, shown on a checkerboard */
.sk-pad {
  position: absolute; display: none; border-radius: 6px; overflow: hidden;
  background: #fff conic-gradient(#eeece8 25%, #fff 0 50%, #eeece8 0 75%, #fff 0) 0 0 / 20px 20px;
  box-shadow: 0 0 0 1px var(--rule-2), 0 10px 30px rgba(0,0,0,.18);
}
.sk-stage.mode-tool .sk-pad { display: block; }
.sk-stage.mode-tool .sk-frame .sk-paper { opacity: .3; pointer-events: none; }
.sk-stage.mode-tool .sk-frame > .sk-idea { display: none; }
.sk-pad .sk-toolpad { cursor: none; touch-action: none; }
/* Playing: the pointer holds the tool, and the tool is the cursor */
.sk-stage.mode-play .sk-frame { cursor: none; touch-action: none; }
.sk-stage.mode-play .sk-frame .sk-paper { pointer-events: none; }

/* The empty paper says what to draw, and is gone with the first stroke */
.sk-idea {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; pointer-events: none; color: #9a978f; text-align: center; padding: 0 24px;
}
.sk-idea strong { font-size: 17px; font-weight: 600; color: #6f6c66; }
.sk-idea span { font-size: 12.5px; letter-spacing: .02em; }
.sk-idea[hidden] { display: none; }

/* The pen under the pointer: the cells it will cover, in its colour, hollow for the eraser */
.sk-brush {
  position: absolute; left: 0; top: 0; border-radius: 1px; pointer-events: none;
  background: var(--c); opacity: .55; box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 2px rgba(0,0,0,.35);
}
.sk-brush.erase { background: transparent; opacity: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.9); }
.sk-brush[hidden] { display: none; }

/* The cells, as faint lines over the drawing; gone while playing, when the drawing is the scene */
.sk-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(0,0,0,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.07) 1px, transparent 1px);
  background-size: var(--cell, 12px) var(--cell, 12px);
}
.sk-stage.mode-tool .sk-frame > .sk-grid, .sk-stage.mode-play .sk-grid { display: none; }
.sk-grid[hidden] { display: none; }

/* The selection: a box with corner handles over what is picked up, and the area being drawn round.
   Pointer events go through to the surface, which works out what a press on them means */
.sk-over { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sk-area { fill: rgba(0, 132, 255, .08); stroke: #0084ff; stroke-width: 1.2; stroke-dasharray: 4 3; }
.sk-sel-box { fill: none; stroke: #0084ff; stroke-width: 1.5; }
.sk-sel-h { fill: #fff; stroke: #0084ff; stroke-width: 1.5; }
/* Its buttons, by the box */
.sk-selbar {
  position: absolute; z-index: 2; display: flex; gap: 2px; padding: 3px;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.sk-selbar[hidden] { display: none; }
.sk-selbar .sk-tool { min-width: 28px; height: 28px; }

/* The toolbar: in the tab bar, so nothing of it lies over the paper */
.sk-toolbar {
  position: absolute; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 6px 8px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); z-index: 3;      /* over the paper when it floats on it */
}
.sk-toolbar.off { opacity: .45; pointer-events: none; }
.tabbar .sk-toolbar {
  position: static; margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none;
}
.sk-group { display: flex; align-items: center; gap: 4px; }
.sk-hidden { display: none; }
.sk-pages { gap: 0; padding: 2px; background: var(--sunk); border-radius: 7px; }
.sk-page, .sk-page:hover:not(:disabled) {
  height: 26px; padding: 0 11px; font-size: 12px; font-weight: 600; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-3);
}
.sk-page:hover:not(:disabled) { color: var(--ink); }
.sk-page.on, .sk-page.on:hover:not(:disabled) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sk-page:disabled { opacity: .4; }
.sk-play-hint { font-size: 12px; color: var(--ink-3); }
.sk-group + .sk-group { padding-left: 10px; border-left: 1px solid var(--rule); }
.sk-tool {
  min-width: 30px; height: 30px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; border-radius: 6px; border-color: transparent; color: var(--ink-2);
}
.sk-tool.sk-text { font-size: 12px; padding: 0 9px; }
.sk-tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sk-tool:hover:not(:disabled) { border-color: var(--rule-2); }
.sk-tool:disabled { opacity: .35; }
.sk-sizes { gap: 8px; }
input.sk-slider { width: 104px; height: 18px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
/* The app styles every range input (input[type=range], which outranks a class alone); the brush
   slider, as input.sk-slider and later, has a filled track and a hollow thumb of its own */
input.sk-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--ink-2) var(--fill, 50%), var(--rule-2) var(--fill, 50%));
}
input.sk-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--ink-2); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
input.sk-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--rule-2); }
input.sk-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink-2); }
input.sk-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink-2); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
input.sk-slider:focus-visible { outline: 1px solid var(--focus); outline-offset: 4px; }
.sk-dot-box { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.sk-dot { display: block; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule-2); }   /* a ring, so black ink shows on a dark toolbar */
.sk-dot.erase { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.sk-num { min-width: 18px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* A colour button shows its own colour, selected or not — never the theme's ink */
.sk-ink, .sk-ink:hover:not(:disabled), .sk-ink.on, .sk-ink.on:hover:not(:disabled) {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--c);
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--rule-2); cursor: pointer;
}
.sk-ink.on, .sk-ink.on:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--ink); }
.sk-ink-now, .sk-ink-now:hover:not(:disabled) {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer; margin-right: 4px;
  background: conic-gradient(from 0deg, #f44, #fd3, #4d4, #3cf, #44f, #f4f, #f44);
  border: 0; box-shadow: 0 0 0 1px var(--rule-2); position: relative;
}
.sk-ink-now::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 2px var(--surface);
}
.sk-ink-now.open { box-shadow: 0 0 0 2px var(--ink); }

/* The colour plane, under the toolbar */
.sk-pop {
  position: absolute; z-index: 5; padding: 10px; background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.16);
}
.cp { display: flex; flex-direction: column; gap: 9px; width: 220px; }
.cp-wrap { position: relative; line-height: 0; }
/* The lab's stage rule lays every canvas over the stage; the picker's sit in their own flow */
.sk-pop canvas { position: static; inset: auto; }
.cp-plane { border-radius: 6px; cursor: crosshair; touch-action: none; }
.cp-strip { border-radius: 7px; cursor: ew-resize; touch-action: none; }
.cp-knob {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.4);
}
.cp-bar {
  position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; border-radius: 3px; pointer-events: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.4);
}
.cp-row { display: flex; align-items: center; gap: 8px; }
.cp-now { width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex: none; }
.cp-hex {
  flex: 1; min-width: 0; font: inherit; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace;
  padding: 5px 7px; color: var(--ink); background: var(--sunk); border: 1px solid var(--rule); border-radius: 5px;
}
.cp-recent { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-swatch, .cp-swatch:hover:not(:disabled) {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; background: var(--c);
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--rule-2); cursor: pointer;
}

/* Presets: ready-made drawings and saved ones, under the toolbar */
.sk-gallery { width: min(560px, calc(100% - 16px)); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sk-gallery-h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.sk-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.sk-preset, .sk-preset:hover:not(:disabled) {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; text-align: left;
}
.sk-preset:hover:not(:disabled) { border-color: var(--ink-3); }
.sk-thumb-scene { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 4px; box-shadow: 0 0 0 1px var(--rule); }
/* the stage lays every canvas over itself at its full size (.fx-stage canvas); a thumbnail keeps its 3:2 */
.sk-pop .sk-thumb-scene { flex: none; height: auto; }
.sk-preset-name { font-size: 12px; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.sk-preset-tag { font-size: 10px; color: var(--ink-3); }
.sk-preset-x {
  position: absolute; top: 2px; right: 4px; width: 20px; height: 20px; border-radius: 50%; display: none;
  align-items: center; justify-content: center; font-size: 14px; color: var(--ink-2); background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule-2);
}
.sk-preset:hover .sk-preset-x { display: flex; }
@media (hover: none) { .sk-preset-x { display: flex; } }

/* The buttons that bring it to life, in the paper's corner: finding the objects alone, and the whole run */
.sk-actions { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.sk-find, .sk-find:hover:not(:disabled) {
  padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 600; color: #1f1f1f;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(0, 0, 0, .18); border-radius: 999px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.sk-find:hover:not(:disabled) { border-color: rgba(0, 0, 0, .45); }
.sk-find:disabled { opacity: .3; cursor: default; box-shadow: none; }
.sk-find[hidden] { display: none; }
.sk-go, .sk-go:hover:not(:disabled) {
  padding: 10px 16px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: #fff; background: #1f1f1f; border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.sk-go:hover:not(:disabled) { background: #000; }
.sk-go { display: inline-flex; align-items: center; gap: 7px; }
.sk-go svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.sk-go:disabled { opacity: .3; cursor: default; box-shadow: none; }
.sk-go[hidden] { display: none; }
.sk-go.stale { animation: sk-call 1.6s ease-in-out infinite; }
@keyframes sk-call { 50% { box-shadow: 0 4px 16px rgba(0,0,0,.22), 0 0 0 6px rgba(31,31,31,.18); } }
@media (prefers-reduced-motion: reduce) { .sk-go.stale { animation: none; box-shadow: 0 0 0 4px rgba(31,31,31,.2); } }

/* The panel: what came back first, the workings folded away */
.sk-intro { font-size: 13px; color: var(--ink); line-height: 1.5; margin-bottom: 6px; }
.sk-intro.sk-gap { margin-top: 12px; }
.sk-toolcard { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.sk-toolcard strong { font-size: 13px; color: var(--ink); text-transform: capitalize; }
.sk-thumb { flex: none; border-radius: 6px; background: var(--sunk); padding: 6px; }
.sk-impacts { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.sk-impact { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.sk-impact i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.sk-keys { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center; margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }
.sk-keys kbd {
  font: inherit; font-size: 10.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace; color: var(--ink-2);
  padding: 1px 6px; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); justify-self: start;
}
.sk-stale { margin-top: 8px; padding: 6px 8px; font-size: 11.5px; color: var(--ink-2); background: var(--sunk); border-left: 2px solid var(--ink); }
.sk-card { cursor: default; border-radius: 6px; padding: 8px; border-bottom: 0; transition: background .12s; }
.sk-card.on { background: var(--sunk); }
.sk-tag { font-size: 10.5px; color: var(--ink-3); padding: 1px 6px; border: 1px solid var(--rule); border-radius: 999px; }
.sk-details summary { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }
.sk-details-body { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fx-note.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace; font-size: 10px; overflow-wrap: anywhere; }

/* The side panel, folded away for a larger stage: the same on every tab. A phone has it under the
   stage instead */
@media (min-width: 901px) {
  /* The column narrows to nothing and the panel's contents keep their width, so they are covered
     as it goes rather than squeezed; the stage widens in step (each tab's own ResizeObserver, or a
     re-render for a game's board) */
  main.side-anim { transition: grid-template-columns .28s cubic-bezier(.2, .7, .2, 1); }
  main.side-anim #side > *, main.side-closed #side > * { min-width: calc(var(--side-w) - 40px); }
  main.side-closed { grid-template-columns: 1fr 0px; }
  main.side-closed #side { padding-left: 0; padding-right: 0; border-left-width: 0; visibility: hidden; }
  main.side-anim #side { transition: visibility 0s, padding .28s cubic-bezier(.2, .7, .2, 1); }
  main.side-anim.side-closed #side { transition: visibility 0s .28s, padding .28s cubic-bezier(.2, .7, .2, 1); }
  main.side-anim .side-toggle { transition: right .28s cubic-bezier(.2, .7, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  main.side-anim, main.side-anim #side, main.side-anim .side-toggle { transition: none; }
}
/* Its handle: a tab on the stage's right edge, against the panel; the chevron points where it goes */
.side-toggle, .side-toggle:hover:not(:disabled) {
  position: absolute; right: var(--side-w); top: 50%; z-index: 4; width: 18px; height: 56px; margin-top: -28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-2); border-right: 0; border-radius: 8px 0 0 8px;
  background: var(--surface); color: var(--ink-3); box-shadow: -2px 0 8px rgba(0,0,0,.06);
}
main.side-closed .side-toggle, main.side-closed .side-toggle:hover:not(:disabled) { right: 0; }
.side-toggle:hover:not(:disabled) { color: var(--ink); width: 22px; }
.side-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main.side-closed .side-toggle svg { transform: rotate(180deg); }

/* A narrow screen has no room beside the stage: the panel is a drawer from the bottom instead, on
   every tab. Closed, only its handle shows, centred on the stage's foot; open, it covers the lower
   part of the stage and scrolls. Opening it is a setting of its own (gg.drawerOpen), closed at first,
   so a phone opens on the whole stage */
@media (max-width: 900px) {
  main { display: block; --drawer-h: min(62%, 560px); }
  main > #table { height: 100%; padding-bottom: 36px; }
  main.fx > #table { padding-bottom: 0; }
  main > #side {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--drawer-h); z-index: 6;
    overflow-y: auto; overscroll-behavior: contain; border-left: 0; border-top: 1px solid var(--rule-2);
    border-radius: 12px 12px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,.14);
    transform: translateY(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s .28s;
  }
  main.drawer-open > #side { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
  .side-toggle, .side-toggle:hover:not(:disabled) {
    right: auto; left: 50%; top: auto; bottom: 0; margin: 0; transform: translateX(-50%); z-index: 7;
    width: 72px; height: 26px; border: 1px solid var(--rule-2); border-bottom: 0; border-radius: 10px 10px 0 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08); transition: bottom .28s cubic-bezier(.2, .7, .2, 1);
  }
  main.side-closed .side-toggle, main.side-closed .side-toggle:hover:not(:disabled) { right: auto; }
  .side-toggle:hover:not(:disabled) { width: 72px; }
  main.drawer-open .side-toggle, main.drawer-open .side-toggle:hover:not(:disabled) { bottom: var(--drawer-h); }
  .side-toggle svg, main.side-closed .side-toggle svg { transform: rotate(-90deg); }
  main.drawer-open .side-toggle svg { transform: rotate(90deg); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  main > #side, main.drawer-open > #side, .side-toggle { transition: none; }
}

/* A phone or a narrow window: the paper fills the stage, the panel is the drawer */
@media (max-width: 900px) {
  .sk-tool { min-width: 34px; height: 34px; }
  input.sk-slider { width: 96px; }
  .sk-group + .sk-group { padding-left: 0; border-left: 0; }
  .sk-actions { right: 10px; bottom: 10px; gap: 6px; }
  .sk-go, .sk-go:hover:not(:disabled) { padding: 8px 13px; font-size: 12.5px; }
  .sk-find, .sk-find:hover:not(:disabled) { padding: 7px 11px; font-size: 12.5px; }
}
/* The hint bar keeps to one line; a narrow stage cuts it short rather than growing over the paper */
.sk-stage .fx-hint > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Keyboard hints mean nothing on a touch screen; a passing message (copied, nothing to paste) still shows */
@media (hover: none) {
  .sk-stage .fx-hint > span:first-child:not(.said), .sk-keys, .gd-keys { display: none; }
}
/* A finger needs larger targets than a mouse */
@media (pointer: coarse) {
  .sk-tool { min-width: 38px; height: 38px; }
  .sk-selbar .sk-tool { min-width: 36px; height: 36px; }
  .sk-ink, .sk-ink:hover:not(:disabled), .sk-ink.on, .sk-ink.on:hover:not(:disabled) { width: 26px; height: 26px; }
}
/* The Draw tab's toolbar fills the tab bar, kept to one line: a window narrower than it slides it
   sideways (a wheel does too), faded at an edge where more is out of view, so the bar is the same
   height at every width and the paper keeps the height */
.tabbar:has(.sk-toolbar) > .sep { display: none; }
/* Once the tab bar wraps, a divider ends up at the end of a row or the start of the next */
@media (max-width: 900px) { .tabbar > .sep { display: none; } }
.tabbar .slot:has(> .sk-toolbar) { flex: 1 1 0; min-width: 0; }
.tabbar .sk-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabbar .sk-toolbar::-webkit-scrollbar { display: none; }
.tabbar .sk-toolbar .sk-group { flex: none; }
.tabbar .sk-toolbar.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.tabbar .sk-toolbar.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.tabbar .sk-toolbar.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
@media (max-width: 600px) {
  header { padding: 0 14px; }
  .tabbar { padding: 8px 14px; }
}
/* A phone, upright or on its side: what is used most comes first in the sliding row — the page,
   then the pens — and the presets last */
@media (max-width: 600px), (max-height: 520px) and (max-width: 1000px) {
  .tabbar .sk-toolbar .sk-pages { order: 1; }
  .tabbar .sk-toolbar .sk-g-modes { order: 2; }
  .tabbar .sk-toolbar .sk-g-inks { order: 3; }
  .tabbar .sk-toolbar .sk-sizes { order: 4; }
  .tabbar .sk-toolbar .sk-g-hist { order: 5; }
  .tabbar .sk-toolbar .sk-g-presets { order: 6; }
  .sk-page, .sk-page:hover:not(:disabled) { padding: 0 9px; }
}

/* A phone on its side: header and tab bar kept low, so the paper gets the height */
@media (max-height: 520px) and (max-width: 1000px) {
  header { height: 44px; padding: 0 12px; }
  .tabbar { min-height: 50px; padding: 4px 12px; }
}
/* The narrowest: the size slider shorter and the tools a little closer, so each set keeps to a row */
@media (max-width: 420px) {
  input.sk-slider { width: 72px; }
  .sk-num { display: none; }
  .sk-toolbar .sk-tool { min-width: 34px; height: 34px; padding: 0 4px; }
  .sk-toolbar .sk-group { gap: 2px; }
}
.ph-note {
  position: absolute; transform: translate(-50%, -50%); padding: 7px 14px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 12px; letter-spacing: .02em;
  backdrop-filter: blur(4px); pointer-events: none; white-space: nowrap;
}
.ph-note[hidden] { display: none; }
.ph-note { display: flex; align-items: center; gap: 8px; }

/* While the model reads the drawing: the paper dims, a band sweeps down it, and a spinner turns */
.ph-scan { position: absolute; overflow: hidden; pointer-events: none; }
.ph-scan[hidden] { display: none; }
.ph-scan::after {
  content: ''; position: absolute; left: 0; right: 0; height: 28%; top: -28%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.22) 70%, rgba(255,255,255,.7) 98%, transparent);
  animation: ph-sweep 1.8s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes ph-sweep { to { top: 100%; } }
.ph-spin {
  display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid currentColor; border-right-color: transparent;
  animation: ph-turn .8s linear infinite;
}
.ph-step .ph-spin { width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
@keyframes ph-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ph-scan::after { animation: none; top: 0; height: 100%; background: rgba(255,255,255,.06); }
  .ph-spin { animation-duration: 2.4s; }
}
.ph-timer { font-variant-numeric: tabular-nums; }
.ph-line { font-size: 12px; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.ph-step { font-size: 12px; color: var(--ink-3); line-height: 1.7; font-variant-numeric: tabular-nums; }
.ph-step.done { color: var(--ink-2); }
.ph-step.now { color: var(--ink); font-weight: 600; }
.ph-scene { font-size: 13px; color: var(--ink); line-height: 1.5; margin-bottom: 4px; }
.ph-issues {
  margin-top: 6px; padding: 6px 8px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere;
  background: var(--sunk); border: 1px solid var(--rule-2); border-left: 2px solid var(--ink);
}
.ph-issues-h { color: var(--ink-2); margin-bottom: 2px; }
.ph-issues .mono { color: var(--ink-3); }
.ph-layer { padding: 8px 0 9px; border-bottom: 1px solid var(--rule); }
.ph-layer:last-child { border-bottom: 0; }
.ph-layer-h { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ph-layer-h strong { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ph-swatches { display: flex; gap: 3px; margin-left: auto; }
.ph-swatches i { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--rule-2); }
.ph-why { font-size: 12px; color: var(--ink-2); line-height: 1.45; margin-bottom: 2px; }
.ph-raw { margin-bottom: 6px; }
.ph-raw summary { font-size: 11px; color: var(--ink-3); cursor: pointer; }
.ph-raw pre {
  margin: 6px 0 0; max-height: 260px; overflow: auto; padding: 8px; font-size: 10.5px; line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--sunk); border: 1px solid var(--rule); color: var(--ink-2);
}

/* ── Mac and Windows alike ─────────────────────────────────────────────
   Windows shows classic scrollbars that take room and look heavy; make them thin and quiet
   where the Draw tab scrolls. Nothing on the stage should select as text when a stroke starts
   on a label or a double click lands on the toolbar, except the hex field.
   ────────────────────────────────────────────────────────────────── */
.fx-panel, .sk-gallery, .ph-raw pre {
  scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; scrollbar-gutter: stable;
}
.fx-panel::-webkit-scrollbar, .sk-gallery::-webkit-scrollbar, .ph-raw pre::-webkit-scrollbar { width: 8px; height: 8px; }
.fx-panel::-webkit-scrollbar-thumb, .sk-gallery::-webkit-scrollbar-thumb, .ph-raw pre::-webkit-scrollbar-thumb {
  background: var(--rule-2); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box;
}
.fx-panel::-webkit-scrollbar-track, .sk-gallery::-webkit-scrollbar-track, .ph-raw pre::-webkit-scrollbar-track { background: transparent; }
.sk-stage { -webkit-user-select: none; user-select: none; }
.sk-stage .cp-hex { -webkit-user-select: text; user-select: text; }

/* ── The model: the row at the panel's foot, and its settings dialog ── */
.sk-model {
  display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule);
}
.sk-model-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); }
.sk-model-dot.ok { background: #30a46c; }
.sk-model-dot.bad { background: #e5484d; }
.sk-model-dot.wait { animation: ph-turn 1s linear infinite; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); border-right-color: transparent; }
.sk-model-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sk-model-text strong { font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-model-text span { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-setup, .sk-setup:hover:not(:disabled) {
  margin-top: 10px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; border-radius: 6px;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink); cursor: pointer;
}

.ms-back {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px; background: rgba(10, 10, 10, .38); overflow-y: auto;
}
.ms {
  width: min(480px, 100%); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.ms-head { display: flex; align-items: center; }
.ms-head h2 { margin: 0; font-size: 16px; font-weight: 650; flex: 1; }
.ms-x, .ms-x:hover:not(:disabled) { width: 30px; height: 30px; padding: 0; font-size: 20px; line-height: 1; border: 0; border-radius: 6px; color: var(--ink-3); background: transparent; }
.ms-x:hover:not(:disabled) { background: var(--sunk); color: var(--ink); }
.ms-lead { margin: -6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.ms-field { display: flex; flex-direction: column; gap: 5px; }
.ms-label { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.ms-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 6px;
}
.ms-input:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
.ms-input::placeholder { color: var(--ink-3); }
.ms-extra { min-height: 64px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace; font-size: 12px; margin-top: 6px; }
.ms-row { display: flex; gap: 8px; align-items: center; }
.ms-row .ms-input { flex: 1; }
.ms-note { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
.ms-note:empty { display: none; }
.ms-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.ms-chip, .ms-chip:hover:not(:disabled) {
  padding: 2px 9px; font: inherit; font-size: 11px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); background: transparent;
}
.ms-chip:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.ms-link, .ms-link:hover:not(:disabled) { padding: 0; font: inherit; font-size: 11.5px; border: 0; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ms-link.warn { color: #c4282d; }
.ms-seg { display: inline-flex; align-self: flex-start; padding: 2px; gap: 0; background: var(--sunk); border-radius: 7px; }
.ms-seg-b, .ms-seg-b:hover:not(:disabled) { padding: 4px 12px; font: inherit; font-size: 12px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-3); }
.ms-seg-b:hover:not(:disabled) { color: var(--ink); }
.ms-seg-b.on, .ms-seg-b.on:hover:not(:disabled) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ms-adv summary { font-size: 12px; color: var(--ink-2); cursor: pointer; }
.ms-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--sunk); border-radius: 8px; }
.ms-result { flex: 1; min-width: 180px; font-size: 12px; line-height: 1.45; color: var(--ink-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ms-result.good strong { color: #218358; }
.ms-result.bad strong { color: #c4282d; }
.ms-result.bad { color: var(--ink); }
.ms-btn, .ms-btn:hover:not(:disabled) { padding: 7px 14px; font: inherit; font-size: 13px; border-radius: 6px; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); }
.ms-btn:hover:not(:disabled) { border-color: var(--ink-3); }
.ms-primary, .ms-primary:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.ms-error { font-size: 12px; color: #c4282d; }
.ms-error:empty { display: none; }
.ms-foot { display: flex; align-items: center; gap: 8px; }
.ms-grow { flex: 1; }
@media (max-width: 520px) { .ms-back { padding-top: 16px; } .ms-foot { flex-wrap: wrap; } }

/* The second look: before/after, and what it changed */
.sk-look { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sk-look .ms-seg-b { font-size: 11.5px; padding: 3px 10px; }
.sk-tuned { font-size: 11px; color: #1f6f4a; margin-top: 3px; }
.sk-seen { font-size: 11px; line-height: 1.45; color: var(--ink-3); font-style: italic; margin-top: 4px; }
.sk-tag.sk-added { color: #1f6f4a; border-color: color-mix(in srgb, #1f6f4a 40%, transparent); }
.sk-impact.added span::before { content: '+ '; color: #1f6f4a; font-weight: 600; }
.sk-removed { width: 100%; margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.sk-removed strong { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }

/* What a tool and a struck thing are made of: small 0–1 bars, a tick where a second look moved one from */
.sk-axes { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px; align-items: center; margin: 6px 0 2px; font-size: 11px; }
.sk-axis-name { color: var(--ink-3); }
.sk-axis-bar { position: relative; height: 5px; border-radius: 3px; background: var(--rule); }
.sk-axis-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ink-2); }
.sk-axis-bar b { position: absolute; top: -2px; width: 2px; height: 9px; margin-left: -1px; background: #e8541c; }
.sk-axis-num { font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 4.5em; text-align: right; }
.sk-blow { font-size: 11px; line-height: 1.45; color: var(--ink-2); margin: 2px 0 4px; }

/* The objects the first stage found, numbered as the recipe refers to them */
.sk-objs { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
.sk-obj { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 5px; cursor: default; }
.sk-obj.on { background: var(--sunk); }
.sk-obj-i { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sk-obj-name { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.sk-obj-box { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.sk-ph-how { color: var(--ink-3); font-size: 11px; margin-left: 4px; }
.sk-lap { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline; padding: 2px 0; line-height: 1.45; }
.sk-lap-text { overflow-wrap: anywhere; }
.sk-lap-t { color: var(--ink-3); font-weight: 400; white-space: nowrap; }
.sk-lap.failed { color: var(--ink); }
.sk-lap-bar { grid-column: 1 / -1; display: block; height: 2px; margin-top: 2px; background: var(--ink-3); opacity: .45; }

/* Tabs inside the side panel (sidetabs.ts), for any tab whose panel outgrows one column: what
   stays in view sits above and below, the open pane scrolls between them */
.side-tabbed { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.side-tabs { flex: none; display: flex; gap: 2px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.side-tabs::-webkit-scrollbar { display: none; }
.side-tab, .side-tab:hover:not(:disabled) {
  flex: none; display: inline-flex; align-items: baseline; gap: 5px; margin-bottom: -1px;
  padding: 6px 9px 7px; font: inherit; font-size: 12px; color: var(--ink-3); cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
}
.side-tab:hover:not(:disabled) { color: var(--ink); }
.side-tab[aria-selected="true"], .side-tab[aria-selected="true"]:hover:not(:disabled) { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.side-tab:focus-visible { outline: 1px solid var(--focus); outline-offset: -2px; }
.side-tab-badge { font-size: 10.5px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.side-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.side-tabbed > .sk-model { flex: none; }
.sk-state { font-size: 12px; color: var(--ink); font-style: italic; line-height: 1.4; margin-bottom: 3px; }

/* The interaction map (map.ts): the tool, the kinds of thing, what comes of them */
.im { width: 100%; height: auto; display: block; overflow: visible; font-family: inherit; }
.im-node rect { fill: var(--surface); stroke: var(--rule-2); stroke-width: 1; }
.im-node { cursor: default; }
.im-node.on rect { stroke: var(--ink); stroke-width: 1.5; }
.im-tool rect { fill: var(--sunk); stroke: #e87800; }
.im-kind.quiet rect { stroke-dasharray: 3 3; }
.im-kind.quiet text { fill: var(--ink-3); }
.im-name { font-size: 11.5px; font-weight: 600; fill: var(--ink); }
.im-sub { font-size: 10px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.im-fxname { font-size: 10.5px; fill: var(--ink-2); }
.im-edge { fill: none; stroke-width: 1.5; }
.im-edge.hit { stroke: #e87800; }
.im-edge.touch { stroke: #e87800; stroke-dasharray: 2 3; }
.im-edge.off { stroke: var(--ink-3); }
.im-edge.own { stroke: #e6285a; stroke-dasharray: 5 4; }
.im-label { font-size: 9.5px; fill: #c46500; font-weight: 600; }
.im-edge.bump { stroke: var(--ink-3); stroke-dasharray: 1 3; opacity: .7; }
.im-label.bump { fill: var(--ink-3); }
/* the meetings that only bump or do nothing, a line each */
.sk-sub { margin: 10px 0 4px; font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.sk-meet-line { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 6px; font-size: 12px; }
.sk-meet-line.on { background: var(--hover, rgba(0,0,0,.05)); }
.sk-meet-line .ph-why { margin: 0; }
.im-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 11px; color: var(--ink-3); }
.im-key span { display: inline-flex; align-items: center; gap: 5px; }
.im-swatch { stroke: var(--rule-2); stroke-width: 0.5; }
.sk-style { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.sk-style-l { font-size: 11px; color: var(--ink-3); }
.sk-style .ms-seg-b { font-size: 11.5px; padding: 3px 9px; }
.sk-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; margin-bottom: 6px; }
.sk-kv-k { color: var(--ink-3); }
.sk-kv-v { color: var(--ink); overflow-wrap: anywhere; }
.sk-look-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px var(--rule-2); }

/* ── Draw: the guide, the way through for someone new (sketch.ts guidePane) ── */
.gd-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.gd-step { position: relative; display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; padding-bottom: 16px; }
.gd-step:not(:last-child)::before {
  content: ''; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--rule);
}
.gd-step.done:not(:last-child)::before { background: var(--ink-3); }
.gd-dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  color: var(--ink-3); background: var(--surface); border: 1.5px solid var(--rule-2); font-variant-numeric: tabular-nums;
}
.gd-step.now .gd-dot { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.gd-step.opt .gd-dot { color: var(--ink); border-color: var(--ink); }
.gd-step.done .gd-dot { color: var(--ink-2); background: var(--sunk); border-color: var(--ink-3); }
.gd-step.failed .gd-dot { color: #fff; background: #b4372f; border-color: #b4372f; }
.gd-body { min-width: 0; padding-top: 3px; }
.gd-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.gd-step.todo .gd-title, .gd-step.done .gd-title { color: var(--ink-3); font-weight: 500; }
.gd-step.done .gd-title { color: var(--ink-2); }
.gd-text { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.gd-note { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.gd-error { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #b4372f; overflow-wrap: anywhere; }
.gd-sub { margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.gd-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gd-btn {
  padding: 6px 11px; font: inherit; font-size: 12.5px; border-radius: 6px; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--rule-2);
}
.gd-btn:hover:not(:disabled) { border-color: var(--ink-3); }
.gd-btn.primary { color: var(--paper); background: var(--ink); border-color: var(--ink); font-weight: 600; }
.gd-btn:disabled { opacity: .45; cursor: default; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.gd-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: 12px; line-height: 1.5;
  color: var(--ink-2); background: var(--sunk); border-radius: 999px;
}
.gd-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.gd-fx { margin-top: 6px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--rule); }
.gd-fx.on { border-color: var(--ink-3); background: var(--sunk); }
.gd-fx-who { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); text-transform: capitalize; }
.gd-fx-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gd-look .sk-look { margin-top: 4px; }
.gd-run { margin-top: 8px; }
.gd-bar { height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; margin-bottom: 8px; }
.gd-bar i { display: block; height: 100%; background: var(--ink); transition: width .4s ease; }
.gd-stage { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; color: var(--ink-3); }
.gd-stage.now { color: var(--ink); font-weight: 600; }
.gd-stage.done { color: var(--ink-2); }
.gd-stage.failed { color: #b4372f; }
.gd-stage-mark { text-align: center; font-size: 12px; }
.gd-stage-mark .ph-spin { width: 11px; height: 11px; }
.gd-stage-t { font-size: 11.5px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gd-stage-out { margin: 0 0 4px 22px; }
.gd-keys { margin-top: 4px; border-top: 1px solid var(--rule); padding-top: 10px; }
.gd-keys summary { font-size: 12px; color: var(--ink-3); cursor: pointer; }
.gd-keys .sk-keys { margin-top: 10px; }
@media (prefers-color-scheme: dark) {
  .gd-step.failed .gd-dot { background: #d0584f; border-color: #d0584f; }
  .gd-error, .gd-stage.failed { color: #e07a72; }
}

/* ── Survive: the stage's overlay (a level up's choice, pause, the end), the item cards (fx/survive/tab.ts) ── */
.sv-stage { cursor: default; touch-action: none; user-select: none; }
.sv-stage canvas { cursor: default; }
.sv-stage canvas.sv-px { image-rendering: pixelated; image-rendering: crisp-edges; width: auto; height: auto; inset: 0 auto auto 0; }
.sv-over {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 16px; background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(2px);
}
.sv-over[hidden] { display: none; }
.sv-over-h { font-size: 22px; font-weight: 700; color: var(--ink); }
.sv-over-note { font-size: 13px; color: var(--ink-3); }
.sv-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; }
.sv-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--ink-2);
  padding: 10px 12px; margin-top: 8px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--surface);
}
.sv-cards .sv-card { width: 260px; margin: 0; padding: 14px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.sv-cards .sv-card:hover { border-color: var(--ink); }
.sv-card-h { display: flex; align-items: center; gap: 8px; }
.sv-card-h strong { font-size: 14px; color: var(--ink); }
.sv-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.sv-held { font-size: 11px; color: var(--ink-3); }
.sv-key { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: 4px; padding: 0 5px; }
.sv-flavour { font-size: 12px; font-style: italic; color: var(--ink-3); }
.sv-line { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.sv-card .gd-bar { margin: 6px 0 0; }
.sv-card .gd-note { margin-top: 2px; }

/* The page's language, at the header's right (main.ts) */
header .lang-toggle { margin-left: auto; font-size: 12px; padding: 4px 10px; }

/* Survive, on the stage: what was just taken, and a slot for each item held */
.sv-toast { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; gap: 6px;
  width: min(420px, calc(100% - 32px)); pointer-events: none; }
.sv-toast-item { padding: 9px 12px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--rule-2);
  box-shadow: 0 6px 18px rgba(0,0,0,.12); animation: sv-in .25s ease-out; transition: opacity .5s ease, transform .5s ease; }
.sv-toast-item.out { opacity: 0; transform: translateY(-6px); }
.sv-toast-new { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--paper); background: var(--ink); border-radius: 4px; padding: 1px 6px; }
@keyframes sv-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.sv-slots { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  pointer-events: none; }
.sv-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; }
.sv-ring { --p: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; transition: transform .06s linear;
  background: conic-gradient(var(--c) calc(var(--p) * 360deg), color-mix(in srgb, var(--ink) 14%, transparent) 0); }
.sv-ring-in { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink);
  background: var(--surface); }
.sv-slot-name { max-width: 58px; font-size: 10.5px; line-height: 1.2; color: var(--ink-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper); }
@media (prefers-reduced-motion: reduce) { .sv-toast-item { animation: none; } }

/* Survive: an item's tier, as the colour of its card's edge and a word */
.sv-card, .sv-toast-item { border-top: 3px solid var(--tier, var(--rule-2)); }
.sv-cards .sv-card.tier-3, .sv-cards .sv-card.tier-4 { box-shadow: 0 0 0 1px var(--tier), 0 6px 22px color-mix(in srgb, var(--tier) 35%, transparent); }
.sv-tier { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--tier); }

/* Survive: a newly written item; the committee chair's arrival; the run written up as a thesis */
.sv-written { font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #6e56cf, #3e8ed0); border-radius: 4px; padding: 1px 6px; }
.sv-toast-item.sv-boss { border-top-color: #e5484d; }
.sv-toast-item.sv-boss strong { color: #e5484d; font-size: 14px; }
.sv-over:has(.sv-paper) { justify-content: flex-start; overflow-y: auto; padding: 24px 16px; }
.sv-paper { width: min(680px, 100%); padding: 28px 32px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.14); font-family: "Noto Serif KR", "Nanum Myeongjo", Georgia, "Times New Roman", serif; color: var(--ink); }
.sv-paper-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 12px ui-sans-serif, system-ui, sans-serif; color: var(--ink-3); }
.sv-stamp { font: 800 13px ui-sans-serif, system-ui, sans-serif; padding: 4px 10px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-4deg); letter-spacing: .04em; }
.sv-stamp.distinction { color: #c27c0e; } .sv-stamp.pass { color: #2f7d4f; } .sv-stamp.another { color: #b4372f; }
.sv-paper-title { margin: 18px 0 6px; font-size: 22px; line-height: 1.3; text-align: center; }
.sv-paper-meta { text-align: center; font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.sv-paper h3 { margin: 18px 0 6px; font-size: 14px; letter-spacing: .02em; }
.sv-paper p { margin: 0 0 6px; font-size: 14px; line-height: 1.65; text-align: justify; }
.sv-paper ul { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.sv-table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font: 13px ui-sans-serif, system-ui, sans-serif; }
.sv-table th, .sv-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--rule); }
.sv-table th { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); font-weight: 600; }
.sv-table td:nth-child(3), .sv-table td:nth-child(4), .sv-table th:nth-child(3), .sv-table th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.sv-paper-note { font: 12px ui-sans-serif, system-ui, sans-serif; color: var(--ink-3); margin-top: 4px; }
.sv-paper-wait { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; font: 13px ui-sans-serif, system-ui, sans-serif; color: var(--ink-2); }
.sv-committee > div { margin-bottom: 8px; }
.sv-committee strong { font: 600 12.5px ui-sans-serif, system-ui, sans-serif; color: var(--ink-2); }
.sv-paper .gd-row { justify-content: center; margin-top: 20px; }

/* Survive: the Records pane */
.sv-rec { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.sv-rec strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-thesis { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; width: 100%; margin-top: 6px; padding: 8px 10px; text-align: left; font: inherit;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); cursor: pointer; }
.sv-thesis:hover { border-color: var(--ink-3); }
.sv-stamp-sm { grid-row: span 2; align-self: center; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border: 1.5px solid currentColor; border-radius: 3px; }
.sv-stamp-sm.distinction { color: #c27c0e; } .sv-stamp-sm.pass { color: #2f7d4f; } .sv-stamp-sm.another { color: #b4372f; }
.sv-thesis-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.sv-thesis-meta { font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 640px) {
  .tabbar .sk-toolbar .gen-title { display: none; }
  .sv-paper { padding: 20px 18px; }
  .sv-paper-title { font-size: 19px; }
  .sv-stamp { font-size: 11.5px; padding: 3px 7px; white-space: nowrap; }
}

/* Survive: an item's icon, its own dots */
.sv-icon { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.sv-ring-in .sv-icon { width: 20px; height: 20px; }
.sv-icon-card { width: 22px; height: 22px; flex: none; }
.sv-cards .sv-icon-card { width: 30px; height: 30px; }
.sv-over-hint { max-width: 560px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ink-2); padding: 6px 12px; border-radius: 6px;
  background: color-mix(in srgb, #f2c230 18%, transparent); }