/* =============================================================================
   SEQUENCE — _editor.css — THE MUTATION BENCH                     (2026-08-10)

   WHAT THIS FILE OWNS
     · the bench plate      — the faint hairline lab grid the wells sit on
     · the specimen wells   — the sixteen positions, their socket ring, and the
                              SHUTTER (a real hatch, with its reason in words)
     · the growth rail      — four rungs at 25 / 50 / 75 / PRIME, lit as reached
     · the two pills        — prime and entomb, each stating its consequence
     · the subject chips, the saved-skin cards, the DESIGN button
     · the picker dialog and its option rows
     · THE LIGHTNING — and it is scoped to `body[data-subject="live"]`, nothing
       else. A parked animal gets the same bench in the calm palette, on purpose,
       and there is no state this sheet can reach that makes it flicker.

   WHAT IT DELIBERATELY DOES NOT OWN
     · TOKENS. `--bg --bg-2 --rule --rule-hot --blue --blue-dim --green --amber
       --red --mono --wide --pixel --read --t-* --sh-*` all come from _term.css
       and NOT ONE of them is redefined here. Everything new is `--ed-*`, and
       every `--ed-*` is declared exactly once, below.
     · the site chrome (`.plate .crt .screen .top .nav .rule .ticker .status
       .con`) — _term.css.
     · the header cluster, the 3D stage frame, `.idcard`, `.gate`, `.panel`
       footers — _seq.css. This sheet consumes them.
     · the mini studio's insides — `_ministudio.css` owns everything inside
       `[data-ministudio]`; here it is a host box and a `hidden` guard.
     · every VERDICT. Which position is open, why one is closed, what may sit
       in it: the server says, `js/editor.mjs` renders, this sheet only draws.

   THE THREE RULES THE FLEET HAS ALREADY PAID FOR, HONOURED HERE
     1. A DROPPED CSS DECLARATION IS SILENT. `input[type="text"]` outweighs a
        bare class, so the name field is reached at `.ed-name input[type="text"]`
        — raised, never `!important`.
     2. `[hidden]` LOSES TO ANY AUTHORED `display`. Every class in here that
        carries a `display` and can also carry `hidden` gets its own
        `[hidden]{display:none}` at EQUAL specificity, written AFTER it.
        `.ed-picker` is the dangerous one: editor.mjs opens it by adding `.on`
        AND removing `hidden`, so the two rules tie and the later one wins.
     3. NEVER A NEAR-WHITE BLUE ON A HEADING, A NAME OR A `strong`. Headings and
        names are #79D9FF, values are #4BB4FC, labels are --blue-dim. Three
        tiers, so hierarchy survives at 412px.

   A FILLED POSITION CAN ALSO BE A CLOSED ONE. editor.mjs writes `cell on` for
   any position holding a name — even an elder position on an un-entombed animal
   — and marks it `aria-disabled="true"`. So the SHUTTER hangs off
   `[aria-disabled="true"]`, not off `.shut` alone, or eight sealed elder wells
   would draw as open ones.

   ★ WHEN THIS PAGE IS SETTLED its owner-neutral half (the plate, the wells, the
   shutter, the rail, the pills) belongs in
   theisle-framework/home/web-shared/terminal-theme/ — nothing here carries an
   owner name, a domain or a credential.
   ========================================================================= */

:root{
  /* the electric accent. LIVE ONLY - `--ed-accent` is what the bench actually
     paints with, and only body[data-subject="live"] swaps it to this. */
  --ed-live:#64E6FF;
  --ed-accent:var(--blue-hot);

  /* the lab plate: two hairlines on the rule colour at very low alpha */
  --ed-grid:rgba(30,111,224,.115);
  --ed-grid-2:rgba(30,111,224,.06);

  /* the wells */
  --ed-well:rgba(3,12,27,.58);
  --ed-well-line:rgba(30,111,224,.5);
  --ed-well-lit:rgba(75,180,252,.62);
  --ed-tick:rgba(75,180,252,.55);
  --ed-ring:rgba(75,180,252,.42);
  --ed-hatch:rgba(75,180,252,.085);
  --ed-seam:rgba(30,111,224,.42);

  /* a closed position states its reason, and a reason is a caution */
  --ed-lock:#D9994A;

  --ed-ink:rgba(2,10,24,.55);
  --ed-gap:10px;
  /* the well lost its sentence of lock-reason, so it lost the height that
     sentence needed. Four rows of wells now fit where three used to. */
  --ed-well-h:70px;
}

/* the accent, and only here */
body[data-subject="live"]{--ed-accent:var(--ed-live)}

/* =========================================================================
   1. PAGE FRAME
   ========================================================================= */
/* ★★ HIS 2026-08-10 CALL: "design is so bad. too much on there. I dont
   understand anything." The head was ELEVEN LINES of prose, a fake boot log and
   a two-line amber warning before the first thing a player could click. A lab
   opens on its work: one title, one instruction, and the machine's state as a
   chip on the right where a status belongs. */
.ed-head{position:relative;z-index:4;display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  padding:clamp(13px,2vw,22px) var(--pad) clamp(8px,1.1vw,12px)}
.ed-head-l{min-width:0;flex:1}
.ed-head-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:3px}
.ed-head .sub{margin-top:6px;max-width:60ch}
.ed-state{font-family:var(--mono);font-size:10px;letter-spacing:.2em;white-space:nowrap;
  color:#79D9FF;text-shadow:var(--sh-micro);padding:5px 10px;
  border:1px solid rgba(30,111,224,.5);background:rgba(2,10,24,.66)}
.ed-state::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;
  vertical-align:1px;border-radius:50%;background:var(--ed-accent);
  box-shadow:0 0 6px var(--ed-accent)}

