/* mugentrading.io — the waitlist page is hero concept J, "neon DOM, face-on"
   (concepts/j-neon-dom-flat/, chosen over I 2026-10-14). Everything down to
   the small print is that concept's stylesheet, unchanged but for the sign-up
   form's error line; the other pages (inbox and survey, confirmed, the legal
   pages, 404) follow at the end, in the same palette and type but with a
   static night instead of the city.

   Concept I's rain-dark city, held still, and in front of it, standing in the
   air at the right, the app's DOM as a lit screen facing us square on,
   climbing at I's steady pace, its reflection in the wet street below. The
   words, the calm zone and the form are I's.

   File names in the url() references are bare; src/assets.rs rewrites them to the
   hashed URLs. */

@font-face {
  font-family: "Mincho Sub"; src: url("/assets/d3b79b942c/mincho-sub.woff2") format("woff2");
  font-weight: 400 800; font-display: block;
  /* Shippori Mincho B1 ExtraBold (OFL), cut down to the glyphs on this page. */
}
@font-face {
  font-family: "Inter"; src: url("/assets/865d86ccf6/inter-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: "Iosevka Term"; src: url("/assets/2e2a75068b/iosevka-term-latin.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
/* The dictionary entry: the IPA letters of Iosevka Term and Inter's true
   italic, each cut down to the few glyphs the entry uses. */
@font-face {
  font-family: "Iosevka Term"; src: url("/assets/004fa32d5e/iosevka-ipa.woff2") format("woff2");
  font-weight: 400; font-display: swap; unicode-range: U+025B, U+0261, U+02C8, U+02D0;
}
@font-face {
  font-family: "Inter"; src: url("/assets/7ae736987d/inter-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

:root {
  color-scheme: dark;
  /* Concept G's neon night: its ground and its text tiers. The scrim behind
     the words is G's sky seven tenths of the way down (#070C18), so it
     reads as more of the night, not as a box. */
  --bg: #04050A;
  --scrim: 7 12 24;
  --text: #EAF3FF;
  --text-2: #C8D2E0;
  --text-3: #A6AFBE;
  --text-4: #8B93A1;
  --accent: #5BD1FB;
  --accent-hover: #7BE0FF;
  --mincho: "Mincho Sub", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --mono: "Iosevka Term", "Mincho Sub", ui-monospace, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font: 400 16px/1.5 "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .35); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.todo { font-family: var(--mono); color: #F6B42A; }

/* ---- the city ---- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
}
.stage { position: absolute; inset: 0; z-index: -2; background: var(--bg); }
html:not(.js) .stage { background: url("/assets/dd6738f0f1/poster-1440.webp") center / cover no-repeat, var(--bg); }
/* G's scanlines and G's lens darkening, as G lays them, over every layer of
   the stage. On a wide screen the stage sits under the words' scrim, so the
   lines are all but gone behind the small print. */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / .26) 0 1px, transparent 1px 3px),
    radial-gradient(140% 110% at 50% 45%, transparent 45%, rgb(0 0 0 / .7) 100%);
}
canvas { display: block; }
#city, #fx { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The screen's glow over the city round it, as G's: blurred, at 0.6, in
   screen mode. Placed in plain pixels by scene.js. */
#halo { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; opacity: .6; mix-blend-mode: screen; filter: blur(10px); }
#fx { z-index: 2; pointer-events: none; }

/* The DOM's own layer: over the stage and over the words' scrim (the same
   z-index, later in the page), under the words. Nothing in it is near the
   words. On a stacked layout the stage is in the flow, so the layer goes
   over it. */
.holo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
html:not(.js) .holo { display: none; }
#dom, #refl, #bloom, .lines { position: absolute; left: 0; top: 0; }
/* The same glow laid over the screen itself. The layer is a group of its
   own, so screen mode here works against the screen alone; outside it the
   glow is #halo's, in the stage. */
#bloom { opacity: .6; mix-blend-mode: screen; filter: blur(10px); clip-path: inset(80px); }
/* G's scanlines across the screen, on the stage's own three-pixel pitch. */
.lines { background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .26) 0 1px, transparent 1px 3px); }

