/* ARGOWORLD — Arcade
   ------------------------------------------------------------------
   The supplied files disagreed again. DESIGN.md describes "Neon Tokyo":
   a dark cyberpunk ground with diffused neon glows. code.html renders a
   light 8-bit cabinet — lavender white, hot pink, chunky 4px black
   borders and hard offset pixel shadows. The screenshot is the cabinet,
   so the cabinet is the day look, and DESIGN.md's void gets to be the
   night one. That is not a compromise: an arcade is a bright machine in
   a dark room, and the two files describe the same object from opposite
   sides.

   Same markup as every other skin. Only the paint differs. */

/* ---------------------------------------------------------- tokens */

:root{
  --ground:#faf8ff;
  --surface:#ffffff;
  --surface-low:#f5f0fb;
  --surface-high:#f2eef8;
  --surface-highest:#ede6f5;
  --media:#1f0d2e;

  --ink:#1f0d2e;
  --muted:#4d4354;
  --faint:#988d9f;

  /* Structure is the frame of the cabinet: thick, black, unapologetic. */
  --rule:#1f0d2e;
  --hair:#e2d8ee;
  --bw:3px;              /* border weight */
  --bw-sm:2px;

  /* Two accents per view is the rule; these are the whole roster. */
  --accent:#e6a800;      /* coin yellow — the coin slot */
  --accent-hi:#ffc700;
  --accent-lo:#b88600;
  --accent-text:#c28e00;    /* the same yellow, poured a little darker for type */
  --accent-2:var(--ink); /* black — the second player, and the ink at night */
  --on-accent-2:#ffffff;
  --accent-3:#00aa88;    /* mint — the status lamps only; type is yellow */
  --accent-3-hi:#00e6b8;
  --accent-4:#e6a800;    /* coin yellow */
  --accent-4-hi:#ffc700;
  --accent-match:#8fcdea;   /* uncharted: an Argonaut matching the filter */
  --alert:#e6a800;

  --on-accent:#1f0d2e;      /* dark on yellow; it was white on pink */

  --display:"Press Start 2P","Courier New",monospace;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:"Press Start 2P","Courier New",monospace;
  --arcade:"VT323",monospace;

  --s-3xs:.125rem; --s-2xs:.25rem; --s-xs:.5rem; --s-sm:.75rem;
  --s-md:1rem; --s-lg:1.5rem; --s-xl:2rem; --s-2xl:3rem;
  --s-3xl:4rem; --s-4xl:6rem;
  --margin:2rem;
  --page:1200px;         /* desktop does not run to the edges */

  /* Depth is a hard offset block, never a blur. */
  --pixel:4px 4px 0 var(--ink);
  --pixel-sm:3px 3px 0 var(--ink);
  --pixel-accent:4px 4px 0 var(--ink), 6px 6px 0 var(--accent);
  --pixel-mint:4px 4px 0 var(--ink), 6px 6px 0 var(--accent-3-hi);
  --pixel-gold:4px 4px 0 var(--ink), 6px 6px 0 var(--accent-4-hi);
  --shadow:var(--pixel-sm);
}

@media(max-width:900px){ :root{ --margin:1rem; --bw:2px; --bw-sm:2px } }

/* Night: DESIGN.md's Neon Tokyo. The cabinet, unplugged from daylight —
   the black border loses its job, so the neon takes over as the edge. */
:root[data-theme="night"]{
  --ground:#0a0a12;
  --surface:#141220;
  --surface-low:#12101f;
  --surface-high:#1c1a28;
  --surface-highest:#201e2d;
  --media:#05050a;

  --ink:#e5dff4;
  --muted:#cfc2d6;
  --faint:#988d9f;

  --rule:#4d4354;
  --hair:#2a2837;

  --accent:#ffe04a;
  --accent-hi:#ffc700;
  --accent-lo:#fff0a0;
  --accent-text:#ffe04a;
  --accent-2:var(--ink);    /* light at night, for the same reason */
  --on-accent-2:#0a0a12;
  --accent-3:#00ffcc;
  --accent-3-hi:#4edea3;
  --accent-4:#ffe04a;
  --accent-4-hi:#ffc700;

  --on-accent:#0a0a12;

  /* Glows replace the offset blocks, diffused as DESIGN.md asks. */
  --pixel:0 0 16px rgba(255,224,74,.28);
  --pixel-sm:0 0 10px rgba(255,224,74,.22);
  --pixel-accent:0 0 18px rgba(255,224,74,.35);
  --pixel-mint:0 0 18px rgba(0,255,204,.28);
  --pixel-gold:0 0 18px rgba(255,224,74,.28);
  --shadow:var(--pixel-sm);
}

/* ------------------------------------------------------------ base */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:14px; line-height:22px;
  -webkit-font-smoothing:antialiased;
  /* the scanline the cabinet glass gives you for free */
  background-image:linear-gradient(rgba(31,13,46,0) 50%, rgba(31,13,46,.022) 50%);
  background-size:100% 4px;
}
:root[data-theme="night"] body{
  background-image:linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 50%);
}
img{max-width:100%; display:block; image-rendering:pixelated}
::selection{background:var(--accent); color:#fff}
a{color:var(--accent-text); text-decoration-thickness:2px; text-underline-offset:3px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:var(--bw-sm) solid var(--accent); outline-offset:2px;
}
*{border-radius:0 !important}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.blink{animation:blink 1s infinite steps(1)}
@media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* ------------------------------------------------------ typography */

/* Press Start 2P has no lowercase worth reading at length and no weights,
   so headings are short, uppercase and generously leaded. */
h1,h2,h3,h4{
  font-family:var(--display); margin:0; font-weight:400;
  text-transform:uppercase; letter-spacing:0; text-wrap:balance;
}
h1{font-size:26px; line-height:40px; text-shadow:3px 3px 0 var(--accent)}
h2{font-size:19px; line-height:32px; text-shadow:2px 2px 0 var(--accent)}
h3{font-size:15px; line-height:26px}
h4{font-size:12px; line-height:22px}
:root[data-theme="night"] h1{text-shadow:0 0 14px var(--accent)}
:root[data-theme="night"] h2{text-shadow:0 0 10px var(--accent)}

@media(max-width:900px){
  h1{font-size:16px; line-height:28px}
  h2{font-size:13px; line-height:24px}
  h3{font-size:12px; line-height:22px}
  h4{font-size:10px; line-height:19px}
}
p{margin:0}
strong,b{font-weight:700}

.lbl,.mono{
  font-family:var(--mono); font-size:9px; line-height:15px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.eyebrow{
  font-family:var(--mono); font-size:9px; line-height:15px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--accent-text);
  margin:0; display:flex; align-items:center; gap:var(--s-xs);
}
.eyebrow::before{
  content:""; width:9px; height:9px; background:var(--accent);
  border:1px solid var(--ink); flex:none; animation:blink 1s infinite steps(1);
  /* a wrapped eyebrow centres the marker between its lines; keep it on the first */
  align-self:flex-start; margin-top:3px;
}
:root[data-theme="night"] .eyebrow::before{border-color:var(--accent-text); box-shadow:0 0 8px var(--accent)}

/* The subtitle voice: VT323 is a terminal face, big and cheap to read. */
.lede{
  font-family:var(--arcade); font-size:24px; line-height:30px;
  letter-spacing:.02em; color:var(--muted); max-width:42rem; margin:0;
}

/* ---------------------------------------------------------- chrome */

.top{
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:var(--bw) solid var(--rule);
}
.top .in{
  max-width:var(--page); margin:0 auto; padding:var(--s-sm) var(--margin);
  display:flex; align-items:center; gap:var(--s-md); flex-wrap:wrap;
}
.mark{
  font-family:var(--display); font-size:17px; line-height:1;
  letter-spacing:.04em; text-transform:uppercase; color:var(--accent);
  text-decoration:none; white-space:nowrap; flex:none;
  text-shadow:2px 2px 0 var(--ink);
}
:root[data-theme="night"] .mark{text-shadow:0 0 10px var(--accent)}
.mark span{color:var(--accent-2)}

.telemetry{
  display:flex; align-items:center; gap:var(--s-sm);
  font-family:var(--mono); font-size:7px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
  padding:var(--s-2xs) var(--s-sm);
  border:var(--bw-sm) solid var(--rule); background:var(--surface-low);
}
.telemetry .dot{
  width:7px; height:7px; background:var(--accent-3-hi);
  border:1px solid var(--ink); flex:none; animation:blink 1s infinite steps(1);
}
.telemetry b{color:var(--accent-text); font-weight:400}
.telemetry .sep{color:var(--faint)}
@media(max-width:1300px){ .telemetry{display:none} }

ul.nav{list-style:none; margin:0 auto 0 0; padding:0; display:flex; gap:var(--s-2xs); flex-wrap:wrap}
ul.nav li{position:relative}
ul.nav a,.navbtn{
  display:block; font-family:var(--mono); font-size:9px; line-height:14px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; background:none; cursor:pointer; white-space:nowrap;
  padding:var(--s-xs) var(--s-sm); border:var(--bw-sm) solid transparent;
}
ul.nav a:hover,.navbtn:hover{color:var(--ink); background:var(--surface-high); border-color:var(--rule)}
ul.nav > li > a[aria-current],.navbtn[aria-current]{
  color:var(--on-accent); background:var(--accent);
  border-color:var(--rule); box-shadow:var(--pixel-sm);
}
.navbtn::after{content:" \25bc"; font-size:7px}
ul.nav ul{
  list-style:none; margin:0; padding:var(--s-2xs); position:absolute;
  top:100%; left:0; min-width:14rem; background:var(--surface);
  border:var(--bw) solid var(--rule); box-shadow:var(--pixel); display:none; z-index:60;
}
ul.nav li.has-sub:hover > ul,
ul.nav li.has-sub:focus-within > ul,
ul.nav li.has-sub > ul.open{display:block}
ul.nav ul a{border-color:transparent}
ul.nav ul a[aria-current]{background:var(--accent-2); color:var(--on-accent-2)}

#theme{
  flex:none; font-family:var(--mono); font-size:9px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--on-accent-2); background:var(--accent-2);
  border:var(--bw-sm) solid var(--rule); padding:var(--s-xs) var(--s-sm);
  cursor:pointer; box-shadow:var(--pixel-sm);
}
#theme:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
:root[data-theme="night"] #theme:active{box-shadow:none}

