/* Layout: specimen bench. Orbiting stage left; litter tray, AI notes, shelf and genome right; one column on phones. */
/* `.sheet` sets display:grid; without this, [hidden] loses to the class and modals show on load. */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:root{
  --paper:#E5E9E2; --panel:#F3F5F0; --ink:#1A201E; --muted:#56615C; --rule:#C4CBC2;
  --accent:#2B45AD; --on-accent:#FFFFFF; --stage:#D2D8CF; --scrim:rgba(20,26,24,.45);
  --ai-accent:#A14A22; --on-ai-accent:#FFFFFF; --warn:#A8351B;
  --ch-r:#C4463A; --ch-g:#3A8F52; --ch-b:#3C68CC;
  --f-display:"Gloock","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121614; --panel:#1A201D; --ink:#E1E7E3; --muted:#8E9B95; --rule:#2D3632;
    --accent:#9DAEFF; --on-accent:#0D1432; --stage:#0B0F0D; --scrim:rgba(0,0,0,.62);
    --ai-accent:#E9936A; --on-ai-accent:#2A1206; --warn:#F08A6A;
    --ch-r:#E26A5E; --ch-g:#5FB977; --ch-b:#7495EC; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121614; --panel:#1A201D; --ink:#E1E7E3; --muted:#8E9B95; --rule:#2D3632;
  --accent:#9DAEFF; --on-accent:#0D1432; --stage:#0B0F0D; --scrim:rgba(0,0,0,.62);
  --ai-accent:#E9936A; --on-ai-accent:#2A1206; --warn:#F08A6A;
  --ch-r:#E26A5E; --ch-g:#5FB977; --ch-b:#7495EC; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:2400px;margin:0 auto;padding-block:22px 44px;padding-left:max(clamp(16px, 2.2vw, 48px), env(safe-area-inset-left, 0px));padding-right:max(clamp(16px, 2.2vw, 48px), env(safe-area-inset-right, 0px));display:grid;gap:22px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(30px, 4.6vw, 46px);line-height:1.02}
h2{font-size:21px;line-height:1.15}
h3{font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:500}
h3 .formula{text-transform:none;letter-spacing:.02em;margin-left:10px}
p{margin:0}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;border-bottom:1px solid var(--rule);padding-bottom:16px}
.top .lede{max-width:60ch;color:var(--muted);margin-top:8px}
@media (max-width:600px){.lede-more{display:none}}
.gpu{min-width:0;overflow-wrap:anywhere}

.bench{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.bench{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:start}}
/* Side by side, the stage column sticks so the specimen stays in view while you edit genes. The square stage
   shrinks to fit the viewport height (minus readout and actions) so the sticky column never overflows. */
@media (min-width:900px) and (min-height:600px){.bench>.col:first-child{position:sticky;top:calc(16px + env(safe-area-inset-top, 0px))}}
@media (min-width:900px){.bench:not(.big) .stage{width:min(100%, calc(100vh - 190px));min-width:320px;margin-inline:auto}}
/* Wide screens: three columns (stage | litter | shelf, genome, AI breeder) instead of empty margins.
   The litter sticks beside the stage while the right column scrolls. */
@media (min-width:1500px){
  .bench:not(.big){grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);column-gap:32px}
  .bench:not(.big) .breed{grid-template-columns:minmax(0,1.1fr) minmax(320px,0.9fr);grid-template-rows:auto 1fr;column-gap:32px;align-items:start}
  .bench:not(.big) .litter-block{grid-column:1;grid-row:1 / span 2}
  .bench:not(.big) .keepers,.bench:not(.big) .curator{grid-column:2}
}
@media (min-width:1500px) and (min-height:600px){.bench:not(.big) .litter-block{position:sticky;top:calc(16px + env(safe-area-inset-top, 0px))}}
.col{display:grid;gap:14px;min-width:0}

