/* Two bundled variable fonts, both under the OFL (see assets/fonts/). Fraunces is the hand everything is written in;
   IBM Plex Sans is kept for dense readouts only. Fraunces defaults to weight 900 and full WONK, so every rule sets both. */
@font-face { font-family: 'Fraunces'; src: url('assets/fonts/Fraunces.ttf') format('truetype-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/IBMPlexSans.ttf') format('truetype-variations'); font-weight: 100 700; font-display: swap; }

/* ---- the palette -------------------------------------------------------- */
/* Read off references/Solarpunk GUI: warm wood and cream, sage green, apricot, and a sky you can see through the
   window. Every colour in the interface is one of these; nothing is mixed by eye at the point of use. */
:root {
  --bark: #5c312c; --bark-mid: #a77e6c; --wood: #c1a88f; --tan: #e9cfa6;
  --cream: #fbdfc3; --cream-deep: #fbd9b4; --light: #ffefd7;
  --sun: #ffbc77; --ember: #f8935c;
  --leaf: #b3c86b; --leaf-light: #d1e58d; --moss: #7d8f40; --forest: #476531;
  --sky: #afe7ff; --sky-deep: #7cb2e2;
  --ink: var(--bark); --pencil: #8d6a58; --rust: #b5533a; --vellum: var(--light);
  --display: 'Fraunces', Charter, 'Iowan Old Style', Georgia, serif;
  --ui: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: var(--display);
  --round: 14px; --round-sm: 9px;
  --lift: 0 10px 30px rgba(60,30,24,0.34);
}
/* ---- things drawn rather than printed ----------------------------------- */
/* A garland over the top edge of a panel: the one ornament everything else borrows from. */
:root {
  /* Drawn by RetroDiffusion from the palette above; see tools/generate-art.mjs and assets/gen/manifest.json. */
  --vine: url('assets/ui/vine.png');
  --paper: url('assets/ui/paper.png');
  --panel-art: url('assets/ui/panel.png');
  /* assets/ui/wood.png, sky.png and water.png are generated and kept for later; nothing asks for them yet. */
  --leader: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='2'><circle cx='1' cy='1' r='0.62' fill='%235c312c' fill-opacity='0.3'/></svg>");
  --rule-h: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='3'><path d='M0 1.9 Q 12 0.9 24 1.8 T 48 1.4 T 72 2.2 T 96 1.5' stroke='%235c312c' stroke-opacity='0.34' stroke-width='1' fill='none' stroke-linecap='round'/></svg>");
  --rule-v: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3' height='96'><path d='M1.9 0 Q 0.9 12 1.8 24 T 1.4 48 T 2.2 72 T 1.5 96' stroke='%235c312c' stroke-opacity='0.3' stroke-width='1' fill='none' stroke-linecap='round'/></svg>");
  --sprout: url('assets/ui/sprout.png');
}
.ruled-under { background-image: var(--rule-h); background-repeat: repeat-x; background-position: left bottom; padding-bottom: 11px; }
.ruled-over { background-image: var(--rule-h); background-repeat: repeat-x; background-position: left top; padding-top: 11px; }
.drawn-box { background-image: var(--rule-h), var(--rule-h), var(--rule-v), var(--rule-v);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left top, left bottom, left top, right top; }
/* A panel: cream, a thick bark edge, a lighter inner line, and a shelf of shadow under it. Chunky on purpose. */
.framed { background: var(--cream); border: 3px solid var(--bark); border-radius: var(--round);
  box-shadow: inset 0 0 0 2px var(--bark-mid), inset 0 4px 0 rgba(255,239,215,0.75), var(--lift); }
/* and the garland that hangs over its top edge */
.vined { position: relative; }
.vined::before { content: ''; position: absolute; left: 12px; right: 12px; top: -13px; height: 26px; pointer-events: none; z-index: 3;
  image-rendering: pixelated; background-image: var(--vine); background-repeat: repeat-x; background-size: 76px 76px; background-position: left -38px; }