/* ---------------------------------------------------------- layout */

/* Desktop stops short of the edges — the cabinet has a bezel. */
.wrap{max-width:var(--page); margin:0 auto; padding:var(--s-xl) var(--margin) var(--s-4xl)}
.narrow{max-width:56rem}
.stack{display:flex; flex-direction:column; gap:var(--s-md)}
.stack-lg{display:flex; flex-direction:column; gap:var(--s-2xl)}
section{display:flex; flex-direction:column; gap:var(--s-md)}

.sec-hd{
  border-bottom:var(--bw) solid var(--rule); padding-bottom:var(--s-xs);
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-md); flex-wrap:wrap;
}

.tabs{
  display:flex; gap:var(--s-2xs); flex-wrap:wrap; align-self:flex-start;
  background:var(--surface); border:var(--bw) solid var(--rule);
  padding:var(--s-3xs); margin:var(--s-sm) 0 var(--s-2xs); box-shadow:var(--pixel-sm);
}
.tabs a{
  font-family:var(--mono); font-size:9px; line-height:14px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  padding:var(--s-xs) var(--s-sm); border:var(--bw-sm) solid transparent;
}
.tabs a:hover{color:var(--ink); background:var(--surface-high)}
.tabs a[aria-current]{background:var(--accent); color:var(--on-accent); border-color:var(--rule)}

/* ------------------------------------------------------- data rows */

.rows{border-top:var(--bw-sm) solid var(--rule)}
.rows > div{
  display:grid; grid-template-columns:11rem 1fr; gap:var(--s-md);
  padding:var(--s-xs) var(--s-xs); border-bottom:1px solid var(--hair);
  align-items:baseline; background:var(--surface-low);
}
.rows > div:nth-child(even){background:transparent}
.rows dt{
  font-family:var(--mono); font-size:9px; line-height:15px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted);
}
.rows dd{margin:0; font-size:14px; line-height:22px; font-weight:600}
.rows dd .sub{
  display:inline-block; font-family:var(--mono); font-size:8px; line-height:14px;
  letter-spacing:.02em; color:var(--accent-text); text-transform:uppercase; font-weight:400;
}
code{
  font-family:var(--mono); font-size:9px; letter-spacing:.02em;
  background:var(--surface-high); border:1px solid var(--rule); padding:.25em .4em;
}

.verify{border-top:var(--bw-sm) solid var(--rule)}
.verify > div{
  display:grid; grid-template-columns:14rem 1fr; gap:var(--s-md);
  padding:var(--s-xs); border-bottom:1px solid var(--hair);
  align-items:baseline; background:var(--surface-low);
}
.verify > div:nth-child(even){background:transparent}
.verify dt{
  font-family:var(--mono); font-size:9px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted);
}
.verify dd{
  margin:0; font-family:"Space Mono",monospace; font-size:11px;
  color:var(--ink); word-break:break-all;
}

/* -------------------------------------------------------- controls */

/* Everything you can press moves when you press it. */
.outlink,.showmore,.turn-bar button,#theme,.vbtn,button.pixelbtn{transition:none}
.outlink:active,.showmore:active,.vbtn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
:root[data-theme="night"] .outlink:active,
:root[data-theme="night"] .showmore:active,
:root[data-theme="night"] .vbtn:active{box-shadow:none}

.outlink{
  display:inline-flex; align-items:center; gap:var(--s-xs);
  background:var(--accent); color:var(--on-accent); text-decoration:none;
  font-family:var(--mono); font-size:10px; line-height:14px; letter-spacing:.02em;
  text-transform:uppercase; padding:var(--s-sm) var(--s-md);
  border:var(--bw-sm) solid var(--rule); box-shadow:var(--pixel-sm);
}
.outlink:hover{background:var(--accent-hi)}

.showmore{
  width:100%; background:var(--surface-high); color:var(--ink);
  border:var(--bw-sm) solid var(--rule); padding:var(--s-sm);
  font-family:var(--mono); font-size:9px; letter-spacing:.02em;
  text-transform:uppercase; cursor:pointer; box-shadow:var(--pixel-sm);
}
.showmore:hover{background:var(--accent); color:var(--on-accent)}

.textbtn{
  background:none; border:0; padding:0; color:var(--accent-text); cursor:pointer;
  font-family:var(--mono); font-size:9px; letter-spacing:.02em; text-transform:uppercase;
}
.textbtn:hover{text-decoration:underline}

.filters{display:flex; flex-wrap:wrap; gap:var(--s-xs)}
.filt{display:flex; flex-direction:column; gap:var(--s-3xs)}
.filt select,.filt input[type="text"]{
  font-family:var(--mono); font-size:9px; letter-spacing:.02em;
  background:var(--surface); color:var(--ink);
  border:var(--bw-sm) solid var(--rule); padding:var(--s-xs); min-width:10rem;
}
.filt input[type="text"]{min-width:0; width:8rem}
.filt select:hover{border-color:var(--accent-text)}
.filt option:disabled{color:var(--faint)}
.resultbar{
  display:flex; align-items:baseline; gap:var(--s-md); flex-wrap:wrap;
  background:var(--surface); border:var(--bw-sm) solid var(--rule);
  padding:var(--s-xs) var(--s-md); box-shadow:var(--pixel-sm);
}
.resultbar b{font-family:var(--mono); font-size:11px; color:var(--accent-text)}
.sortby{margin-left:auto}

/* ----------------------------------------------------------- grids */

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s-md)}
.grid-md{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.grid-even{grid-template-columns:repeat(6,1fr)}
@media(max-width:1000px){ .grid-even{grid-template-columns:repeat(4,1fr)} }
@media(max-width:620px){ .grid-even{grid-template-columns:repeat(3,1fr)} }
.grid-sm{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:var(--s-sm)}
.cell{display:block; text-decoration:none; color:inherit}
.cell .frame{
  aspect-ratio:1; background:var(--media); border:var(--bw-sm) solid var(--rule);
  overflow:hidden; position:relative;
}
.cell .frame img{width:100%; height:100%; object-fit:cover}
.cell:hover .frame{border-color:var(--accent-text); box-shadow:var(--pixel-sm)}
.cell .cap{
  display:flex; justify-content:space-between; gap:var(--s-xs); align-items:center;
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  color:var(--muted); padding-top:var(--s-2xs);
}
.cell .cap b{color:var(--ink)}
.cell.burned .frame{border-color:var(--accent-4-hi)}
.cell .marks{display:inline-flex; gap:2px; align-items:center}
.cell .marks i{width:5px; height:5px; background:var(--accent); display:block; border:1px solid var(--ink)}
.cell .marks i.burn{background:var(--accent-4-hi)}

/* -------------------------------------------- the on-chain frame */

[data-argonaut]{position:relative; background:var(--media)}
[data-argonaut]:not([data-state="ready"])::after{
  content:"LOADING\A ROM..."; white-space:pre; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--s-sm);
  font-family:var(--mono); font-size:8px; line-height:16px; letter-spacing:.02em;
  color:var(--accent-text); animation:blink 1s infinite steps(1);
}
[data-argonaut][data-state="failed"]::after{content:""}
[data-argonaut] .chainfail,.arfail{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:var(--s-md); text-decoration:none; line-height:16px;
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--accent-4-hi); background:var(--media);
}
[data-argonaut] .chainfail:hover{color:var(--accent-text)}
.arfail{background:var(--surface-high); color:var(--muted)}