.stage{position:relative;container-type:inline-size;width:100%;max-width:100%;aspect-ratio:1/1;background:var(--stage);overflow:hidden;outline:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.stage canvas.grabbing{cursor:grabbing}
.stage:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent)}
.plate{position:absolute;left:12px;bottom:12px;display:grid;gap:2px;padding:7px 10px 8px;background:var(--panel);border:1px solid var(--rule);pointer-events:none;max-width:calc(100% - 24px)}
/* Brief ring when a new parent is adopted. */
.plate.pulse{animation:plate-pulse .9s ease-out}
@keyframes plate-pulse{from{box-shadow:0 0 0 3px var(--accent)}to{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion: reduce){.plate.pulse{animation:none}}
.plate .id{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.06em}
.plate .kind{font-family:var(--f-mono);font-size:10px;color:var(--muted);letter-spacing:.06em}
.hint{position:absolute;right:12px;top:10px;color:var(--muted);pointer-events:none;transition:opacity .6s}
.hint.gone{opacity:0}
.stage-busy{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb, var(--stage) 55%, transparent);color:var(--muted);pointer-events:none}
.stage-busy span{animation:busy 1.4s ease-in-out infinite}
.stage-busy.err{color:var(--warn)}
.stage-busy.err span{animation:none}
@keyframes busy{50%{opacity:.4}}
@media (prefers-reduced-motion: reduce){.stage-busy span{animation:none}}
.stage-tip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 12px;background:var(--panel);border:1px solid var(--rule);border-radius:4px;color:var(--ink);pointer-events:none;white-space:nowrap}
.stage-msg{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted)}
.stage-msg pre{white-space:pre-wrap;text-align:left;font:11px/1.5 var(--f-mono);max-height:100%;overflow:auto}
.readout{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;color:var(--muted)}
.readout span{white-space:nowrap}
/* Lineage strip: recent parents as small chips, newest on the right. The list is newest-first in the DOM and laid out
   row-reverse, so when it outgrows the column it scrolls sideways with the newest end in view. */
.lineage{min-width:0}
.lineage ol{list-style:none;margin:0;padding:3px 3px 5px;display:flex;flex-direction:row-reverse;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:thin}
.lineage li{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.lineage li+li::after{content:"\203A";color:var(--muted);font-size:12px}
.lin{appearance:none;font:500 10.5px/1 var(--f-mono);letter-spacing:.04em;color:var(--muted);background:var(--panel);border:1px solid var(--rule);border-radius:999px;padding:5px 8px;cursor:pointer;white-space:nowrap}
.lin:hover{color:var(--ink);border-color:var(--muted)}
.lin:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lin-cur{margin-right:auto;font:500 10.5px/1 var(--f-mono);letter-spacing:.04em;color:var(--ink);white-space:nowrap}
@media (pointer:coarse){.lin{padding:8px 10px}}
/* While a thumbnail is previewed on the stage, the plate is outlined so it is clear this is not the parent. */
.stage.previewing .plate{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.stage:fullscreen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto}
.stage:-webkit-full-screen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto}
.zoomer{max-width:calc(100% - 20px);position:absolute;right:12px;bottom:12px;display:flex;gap:6px;align-items:center;padding:5px;background:var(--panel);border:1px solid var(--rule);border-radius:999px}
.zoomer .btn{padding:7px 11px}
.zoomer .zb{width:32px;height:32px;padding:0;justify-content:center;font-size:18px}
.zb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zb[aria-pressed]::before{display:none}
.zb[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:transparent}
#zFull .fs-on,#zFull[aria-pressed="true"] .fs-off{display:none}
#sound .snd-on,#sound[aria-pressed="true"] .snd-off{display:none}
#sound[aria-pressed="true"] .snd-on{display:inline}
/* On but waiting for the first interaction (browsers block audio until then). */
#sound.armed[aria-pressed="true"]{opacity:.6}
#sound[aria-busy="true"]{cursor:progress;animation:busy 1.1s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){#sound[aria-busy="true"]{animation:none;opacity:.6}}
.zoomer .vol{width:84px;height:22px;margin:0 6px 0 2px;accent-color:var(--accent)}
#zFull[aria-pressed="true"] .fs-on{display:inline}
.zsep{width:1px;align-self:stretch;background:var(--rule);margin:4px 1px}
@media (pointer:coarse){.zoomer .zb{width:40px;height:40px}}
/* Seven controls on a phone-width stage: slightly smaller targets keep the pill on one row. */
@container (max-width:420px){.zoomer{gap:4px;padding:4px}.zoomer .zb{width:36px;height:36px}}
@media (max-width:600px){.zoomer{top:10px;left:10px;right:auto;bottom:auto}.hint{display:none}}
/* Narrow stage (e.g. 1024 px window, side-by-side): plate and zoomer would touch along the bottom edge. */
@container (max-width:520px){.zoomer{top:10px;right:10px;left:auto;bottom:auto}.hint{display:none}.zoomer .vol{display:none}.zsep{display:none}}
.breed,.litter-block,.keepers{display:grid;gap:14px;min-width:0}
.btn.only-wide,.sep.only-wide{display:none}
@media (min-width:700px){
  .btn.only-wide{display:inline-flex}
  .sep.only-wide{display:block}
  .bench.big .stage{aspect-ratio:auto;height:clamp(420px, calc(100vh - 120px), 1600px)}
}
.bench.big{grid-template-columns:minmax(0,1fr)}
.bench.big>.col:first-child{position:static}
@media (min-width:900px){.bench.big .litter{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1100px){
  .bench.big .breed{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start}
  .bench.big .litter-block{grid-column:1/-1}
  .bench.big .keepers,.bench.big .curator{padding-top:14px;border-top:1px solid var(--rule)}
}

.actions{display:flex;flex-wrap:wrap;gap:6px}
.btn{appearance:none;font:500 13px/1 var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:999px;padding:9px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--muted)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.btn-primary:hover{border-color:transparent;filter:brightness(1.08)}
.btn-ai-accent{background:var(--ai-accent);color:var(--on-ai-accent);border-color:transparent}
.btn-ai-accent:hover{border-color:transparent;filter:brightness(1.08)}
.btn[aria-pressed]::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--muted)}
.btn[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary.is-kept{background:var(--panel);color:var(--ink);border-color:var(--accent)}
.btn-primary.is-kept:hover{filter:none}
.sep{display:none}
@media (min-width:520px){.sep{display:block;width:1px;background:var(--rule);margin:2px 3px}}

.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.sec-head .grow{flex:1 1 auto}
.rate{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.rate input{width:110px;accent-color:var(--accent)}

.turn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 12px;border:1px solid var(--ai-accent);color:var(--ink);background:var(--panel);font-size:14px}
.turn b{color:var(--ai-accent);font-weight:600}

.litter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pup{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;display:grid;gap:6px;text-align:left;color:var(--ink);min-width:0;font:inherit;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pup-frame{position:relative}
.pup canvas{display:block;width:100%;max-width:100%;aspect-ratio:1/1;height:auto;background:var(--stage);border:1px solid var(--rule);transition:border-color .15s,transform .15s}
.pup:hover canvas{border-color:var(--muted)}
.pup:focus-visible{outline:none}
.pup:focus-visible canvas{outline:2px solid var(--accent);outline-offset:2px}
.pup:active canvas{transform:scale(.985)}
/* Canvas still shows the previous litter until its render job runs. */
.pup.pending canvas{opacity:.35}
.pup.pending .pup-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:pending 1.1s linear infinite}
@keyframes pending{from{background-position:-100% 0}to{background-position:200% 0}}
@media (prefers-reduced-motion: reduce){.pup.pending .pup-frame::after{animation:none;background:var(--rule)}}
.pup.picked canvas{border-color:var(--ai-accent);box-shadow:inset 0 0 0 1px var(--ai-accent)}
.badge{position:absolute;left:6px;top:6px;font:500 10px/1 var(--f-mono);letter-spacing:.05em;background:var(--ai-accent);color:var(--on-ai-accent);padding:4px 6px}
.pup-meta{display:flex;justify-content:space-between;gap:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);min-width:0}
.pup-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pup-op{color:var(--accent)}
.pup-op.by-ai{color:var(--ai-accent)}
/* Phones: the mutation label becomes a chip on the thumbnail so the tag is not truncated. */
@media (max-width:480px){
  .pup{position:relative}
  .pup .pup-op{position:absolute;top:5px;right:5px;padding:3px 5px;background:var(--panel);border:1px solid var(--rule);font-size:9.5px;line-height:1;max-width:calc(100% - 10px)}
}