* { box-sizing: border-box; }
/* The interface is pixel art and must not be smoothed; the specimens are drawn and must not be blocked. */
.pixel { image-rendering: pixelated; }
.pixel img, .pixel canvas, .pixel svg, .pixel image { image-rendering: auto; }
html, body { margin: 0; height: 100%; background: #0a0806; color: var(--ink); overflow: hidden;
  font-family: var(--display); font-weight: 400; font-variation-settings: 'opsz' 18, 'SOFT' 70, 'WONK' 0; }
#pond { display: block; width: 100vw; height: 100vh; cursor: crosshair; }
.hidden { display: none !important; }

/* ---- the water ---------------------------------------------------------- */
#flash { position: fixed; left: 0; right: 0; top: 12vh; text-align: center; font-size: 28px; font-style: italic;
  font-variation-settings: 'opsz' 60, 'SOFT' 80, 'WONK' 1; color: var(--light); text-shadow: 0 2px 18px #000; pointer-events: none; }

.slip { position: absolute; color: var(--ink); background: linear-gradient(160deg, var(--light) 0%, var(--cream) 62%, var(--tan) 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.5) inset; border-radius: var(--round-sm); }
.slip .gum { position: absolute; left: 8%; right: 8%; top: -5px; height: 11px; border-radius: 2px;
  background: linear-gradient(var(--tan), var(--wood)); box-shadow: 0 1px 3px rgba(0,0,0,0.35); transform: rotate(-0.6deg); }

/* ---- under the glass ---------------------------------------------------- */
:root { --glow: var(--tan); --glow-bright: var(--light); --hot: var(--sun); }
.keys { list-style: none; padding: 0; margin: 16px 0 18px; font-size: 16px; line-height: 1.7; max-width: 56ch; }
.keys li { padding-left: 24px; image-rendering: pixelated;
  background-image: var(--sprout); background-repeat: no-repeat; background-size: 17px 17px; background-position: left 0.36em; }
.keys b { font-weight: 600; }

#saveStatus { position: fixed; right: 0; top: 84px; z-index: 40; width: 258px; padding: 11px 16px 11px 14px;
  font-family: var(--ui); font-size: 12px; line-height: 1.42; color: var(--bark);
  background: var(--sun); border: 3px solid var(--bark); border-right: none; border-radius: var(--round) 0 0 var(--round);
  box-shadow: var(--lift); }
#saveStatus[hidden] { display: none; }

/* ---- a page of the notebook --------------------------------------------- */
.page { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 26px; overflow: auto;
  background: radial-gradient(ellipse at 50% 0%, #2d2018 0%, #110c09 72%); }
.col { position: relative; z-index: 1; width: 100%; max-width: 720px; padding: 18px 26px 14px; color: var(--ink);
  image-rendering: pixelated;
  background: var(--light) var(--paper) repeat; background-size: 96px 96px;
  border: 38px solid transparent; border-image: var(--panel-art) 20 round;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55)); }
.col img, .col canvas, .col svg { image-rendering: auto; }
/* the folio number, in the corner of the panel the frame leaves free */
.col::after { content: attr(data-folio); position: absolute; right: 4px; bottom: -6px; pointer-events: none;
  font: italic 11px var(--display); color: var(--pencil); }
.col > * { position: relative; z-index: 1; }
.col.wide { max-width: 1180px; padding: 40px 46px 36px; }
.col.tall { max-width: 1180px; max-height: calc(100vh - 52px); overflow: auto; padding: 36px 44px 34px; }
.col.full { max-width: none; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 22px 30px 16px; }
.page > .col.full { max-height: none; }

h1 { font-weight: 500; font-size: 70px; margin: 0 0 16px -2px; letter-spacing: -0.02em; line-height: 1;
  font-variation-settings: 'opsz' 120, 'SOFT' 90, 'WONK' 1; color: var(--bark); }