.turn{position:relative; aspect-ratio:1; background:var(--media); overflow:hidden; border:var(--bw) solid var(--rule)}
.turn img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.turn .over{transition:opacity .2s steps(4)}
.turn[data-showing="source"] .over{opacity:0}
.fill{position:absolute; inset:0}
.turn-bar{display:flex; border:var(--bw) solid var(--rule); border-top:0}
.turn-bar button{
  flex:1; background:var(--surface-high); border:0; cursor:pointer; padding:var(--s-xs);
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted);
}
.turn-bar button + button{border-left:var(--bw-sm) solid var(--rule)}
.turn-bar button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}

/* -------------------------------------------------- token detail */

.detail{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  grid-template-rows:auto auto; gap:var(--s-sm) var(--s-xl); align-items:start;
}
.detail .art{grid-column:1; grid-row:1; display:block; min-width:0}
.detail .facts{grid-column:2; grid-row:1}
.detail .vers{grid-column:1; grid-row:2; display:flex; flex-direction:column; gap:var(--s-xs)}
.detail .turn{width:100%; height:auto; aspect-ratio:1; box-shadow:var(--pixel-accent)}
.detail h1{font-size:20px; line-height:34px}
h1.tokenid{font-size:24px; line-height:38px; margin-top:var(--s-md)}
.lbl.byline{letter-spacing:.06em; margin-top:var(--s-xs)}
.hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--s-xl); align-items:start}
@media(max-width:900px){
  .detail{grid-template-columns:1fr; grid-template-rows:auto auto auto}
  .detail .art{grid-row:1} .detail .vers{grid-row:2} .detail .facts{grid-row:3}
  .detail .turn{aspect-ratio:1; height:auto; width:100%; min-height:0}
  .detail h1{font-size:15px; line-height:26px}
  h1.tokenid{font-size:17px; line-height:28px; margin-top:var(--s-sm)}
  .hero{grid-template-columns:1fr}
}

.versions{display:flex; gap:var(--s-xs); flex-wrap:wrap}
.vbtn{
  background:var(--surface); border:var(--bw-sm) solid var(--rule); cursor:pointer;
  padding:var(--s-3xs); display:flex; flex-direction:column; gap:var(--s-2xs);
  align-items:center; width:4.6rem; box-shadow:var(--pixel-sm);
}
.vbtn:hover{border-color:var(--accent-text)}
.vbtn.on{border-color:var(--accent-text); background:var(--accent); box-shadow:var(--pixel-sm)}
.vsq{width:3.6rem; height:3.6rem; background:var(--media); display:block; overflow:hidden}
.vsq img{width:100%; height:100%; object-fit:cover; display:block}
.vlab{font-family:var(--mono); font-size:8px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted)}
.vbtn.on .vlab{color:var(--on-accent)}

.timeline{border-top:var(--bw-sm) solid var(--rule)}
.tl-item{
  display:grid; grid-template-columns:11rem 1fr; gap:var(--s-md);
  padding:var(--s-md) 0; border-bottom:1px solid var(--hair);
}
.tl-item.burn{border-left:var(--bw) solid var(--accent-4-hi); padding-left:var(--s-sm)}
.tl-when{
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  color:var(--muted); display:flex; flex-direction:column; gap:var(--s-3xs);
}
.tl-when b{color:var(--accent-text); font-size:11px}
.tl-item.burn .tl-when b{color:var(--accent-4)}
.tl-item h4{font-size:11px; margin:0 0 var(--s-2xs)}
.tl-item p{font-size:13px; line-height:20px; color:var(--muted); max-width:36rem}
.tl-item s{color:var(--faint)}
.tl-item b{color:var(--ink)}
.maskrow{margin-top:var(--s-xs)}
svg.mask{width:5.5rem; height:5.5rem; display:block; border:var(--bw-sm) solid var(--rule)}

/* -------------------------------------------------- front page */

.revstrip{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s-md)}
.rev{
  border:var(--bw) solid var(--rule); background:var(--surface);
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:var(--pixel-accent);
}
.rev:hover{background:var(--surface-low)}
.revshot{
  display:block; aspect-ratio:1; background:var(--media); overflow:hidden;
  border-bottom:var(--bw-sm) solid var(--rule); position:relative;
}
.revshot img{width:100%; height:100%; object-fit:cover; display:block}
.rev:not(.has-shot) .revshot::after{
  content:"LOADING"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:8px; letter-spacing:.04em; color:var(--accent-text);
  animation:blink 1s infinite steps(1);
}
.rev b{
  font-family:var(--mono); font-size:12px; color:var(--accent-text);
  padding:var(--s-sm) var(--s-sm) var(--s-2xs);
}
.rev span:not(.revshot){
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  color:var(--muted); padding:0 var(--s-sm);
}
.rev .n{color:var(--accent-text); padding-bottom:var(--s-sm)}

.boxes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-lg)}
.box{
  border:var(--bw) solid var(--rule); background:var(--surface);
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
}
.box:nth-child(1){box-shadow:var(--pixel-accent)}
.box:nth-child(2){box-shadow:var(--pixel-mint)}
.box:nth-child(3){box-shadow:var(--pixel-gold)}
.box:hover{background:var(--surface-low)}
.boxshot{display:block; aspect-ratio:16/10; background:var(--media); overflow:hidden}
.boxshot img{width:100%; height:100%; object-fit:cover; display:block}
.boxshot.wide img{object-position:top left}
.boxshot.ph{background:var(--surface-high)}
.boxshot.ph img{object-fit:contain; padding:var(--s-lg)}
.boxbody{
  display:flex; flex-direction:column; gap:var(--s-xs);
  padding:var(--s-md); border-top:var(--bw-sm) solid var(--rule);
}
.boxbody b{font-family:var(--display); font-size:13px; line-height:24px; text-transform:uppercase; font-weight:400}
.boxbody span{font-size:13px; line-height:20px; color:var(--muted)}
@media(max-width:900px){ .boxes{grid-template-columns:1fr} }

/* ------------------------------------------------------- listings */

.entry,.collentry{
  display:grid; grid-template-columns:12rem 1fr; gap:var(--s-lg);
  border:var(--bw) solid var(--rule); background:var(--surface); padding:var(--s-md);
  text-decoration:none; color:inherit; box-shadow:var(--pixel-sm);
}
.entry:hover,.collentry:hover{background:var(--surface-low); box-shadow:var(--pixel-accent)}
.entry .thumb,.collentry .thumb{
  aspect-ratio:1; background:var(--media); border:var(--bw-sm) solid var(--rule);
  overflow:hidden; position:relative;
}
.entry .thumb img,.collentry .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.entry .body,.collentry .body{display:flex; flex-direction:column; gap:var(--s-xs)}
.entry h3,.collentry h3{font-size:13px; line-height:24px}
.entry p,.collentry p{font-size:14px; line-height:22px; max-width:38rem; color:var(--muted)}
dl.mini{
  margin:var(--s-2xs) 0 0; display:flex; gap:var(--s-lg); flex-wrap:wrap;
  border-top:1px solid var(--hair); padding-top:var(--s-xs);
}
dl.mini div{display:flex; flex-direction:column; gap:var(--s-3xs)}
dl.mini dt{font-family:var(--mono); font-size:8px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted)}
dl.mini dd{margin:0; font-family:var(--mono); font-size:9px; color:var(--accent-text)}
@media(max-width:760px){
  .entry,.collentry{grid-template-columns:1fr}
  .entry .thumb,.collentry .thumb{max-width:12rem}
}

.news{border-top:var(--bw-sm) solid var(--rule)}
.news-item{
  display:grid; grid-template-columns:9rem 1fr; gap:var(--s-lg);
  padding:var(--s-md) 0; border-bottom:1px solid var(--hair);
}
.news-item .when{
  display:flex; flex-direction:column; gap:var(--s-3xs);
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted);
}
.news-item .when b{color:var(--accent-text); font-size:11px}
.news-item h4{font-size:11px; margin:0 0 var(--s-2xs)}
.news-item p{font-size:14px; line-height:22px; color:var(--muted); max-width:36rem}
.newshot{display:block; margin-top:var(--s-sm); max-width:22rem}
.newshot img{border:var(--bw-sm) solid var(--rule); box-shadow:var(--pixel-sm)}
@media(max-width:640px){
  .news-item,.tl-item{grid-template-columns:1fr; gap:var(--s-2xs)}
  .news-item .when,.tl-when{flex-direction:row; gap:var(--s-sm); align-items:baseline}
}

ol.how{
  margin:0; padding:0; list-style:none; counter-reset:h;
  border-top:var(--bw-sm) solid var(--rule);
}
ol.how li{
  display:grid; grid-template-columns:3rem 1fr; gap:var(--s-md);
  padding:var(--s-sm) 0; border-bottom:1px solid var(--hair);
  font-size:14px; line-height:22px; max-width:46rem;
}
ol.how li::before{
  counter-increment:h; content:"[" counter(h,decimal-leading-zero) "]";
  font-family:var(--mono); font-size:9px; color:var(--accent-text);
}
.no-list{display:flex; flex-direction:column; gap:var(--s-xs)}
.no-list div{
  display:flex; gap:var(--s-sm); font-size:14px; color:var(--muted);
  padding-left:var(--s-md); border-left:var(--bw) solid var(--accent-2);
}

