/* Layout: the code editor is the playfield (bugs crawl in it), primary actions sit under it; unlockable panels stack in a side column that grows as Arc I progresses. Plain-text, Paperclips-minimal, review-approve green as the one accent. */
:root{
  --feat:#5fae1f;
  --bg:#eceef2; --surface:#f8f9fb; --ink:#1a1f2b; --muted:#5c6575; --line:#d3d8e1;
  --accent:#1d7a46; --accent-ink:#ffffff; --accent-soft:#d9eee1; --card:#f1f3f6; --raised:#ffffff;
  --bug:#b23f28; --editor:#f3f5f8; --gutter:#9aa2b0; --kw:#7a3db8; --str:#9a5b12; --cmt:#7d8696; --warn:#9a6200;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13161c; --surface:#1a1e26; --ink:#e3e6ed; --muted:#9aa3b3; --line:#2b313c;
    --feat:#a6e34a; --accent:#45bb76; --accent-ink:#08170e; --accent-soft:#183324; --card:#171a21; --raised:#232833;
    --bug:#ff7b5e; --editor:#0e1116; --gutter:#4d5563; --kw:#c69dff; --str:#e5b46c; --cmt:#6c7586; --warn:#e3a73c;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#13161c; --surface:#1a1e26; --ink:#e3e6ed; --muted:#9aa3b3; --line:#2b313c;
  --feat:#a6e34a; --accent:#45bb76; --accent-ink:#08170e; --accent-soft:#183324; --card:#171a21; --raised:#232833;
  --bug:#ff7b5e; --editor:#0e1116; --gutter:#4d5563; --kw:#c69dff; --str:#e5b46c; --cmt:#6c7586; --warn:#e3a73c;
  color-scheme:dark;
}
*{box-sizing:border-box} [hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--sans);-webkit-tap-highlight-color:transparent}
.app{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:16px 24px;display:grid;gap:16px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"top top" "side play"}
.topbar{grid-area:top;position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);display:grid;gap:8px;padding-block:10px 0;margin-block:-16px 0;padding-top:16px;box-shadow:0 8px 12px -12px color-mix(in srgb,var(--ink) 30%,transparent)}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:12px}
.word{font:800 26px/1 var(--mono);letter-spacing:-.02em}
.word i{font-style:normal;color:var(--accent)}
.arc{font:500 12px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.headr{display:flex;align-items:center;gap:12px}
.btn.mini{padding:4px 8px;font:500 11px var(--mono)}
.clock{display:none}   /* the in-game clock still drives standups and payroll; players do not need to watch it */
.stats{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:flex-end;padding-block:4px 10px;border-bottom:1px solid var(--line)}
.stat{display:grid;gap:2px;min-width:9.5em}
.stat.big{min-width:10.5em}   /* fixed minimums: changing numbers do not push their neighbours around */
.lbl{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.val{font:600 20px/1.1 var(--mono);font-variant-numeric:tabular-nums}
.stat.big .val{font-size:34px;font-weight:800}
.sub{font:400 11px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.sub.hot{color:var(--bug)} .sub.good{color:var(--accent)}
.play{grid-area:play;display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--topH,140px) + 12px);align-self:start;min-width:0}
.side{grid-area:side;display:flex;flex-direction:column;gap:12px;min-width:0}
.foot{max-width:1180px;margin:0 auto;padding:0 16px 48px;display:flex;gap:12px;align-items:center;color:var(--muted);font-size:12px;flex-wrap:wrap}
.editor{position:relative;height:280px;overflow:hidden;background:var(--editor);border:1px solid var(--line);border-radius:6px;font:400 12px/18px var(--mono);user-select:none;-webkit-user-select:none}
.tabbar{position:absolute;top:0;left:0;right:0;height:26px;display:flex;align-items:center;gap:8px;padding-inline:10px;border-bottom:1px solid var(--line);background:var(--surface);font:500 11px var(--mono);color:var(--muted);z-index:1}
.tabbar b{color:var(--ink);font-weight:600}
.lines{position:absolute;left:0;right:0;bottom:6px;display:flex;flex-direction:column}
.ln{display:grid;grid-template-columns:52px minmax(0,1fr);white-space:pre;overflow:hidden}
.ln .n{color:var(--gutter);text-align:right;padding-right:12px;font-variant-numeric:tabular-nums}
.ln .c{overflow:hidden;text-overflow:ellipsis}
.k{color:var(--kw)} .s{color:var(--str)} .cm{color:var(--cmt);font-style:italic} .todo{color:var(--warn);font-weight:600}
.bugs{position:absolute;inset:26px 0 0 0}
.editor.has-interns .lines{bottom:38px}
.lasers{position:absolute;inset:26px 0 0 0;width:100%;height:calc(100% - 26px);pointer-events:none;overflow:visible}
.lasers line{stroke:var(--accent);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--accent));animation:zap .2s ease-out forwards}
.lasers circle{fill:var(--accent);animation:zap .25s ease-out forwards}
@keyframes zap{from{opacity:1}to{opacity:0}}
.interns{position:absolute;left:0;right:0;bottom:0;height:36px;pointer-events:none;border-top:1px dashed var(--line);background:color-mix(in srgb,var(--editor) 85%,transparent)}
.intern{position:absolute;bottom:2px;width:22px;height:32px;color:var(--ink);animation:bob 1.6s ease-in-out infinite}
.intern.run{animation:run .18s steps(2) infinite}
@keyframes run{50%{transform:translateY(-3px) rotate(6deg)}}
.intern:nth-child(2n){animation-delay:-.8s}
.intern svg{width:22px;height:32px;display:block;overflow:visible}
.intern.fire svg{transform:translateY(1px)}
.interns .more{position:absolute;right:6px;bottom:4px;font:700 10px var(--mono);color:var(--muted)}
@keyframes bob{50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion: reduce){ .intern{animation:none} .lasers line,.lasers circle{animation-duration:.3s} }
.bug{position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--bug);cursor:crosshair;touch-action:manipulation}
.bug .bd{display:grid;place-items:center;transition:none;will-change:transform}
.bug svg{width:22px;height:22px;overflow:visible;animation:bwob calc(var(--gait,.15s) * 2) ease-in-out var(--ph,0s) infinite alternate}
.bug .tag{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font:700 10px var(--mono);color:var(--bug);background:var(--editor);padding:0 3px;border-radius:3px;pointer-events:none}
.bug .hpbar{opacity:0;transition:opacity .2s;position:absolute;left:15%;right:15%;top:0;height:3px;background:color-mix(in srgb,var(--bug) 25%,transparent);border-radius:2px;pointer-events:none}
.bug .hpbar i{display:block;height:100%;width:100%;background:var(--bug);border-radius:2px}
.bug.t2,.bug.t3{filter:saturate(1.3) brightness(.85)}
.bug.t4,.bug.t5,.bug.t6{filter:saturate(1.6) brightness(.7)}
.bug:focus-visible{outline:2px solid var(--bug);border-radius:50%}
/* walking: two leg sets swing alternately around their joints (tripod gait); --gait follows ground speed */
.bug .la,.bug .lb{transform-box:view-box}
.bug .la{animation:lega var(--gait,.15s) ease-in-out var(--ph,0s) infinite alternate}
.bug .lb{animation:lega var(--gait,.15s) ease-in-out var(--ph,0s) infinite alternate-reverse}
@keyframes lega{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes bwob{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.bug .ant{transform-box:view-box;transform-origin:5px 12px;animation:twitch 1.7s ease-in-out var(--ph,0s) infinite}
@keyframes twitch{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-12deg)}86%{transform:rotate(9deg)}}
/* eating: standing still, so the legs stop; the head dives in and chews, the antennae keep feeling around */
.bug.eat .la,.bug.eat .lb{animation:none}
.bug.eat svg{animation:munch .28s ease-in-out var(--ph,0s) infinite alternate}
@keyframes munch{from{transform:translateX(0) scale(1,1)}to{transform:translateX(-2.5px) scale(1.06,.92)}}
.bug.eat .ant{animation-duration:.6s}
/* spawn, hit, merge */
.bug.spawn .bd{animation:bspawn .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes bspawn{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.bug.hit svg{animation:bhit .18s ease-out}
@keyframes bhit{0%{filter:brightness(1)}35%{filter:brightness(2.2);transform:scale(.8) rotate(12deg)}100%{filter:brightness(1)}}
.bug.dying{pointer-events:none}
.bug.dying .bd{animation:bdie .22s ease-in forwards}
@keyframes bdie{to{opacity:0;scale:1.5 .2}}
.bug.merging{transition:transform .25s ease-in,opacity .25s ease-in;opacity:.2}
/* the splat as it always looked, now splashing out: a quick spread with a bright start */
.splat{position:absolute;width:30px;height:30px;color:var(--bug);opacity:.55;pointer-events:none;transition:opacity 10s linear;transform:rotate(var(--rot,0deg));animation:splash .3s ease-out}
@keyframes splash{0%{scale:.25;opacity:1}60%{scale:1.08;opacity:.8}100%{scale:1;opacity:.55}}
.splat.fade{opacity:0}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{font:600 13px/1.2 var(--sans);padding:9px 14px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn small{font:500 11px var(--mono);color:var(--muted)}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.primary small{color:var(--accent-ink);opacity:.8}
.btn.big{min-height:52px;flex:1 1 140px;justify-content:center;font-size:15px;white-space:normal;text-align:center}
.btn.danger{color:var(--bug)}
.log{font:400 12px/1.5 var(--mono);color:var(--muted);height:168px;overflow:auto;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:2px}
.log p{margin:0}
.log p.new{color:var(--ink)}
.log p.reward{color:var(--gutter)}
.log time{color:var(--gutter);margin-right:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:grid;gap:12px}
.card.fresh{animation:arrive 1.6s ease-out}
@keyframes arrive{from{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}to{border-color:var(--line);box-shadow:0 0 0 0 transparent}}
.card h2{margin:0;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.card h2{justify-content:flex-start;align-items:center}
.card h2 > span:not(.newpill){text-transform:none;letter-spacing:0;font-weight:400;margin-left:auto}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.meta{min-width:0;flex:1 1 180px;display:grid;gap:1px}
.meta b{font-weight:600}
.meta small{color:var(--muted);font-size:12px}
.rows{display:grid;gap:6px}
.side > section{position:relative}   /* rows measure their offsetTop against their card, whether or not the card is mid-glide */
.prwrap{display:grid;gap:6px;align-content:start;overflow:hidden;transition:height .35s ease}
@media (prefers-reduced-motion: reduce){.prwrap{transition:none}}
#ossExtra:not(:empty){margin-top:6px}
body{font-variant-numeric:tabular-nums}
.side .row{padding:8px 10px;margin-inline:-10px;border:1px solid transparent;border-radius:6px;transition:background .25s,border-color .25s,box-shadow .25s}
.side .row.ready{background:var(--raised);border-color:var(--line);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent)}
.side .row.ready .btn{border-color:var(--accent)}
.brow{position:relative}
.brow .meta b,.brow .meta small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .paid{position:absolute;right:110px;top:50%;transform:translateY(-50%);font:700 13px var(--mono);color:var(--accent);opacity:0;pointer-events:none}
.brow.accepted{animation:accept .7s ease-out forwards}
.brow.accepted .paid{opacity:1}
.brow.accepted .btn{background:var(--accent);color:var(--accent-ink);border-color:transparent;opacity:1}
/* the row stays put: it flashes, its job slides out and the next job slides in (an empty gap read as a broken board) */
@keyframes accept{0%,28%{background:var(--accent-soft);box-shadow:0 0 0 6px var(--accent-soft)}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
.brow.accepted .meta{animation:metaout .7s ease-in forwards}
@keyframes metaout{0%,35%{opacity:1;transform:none}100%{opacity:0;transform:translateX(14px)}}
.brow.enter .meta,.brow.enter .btn{animation:benter .3s ease-out}
.side .row.pr.is-new,.side .row.emp.is-new{animation:newpulse 1.2s ease-out 3;border-color:var(--accent);background:var(--accent-soft)}
@keyframes benter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.is-new{animation:newpulse 1.2s ease-out 3}
.card.is-new,.side .row.is-new{border-color:var(--accent)}
.stat.is-new{animation:none}
.stat.is-new .val,.stat.is-new .lbl{color:var(--accent);transition:color 2s}
@keyframes newpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.newpill{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;vertical-align:2px}
.toast.alert .k{background:var(--bug)}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;z-index:70;width:min(calc(100vw - 32px),380px)}
.toast{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--ink);color:var(--bg);border:0;border-radius:8px;padding:11px 14px;font:600 14px var(--sans);box-shadow:0 8px 24px rgb(0 0 0 / .28);cursor:pointer;animation:toastin .3s ease-out}
.toast .k{font:700 10px var(--mono);letter-spacing:.08em;color:var(--accent-ink);background:var(--accent);padding:2px 7px;border-radius:999px}
.toast .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast .go{font:500 11px var(--mono);opacity:.75}
.toast.out{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
@keyframes toastin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.story{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border:2px solid var(--accent);border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.story-text{flex:1 1 240px;min-width:0;display:grid;gap:3px}
.story-k{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.story-text b{font:800 17px var(--mono)}
.story-text span#storyDesc{font:500 13px var(--sans);color:var(--ink)}
.story .pbar{margin-top:4px}
.btn.story-btn{min-height:46px;font-size:14px}
.story.ready{animation:newpulse 1.2s ease-out 3}
.story.is-new{border-color:var(--accent)}
.gate .story-text b{font-size:22px}
.gate-bars{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;margin-top:6px;font:500 12px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.gate-bars .pbar{height:8px;border-radius:4px}.gate-bars .pbar i{border-radius:4px;transition:width .3s}
.gate-cost{font:400 12px var(--sans);color:var(--bug)}
.gate-bars .gv{color:var(--ink);text-align:right}
.gate.ready{animation:gateglow 2s ease-in-out infinite;background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.gate.ready .story-btn{font-size:16px;min-height:52px;padding-inline:22px}
@keyframes gateglow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 10px transparent}}
.rewrite{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);transition:background .4s,border-color .4s}
.rewrite.alarm{border:2px solid var(--bug);background:color-mix(in srgb,var(--bug) 10%,var(--surface));padding:13px 15px}
.rewrite.alarm.is-new{border-color:var(--bug);animation:rwpulse 1.1s ease-out 4}
@keyframes rwpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bug) 55%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
.rw-text{flex:1 1 220px;min-width:0;display:grid;gap:2px}
.rw-text b{font:700 13px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.rewrite.alarm .rw-text b{font-weight:800;color:var(--bug)}
.rw-text span{font:500 13px var(--sans);color:var(--muted)}
.rewrite.alarm .rw-text span{font-weight:600;color:var(--ink)}
.rw-text small{color:var(--muted);font-size:12px}
.btn.rw-btn{color:var(--bug);min-height:40px}
.rewrite.alarm .btn.rw-btn{background:var(--bug);color:var(--surface);border-color:transparent}
.btn.rw-btn:hover:not(:disabled){border-color:var(--ink)}
.rw-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1 1 100%}
.rw-opt{display:grid;gap:3px;align-content:start;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.rw-opt .btn{width:100%;margin-bottom:4px}
.rw-rows{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font:400 12px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.rw-rows .h{grid-column:1/-1;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-top:4px}
.rw-rows .v{color:var(--ink);font-family:var(--mono)}
.rw-rows .v.good{color:var(--accent)}.rw-rows .v.bad{color:var(--bug)}
.rw-rows .n{grid-column:2;font-size:11px;margin-top:-2px}
@media (max-width:560px){.rw-opts{grid-template-columns:1fr}}

.split{display:grid;gap:6px;padding:10px;border:1px dashed var(--line);border-radius:6px}
.split-head{display:flex;justify-content:space-between;gap:8px;font:600 12px var(--mono);font-variant-numeric:tabular-nums}
.split-head #splitRef{color:var(--accent)}
.split input{width:100%;accent-color:var(--accent);min-height:28px}
.split small{color:var(--muted);font:400 12px var(--mono);font-variant-numeric:tabular-nums}
.float{position:fixed;left:0;top:0;pointer-events:none;font:600 12px var(--mono);color:var(--accent);white-space:nowrap;z-index:60;animation:rise 1s ease-out forwards}
.float.bugf{color:var(--bug)}
.float.rare{color:var(--warn);font-size:13px}
@keyframes rise{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,calc(-50% - 40px))}}
.modal{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 82%,transparent);display:grid;place-items:center;padding:16px;z-index:80}
.modal .card{max-width:440px;width:100%;gap:14px}
.modal .card.wide{max-width:720px;max-height:calc(100vh - 32px);overflow:auto}
.rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.rs-person{position:relative;display:grid;justify-items:center;gap:2px;padding:8px 4px;border:1px solid var(--line);border-radius:6px;background:var(--surface);transition:opacity .3s,filter .3s}
.rs-person svg{width:22px;height:32px;color:var(--ink)}
.rs-person .face{font-size:16px;line-height:1}
.rs-person b{font:600 11px var(--mono)} .rs-person small{font-size:10px;color:var(--muted);text-align:center}
.rs-person.fired{background:color-mix(in srgb,var(--bug) 6%,var(--surface))}
.rs-person.fired > :not(.stamp){filter:grayscale(1);opacity:.4}
.rs-person .stamp{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);font:800 13px var(--mono);color:var(--bug);border:2px solid var(--bug);padding:1px 5px;border-radius:3px;background:var(--surface)}
.btn.danger:not(:disabled){border-color:var(--bug)}
.logogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.logopick{display:grid;justify-items:center;gap:6px;text-align:center;padding:14px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.logopick:hover,.logopick:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.logopick svg{color:var(--ink)}
.logopick b{font:700 13px var(--mono)}
.logopick small{font-size:12px;color:var(--muted)}
.word svg.logo{vertical-align:-3px;margin-right:6px;color:var(--accent)}
.modal h3{margin:0;font:800 22px var(--mono)}
.modal p{margin:0}
.modal code{font:600 13px var(--mono);color:var(--accent)}
.statsgrid{display:grid;grid-template-columns:auto auto;gap:4px 16px;font:400 12px var(--mono);font-variant-numeric:tabular-nums}
.statsgrid dt{color:var(--muted)} .statsgrid dd{margin:0;text-align:right}
/* Arc II */
body.arc2 .a1only{display:none!important}
body:not(.arc2) .a2only{display:none!important}
.pbar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;flex:1 1 100%}
.pbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}
.pbar.hot i{background:var(--bug)}
.pr .meta b,.pr .meta small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#prList.compact{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
#prList.compact .pr{margin:0;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);display:grid;gap:6px;align-content:start}
#prList.compact .pr .meta{flex:none}
#prList.compact .pr .meta b{font-size:12px}
#prList.compact .pr .meta small{font-size:11px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#prList.compact .pr .btns{display:grid}
#prList.compact .pr .btn{padding:5px 6px;font-size:11px;justify-content:center}
#prList.compact .pr.found{border-color:var(--warn)}
.pr .btns{display:flex;gap:6px}
.pr .btn{padding:7px 10px;font-size:12px}
.pr .btn.warn{color:var(--bug)}
.pr.found .meta small{color:var(--bug)}
.more{font:400 12px var(--mono);color:var(--muted)}
.emp{flex-wrap:wrap;row-gap:6px}
.emp .quote{flex:1 1 100%;font:italic 400 12px var(--mono);color:var(--bug)}
.emp .seg.resign button{color:var(--ink)}
.emp .seg.resign button.pay{color:var(--accent)}
.emp .bars{flex:1 1 100%;display:grid;gap:5px}
.bline{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,38%);align-items:center;gap:10px}
.blab{font:400 11px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blab.stress{color:var(--ink)}
.bline .pbar{flex:none}
.pbar.stress i{background:var(--warn)}
.pbar.stress.high i{background:var(--bug)}
.emp .hint{font:400 11px var(--mono);color:var(--muted)}
.deal{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--surface)}
.deal h4{grid-column:1/-1;margin:0;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.deal ul{margin:0;padding-left:16px;font:400 12px/1.5 var(--sans)}
.deal b{font:600 12px var(--mono)}
.deal .get b{color:var(--accent)} .deal .lose b{color:var(--bug)}
@media (max-width:480px){.deal{grid-template-columns:1fr}}
.emp .face{font-size:22px;line-height:1;width:28px;text-align:center}
.emp .meta{flex:1 1 140px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{font:500 11px var(--mono);padding:6px 9px;border:0;background:var(--surface);color:var(--muted);cursor:pointer;touch-action:manipulation}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.side .row.emp.ready,.side .row.pr.ready{background:transparent;border-color:transparent;box-shadow:none}
.person{position:absolute;bottom:2px;width:22px;height:32px;color:var(--ink);transition:left .5s ease}
.person svg{width:22px;height:32px;display:block;overflow:visible}
.person .face{position:absolute;left:50%;bottom:31px;transform:translateX(-50%);font-size:13px;line-height:1}
.person .bl{position:absolute;left:-3px;right:-3px;bottom:-2px;height:3px;background:color-mix(in srgb,var(--bug) 20%,transparent);border-radius:2px;overflow:hidden}
.person .bl i{display:block;height:100%;width:0;background:var(--bug)}
.person.you{color:var(--accent)}
.person.you::after{content:'you';position:absolute;left:50%;top:-30px;transform:translateX(-50%);font:700 9px var(--mono);color:var(--accent)}
.person.hit{animation:hitp .4s ease-out}
.person.newbie{color:var(--accent);filter:drop-shadow(0 0 5px var(--accent))}
@keyframes hitp{30%{transform:translateY(3px) rotate(-8deg)}}
body.arc2 .editor.has-interns .lines{bottom:54px}
body.arc2 #cStory{order:0} body.arc2 #cQueue{order:1} body.arc2 #cAgents2{order:2} body.arc2 #cTeam{order:3} body.arc2 #cDefense{order:4} body.arc2 #cCompany{order:5} body.arc2 #cGate2{order:6}
.std{display:grid;gap:4px}
.std input{width:100%;accent-color:var(--accent);min-height:28px}
.std small{color:var(--muted);font:400 12px var(--mono)}
.newmenu{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---- stability: nothing changes size because a number or a sentence changed ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));align-items:end}
.stat .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stTd{grid-column:span 2}
.emp .hint{min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.emp .meta small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cAdvisor .row{flex-wrap:nowrap}
#bAdvise{flex:none;min-width:84px;justify-content:center}
#advText{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
#rwStatus{min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* the alarm changes colour, never size */
@media (max-width:780px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "play" "side"}
  .stats{gap:6px 18px}
  .stat .val{font-size:16px}
  .stat.big .val{font-size:24px}
  .topbar .word{font-size:20px}
  .play{position:static}
  .editor{height:230px}
}