h2 { font-weight: 600; font-size: 28px; margin: 0 0 14px; font-variation-settings: 'opsz' 30, 'SOFT' 80, 'WONK' 1; color: var(--bark); }
h3 { font-weight: 600; font-size: 18px; margin: 24px 0 9px; font-variation-settings: 'opsz' 20, 'SOFT' 70, 'WONK' 1; }
h3 .pencil { font-style: italic; margin-left: 10px; font-weight: 400; }
p { line-height: 1.6; font-size: 17.5px; max-width: 54ch; }
.pencil { color: var(--pencil); }
.small { font-size: 13px; }
.warn { color: var(--rust); font-style: italic; }
.eyebrow { font: 600 11px var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); margin: 0 0 8px; max-width: none; }
.actions { margin-top: 24px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; max-width: none; }
.spacer { flex: 1; }

/* ---- keys: every button is a wooden key with a shelf under it ----------- */
button.ink, .import-label {
  font: 500 16px var(--display); font-variation-settings: 'opsz' 18, 'SOFT' 80, 'WONK' 0;
  color: var(--bark); background: var(--light); border: 2.5px solid var(--bark); border-radius: var(--round-sm);
  padding: 8px 16px 9px; cursor: pointer; box-shadow: 0 4px 0 var(--bark-mid); transition: transform .1s, box-shadow .1s, background .15s; }
button.ink:hover, .import-label:hover { background: var(--sun); }
button.ink:active, .import-label:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bark-mid); }
button.ink:focus-visible, .import-label:focus-within { outline: 3px solid var(--moss); outline-offset: 2px; }
button.ink:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: 0 4px 0 var(--bark-mid); transform: none; }
button.ink.faint { font-size: 14px; padding: 6px 12px 7px; background: var(--cream-deep); color: var(--pencil); }
button.ink.faint:hover { background: var(--sun); color: var(--bark); }
.import-label { display: inline-block; }
.import-label input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* the one bright key: a seed splitting in two */
button.stamp { position: relative; display: inline-flex; align-items: center; gap: 11px; cursor: pointer; margin-left: auto;
  font: 600 18px var(--display); font-variation-settings: 'opsz' 20, 'SOFT' 90, 'WONK' 1;
  color: var(--bark); background: var(--sun); border: 3px solid var(--bark); border-radius: var(--round);
  padding: 13px 26px 14px; line-height: 1; box-shadow: 0 6px 0 var(--ember), var(--lift); transition: transform .12s, box-shadow .12s, background .15s; }
button.stamp:hover { background: var(--light); }
button.stamp:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ember), var(--lift); }
button.stamp:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }
button.stamp .mitosis { width: 36px; height: 21px; flex: none; overflow: visible; }
button.stamp .mitosis path { fill: rgba(255,239,215,0.6); stroke: var(--bark); stroke-width: 1.8; }
button.stamp .mitosis g { transition: transform 0.42s cubic-bezier(.5,-0.3,.4,1.3); transform-origin: 23px 13px; }
button.stamp:hover .mitosis .a { transform: translateX(-7px) scaleX(0.74); }
button.stamp:hover .mitosis .b { transform: translateX(7px) scaleX(0.74); }
button.stamp.disabled, button.stamp:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: 0 6px 0 var(--ember), var(--lift); transform: none; }
button.stamp:disabled:hover { background: var(--sun); }
button.stamp:disabled:hover .mitosis g { transform: none; }

/* ---- controls ----------------------------------------------------------- */
select { -webkit-appearance: none; appearance: none; font: 500 14px var(--display); font-variation-settings: 'opsz' 16, 'SOFT' 70, 'WONK' 0;
  color: var(--bark); background: var(--light) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M2.5 4.5 Q 6 8.6 9.5 4.5' stroke='%235c312c' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") no-repeat right 7px center;
  border: 2px solid var(--bark); border-radius: var(--round-sm); padding: 5px 24px 5px 9px; cursor: pointer; }