.notice{
  border:var(--bw-sm) solid var(--rule); background:var(--surface);
  padding:var(--s-md); font-size:14px; line-height:22px; box-shadow:var(--pixel-gold);
}
.notice b{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--accent-4); margin-bottom:var(--s-xs);
}

figure.shot{margin:0; display:flex; flex-direction:column; gap:var(--s-xs)}
figure.shot img{width:100%; height:auto; border:var(--bw) solid var(--rule); display:block; box-shadow:var(--pixel-accent)}
figure.shot figcaption{
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted);
}

.bones{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s-xs)}
.bone{
  border:var(--bw-sm) solid var(--rule); background:var(--surface); padding:var(--s-sm);
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  align-items:flex-start; gap:var(--s-2xs); min-width:0; box-shadow:var(--pixel-sm);
}
.bone b,.bone span{min-width:0; max-width:100%; overflow-wrap:anywhere; line-height:15px}
.bone:hover{background:var(--accent); color:var(--on-accent)}
.bone:hover span{color:var(--on-accent)}
.bone b{font-family:var(--mono); font-size:9px; text-transform:uppercase}
.bone span{font-family:var(--mono); font-size:9px; color:var(--accent-text)}

.pager{
  display:flex; justify-content:space-between; gap:var(--s-md);
  font-family:var(--mono); font-size:9px; letter-spacing:.02em; text-transform:uppercase;
  border-bottom:var(--bw-sm) solid var(--rule); padding-bottom:var(--s-xs);
}
.pager a{text-decoration:none}
.pager a:hover{color:var(--accent-2)}
.pager span{color:var(--faint)}

.prose{max-width:44rem; display:flex; flex-direction:column; gap:var(--s-md); font-size:15px; line-height:25px}
.prose h2{font-size:13px; line-height:26px; margin-top:var(--s-sm)}
.prose table{border-collapse:collapse; width:100%; font-size:13px}
.prose th,.prose td{text-align:left; padding:var(--s-xs) var(--s-md) var(--s-xs) 0; border-bottom:1px solid var(--hair)}
.prose th{
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
}
.prose em{color:var(--accent-2); font-style:normal}

.breakdown{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s-lg) var(--s-xl)}
.breakdown .bd h4{
  font-family:var(--mono); font-size:9px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--accent-text); margin:0 0 var(--s-xs);
}
.breakdown table{border-collapse:collapse; width:100%; font-size:13px}
.breakdown th{
  font-family:var(--mono); font-size:8px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted); font-weight:400; text-align:left;
  padding:0 var(--s-xs) var(--s-2xs) 0; border-bottom:var(--bw-sm) solid var(--rule);
}
.breakdown td{padding:var(--s-2xs) var(--s-xs); border-bottom:1px solid var(--hair)}
.breakdown .num{
  text-align:right; font-family:var(--mono); font-size:9px;
  color:var(--muted); white-space:nowrap;
}
.breakdown .num.all{color:var(--accent-text)}
.breakdown tbody tr td:first-child{color:var(--ink); font-weight:600}

.field{position:relative; border:var(--bw) solid var(--rule); background:var(--surface); padding:var(--s-xs); box-shadow:var(--pixel-sm)}
.field canvas{display:block; cursor:pointer; width:100%; image-rendering:pixelated}
.utip{
  position:absolute; z-index:5; pointer-events:none; min-width:12rem; max-width:15rem;
  background:var(--surface); border:var(--bw-sm) solid var(--accent);
  padding:var(--s-xs) var(--s-sm); box-shadow:var(--pixel-sm);
  display:flex; flex-direction:column; gap:var(--s-3xs);
  font-family:var(--mono); font-size:8px; line-height:15px;
}
.utip b{color:var(--accent-text); font-size:9px}
.utip span{color:var(--muted)}
.ustats{border-top:var(--bw-sm) solid var(--rule)}
.ustat{
  display:grid; grid-template-columns:1rem 5rem 10rem 1fr; gap:var(--s-sm);
  align-items:center; padding:var(--s-xs) 0; border-bottom:1px solid var(--hair);
}
.ustat .sw{width:12px; height:12px; display:block; border:1px solid var(--ink)}
.ustat b{font-family:var(--mono); font-size:10px}
.ustat .lbl{font-size:8px}
.ustat .note{font-size:13px; color:var(--muted)}
@media(max-width:700px){
  .ustat{grid-template-columns:1rem 5rem 1fr}
  .ustat .note{display:none}
}

/* ---------------------------------------------------------- footer */

footer.foot{border-top:var(--bw) solid var(--rule); margin-top:var(--s-3xl); background:var(--surface-low)}
.ticker{
  background:var(--surface); border-bottom:var(--bw-sm) solid var(--rule);
  padding:var(--s-xs) 0;
}
.ticker > *{max-width:none}
/* The register's line belongs in the middle of the strip, with the activity
   lamp out on the right. Three columns rather than space-between: an empty first
   column of the same 1fr as the third is what keeps the middle one truly
   centred, whether or not the lamp is showing. */
.ticker{
  margin:0 auto; padding-left:var(--margin); padding-right:var(--margin);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--s-md); overflow:hidden;
}
.ticker::before{content:""}
.ticker .run{
  display:flex; align-items:center; justify-content:center; gap:var(--s-sm); min-width:0;
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.ticker .run .dot{
  width:9px; height:9px; background:var(--accent); border:1px solid var(--ink);
  flex:none; animation:blink 1s infinite steps(1);
}
@media(max-width:760px){  }

footer.foot .in{
  max-width:var(--page); margin:0 auto;
  padding:var(--s-md) var(--margin) var(--s-2xl);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-sm) var(--s-lg);
  font-family:var(--mono); font-size:8px; line-height:18px;
  letter-spacing:.02em; color:var(--muted);
}
footer.foot .in > div{display:flex; align-items:center; gap:var(--s-md); flex-wrap:wrap}
footer.foot .fmark{
  font-family:var(--display); font-size:12px; color:var(--accent);
  text-transform:uppercase; text-shadow:2px 2px 0 var(--ink);
}
:root[data-theme="night"] footer.foot .fmark{text-shadow:0 0 10px var(--accent)}
footer.foot .fmark span{color:var(--accent-2)}
footer.foot a{color:var(--muted); text-decoration:none; text-transform:uppercase}
footer.foot a:hover{color:var(--accent-text)}

/* Narrow screens: the two-column data rows stack, and long hashes and
   addresses are allowed to break rather than push the page sideways. */
@media(max-width:560px){
  .rows > div,.verify > div{grid-template-columns:1fr; gap:var(--s-3xs)}
  .rows dd,.verify dd{overflow-wrap:anywhere}
  code{overflow-wrap:anywhere}
}


/* ------------------------------------------------- the pairing slideshow */

/* Two frames, an arrow between them, and one crossfade across the pair. The
   stage keeps its own height so the page does not jump when a slide swaps —
   an aspect-ratio box rather than a measured one, because the left half is
   still arriving from the chain when the box has to be the right size. */

:root{ --pairfade:700ms }   /* must match FADE in pairshow.js */

.pairshow{display:flex; flex-direction:column; gap:var(--s-sm)}
.pair-stage{position:relative; display:grid}
.pair-stage > .pair{grid-area:1/1}
.pair{
  display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s-md);
  align-items:start; opacity:1;
  transition:opacity var(--pairfade) ease;
}
.pair.enter,.pair.leave{opacity:0}
.pairshow.still .pair{transition:none}
.pair-half{margin:0; display:flex; flex-direction:column; gap:var(--s-2xs); min-width:0}
.pair-half .frame{
  aspect-ratio:1; background:var(--media); border:var(--bw) solid var(--rule);
  overflow:hidden; position:relative; box-shadow:var(--pixel-accent);
}
.pair-half .frame img,.pair-half .frame [data-argonaut]{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.pair-half figcaption{font-size:8px; letter-spacing:.02em}
.pair-arrow{
  align-self:center; font-family:var(--mono); font-size:18px; color:var(--accent-text);
  padding-top:12%;
}
.pair-foot{display:flex; align-items:center; gap:var(--s-md); flex-wrap:wrap}
.pair-foot .lbl{font-size:8px}
.pair-dots{display:flex; gap:var(--s-2xs)}
.pair-dots button{
  width:10px; height:10px; padding:0; cursor:pointer;
  border:var(--bw-sm) solid var(--rule); background:var(--surface-high);
}
.pair-dots button.on{background:var(--accent)}
.pair-open{margin-left:auto; color:var(--accent-text); text-decoration:none; white-space:nowrap}
.pair-open:hover{text-decoration:underline}
@media(max-width:620px){
  .pair{grid-template-columns:1fr; gap:var(--s-xs)}
  .pair-arrow{padding:0; justify-self:center; transform:rotate(90deg)}
  .pair-open{margin-left:0}
}


/* ================================================================ responsive
   Three states, not a continuum: phone (one column, nav behind a button),
   tablet (two columns where two fit, nav still behind a button because the
   full row does not fit until ~900px), and desktop. Touch targets are 44px
   wherever a finger is the pointer, which is a separate question from width —
   a small laptop with a touchscreen wants them too. */

/* ---- the menu button, which only exists below the nav breakpoint ---- */
#menu{
  display:none; flex:none; cursor:pointer;
  font-family:var(--mono); font-size:9px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--on-accent); background:var(--accent);
  border:var(--bw-sm) solid var(--rule); padding:var(--s-xs) var(--s-sm);
}

