/* =============================================================================
   SEQUENCE — additive sheet (2026-08-09)

   _term.css owns the world: ground, frame, type scale, ink stacks, panels.
   NOTHING in here restates a token it already defines. This sheet adds only
   what the new surfaces need:

     · the header's right cluster   — Steam sign-in, avatar, dropdown, Discord
     · the LIVE page                — the operator's own animal, vitals, actions
     · the MAP page                 — SEQ-TERM design 1 with the rails removed
     · the 3D stage                 — the frame the walking preview lives in
     · the sound switch

   COLOUR LAW (his, eight rejections deep): headings, names and values are
   #79D9FF over #4BB4FC over #2C84EE. Never near-white. Green is reserved for
   ONLINE-class state, amber for caution, red for a refusal.
   ========================================================================= */

/* ★ `hidden` HAS TO WIN. The UA rule `[hidden]{display:none}` is one class
   worth of specificity, and every author rule in this sheet that sets a
   display (.gate, .live-wrap, .mmenu, .dlg…) ties it and beats it for coming
   later in the cascade. Without this line a panel marked hidden stays fully
   on screen with nothing in the console to say why - which is exactly how the
   signed-out gate and the signed-in body both drew at once on the first
   build of the live page. */
[hidden]{display:none !important}

/* ---------- header: the right cluster ------------------------------------ */

/* The header sits ABOVE the page it draws on — `_term.css` says so on `.top`,
   and the long version of why (a dropdown that was visible and unclickable for
   a day) is written there beside the rule.

   ONE EXCEPTION, and it belongs here rather than there because it is the live
   page's device, not the theme's: the instrument sheet's scrim (z-index 4)
   dims the whole site behind the animal, and chrome floating bright over a
   modal reads as a second, competing surface. While that scrim is up, the
   header steps back under it. Measured with the sheet open: header 3, scrim 4. */
body:has(.ins-scrim:not([hidden])) .top{z-index:3}

.hend{margin-left:auto;display:flex;align-items:center;gap:14px;position:relative}

/* Discord — the animated mark. Idle it breathes; hover it pops and the ring
   sweeps once. Motion is transform/opacity only, so it costs no layout. */
.dbtn{position:relative;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;color:#4BB4FC;
  border:1px solid rgba(75,180,252,.42);
  box-shadow:0 0 0 1px rgba(1,5,11,.9);
  transition:color .15s linear,border-color .15s linear,transform .18s cubic-bezier(.2,.8,.2,1)}
.dbtn svg{width:20px;height:20px;display:block;filter:drop-shadow(0 0 3px rgba(1,5,11,.95));
  animation:dhover 3.4s ease-in-out infinite}
.dbtn::before{content:"";position:absolute;inset:-1px;border:1px solid var(--blue-hot);
  opacity:0;transform:scale(.72);transition:opacity .2s linear,transform .2s cubic-bezier(.2,.8,.2,1)}