/* On a very wide screen the words and the DOM keep within one composition,
   centred — 1680 px, plus half of any height over 1080 up to 360 px, as
   scene.js has it — and the city runs on past both to the edges. */
.copy {
  position: relative; width: min(100%, 560px);
  margin-left: max(clamp(16px, 7vw, 120px), calc((100% - 1680px - min(180px, max(0px, (100vh - 1080px) / 2))) / 2 + 120px));
  padding: 56px 0;
}
/* The calm zone, on a wide screen where the city stands behind the words: a
   scrim of the night's own navy, laid over the whole stage (the rain and
   the lights in the air included) and under the words. Lighter behind the
   name, which is large and lit; strongest from the tagline down, behind the
   blurb, the readout and the small print; easing off soon past the words'
   right edge. scene.js keeps the city under it blank as well: no lit
   windows, no glass, no lamps, no beacons, no rain. The DOM's layer stands
   over the scrim, so it is never dimmed. */
@media (min-width: 1240px) {
  .copy::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -40px; bottom: -150px; left: -180px; right: -220px;
    background: linear-gradient(to right,
      rgb(var(--scrim) / .93) calc(100% - 220px),
      rgb(var(--scrim) / .62) calc(100% - 170px),
      rgb(var(--scrim) / .28) calc(100% - 110px),
      rgb(var(--scrim) / .08) calc(100% - 50px),
      transparent);
    -webkit-mask:
      linear-gradient(to right, transparent, #000 150px),
      linear-gradient(to bottom, transparent, rgb(0 0 0 / .7) 90px, rgb(0 0 0 / .7) 26%, #000 34%, #000 calc(100% - 170px), transparent);
    -webkit-mask-composite: source-in;
    mask:
      linear-gradient(to right, transparent, #000 150px),
      linear-gradient(to bottom, transparent, rgb(0 0 0 / .7) 90px, rgb(0 0 0 / .7) 26%, #000 34%, #000 calc(100% - 170px), transparent);
    mask-composite: intersect;
  }
}
.hud {
  margin: 0 0 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 11px/1.4 var(--mono); letter-spacing: .22em; color: var(--accent);
  text-shadow: 0 0 10px rgb(91 209 251 / .6);
}
/* One readout that wraps as wholes: the coordinates, then the place they
   name. */
.hud .grp { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.hud .sep { color: var(--text-4); text-shadow: none; }
/* The kana in the place name, from the page's own Mincho cut, not a system
   font. */
.hud [lang="ja"] { font-family: var(--mincho); letter-spacing: .12em; }

.lockrow { display: flex; align-items: stretch; gap: clamp(14px, 1.8vw, 26px); }
/* The neon sign: tube outlines, hung vertically beside the name. */
.sign {
  writing-mode: vertical-rl; flex: none;
  font: 800 clamp(44px, 4.6vw, 72px)/1 var(--mincho); letter-spacing: .08em;
  color: rgb(91 209 251 / .1);
  -webkit-text-stroke: 1.5px #9BE6FF;
  text-shadow: 0 0 6px rgb(91 209 251 / .9), 0 0 22px rgb(91 209 251 / .55), 0 0 60px rgb(10 150 255 / .45);
  padding: 10px 8px; border: 1px solid rgb(91 209 251 / .35);
  box-shadow: 0 0 24px rgb(10 150 255 / .25), inset 0 0 18px rgb(10 150 255 / .2);
}
/* The name, locked up: Mugen large with its chromatic split, and Trading
   Platform as a lit tube line beneath, tracked out to the same width. */
.title {
  margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-width: 0; font-weight: 400; font-size: clamp(76px, 9.2vw, 140px);
}
.wordmark {
  position: relative; display: block;
  font-size: 1em; font-weight: 600; letter-spacing: -.055em; line-height: .9;
  color: var(--text);
  text-shadow: 0 0 30px rgb(91 209 251 / .35), 0 0 80px rgb(10 150 255 / .25);
}
/* The chromatic split: two offset copies, red and blue, behind the face. */
.wordmark::before, .wordmark::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen; text-shadow: none;
}
.wordmark::before { color: rgb(255 42 58 / .55); transform: translate(-2px, 0); z-index: -1; }
.wordmark::after { color: rgb(10 150 255 / .7); transform: translate(2px, 1px); z-index: -1; }
.line {
  display: block; margin-top: .9em; margin-left: .03em;   /* clear of the g's descender */
  font-size: .2em; font-weight: 600; line-height: 1; letter-spacing: .3em; text-transform: uppercase;
  color: #D8F6FF;
  text-shadow: 0 0 4px rgb(91 209 251 / .9), 0 0 14px rgb(91 209 251 / .6), 0 0 34px rgb(10 150 255 / .45);
}
.tagline {
  margin: clamp(18px, 2.6vh, 26px) 0 0;
  font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.4; color: var(--text);
  text-shadow: 0 1px 10px var(--bg);
}
/* What the city shows, in one plain sentence. Measured on the rendered
   pixels behind it, scanlines and all (1280–2560 px, several frames):
   #C8D2E0 is 12.3:1 against the brightest of them; the small print
   (#A6AFBE) 8.5:1. */
.blurb {
  margin: 10px 0 0; max-width: 35em;
  font-size: 15px; line-height: 1.55; color: var(--text-2);
  text-shadow: 0 1px 8px var(--bg), 0 0 2px var(--bg);
}

/* The readout: a lit HUD box, like the callouts on the tower. */
.dict {
  position: relative; margin: clamp(16px, 2.4vh, 24px) 0 0; padding: 12px 16px 10px;
  border: 1px solid rgb(91 209 251 / .38);
  background: rgb(4 6 12 / .78);   /* G's readout */
  box-shadow: 0 0 18px rgb(10 150 255 / .16), inset 0 0 22px rgb(10 150 255 / .1);
  font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
.dict::before {   /* a lit corner, as on the callouts */
  content: ""; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent);
  filter: drop-shadow(0 0 4px var(--accent));
}
.dict dt { margin: 0 0 6px; font: 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--text-3); }
.dict .tag { margin-right: 10px; color: var(--accent); letter-spacing: .2em; text-shadow: 0 0 8px rgb(91 209 251 / .6); }
.dict .tag [lang="ja"] { font-family: var(--mincho); letter-spacing: .1em; }
.dict dfn { font: 600 17px/1 "Inter", sans-serif; letter-spacing: -.01em; font-style: normal; color: var(--text); margin-right: 4px; }
.dict .jp { font-family: var(--mincho); font-weight: 800; }
.dict dt .jp { font-size: 15px; color: var(--text); margin-right: 4px; letter-spacing: .04em; }
.dict .from { font: italic 13px/1 "Inter", sans-serif; letter-spacing: 0; color: var(--text-3); }
.dict dd { position: relative; margin: 0 0 2px; padding-left: 20px; }
.dict .n { position: absolute; left: 0; top: .1em; font: 11px/1.6 var(--mono); color: var(--accent); }
.dict i { color: var(--text); }

.signup { margin-top: clamp(20px, 3.2vh, 32px); }
.row { display: flex; gap: 8px; }
.input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px;
  font: inherit; font-size: 15px; color: var(--text);
  background: rgb(8 11 20 / .82); border: 1px solid #56627A; border-radius: 2px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.input::placeholder { color: var(--text-4); }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.button {
  height: 48px; padding: 0 20px; flex: none;
  font: inherit; font-size: 15px; font-weight: 600;
  color: #04050A; background: var(--accent); border: 0; border-radius: 2px; cursor: pointer;
  box-shadow: 0 0 22px rgb(91 209 251 / .45), 0 0 2px rgb(255 255 255 / .6) inset;
}
.button:hover { background: var(--accent-hover); }
.consent { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-3); text-shadow: 0 1px 6px var(--bg); }
/* Not in the concept: the note when a posted address was malformed. */
.form-error { margin: 10px 0 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: #F6B42A; text-shadow: 0 1px 6px var(--bg); }
.platforms { margin: 10px 0 0; font: 11px/1 var(--mono); letter-spacing: .24em; color: var(--text-3); }

/* ---- motion (script on, motion allowed) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .sign { animation: ignite 1.3s .5s both steps(1, end); }
  html.js .wordmark, html.js .line, html.js .hud { animation: rise .9s .9s both cubic-bezier(.2, .7, .2, 1); }
  html.js .tagline, html.js .blurb { animation: rise .9s 1.05s both cubic-bezier(.2, .7, .2, 1); }
  html.js .signup { animation: rise .9s 1.2s both cubic-bezier(.2, .7, .2, 1); }
  /* The readout scans in once the sign has caught: its own beat. */
  html.js .dict { animation: scan .7s 1.9s both cubic-bezier(.5, 0, .2, 1); }
  /* A glitch, briefly, now and then: scene.js adds .glitch for ~0.2 s. */
  html.glitch .wordmark::before { transform: translate(-7px, 0); clip-path: inset(18% 0 58% 0); }
  html.glitch .wordmark::after { transform: translate(6px, 2px); clip-path: inset(62% 0 12% 0); }
  html.glitch .wordmark { text-shadow: 0 0 30px rgb(91 209 251 / .5), -3px 0 rgb(255 42 58 / .35); }
}
/* Two flickers over a second, then on: neon catching (well under 3 per second). */
@keyframes ignite {
  0% { opacity: 0; } 20% { opacity: .85; } 32% { opacity: .1; } 58% { opacity: 1; } 66% { opacity: .35; } 74%, 100% { opacity: 1; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes scan { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.fine {
  max-width: 760px; margin: 0 auto; padding: 48px 16px 56px;
  font-size: 12px; line-height: 1.6; color: var(--text-3);
  border-top: 1px solid rgb(255 255 255 / .08);
}
.fine p { margin: 0 0 10px; }
.fine strong { color: var(--text-3); font-weight: 600; }
.fine nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: var(--text-3); }
.fine nav span { color: var(--text-4); }

/* ---- narrower screens: the words first, then the city and the DOM below
   them (scene.js reads the same query) ---- */
@media (max-width: 1239px) {
  .hero { display: block; min-height: 0; }
  .stage { position: relative; inset: auto; z-index: 0; height: 760px; }
  html:not(.js) .stage { background-position: center top; }
  .stage::after {
    background:
      repeating-linear-gradient(to bottom, rgb(0 0 0 / .26) 0 1px, transparent 1px 3px),
      linear-gradient(to bottom, var(--bg), transparent 6%, transparent 90%, var(--bg));
  }
  .copy { padding: 48px 0 12px; }
  .holo { z-index: 1; }
}
@media (max-width: 759px) {
  .stage { height: 700px; }
  html:not(.js) .stage { background: url("/assets/b328c9bd19/poster-390.webp") center top / cover no-repeat, var(--bg); }
  .copy { margin: 0; padding: 28px 16px 12px; width: 100%; }
  .hud { font-size: 10px; letter-spacing: .16em; margin-bottom: 18px; }
  .sign { font-size: 40px; padding: 8px 6px; }
  .title { font-size: 80px; }
  .tagline { font-size: 16px; margin-top: 14px; }
  .blurb { font-size: 14.5px; }
  .dict { margin-top: 14px; padding: 10px 12px 8px; font-size: 13px; }
  .signup { margin-top: 18px; }
  .row { flex-direction: column; }
  .input { flex: none; width: 100%; }
  .button { width: 100%; }
}

/* ==== the other pages ====================================================
   The inbox and survey, /confirmed, the legal pages and the 404: the same
   night, held still. No city and no script — a navy ground, G's scanlines
   laid behind the words (never over them), the lock-up small at the top, and
   a dimmed strip of the poster's skyline above the small print. Every text
   tier here is ≥ 7:1 on the darkest and the lightest of the ground
   (#C8D2E0 12.0:1, #A6AFBE 8.3:1 on #0B1428). */
body.inner {
  isolation: isolate; min-height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(to bottom, #04050A, #070C18 420px);
}
body.inner::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / .26) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 0%, rgb(14 24 48 / .55), transparent 70%);
}
body.inner main { flex: 1 0 auto; }
body.inner .fine nav span { color: var(--text-3); }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 10; padding: 8px 14px;
  font-weight: 600; text-decoration: none; color: #04050A; background: var(--accent); border-radius: 2px;
}
.skip-link:focus { top: 8px; }