select:focus-visible { outline: 3px solid var(--moss); outline-offset: 2px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 168px; height: 10px; border-radius: 5px; outline: none;
  background: var(--leaf); border: 2px solid var(--bark); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--bark); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--bark); cursor: pointer; }
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  border: 2.5px solid var(--bark); border-radius: 5px; background: var(--light); display: grid; place-content: center; }
input[type=checkbox]:checked { background: var(--leaf); }
input[type=checkbox]:checked::after { content: ''; width: 9px; height: 5px; border: 2.4px solid var(--bark); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(0.5px, -1.5px); }
input[type=checkbox]:focus-visible { outline: 3px solid var(--moss); outline-offset: 2px; }
code { font-family: Menlo, monospace; font-size: 0.85em; background: var(--tan); padding: 1px 5px; border-radius: 4px; }

/* ---- the lineage: the plate is the whole page --------------------------- */
/* Nothing is spent on chrome that the drawings could have. The bar floats, the key floats, and a specimen says
   what it is only when you point at it. */
/* A sheet of parchment the size of the page, with a warm burn at its edges. Every specimen on it carries its own
   pool of pond water, so the drawings still read as the brightest thing on the paper. */
.page.plate { padding: 0; display: block; background: var(--light); }
.page.plate::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  image-rendering: pixelated; background: var(--paper) repeat; background-size: 128px 128px; }
.page.plate::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 45%, rgba(122,90,44,0) 46%, rgba(122,90,44,0.26) 100%); }
/* A plate larger than the page must be reachable in every direction: `margin: auto` on the child centres it when
   there is room and collapses when there is not, where justify-content would leave the overflow unscrollable. */
#treeWrap { z-index: 2; display: flex; }
#treeSvg { margin: auto; flex: none; }
#treeWrap { position: absolute; inset: 0; overflow: auto; cursor: grab; padding: 64px 0 18px; }
#treeWrap:active { cursor: grabbing; }
.plate-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 18px 16px; background: linear-gradient(var(--light) 58%, rgba(255,239,215,0)); pointer-events: none; }
.plate-bar > * { pointer-events: auto; }
.plate-bar h2 { margin: 0 14px 0 0; font-size: 21px; color: var(--bark); }
.plate-bar .check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bark); cursor: pointer; }
.plate-bar .zoom { display: inline-flex; gap: 8px; }
.plate-bar .count { font: 500 13px var(--ui); color: var(--pencil); letter-spacing: 0.04em; }
/* the two ways of reading it */
.views { display: inline-flex; border: 2.5px solid var(--bark); border-radius: var(--round-sm); overflow: hidden; box-shadow: 0 4px 0 var(--bark-mid); }
.views button { font: 500 14px var(--display); font-variation-settings: 'opsz' 16, 'SOFT' 80, 'WONK' 0; color: var(--bark);
  background: var(--cream-deep); border: 0; padding: 7px 15px 8px; cursor: pointer; }
.views button + button { border-left: 2.5px solid var(--bark); }
.views button[aria-selected=true] { background: var(--leaf); }
.views button:hover { background: var(--sun); }
/* a boxed key, pinned in the far corner and small */
.legend-key { position: absolute; right: 4px; bottom: 4px; z-index: 6; list-style: none; display: flex; flex-direction: column; gap: 5px;
  margin: 0; padding: 0 4px 2px; font-size: 12.5px; font-style: italic; color: var(--bark); image-rendering: pixelated;
  background: var(--light) var(--paper) repeat; background-size: 96px 96px;
  border: 30px solid transparent; border-image: var(--panel-art) 20 round; }