.dbtn:hover{color:#A8E7FF;border-color:#79D9FF;transform:translateY(-1px)}
.dbtn:hover::before{opacity:1;transform:scale(1)}
.dbtn:hover svg{animation:dpop .5s cubic-bezier(.2,.9,.2,1)}
@keyframes dhover{0%,100%{transform:translateY(0) rotate(0)}
  38%{transform:translateY(-2px) rotate(-3deg)}
  70%{transform:translateY(0) rotate(2deg)}}
@keyframes dpop{0%{transform:scale(1) rotate(0)}
  35%{transform:scale(1.22) rotate(-9deg)}
  65%{transform:scale(1.05) rotate(6deg)}
  100%{transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){
  .dbtn svg{animation:none}
  .dbtn:hover svg{animation:none}
}

/* the sound switch — same chrome as the Discord mark, so they read as a pair */
.sbtn{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--blue-dim);border:1px solid rgba(75,180,252,.28);background:transparent;
  box-shadow:0 0 0 1px rgba(1,5,11,.9);cursor:pointer;padding:0;
  font-family:var(--pixel);font-size:11px;letter-spacing:.06em;
  transition:color .15s linear,border-color .15s linear}
.sbtn:hover{color:#79D9FF;border-color:#79D9FF}
.sbtn[aria-pressed="true"]{color:#79D9FF;border-color:rgba(75,180,252,.6)}
.sbtn .bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.sbtn .bars i{width:2px;background:currentColor;height:5px}
/* at rest the bars still read as a level meter rather than four dots */
.sbtn .bars i:nth-child(1){height:5px}
.sbtn .bars i:nth-child(2){height:11px}
.sbtn .bars i:nth-child(3){height:8px}
.sbtn .bars i:nth-child(4){height:4px}
.sbtn[aria-pressed="false"]{opacity:.62}
.sbtn[aria-pressed="false"] .bars{position:relative}
/* muted: a slash across the meter, so off is legible without a second icon */
.sbtn[aria-pressed="false"] .bars::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;
  height:1px;background:currentColor;transform:rotate(-32deg)}
.sbtn[aria-pressed="true"] .bars i{animation:vu .9s ease-in-out infinite}
.sbtn[aria-pressed="true"] .bars i:nth-child(2){animation-delay:.12s}
.sbtn[aria-pressed="true"] .bars i:nth-child(3){animation-delay:.26s}
.sbtn[aria-pressed="true"] .bars i:nth-child(4){animation-delay:.38s}
@keyframes vu{0%,100%{height:4px}50%{height:13px}}
@media(prefers-reduced-motion:reduce){.sbtn[aria-pressed="true"] .bars i{animation:none;height:9px}}

/* Steam sign-in button — the .act grammar, sized for a bar */
.steamin{display:flex;align-items:center;gap:9px;position:relative;
  font-family:var(--pixel);font-size:11.5px;letter-spacing:.115em;
  padding:9px 14px;color:#79D9FF;text-shadow:var(--sh-body);background:transparent;
  border:1px solid rgba(75,180,252,.55);cursor:pointer;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(1,5,11,.9),inset 0 0 0 1px rgba(1,5,11,.7);
  transition:border-color .15s linear,color .15s linear}
.steamin:hover{border-color:#79D9FF;color:#A8E7FF}
.steamin svg{width:16px;height:16px;flex:none}

/* signed in: avatar + persona + caret */
.me{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 5px;cursor:pointer;
  border:1px solid rgba(75,180,252,.34);background:transparent;
  box-shadow:0 0 0 1px rgba(1,5,11,.9);max-width:230px;
  transition:border-color .15s linear}
.me:hover,.me[aria-expanded="true"]{border-color:#79D9FF}
.me img{width:28px;height:28px;flex:none;object-fit:cover;
  border:1px solid rgba(75,180,252,.6);background:#01050B}
.me .nm{min-width:0;text-align:left}
.me .nm b{display:block;font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.05em;
  color:#79D9FF;text-shadow:var(--sh-body);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .nm span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.me .car{color:var(--blue-dim);font-size:10px;transition:transform .16s}
.me[aria-expanded="true"] .car{transform:rotate(180deg)}

/* ★★★★★ THE CHIP CANNOT BE TAKEN AWAY BY A PAGE THAT REUSES THE NAME.
   `me` is two letters, it is defined in a SITE-WIDE stylesheet, and every page
   is free to open a <style> block after this file loads — so a page-local
   `.me{}` wins on source order at equal specificity and silently rewrites the
   header of that one page. That is not hypothetical: `/map` shipped a
   `.me{position:absolute;width:0;height:0;pointer-events:none}` for the yellow
   you-are-here arrow on 2026-08-15, and from that hour the signed-in chip on
   the map page collapsed to a sliver, wrapped its own name one fragment per
   line, hung off the right edge and could not be clicked at all. Nothing was
   red: signed OUT the page is perfect, and every check ran signed out.
   The arrow is renamed at its source (`.mme` — the fix). THIS rule is the
   second belt: the five declarations below are the ones a hostile bare `.me`
   can use to make the chip disappear, and `.hend .me` (0,2,0) is out of reach
   of any bare class selector (0,1,0), whoever writes it and whenever. Look
   only — colour, border, spacing — is deliberately NOT pinned here, so a page
   may still theme the chip; it may no longer delete it. */
.hend .me{position:static;display:flex;width:auto;height:auto;pointer-events:auto}

/* the dropdown */
.mmenu{position:absolute;top:calc(100% + 9px);right:0;z-index:40;min-width:262px;
  border:1px solid var(--rule);background:rgba(1,4,10,.96);backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(1,5,11,.9),0 22px 60px -26px rgba(0,0,0,.95);
  padding:10px;display:none}
.mmenu.on{display:block;animation:mmin .16s cubic-bezier(.2,.8,.2,1) both}
@keyframes mmin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mmenu .mhd{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--blue-dim);
  text-shadow:var(--sh-micro);padding:2px 4px 9px;border-bottom:1px solid rgba(30,111,224,.5);margin-bottom:8px}
.mmenu .mhd b{color:#79D9FF;font-weight:400;letter-spacing:.06em}
.mitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:#4BB4FC;text-shadow:var(--sh-body);
  background:transparent;border:1px solid transparent;padding:9px 10px;
  transition:background .13s linear,border-color .13s linear,color .13s linear}
.mitem:hover{background:rgba(30,111,224,.14);border-color:rgba(75,180,252,.45);color:#A8E7FF}
.mitem .ic{width:15px;flex:none;color:var(--blue-dim);display:flex}
.mitem .ic svg{width:15px;height:15px}
.mitem:hover .ic{color:#79D9FF}
.mitem.linked{cursor:default;color:var(--green)}
.mitem.linked:hover{background:transparent;border-color:transparent;color:var(--green)}
.mitem.linked .ic{color:var(--green)}
.mitem.danger:hover{border-color:rgba(255,90,90,.5);color:#FF8B8B}

/* ★ `justify-content:flex-end` OVERFLOWS TO THE LEFT, AND THE LEFT IS WHERE THE
   PAGE ENDS. This block gave the tools cluster the full width and packed it to
   the end; the moment its contents were wider than the row — a signed-in name
   beside two balance chips on a phone — the Discord mark and the sound switch
   went off the LEFT edge of the screen, where no scroll reaches them, while the
   row still looked deliberately composed. An end-packed row that can overflow
   must be allowed to wrap instead. Measured on the live site 2026-08-15: the
   Discord mark sat off-screen below 430px. */
@media(max-width:820px){
  .hend{width:100%;order:4;flex-wrap:wrap;justify-content:flex-start;row-gap:8px}
}

/* =========================================================================
   THE TAB BAR — THE SEGMENT PLATE (2026-08-15, his pick from five)
   -------------------------------------------------------------------------
   
   should just be visible." What stood here before was the second of the four
   known endings for an overflowing rail, and the one that passes review while
   failing the owner: `flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none`
   plus a fade mask. Nothing painted over anything, the header photographed
   beautifully, and the last tabs were unreachable on a mouse. Measured live on
   2026-08-15 against the bar HE sees (eleven entries — nine in the markup plus
   BENEFITS and ADMIN, both injected late):

       1920  SUPPORT, BENEFITS, ADMIN clipped and unpressable
       1366  three gone                        <- the commonest laptop
       1280  four gone
       1180  every tab back                    <- NARROWING REVEALED FOUR

   That last line was the second fault, and it was in the old block by design:
   a stepped `@media(max-width:1180px)` that hands the bar its own row FREES
   width as the window narrows, so the row was NON-MONOTONIC — make the window
   bigger, see fewer tabs. A width-freeing step may only sit BELOW the width
   where the rail already has a row of its own.

   ★ AND THE COMMENT THAT USED TO SIT HERE IS WHY IT SURVIVED A DAY. It said
   this rail was "the framework's own, ported from terminal.css:591-599". True
   when written on 2026-08-10; those exact lines were REPLACED fleet-wide on
   08-14. `_term.css` is a 2026-08-08 fork of the shared terminal theme, so it
   inherits nothing automatically, and a provenance comment made a retired
   shape read as already-correct.

   THE SHAPE, chosen by him from five built and gated side by side: the doors
   stop being a line of text and become one piece of hardware — a bordered
   strip of equal cells spanning the full width, the way a rack unit labels its
   own channels. It is the only one of the five that cannot hide a door BY
   CONSTRUCTION and needs no script to be true:

     · the rail always has its own full-width row, so nothing competes with the
       identity or the wallet for space and there is no width at which a step
       has to free any;
     · the cells are `flex:1 1 0` with a floor, so they SHARE the width and
       wrap into a second bank rather than clip — at eleven doors or twenty;
     · the cell IS the bracket, so `[ ]` comes off inside the plate. The
       brackets stay everywhere else on the site; here they would be a border
       drawn twice.

   These are `.nav` at the same specificity as `_term.css`'s own rule and this
   file loads AFTER it, so they win on order. Nothing in `_term.css` is edited
   — it is the shared terminal shell and three other pages read it.
   ========================================================================= */
.top{flex-wrap:wrap;row-gap:0;padding-bottom:0}

.nav{order:3;flex:1 0 100%;width:100%;
  display:flex;flex-wrap:wrap;gap:0;justify-content:flex-start;
  overflow:visible;margin:10px 0 0;
  border:1px solid var(--rule);
  box-shadow:inset 0 0 0 1px rgba(1,5,11,.75),0 0 0 1px rgba(1,5,11,.9)}
.nav::-webkit-scrollbar{display:none}

.nav a{position:relative;flex:1 1 0;min-width:104px;text-align:center;
  padding:11px 6px 10px;
  font-family:var(--wide);font-size:11px;letter-spacing:.15em;white-space:nowrap;
  color:var(--blue);text-shadow:var(--sh-micro);
  border-right:1px solid rgba(30,111,224,.42);
  transition:color .14s linear,background .16s linear}
.nav a:last-child{border-right:0}
.nav a i{display:none}
.nav a:hover{color:#79D9FF;background:rgba(30,111,224,.13)}

/* The lit top edge is the channel's own indicator, and it sits ON the plate's
   hairline rather than inside the cell: a selected cell reads as energised,
   not merely tinted. `aria-current` is what the pages already mark, so this
   needs no new attribute anywhere. */
.nav a::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:var(--blue-hot);opacity:0;transition:opacity .16s linear}
.nav a[aria-current]{color:#A8E7FF;background:rgba(30,111,224,.2)}
.nav a[aria-current]::before{opacity:1}

/* ★ A CELL THAT KEEPS SHRINKING STOPS BEING A LABEL. Below this width eleven
   cells across one line would each be narrower than the longest word on them,
   so the plate becomes three banks of fixed thirds — a shape, not a squeeze.
   This step sits far below the width where the rail already owns its row, so
   it can never change WHICH doors are on the bar, only how they are stacked. */
@media(max-width:820px){
  .nav a{min-width:33.333%;flex:1 1 33.333%;
    border-bottom:1px solid rgba(30,111,224,.42)}
}

/* =========================================================================
   LIVE — the operator's own animal
   ========================================================================= */
/* ★ STRETCH, NOT START. With the vault moved out to its own full-width
   section the READOUT column became much shorter than the animal column, and
   `align-items:start` left ~300px of bright neon photograph between the panel
   and the vault rule - a hole in the middle of an OPERATE screen. Stretched,
   the panel's own ground fills it and `.panel .foot{margin-top:auto}` puts the
   footnote on the floor where it belongs. */
.live-wrap{position:relative;z-index:4;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:var(--pad);padding:0 var(--pad) var(--pad);align-items:start}
@media(max-width:1080px){.live-wrap{grid-template-columns:minmax(0,1fr)}}
.live-col{display:grid;gap:var(--pad);align-content:start;min-width:0}

/* the 3D stage */
.stage{position:relative;border:1px solid var(--rule);aspect-ratio:16/10;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 108%,rgba(20,90,180,.28),transparent 62%),
    linear-gradient(180deg,rgba(1,6,16,.92),rgba(1,4,10,.98));
  box-shadow:inset 0 0 0 1px rgba(1,5,11,.85)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the floor grid is drawn in CSS so the frame reads right before three.js lands */
.stage::before{content:"";position:absolute;left:-25%;right:-25%;bottom:-6%;height:46%;
  background:
    repeating-linear-gradient(90deg,rgba(75,180,252,.16) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(75,180,252,.14) 0 1px,transparent 1px 30px);
  transform:perspective(340px) rotateX(66deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 42%,#000 78%,transparent);
  pointer-events:none}
.stage .corner{position:absolute;width:14px;height:14px;border:1px solid var(--blue-hot);
  opacity:.75;pointer-events:none}
.stage .corner.tl{left:7px;top:7px;border-right:0;border-bottom:0}
.stage .corner.tr{right:7px;top:7px;border-left:0;border-bottom:0}
.stage .corner.bl{left:7px;bottom:7px;border-right:0;border-top:0}
.stage .corner.br{right:7px;bottom:7px;border-left:0;border-top:0}
.stage .slabel{position:absolute;left:14px;top:14px;z-index:3;font-family:var(--pixel);
  font-size:10.5px;letter-spacing:.2em;color:var(--blue-dim);text-shadow:var(--sh-micro)}
.stage .sclip{position:absolute;right:14px;top:14px;z-index:3;font-family:var(--pixel);
  font-size:10.5px;letter-spacing:.16em;color:#79D9FF;text-shadow:var(--sh-micro)}
.stage .shint{position:absolute;left:0;right:0;bottom:11px;z-index:3;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.19em;color:var(--blue-dim);
  text-shadow:var(--sh-micro);pointer-events:none;opacity:.85}
.stage .sbusy{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  font-family:var(--pixel);font-size:12px;letter-spacing:.2em;color:#4BB4FC;text-shadow:var(--sh-body);
  background:rgba(1,4,10,.55)}
.stage .sbusy[hidden]{display:none}
.stage .sbusy .dots::after{content:"";animation:sdots 1.1s steps(4) infinite}
@keyframes sdots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* species rail under the stage */
.speciesbar{display:flex;gap:6px;overflow-x:auto;padding:9px 2px 2px;scrollbar-width:thin}
.chipx{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.09em;white-space:nowrap;
  padding:6px 10px;color:var(--blue-dim);background:transparent;cursor:pointer;
  border:1px solid rgba(30,111,224,.5);text-shadow:var(--sh-micro);
  transition:color .13s linear,border-color .13s linear}
.chipx:hover{color:#79D9FF;border-color:#79D9FF}
.chipx[aria-pressed="true"]{color:#01040C;background:var(--blue-hot);border-color:var(--blue-hot);text-shadow:none}

/* vitals */
.vitals{display:grid;gap:10px}
.vital{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:11px;align-items:center;
  font-size:12px;letter-spacing:.07em}
.vital .vk{color:var(--blue-dim);text-shadow:var(--sh-micro);white-space:nowrap}
.vital .vt{position:relative;height:10px;background:rgba(12,42,80,.85);
  box-shadow:inset 0 0 0 1px rgba(30,111,224,.55);overflow:hidden}
.vital .vt i{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue-hot);
  box-shadow:0 0 12px rgba(61,155,255,.75);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.vital .vt i.g{background:var(--green);box-shadow:0 0 12px rgba(91,255,166,.55)}
.vital .vt i.a{background:var(--amber);box-shadow:0 0 12px rgba(255,180,84,.5)}
.vital .vt i.r{background:var(--red);box-shadow:0 0 12px rgba(255,90,90,.5)}
.vital .vv{color:#79D9FF;text-shadow:var(--sh-body);white-space:nowrap;font-size:12px;min-width:104px;text-align:right}
.vital .vv u{text-decoration:none;color:var(--blue-dim)}
.vital.unknown .vv{color:var(--blue-dim)}

/* the identity block on the live card */
.idcard{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.idcard .sp{font-family:var(--pixel);font-size:clamp(19px,2vw,28px);letter-spacing:.05em;
  color:#79D9FF;text-shadow:var(--sh-lead)}
.idcard .nick{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--blue)}
.idcard .nick em{font-style:normal;color:var(--blue-dim)}
.idcard .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;color:var(--blue-dim);
  border:1px solid rgba(30,111,224,.6);padding:2px 7px}
.idcard .tag.on{color:var(--green);border-color:rgba(91,255,166,.5)}
.idcard .tag.w{color:var(--amber);border-color:rgba(255,180,84,.5)}

/* actions */
.actgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:9px}
.abtn{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  font-family:var(--pixel);font-size:12px;letter-spacing:.12em;padding:11px 13px;
  color:#79D9FF;text-shadow:var(--sh-body);background:transparent;
  border:1px solid rgba(75,180,252,.5);
  box-shadow:0 0 0 1px rgba(1,5,11,.9),inset 0 0 0 1px rgba(1,5,11,.7);
  transition:border-color .15s linear,color .15s linear,background .15s linear}
.abtn small{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--blue-dim);text-shadow:var(--sh-micro)}
.abtn:hover:not(:disabled){border-color:#79D9FF;color:#A8E7FF;background:rgba(30,111,224,.1)}
.abtn:disabled{opacity:.42;cursor:not-allowed}
.abtn.arm{border-color:var(--amber);color:var(--amber)}
.abtn.arm small{color:var(--amber)}
.abtn.danger.arm{border-color:var(--red);color:#FF8B8B}
.abtn.danger.arm small{color:#FF8B8B}
.abtn .cd{position:absolute;left:-1px;bottom:-1px;height:2px;background:var(--amber);width:0}

/* the action log */
.alog{margin-top:12px;border-top:1px solid rgba(30,111,224,.55);padding-top:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--blue-dim);
  display:grid;gap:4px;max-height:132px;overflow:auto;scrollbar-width:thin}
.alog b{color:#79D9FF;font-weight:400}
.alog .ok{color:var(--green)}
.alog .no{color:var(--red)}
.alog .wait{color:var(--amber)}

/* the signed-out gate */
.gate{display:grid;gap:16px;justify-items:start;padding:clamp(18px,3vw,34px) 0}
.gate p{margin:0;max-width:56ch;font-family:var(--read);font-size:14px;line-height:1.8;
  color:#6BC6FF;text-shadow:var(--sh-body)}

/* a modal for the two actions that take a value */
.dlg{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(1,4,10,.72);backdrop-filter:blur(3px);padding:20px}
.dlg.on{display:flex}
.dlg .box{width:min(430px,100%);border:1px solid var(--rule);background:rgba(1,6,16,.97);
  box-shadow:0 0 0 1px rgba(1,5,11,.9),0 30px 80px -30px #000;padding:16px}
.dlg h3{margin:0 0 4px;font-family:var(--wide);font-size:15px;font-weight:560;letter-spacing:.06em;
  color:#79D9FF;text-shadow:var(--sh-body)}
.dlg p{margin:0 0 13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.dlg input,.dlg select{width:100%;font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  color:#A8E7FF;background:rgba(4,16,34,.9);border:1px solid rgba(75,180,252,.5);
  padding:10px 11px;outline:none}
.dlg input:focus,.dlg select:focus{border-color:#79D9FF}
.dlg .row{display:flex;gap:9px;justify-content:flex-end;margin-top:14px}
.dlg .err{color:var(--red);font-size:11px;letter-spacing:.06em;margin-top:8px;min-height:14px}

/* =========================================================================
   MAP — SEQ-TERM design 1, rails removed (his call)
   ========================================================================= */
.mapstage{position:relative;z-index:4;margin:0 var(--pad) var(--pad);
  border:1px solid var(--rule);overflow:hidden;background:#01050B;
  height:clamp(460px,74vh,1000px);touch-action:none}
.mapstage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mapstage .mtop,.mapstage .mbot{position:absolute;left:0;right:0;z-index:6;display:flex;
  align-items:center;gap:clamp(10px,2vw,26px);padding:9px 13px;
  background:linear-gradient(180deg,rgba(1,4,10,.88),rgba(1,4,10,.32));
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--blue-dim);
  text-shadow:var(--sh-micro);pointer-events:none;flex-wrap:wrap}
.mapstage .mtop{top:0;border-bottom:1px solid rgba(30,111,224,.5)}
.mapstage .mbot{bottom:0;top:auto;border-top:1px solid rgba(30,111,224,.5);
  background:linear-gradient(0deg,rgba(1,4,10,.9),rgba(1,4,10,.3))}
.mapstage .mtop b,.mapstage .mbot b{color:#79D9FF;font-weight:400;letter-spacing:.06em}
.mapstage .mtop .sp,.mapstage .mbot .sp{margin-left:auto}
.mapstage [data-mapctl]{pointer-events:auto}
/* -------------------------------------------------------------------------
   LAYERS — his r2 call: off the bottom-right corner, into the empty water on
   the LEFT of the frame, and reading as one instrument instead of a floating
   list. The island is square inside a wide frame, so this column sits over
   sea, never over land.
   ------------------------------------------------------------------------- */
.mpanel{position:absolute;left:13px;top:46px;bottom:52px;width:246px;z-index:7;
  display:flex;flex-direction:column;pointer-events:auto;
  border:1px solid rgba(30,111,224,.55);border-left:2px solid var(--blue-hot);
  background:linear-gradient(180deg,rgba(1,6,16,.93),rgba(1,4,11,.90));
  box-shadow:0 0 0 1px rgba(1,5,11,.9),0 26px 60px -30px #000,
             inset 0 0 44px -22px rgba(75,180,252,.55);
  backdrop-filter:blur(7px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--blue-dim);
  text-shadow:var(--sh-micro);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),opacity .16s linear}
.mpanel.off{transform:translateX(calc(-100% - 15px));opacity:0;pointer-events:none}
.mpanel .mpsec{padding:9px 11px 10px;border-bottom:1px solid rgba(30,111,224,.28)}
.mpanel .mpsec.grow{flex:1;min-height:0;display:flex;flex-direction:column;border-bottom:0}
.mpanel .mph{display:flex;align-items:center;color:#79D9FF;letter-spacing:.24em;font-size:9.5px;
  padding-bottom:6px;margin-bottom:5px;border-bottom:1px solid rgba(30,111,224,.4)}
.mpanel .mph b{margin-left:auto;font-weight:400;color:var(--blue-dim);letter-spacing:.1em;opacity:.85}
.mpanel .mlist{overflow:auto;min-height:0;margin:0 -11px;padding:0 11px;scrollbar-width:thin;
  scrollbar-color:rgba(75,180,252,.45) transparent}
.mpanel .mlist::-webkit-scrollbar{width:6px}
.mpanel .mlist::-webkit-scrollbar-thumb{background:rgba(75,180,252,.35)}

.mrow{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-left:2px solid transparent;
  padding:4px 6px 4px 5px;margin:0 -6px;color:inherit;font:inherit;letter-spacing:inherit;
  transition:background .12s linear,color .12s linear}
.mrow:hover{background:rgba(30,111,224,.14);color:#A8E7FF}
.mrow[aria-pressed="true"]{color:#79D9FF;border-left-color:var(--cc,var(--blue-hot))}
.mrow:disabled{opacity:.36;cursor:not-allowed}
.mrow:disabled:hover{background:transparent;color:inherit}
.mrow .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .nt{margin-left:auto;font-size:9px;letter-spacing:.08em;opacity:.55;white-space:nowrap}
.mrow .n{margin-left:auto;font-size:9.5px;letter-spacing:.06em;opacity:.7;
  font-variant-numeric:tabular-nums}
/* radio pip for SURFACE, checkbox for everything that stacks */
.mrow .pip{width:9px;height:9px;flex:none;border:1px solid currentColor;border-radius:50%;
  position:relative;opacity:.5}
.mrow[aria-pressed="true"] .pip{opacity:1}
.mrow[aria-pressed="true"] .pip::after{content:"";position:absolute;inset:2px;border-radius:50%;
  background:var(--blue-hot);box-shadow:0 0 6px rgba(75,180,252,.9)}
.mrow .box{width:9px;height:9px;flex:none;border:1px solid currentColor;opacity:.5;position:relative}
.mrow[aria-pressed="true"] .box{opacity:1;border-color:var(--cc,var(--blue-hot))}
.mrow[aria-pressed="true"] .box::after{content:"";position:absolute;inset:1px;
  background:var(--cc,var(--blue-hot));box-shadow:0 0 6px -1px var(--cc,rgba(75,180,252,.9))}
.mrow.cat .lb{color:inherit}

.mblend{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:9.5px;letter-spacing:.16em}
.mblend b{font-weight:400;color:#79D9FF;font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.mblend input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:2px;background:
  linear-gradient(90deg,rgba(75,180,252,.75),rgba(75,180,252,.2));outline:none;cursor:pointer}
.mblend input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:9px;height:13px;background:#79D9FF;border:0;box-shadow:0 0 7px rgba(75,180,252,.85);cursor:pointer}
.mblend input[type=range]::-moz-range-thumb{width:9px;height:13px;background:#79D9FF;border:0;
  box-shadow:0 0 7px rgba(75,180,252,.85);cursor:pointer}
/* ★ THE ONE CONTROL WITH NO FOCUS RING. Every other control on the page picks
   up the global :focus-visible outline; a range input's thumb is a pseudo
   element and swallowed it, so a keyboard reader tabbing through the panel
   simply lost the caret at the slider. */
.mblend input[type=range]:focus-visible{outline:1px solid var(--blue-hot);outline-offset:4px}
.mblend input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #01040C,0 0 0 4px var(--blue-hot)}
.mblend input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #01040C,0 0 0 4px var(--blue-hot)}

.mpfoot{display:flex;align-items:center;gap:6px;padding:8px 11px;
  border-top:1px solid rgba(30,111,224,.4);background:rgba(2,9,22,.6)}
.mpfoot .msp{margin-left:auto}
.mmini{font:inherit;letter-spacing:.14em;font-size:9.5px;color:var(--blue-dim);cursor:pointer;
  background:transparent;border:1px solid rgba(75,180,252,.4);padding:3px 7px}
.mmini:hover{color:#01040C;background:var(--blue-hot);border-color:var(--blue-hot);text-shadow:none}
.mempty{padding:6px 0;opacity:.6;font-size:9.5px;letter-spacing:.1em}

/* The island is square inside a wide frame, so the sea the panel sits on
   shrinks about half a pixel for every pixel the window loses. That is what
   caught the first attempt out: 246px cleared the frame by 239px at 1920 and
   still overlapped the ISLAND by 30px at 1100. So the panel narrows before it
   runs out of water, and below 1280 it stops opening itself at all (_map.js
   NARROW). Re-measured in a browser AFTER the fix, panel-right to frame-edge:
   +311 at 1920, +129 at 1500, +59 at 1360, +37 at 1280, folded below that.
   No horizontal page scroll at 1920/1500/1360/1280/1100/900/760/412. */
@media(max-width:1500px){.mpanel{width:218px}}
@media(max-width:1280px){
  .mpanel{left:9px;top:42px;bottom:46px;width:206px;
    background:linear-gradient(180deg,rgba(1,6,16,.97),rgba(1,4,11,.96))}
}
/* ★ NOT `width:auto`. That made the panel a full-width drawer on a phone, and
   opening it by hand covered 94-97% of the island — the auto-fold hides it by
   default, but the moment the reader taps [ L ] the map is gone. Bounded, so
   there is always island beside it and the reader can see what a layer did. */
@media(max-width:640px){.mpanel{width:min(64vw,232px)}}

.mzoom{position:absolute;right:13px;bottom:58px;z-index:6;display:grid;gap:6px}
.mzoom button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(75,180,252,.45);background:rgba(1,4,10,.82);color:#79D9FF;
  font-family:var(--pixel);font-size:15px;line-height:1;cursor:pointer;
  box-shadow:0 0 0 1px rgba(1,5,11,.9)}
.mzoom button:hover{border-color:#79D9FF;background:rgba(30,111,224,.18)}
.mtip{position:absolute;z-index:7;pointer-events:none;transform:translate(10px,-50%);
  border:1px solid rgba(75,180,252,.6);background:rgba(1,6,16,.94);padding:5px 9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:#A8E7FF;
  text-shadow:var(--sh-micro);white-space:nowrap;display:none}
.mtip.on{display:block}
.mtip u{text-decoration:none;display:block;color:currentColor;font-size:9px;letter-spacing:.2em;
  opacity:.85}
.mtip span{display:block;color:#DCF2FF;font-size:11.5px;letter-spacing:.06em}
/* the pinned badge — a tap holds a marker's name open on a map that prints none */
.mtip em{display:block;margin-top:3px;font-style:normal;font-size:8.5px;letter-spacing:.22em;
  color:currentColor;opacity:.8}
.mtip::before{content:"";position:absolute;left:-5px;top:50%;width:5px;height:1px;
  background:currentColor;opacity:.7}

/* =========================================================================
   shared bits
   ========================================================================= */
.section{position:relative;z-index:4;padding:clamp(16px,2.4vw,30px) var(--pad) clamp(10px,1.6vw,18px)}
.h2{margin:0;font-size:clamp(20px,2.2vw,30px);font-weight:560;letter-spacing:.05em;
  color:#79D9FF;text-shadow:var(--sh-lead)}
.sub{margin:9px 0 0;max-width:74ch;font-family:var(--read);font-size:14px;line-height:1.82;
  color:#6BC6FF;text-shadow:var(--sh-body)}
.tworow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.stat{border:1px solid rgba(30,111,224,.55);padding:10px 12px;min-width:0}
.stat u{text-decoration:none;display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.stat b{display:block;font-family:var(--pixel);font-size:19px;letter-spacing:.05em;
  color:#79D9FF;text-shadow:var(--sh-body);font-weight:400;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sample{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--blue-dim);
  text-shadow:var(--sh-micro)}
.sample b{color:#4BB4FC;font-weight:400}

/* ---------------------------------------------------------------------------
   THE WORDMARK IS THE WAY HOME (his instruction, 2026-08-10: "get rid of the
   home tab, instead if someone clicks this it takes them to home").
   The nav lost its HOME item on every page and the identity block became the
   link. It needs a hover cue or it is a link nobody knows is one - the whole
   point of dropping the tab is that this replaces it.
   ------------------------------------------------------------------------- */
/* =========================================================================
   LIVE, ROUND 2 (2026-08-10) — the page moves UP and the animal takes over
   -------------------------------------------------------------------------
   His order: "remove all of this <lede> ... and put the rest more up as in the
   stuff below". The lede paragraph, the feed sentence and the preview note
   were six lines of prose above the fold; the three FACTS they carried are now
   chips on the heading's own row, and the instrument starts ~180px higher.

   The gauges themselves are NOT here. They are the shared theme's
   `live-instruments.css`, deployed beside this sheet as `_instr.css`, so the
   grammar can be worn by any owner's live page instead of living in Sequence's
   private stylesheet.
   ========================================================================= */
.headsec{padding-bottom:clamp(8px,1.1vw,14px)}
.headrow{display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;min-width:0}
.headrow .h2{margin:0;flex:none}
.headrow .ins-chips{margin-left:auto}
@media(max-width:700px){.headrow .ins-chips{margin-left:0}}

/* identity bar -> ladder -> instrument, tight group / generous separation */
.panel .ins-id{margin-bottom:2px}
.panel .ins-rungs{margin-bottom:clamp(13px,1.7vw,20px)}
.panel .ins-wrap{margin-bottom:clamp(11px,1.4vw,16px)}

/* the two levers he kept. Two cells, never a six-button grid. */
.levers{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:420px){.levers{grid-template-columns:minmax(0,1fr)}}

/* READOUT: more space above a heading than below it */
.readout-prime{margin-top:clamp(18px,2.3vw,26px)}

/* ★ THE LAYOUT STOPS RESERVING THE SPACE, r3 (2026-08-10) — and this is a
   REVERSAL of the previous fix, kept legible on purpose.
   The readout has less to say than the animal card does, and there are only
   two honest answers to that: the readout earns the height, or the layout
   stops reserving it. Stretching the column took the first, and it was wrong:
   a full-height panel two-thirds empty reads as broken UI, whereas the column
   simply ending and the owner's own picture showing beneath it is the page's
   ground doing what it does everywhere else on this site. So the columns are
   independent heights again (`align-items:start` on `.live-wrap`), and nothing
   decorative was invented to fill a hole. */

/* the vault section — a heading and a rule, and the SLOT is the only bordered
   object in it. A slot inside a panel would be a card inside a card. */
.vaultsec{padding-bottom:clamp(20px,2.6vw,32px)}
.vaultfoot{display:block;margin:clamp(13px,1.7vw,18px) 0 0}

/* the action log sits under the levers on the animal card now */
.panel .levers + .speciesbar{padding-top:11px}

/* THE RAIL SCROLLS, SO IT HAS TO LOOK LIKE IT DOES. Twenty-one species never
   fit; without an edge the last visible chip reads as the last chip there is. */
.speciesbar{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 99%);
          mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 99%)}

a.id{cursor:pointer;transition:opacity .16s ease}
a.id:hover{opacity:.92}
a.id:hover .who b{color:#79D9FF}
a.id .glyph img{transition:filter .18s ease}
a.id:hover .glyph img{filter:drop-shadow(0 0 10px rgba(75,180,252,.75))}
a.id:focus-visible{outline:1px solid var(--blue-hot);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  a.id,a.id .glyph img{transition:none}
}

/* =========================================================================
   HOW TO JOIN  (2026-08-11) — the panel that replaced the drawn radar
   -------------------------------------------------------------------------
   The third home panel used to be a fake LIVE MAP FEED: an invented island
   outline, blips on a timer, GRID F7, SIGNAL STRONG. It read live and knew
   nothing. This is the question a stranger on a server's front page is
   really asking, and every value in it is read off the island itself.

   Nothing here redefines a brand token - every colour comes from _term.css.
   ========================================================================= */
.steps{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.75;
  color:#4BB4FC;text-shadow:var(--sh-body)}
.steps li{display:flex;gap:10px;align-items:baseline;padding:5px 0}
.steps li i{font-style:normal;color:var(--blue-dim);font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;flex:0 0 auto}
.steps li b{color:#79D9FF;font-weight:400}

/* the name a player types into the server browser. It is the one thing on
   this panel somebody has to copy, so it gets the weight of a control. */
.findbar{display:flex;align-items:stretch;gap:0;margin:8px 0 10px;
  border:1px solid var(--rule-hot);background:rgba(30,111,224,.12);min-width:0}
.findbar .fname{flex:1 1 auto;min-width:0;padding:10px 12px;font-family:var(--mono);
  font-size:14px;font-weight:560;letter-spacing:.04em;color:#A8E7FF;
  text-shadow:var(--sh-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  -webkit-user-select:all;user-select:all}
.findbar .fcopy{flex:0 0 auto;border:0;border-left:1px solid var(--rule-hot);
  background:transparent;color:#79D9FF;font-family:var(--wide);font-size:10.5px;
  letter-spacing:.16em;padding:0 13px;cursor:pointer;white-space:nowrap;
  text-shadow:var(--sh-micro);transition:background .14s,color .14s}
.findbar .fcopy:hover{background:rgba(30,111,224,.28);color:#A8E7FF}
.findbar .fcopy:focus-visible{outline:1px solid var(--blue-hot);outline-offset:-3px}

.jfacts{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:10px;
  font-family:var(--wide);font-size:10px;letter-spacing:.16em;color:var(--blue-dim)}
.jfacts span{display:flex;gap:7px;align-items:baseline;min-width:0}
.jfacts b{font-family:var(--mono);font-weight:560;font-size:12px;letter-spacing:.03em;
  color:#4BB4FC;text-shadow:var(--sh-micro);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

.jdot b{color:var(--green);font-weight:560}
a.jdisc{margin-left:auto;font-family:var(--wide);font-size:10.5px;letter-spacing:.16em;
  color:#79D9FF;text-shadow:var(--sh-micro);white-space:nowrap;transition:color .14s}
a.jdisc:hover{color:#A8E7FF}

/* A READING THAT STOPPED READING SAYS SO IN ITS OWN COLOUR. Without this the
   word OFFLINE would render in the same blue as a healthy value. */
td.bad{color:var(--red);font-weight:560}

/* A PANEL HEADING MUST NOT PUSH THE PAGE SIDEWAYS. `.ph` is a nowrap flex row
   (title left, meta right), and on a phone "[ SERVER STATUS ]" + "STATUS:
   ONLINE" is wider than the screen, so the row overflowed and took the whole
   document's scroll width with it. Wrapping is the honest answer: the meta
   drops onto its own line instead of the page gaining a horizontal scrollbar.
   Scoped to narrow widths so nothing about the desk layout moves. */
@media(max-width:760px){
  .panel .ph{flex-wrap:wrap}
  .panel .ph .meta{white-space:normal}
}

/* ---------- header: the SEQS chip (2026-08-14) ---------------------------
   His order: "SEQ balance in the TOP RIGHT of the header, on every page".

   IT IS THE NAV'S GRAMMAR, NOT A NEW ONE. The header already has two square
   36px tool buttons (Discord, sound) and one wide account button; a third
   square tool would have read as a third icon, and a second wide button would
   have competed with the account. So the chip borrows the NAV's own
   `[ LABEL ]` form - the bracket pair in `.nav a i`, the same tracking, the
   same hover lift - and reads as one more destination rather than as a widget.

   ★ IT IS BUILT ONLY WHEN SIGNED IN (`_chrome.js`), so the signed-out header
   is byte-for-byte what it was and `.seqslot` collapses to nothing.

   ★ UNKNOWN IS A DASH ON A DOTTED FRAME. "0 SEQS" over a wallet the server
   could not read tells a player their money is gone; the dotted border is the
   theme's own mark for a reading nobody has, the same one the rankings ladder
   uses for an unclaimed place. */
.seqslot { display: flex; align-items: center; }
.seqslot:empty { display: none; }

.seqchip {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 12px 7px;
  border: 1px solid rgba(75, 180, 252, .34);
  box-shadow: 0 0 0 1px rgba(1, 5, 11, .9);
  font-family: var(--mono); font-size: 12px; letter-spacing: .17em;
  color: var(--blue); text-shadow: var(--sh-micro);
  transition: color .15s linear, border-color .15s linear, transform .18s cubic-bezier(.2,.8,.2,1);
}
.seqchip i { font-style: normal; color: var(--blue-dim); transition: color .14s; }
.seqchip .lbl { font-size: 11px; letter-spacing: .2em; }
.seqchip b {
  font-weight: 400; font-size: 13.5px; letter-spacing: .04em;
  color: #79D9FF; text-shadow: var(--sh-body);
  font-variant-numeric: tabular-nums;
}
.seqchip:hover { color: #79D9FF; border-color: #79D9FF; transform: translateY(-1px); }
.seqchip:hover i { color: var(--blue-hot); }
.seqchip:hover b { color: #A8E7FF; }
.seqchip.unknown { border-style: dotted; border-color: var(--rule); }
.seqchip.unknown b { color: var(--rule); text-shadow: var(--sh-micro); }

/* ---- the SKULLS chip (2026-08-15, his "add skulls somewhere here") -------
   Same frame, same grammar, same states as the SEQS chip - it is the same
   class plus a modifier, so the two can never drift apart on hover, on the
   unknown dash, or at a breakpoint.

   ★ THE GLYPH EXISTS FOR THE NARROW HEADER. Below 700px the chips drop their
   labels, and two bare numbers side by side name nothing. The skull mark
   takes the label's place at exactly that width - so the chip is always
   readable and is never wider than it has to be. */
.skullslot { display: flex; align-items: center; }
.skullslot:empty { display: none; }

.skullchip .ico { display: none; }
.skullchip .ico svg {
  width: 14px; height: 14px; display: block;
  color: var(--blue-dim); transition: color .14s;
}
.skullchip:hover .ico svg { color: var(--blue-hot); }

/* Below the width where the nav takes its own row the header is already tight,
   so the chips shrink. ★ BUT NEITHER ONE LOSES ITS NAME. This rule used to
   hide EVERY chip label, which was fine while there was one chip and became a
   defect the moment there were two: `[ ] 50,200` beside `[skull] 5` is an
   empty bracket pair that names nothing. Caught in the narrow render, not in
   review. So SKULLS swaps its six-letter word for its mark, and SEQ - three
   characters - simply keeps its word. */
@media (max-width: 700px) {
  .seqchip { padding: 7px 9px 6px; gap: 5px; }
  .skullchip .lbl { display: none; }
  .skullchip .ico { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .seqchip { transition: none; }
  .skullchip .ico svg { transition: none; }
}