/* ★ DO NOT DIM HIS PICTURE TO FIX CONTRAST — ramp the ground under the TEXT.
   `.section` gets this from _term.css; `.ed-head` and `.ed-subjects` are not
   `.section`, so without these two lines the lede and the boot block sit
   directly on the lit S in the plate and lose. Same ramp, same numbers. */
.ed-head::before,.ed-subjects::before{content:"";position:absolute;z-index:-1;
  left:0;right:40%;top:0;bottom:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,2,8,.72) 0%,rgba(0,2,8,.34) 62%,transparent 100%)}
@media(max-width:1080px){
  .ed-head::before,.ed-subjects::before{right:0;
    background:linear-gradient(90deg,rgba(0,2,8,.78) 0%,rgba(0,2,8,.6) 100%)}
}

/* the amber line, now a chip beside the status rather than two lines of prose
   across the head — same warning, same colour, one twelfth of the room */
.ed-preview{display:inline-block;white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--amber);text-shadow:var(--sh-micro);padding:5px 10px;
  border:1px solid rgba(255,180,84,.5);background:rgba(26,16,2,.6)}
.ed-preview[hidden]{display:none}

.ed-empty{display:block;margin:8px 0 0;max-width:80ch;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;line-height:1.7;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.ed-empty[hidden]{display:none}

.ed-note{display:block;margin:8px 0 0;max-width:78ch;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;line-height:1.74;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.ed-note[hidden]{display:none}

/* the two big blocks the controller swaps. Neither carries an authored display,
   so `hidden` already wins - this line only makes that independent of which
   sheet loaded first. */
[data-gate][hidden],[data-body][hidden]{display:none}

.ed-hint{font-family:var(--mono);font-size:10px;letter-spacing:.19em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}

/* =========================================================================
   2. SUBJECT — what is on the bench
   ========================================================================= */
.ed-subjects{position:relative;z-index:4;padding:0 var(--pad) clamp(8px,1.2vw,14px)}
.ed-subjects-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:7px;margin-bottom:9px;border-bottom:1px solid rgba(30,111,224,.42)}

.subjrail{display:flex;gap:9px;min-width:0;overflow-x:auto;padding:2px 2px 9px;
  scrollbar-width:thin}

/* the key: two words, so "upgraded" and "stock" are a stated distinction and
   not something a player has to infer from a colour they were never told about */
.ed-legend{display:flex;align-items:center;gap:14px;margin-left:auto;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--blue-dim)}
.lgd{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lgd i{width:16px;height:3px;display:block}
.lgd.up i{background:var(--ed-accent);box-shadow:0 0 7px var(--ed-accent)}
.lgd.st i{background:rgba(30,111,224,.5)}

/* ★★ THE UPGRADE CARD — his 2026-08-10 call, "people able to see their upgraded
   dinos differ from unupgraded parked dinos."

   Three signals, cheapest first, so the answer survives a glance, a squint and
   a screen-reader in that order:
     1. the STRAND — sixteen pips, lit for the positions that are really filled.
        This is the whole answer at 30cm, and it is the same sixteen the bench
        edits, in the same fixed order.
     2. the accent EDGE and glow, which only an animal carrying something gets.
        A stock animal is not punished, it is simply quiet.
     3. the words underneath, because a pip strip is not readable aloud. */
.subj{position:relative;flex:none;display:grid;gap:2px;min-width:0;
  width:min(232px,76vw);text-align:left;cursor:pointer;font:inherit;
  padding:9px 12px 10px 13px;
  background:var(--ed-ink);border:1px solid rgba(30,111,224,.42);
  border-left:2px solid rgba(30,111,224,.6);
  box-shadow:0 0 0 1px rgba(1,5,11,.85);
  transition:border-color .15s linear,background .15s linear,transform .16s cubic-bezier(.2,.8,.2,1)}
.subj:hover{border-color:rgba(75,180,252,.7);transform:translateY(-1px)}
.subj.on{border-color:rgba(75,180,252,.8);
  background:rgba(12,40,80,.5);box-shadow:0 0 0 1px rgba(1,5,11,.85),0 0 34px -18px var(--ed-accent)}
/* UPGRADED vs STOCK, and the difference is deliberately not subtle */
.subj.up{border-left-color:var(--ed-accent)}
.subj.up.on{box-shadow:0 0 0 1px rgba(1,5,11,.85),0 0 40px -14px var(--ed-accent)}
.subj.stock{border-left-color:rgba(30,111,224,.5)}
.subj.stock .sj-main{color:#4BB4FC}

/* ★★★★★ THE LIVE STATE CARD (2026-08-15, his "it says im a indo rex when im
   not"). It occupies the live position whenever there is NO live animal, so the
   question "what am I right now" is never answered by borrowing a parked one.
   It is a STATEMENT, not a control - no pointer, no hover lift, nothing to
   press - and its sentence WRAPS, because a reason cut off at one line by
   `text-overflow:ellipsis` is not a reason. Dashed rail and muted ink so it
   never reads as a selectable specimen at a glance. */
.subj.subj-state{cursor:default;border-left-style:dashed;
  border-left-color:rgba(158,178,204,.55);background:rgba(8,18,34,.62)}
.subj.subj-state:hover{transform:none;border-color:rgba(30,111,224,.42)}
.subj.subj-state .sj-main{color:#9EB2CC}
.subj.subj-state .sj-sub{white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.45;opacity:.92}

.sj-top{font-family:var(--pixel);font-size:9px;letter-spacing:.24em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.sj-main{font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.06em;
  color:#79D9FF;text-shadow:var(--sh-body);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sj-sub{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  color:var(--blue-dim);text-shadow:var(--sh-micro);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* growth, as a hairline. It was a number in the subtitle competing with the
   nickname for the same line; a bar says the same thing and asks for nothing */
.sj-grow{display:block;height:2px;margin:6px 0 5px;background:rgba(30,111,224,.3);overflow:hidden}
.sj-grow i{display:block;height:100%;background:#4BB4FC;box-shadow:0 0 6px rgba(75,180,252,.7)}

/* the sixteen. `.gap` marks the family seams: own 1-4 | parent 1-4 | elder 1-8 */
.sj-strand{display:flex;gap:2px;align-items:center;height:9px}
.sj-strand i{flex:1;min-width:0;height:100%;background:rgba(30,111,224,.26);
  border-top:1px solid rgba(30,111,224,.42)}
.sj-strand i.f{background:var(--ed-accent);border-top-color:var(--ed-accent);
  box-shadow:0 0 7px -1px var(--ed-accent)}
.sj-strand i.gap{margin-right:4px}

.sj-foot{display:flex;align-items:center;gap:7px;margin-top:6px;min-width:0}
.sj-mut{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;white-space:nowrap;
  color:#79D9FF;text-shadow:var(--sh-micro)}
.subj.stock .sj-mut{color:var(--blue-dim);opacity:.8}
.sj-flags{display:flex;gap:4px;margin-left:auto;min-width:0;overflow:hidden}
.sj-flags b{font-family:var(--mono);font-weight:400;font-size:8.5px;letter-spacing:.13em;
  white-space:nowrap;padding:1px 5px;border:1px solid currentColor;opacity:.9}
.fl-prime{color:var(--ed-live)}
.fl-elder{color:var(--amber)}
.fl-skin{color:#C99BFF}

/* LIVE is an ONLINE-class state, and green is reserved for exactly that */
.subj[data-kind="live"] .sj-top{color:var(--green)}
.subj[data-kind="live"]::after{content:"";position:absolute;right:11px;top:11px;
  width:7px;height:7px;background:var(--green);box-shadow:0 0 9px rgba(91,255,166,.9)}
body[data-subject="live"] .subj[data-kind="live"].on::after{animation:edpulse 2.1s ease-in-out infinite}
@keyframes edpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){
  body[data-subject="live"] .subj[data-kind="live"].on::after{animation:none}
}

/* =========================================================================
   3. THE TWO COLUMNS
   ========================================================================= */
.ed-wrap{position:relative;z-index:4;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);
  gap:var(--pad);padding:0 var(--pad) var(--pad);align-items:start}
@media(max-width:1180px){.ed-wrap{grid-template-columns:minmax(0,1fr)}}
.ed-col{display:grid;gap:var(--pad);align-content:start;min-width:0}

/* the specimen well borrows _seq.css's `.stage`; only the engine host is new.
   ★ The shared 16:10 frame gives a 380px-tall box on this column, and an animal
   is a wide subject standing in the middle of it — so a third of that height was
   empty sky pushing the growth rail and both pills off a 1000px screen. A wider
   frame on THIS page only; _seq.css's own ratio is untouched for every other. */
.pnl-spec .stage{aspect-ratio:16/8.4}
@media(max-width:760px){.pnl-spec .stage{aspect-ratio:16/10}}
.stage .shopview{position:absolute;inset:0;width:100%;height:100%}
.stage .shopview[data-view="idle"]::after,
.stage .shopview[data-view="missing"]::after{
  content:"NO MODEL SHIPPED FOR THIS SPECIES";position:absolute;inset:auto 0 46% 0;
  text-align:center;font-family:var(--pixel);font-size:11px;letter-spacing:.18em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.stage .shopview[data-view="idle"]::after{content:"LOADING SPECIMEN"}
.stage .shopview[data-view="live"]::after{content:none}

/* =========================================================================
   4. GROWTH — the meter and the four-rung rail
   ========================================================================= */
/* GROWTH folded into the specimen card. It was its own panel with its own
   heading and its own frame, which made two boxes out of one fact about one
   animal — and two boxes is exactly what "too much on there" is made of. */
.growblock{margin-top:14px;padding-top:12px;border-top:1px solid rgba(30,111,224,.34)}

.ed-meter{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.ed-meter .mt{position:relative;flex:1;min-width:120px;height:13px;overflow:hidden;
  background:rgba(8,26,52,.9);box-shadow:inset 0 0 0 1px rgba(30,111,224,.6)}
/* ★ NO width here. editor.mjs sets it inline as a percent, and a width in this
   sheet would silently outrank nothing and simply never be replaced. */
/* No transition on `width`. It is the one property here that would animate
   LAYOUT, and the bar is repainted once per bench read, not per frame - there
   is nothing to smooth and a layout-animating property to lose. */
.ed-meter .mt i{position:absolute;left:0;top:0;bottom:0;display:block;
  background:var(--ed-accent);box-shadow:0 0 15px -2px var(--ed-accent)}
/* the three rungs, drawn INSIDE the track, so bar and rail agree */
.ed-meter .mt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(1,5,11,.85),rgba(1,5,11,.85)),
                   linear-gradient(rgba(1,5,11,.85),rgba(1,5,11,.85)),
                   linear-gradient(rgba(1,5,11,.85),rgba(1,5,11,.85));
  background-size:1px 100%;background-position:25% 0,50% 0,75% 0;background-repeat:no-repeat}
.ed-meter .mv{flex:none;font-family:var(--pixel);font-size:12.5px;letter-spacing:.09em;
  color:#79D9FF;text-shadow:var(--sh-body);white-space:nowrap}

.ladder{list-style:none;position:relative;margin:16px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
/* the rail itself */
.ladder::before{content:"";position:absolute;left:12.5%;right:12.5%;top:11px;height:1px;
  background:rgba(30,111,224,.55)}
/* the bolt. Only ever drawn during a live charge; transform only, no layout. */
.ladder::after{content:"";position:absolute;left:0;top:9px;width:16%;height:5px;
  opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ed-live),transparent)}

.rung{position:relative;min-width:0;padding-top:25px;text-align:center}
/* the lamp */
.rung::before{content:"";position:absolute;left:50%;top:5px;width:12px;height:12px;
  margin-left:-6px;transform:rotate(45deg);background:var(--bg);
  border:1px solid var(--rule);
  transition:background .2s linear,border-color .2s linear,box-shadow .2s linear}
/* the segment of rail that reaches this lamp */
.rung::after{content:"";position:absolute;top:11px;right:50%;left:-50%;height:1px;
  background:transparent;transition:background .2s linear}
.rung:first-child::after{display:none}
.rung.on::before{background:var(--ed-accent);border-color:var(--ed-accent);
  box-shadow:0 0 12px -1px var(--ed-accent)}
.rung.on::after{background:var(--ed-accent)}
.rung-v{display:block;font-family:var(--pixel);font-size:12.5px;letter-spacing:.09em;
  color:#4BB4FC;text-shadow:var(--sh-body)}
.rung-n{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.rung.off .rung-v{color:var(--blue-dim)}
.rung.off .rung-n{opacity:.7}

.pills{display:grid;gap:8px;margin-top:15px}
.pill{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  line-height:1.6;color:var(--blue-dim);text-shadow:var(--sh-micro);
  background:var(--ed-ink);border:1px solid rgba(30,111,224,.45);
  border-left:2px solid rgba(30,111,224,.8);padding:8px 11px}
.pill[hidden]{display:none}
.pill.on{color:#4BB4FC;border-color:rgba(75,180,252,.55);border-left-color:var(--ed-accent)}
/* an entombed animal IS in effect in the game, and that is ONLINE-class state */
[data-entomb].on{color:var(--green);border-color:rgba(91,255,166,.45);border-left-color:var(--green)}

.pnl-grow .foot b{color:#79D9FF;font-weight:400}

/* =========================================================================
   5. THE BENCH — the plate, the families, the sixteen wells
   ========================================================================= */
/* `.ed-lede` is gone with the paragraph it dressed. The sixteen positions in
   three families is now said by the three headed sections themselves. */

.ed-plate{position:relative;display:grid;gap:16px;min-width:0;
  padding:14px 13px 13px;border:1px solid rgba(30,111,224,.45);
  background-color:rgba(1,7,18,.5);
  background-image:
    repeating-linear-gradient(90deg,var(--ed-grid) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(180deg,var(--ed-grid-2) 0 1px,transparent 1px 30px);
  box-shadow:inset 0 0 0 1px rgba(1,5,11,.75),inset 0 0 70px -34px rgba(75,180,252,.6)}

/* the travelling arc. Hidden unless the subject is the LIVE animal. */
.ed-arc{position:absolute;inset:0;width:100%;height:100%;display:none;
  pointer-events:none;z-index:2;overflow:visible}
.ed-arc rect{stroke:var(--ed-live);stroke-width:1.4;
  stroke-dasharray:14 86;stroke-dashoffset:0;opacity:.9;
  filter:drop-shadow(0 0 4px rgba(100,230,255,.75))}

.fam{position:relative;min-width:0}
.famh{display:flex;align-items:center;gap:10px;min-width:0;
  padding-bottom:6px;margin-bottom:9px;border-bottom:1px solid rgba(30,111,224,.42)}
.fname{font-family:var(--pixel);font-size:11.5px;letter-spacing:.24em;
  color:#79D9FF;text-shadow:var(--sh-body)}

/* the fold. ELDER keeps his ordering — it is still the first section in the
   DOM — but a SEALED block does not spend eight wells saying LOCKED before the
   four a player can use. */
.famtog{display:inline-flex;align-items:center;gap:8px;font:inherit;color:inherit;
  background:none;border:0;padding:0;cursor:pointer}
.famtog:hover .fname{color:#A8E7FF}
.fchev{font-size:8px;line-height:1;color:var(--blue-dim);
  transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.fam:not(.folded) .fchev{transform:rotate(90deg)}
.fam.folded .wells{display:none}

/* the family meter — the "4 OF 4 OPEN" sentence, drawn. filled / open / shut */
.fmeter{display:flex;gap:2px;align-items:center;height:8px;flex:none}
.fmeter i{display:block;width:7px;height:100%;background:rgba(30,111,224,.22);
  border-top:1px solid rgba(30,111,224,.45)}
.fmeter i.f{background:var(--ed-accent);border-top-color:var(--ed-accent);
  box-shadow:0 0 6px -1px var(--ed-accent)}
.fmeter i.o{background:rgba(75,180,252,.3);border-top-color:rgba(75,180,252,.6)}
.fmeter i.x{background:rgba(217,153,74,.16);border-top-color:rgba(217,153,74,.42)}

.ftag{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.17em;
  padding:2px 8px;white-space:nowrap;text-shadow:var(--sh-micro)}
.ftag.open{color:var(--blue-dim);border:1px solid rgba(30,111,224,.55)}
.ftag.shut{color:var(--ed-lock);border:1px solid rgba(217,153,74,.5)}

.wells{display:grid;gap:var(--ed-gap);min-width:0}
.wells-e,.wells-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:620px){.wells-e,.wells-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- the specimen well -------------------------------------------------- */
.cell{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;
  min-height:var(--ed-well-h);padding:9px 30px 10px 10px;
  text-align:left;cursor:pointer;font:inherit;color:inherit;
  background-color:var(--ed-well);border:1px solid var(--ed-well-line);
  /* two corner brackets, TL and BR - the same pair `.panel` wears */
  background-image:
    linear-gradient(var(--ed-tick),var(--ed-tick)),linear-gradient(var(--ed-tick),var(--ed-tick)),
    linear-gradient(var(--ed-tick),var(--ed-tick)),linear-gradient(var(--ed-tick),var(--ed-tick));
  background-size:8px 1px,1px 8px,8px 1px,1px 8px;
  background-position:0 0,0 0,100% 100%,100% 100%;
  background-repeat:no-repeat;
  box-shadow:0 0 0 1px rgba(1,5,11,.85),inset 0 0 26px -16px rgba(75,180,252,.55);
  transition:border-color .15s linear,background-color .15s linear,
             box-shadow .18s linear,transform .16s cubic-bezier(.2,.8,.2,1)}
.cell > *{position:relative;z-index:2}

/* the socket ring - a well has an opening, and its state is legible in it */
.cell::before{content:"";position:absolute;right:9px;top:9px;width:14px;height:14px;
  z-index:2;border:1px solid var(--ed-ring);border-radius:50%;
  transition:border-color .15s linear,box-shadow .18s linear}

.cell-id{display:block;font-family:var(--pixel);font-size:9px;letter-spacing:.2em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.cell-name{display:block;font-family:var(--mono);font-size:11.5px;font-weight:560;
  letter-spacing:.05em;line-height:1.42;text-transform:uppercase;
  color:#4BB4FC;text-shadow:var(--sh-body);
  min-width:0;overflow-wrap:anywhere}
/* ★ `.cell-lock` is GONE from the markup. It printed a full sentence of reason
   inside every shut well — the same sentence, up to eight times, in one screen.
   The reason lives on the cell's title and its accessible name, and a click on
   a shut well still prints it in the log. Nothing was hidden; it stopped being
   shouted. Rule kept from this sheet's header: a declaration with no element is
   silent, so the class is not left behind here either. */

/* FILLED */
.cell.on{border-color:var(--ed-well-lit);background-color:rgba(9,32,64,.55)}
.cell.on::before{border-color:var(--ed-accent);
  box-shadow:inset 0 0 0 3px var(--ed-accent),0 0 10px -2px var(--ed-accent)}

/* OPEN AND EMPTY - a vacancy, and it says so */
.cell.open .cell-name{color:var(--blue-dim);font-weight:400}
.cell.open::before{border-style:dashed}

/* CLOSED. `.shut` is the empty case; `[aria-disabled]` also catches a FILLED
   elder position on an un-entombed animal, which editor.mjs writes as
   `cell on` - without this second selector those eight draw as open. */
.cell.shut,.cell[aria-disabled="true"]{cursor:not-allowed;
  border-color:rgba(30,111,224,.38);background-color:rgba(2,8,19,.66)}
.cell.shut::after,.cell[aria-disabled="true"]::after{content:"";position:absolute;
  inset:0;z-index:1;pointer-events:none;
  background-image:
    repeating-linear-gradient(135deg,var(--ed-hatch) 0 2px,transparent 2px 7px),
    linear-gradient(var(--ed-seam),var(--ed-seam));
  background-size:auto auto,100% 1px;
  background-position:0 0,0 50%;
  background-repeat:repeat,no-repeat}
.cell.shut::before,.cell[aria-disabled="true"]::before{border-color:rgba(217,153,74,.55);
  box-shadow:none;
  background-image:linear-gradient(135deg,transparent 44%,rgba(217,153,74,.85) 44% 56%,transparent 56%)}
.cell.shut .cell-name{color:var(--blue-dim);font-weight:400}
.cell[aria-disabled="true"] .cell-id{color:rgba(44,132,238,.8)}

.cell:hover:not([aria-disabled="true"]){border-color:#79D9FF;transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(1,5,11,.85),0 0 34px -16px var(--ed-accent)}
.cell:hover:not([aria-disabled="true"]) .cell-name{color:#79D9FF}
.cell:hover:not([aria-disabled="true"])::before{border-color:#79D9FF}

/* ★ THE MUTATION'S OWN LINE (2026-08-13, his "add every mutation description").
   One line per FILLED well, arriving on hover and keyboard focus — the same
   arrive-when-asked idiom as the skin tiles' actions — as an overlay strip
   pinned to the well's foot, so sixteen wells never carry sixteen permanent
   sentences and the grid never reflows under the pointer. Clamped to one
   line; the full text stays on the cell's title and accessible name. */
.cell-desc{display:none;position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:4px 8px 5px;font-family:var(--read);font-size:10.5px;line-height:1.35;
  letter-spacing:.02em;color:#9CCFF6;background:rgba(2,8,19,.94);
  border-top:1px solid rgba(75,180,252,.38);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell:hover .cell-desc,.cell:focus-visible .cell-desc{display:block}

/* THE RULES, FOLDED. Four true paragraphs that were open, permanently, above
   the fold, on a page whose owner said there was too much on it. They are
   accurate and worth keeping — so they became one line that opens when asked.
   A `<details>`, not a hand-rolled toggle: it is keyboard-operable, findable by
   the browser's own in-page search, and it prints open. */
.ed-rules{margin:14px 0 0;border-top:1px solid rgba(30,111,224,.34);padding-top:10px}
.ed-rules > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--blue-dim);
  text-shadow:var(--sh-micro)}
.ed-rules > summary::-webkit-details-marker{display:none}
.ed-rules > summary::before{content:"\25B6";font-size:7px;
  transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.ed-rules[open] > summary::before{transform:rotate(90deg)}
.ed-rules > summary:hover{color:#79D9FF}
.ed-rules p{margin:10px 0 0;max-width:92ch;font-family:var(--read);font-size:12.5px;
  line-height:1.78;color:#6BC6FF;text-shadow:var(--sh-body)}
.ed-rules b{font-weight:400;color:#79D9FF;letter-spacing:.05em}
.ed-rules .ed-order{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  color:var(--blue-dim)}

/* =========================================================================
   6. NAME, SAVED SKINS, THE DESIGN BUTTON
   ========================================================================= */
/* ★ `input[type="text"]` beats a bare class, so the field is reached at this
   raised selector. Fighting it with !important is the version that rots. */
/* ★★ HIS 2026-08-10 CALL ON THIS PANEL, VERBATIM: "need this whole thing
   redesigned, its horrible."

   The old one, counted: a label, a field, a button, an excuse sentence, a rule,
   then one full-width row PER DESIGN carrying seven swatches, a name, a line of
   small print and THREE labelled text buttons — nine buttons stacked down a
   side panel before you reached the one that actually opens the paint bench —
   and then a footer about sRGB encoding sitting under a skin picker.

   Redrawn on one idea: WHEN YOU ARE CHOOSING PAINT, THE PAINT IS THE CONTROL.
   The tile's face is the recipe, at a size worth judging. The name sits on it.
   WEAR / EDIT / DELETE arrive on hover and on keyboard focus, so the panel is
   quiet until it is asked. The colour-encoding footer is gone from the page: it
   is a fact about the wire, not a fact anyone needs while picking a skin. */
.ed-name{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.ed-name input[type="text"]{flex:1;min-width:0;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;color:#79D9FF;background:rgba(1,4,10,.6);
  border:1px solid rgba(30,111,224,.55);padding:7px 9px;outline:none;
  text-shadow:var(--sh-micro);
  transition:border-color .15s linear,background .15s linear}
.ed-name input[type="text"]:focus{border-color:#79D9FF;background:rgba(4,16,34,.85)}
.ed-name input[type="text"]:disabled{opacity:.45;cursor:not-allowed}
.ed-name input[type="text"]::placeholder{color:var(--blue-dim);opacity:.75}
.pnl-skin .ed-note{margin-top:6px;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}

/* the studio's own small-button modifier, which lives in _studio.css and is not
   loaded here - restated at the same numbers so the two pages agree */
.act.sm{padding:6px 10px;font-size:11px;letter-spacing:.10em}
.act.sm[disabled],.act.sm:disabled{opacity:.38;pointer-events:none}
.act.sm.ghost{border-color:rgba(30,111,224,.5);color:var(--blue-dim)}

/* ---- the design tiles --------------------------------------------------- */
.skins{list-style:none;display:grid;gap:9px;margin:13px 0 0;padding:0;min-width:0;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.skincard{position:relative;min-width:0;overflow:hidden;
  border:1px solid rgba(30,111,224,.45);background:var(--ed-ink);
  transition:border-color .15s linear,transform .16s cubic-bezier(.2,.8,.2,1)}
.skincard:hover,.skincard:focus-within{border-color:#79D9FF;transform:translateY(-1px)}
.skincard.worn{border-color:rgba(91,255,166,.6)}

/* THE FACE. Seven wire slots as seven bands — the design, not a description */
.sk-art{display:flex;height:56px;min-width:0}
.sk-art .sw{display:block;flex:1;min-width:0;height:100%}
.sk-art .sw.none{flex:1;
  background-image:repeating-linear-gradient(135deg,rgba(75,180,252,.3) 0 2px,transparent 2px 5px)}
.sk-n{display:block;padding:6px 8px 7px;font-family:var(--mono);font-weight:600;font-size:11.5px;
  letter-spacing:.05em;color:#79D9FF;text-shadow:var(--sh-body);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The species flag is rendered ONLY when it disagrees with the animal on the
   bench — the one moment it tells anybody anything — so it is drawn as a
   caution over the art's corner and never as a permanent line of small print.
   Placing it out of flow also keeps every tile the same height whether the
   warning is there or not, with no `:has()` in the way of it. */
.sk-m{position:absolute;right:0;top:0;max-width:82%;padding:2px 6px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#150A01;background:var(--ed-lock);text-shadow:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-worn{position:absolute;left:0;top:0;padding:2px 7px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  color:#02140A;background:var(--green);text-shadow:none}

/* the three actions. Present in the DOM at all times for the keyboard and the
   screen reader; visible on hover and on focus, which is when they are wanted */
.sk-acts{position:absolute;left:0;right:0;top:0;height:56px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  background:rgba(1,6,16,.82);opacity:0;
  transition:opacity .14s linear}
.skincard:hover .sk-acts,.skincard:focus-within .sk-acts{opacity:1}
/* ★ A HOVER-ONLY CONTROL IS AN UNREACHABLE CONTROL ON A PHONE. There is no
   hover on a touch screen and tapping a tile focuses nothing, so WEAR / EDIT /
   DELETE would simply not exist there. Where the pointer cannot hover they are
   drawn permanently, on a band under the paint rather than over it. */
@media(hover:none){
  .sk-acts{position:static;height:auto;opacity:1;padding:6px;
    background:rgba(1,6,16,.55);border-top:1px solid rgba(30,111,224,.4)}
}
.sk-acts button{font:inherit;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  cursor:pointer;padding:5px 8px;color:#79D9FF;background:rgba(2,10,24,.9);
  border:1px solid rgba(75,180,252,.55);text-shadow:var(--sh-micro);
  transition:color .13s linear,background .13s linear,border-color .13s linear}
.sk-acts button:hover{color:#01040C;background:#79D9FF;border-color:#79D9FF;text-shadow:none}
.sk-acts .skin-del{color:var(--ed-lock);border-color:rgba(217,153,74,.5);padding:5px 7px}
.sk-acts .skin-del:hover{color:#150A01;background:var(--ed-lock);border-color:var(--ed-lock)}
.sk-acts button:focus-visible{outline:1px solid var(--ed-accent);outline-offset:2px}

/* THE DESIGN BUTTON - his "good designed bitton". It opens the bench it
   advertises, so it wears the seven channels it is about to hand over. */
.designbtn{display:flex;align-items:center;gap:13px;flex-wrap:wrap;width:100%;
  margin-top:12px;padding:12px 14px;text-align:left;cursor:pointer;font:inherit;
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,rgba(12,40,80,.6),rgba(2,10,24,.35));
  border:1px solid rgba(75,180,252,.55);
  box-shadow:0 0 0 1px rgba(1,5,11,.9),inset 0 0 34px -20px rgba(75,180,252,.95);
  transition:border-color .16s linear,transform .16s cubic-bezier(.2,.8,.2,1)}
.designbtn:hover{border-color:#79D9FF;transform:translateY(-1px)}
/* it was a two-deck sign — a pixel heading AND a line of small print under it —
   for a button that does one thing. One line, one plus, one strip of paint. */
.db-t{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:#79D9FF;text-shadow:var(--sh-body);min-width:0}
.db-s{display:flex;gap:3px;margin-left:auto;flex:none}
.db-s i{display:block;width:10px;height:22px;box-shadow:inset 0 0 0 1px rgba(1,5,11,.7)}
.db-s i:nth-child(1){background:#7A2A1E}
.db-s i:nth-child(2){background:#C46A32}
.db-s i:nth-child(3){background:#2E1B12}
.db-s i:nth-child(4){background:#D9B27A}
.db-s i:nth-child(5){background:#1A2C3B}
.db-s i:nth-child(6){background:#F2C14E}
.db-s i:nth-child(7){background:#8C1F1F}
.db-a{flex:none;font-family:var(--mono);font-size:16px;line-height:1;color:var(--ed-accent);
  transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.designbtn:hover .db-a{transform:rotate(90deg)}

/* the mini studio's host box. Its insides are _ministudio.css's. */
.ed-mini{display:block;margin-top:12px;min-height:120px;
  border:1px solid rgba(75,180,252,.5);background:rgba(1,6,16,.72);
  box-shadow:0 0 0 1px rgba(1,5,11,.9)}
.ed-mini[hidden]{display:none}

/* =========================================================================
   7. THE LOG
   ========================================================================= */
.ed-log{display:grid;gap:4px;align-content:start;max-height:196px;min-width:0;
  overflow:auto;scrollbar-width:thin;
  border-top:1px solid rgba(30,111,224,.5);padding-top:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em}
.ed-log .lg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;
  min-width:0;overflow-wrap:anywhere;color:var(--blue-dim);text-shadow:var(--sh-micro)}
.ed-log .lg .t{color:var(--blue-hot)}
.ed-log .lg.ok{color:var(--green)}
.ed-log .lg.no{color:var(--red)}
.ed-log .lg.wait,.ed-log .lg.warn{color:var(--amber)}

/* =========================================================================
   8. THE PICKER
   -------------------------------------------------------------------------
   editor.mjs opens it with `.classList.add('on')` AND `removeAttribute
   ('hidden')`, and closes it with the exact reverse. `.ed-picker.on` and
   `.ed-picker[hidden]` are both (0,2,0); the `[hidden]` rule is written AFTER,
   so it wins the tie. Ship them in the other order and every closed picker
   covers the page.
   ========================================================================= */
.ed-picker{position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(1,4,10,.76);backdrop-filter:blur(3px)}
.ed-picker.on{display:flex}
.ed-picker[hidden]{display:none}

.ed-picker-box{display:flex;flex-direction:column;min-width:0;
  width:min(580px,100%);max-height:min(86vh,780px);padding:15px;
  border:1px solid var(--rule);background:rgba(1,6,16,.975);
  box-shadow:0 0 0 1px rgba(1,5,11,.9),0 30px 80px -30px #000,
             inset 0 0 60px -34px rgba(75,180,252,.8)}
.pk-head{position:relative;margin-bottom:4px;padding-right:30px}
.pk-head h3{margin:0;font-family:var(--wide);font-size:15px;font-weight:560;
  letter-spacing:.09em;color:#79D9FF;text-shadow:var(--sh-body)}
.pk-diet{margin:3px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
/* a dialog closes from its own corner as well as its foot — the list is long
   enough to scroll the CANCEL button out of sight on a short window */
.pk-x{position:absolute;right:-4px;top:-6px;font:inherit;font-size:20px;line-height:1;
  cursor:pointer;padding:2px 8px;color:var(--blue-dim);background:none;border:0;
  transition:color .13s linear}
.pk-x:hover{color:#79D9FF}
.pk-search{display:flex;align-items:center;gap:9px;padding:11px 0 9px}
.pk-search > .k{flex:none}
.pk-search input[type="text"]{flex:1;min-width:0;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;color:#79D9FF;background:rgba(1,4,10,.6);
  border:1px solid rgba(30,111,224,.55);padding:7px 9px;outline:none;
  text-shadow:var(--sh-micro);transition:border-color .15s linear}
.pk-search input[type="text"]:focus{border-color:#79D9FF}
.pk-search input[type="text"]::placeholder{color:var(--blue-dim);opacity:.75}

.pk-list{flex:1;min-height:0;min-width:0;display:grid;gap:5px;align-content:start;
  overflow:auto;scrollbar-width:thin;margin:0 -4px;padding:2px 4px}
.pk-list .hint{padding:12px 2px}

.opt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;
  min-width:0;text-align:left;cursor:pointer;font:inherit;padding:8px 10px;
  background:rgba(3,13,28,.62);border:1px solid rgba(30,111,224,.45);
  transition:border-color .13s linear,background .13s linear}
.opt:hover:not([aria-disabled="true"]){border-color:#79D9FF;background:rgba(12,40,80,.5)}
.opt-n{grid-column:1;font-family:var(--mono);font-weight:600;font-size:12.5px;
  letter-spacing:.05em;color:#79D9FF;text-shadow:var(--sh-body);
  min-width:0;overflow-wrap:anywhere}
.opt-d{grid-column:2;grid-row:1;align-self:center;white-space:nowrap;
  font-family:var(--pixel);font-size:9px;letter-spacing:.17em;
  color:var(--blue-dim);border:1px solid rgba(30,111,224,.55);padding:2px 6px}
/* ★ THE CARNIVORE AND HERBIVORE TAGS ARE GONE WITH THE ROWS THEY MARKED. A
   cross-diet name is no longer rendered at all (his call), so the only tag left
   is ANY DIET — the ones that would still be legal if this animal's diet
   changed — plus the marker on the name already sitting in this position. */
.opt-d.generic{color:var(--blue-dim)}
.opt-d.here{color:var(--ed-accent);border-color:var(--ed-accent)}
.opt-x{grid-column:1 / -1;font-family:var(--read);font-size:11px;line-height:1.6;
  color:var(--blue-dim);text-shadow:var(--sh-micro);min-width:0;overflow-wrap:anywhere}
.opt-w{grid-column:1 / -1;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--red);text-shadow:var(--sh-micro);
  min-width:0;overflow-wrap:anywhere}
.opt.no{cursor:not-allowed;border-style:dashed;border-color:rgba(30,111,224,.34);
  background:rgba(2,8,19,.6)}
.opt.no .opt-n{color:var(--blue-dim);font-weight:400}
.opt.here{border-left:2px solid var(--ed-accent);background:rgba(12,40,80,.45)}
.opt.here .opt-w{color:var(--blue-dim)}

.pk-foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;border-top:1px solid rgba(30,111,224,.5)}

/* =========================================================================
   9. THE LIGHTNING — body[data-subject="live"] AND NOTHING ELSE
   -------------------------------------------------------------------------
   His words: "if someone edits their live dino mut theres like a lightning blue
   theme coming like a lab ... only for live for that. for parked dinos no."
   Everything below is behind that one attribute. A parked animal reaches none
   of it, and the calm bench is the deliberate state, not a broken live one.
   ========================================================================= */
body[data-subject="live"] .ed-plate{
  border-color:rgba(100,230,255,.42);
  background-image:
    repeating-linear-gradient(90deg,rgba(100,230,255,.17) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(180deg,rgba(100,230,255,.09) 0 1px,transparent 1px 30px);
  box-shadow:inset 0 0 0 1px rgba(1,5,11,.75),inset 0 0 80px -30px rgba(100,230,255,.75)}
body[data-subject="live"] .ed-arc{display:block}
body[data-subject="live"] .ed-arc rect{animation:edarc 7.5s linear infinite}
@keyframes edarc{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}

body[data-subject="live"] .cell.on:not([aria-disabled="true"]){
  border-color:rgba(100,230,255,.72);
  box-shadow:0 0 0 1px rgba(1,5,11,.85),inset 0 0 30px -16px rgba(100,230,255,.95),
             0 0 30px -20px var(--ed-live)}
body[data-subject="live"] .fname{color:#8FEEFF}
body[data-subject="live"] .ed-meter .mv{color:#8FEEFF}

/* the one-shot CHARGE. editor.mjs puts `.charged` on the touched cell and
   data-charge="1" on <body> for 900ms after a LIVE write lands, then takes both
   away. Never a permanent strobe - it fires, it settles. */
.cell.charged{animation:edcharge .72s cubic-bezier(.2,.8,.2,1) 1}
@keyframes edcharge{
  0%{box-shadow:0 0 0 1px rgba(1,5,11,.85),0 0 0 0 rgba(100,230,255,.95);
     border-color:#A8F4FF}
  35%{box-shadow:0 0 0 1px rgba(1,5,11,.85),0 0 44px -6px rgba(100,230,255,.95);
     border-color:#A8F4FF}
  100%{box-shadow:0 0 0 1px rgba(1,5,11,.85),0 0 0 0 rgba(100,230,255,0)}}
body[data-charge="1"] .ladder::after{animation:edbolt .72s cubic-bezier(.3,.7,.3,1) 1}
@keyframes edbolt{
  0%{opacity:0;transform:translateX(0)}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;transform:translateX(560%)}}

/* =========================================================================
   10. REDUCED MOTION — every animation dies, every colour stays
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  .ed-arc rect,
  .cell.charged,
  body[data-charge="1"] .ladder::after,
  body[data-subject="live"] .ed-arc rect,
  body[data-subject="live"] .subj[data-kind="live"].on::after{animation:none}
  body[data-charge="1"] .ladder::after{opacity:0}
  .cell,.subj,.opt,.designbtn,.designbtn .db-a,.skincard,
  .ed-meter .mt i,.rung::before,.rung::after{transition:none}
  .cell:hover:not([aria-disabled="true"]),.subj:hover,.designbtn:hover{transform:none}
}

/* =========================================================================
   11. NARROW WIDTHS
   -------------------------------------------------------------------------
   Nothing here may scroll the PAGE sideways. Anything that cannot shrink -
   the subject rail, the option list, the log - scrolls inside its own box,
   and every grid child carries min-width:0 so it is allowed to.
   ========================================================================= */
@media(max-width:900px){
  .ed-meter .mv{font-size:11.5px}
  .rung-n{font-size:9px;letter-spacing:.13em}
}
@media(max-width:620px){
  :root{--ed-well-h:64px}
  .cell{padding:8px 26px 9px 9px}
  .cell::before{width:12px;height:12px;right:8px;top:8px}
  .cell-name{font-size:11px}
  .ed-picker{padding:10px}
  .ed-picker-box{padding:12px;max-height:92vh}
  .ladder{margin-top:14px}
}
@media(max-width:430px){
  .subj{width:min(240px,84vw)}
  .rung-n{display:none}
  .designbtn{gap:9px}
  .db-s{margin-left:0}
}