@media(max-width:1180px){
  /* The bottom bar carries navigation on every phone and tablet, so the only
     control left in the header is the theme toggle. It belongs in the corner. */
  #menu{display:block; order:3; margin-left:auto}
  #theme{order:4; margin-left:auto}
  .top .in{flex-wrap:wrap; gap:var(--s-xs) var(--s-sm); padding-top:var(--s-xs); padding-bottom:var(--s-xs)}
  .mark{order:1}
  .telemetry{order:2}

  /* The panel. Hidden rather than removed so the links stay in the document
     for anything reading it without running the script. */
  ul.nav{
    order:5; display:none; width:100%; margin:0;
    flex-direction:column; gap:0;
    border-top:var(--bw-sm) solid var(--rule); padding-top:var(--s-2xs);
  }
  ul.nav.open{display:flex}
  ul.nav > li{width:100%}
  ul.nav a,.navbtn{width:100%; text-align:left; padding:var(--s-sm) var(--s-2xs)}

  /* No hover on a touch screen, so the submenu sits open in the flow rather
     than floating over content it cannot be dismissed from. */
  ul.nav ul{
    position:static; display:block; min-width:0; border:0; box-shadow:none;
    padding:0 0 var(--s-2xs) var(--s-md); background:none;
  }
  .navbtn{pointer-events:none}
  .navbtn::after{content:""}
}

@media(min-width:1181px){
  #menu{display:none !important}
  ul.nav{display:flex !important}
}

/* ---- the header signal stays on a phone; it is the point of the header ---- */
/* The header lives inside a container capped at --page, so a viewport wider
   than that buys it nothing. These parts never fit and are never shown. */
.telemetry{display:flex}
.telemetry .sep,.telemetry .tel-rev{display:none}
@media(max-width:420px){
  .telemetry{padding:2px var(--s-2xs); gap:var(--s-2xs)}
}

/* ---- tablet ---- */
@media(max-width:1024px){
  .boxes{grid-template-columns:1fr 1fr}
  .boxes > .box:first-child{grid-column:1 / -1}
  .revstrip{grid-template-columns:1fr 1fr}
  .breakdown{grid-template-columns:1fr 1fr}
}

/* ---- phone ---- */
@media(max-width:640px){
  .boxes{grid-template-columns:1fr}
  .boxes > .box:first-child{grid-column:auto}
  .revstrip{grid-template-columns:1fr 1fr}
  .breakdown{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .grid-md{grid-template-columns:repeat(2,1fr)}
  .grid-sm{grid-template-columns:repeat(3,1fr)}
  .hero{grid-template-columns:1fr}
  .tabs{width:100%; overflow-x:auto}
  .filters{gap:var(--s-2xs)}
  .filt{flex:1 1 46%}
  .filt select,.filt input[type="text"]{min-width:0; width:100%}
  .resultbar{gap:var(--s-xs)}
  .sortby{margin-left:0}
  .pager{font-size:8px}
}

/* ---- anything wide enough to need it can still scroll sideways ---- */
.prose table,.breakdown table{display:block; overflow-x:auto; max-width:100%}
.prose td,.prose th,.breakdown td,.breakdown th{white-space:nowrap}
.prose td:first-child,.breakdown td:first-child{white-space:normal}

/* ---- touch: 44px minimum, and no hover-only affordances ---- */
@media(hover:none){
  ul.nav a,.navbtn,.tabs a,#theme,#menu,.showmore,.turn-bar button,
  .outlink,.pager a,.textbtn{min-height:44px; display:flex; align-items:center}
  .tabs a,ul.nav a,.navbtn{justify-content:flex-start}
  #theme,#menu,.showmore,.turn-bar button{justify-content:center}
  .pair-dots button{width:16px; height:16px}
  .filt select,.filt input[type="text"]{min-height:44px}
  .vbtn{min-height:44px}
  /* A card that only reveals itself on hover reveals nothing on a phone. */
  .turn .over{transition:none}
}

/* At phone widths the wordmark, the signal, the menu and the theme toggle add
   up to more than the screen and wrapped to a second row — 105px of header
   before any content. Press Start 2P has a fixed advance, so the only lever is
   size; shrinking both text runs a step gets all four onto one line down to
   360px without hiding anything. */
@media(max-width:700px){
  .mark{font-size:17px}
  .telemetry{font-size:6px; padding:2px var(--s-2xs); gap:var(--s-2xs)}
  .telemetry .dot{width:6px; height:6px}
  #menu,#theme{font-size:8px; padding:var(--s-2xs) var(--s-xs)}
  .top .in{gap:var(--s-2xs) var(--s-xs)}
}
@media(max-width:400px){
  .mark{font-size:17px}
  .telemetry{font-size:5px}
}

/* On a phone the header carries one fact: when the artist last touched the
   work. The revision number and the wall clock are ornament at that size, and
   the clock ticking is the worst kind — motion with nothing to say. */
@media(max-width:820px){
  .telemetry .tel-utc{display:none}
}

/* Press Start 2P's offset shadow is a 2px block at every size, so at the 9-10px
   the phone header uses it stops reading as depth and starts reading as a
   misprint. One pixel keeps the effect and loses the ghosting. */
@media(max-width:820px){
  .mark,footer.foot .fmark{text-shadow:1px 1px 0 var(--ink)}
  h1{text-shadow:1px 1px 0 var(--accent)}
  h2{text-shadow:1px 1px 0 var(--accent)}
}
:root[data-theme="night"] .mark,
:root[data-theme="night"] footer.foot .fmark{text-shadow:0 0 10px var(--accent)}

/* A grid item defaults to min-width:auto, so it refuses to be narrower than
   its widest cell and the scroll container above never gets to do its job.
   Below ~340px that pushed the whole page sideways. */
.breakdown .bd{min-width:0}
.stack > *,.stack-lg > *,section > *{min-width:0}

/* The result bar mixed a one-line count with two stacked label-over-control
   pairs, so the boxes hung below the text line and the whole strip read as
   broken. Inside this bar the label sits beside its control and everything
   centres on one line; the fields then start where the text starts. */
.resultbar{align-items:center}
.resultbar .filt{flex-direction:row; align-items:center; gap:var(--s-xs)}
.resultbar .filt > .lbl{flex:none}
.resultbar input[data-find]{text-align:left}
@media(max-width:640px){
  .resultbar{align-items:flex-start; flex-direction:column}
  .resultbar .filt{width:100%}
  .resultbar .filt select,.resultbar .filt input[type="text"]{flex:1}
}


/* ======================================================= the evolving grid */

/* Eighteen tiles, six across and three down, beside a status panel. Each tile
   holds two stacked layers and crossfades between them, so a swap never shows
   an empty frame while the next Argonaut is being read from the chain. */

:root{ --efade:900ms }   /* must match FADE in evolve.js */

.evolve{
  display:grid; grid-template-columns:minmax(0,1fr) 17rem;
  grid-template-rows:auto auto;
  gap:var(--s-md) var(--s-lg); align-items:start;
}
.egrid{grid-column:1; grid-row:1}
.estatus{grid-column:2; grid-row:1}
/* Second row of the grid's own column, so it cannot be any other width. */
.elede{grid-column:1; grid-row:2; max-width:none}
.egrid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-xs)}
.ecell{
  position:relative; aspect-ratio:1; background:transparent;
  border:var(--bw-sm) solid var(--rule); overflow:hidden;
}
/* No loading state is drawn here. Elsewhere "LOADING ROM..." tells a reader
   the frame is coming; in a grid of twelve it is twelve apologies at once, so
   a tile stays empty until it has something to show. */
.egrid [data-argonaut]:not([data-state="ready"])::after{content:none !important}
.elayer{
  position:absolute; inset:0; opacity:0; z-index:1;
  transition:opacity var(--efade) ease;
}
.elayer.on{opacity:1}
/* The incoming frame sits above the outgoing one so it can dissolve over a
   solid picture rather than over the dark cell. */
.elayer.top{z-index:2}
.elayer img{width:100%; height:100%; object-fit:cover; display:block}