.legend-key li { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.swatch { width: 15px; height: 15px; border-radius: 50%; display: inline-block; flex: none; }
.swatch.archived { border: 2px solid var(--bark); }
.swatch.extinct { border: 2px solid var(--wood); background: linear-gradient(45deg, transparent 43%, var(--rust) 43%, var(--rust) 57%, transparent 57%); }
.swatch.dormant { border: 2px dashed var(--bark-mid); }
.swatch.plus { border: 2px solid var(--bark); background: var(--leaf); color: var(--bark); font: 600 11px var(--display); line-height: 11px; text-align: center; font-style: normal; }
.swatch.here { border: 2px dashed var(--ember); background: rgba(248,147,92,0.18); }
/* the specimens themselves */
#treeSvg text { fill: var(--bark); font: 500 13px var(--display); font-variation-settings: 'opsz' 14, 'SOFT' 80, 'WONK' 1; pointer-events: none; }
#treeSvg text.node-status { font-size: 11.5px; font-style: italic; fill: var(--pencil); }
#treeSvg .node, #treeSvg .branch { cursor: pointer; }
#treeSvg .node image, #treeSvg .node text { transition: opacity 0.18s; }
#treeSvg .node text { opacity: 0; }
#treeSvg .node.dormant image { opacity: 0.55; }
#treeSvg .node.extinct image { opacity: 0.42; }
#treeSvg .node:hover image, #treeSvg .node.picked image { opacity: 1; }
#treeSvg .node:hover text, #treeSvg .node.picked text, #treeSvg .node:focus text { opacity: 1; }
#treeSvg .node:focus { outline: none; }
#treeSvg .node:focus image { outline: 2.5px solid var(--sun); outline-offset: 4px; border-radius: 8px; }
#treeSvg .node .pad { fill: rgba(92,49,44,0.03); stroke: none; }
#treeSvg .node:hover .pad, #treeSvg .node.picked .pad { fill: rgba(92,49,44,0.1); }
#treeSvg .node.current .here { stroke: var(--ember); stroke-width: 2.5; stroke-dasharray: 7 5; fill: none; }
#treeSvg .node.current image { opacity: 1; }
#treeSvg .link { fill: none; stroke: var(--bark-mid); stroke-width: 2; }
#treeSvg .branch circle { fill: var(--leaf); stroke: var(--bark); stroke-width: 2; }
#treeSvg .branch text { fill: var(--bark); font-weight: 600; opacity: 1; }
#treeSvg .branch:hover circle { fill: var(--sun); }
#treeSvg .row-label { fill: var(--moss); font: italic 13px var(--display); }

/* the record of whichever specimen you are pointing at: a card beside it, not a panel under the page */
#specimenRecord { position: absolute; z-index: 7; width: 350px; padding: 0 4px 4px; pointer-events: none; image-rendering: pixelated;
  background: var(--light) var(--paper) repeat; background-size: 96px 96px;
  border: 34px solid transparent; border-image: var(--panel-art) 20 round;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); }
#specimenRecord * { image-rendering: auto; }
#specimenRecord.pinned { pointer-events: auto; }
#specimenRecord h3 { margin: 0 0 8px; font-size: 18px; color: var(--bark); }
#specimenRecord dl { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; font-size: 13.5px; max-width: none; }
#specimenRecord dl div { display: grid; grid-template-columns: auto 1fr auto; gap: 0 7px; align-items: baseline; }
#specimenRecord dt { font: 600 10.5px var(--ui); letter-spacing: 0.13em; text-transform: uppercase; color: var(--moss); }
#specimenRecord .lead { background-image: var(--leader); background-repeat: repeat-x; background-position: left 0.72em; height: 1em; }
#specimenRecord dd { margin: 0; font-weight: 500; }
#specimenRecord .acts { display: flex; flex-wrap: wrap; gap: 8px; }
#specimenRecord .stamp { margin-left: 0; font-size: 15px; padding: 9px 16px 10px; }
.record-empty { color: var(--pencil); font-size: 15px; font-style: italic; }

/* ---- pause -------------------------------------------------------------- */
.pause-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.pause-actions .stamp { margin-left: 0; }