/* The lock-up, small: the sign beside the name, as on the waitlist page. */
.masthead { padding: 28px 0 0; }
.lockup { display: inline-flex; align-items: stretch; gap: 12px; color: var(--text); text-decoration: none; }
.lockup .sign.sm { font-size: 20px; padding: 5px 4px; -webkit-text-stroke-width: 1px; box-shadow: 0 0 14px rgb(10 150 255 / .25), inset 0 0 10px rgb(10 150 255 / .2); }
.lockup .name { display: flex; flex-direction: column; justify-content: center; font-size: 40px; }
.lockup .wordmark { letter-spacing: -.045em; }
.lockup .line { margin-top: .55em; font-size: .24em; letter-spacing: .28em; }

.page { padding-top: 48px; padding-bottom: 64px; }
.h1 {
  margin: 0 0 20px; font-size: clamp(32px, 4.2vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -.025em;
  color: var(--text); text-wrap: balance; text-shadow: 0 0 30px rgb(91 209 251 / .25);
}
.h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text); }
.small { font-size: 14px; line-height: 1.5; }
.note-after { margin: 12px 0 0; color: var(--text-3); }
.prose { max-width: 65ch; color: var(--text-2); line-height: 1.65; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 40px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.prose h3 { margin-top: 24px; font-size: 17px; font-weight: 600; color: var(--text); }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--text); }
.page a { color: var(--accent); text-decoration-color: rgb(91 209 251 / .45); }
.page a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.page .todo { font-size: .9em; border: 1px dashed currentColor; border-radius: 2px; padding: 0 4px; }
.draft-note {
  max-width: 65ch; margin: 0 0 32px; padding: 12px 16px; font-size: 14px; line-height: 1.55; color: var(--text);
  border: 1px solid #F6B42A; background: rgb(4 6 12 / .78);
}
.draft-note strong { color: #F6B42A; }
.notice-list { list-style: none; padding: 0; }
.notice-list li { padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / .08); font-size: 14px; }