/* The status panel: the header telemetry given room to say more. */
.estatus{
  border:var(--bw) solid var(--rule); background:var(--surface); box-shadow:var(--pixel-mint);
  padding:var(--s-sm) var(--s-md);
  display:flex; flex-direction:column; gap:var(--s-xs);
}
.est-hd{
  display:flex; align-items:center; gap:var(--s-xs);
  font-family:var(--mono); font-size:9px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent-text);
  border-bottom:var(--bw-sm) solid var(--rule); padding-bottom:var(--s-xs);
}
.est-hd .dot{
  width:9px; height:9px; background:var(--accent-3-hi, var(--accent));
  border:1px solid var(--ink); flex:none; animation:blink 1s infinite steps(1);
}
.estatus dl{margin:0; display:flex; flex-direction:column; gap:var(--s-3xs)}
.estatus dl > div{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-sm); padding:2px 0; border-bottom:1px solid var(--hair);
}
.estatus dl > div:last-child{border-bottom:0}
/* Giving the rows a display value overrides what the hidden attribute does, so
   the status row rendered on every page whether or not there was anything to
   catch up on. hidden has to win — the same trap the sheets fell into. */
.estatus dl > div[hidden]{display:none !important}
.estatus dt{
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.estatus dd{
  margin:0; font-family:var(--mono); font-size:9px;
  color:var(--accent-text, var(--accent)); white-space:nowrap;
}

@media(max-width:1000px){
  .evolve{grid-template-columns:minmax(0,1fr)}
  .egrid{grid-column:1; grid-row:1}
  .estatus{grid-column:1; grid-row:2}
  .elede{grid-column:1; grid-row:3}
  .estatus dl{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:0 var(--s-md);
  }
}
@media(max-width:640px){
  .egrid{grid-template-columns:repeat(3,1fr)}
}

/* ===================================================== collection history */

/* One row per revision: what it is, what it did, and a way in. */
/* Four hairline-separated rows of near-identical numbers read as one block of
   noise. Each revision is its own event, so each row is its own object: a card
   with the version set as a filled plate, and its own accent from the cabinet's
   four so the eye can tell v2 from v3 without reading. */
.verlist{display:flex; flex-direction:column; gap:var(--s-md)}
.vrow{
  display:grid; grid-template-columns:8rem minmax(0,1fr) auto;
  gap:var(--s-md) var(--s-lg); align-items:center;
  padding:var(--s-md); border:var(--bw) solid var(--rule);
  background:var(--surface); box-shadow:var(--pixel-sm); border-bottom:var(--bw) solid var(--rule);
}
.vmark{
  display:flex; flex-direction:column; gap:var(--s-2xs);
  align-self:stretch; justify-content:center;
  padding:var(--s-sm); border:var(--bw-sm) solid var(--rule);
  background:var(--vtint, var(--accent));
}
.vmark b{
  font-family:var(--display); font-size:15px; line-height:1;
  color:var(--on-accent); font-weight:400;
}
.vmark span{
  font-family:var(--mono); font-size:8px; letter-spacing:.02em; color:var(--on-accent);

  /* Without this the date inherits the page line-height — 22px of line box
     for 8px of type — and the plate reads low, because the seven blank pixels
     under the date have nothing balancing them above. */
  line-height:1;
}
/* One plate for every revision. The accents used to cycle, which made four
   entries in one list look like four unrelated things; they are the same kind of
   event and now say so. */
.vrow{--vtint:var(--accent-4); box-shadow:var(--pixel-gold)}

/* The way in belongs to the card, so it wears the card's colour. */
.vgo .outlink{background:var(--accent-4)}
.vgo .outlink:hover{background:var(--accent-4-hi)}
.vbody{display:flex; flex-direction:column; gap:var(--s-xs); min-width:0; justify-content:center}
.vbody dl.mini{margin:0; border-top:0; padding-top:0; gap:var(--s-md) var(--s-xl)}
.vbody p{font-size:13px; line-height:20px; color:var(--muted); max-width:42rem}
.vbody p b{color:var(--ink)}
.vgo{align-self:center}
.vgo .outlink{white-space:nowrap}

@media(max-width:860px){
  .vrow{grid-template-columns:1fr; gap:var(--s-sm); align-items:start}
  .vmark{flex-direction:row; align-items:baseline; gap:var(--s-sm); align-self:start}
  .vgo{align-self:flex-start}
}

/* The grid is decoration; a failed read there should read as an empty frame,
   not as an error message. The token pages still say what went wrong. */
.elayer .chainfail{display:none}

/* A contract address or an IPFS CID has no break opportunities, so in a narrow
   column it simply sticks out and takes the page with it. The stacking rule
   below 560px hid this; it bit at 640. Breaking these is always right — they
   are identifiers to copy, not prose to read. */
.rows dd,.verify dd,.sub,dl.mini dd{overflow-wrap:anywhere}

/* On the narrowest phones a label and a nine-digit block number will not share
   a line, and both are held at nowrap so neither would give. Let the pair wrap
   onto two lines instead of pushing the page sideways. */
@media(max-width:430px){
  .estatus dl > div{flex-wrap:wrap; gap:0 var(--s-xs)}
  .estatus dd{white-space:normal}
}


/* Last resort. The header should never wrap; if content ever outgrows the row,
   the nav gives up space rather than the theme toggle dropping to a line of its
   own under the wordmark. */
@media(min-width:1181px){
  .top .in{flex-wrap:nowrap}
  ul.nav{min-width:0; flex-wrap:nowrap}
  ul.nav > li > a,.navbtn{white-space:nowrap}
}

/* Below ~560px the wordmark, the signal, the menu and the theme toggle cannot
   share a line, and letting them wrap dropped the toggle to the far left of a
   second row, directly under the wordmark, looking like a mistake. Give the row
   a deliberate shape instead: controls on the first line, the signal on its own
   full-width line beneath them. */
@media(max-width:560px){
  .top .in{gap:var(--s-2xs) var(--s-xs)}
  .mark{order:1}
  #menu{order:2; margin-left:auto}
  #theme{order:3; margin-left:auto}
  .telemetry{order:4; width:100%; justify-content:flex-start}
  ul.nav{order:5}
}


/* ==================================================== the bottom tab bar
   Phones and tablets get an app bar fixed to the bottom rather than a menu
   folded into the top corner: it is where a thumb already is, and it says what
   the sections are instead of hiding them behind an icon. Shown wherever the
   full nav does not fit — which is every phone and every tablet, including an
   iPad in landscape at 1180px. */

.tabbar{display:none}

@media(max-width:1180px){
  #menu{display:none !important}

  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    display:grid; grid-template-columns:repeat(5,1fr);
    background:var(--surface); border-top:var(--bw) solid var(--rule);
    box-shadow:0 -4px 0 var(--accent);
    /* clear of the home indicator on a phone */
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .tabbar a,.tabbar button{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; min-height:56px; padding:var(--s-2xs) 2px;
    background:none; border:0; cursor:pointer; text-decoration:none;
    font-family:var(--mono); font-size:7px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--muted); -webkit-tap-highlight-color:transparent;
  }
  .tabbar a + a,.tabbar a + button,.tabbar button + button{border-left:var(--bw-sm) solid var(--rule)}
  .tabicon{width:18px; height:18px; display:block; shape-rendering:crispEdges}
  .tabbar [aria-current]{color:var(--on-accent); background:var(--accent)}

  /* The bar sits over the page, so the page has to end above it. */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px))}

  /* ---- sheets ---- */
  /* Giving .sheet a display value overrides what the hidden attribute does,
     so both sheets rendered open on every page. hidden has to win. */
  .sheet[hidden]{display:none !important}
  .sheet{position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end}
  .sheet-back{position:absolute; inset:0; background:rgba(31,13,46,.55)}
  .sheet-card{
    position:relative; width:100%; max-height:70vh; overflow-y:auto;
    background:var(--surface); border-top:var(--bw) solid var(--rule);
    padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .sheet-hd{
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--s-sm) var(--s-md); border-bottom:var(--bw-sm) solid var(--rule);
    position:sticky; top:0; background:var(--surface);
  }
  .sheet-x{
    background:none; border:0; cursor:pointer; color:var(--accent-text);
    font-family:var(--mono); font-size:7px; text-transform:uppercase;
    min-height:44px; padding:0 var(--s-xs);
  }
  .sheet-card a{
    display:flex; flex-direction:column; gap:2px; text-decoration:none;
    padding:var(--s-md); border-bottom:1px solid var(--hair); color:inherit;
    min-height:44px;
  }
  .sheet-card a b{
    font-family:var(--display); font-size:11px;
    text-transform:uppercase; font-weight:400; color:var(--ink);
  }
  .sheet-card a span{font-size:13px; color:var(--muted); text-transform:none}
  .sheet-card a[aria-current]{background:var(--accent)}
  .sheet-card a[aria-current] b{color:var(--on-accent)}
  .sheet-card a[aria-current] span{color:var(--on-accent); opacity:.85}

  /* Do not let the page scroll underneath an open sheet. */
  html.sheet-open, html.sheet-open body{overflow:hidden}
}