.curator{display:grid;gap:12px;padding:0 0 4px}
.cur-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.field{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
select{font:500 13px/1.2 var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:7px 8px;max-width:100%}
select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cur-body{display:grid;gap:12px}
.cur-set{border:1px solid var(--rule);background:var(--panel)}
.cur-set>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:9px 12px;font-size:13.5px}
.cur-set>summary::-webkit-details-marker{display:none}
.cur-set>summary::after{content:"+";margin-left:auto;color:var(--muted)}
.cur-set[open]>summary::after{content:"\2212"}
.cur-set>summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cs-s{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 16px;padding:4px 12px 12px}
.set-grid .field{min-width:0}
.set-grid .field select{flex:1 1 auto;min-width:0}
.set-grid .field.wide{grid-column:1/-1}
.set-grid .field.check{gap:6px}
.tin{flex:1 1 auto;min-width:0;font:12px var(--f-mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:8px 10px;border-radius:4px}
.tin:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.set-note{padding:0 12px 12px;font-size:13px;color:var(--muted);max-width:72ch}
.set-note.warn{color:var(--warn)}
.reset-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.reset-row p{flex:1 1 260px;font-size:13px;min-width:0}
.keybox{display:grid;gap:8px;padding:12px;border:1px dashed var(--rule);font-size:13.5px}
.keybox .krow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.keybox input[type=password]{flex:1 1 220px;min-width:0;font:12px var(--f-mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:8px 10px;border-radius:4px}
.log-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.log-head .log-n{margin-left:6px;color:var(--muted)}
.cur-log{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cur-log li{display:grid;gap:4px;padding-left:12px;border-left:2px solid var(--ai-accent)}
.cur-log li.plain{border-left-color:var(--rule)}
.cur-log details>summary{list-style:none;cursor:pointer;display:grid;gap:3px;border-radius:2px}
.cur-log details>summary::-webkit-details-marker{display:none}
.cur-log details>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cur-log details>summary:hover .crit{color:var(--ink)}
.cur-log .nbody{display:grid;gap:4px;padding-top:4px}
.cur-log .lh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;color:var(--muted)}
.cur-log .h1::before{content:"\25B8";display:inline-block;width:1.2em;color:var(--ai-accent)}
.cur-log details[open] .h1::before{content:"\25BE"}
.cur-log .crit{font-size:14.5px}
.cur-log details:not([open]) .crit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:13.5px}
.cur-log .taste{font-size:13.5px;color:var(--muted)}
.cur-log .child{font:10.5px/1.5 var(--f-mono);color:var(--muted);overflow-wrap:anywhere}
.warn{color:var(--warn)}

.shelf{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.kept{position:relative;flex:0 0 auto;width:76px;display:grid;gap:4px}
.kept-open{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:grid;gap:4px;color:var(--muted);font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-align:left}
.kept-open canvas{width:76px;height:76px;display:block;background:var(--stage);border:1px solid var(--rule)}
.kept-open:hover canvas{border-color:var(--muted)}
.kept-open:focus-visible canvas{outline:2px solid var(--accent);outline-offset:2px}
.kept-del{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:1px solid var(--rule);background:var(--panel);color:var(--muted);font:14px/1 var(--f-body);cursor:pointer;display:grid;place-items:center;padding:0}
.kept-del:hover{color:var(--ink);border-color:var(--muted)}
@media (pointer:coarse){.kept-del{width:30px;height:30px;top:2px;right:2px}}
.empty{color:var(--muted);font-size:13.5px;max-width:60ch}

.genome{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.genome>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;padding:14px 0}
.genome>summary::-webkit-details-marker{display:none}
.genome>summary::after{content:"+";margin-left:auto;font:400 20px/1 var(--f-body);color:var(--muted)}
.genome[open]>summary::after{content:"\2212"}
.genome>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.genome-body{display:grid;gap:22px;padding-bottom:18px}
.group{display:grid;gap:10px;min-width:0}
.group-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
textarea.formula{width:100%;min-height:120px;resize:vertical;font:11.5px/1.6 var(--f-mono);color:var(--ink);background:var(--panel);border:1px solid var(--rule);padding:10px;border-radius:4px;white-space:pre;overflow:auto}
textarea.formula.short{min-height:52px}
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.apply-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ref summary{cursor:pointer;color:var(--accent);font-size:13px}
.lang-ref{margin-top:8px;max-height:260px;overflow:auto;border:1px solid var(--rule);background:var(--panel);border-radius:4px;padding:8px 12px;outline:none}
.lang-ref:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lang-ref dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 16px;margin:0;font-size:12.5px;line-height:1.45}
.lang-ref dt{font:11px/1.6 var(--f-mono);color:var(--ink);white-space:nowrap}
.lang-ref dt.span{grid-column:1/-1;white-space:normal}
.lang-ref dd{margin:0;color:var(--muted);min-width:0}
@media (max-width:480px){.lang-ref dl{grid-template-columns:minmax(0,1fr);gap:0}.lang-ref dt{margin-top:7px;white-space:normal;overflow-wrap:anywhere}.lang-ref dt:first-child{margin-top:0}}
.sliders{display:grid;gap:6px}
.row{display:grid;grid-template-columns:8.6em minmax(0,1fr) 5.6em;align-items:center;gap:10px;font-size:13px}
.row.idle>:first-child,.row.idle input[type=range],.row.idle output,.row.idle .seg{opacity:.45}
.seg-row .seg{grid-column:2/-1}
.seg{display:inline-flex;flex-wrap:wrap;justify-self:start;border:1px solid var(--rule);border-radius:999px;background:var(--panel);padding:2px;gap:2px}
.seg label{position:relative;display:inline-flex}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{padding:5px 11px;border-radius:999px;font-size:12.5px;line-height:1.2;color:var(--muted)}
.seg label:hover span{color:var(--ink)}
.seg input:checked+span{background:var(--accent);color:var(--on-accent)}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.kbd-hint{font-size:10px}
textarea[aria-invalid="true"]{border-color:var(--warn)}
.row output{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
input[type=range]{width:100%;min-width:0;accent-color:var(--accent);margin:0;height:22px}
.strip{height:18px;border:1px solid var(--rule)}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.preset{appearance:none;height:22px;border:1px solid var(--rule);border-radius:4px;padding:0;cursor:pointer}
.preset:hover{border-color:var(--muted)}
.preset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.preset{height:32px}}
.palgrid{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:4px 10px;align-items:center;font-size:12px}
.palgrid .ph{font-family:var(--f-mono);font-size:10px;color:var(--muted);letter-spacing:.08em}
.palgrid .pl{font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap}
.palgrid input.r{accent-color:var(--ch-r)} .palgrid input.g{accent-color:var(--ch-g)} .palgrid input.b{accent-color:var(--ch-b)}
.code-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center}
.code-row label{grid-column:1/-1;font-size:13px;color:var(--muted)}
.code-row input{min-width:0;width:100%;font:11px/1.2 var(--f-mono);color:var(--ink);background:var(--panel);border:1px solid var(--rule);padding:9px 10px;border-radius:4px}
.code-row input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:480px){.code-row{grid-template-columns:repeat(3,auto);justify-content:start}.code-row input{grid-column:1/-1}}