/* ---- phone layout: bugs and people float over the whole page, the click buttons sit in a bottom dock ---- */
.mob,.field,.dock,.rw-sum{display:none}
.rw-sum{font:400 11px var(--sans);color:var(--muted);margin-top:4px}
.mtog{margin-left:auto;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:4px;padding:2px 7px;cursor:pointer}
body.m .mob{display:flex}
body.m .loghead{align-items:center;gap:8px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:-6px}
body.m .field{display:block;overflow:hidden;position:fixed;left:0;right:0;top:var(--topH,120px);bottom:var(--dockH,68px);pointer-events:none;z-index:30}
body.m .field .bugs{inset:0}
body.m .field .bug{pointer-events:auto}
body.m .field .lasers{inset:0;height:100%}
body.m .field .interns{background:color-mix(in srgb,var(--bg) 90%,transparent);border-top:1px dashed var(--line)}
body.m .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
body.m .dock .actions{flex:1;flex-wrap:nowrap}
body.m .dock .btn.big{min-height:46px;font-size:14px;padding:6px 10px}
body.m .foot{padding-bottom:calc(var(--dockH,68px) + 70px)}
body.m .toasts{bottom:calc(var(--dockH,68px) + 64px)}
body.m .editor{height:104px}
body.m .editor .lines,body.m.arc2 .editor.has-interns .lines,body.m .editor.has-interns .lines{bottom:4px}
body.m.ed-off .editor{height:26px}
body.m.ed-off .editor .lines{display:none}
body.m .log{height:62px;font-size:11px}
body.m .stat,body.m .stat.big{min-width:0}
body.m.log-off .log{display:none}
body.m .app{gap:10px;padding-inline:12px;padding-block:12px 12px}
body.m .topbar{gap:4px;padding-top:10px;margin-top:-12px}
body.m .head .word{font-size:18px}
body.m .stats{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:4px 10px;padding-block:2px 6px}
body.m #stTd{grid-column:1/-1;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline}
body.m #stTd .lbl{grid-column:1/-1}
body.m #stTd .val{grid-row:span 2}
body.m .toasts{gap:6px}
body.m .toast{padding:7px 10px;font-size:12.5px}
body.m .toasts > :nth-last-child(n+3){display:none}
body.m .stat .lbl{font-size:9px}
body.m .stat .val,body.m .stat.big .val{font-size:16px}
body.m .stat .sub{font-size:9.5px;line-height:1.3}
body.m .play,body.m .side{gap:8px}
body.m .card{padding:9px 11px;gap:7px}
body.m .card h2{font-size:10px}
body.m .rows{gap:4px}
body.m .side .row{padding:5px 8px;margin-inline:-8px;gap:8px}
body.m .meta b{font-size:13px}
body.m .meta small{font-size:11px;line-height:1.35}
body.m .btn{padding:7px 10px;font-size:12px}
body.m .story,body.m .rewrite{padding:9px 11px;gap:8px}
body.m .rewrite.alarm{padding:8px 10px}
body.m .story-text b{font-size:15px}
body.m .gate .story-text b{font-size:18px}
body.m .btn.story-btn{min-height:40px;font-size:13px}
body.m .head{flex-wrap:nowrap;gap:8px}
body.m .brand{gap:8px;min-width:0}
body.m .arc{display:none}
body.m .headr{gap:6px;flex:none}
body.m .clock{font-size:10.5px;white-space:nowrap}
body.m #bSound{padding:3px 7px;font-size:11px}
body.m .rw-rows{display:none}
body.m .rw-sum{display:block}
body.m .rw-opts{grid-template-columns:1fr 1fr;gap:6px}
body.m .rw-opt{padding:6px}
body.m .rw-rows{font-size:10.5px;gap:2px 6px}
body.m .rw-text span{font-size:12px}
@media (prefers-reduced-motion: reduce){
  .float{animation:fade 1s forwards}
  @keyframes fade{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-50%)}}
  .bug svg,.bug .la,.bug .lb,.bug .ant,.bug.eat svg,.bug.spawn .bd,.splat{animation:none}
  .card.fresh{animation:none}
  .is-new{animation:none;box-shadow:0 0 0 3px var(--accent-soft)}
  .toast{animation:none}
  @keyframes accept{0%,28%{background:var(--accent-soft)}100%{background:transparent}}
  .brow.accepted .meta,.brow.enter .meta,.brow.enter .btn{animation:none}
}
/* ---- online: save form, leaderboard ---- */
.endonline{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.endonline h4{margin:0;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.endonline h4 span{text-transform:none;letter-spacing:0;font-weight:400}
.sv-lead{margin:0;font-size:13px}
.saveform,.lbform{display:grid;gap:8px}
.sv-row{display:grid;gap:3px;font:600 11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sv-row input{font:400 15px var(--sans);text-transform:none;letter-spacing:0;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:9px 10px;min-width:0}
.sv-row input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.sv-check{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}
.sv-check input{accent-color:var(--accent);width:16px;height:16px}
.sv-msg{font:500 12px var(--sans);min-height:1.4em;color:var(--muted)}
.sv-msg.good{color:var(--accent)} .sv-msg.bad{color:var(--bug)}
.sv-fine{color:var(--muted);font-size:11.5px}
.sv-fine a,.footlink{color:var(--muted)}
.footlink{font-size:12px}
.lbtable table{width:100%;border-collapse:collapse;font:400 12.5px var(--mono);font-variant-numeric:tabular-nums}
.lbtable th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;padding:3px 6px;border-bottom:1px solid var(--line)}
.lbtable td{padding:4px 6px;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbtable .r{text-align:right}
.lbtable tr.me td{background:var(--accent-soft);font-weight:600}
#saveModal .card{position:relative}
.sv-close{position:absolute;top:12px;right:12px}

/* ---------- Arc II people: idle life, jobs, moods, entrances and exits */
.person{animation:breathe 3s ease-in-out var(--ph,0s) infinite}
.person svg{transition:none}
.person .hand,.person .lg1,.person .lg2,.person .hd{transform-box:view-box}
@keyframes breathe{50%{translate:0 -1px}}
.person.r-code .hand{animation:type .2s ease-in-out var(--ph,0s) infinite alternate}
@keyframes type{to{transform:rotate(-9deg)}}
.person.r-code .scr{animation:glow 1.3s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.55}}
.person.r-review .hand{animation:scan 2.4s ease-in-out var(--ph,0s) infinite alternate}
@keyframes scan{from{transform:rotate(-14deg)}to{transform:rotate(10deg)}}
.person.r-review .hd,.person.r-train .hd{animation:nod 3.2s ease-in-out var(--ph,0s) infinite}
@keyframes nod{50%{transform:rotate(7deg)}}
.person.l-hitl .hand{animation:stamp 1.8s ease-in var(--ph,0s) infinite}
@keyframes stamp{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-30deg)}88%{transform:rotate(16deg)}}
.person.l-mkt .hand{animation:hype 1.6s ease-in-out var(--ph,0s) infinite}
@keyframes hype{50%{transform:rotate(-8deg)}}
.person.pitch .hand{animation:shout .12s linear infinite alternate}
@keyframes shout{from{transform:rotate(-4deg)}to{transform:rotate(3deg)}}
.person.walk .lg1{animation:stride .28s ease-in-out infinite alternate}
.person.walk .lg2{animation:stride .28s ease-in-out infinite alternate-reverse}
@keyframes stride{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.person.walk{animation:breathe .28s ease-in-out infinite}
.person.exit svg{scale:-1 1}
.person.exit .bl{display:none}
.person.exit::before{content:'#OpenToWork';position:absolute;left:50%;top:-30px;transform:translateX(-50%);font:700 8px var(--mono);color:#fff;background:var(--accent);padding:1px 4px;border-radius:6px;white-space:nowrap}
.person.frazzled{animation:fraz .09s linear infinite alternate}
@keyframes fraz{from{translate:-.7px 0}to{translate:.7px 0}}
.person.party{animation:jump .45s ease-out 0s 4}
@keyframes jump{40%{translate:0 -9px}}
.person.party .hand{animation:wave .2s linear infinite alternate}
@keyframes wave{from{transform:rotate(-50deg)}to{transform:rotate(-80deg)}}
.rs-person svg{width:22px;height:32px;overflow:visible}
/* Marketing: the wiggly beam, the converting bug, the feature leaving */
.lasers .beam{fill:none;stroke:var(--feat);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 4;filter:drop-shadow(0 0 4px var(--feat));animation:beamflow .4s linear infinite}
@keyframes beamflow{to{stroke-dashoffset:-11}}
.bug.conv .la,.bug.conv .lb{animation:none}
.bug.conv svg{animation:convwob .16s ease-in-out infinite alternate}
@keyframes convwob{from{transform:rotate(-6deg) scale(1)}to{transform:rotate(6deg) scale(1.08)}}
.bug.feat{color:var(--feat)!important;transition:transform 1.3s cubic-bezier(.3,0,.8,.6),opacity 1.3s ease-in}
.bug.feat svg{animation:none;filter:drop-shadow(0 0 6px var(--feat))}
.bug .ftag{position:absolute;left:50%;top:-12px;transform:translateX(-50%);font:700 10px var(--mono);color:var(--feat);white-space:nowrap}
.float.featf{color:var(--feat)}
@media (prefers-reduced-motion: reduce){ .person,.person .hand,.person .hd,.person .lg1,.person .lg2,.person .scr{animation:none!important} .lasers .beam{animation:none} }
.bug.hurt .hpbar{opacity:1}
/* lines written by AI: a ✦ in the gutter */
.ln.ai .n{color:color-mix(in srgb,var(--accent) 75%,var(--gutter))}
.ln.ai .n::before{content:'✦';font-size:9px;margin-right:4px;opacity:.8}
/* the game says its name: the wordmark's dot turns into a thumbs-up for a moment */
.brand.thumbs .word i{position:relative;animation:thumbs 3.2s ease-out}
.brand.thumbs .word i::after{content:'👍';color:var(--ink);position:absolute;left:-.15em;bottom:.1em;font-size:.75em;animation:thumbsUp 3.2s ease-out forwards}
@keyframes thumbs{0%,90%{color:transparent}100%{color:var(--accent)}}
@keyframes thumbsUp{0%{opacity:0;transform:translateY(6px) scale(.6)}10%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
/* ---- Arc II credits ---- */
.credits{position:fixed;inset:0;z-index:90;background:#0b0d10;color:#e6e8eb;overflow:hidden;opacity:0;transition:opacity 2.8s ease-in-out;font-family:var(--mono)}
.credits.on{opacity:1}
.credits.off{transition-duration:1.2s}
.cr-roll{position:absolute;left:0;right:0;top:0;transform:translateY(100vh);display:grid;justify-items:center;gap:56px;padding:0 16px 40px;will-change:transform}
.cr-roll.static{position:static;transform:none;height:100%;overflow:auto;padding-top:60px}
.cr-title{display:grid;justify-items:center;gap:12px;margin-bottom:20px}
.cr-title svg.logo{color:#45bb76}
.cr-word{font:800 44px/1 var(--mono);letter-spacing:-.02em}
.cr-word i{font-style:normal;color:#45bb76}
.cr-title small,.cr-end small{font:400 12px var(--mono);color:#8b93a1;letter-spacing:.12em;text-transform:uppercase}
.cr-sec{display:grid;gap:14px;justify-items:center;width:min(560px,100%)}
.cr-sec h4{margin:0 0 4px;font:700 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#45bb76}
.cr-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;align-items:center}
.cr-role{text-align:right;color:#8b93a1;font-size:13px;display:flex;justify-content:flex-end}
.cr-name{text-align:left;font:600 15px var(--sans);display:grid;gap:2px}
.cr-name small{font:400 12px var(--mono);color:#8b93a1;line-height:1.4}
.cr-fig{display:inline-block;width:22px;height:32px;color:#e6e8eb}
.cr-fig svg{width:22px;height:32px;overflow:visible}
.cr-list{margin:0;text-align:center;font:600 15px/1.8 var(--sans);max-width:520px}
.cr-note{margin:0;text-align:center;font:400 13px/1.6 var(--mono);color:#8b93a1;max-width:460px}
.cr-end{display:grid;justify-items:center;gap:10px;margin-top:40px;padding-bottom:30vh}
.cr-end b{font:800 30px var(--mono);letter-spacing:-.01em}
.cr-post{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:22px}
.cr-post .cr-k{font:400 11px var(--mono);letter-spacing:.3em;color:#5d6572}
.cr-chat{width:min(440px,calc(100vw - 32px));opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.cr-chat.in{opacity:1;transform:none}
.cr-msg{display:grid;grid-template-columns:36px 1fr;gap:12px;background:#16191f;border:1px solid #2a2f37;border-radius:10px;padding:14px 16px;text-align:left}
.cr-av{width:36px;height:36px;border-radius:8px;background:#1f2a24;display:grid;place-items:center;color:#45bb76}
.cr-av-t{font:700 12px var(--mono)}
.cr-body{display:grid;gap:6px;min-width:0}
.cr-from{display:flex;align-items:baseline;gap:8px;font:400 12px var(--sans);color:#8b93a1}
.cr-from b{font:700 14px var(--sans);color:#e6e8eb}
.cr-app{font:700 9px var(--mono);letter-spacing:.06em;background:#2a2f37;color:#aeb5c0;padding:1px 4px;border-radius:3px}
.cr-text{margin:0;font:400 15px/1.5 var(--sans);color:#e6e8eb}
.cr-typing{display:flex;gap:4px;padding:6px 0}
.cr-typing i{width:6px;height:6px;border-radius:50%;background:#8b93a1;animation:crdot 1.2s ease-in-out infinite}
.cr-typing i:nth-child(2){animation-delay:.15s} .cr-typing i:nth-child(3){animation-delay:.3s}
@keyframes crdot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.cr-invite{display:grid;gap:4px;margin-top:6px;padding:10px 12px;border-left:3px solid #45bb76;background:#1b1f26;border-radius:4px;font:400 13px var(--sans);color:#aeb5c0;animation:crin .5s ease-out}
.cr-invite b{color:#e6e8eb;font-weight:600}
.cr-rsvp{display:flex;gap:8px;margin-top:4px}
.cr-rsvp em{font:600 12px var(--sans);font-style:normal;padding:4px 10px;border:1px solid #2a2f37;border-radius:5px;color:#8b93a1}
@keyframes crin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cr-skip{position:absolute;right:16px;top:16px;background:transparent;color:#8b93a1;border-color:#2a2f37}
@media (max-width:520px){ .cr-word{font-size:34px} .cr-row{gap:12px} .cr-name{font-size:14px} }
/* quitting: the code goes back to your employer, line by line */
#lines.returning .ln{animation:returnLine .5s ease-in forwards}
#lines.returning .ln .c{text-decoration:line-through;text-decoration-color:var(--bug)}
#lines.returning .ln:nth-last-child(1){animation-delay:.05s} #lines.returning .ln:nth-last-child(2){animation-delay:.1s} #lines.returning .ln:nth-last-child(3){animation-delay:.15s}
#lines.returning .ln:nth-last-child(4){animation-delay:.2s} #lines.returning .ln:nth-last-child(5){animation-delay:.25s} #lines.returning .ln:nth-last-child(6){animation-delay:.3s}
#lines.returning .ln:nth-last-child(7){animation-delay:.35s} #lines.returning .ln:nth-last-child(8){animation-delay:.4s} #lines.returning .ln:nth-last-child(9){animation-delay:.45s}
#lines.returning .ln:nth-last-child(n+10){animation-delay:.5s}
@keyframes returnLine{to{opacity:0;transform:translateX(-40px)}}
/* an empty file: line 1 and a blinking cursor, waiting for the first Write code */
.lines:empty::before{content:'1';display:block;font:inherit;color:var(--gutter);width:52px;text-align:right;padding-right:12px;box-sizing:border-box}
.lines:empty::after{content:'';position:absolute;left:52px;top:2px;width:7px;height:14px;background:var(--accent);animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.float.cash{font-size:13px;font-weight:700;color:var(--accent);text-shadow:0 0 6px var(--bg)}
/* the very first bug (and the first incident): a pulsing ring so nobody has to be told to click it */
.bug.first::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--bug);opacity:.6;animation:firstRing 1.3s ease-out infinite;pointer-events:none}
@keyframes firstRing{0%{transform:scale(.7);opacity:.75}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion: reduce){ .bug.first::before{animation:none} }
#bWrite[data-n]::after{content:attr(data-n);margin-left:8px;font:500 12px var(--mono);opacity:.75}