/* The Argonos overview leads with the pairing, and it is the point of the page:
   both halves should be on screen together without scrolling. The sections above
   it give back some of their space so they are. */
.pairshow .pair-half .frame{display:block}
.pairshow .pair-half a.frame{cursor:pointer}
.pairshow .pair-half a.frame:hover{border-color:var(--accent-text)}
.pairshow .pair-half figcaption a{color:inherit; text-decoration:none}
.pairshow .pair-half figcaption a:hover{color:var(--accent-text)}
@media(min-width:861px){
  #argonos-overview .stack-lg{gap:var(--s-lg)}
  #argonos-overview .lede{margin-bottom:0}
  /* Size the pair off the viewport height rather than the column width, so
     both halves are on screen together instead of the second one being a
     scroll away. Square is preserved by aspect-ratio. */
  /* width:100% first: auto margins on a flex child shrink it to its content,
     and the content here is absolutely positioned, so it collapsed to 6px. */
  .pairshow .pair-half .frame{
    width:100%;
    /* Subtract what sits above the pair rather than taking a flat share of the
       viewport: the heading, tabs and links cost the same ~400px whatever the
       screen height, so a flat 44vh overflowed on short ones. The floor stops
       it collapsing to a stamp on a very shallow window. */
    max-width:min(100%, max(180px, calc(100vh - 30rem)));
    margin-left:auto; margin-right:auto;
  }
}


/* (1) The plate's captions belong under the picture, not under the column the
   picture sits in — the frame is capped by viewport height and centred, so a
   full-width caption drifted away from it. Match the frame's width and give the
   picture room to breathe above the label. */
.pairshow .pair-half{gap:0}
.pairshow .pair-half .frame{margin-bottom:var(--s-sm)}
.pairshow .pair-half figcaption{
  width:100%; max-width:min(100%, max(180px, calc(100vh - 30rem)));
  margin-left:auto; margin-right:auto;
}
@media(max-width:860px){
  .pairshow .pair-half figcaption{max-width:100%}
}


/* (1)(3) A label inside these components was losing to the component's own
   paragraph rule — .news-item p and .collentry p are more specific than .lbl,
   so a <p class="lbl"> came out at body size. On the collections card that made
   the kind label larger than the collection's name. The label class should win
   wherever it is deliberately applied. */
.news-item p.lbl,.entry p.lbl,.collentry p.lbl,.news-item p.lbl a{
  font-size:var(--lbl-size, 9px); line-height:15px;
}

/* (5) The pairing's caption belongs under the pictures and above the dots,
   centred on the pair rather than hanging off its left edge. */
.pair-foot{flex-direction:column; align-items:center; gap:var(--s-xs)}
.pair-foot [data-caption]{order:1; text-align:center; margin:0}
.pair-dots{order:2}
.pair-open{order:3; margin-left:0}


/* ==================================================== mobile corrections */

/* (4) The token page collapsed on a phone. The stacking rule set grid-row on
   each part but left grid-column alone, so .facts kept grid-column:2 from the
   desktop rule and conjured a second column that the template never declared —
   the artwork came out 78px wide. Placement has to be undone wherever the
   template is; the same mistake cost the front page its grid. */
@media(max-width:900px){
  .detail{grid-template-columns:minmax(0,1fr)}
  .detail .art{grid-column:1; grid-row:1}
  .detail .vers{grid-column:1; grid-row:2}
  .detail .facts{grid-column:1; grid-row:3}
  .detail .turn{width:100%; height:auto; aspect-ratio:1; max-width:none}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero > *{grid-column:1}
}

/* (2) On a phone the version plate spans the row, so its label should sit in
   the middle of it rather than hard against the left edge. */
@media(max-width:860px){
  .vmark{justify-content:center; text-align:center}
}

/* (3) The trait breakdown reads as a stack of small tables on a phone; give
   each one room and a rule so they do not run together. */
@media(max-width:640px){
  .breakdown{gap:var(--s-lg)}
  .breakdown .bd{border-top:1px solid var(--hair); padding-top:var(--s-sm)}
  .breakdown table{font-size:12px}
  .breakdown .num{font-size:8px}
}

/* (5) A row of links under an introduction wraps on a phone, and at label
   line-height the second line sat on top of the first. */
/* Raising the paragraph line-height alone did nothing: an inline-block link
   inherits it, so the box grew with the row advance and the gap stayed zero.
   The link keeps a tight line-height of its own; the row advance is what
   opens the space between wrapped lines. */
p.lbl{line-height:2.4}
p.lbl a{display:inline-block; line-height:1.4}


/* The field must not clip: overflow-x:hidden forces overflow-y from visible
   to auto, which put a vertical scrollbar beside the cells and, with overlay
   scrollbars, left a gap when it faded. The canvas is measured to the content
   box and re-measured whenever that box changes, so there is nothing to clip.
   The tooltip also lives in here and must be free to sit where it likes. */
/* The canvas draws whole cells only, so a few pixels of the frame are always
   left over. Split them evenly rather than letting them pile up on the right,
   where they read as a thicker border on that side. */
.field canvas{max-width:100%; display:block; margin-left:auto; margin-right:auto}

/* The footer strip runs the full width of the window, but what it says lines up
   with the page like everything else. */
.ticker{
  padding-left:max(var(--margin), calc((100% - var(--page)) / 2));
  padding-right:max(var(--margin), calc((100% - var(--page)) / 2));
}

/* The one fact the header carries should be readable. */
.telemetry{font-size:10px}
.telemetry .dot{width:9px; height:9px}
@media(max-width:700px){
  .telemetry{font-size:9px}
  .telemetry .dot{width:8px; height:8px}
}
@media(max-width:400px){
  .telemetry{font-size:8px}
}


/* On a phone the frame around the field costs three cells of width for nothing.
   Drop it there and the grid gets the whole screen, which is the only way all
   9,999 fit at a size worth looking at. */
@media(max-width:640px){
  .field{border:0; padding:0; background:none; box-shadow:none}
}


/* On a phone a revision card is one narrow column, and a left-aligned stack of
   short label/number pairs reads as a ragged edge. Centre the whole card: the
   plate, the measurements and the way in. */
@media(max-width:860px){
  .vrow{text-align:center}
  .vbody dl.mini{justify-content:center}
  .vbody dl.mini div{align-items:center}
  .vgo{align-self:center}
}


/* Refinement: the plate reads left and the way out sits right, so a card scans
   version -> what it did -> where to go. The measurements between them stay
   centred. (This supersedes the earlier centring of the plate.) */
@media(max-width:860px){
  .vmark{justify-content:flex-start; text-align:left}
  .vgo{align-self:flex-end}
}


/* .vrow is a grid, and in a grid align-self is the block axis — it can never
   move anything left or right. The inline axis is justify-self, which is what
   these actually needed. */
@media(max-width:860px){
  .vmark{justify-self:stretch; justify-content:flex-start; text-align:left}
  .vbody{justify-self:stretch}
  .vgo{justify-self:end; align-self:auto; text-align:right; width:100%}
}


/* The 44px touch rule set display:flex on these, which makes them block-level
   and stretches them across the card. They want the height, not the width —
   .showmore is the one that really is a full-width control and keeps flex. */
@media(hover:none){
  .outlink,.pager a,.textbtn{display:inline-flex; width:auto}
}


/* Centre the plate and the way out as well as the measurements, so a stacked
   card reads down one axis. (Supersedes the left/right split above.) */
@media(max-width:860px){
  .vmark{justify-self:stretch; justify-content:center; text-align:center}
  .vgo{justify-self:center; text-align:center; width:100%}
  .vgo .outlink{justify-content:center}
}
.vmark{text-align:center}


/* A work in the register may be a still, an animated GIF or a clip. They all
   sit in the same frame and are all capped the same way. */
.newshot video{
  display:block; width:100%; height:auto;
  border:var(--bw-sm, 1px) solid var(--rule);
}
.newshot img,.newshot video{max-width:100%}

/* The header stamp was enlarged for phones. On a desktop the header is dense
   and it can go back to what it was. */
@media(min-width:1181px){
  .telemetry{font-size:7px}
  .telemetry .dot{width:7px; height:7px}
}


/* An embedded post brings its own styling inside an iframe, so there is little
   to say here beyond giving it a sensible measure and keeping it from running
   wider than the column. Before the widget arrives — or if it never does — the
   blockquote underneath is the readable fallback, so it gets styled too. */
.tweet{max-width:34rem; margin-top:var(--s-xs)}
.tweet iframe{max-width:100% !important}
.tweet blockquote{
  margin:0; padding:var(--s-md);
  border:1px solid var(--hair); background:var(--surface);
  font-size:14px; line-height:22px; color:var(--muted);
}
.tweet blockquote p{margin:0 0 var(--s-xs)}
.tweet blockquote a{color:var(--accent-text)}