/* ---- the apparatus ------------------------------------------------------ */
.vols { display: flex; gap: 30px; flex-wrap: wrap; }
.vols label { display: flex; align-items: center; gap: 11px; font-style: italic; }
.bench-row { background: var(--light); border: 2px solid var(--wood); border-radius: var(--round-sm); padding: 11px 14px 9px; margin-bottom: 9px; font-size: 15px; }
.bench-head b { font-size: 17px; margin-right: 8px; font-weight: 600; }
.bench-head i { font-style: italic; }
.bench-cur { margin: 4px 0; }
.bench-search { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.bench-search input { font: italic 15px var(--display); background: var(--cream); border: 2px solid var(--bark-mid); border-radius: var(--round-sm);
  color: var(--ink); width: 290px; padding: 5px 9px; outline: none; }
.bench-search input:focus { border-color: var(--moss); }
.bench-results { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.bench-hit { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bench-hit a, .bench-cur a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--wood); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
button.ink.faint.play, button.ink.faint.use, button.ink.faint.unpin, button.ink.faint.search { font-size: 13px; padding: 4px 9px 5px; margin: 0; }
.credits { padding-left: 20px; line-height: 1.8; font-size: 16.5px; list-style: none; }
.credits li { image-rendering: pixelated; background-image: var(--sprout); background-repeat: no-repeat; background-size: 16px 16px; background-position: left 0.45em; padding-left: 24px; }
.credits b { font-weight: 600; }
.credits a { color: var(--ink); }

/* ---- the editor: no interface but the animal ---------------------------- */
/* The specimen, large, in its own slowed water. Over dark water the panel colours invert: bark for the ground,
   cream for the ink, apricot for whatever is live. */
:root { --panel: rgba(40,26,20,0.88); --panel-edge: rgba(233,207,166,0.22); --panel-ink: var(--cream); --panel-dim: rgba(251,223,195,0.66);
  --tile: #2a1c16; --tile-core: #3d2a1f; --warm-warn: var(--ember); --etch: 0 1px 8px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.8); }
.edit { position: fixed; inset: 0; pointer-events: none; color: var(--panel-ink); font-family: var(--display); font-variation-settings: 'opsz' 16, 'SOFT' 70, 'WONK' 0; }
.edit button, .edit input, .edit .pick { pointer-events: auto; }
.glass-panel { background: var(--panel); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 2px solid var(--panel-edge); border-radius: var(--round); box-shadow: var(--lift); }
#cfgName { font: 600 19px var(--display); font-variation-settings: 'opsz' 20, 'SOFT' 80, 'WONK' 1; color: var(--glow-bright);
  background: transparent; border: 0; border-bottom: 2px solid var(--panel-edge); padding: 3px 2px 5px; width: 190px; outline: none;
  text-align: right; text-shadow: var(--etch); }
#cfgName:focus { border-bottom-color: var(--sun); }
#cfgName::placeholder { color: rgba(251,223,195,0.45); font-style: italic; font-weight: 400; }
.dna { font: 600 15px var(--ui); letter-spacing: 0.1em; color: var(--panel-dim); text-shadow: var(--etch); white-space: nowrap; }
.dna.over { color: var(--warm-warn); }
button.whisper { font: italic 14px var(--display); color: var(--panel-dim); background: none; border: 0; padding: 6px 10px; cursor: pointer; text-shadow: var(--etch); }
button.whisper:hover { color: var(--sun); }
#btnCancel { position: absolute; right: 22px; top: 18px; }
/* the ring of icons */
.picker { position: absolute; inset: 0; }
.pick { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; cursor: pointer; user-select: none;
  background: radial-gradient(circle at 50% 40%, var(--tile-core), var(--tile) 74%); border: 2.5px solid var(--bark-mid);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); animation: pick-in .16s ease-out both; }
@keyframes pick-in { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.pick canvas { width: 78%; height: 78%; display: block; filter: drop-shadow(0 0 6px rgba(255,188,119,0.34)); }
.pick .glyph { font: 600 22px var(--display); color: var(--glow-bright); line-height: 1; }
.pick .word { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0); white-space: nowrap; font: 500 11px var(--ui); color: var(--panel-ink); text-shadow: var(--etch); pointer-events: none; }
.pick:hover, .pick:focus-visible { outline: none; border-color: var(--sun); box-shadow: 0 0 0 3px rgba(255,188,119,0.4), 0 0 22px rgba(255,188,119,0.45); }
.pick.act .glyph { color: var(--sun); }
.pick[data-action=remove] .glyph { color: var(--warm-warn); }
.pick.locked { opacity: 0.45; cursor: default; }
.pick.locked canvas { filter: grayscale(0.7) brightness(0.55); }
/* an annotation on a specimen: a name over a ruled line, not a panel */
.edit-card { position: fixed; z-index: 50; width: 200px; padding: 0; pointer-events: none; background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: var(--etch); }
.edit-card b { display: block; font: 600 17px var(--display); font-variation-settings: 'opsz' 18, 'SOFT' 80, 'WONK' 1; color: var(--glow-bright);
  padding-bottom: 5px; border-bottom: 2px solid rgba(233,207,166,0.45); }
.edit-card i { display: block; font-style: italic; font-size: 13.5px; line-height: 1.35; color: var(--panel-ink); margin-top: 6px; }
.edit-card .pencil { display: block; font: 600 10.5px var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun); margin-top: 5px; }
.edit-msg { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); margin: 0; max-width: 48ch; text-align: center;
  font-style: italic; font-size: 16px; color: var(--sun); text-shadow: var(--etch); opacity: 0; transition: opacity .3s; }