footer{color:var(--muted);font-size:13px;display:grid;gap:10px;max-width:80ch}
footer a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
footer a:hover{text-decoration-thickness:2px}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px}
.footer-repo{display:inline-flex;color:var(--ink);line-height:0}
.footer-repo:hover{color:var(--accent)}
.footer-meta .theme{margin-left:auto}
.sheet a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}

/* .sheet is a modal <dialog> filling the viewport; the panel inside is the visible sheet and the backdrop is the scrim. */
.sheet{position:fixed;inset:0;z-index:20;margin:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:transparent;color:inherit;place-items:center;padding-top:calc(16px + env(safe-area-inset-top, 0px));padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.sheet[open]{display:grid}
.sheet::backdrop{background:var(--scrim)}
a.btn{text-decoration:none}
.sheet a.btn{color:var(--ink)}
.sheet-panel{background:var(--panel);color:var(--ink);border:1px solid var(--rule);width:min(720px, 100%);max-height:100%;overflow:auto;padding:18px;display:grid;gap:14px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.progress{height:4px;background:var(--rule)}
.progress .bar{height:100%;width:0;background:var(--accent);transition:width .1s}
.sheet-panel.wide{width:min(1440px, 100%)}
.viewer{position:relative;height:min(74vh, 980px);background:var(--stage);overflow:hidden;touch-action:none;cursor:grab;outline:none;border:1px solid var(--rule);user-select:none;-webkit-user-select:none}
.viewer.grabbing{cursor:grabbing}
.viewer:focus-visible{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.vw-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.vw-stage > *{display:block;width:100%;height:100%;max-width:none;pointer-events:none}
.vw-stage.px > *{image-rendering:pixelated}
.vw-bar{position:absolute;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:5px;background:var(--panel);border:1px solid var(--rule);border-radius:999px;cursor:default}
.vw-btn{width:32px;height:32px;padding:0;justify-content:center;font-size:18px}
.vw-z{min-width:6.5em;text-align:center;color:var(--muted)}
@media (max-width:600px){.viewer{height:62vh}.vw-bar{left:10px;right:10px;justify-content:center}}
.snap-opts{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.sheet textarea{width:100%;min-height:260px;resize:vertical;font:11px/1.55 var(--f-mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:10px;border-radius:4px}
.sheet-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom, 0px));z-index:30;background:var(--ink);color:var(--paper);padding:10px 16px;font-size:13.5px;max-width:min(92vw, 520px);border-radius:4px;display:flex;align-items:center;gap:14px}
.toast-act{appearance:none;background:none;border:0;padding:4px 2px;margin:-4px 0;font:600 13.5px/1 var(--f-body);color:var(--paper);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.toast-act:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

.linkish{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;cursor:pointer}
.linkish:hover{text-decoration-thickness:2px}
.linkish:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.keys{background:var(--panel);color:var(--ink);border:1px solid var(--rule);padding:18px;width:min(440px, calc(100vw - 32px));gap:14px}
.keys[open]{display:grid}
.keys::backdrop{background:var(--scrim)}
.keys-list{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:14px;align-items:baseline}
.keys-list dt{white-space:nowrap;color:var(--muted)}
.keys-list dd{margin:0}
kbd{font:500 11px/1 var(--f-mono);padding:3px 6px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;background:var(--paper);color:var(--ink)}