/* The panel's values are short numbers held on one line, but the catching-up row
   is a sentence and overflowed the frame by 33px. It is the one row allowed to
   wrap. */
.estatus .est-catch{flex-wrap:wrap}
.estatus .est-catch dd{white-space:normal; text-align:right; overflow-wrap:anywhere}
.estatus .est-catch dt{color:var(--accent-text)}
/* ------------------------------------------------- footer market strip */
/* The one genuinely live thing on a static site: it polls a small file and does
   its own arithmetic, so the 24-hour window slides while the page sits open.

   It is pinned to the bottom of the window rather than left at the end of the
   footer. A figure that changes while you read is only worth having if it is
   where you can see it, and a reader who never scrolls to the footer would never
   have seen it at all. Everything in it is set at the same size, so the strip
   reads as one line of instruments rather than a headline with captions. */
:root{ --market-h:38px }

.market{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:var(--market-h); box-sizing:border-box;
  display:flex; align-items:stretch; gap:0;
  background:var(--surface-low); border-top:var(--bw-sm) solid var(--rule);
  overflow:hidden;
  padding-left:max(var(--margin), calc((100% - var(--page)) / 2));
  padding-right:max(var(--margin), calc((100% - var(--page)) / 2));
}
.market[hidden]{display:none !important}

/* The strip floats over the page, so the page has to end above it. */
body{padding-bottom:var(--market-h)}

.market .mstat{
  flex:none; display:flex; align-items:center; gap:var(--s-xs);
  padding:0 var(--s-md) 0 0; margin-right:var(--s-md);
  border-right:var(--bw-sm) solid var(--rule); text-decoration:none;
}
.market .mstat:first-child{padding-left:0}
.market .mk,
.market .mv,
.market .mtape-run a{
  font-family:var(--mono); font-size:9px; letter-spacing:.02em;
  white-space:nowrap; line-height:1;
}
.market .mk{text-transform:uppercase; color:var(--muted)}
.market .mv{color:var(--accent-text)}
.market .mstat:hover .mv{color:var(--accent-text)}

.market .mtape{flex:1 1 auto; min-width:0; overflow:hidden; display:flex; align-items:center}
.market .mtape-run{
  display:flex; gap:var(--s-md); white-space:nowrap; flex:none;
  animation:tape 60s linear infinite;
}
.market .mtape:hover .mtape-run{animation-play-state:paused}
.market .mtape-run a{color:var(--ink); text-decoration:none}
.market .mtape-run a b{color:var(--ink)}
.market .mtape-run a .p{color:var(--accent-text, var(--accent))}
.market .mtape-run a i{color:var(--muted); font-style:normal}
.market .mtape-run a:hover{color:var(--accent-text)}
/* The list is printed twice, so travelling exactly half its width loops with no
   seam and no measuring. */
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .market .mtape-run{animation:none}
}

@media(max-width:1180px){
  /* The tab bar owns the bottom of the window on a phone or tablet, so the strip
     sits directly on top of it and the page ends above them both. */
  /* The tab bar is 56px of buttons plus its own top border, and that border is
     thinner on a small phone — so its height is asked for rather than assumed. */
  .market{bottom:calc(56px + var(--bw, 0px) + env(safe-area-inset-bottom, 0px))}
  body{padding-bottom:calc(56px + var(--bw, 0px) + var(--market-h) + env(safe-area-inset-bottom, 0px))}
}
@media(max-width:760px){
  /* A phone has room for one of the two, and the tape is the one that moves —
     the same sales the figures are counted from, but named and priced. */
  .market .mstat{display:none}
  .market{padding-left:var(--margin); padding-right:0}
  .market .mtape-run a{font-size:8px}
}

/* On a phone the register line is far wider than the screen, and it used to be
   cut off with an ellipsis — which hid most of what it had to say. Let it wrap
   onto as many lines as it needs; the strip is only as tall as its content. */
@media(max-width:760px){
  .ticker{overflow:visible}
  .ticker .run{
    white-space:normal; overflow:visible; text-overflow:clip;
    flex-wrap:wrap; justify-content:center; text-align:center; line-height:1.7;
  }
  .ticker .run > span{white-space:normal; overflow:visible; text-overflow:clip; min-width:0}
}

/* ------------------------------------------- derivatives menu headings */
/* Small labels that split the Derivatives menu into what it holds — the
   collections, and the tools. Quieter than the links, so the eye lands on the
   destinations and uses these only to find its place. */
ul.nav ul li.navgroup{
  font-family:var(--mono); font-size:7px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:var(--s-sm) var(--s-sm) var(--s-2xs) var(--s-2xs);   /* set out to the left of the links it heads */
  pointer-events:none; user-select:none;
  text-decoration:underline; text-underline-offset:3px;
}
ul.nav ul li.navgroup:first-child{padding-top:var(--s-2xs)}
.sheet-card .sheet-group{
  margin:0; font-family:var(--mono); font-size:8px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  padding:var(--s-md) var(--s-md) var(--s-2xs) var(--s-xs);
  text-decoration:underline; text-underline-offset:3px;
}

/* The picture a post carries, shown the instant the page loads while X's own
   embed is still on its way. Its size is known, so the space is held for it. */
.tweet blockquote .tweet-preview{
  display:block; width:100%; height:auto; margin:0 0 var(--s-xs);
  border:1px solid var(--hair); background:var(--surface-low);
}

/* ----------------------------------------------- servants: filter by person */
.news-item[hidden]{display:none !important}
.sf .sf-list{
  list-style:none; margin:0; padding:var(--s-sm) 0 0;
  display:flex; flex-wrap:wrap; gap:var(--s-xs);
}
.sf .sf-list button{
  font-family:var(--body); font-size:13px; line-height:18px; cursor:pointer;
  color:var(--ink); background:var(--surface); border:1px solid var(--hair);
  padding:var(--s-2xs) var(--s-sm);
}
.sf .sf-list button span{color:var(--muted)}
.sf .sf-list button:hover{border-color:var(--rule)}
.sf .sf-list button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent, var(--ink)); border-color:var(--rule)}
.sf .sf-list button[aria-pressed="true"] span{color:inherit}
.sf-active[hidden]{display:none !important}
.sf-active{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-sm); flex-wrap:wrap;
  margin-top:var(--s-sm); padding:var(--s-xs) var(--s-sm);
  border:1px solid var(--rule); background:var(--surface-low);
  font-size:14px;
}
.sf-clear{
  font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; color:var(--ink); background:none; border:1px solid var(--rule);
  padding:var(--s-2xs) var(--s-sm);
}
.sf-clear:hover{background:var(--accent); color:var(--on-accent, var(--ink))}

/* On a phone the names are folded into a drop-down, closed until asked for. */
.sf-toggle{display:none}
@media(max-width:760px){
  .sf-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    margin-top:var(--s-sm); padding:var(--s-xs) var(--s-sm); cursor:pointer;
    font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink); background:var(--surface); border:1px solid var(--rule);
  }
  .sf-toggle span{color:var(--muted); margin-left:var(--s-2xs); margin-right:auto}
  .sf-toggle::after{content:"\25BC"; font-size:8px}
  .sf.is-open .sf-toggle::after{content:"\25B2"}
  .sf .sf-list{display:none}
  .sf.is-open .sf-list{display:flex}
}

/* ------------------------------------------------------ home: submit */
.home-submit-links{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-md)}
.home-submit-more{
  font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-text, var(--accent)); text-decoration:none;
}
.home-submit-more:hover{text-decoration:underline}

/* ------------------------------------------------ theme toggle: a symbol */
/* A small square with a clean symbol, set a proper step away from the menu so it
   reads as a separate control rather than the last menu item. */
#theme{
  display:inline-flex; align-items:center; justify-content:center; line-height:0;
  width:30px; height:30px; padding:0;
}
@media(min-width:1181px){
  #sitenav{flex:none}
  #sitenav > li > a{padding-left:var(--s-xs); padding-right:var(--s-xs)}
  .telemetry{min-width:0; overflow:hidden}
  #theme{margin-left:var(--s-sm)}
}
#theme .theme-ic{width:14px; height:14px; display:block}
#theme .ic-sun{display:none}
:root[data-theme="night"] #theme .ic-moon{display:none}
:root[data-theme="night"] #theme .ic-sun{display:block}
@media(max-width:700px){
  #theme{width:28px; height:28px; padding:0}
  #theme .theme-ic{width:13px; height:13px}
}
@media(hover:none){ #theme{min-height:0} }

/* ---------------------------------------------- screenshots: smooth scaling */
/* Every img is drawn pixelated so the 24x24 Argonauts stay sharp. A screenshot of
   a website is not pixel art: scaled down that way it drops pixels instead of
   blending them, and text and edges turn jagged. These scale smoothly. */
.entry .thumb img,
figure.shot img,
.tweet blockquote .tweet-preview{image-rendering:auto}