.edit-msg.show { opacity: 1; }
.edit-bar { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; align-items: center; gap: 18px; }
.edit-top { position: absolute; left: 26px; top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.edit-top .dna { font-size: 16px; padding-left: 3px; }
.layers { display: flex; flex-direction: column; gap: 12px; transition: opacity .2s; }
.layers.busy { opacity: 0.3; }
.layers button { position: relative; width: 46px; height: 46px; border-radius: var(--round-sm); cursor: pointer; padding: 0; display: grid; place-items: center;
  color: var(--panel-dim); background: var(--panel); border: 2.5px solid var(--bark-mid); box-shadow: 0 4px 0 rgba(60,30,24,0.5);
  transition: color .2s, border-color .2s, background .2s; }
.layers button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.layers button svg .fill { fill: currentColor; stroke: none; }
.layers button:hover { color: var(--light); border-color: var(--tan); }
.layers button[aria-selected=true] { color: var(--bark); border-color: var(--bark); background: var(--sun); box-shadow: 0 4px 0 var(--ember); }
.layers button em { position: absolute; left: calc(100% + 11px); top: 50%; transform: translateY(-50%); font: italic 14px var(--display);
  color: var(--panel-dim); text-shadow: var(--etch); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.layers button:hover em, .layers button[aria-selected=true] em { opacity: 1; }
.layers button[aria-selected=true] em { color: var(--sun); font-style: normal; font-weight: 600; }
.layers button .dot { display: none; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--ember);
  border: 2px solid var(--bark); }
.layers button.fresh .dot { display: block; }
button.arrow { position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: var(--round-sm); cursor: pointer;
  font: 22px var(--display); line-height: 1; color: var(--panel-ink); background: var(--panel); border: 2.5px solid var(--bark-mid);
  box-shadow: 0 4px 0 rgba(60,30,24,0.5); transition: opacity .2s, border-color .2s, color .2s; }
button.arrow:hover { color: var(--sun); border-color: var(--tan); }
button.arrow.spent { opacity: 0.22; pointer-events: none; }
.edit button.stamp { color: var(--bark); padding: 15px 30px 16px; margin: 0; font-size: 19px; }
.edit button.stamp .mitosis { width: 40px; height: 24px; }