/* $GIN — one stylesheet, no framework.

   Two layers, deliberately.

   THE SKIN is the art's: navy sampled off the flat templates, the cat's warm
   off-white, one silver gradient, a heavy poster gothic for anything that speaks. Every
   colour was sampled rather than picked — see docs/ui-context.md.

   THE CHROME is a night terminal, and it is machined out of silver: sections
   are windows with title bars and filenames, the only navigation is a taskbar
   along the bottom, and every edge on it is bevelled — light where it faces
   up, dark where it faces down.

   The chrome is still achromatic and it still never GLOWS. A bevel is
   reflected light; the cat is the only thing on this page that emits any, and
   nothing around him is allowed to compete with that. Value, never colour,
   and never a light of its own. */

:root {
  --night: #080e1c;
  --ink: #0d1c3b;
  --ink-lift: #13284f;
  --slate: #3c4c74;   /* rules and separators only — 2.1:1 on --night, never text */
  --haze: #9aa7c4;    /* body, 7.4:1 */
  --haze-2: #7686a6;  /* small print, 5.7:1 on --night and 5.0:1 on --ink */
  --cream: #fffdef;
  --lamp: #f2b263;

  --ag-1: #ffffff;
  --ag-2: #dfe4ee;
  --ag-3: #a9b2c4;
  --ag-4: #6f7a91;

  /* SILVER, PROPERLY. Two ramps, because one cannot do both jobs.

     --ag-chrome is polished metal and it is built around a HORIZON: the hard
     value flip at 46-50% where the surface stops reflecting the sky and
     starts reflecting the ground. That flip is the whole trick. The previous
     single ramp ran #737d92 to #f7f9fc — all mid-to-light, no darks — which
     is why it read as light grey with a shimmer rather than as metal. Note
     also the hue split: the top stops are cool (sky) and the 74% stop is
     deliberately less blue (ground). Silver is achromatic overall and never
     uniformly so.

     Only the biggest type gets it: the wordmark, the slogan slabs and the
     hero watermark. The primary button does NOT -- it has ink printed on it,
     so it takes --ag-coin below. Below about 40px the dark band closes up. */
  --ag-chrome: linear-gradient(176deg,
    #fbfcfe 0%, #cfd6e2 14%, #99a2b4 30%, #5f6878 46%,
    #eef2f8 50%, #c2c8d2 60%, #8d9199 74%, #b9bcc0 88%, #e6e9ee 100%);

  /* A struck coin: the same light direction, but the whole ramp lives in the
     top half of the value range so that dark ink on top of it stays readable.
     --ag-chrome here put its dark band straight through the middle of the
     button, exactly where the label sits, and "See the nights" nearly
     disappeared. A face you print on is not the same surface as a face you
     only look at. Worst point is #b9c1d0, which is 10:1 against --ink. */
  --ag-coin: linear-gradient(176deg, #ffffff 0%, #e9edf5 34%, #b9c1d0 52%, #e2e7f0 68%, #f6f8fc 100%);

  /* The same light direction as --ag-chrome with a shallower dark band, so
     the horizon survives down to about 28px. For type that is large but not
     enormous — the stat numerals, which go from 48px to 28px across the
     breakpoints. Worst point #7c8698 is 5.3:1 on --night. */
  --ag-chrome-soft: linear-gradient(176deg,
    #f8fafd 0%, #ccd3e0 26%, #7c8698 46%, #e6ebf3 52%, #a8b0c0 74%, #dde3ed 100%);

  /* The old ramp, kept for small type where the chrome horizon would close
     up: a lateral sheen, all mid-to-light on purpose. */
  --ag-sheen: linear-gradient(100deg, #7e879b 0%, #eef1f7 18%, #b6bdcd 34%, #f7f9fc 52%, #8c94a8 68%, #e3e7f0 86%, #737d92 100%);

  /* A machined edge: light where it faces up, dark where it faces down. This
     is reflected light, not emitted — the cat is still the only thing on this
     page that glows, and a bevel does not compete with him. */
  --ag-up: rgba(226, 232, 245, 0.22);
  --ag-down: rgba(3, 6, 14, 0.55);
  --ag-edge: inset 0 1px 0 var(--ag-up), inset 0 -1px 0 var(--ag-down);
  --ag-edge-in: inset 0 1px 0 var(--ag-down), inset 0 -1px 0 var(--ag-up);

  /* Dela Gothic One: heavy Japanese poster gothic. Chosen over the mincho it
     replaced because the silver needs a thick stroke to show its horizon -- on
     a thin face the chrome ramp collapses to flat grey -- and because it reads
     as a meme poster rather than a gallery label.

     IT HAS EXACTLY ONE WEIGHT. Asking it for 700 or 900 makes the browser fake
     a bold on top of an already-heavy face, which smears the strokes together.
     So every display rule takes --display-weight rather than a number, and
     swapping back to a multi-weight family is a change to this one token.
     Fallbacks are heavy sans for the same reason: a light fallback during the
     swap would flash the page thin. */
  --display: "Dela Gothic One", "Arial Black", "Hiragino Kaku Gothic StdN", "Yu Gothic", system-ui, sans-serif;
  --display-weight: 400;

  /* SMALL KANJI DO NOT GET THE POSTER FACE. Dela Gothic One is superb from
     about 40px up and illegible below it: at 14px every counter in a
     many-stroke character like 銀 (14 strokes) or 顔 (18) fills in and the
     glyph becomes a black clump. Checked side by side at 14, 24 and 52px
     before deciding. So every small Japanese mark -- the header and footer
     銀, the taskbar START, the panel-title kanji, the marquee separators, and
     the Japanese line under a slogan or in the error dialog -- uses the body
     gothic at 700, which keeps its counters open at every size. Large
     Japanese (the card glyphs, the hero watermark) stays on --display. */
  --kanji: "Zen Kaku Gothic New", "Hiragino Kaku Gothic StdN", "Yu Gothic", system-ui, sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --pad: clamp(1rem, 4vw, 4rem);
  --line: rgba(169, 178, 196, 0.18);
  --rule: 1px solid var(--line);

  /* The texture in every title bar, the way an old window had one. A light
     line AND a dark one now: a single light line is a stripe, a light/dark
     pair is a machined surface. */
  --stripes: repeating-linear-gradient(0deg,
    rgba(226, 232, 245, 0.06) 0 1px,
    rgba(3, 6, 14, 0.14) 1px 2px,
    transparent 2px 4px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  /* Clears the fixed taskbar. */
  padding-bottom: 3.5rem;
  background: var(--night);
  color: var(--haze);
  font: 400 clamp(1rem, 0.95rem + 0.25vw, 1.0625rem)/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is load-bearing: the width/height attributes on every <img> are
   presentational hints, and without this the height attribute wins over
   aspect-ratio and the tiles render 238x512 instead of square. */
img { max-width: 100%; display: block; height: auto; }

a { color: var(--ag-2); text-decoration-color: rgba(169, 178, 196, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--ag-1); text-decoration-color: currentColor; }

h1, h2, h3 { font-family: var(--display); font-weight: var(--display-weight); line-height: 1.15; color: var(--ag-1); margin: 0; }

:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--ag-1); color: var(--ink); padding: 0.75rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- the bar */

.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem var(--pad);
  background: rgba(8, 14, 28, 0.84);
  backdrop-filter: blur(14px);
  border-bottom: var(--rule);
}

.bar__mark { display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none; }
.bar__kanji { font-family: var(--kanji); font-weight: 700; font-size: 1.5rem; color: var(--ag-2); line-height: 1; }
.bar__word { font-family: var(--display); font-weight: var(--display-weight); font-size: 1.25rem; letter-spacing: 0.14em; color: var(--ag-1); }

/* The small wordmarks take the lateral sheen, not the chrome ramp: at 20px
   the horizon would land inside the stroke and read as a smudge. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .bar__word, .foot__mark span {
    background: var(--ag-sheen); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .foot__mark i { -webkit-text-fill-color: var(--ag-4); }
}

.bar__path { margin: 0 auto 0 0.5rem; font: 400 0.75rem var(--mono); letter-spacing: 0.08em; color: var(--ag-4); }

.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(242, 178, 99, 0.35);
  color: var(--lamp); font: 500 0.75rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.chip:hover { color: var(--lamp); border-color: rgba(242, 178, 99, 0.75); }
.chip__dot { width: 6px; height: 6px; background: var(--lamp); }

/* --------------------------------------------------------------- the hero */

.hero {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 7vw, 6rem) var(--pad) clamp(2rem, 5vw, 4rem);
}

/* One large 銀 behind the type, never rotated and never animated. */
.hero__kanji {
  position: absolute; left: -0.1em; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-weight: var(--display-weight); font-size: min(46vw, 34rem); line-height: 1;
  color: var(--ag-1); opacity: 0.05; pointer-events: none; user-select: none;
}
/* A brushed plate rather than a flat grey shape. It sits under body copy, so
   it stays far enough down in opacity to never fight it. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__kanji {
    background: var(--ag-chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

.hero__text { position: relative; }

.hero__eyebrow { margin: 0 0 1rem; color: var(--ag-3); font: 400 0.8125rem var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.hero__eyebrow i { font-style: italic; }

.wordmark {
  margin: 0 0 1.25rem;
  font-weight: var(--display-weight); font-size: clamp(4.5rem, 15vw, 10.5rem); letter-spacing: 0.02em; line-height: 0.9;
  color: var(--ag-2);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .wordmark { background: var(--ag-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

.hero__sub { margin: 0 0 2rem; max-width: 40ch; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem); color: var(--ag-3); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.hero__note { margin: 0; max-width: 46ch; font-size: 0.9375rem; color: var(--haze-2); }
.hero__note a { color: var(--haze); }

.hero__art { margin: 0; position: relative; }
.hero__art figcaption {
  margin-top: 0.75rem; font-family: var(--display); font-size: 0.9375rem; color: var(--ag-4); letter-spacing: 0.08em;
}

/* ------------------------------------------------------------- the window */

/* The frame around a single picture: the hero's, and the lightbox's. Its bar
   carries a filename and a size and no controls, so there is no button glyph
   on it pretending to be one. The panels below DO toggle, and theirs does. */
.win {
  border: 1px solid rgba(169, 178, 196, 0.22);
  border-top-color: rgba(226, 232, 245, 0.4);
  border-bottom-color: rgba(3, 6, 14, 0.6);
  background: var(--ink);
}

.win__bar {
  display: flex; align-items: center; gap: 0.75rem; margin: 0;
  padding: 0.45rem 0.7rem;
  font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ag-3);
  border-bottom: 1px solid var(--line);
  background-image: var(--stripes);
  box-shadow: var(--ag-edge);
}
.win__meta { margin-left: auto; color: var(--haze-2); }

.hero__art .win img { box-shadow: 0 30px 80px -40px rgba(120, 160, 220, 0.45); }

/* ------------------------------------------------------------- the panels */

.panel { margin: clamp(1rem, 2.5vw, 2rem) var(--pad); }
.panel > details, .panel__fixed {
  border: 1px solid var(--line);
  border-top-color: rgba(226, 232, 245, 0.34);
  border-bottom-color: rgba(3, 6, 14, 0.5);
  background: linear-gradient(180deg, rgba(13, 28, 59, 0.5), rgba(8, 14, 28, 0));
}

.panel__bar {
  display: flex; align-items: center; gap: 0.75rem; margin: 0;
  padding: 0.55rem 0.8rem;
  font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.12em;
  color: var(--ag-2);
  border-bottom: 1px solid var(--line);
  background-image: var(--stripes);
  box-shadow: var(--ag-edge);
}

summary.panel__bar { cursor: pointer; list-style: none; }
summary.panel__bar::-webkit-details-marker { display: none; }

.panel__jp { font-family: var(--kanji); font-weight: 700; font-size: 0.875rem; color: var(--ag-4); letter-spacing: 0.1em; }
.panel__count { margin-left: auto; color: var(--haze-2); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; }

/* The toggle state, drawn rather than iconified. It follows the count, so on
   a panel that does not collapse there is simply nothing there. */
summary.panel__bar::after { content: "[ − ]"; color: var(--ag-3); letter-spacing: 0; }
details:not([open]) > summary.panel__bar::after { content: "[ + ]"; }
summary.panel__bar:hover::after { color: var(--ag-1); }

.panel__body { padding: clamp(1.5rem, 4vw, 3rem); }

.panel--warn > .panel__fixed { border-color: rgba(242, 178, 99, 0.28); }
.panel--warn .panel__bar { color: var(--lamp); border-bottom-color: rgba(242, 178, 99, 0.2); }
.panel--warn .panel__jp, .panel--warn .panel__count { color: rgba(242, 178, 99, 0.7); }

/* ------------------------------------------------------------ the marquee */

.marquee { overflow: hidden; border-block: var(--rule); padding: 0.7rem 0; }
.marquee__track { display: flex; align-items: center; gap: 1.5rem; width: max-content; animation: slide 60s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee span { font: 400 0.75rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ag-4); white-space: nowrap; }
.marquee i { font-family: var(--kanji); font-weight: 700; font-style: normal; color: var(--slate); font-size: 0.8125rem; }

@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- the heads */

.head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.head h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 0.75rem; }
.head__sub { margin: 0; color: var(--haze); max-width: 58ch; }

/* ---------------------------------------------------------------- the art */

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.grid--six { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

.tile a {
  position: relative; display: block; overflow: hidden;
  border: 1px solid rgba(169, 178, 196, 0.16);
  background: var(--ink);
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.tile a:hover, .tile a:focus-visible {
  border-color: rgba(223, 228, 238, 0.55);
  box-shadow: 0 18px 45px -22px rgba(120, 160, 220, 0.6);
  transform: translateY(-2px);
}
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 320ms ease; }
.tile a:hover img { transform: scale(1.035); }

.tile b {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 0.85rem 0.7rem;
  font-family: var(--display); font-weight: var(--display-weight); font-size: 0.9375rem; letter-spacing: 0.04em;
  color: var(--cream);
  background: linear-gradient(180deg, rgba(8, 14, 28, 0), rgba(8, 14, 28, 0.85));
}

/* ------------------------------------------------------------ profile kit */

.kit { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.kit__banners { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }

.kit__pfp, .kit__banner {
  display: block; text-decoration: none; border: 1px solid rgba(169, 178, 196, 0.16); background: var(--ink);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.kit__pfp:hover, .kit__banner:hover, .kit__pfp:focus-visible, .kit__banner:focus-visible {
  border-color: rgba(223, 228, 238, 0.55);
  box-shadow: 0 18px 45px -22px rgba(120, 160, 220, 0.6);
}
.kit__banner img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }

.kit__label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; justify-content: space-between;
  padding: 0.7rem 0.9rem;
  font-family: var(--display); font-size: 0.9375rem; letter-spacing: 0.04em; color: var(--ag-2);
  border-top: var(--rule);
}
.kit__label i { font: 400 0.6875rem var(--mono); font-style: normal; letter-spacing: 0.08em; color: var(--haze-2); }

/* --------------------------------------------------------------- the name */

.cards { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.card { padding: clamp(1.25rem, 3vw, 2rem); background: var(--ink); border: 1px solid rgba(169, 178, 196, 0.14); }
.card__glyph { margin: 0 0 1rem; font-family: var(--display); font-weight: var(--display-weight); font-size: 3.25rem; line-height: 1; color: var(--ag-3); }
.card h3 { font-size: 1.3125rem; margin-bottom: 0.6rem; }
.card p:last-child { margin: 0; font-size: 0.9375rem; }
.card i { color: var(--ag-2); font-style: italic; }

.name__foot { margin: 0; max-width: 60ch; color: var(--haze-2); font-size: 0.9375rem; }

/* ------------------------------------------------------------- the status */

/* A config file, because that is the most boring possible way to say a thing
   that people need to believe. */
.cfg {
  margin: 0 0 1.5rem; padding: clamp(0.85rem, 2.5vw, 1.25rem) clamp(0.85rem, 2.5vw, 1.25rem) clamp(0.85rem, 2.5vw, 1.25rem) 0;
  background: rgba(8, 14, 28, 0.55); border: 1px solid var(--line);
  font: 400 clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem)/1.9 var(--mono);
  color: var(--haze-2);
  overflow-x: auto;
}

/* One grid row per line, numbered in a gutter, the way an editor shows a file.

   display:grid is what makes this safe inside a <pre>: the newlines between
   the line spans are whitespace-only text, and a grid container does not
   render those as rows of their own. As a plain block they would double-space
   the file. The numbers are generated content, so copying the file out still
   gives clean text with no digits in it. */
.cfg code { display: grid; counter-reset: line; }
.cfg .l { white-space: pre; min-height: 1.9em; counter-increment: line; }
.cfg .l::before {
  content: counter(line);
  display: inline-block; width: 3ch; margin-right: 1.25ch; padding-right: 1ch;
  text-align: right; color: var(--slate);
  border-right: 1px solid var(--line);
}

/* Syntax colour, so the structure reads before a word of it does:
   keys silver, values amber (the colour that means token state on this page),
   the operator a separator, comments subordinate. */
.cfg .k { color: var(--ag-2); }
.cfg .o { color: var(--slate); }
.cfg b { color: var(--lamp); font-weight: 500; }
/* The comments carry real information — "posted here first. nowhere else." is
   the sentence somebody needs to read — so they sit below the values but never
   drop below readable. --slate would be 2.1:1 here; it is only allowed on the
   operator and the gutter, which are decoration. */
.cfg i, .cfg .h { color: var(--haze-2); font-style: normal; }

/* One measure for the whole panel. The heading used to stop at 62ch while the
   address box and the config ran the full width of the window, so no two
   blocks shared an edge and a short value floated in a very long empty field. */
.status { max-width: 56rem; }
/* The site-wide .head cap is 62ch, which is measured in body text and is far
   too narrow for a 44px poster heading: "There is no token yet" wrapped and
   left "yet" alone on a second line. The heading takes the panel's measure;
   the paragraph under it keeps its own shorter one, because prose wants a
   narrower line than a box does. balance is the fallback for phones, so a
   forced wrap splits the words evenly instead of stranding the last one. */
.status .head { max-width: none; }
.status .head h2 { text-wrap: balance; }

.status__warn {
  margin: 0 0 1.5rem; padding: clamp(1rem, 3vw, 1.5rem);
  border-left: 2px solid rgba(242, 178, 99, 0.55); background: rgba(242, 178, 99, 0.05);
  color: var(--ag-2); font-size: 0.9375rem;
}
.status__warn p { margin: 0; }
/* The one sentence that matters, pulled out of the paragraph it was buried at
   the start of. */
.status__warn-head {
  margin-bottom: 0.6rem !important;
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.25;
  color: var(--lamp);
  text-wrap: balance;
}
/* A question and its answer, so the answer always starts its own line. Left to
   wrap, a phone broke it as "posted here? It is not / this one." and split the
   punchline in half. */
.status__warn-head span { display: block; color: var(--ag-1); }
.status__warn a { color: var(--lamp); text-decoration-color: rgba(242, 178, 99, 0.5); }

/* The three facts a buyer needs, in cells divided by hairlines. The 1px gap
   over an amber-tinted ground IS the divider, so there is no border to line up. */
.rules {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(242, 178, 99, 0.2); border: 1px solid rgba(242, 178, 99, 0.3);
}
.rules li { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem; background: var(--ink); }
.rules span { font: 500 0.6875rem var(--mono); letter-spacing: 0.14em; color: var(--haze-2); }
.rules strong {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.15; color: var(--ag-1);
}
.rules em { font-style: normal; font-size: 0.8125rem; color: var(--haze-2); }

.status__fine { margin: 0; color: var(--haze-2); font-size: 0.875rem; }

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

.foot { padding: clamp(2rem, 4vw, 3.5rem) var(--pad); border-top: var(--rule); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.foot__mark { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; font-family: var(--display); font-weight: var(--display-weight); letter-spacing: 0.12em; color: var(--ag-1); }
.foot__mark img { border-radius: 50%; }
.foot__mark i { font-style: normal; font-family: var(--kanji); font-weight: 700; color: var(--ag-4); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.foot__links a {
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(169, 178, 196, 0.16);
  background: linear-gradient(180deg, rgba(226, 232, 245, 0.07), rgba(3, 6, 14, 0.18));
  box-shadow: var(--ag-edge);
  color: var(--ag-2); text-decoration: none; white-space: nowrap;
  font: 500 0.6875rem var(--mono); letter-spacing: 0.1em;
  transition: border-color 140ms ease, color 140ms ease;
}
.foot__links a:hover { color: var(--ag-1); border-color: rgba(223, 228, 238, 0.5); }

.foot__none { margin: 0 0 0 auto; font-size: 0.875rem; color: var(--haze-2); max-width: 42ch; }
.foot__fine { margin: 0; max-width: 70ch; font-size: 0.875rem; color: var(--haze-2); }

/* ------------------------------------------------------------ the taskbar */

.task {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: rgba(11, 22, 45, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(169, 178, 196, 0.22);
  font: 500 0.6875rem var(--mono); letter-spacing: 0.1em;
  /* Lit along its top edge, the way the lip of a metal strip is. */
  box-shadow: inset 0 1px 0 var(--ag-up);
}

.task__start, .task__items a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(169, 178, 196, 0.16);
  color: var(--ag-3); text-decoration: none; white-space: nowrap;
  /* Each one is a key: raised, with a lit top edge and a shadowed bottom. */
  background: linear-gradient(180deg, rgba(226, 232, 245, 0.07), rgba(3, 6, 14, 0.18));
  box-shadow: var(--ag-edge);
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.task__start { color: var(--ag-1); border-color: rgba(169, 178, 196, 0.3); }
.task__start span { font-family: var(--kanji); font-weight: 700; font-size: 0.875rem; }

.task__items { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; }
.task__items::-webkit-scrollbar { display: none; }

.task__items a:hover, .task__start:hover { color: var(--ag-1); border-color: rgba(223, 228, 238, 0.5); }

/* Pressed, the way a taskbar button is pressed for the window you are in. */
.task__items a[aria-current="true"] {
  color: var(--ag-1);
  background: linear-gradient(180deg, rgba(3, 6, 14, 0.32), rgba(226, 232, 245, 0.06));
  border-color: rgba(223, 228, 238, 0.45);
  box-shadow: var(--ag-edge-in);
}

.task__warn { color: var(--lamp) !important; border-color: rgba(242, 178, 99, 0.3) !important; }
.task__warn[aria-current="true"] { background: rgba(242, 178, 99, 0.14) !important; border-color: rgba(242, 178, 99, 0.6) !important; }

.task__clock { margin: 0 0 0 auto; padding-left: 0.75rem; color: var(--haze-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- the button */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.5rem; border: 1px solid transparent;
  font: 700 0.9375rem/1 var(--body); letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn:active { transform: translateY(1px); }

/* A struck coin: the gradient as the face, the ink as the stamp. */
.btn--silver { background: var(--ag-coin); color: var(--ink); box-shadow: var(--ag-edge); }
.btn--silver:hover { color: var(--ink); box-shadow: var(--ag-edge), 0 12px 30px -12px rgba(200, 214, 240, 0.55); }
/* Pressed, the bevel inverts, which is what a real key does. */
.btn--silver:active { box-shadow: var(--ag-edge-in); }

.btn--ghost { background: transparent; border-color: rgba(169, 178, 196, 0.35); color: var(--ag-2); }
.btn--ghost:hover { border-color: var(--ag-2); color: var(--ag-1); }

/* ----------------------------------------------------------- the lightbox */

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 7, 14, 0.94);
  animation: fade 140ms ease;
}
.lightbox[hidden] { display: none; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__figure { margin: 0; max-width: 76rem; width: 100%; }
.lightbox__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(1rem, 3vw, 2rem); align-items: center;
  padding: clamp(1rem, 2.5vw, 1.75rem);
}
.lightbox__body img { width: 100%; max-height: min(70vh, 42rem); object-fit: contain; border: 1px solid var(--line); }
.lightbox figcaption h3 { font-size: clamp(1.375rem, 3vw, 2rem); margin-bottom: 0.75rem; }
.lightbox figcaption p { margin: 0 0 1.5rem; font-size: 0.9375rem; color: var(--haze); }
.lightbox__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.lightbox__close {
  margin-left: 0.5rem; width: 1.5rem; height: 1.5rem; padding: 0;
  display: grid; place-content: center;
  background: transparent; border: 1px solid var(--line); color: var(--ag-3);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { border-color: var(--ag-2); color: var(--ag-1); }

.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.75rem; height: 4rem;
  background: rgba(13, 28, 59, 0.75); border: 1px solid var(--line); color: var(--ag-2);
  font-size: 1.75rem; line-height: 1; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.lightbox__nav:hover { border-color: var(--ag-2); color: var(--ag-1); }
.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }

/* ---------------------------------------------------------------- a toast */

.toast {
  position: fixed; left: 50%; bottom: 4.5rem; z-index: 60; transform: translate(-50%, 1rem);
  margin: 0; padding: 0.65rem 1.2rem;
  background: var(--ag-1); color: var(--ink);
  font: 500 0.75rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease;
}
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------- the typed line */

/* One deadpan statement at a time under the wordmark, typed out and deleted.
   min-height holds a line and a half so the hero does not jump as lines of
   different lengths come and go. Each line rests complete for 2.4s, which is
   most of its life and is when a screenshot gets taken. */
.type {
  margin: 0 0 1.5rem; min-height: 1.6em;
  font: 400 clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem)/1.6 var(--mono);
  letter-spacing: 0.04em; color: var(--ag-2);
}
.type__caret {
  display: inline-block; width: 0.6em; height: 1.1em; margin-left: 0.15em;
  background: var(--lamp); vertical-align: -0.18em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* --------------------------------------------------------- the stat band */

.stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-block: var(--rule);
}
.stats li {
  padding: clamp(1rem, 2.5vw, 1.75rem) var(--pad);
  border-right: var(--rule);
}
.stats li:last-child { border-right: 0; }
.stats b {
  display: block;
  font: 500 clamp(1.75rem, 5vw, 3rem)/1 var(--mono); letter-spacing: -0.02em;
  color: var(--ag-1);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .stats b { background: var(--ag-chrome-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.stats span {
  display: block; margin-top: 0.5rem;
  font: 400 0.6875rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--haze-2);
}

/* ------------------------------------------------------- the error box */

.dialog {
  max-width: 34rem; margin: clamp(2rem, 5vw, 3.5rem) var(--pad);
  border: 1px solid rgba(242, 178, 99, 0.35);
  background: var(--ink);
  /* Sat slightly off the page, the way a dialog sits on top of a window. */
  box-shadow: 10px 10px 0 rgba(8, 14, 28, 0.55);
}
.dialog[hidden] { display: none; }

.dialog__bar {
  display: flex; align-items: center; margin: 0; padding: 0.45rem 0.5rem 0.45rem 0.8rem;
  font: 500 0.6875rem var(--mono); letter-spacing: 0.18em; color: var(--lamp);
  border-bottom: 1px solid rgba(242, 178, 99, 0.25);
  background-image: var(--stripes);
  box-shadow: var(--ag-edge);
}
.dialog__x {
  margin-left: auto; width: 1.4rem; height: 1.4rem; padding: 0;
  display: grid; place-content: center;
  background: transparent; border: 1px solid rgba(242, 178, 99, 0.35); color: var(--lamp);
  font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.dialog__x:hover { border-color: var(--lamp); background: rgba(242, 178, 99, 0.12); }

.dialog__body { display: flex; gap: 1rem; padding: clamp(1.25rem, 3vw, 1.75rem); }
.dialog__icon {
  flex: none; margin: 0; width: 2rem; height: 2rem;
  display: grid; place-content: center;
  border: 1px solid rgba(242, 178, 99, 0.5); color: var(--lamp);
  font: 700 1.125rem var(--mono);
}
.dialog__head { margin: 0 0 0.5rem; font: 500 1rem/1.4 var(--mono); color: var(--ag-1); }
.dialog__msg { margin: 0; font-size: 0.9375rem; color: var(--haze); }
.dialog__jp { margin: 0.5rem 0 0; font-family: var(--kanji); font-weight: 700; font-size: 0.9375rem; color: var(--ag-4); }

.dialog__actions {
  display: flex; gap: 0.6rem; justify-content: flex-end; margin: 0;
  padding: 0 clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
}

/* A small squared button, for the chrome. Mono, so it belongs to the window
   rather than to the page. */
.btn--dialog {
  padding: 0.45rem 1.1rem; border-color: rgba(169, 178, 196, 0.35);
  background: linear-gradient(180deg, rgba(226, 232, 245, 0.08), rgba(3, 6, 14, 0.2));
  color: var(--ag-2);
  font: 500 0.75rem var(--mono); letter-spacing: 0.1em;
  box-shadow: var(--ag-edge);
}
.btn--dialog:active { box-shadow: var(--ag-edge-in); }
.btn--dialog:hover { border-color: var(--ag-2); color: var(--ag-1); background: rgba(169, 178, 196, 0.08); }

/* --------------------------------------------------------- the slogans */

/* The slabs of type people screenshot. Nothing else is on the screen. */
.slogan { padding: clamp(3rem, 9vw, 7rem) var(--pad); border-block: var(--rule); }
.slogan--right { text-align: right; }

.slogan__en {
  margin: 0 0 1rem;
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(2.25rem, 8.5vw, 6rem); line-height: 0.98; letter-spacing: 0.01em;
  color: var(--ag-2);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .slogan__en { background: var(--ag-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.slogan__jp {
  margin: 0; font-family: var(--kanji); font-weight: 700;
  font-size: clamp(1rem, 2.5vw, 1.5rem); letter-spacing: 0.16em; color: var(--ag-4);
}

/* ------------------------------------------------- the contract address */

.ca { margin: 0 0 1.5rem; border: 1px solid rgba(242, 178, 99, 0.3); background: rgba(8, 14, 28, 0.55); }
.ca__bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; margin: 0;
  padding: 0.5rem 0.8rem;
  font: 500 0.6875rem var(--mono); letter-spacing: 0.14em; color: var(--haze-2);
  border-bottom: 1px solid rgba(242, 178, 99, 0.2);
  background-image: var(--stripes);
  box-shadow: var(--ag-edge);
}
.ca__warn { color: var(--lamp); }
.ca__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0; padding: 0.9rem 0.8rem; }
.ca__value {
  flex: 1 1 14rem;
  font: 500 clamp(1rem, 0.9rem + 0.5vw, 1.375rem) var(--mono); letter-spacing: 0.02em;
  color: var(--ag-1);
}
.ca__hint { font-weight: 400; font-size: 0.8em; color: var(--haze-2); }

/* Confirmation where the click happened, not only in a toast across the screen.
   The toast stays: it is the live region a screen reader actually announces. */
.js-copy-none[data-copied] { color: var(--lamp); border-color: rgba(242, 178, 99, 0.6); }

/* -------------------------------------------------- copy, from the grid */

/* Injected by app.js, because it is useless without JavaScript. It is the
   shortest path there is from looking at a picture to having it on your
   clipboard — no lightbox, no download, no file in a folder somewhere. */
.tile { position: relative; }
.tile__copy {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
  padding: 0.35rem 0.6rem;
  background: linear-gradient(180deg, rgba(28, 40, 66, 0.92), rgba(8, 14, 28, 0.92));
  border: 1px solid rgba(169, 178, 196, 0.35);
  box-shadow: var(--ag-edge);
  color: var(--ag-2); font: 500 0.625rem var(--mono); letter-spacing: 0.1em;
  cursor: pointer; transition: opacity 160ms ease, border-color 160ms ease, color 160ms ease;
}
.tile__copy:hover { border-color: var(--ag-2); color: var(--ag-1); }

/* Visible by default, hidden ONLY where hovering is genuinely possible.
   Written the other way round first — hidden by default, revealed by
   `@media (hover: none)` — which left an invisible but perfectly tappable
   button sitting over the corner of every picture on any device whose hover
   support the query did not resolve. A control you cannot see and can still
   press is worse than one that is always there. */
@media (hover: hover) {
  .tile__copy { opacity: 0; }
  .tile:hover .tile__copy, .tile__copy:focus-visible { opacity: 1; }
}

/* ------------------------------------------------------------ small print */

@media (max-width: 60rem) {
  .hero { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 26rem; }
  .kit { grid-template-columns: 1fr; }
  .lightbox__body { grid-template-columns: 1fr; }
  .lightbox__body img { max-height: 48vh; }
}

@media (max-width: 45rem) {
  .rules { grid-template-columns: 1fr; }
  .foot__none { margin-left: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li:nth-child(2) { border-right: 0; }
  .stats li:nth-child(-n+2) { border-bottom: var(--rule); }
  .dialog { margin-inline: var(--pad); box-shadow: 6px 6px 0 rgba(8, 14, 28, 0.55); }
  .dialog__body { flex-direction: column; gap: 0.75rem; }
  .bar__path { display: none; }
  .bar__mark { margin-right: auto; }
  .task__clock { display: none; }
  .task__start { padding: 0.4rem 0.5rem; }
  .lightbox__nav { width: 2.25rem; height: 3.25rem; font-size: 1.375rem; }
  .lightbox__body { padding: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .type__caret { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}