/* The survey: G's readout boxes for the choices. */
.survey { display: grid; gap: 32px; max-width: 40rem; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgb(255 255 255 / .08); }
.survey fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.survey legend { margin-bottom: 12px; padding: 0; font-weight: 600; color: var(--text); }
.choices { display: grid; gap: 8px; }
@media (min-width: 640px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; cursor: pointer;
  color: var(--text-2); background: rgb(4 6 12 / .78); border: 1px solid rgb(91 209 251 / .22);
}
.choice:hover { border-color: rgb(91 209 251 / .55); }
.choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.field { display: grid; gap: 8px; max-width: 24rem; }
.field label { font-size: 14px; color: var(--text-2); }
.field .input { flex: none; width: 100%; }
.survey-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button-quiet { color: var(--text); background: transparent; border: 1px solid #56627A; box-shadow: none; }
.button-quiet:hover { background: rgb(91 209 251 / .08); border-color: var(--accent); }

/* The skyline: a strip cut from the poster, dimmed, fading in and out. */
.skyline {
  flex: none; height: 220px; pointer-events: none;
  background: url("/assets/754dfad54b/skyline.webp") center bottom / cover no-repeat;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 55%, #000 80%, transparent);
  mask: linear-gradient(to bottom, transparent, #000 55%, #000 80%, transparent);
  opacity: .85;
}
body.inner .fine { width: 100%; border-top: 0; }
@media (max-width: 759px) {
  .masthead { padding-top: 20px; }
  .lockup .name { font-size: 34px; }
  .page { padding-top: 36px; }
  .skyline { height: 150px; }
}