/* marPad, the website.
   The app has one font, no themes and no opinions. This page has all of the
   opinions, but still only one font. Every colour means something:
     caret  #2FD2E8  marPad, and text nobody touched
     meddle #FF3D6E  something touched your text
     notice #FFB224  marPad telling you about your file
     ion    #6F5BFF  space, nothing else                                     */

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --glass-deep: #0D1015;
  --glass: #303745;
  --silver: #C4CEDB;
  --white: #FFFFFF;
  --dim: #8A94A6;
  --caret: #2FD2E8;
  --caret-hi: #6AF0FF;
  --caret-lo: #14AEDA;
  --meddle: #FF3D6E;
  --notice: #FFB224;
  --ion: #6F5BFF;
  --line: rgba(196, 206, 219, 0.13);
  --panel: rgba(10, 12, 16, 0.82);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tb-h: 48px;
  --sb-h: 28px;
  --gutter: clamp(20px, 5vw, 64px);
  --blink: 1.06s;
  color-scheme: dark;
}

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

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

html {
  background: var(--glass-deep);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--tb-h) + 16px);
}

body {
  margin: 0;
  font: 400 16px/1.65 var(--mono);
  color: var(--silver);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: none;
  overflow-x: hidden;
}

::selection { background: rgba(47, 210, 232, 0.35); color: var(--white); }

a { color: var(--caret-hi); text-underline-offset: 3px; }

button { font: inherit; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--caret);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 400;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--caret);
  color: #031418;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus { transform: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

code, kbd { font-family: var(--mono); }

/* Words worth copying can be selected: prose, headings, the build commands,
   hashes, the demo's text and preview, the whole page in Text mode. The
   machinery around them can't: chrome, controls, the game, the artwork. */
.toolbar,
.statusbar,
.ruler,
button,
.btn,
.chip,
.hero-title,
.scroll-cue,
.pane figcaption,
.pane-arrow,
.lock,
.ghost-pop,
.det-data i,
.hash-k,
.verdict,
.sb-head,
.sb-actions,
.portal,
.portal-controls,
.portal-verdict dt,
.callouts,
.leaders,
.mw-toolbar,
.mw-tabs,
.mw-status,
.mw-gutter,
.mw-sheet,
.mw-pop,
.mw-quit,
.diagram-menu,
.diagram-view,
.disk-stage,
.glyphs,
.waterfall-wrap,
.arena {
  -webkit-user-select: none;
  user-select: none;
}

/* Text fields stay text fields, whatever surrounds them (Safari otherwise
   lets -webkit-user-select: none reach into them). */
textarea,
input {
  -webkit-user-select: text;
  user-select: text;
}

/* --------------------------------------------------------- the universe */

#space {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
}

.space-fallback {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 68% 14%, #cfe, transparent),
    radial-gradient(1.5px 1.5px at 82% 62%, #fff, transparent),
    radial-gradient(1px 1px at 34% 78%, #dff, transparent),
    radial-gradient(1px 1px at 52% 44%, #fff, transparent),
    radial-gradient(ellipse 60% 45% at 72% 38%, rgba(111, 91, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 18% 82%, rgba(20, 174, 218, 0.16), transparent 70%),
    var(--glass-deep);
}

/* Scanlines and a whisper of grain, over space but under the words. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.55;
}

/* The comet that follows the pointer only ever adds light. */
#trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Line numbers for the whole page, from the status bar's switch. */
.ruler {
  position: fixed;
  top: var(--tb-h);
  bottom: var(--sb-h);
  left: 0;
  width: 6ch;
  z-index: 40;
  overflow: hidden;
  display: none;
  font: 400 11px/24px var(--mono);
  color: rgba(196, 206, 219, 0.32);
  text-align: right;
  padding-right: 1ch;
  background: rgba(13, 16, 21, 0.55);
  border-right: 1px solid rgba(196, 206, 219, 0.07);
  pointer-events: none;
}

.ruler-inner { will-change: transform; }

.show-ruler .ruler { display: block; }

/* --------------------------------------------- the window's own chrome */

.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tb-h);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(13, 16, 21, 0.82), rgba(13, 16, 21, 0.58));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(196, 206, 219, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.brand-mark { width: 30px; height: 22px; overflow: visible; }

.brand-mark text { font: 800 21px var(--mono); fill: #E9EEF5; }

.brand-mark rect {
  fill: var(--caret);
  filter: drop-shadow(0 0 3px rgba(47, 210, 232, 0.9));
  animation: blink var(--blink) steps(1) infinite;
}

.tb-flex { flex: 1; }

.mode-switch {
  display: flex;
  padding: 3px;
  border-radius: 10px;
  background: rgba(48, 55, 69, 0.45);
  border: 1px solid rgba(196, 206, 219, 0.1);
}

.mode-switch button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  font: 500 13px/1 var(--mono);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

.mode-switch button:hover { color: var(--white); }

.mode-switch button[aria-checked="true"] {
  background: rgba(196, 206, 219, 0.15);
  color: var(--white);
}

.mode-switch svg,
.tb-gh svg { width: 16px; height: 16px; flex: none; }

.mode-switch svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }

.tb-gh {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--silver);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.tb-gh svg { fill: currentColor; }

.tb-gh:hover { color: var(--white); background: rgba(196, 206, 219, 0.08); }

.statusbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sb-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  font: 400 12px/1 var(--mono);
  white-space: nowrap;
  color: var(--dim);
  background: rgba(13, 16, 21, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(196, 206, 219, 0.08);
}

.sb-left,
.sb-right { display: flex; align-items: center; gap: 4px; min-width: 0; }

.sb-left { overflow: hidden; }

.sbb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.sbb:hover { color: var(--white); background: rgba(196, 206, 219, 0.08); }

.sbb-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.sbb-toggle .num { stroke-width: 1; }

.sbb-toggle[aria-pressed="true"] { color: var(--caret); }

.sb-sel { white-space: nowrap; }

.sb-eol { padding: 0 3px; }

.sb-eol.is-on { color: var(--caret); }

.sb-enc { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }

.sb-enc svg { width: 8px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.3; }

.sb-notice { color: var(--meddle); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }

.sb-notice::before { content: "⚠"; font-size: 11px; }

.goto {
  position: absolute;
  left: 10px;
  bottom: calc(100% + 8px);
  width: min(340px, calc(100vw - 20px));
  padding: 12px;
  border-radius: 12px;
  background: rgba(22, 26, 34, 0.97);
  border: 1px solid rgba(196, 206, 219, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  color: var(--silver);
}

.goto label { display: flex; align-items: center; gap: 10px; font-size: 13px; }

.goto input {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid rgba(47, 210, 232, 0.5);
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font: 13px var(--mono);
  outline: none;
}

.goto ul { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }

.goto li button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--silver);
  font: 12.5px/1.3 var(--mono);
  text-align: left;
  cursor: pointer;
}

.goto li button:hover,
.goto li button:focus-visible { background: rgba(47, 210, 232, 0.14); color: var(--white); outline: none; }

.goto li span { color: var(--dim); }

/* ------------------------------------------------------- shared pieces */

main { display: block; }

section { position: relative; }

.touch,
.bytes,
.disk,
.font,
.creep { padding: clamp(110px, 17vh, 210px) 0 clamp(60px, 9vh, 120px); }

.col {
  width: min(1160px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.sec-head { max-width: 70ch; margin-bottom: clamp(36px, 6vh, 72px); }

.sec-head h2,
.get h2 {
  margin: 0 0 0.5em;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}

.sec-head p {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
}

/* Markdown's own syntax, shown as syntax. */
.md {
  color: var(--caret);
  font-weight: 400;
  text-shadow: 0 0 18px rgba(47, 210, 232, 0.55);
}

.md-strong { color: var(--white); font-weight: 700; }

.md-strong::before,
.md-strong::after {
  content: "**";
  color: var(--caret);
  font-weight: 400;
  opacity: 0.6;
}

/* Section headings hang their ## in the margin, as a text view would show
   them if it had a margin. Only where the margin is wider than "## " at the
   heading's size: below 1440 px it would be cut off at the window's edge. */
@media (min-width: 1440px) {
  .sec-head h2,
  .get h2 {
    margin-left: -3ch;
    padding-left: 3ch;
    text-indent: -3ch;
  }
}

/* Headings are typed in, a character at a time. */
.js .typed-head .ch { opacity: 0; }

.js .typed-head.typed .ch {
  animation: type-in 0.6s ease-out forwards;
  animation-delay: calc(var(--i) * 26ms);
}

.typed-head .caret-head {
  opacity: 0;
  animation: none;
}

.js .typed-head.typed .caret-head {
  animation: caret-once calc(var(--n) * 26ms + 3.2s) steps(1) forwards;
}

@keyframes type-in {
  0% { opacity: 1; color: var(--caret-hi); text-shadow: 0 0 22px var(--caret); }
  100% { opacity: 1; }
}

@keyframes caret-once {
  0% { opacity: 0; }
  1% { opacity: 0; }
  2% { opacity: 1; }
  30% { opacity: 0; }
  45% { opacity: 1; }
  60% { opacity: 0; }
  75% { opacity: 1; }
  95% { opacity: 0; }
  100% { opacity: 0; }
}

/* The caret, as in the icon: a cyan bar with a glow and a highlight. */
.caret {
  display: inline-block;
  width: 0.16em;
  height: 0.74em;
  margin-left: 0.1em;
  border-radius: 0.03em;
  background: linear-gradient(180deg, var(--caret-hi), var(--caret-lo));
  box-shadow: 0 0 0.14em rgba(47, 210, 232, 0.9), 0 0 0.5em rgba(47, 210, 232, 0.35);
  animation: blink var(--blink) steps(1) infinite;
  vertical-align: baseline;
  position: relative;
}

.caret-inline { width: 0.55ch; height: 1.05em; vertical-align: -0.18em; margin-left: 0.15ch; }

.caret-head { width: 0.12em; }

@keyframes blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* Buttons. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 15px 22px;
  border-radius: 12px;
  border: 1px solid rgba(196, 206, 219, 0.22);
  background: rgba(48, 55, 69, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  font: 600 15px/1 var(--mono);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s, background-color 0.2s;
}

.btn:hover {
  border-color: rgba(47, 210, 232, 0.65);
  box-shadow: 0 0 0 1px rgba(47, 210, 232, 0.2), 0 0 26px rgba(47, 210, 232, 0.28);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  border-color: transparent;
  background: linear-gradient(180deg, var(--caret-hi), var(--caret-lo));
  color: #031418;
  box-shadow: 0 0 20px rgba(47, 210, 232, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.btn-primary:hover {
  border-color: transparent;
  box-shadow: 0 0 36px rgba(47, 210, 232, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}

.btn-small { padding: 10px 14px; font-size: 13px; border-radius: 9px; }

.btn-big { padding: 19px 30px; font-size: 17px; border-radius: 14px; }

.btn-meddle:hover {
  border-color: rgba(255, 61, 110, 0.75);
  box-shadow: 0 0 0 1px rgba(255, 61, 110, 0.2), 0 0 26px rgba(255, 61, 110, 0.32);
}

.chip {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(13, 16, 21, 0.62);
  color: var(--silver);
  font: 500 13px/1 var(--mono);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.chip:hover { border-color: rgba(196, 206, 219, 0.35); color: var(--white); }

.chip[aria-pressed="true"] {
  border-color: var(--caret);
  background: rgba(47, 210, 232, 0.13);
  color: var(--white);
  box-shadow: inset 0 0 16px rgba(47, 210, 232, 0.22);
}

.chip-meddle[aria-pressed="true"] {
  border-color: var(--meddle);
  background: rgba(255, 61, 110, 0.14);
  box-shadow: inset 0 0 16px rgba(255, 61, 110, 0.25);
}

/* --------------------------------------------------------- # marPad */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--tb-h) + 6vh) 0 calc(var(--sb-h) + 10vh);
}

.hero-title {
  margin: 0 0 0.18em -0.04em;
  font-size: clamp(60px, 12.4vw, 200px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--white);
  white-space: nowrap;
}

.hero-hash {
  background: linear-gradient(180deg, #FFFFFF 10%, #C4CEDB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.035em 0.04em rgba(0, 0, 0, 0.6));
}

.hero-name {
  text-shadow: 0 0 0.25em rgba(47, 210, 232, 0.18), 0 0.035em 0.05em rgba(0, 0, 0, 0.6);
}

.caret-hero::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 0.015em;
  height: 0.008em;
  min-height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.hero-lede {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.4;
  color: var(--silver);
}

.hero-ask {
  margin: 1.6em 0 0;
  font-size: clamp(17px, 1.55vw, 22px);
  color: var(--white);
  min-height: 1.6em;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.6em; }

/* Small and dim, and the galaxy can pass behind it: a halo of the background
   keeps stars from cutting through the letters. */
.hero-meta {
  margin: 1.4em 0 0;
  font-size: 14px;
  color: rgba(196, 206, 219, 0.72);
  text-shadow: 0 0 3px var(--glass-deep), 0 0 8px var(--glass-deep), 0 0 14px var(--glass-deep);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sb-h) + 22px);
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: rgba(196, 206, 219, 0.12);
}

.scroll-cue span {
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: linear-gradient(transparent, var(--caret));
  animation: cue 2.2s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes cue { to { top: 110%; } }

/* The intro: hero.js types the title in, then lets everything else on. */
.intro .hero-title { visibility: hidden; }

.intro .hero-title.typing { visibility: visible; }

.intro .hero-title.typing .ch:not(.on),
.intro .hero-ask .ch:not(.on) { display: none; }

.intro .hero-lede:not(.on),
.intro .hero-ask:not(.on),
.intro .hero-actions:not(.on),
.intro .hero-meta:not(.on),
.intro .scroll-cue:not(.on) { opacity: 0; }

.intro .toolbar:not(.on) { transform: translateY(-110%); }

.intro .statusbar:not(.on) { transform: translateY(110%); }

.hero-lede,
.hero-actions,
.hero-meta,
.scroll-cue,
.hero-ask,
.toolbar,
.statusbar { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }

.hero-title .ch.on.fresh { animation: phosphor 0.7s ease-out; }

@keyframes phosphor {
  0% { color: var(--caret-hi); text-shadow: 0 0 0.3em var(--caret); }
}

.shock {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 1.5px solid var(--caret-hi);
  box-shadow: 0 0 24px 2px rgba(47, 210, 232, 0.75);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  animation: shock 1.5s cubic-bezier(0.15, 0.75, 0.3, 1) forwards;
}

.shock.late { animation-delay: 0.12s; border-color: rgba(111, 91, 255, 0.9); box-shadow: 0 0 30px rgba(111, 91, 255, 0.6); opacity: 0; }

@keyframes shock {
  0% { width: 0; height: 0; opacity: 1; }
  100% { width: 240vmax; height: 240vmax; opacity: 0; }
}

/* ---------------------------------------- ## Ten helpers, all switched off */

.touch-panels {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: stretch;
}

.pane {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(10, 12, 16, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.pane-mine {
  border-color: rgba(47, 210, 232, 0.38);
  box-shadow: 0 0 70px -24px rgba(47, 210, 232, 0.55);
}

.pane-theirs { transition: border-color 0.35s, box-shadow 0.35s; }

.pane-theirs.is-meddled {
  border-color: rgba(255, 61, 110, 0.55);
  box-shadow: 0 0 70px -20px rgba(255, 61, 110, 0.6);
}

.pane figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.pane-title { color: var(--white); font-weight: 600; }

.pane-sub { color: var(--dim); text-align: right; }

.pane-theirs.is-meddled .pane-sub { color: var(--meddle); }

.pane-text {
  flex: 1;
  display: block;
  width: 100%;
  min-height: 11em;
  margin: 0;
  padding: 16px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--white);
  font: 400 15px/1.8 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: var(--caret);
}

.pane-mine .pane-text:focus { background: rgba(47, 210, 232, 0.03); }

.pane-arrow { position: relative; }

.pane-arrow span {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  height: 2px;
  background: linear-gradient(90deg, var(--caret), var(--silver));
  opacity: 0.55;
}

.pane-arrow span::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -5px;
  border: 6px solid transparent;
  border-left: 9px solid var(--silver);
  border-right: 0;
}

.hashline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
}

.hashline code { color: var(--caret); letter-spacing: 0.02em; }

.pane-theirs.is-meddled .hashline code { color: var(--meddle); }

.verdict { margin-left: auto; }

.verdict.ok { color: var(--caret); }

.verdict.bad { color: var(--meddle); }

/* What the helpers do, drawn on the right pane. */
.chg {
  color: var(--white);
  background: rgba(255, 61, 110, 0.2);
  box-shadow: inset 0 -2px 0 var(--meddle);
  border-radius: 3px;
}

.flash { animation: meddle-flash 0.75s steps(3) 1; }

@keyframes meddle-flash {
  0% { text-shadow: -3px 0 var(--meddle), 3px 0 var(--caret); filter: blur(0.5px); }
  20% { text-shadow: 4px 0 var(--meddle), -4px 0 var(--caret); }
  40% { text-shadow: -2px 0 var(--meddle), 2px 0 var(--caret); }
  60% { text-shadow: 2px 0 var(--meddle), -1px 0 var(--caret); }
  100% { text-shadow: none; filter: none; }
}

.sq {
  text-decoration: underline wavy var(--meddle);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

.sq-grammar { text-decoration-color: #3FB950; }

.det-link { color: #58A6FF; text-decoration: underline; text-underline-offset: 3px; }

.det-data { border-bottom: 1px dotted var(--silver); }

.det-data i {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0 0.3em;
  border-radius: 4px;
  background: rgba(196, 206, 219, 0.2);
  font-style: normal;
  font-size: 0.7em;
  line-height: 1.5;
  vertical-align: 0.15em;
}

.ghost { color: rgba(196, 206, 219, 0.38); }

.ghost-pop {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0 0.5em;
  border-radius: 5px;
  background: #2B6FE0;
  color: var(--white);
  font-size: 0.78em;
  line-height: 1.6;
  vertical-align: 0.1em;
}

/* A target lock: brackets close in on whatever a helper just touched. */
.lock {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  border: 1px solid transparent;
  animation: lock-in 2.2s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  --c: var(--meddle);
  background:
    linear-gradient(var(--c), var(--c)) top left / 8px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1.5px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 8px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1.5px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 8px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1.5px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 8px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1.5px 8px no-repeat;
}

.lock b {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--meddle);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(255, 61, 110, 0.7);
}

@keyframes lock-in {
  0% { transform: scale(2.4); opacity: 0; }
  18% { transform: scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* The ten switches are marPad's source code. */
.switchboard {
  margin-top: 40px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(8, 10, 14, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.sb-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
}

.sb-src { font-size: 13px; }

.sb-lines {
  margin: 0;
  padding: 12px 0;
  list-style: none;
  counter-reset: ln 76;
  overflow-x: auto;
}

.sb-lines li {
  counter-increment: ln;
  display: flex;
  align-items: center;
  padding: 3px 18px 3px 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  transition: background-color 0.3s;
}

.sb-lines li::before {
  content: counter(ln);
  flex: none;
  width: 4ch;
  margin-right: 2ch;
  text-align: right;
  color: rgba(196, 206, 219, 0.28);
}

.sb-lines code { color: var(--silver); white-space: pre; }

.sb-tv { color: rgba(196, 206, 219, 0.62); }

.sb-prop { color: #D2A8FF; }

.sb-lines li.on { background: rgba(255, 61, 110, 0.07); }

.sb-lines li.on .sb-prop { color: #FF8FAD; }

.sw {
  min-width: 7ch;
  padding: 1px 0;
  border-radius: 6px;
  border: 1px solid rgba(47, 210, 232, 0.45);
  background: rgba(47, 210, 232, 0.08);
  color: var(--caret);
  font: 500 14px/1.45 var(--mono);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.sw:hover { border-color: var(--caret); box-shadow: 0 0 12px rgba(47, 210, 232, 0.35); }

.sw[aria-checked="true"] {
  border-color: var(--meddle);
  background: var(--meddle);
  color: var(--white);
  box-shadow: 0 0 16px rgba(255, 61, 110, 0.65);
}

.sw.flip { animation: flip 0.35s ease-out; }

@keyframes flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

.sb-note { margin-left: 2ch; color: rgba(196, 206, 219, 0.4); }

.sb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
}

/* The whole section shivers in proportion to how many helpers are on. */
.touch h2 { --m: 0; }

.touch.meddling h2 {
  animation: shiver 3.4s steps(1) infinite;
}

/* One slip per cycle, well under three flashes a second. */
@keyframes shiver {
  0%, 90%, 100% { text-shadow: none; transform: none; }
  91% { text-shadow: calc(var(--m) * -6px) 0 var(--meddle), calc(var(--m) * 6px) 0 var(--caret); transform: translateX(calc(var(--m) * 3px)) skewX(calc(var(--m) * -4deg)); }
}

/* ------------------------------------------ ## Your file, byte for byte. */

.portal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 15vw, 210px) minmax(0, 1fr);
  align-items: center;
}

.hexfile {
  margin: 0;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.hex-out { transition: border-color 0.35s, box-shadow 0.35s; }

.hex-out.is-meddled { border-color: rgba(255, 61, 110, 0.55); box-shadow: 0 0 60px -20px rgba(255, 61, 110, 0.6); }

.hex-out.is-asked { border-color: rgba(47, 210, 232, 0.5); box-shadow: 0 0 60px -20px rgba(47, 210, 232, 0.5); }

.hexfile figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2ch 1ch;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.hexfile b { color: var(--white); font-weight: 600; }

.hex-verb { color: var(--dim); }

.hex-meta { margin-left: auto; color: var(--dim); }

.hexgrid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  padding: 14px 14px 10px;
  font: 500 13px/1 var(--mono);
}

.cell {
  padding: 6px 0;
  border-radius: 4px;
  background: rgba(196, 206, 219, 0.06);
  color: var(--silver);
  text-align: center;
}

.cell.ext { color: var(--white); background: rgba(111, 91, 255, 0.28); }

.cell.eol { color: #1A1200; background: var(--notice); font-weight: 600; }

.cell.chg { color: var(--white); background: rgba(255, 61, 110, 0.32); box-shadow: inset 0 0 0 1px var(--meddle); }

.cell.ask { color: var(--white); background: rgba(47, 210, 232, 0.22); box-shadow: inset 0 0 0 1px var(--caret); }

.cell.gone {
  background: transparent;
  color: var(--meddle);
  box-shadow: inset 0 0 0 1px rgba(255, 61, 110, 0.45);
  text-decoration: line-through;
  opacity: 0.6;
}

.cell.gone.ask-gone { color: var(--caret); box-shadow: inset 0 0 0 1px rgba(47, 210, 232, 0.45); }

.cell.pop { animation: cell-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; animation-delay: calc(var(--i) * 14ms); }

@keyframes cell-pop {
  from { transform: scale(0.2); opacity: 0; filter: brightness(3); }
}

.hex-text {
  margin: 0;
  padding: 0 14px 14px;
  font: 400 13px/1.6 var(--mono);
  color: var(--dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hex-text .eolsym { color: var(--notice); }

.hex-text .bad { color: var(--meddle); }

.portal-ring { position: relative; align-self: stretch; display: flex; align-items: center; }

.portal-ring svg { width: 100%; height: auto; overflow: visible; position: relative; z-index: 1; }

.ring { transform-origin: 100px 100px; transform-box: view-box; }

.r1 { animation: spin 22s linear infinite; }

.r2 { animation: spin 9s linear infinite reverse; }

.r3 { animation: spin 40s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.ring-label { font: 700 17px var(--mono); fill: var(--white); }

.ring-sub { font: 400 9.5px var(--mono); fill: var(--caret); }

.is-helpful .ring-sub { fill: var(--meddle); }

.flyers { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

.flyers span {
  position: absolute;
  top: 50%;
  left: -40%;
  font: 600 12px/1 var(--mono);
  color: var(--caret-hi);
  text-shadow: 0 0 10px var(--caret);
  opacity: 0;
  animation: fly 2.6s linear infinite;
  animation-delay: var(--d);
}

.portal:not(.live) .flyers span { animation-play-state: paused; }

.is-helpful .flyers span { color: #FF8FAD; text-shadow: 0 0 10px var(--meddle); }

@keyframes fly {
  0% { transform: translate(0, var(--y)); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate(calc(var(--w) * 0.7), 0) scale(0.6); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(calc(var(--w) * 1.4), calc(var(--y) * -1)); opacity: 0; }
}

.portal-verdict {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 2ch;
  margin: 28px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px;
}

.portal-verdict dt { color: var(--dim); }

.portal-verdict dd { margin: 0; color: var(--caret); overflow-wrap: anywhere; }

.portal-verdict .bad { color: var(--meddle); }

.portal-verdict .big { color: var(--white); font-weight: 600; }

.portal-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 22px;
}

.pc-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pc-label { color: var(--dim); font-size: 13px; margin-right: 4px; }

.portal-foot {
  max-width: 70ch;
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(196, 206, 219, 0.8);
}

/* --------------------------------------------------- ## Everything it has. */

.anatomy-track { position: relative; height: 330vh; }

.anatomy-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--tb-h) + 4vh);
  overflow: hidden;
}

.anatomy-head { max-width: none; margin-bottom: 2vh; transition: opacity 0.3s; }

.anatomy-head h2 { font-size: clamp(30px, 4vw, 60px); margin-bottom: 0.3em; }

.anatomy-sub { min-height: 1.7em; color: var(--silver); transition: opacity 0.4s; }

.xwrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding-bottom: calc(var(--sb-h) + 3vh);
  perspective: 2400px;
  perspective-origin: 50% 35%;
}

.leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.leaders path { fill: none; stroke: var(--caret); stroke-width: 1; stroke-opacity: 0.75; }

.leaders circle { fill: var(--caret-hi); }

/* The point on a part where its leader ends, set by anatomy.js. */
.mw-pin { position: absolute; width: 0; height: 0; pointer-events: none; }

.callouts {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  z-index: 6;
}

.callouts li {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(190px, 19vw, 270px);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(47, 210, 232, 0.28);
  background: rgba(8, 12, 16, 0.82);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--silver);
  opacity: 0;
  transition: opacity 0.35s;
}

.callouts li b {
  display: block;
  margin-bottom: 2px;
  color: var(--caret);
  font-weight: 600;
}

.callouts li.is-on { opacity: 1; }

/* ------- the window: a working marPad, a little bigger than life */

.mw {
  --e: 0;
  --z: 13px;
  position: relative;
  width: min(1060px, 92vw);
  height: min(600px, 64vh);
  min-height: 360px;
  transform-style: preserve-3d;
  font-family: var(--mono);
  color: #DFE6EE;
}

.mw-layer {
  position: absolute;
  transform-style: preserve-3d;
  outline: 1px solid rgba(47, 210, 232, calc(var(--e) * 0.75));
  outline-offset: 0;
  transition: width 0.35s cubic-bezier(0.3, 0.7, 0.2, 1), left 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.mw.is-exploding .mw-layer {
  box-shadow: 0 0 calc(var(--e) * 50px) rgba(47, 210, 232, calc(var(--e) * 0.18));
  pointer-events: none;
}

.mw-frame {
  inset: 0;
  border-radius: 16px;
  background: #171B23;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(196, 206, 219, 0.14), 0 0 90px -30px rgba(47, 210, 232, 0.35);
}

/* Every layer is a stacking context of its own (preserve-3d), so a menu's
   z-index counts only inside the toolbar: the toolbar itself goes above the
   panes, or they cover its open menus. The window's sheets stay above it. */
.mw-toolbar {
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 16px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #252B36, #1D222B);
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}

.mw-lights { display: flex; gap: 8px; margin-right: 10px; }

.mw-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25); }

.mw-lights i:nth-child(2) { background: #FEBC2E; }

.mw-lights i:nth-child(3) { background: #28C840; }

.mw-group {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mw-group button,
.mw-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 32px;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #C9D1DC;
  font: 600 14px/1 var(--mono);
  cursor: pointer;
}

.mw-group button:hover,
.mw-menu-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }

.mw-group button:disabled { opacity: 0.35; cursor: default; background: none; }

.mw-group svg,
.mw-menu-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.mw-group svg circle { fill: none; }

.mw-menu-btn svg circle { fill: currentColor; stroke: none; }

.mw-menu-btn {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
  height: 34px;
  padding: 0 10px;
}

.mw-menu-btn .chev { font-size: 11px; color: #8B93A1; transform: translateY(-2px); }

.mw-modes button[aria-checked="true"] { background: rgba(255, 255, 255, 0.16); color: var(--white); }

/* The title takes the free space, so the tools sit on the right, as in the app. */
.mw-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--white);
  font: 600 13px/1 var(--mono);
}

.mw-menu { position: relative; }

.mw-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 210px;
  margin: 0;
  padding: 5px;
  list-style: none;
  border-radius: 10px;
  background: rgba(36, 40, 50, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  display: none;
}

.mw-menu.open .mw-dropdown { display: block; }

.mw-dropdown button {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #E6EDF3;
  font: 13px/1.3 var(--mono);
  text-align: left;
  cursor: pointer;
}

.mw-dropdown button:hover,
.mw-dropdown button:focus-visible { background: #2F6FD8; color: var(--white); outline: none; }

.mw-dropdown kbd { color: #8B93A1; font-size: 12px; }

.mw-dropdown button:hover kbd { color: rgba(255, 255, 255, 0.8); }

.mw-tabs {
  top: 52px;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: stretch;
  background: #12151B;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.mw-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 28px;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.45);
  background: transparent;
  color: #8B93A1;
  font: 500 12px/1 var(--mono);
  cursor: pointer;
}

.mw-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mw-tab[aria-selected="true"] { background: #1F242D; color: var(--white); }

.mw-tab .x,
.mw-tab .dot {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}

.mw-tab .x { opacity: 0; color: #C9D1DC; }

.mw-tab:hover .x { opacity: 1; }

.mw-tab .x:hover { background: rgba(255, 255, 255, 0.12); }

.mw-tab .dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #C9D1DC; }

.mw-tab .dot { display: none; }

.mw-tab.edited .dot { display: flex; }

.mw-tab.edited:hover .dot { display: none; }

.mw-tab-add {
  flex: none;
  width: 34px;
  border: 0;
  background: transparent;
  color: #8B93A1;
  font: 400 18px/1 var(--mono);
  cursor: pointer;
}

.mw-tab-add:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }

.mw-textpane {
  top: 84px;
  bottom: 26px;
  left: 0;
  width: 50%;
  display: flex;
  background: #101318;
  overflow: hidden;
}

.mw-previewpane {
  top: 84px;
  bottom: 26px;
  left: 50%;
  width: 50%;
  background: #0D1117;
  border-left: 1px solid rgba(196, 206, 219, 0.1);
  overflow: auto;
  overscroll-behavior: contain;
}

.mw[data-mode="text"] .mw-textpane { width: 100%; }

.mw[data-mode="text"] .mw-previewpane { left: 100%; width: 0; visibility: hidden; transition: width 0.35s, left 0.35s, visibility 0s 0.35s; }

.mw[data-mode="preview"] .mw-textpane { width: 0; visibility: hidden; transition: width 0.35s, visibility 0s 0.35s; }

.mw[data-mode="preview"] .mw-previewpane { left: 0; width: 100%; border-left: 0; }

/* Split, on a phone: text above, preview below. */
.mw.narrow[data-mode="split"] .mw-textpane { width: 100%; bottom: calc(26px + (100% - 110px) / 2); }

.mw.narrow[data-mode="split"] .mw-previewpane { left: 0; width: 100%; top: calc(84px + (100% - 110px) / 2); border-left: 0; border-top: 1px solid rgba(196, 206, 219, 0.1); }

.mw-gutter {
  flex: none;
  display: none;
  width: 5ch;
  padding: 12px 0;
  overflow: hidden;
  font-size: var(--z);
  line-height: 1.6;
  color: #59616E;
  text-align: right;
  position: relative;
}

.mw.numbers .mw-gutter { display: block; }

.mw-gutter span { position: absolute; right: 0; }

.mw-editors { position: relative; flex: 1; min-width: 0; }

.mw textarea,
.mw-previewpane,
.mw-enc-pop { scrollbar-width: thin; scrollbar-color: #3A414C transparent; }

.mw-editors textarea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px 14px 40px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: #E6EDF3;
  caret-color: var(--caret);
  font: 400 var(--z)/1.6 var(--mono);
  tab-size: 4;
  -moz-tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

.mw.numbers .mw-editors textarea { padding-left: 8px; }

.mw.nowrap .mw-editors textarea { white-space: pre; overflow-wrap: normal; overflow-x: auto; }

.mw-editors textarea[hidden] { display: none; }

.mw-status {
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  border-radius: 0 0 16px 16px;
  background: #1A1E26;
  border-top: 1px solid rgba(0, 0, 0, 0.45);
  font-size: 11.5px;
  color: #8B93A1;
}

.mws-left,
.mws-right { display: flex; align-items: center; gap: 2px; min-width: 0; }

.mws-left { overflow: hidden; }

.mw-status button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.mw-status button:hover { background: rgba(255, 255, 255, 0.07); color: #E6EDF3; }

.mw-status svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.mws-toggle .num { stroke-width: 1; }

.mws-toggle[aria-pressed="true"] { color: #3B9EFF; }

.mws-sel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mws-eol.is-on { color: #3B9EFF; }

.mws-enc svg { width: 8px; height: 11px; }

.mws-notice { color: var(--notice) !important; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }

.mws-notice::before { content: "⚠"; }

.mw.preview-only .mws-left > *:not(.mws-keep) { display: none; }

.mw.plain .mw-md-only { display: none; }

/* A phone-sized window has no room for the zoom buttons or the title; pinch
   still zooms, and the tab bar names the file. */
.mw.narrow .mw-zoom { display: none; }

.mw.narrow .mw-title { visibility: hidden; }

.mw-sheet {
  position: absolute;
  top: 52px;
  left: 50%;
  z-index: 30;
  width: min(340px, 86%);
  margin-left: max(-170px, -43%);
  padding: 18px 18px 14px;
  border-radius: 14px;
  background: rgba(40, 44, 54, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
  text-align: center;
  animation: sheet-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes sheet-in { from { transform: translateY(-14px); opacity: 0; } }

.mw-sheet img { display: block; margin: 0 auto 8px; }

.mw-sheet-title { margin: 0 0 6px; color: var(--white); font-size: 13px; font-weight: 700; line-height: 1.4; }

.mw-sheet-text { margin: 0 0 14px; color: #B9C1CD; font-size: 12px; line-height: 1.45; }

.mw-sheet-actions { display: flex; flex-direction: column; gap: 6px; }

.mw-sheet-actions button {
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font: 500 12.5px var(--mono);
  cursor: pointer;
}

.mw-sheet-actions button.default { background: #2F7BF6; }

.mw-sheet-actions button:hover { filter: brightness(1.15); }

.mw-pop {
  position: absolute;
  z-index: 25;
  padding: 5px;
  border-radius: 10px;
  background: rgba(36, 40, 50, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  font-size: 12.5px;
}

.mw-enc-pop { right: 8px; bottom: 30px; width: 250px; max-height: 70%; overflow: auto; }

.mw-enc-pop p { margin: 4px 10px 4px; color: #8B93A1; font-size: 11px; }

.mw-enc-pop hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 4px 6px; }

.mw-enc-pop button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #E6EDF3;
  font: 12.5px/1.3 var(--mono);
  text-align: left;
  cursor: pointer;
}

.mw-enc-pop button:hover,
.mw-enc-pop button:focus-visible { background: #2F6FD8; outline: none; }

.mw-enc-pop button.current::after { content: "✓"; }

.mw-goto { left: 8px; bottom: 30px; padding: 10px 12px; }

.mw-goto label { display: flex; align-items: center; gap: 8px; color: #C9D1DC; }

.mw-goto input {
  width: 130px;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid #3B82F6;
  background: rgba(0, 0, 0, 0.3);
  color: var(--white);
  font: 12.5px var(--mono);
  outline: none;
}

.mw-quit {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 16px;
  background: rgba(8, 10, 14, 0.94);
  text-align: center;
  font-size: 14px;
}

.mw-quit p { margin: 0; color: var(--silver); }

.mw-quit[hidden],
.mw-sheet[hidden],
.mw-pop[hidden] { display: none; }

.diagram-menu {
  position: fixed;
  z-index: 300;
  min-width: 230px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(36, 40, 50, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.diagram-menu button {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #E6EDF3;
  font: 13px/1.3 var(--mono);
  text-align: left;
  cursor: pointer;
}

.diagram-view {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: rgba(4, 5, 8, 0.84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.diagram-sheet {
  max-width: 100%;
  max-height: 80vh;
  overflow: auto;
  padding: 20px;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.diagram-sheet svg { display: block; }

.diagram-view p { margin: 0; color: var(--silver); font-size: 13px; }

.diagram-menu button:hover,
.diagram-menu button:focus-visible { background: #2F6FD8; outline: none; }

/* ------- the preview inside the window: GitHub's layout, marPad's font */

.mdp {
  padding: 14px 22px 48px;
  font-size: var(--z);
  line-height: 1.6;
  color: #E6EDF3;
  overflow-wrap: break-word;
}

.mdp > *:first-child { margin-top: 0 !important; }

.mdp h1,
.mdp h2,
.mdp h3,
.mdp h4,
.mdp h5,
.mdp h6 { margin: 24px 0 16px; font-weight: 600; line-height: 1.25; color: #F0F6FC; letter-spacing: -0.01em; }

.mdp h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid #3D444D; }

.mdp h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid #3D444D; }

.mdp h3 { font-size: 1.25em; }

.mdp h4 { font-size: 1em; }

.mdp h5 { font-size: 0.875em; }

.mdp h6 { font-size: 0.85em; color: #9198A1; }

.mdp p,
.mdp ul,
.mdp ol,
.mdp table,
.mdp pre,
.mdp blockquote,
.mdp .md-alert,
.mdp .flow,
.mdp dl { margin: 0 0 16px; }

.mdp a { color: #4493F8; text-decoration: none; }

.mdp a:hover { text-decoration: underline; }

.mdp strong { font-weight: 600; color: #F0F6FC; }

.mdp del { color: #9198A1; }

.mdp ul,
.mdp ol { padding-left: 2em; }

.mdp li + li { margin-top: 0.25em; }

.mdp li > ul,
.mdp li > ol { margin: 0.25em 0 0; }

.mdp .task-list { list-style: none; padding-left: 1.4em; }

.mdp .task-list .task-list { padding-left: 1.6em; }

.mdp .task { position: relative; }

.mdp .task input {
  position: absolute;
  left: -1.5em;
  top: 0.32em;
  margin: 0;
  width: 1em;
  height: 1em;
  accent-color: #2F7BF6;
}

.mdp code {
  padding: 0.2em 0.4em;
  border-radius: 6px;
  background: rgba(101, 108, 118, 0.2);
  font-size: 85%;
}

.mdp pre {
  padding: 14px 16px;
  border-radius: 6px;
  background: #151B23;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
}

.mdp pre code { padding: 0; background: none; font-size: 100%; white-space: pre; }

.mdp blockquote { padding: 0 1em; border-left: 0.25em solid #3D444D; color: #9198A1; }

.mdp blockquote > :last-child,
.mdp .md-alert > :last-child,
.mdp li > :last-child { margin-bottom: 0; }

.mdp hr { height: 0.25em; margin: 24px 0; border: 0; background: #3D444D; }

.mdp table { display: block; width: max-content; max-width: 100%; overflow: auto; border-collapse: collapse; }

.mdp th,
.mdp td { padding: 6px 13px; border: 1px solid #3D444D; }

.mdp th { font-weight: 600; }

.mdp tr:nth-child(2n) { background: #151B23; }

.mdp .md-alert { padding: 8px 16px; border-left: 0.25em solid var(--c, #4493F8); color: inherit; }

.mdp .md-alert-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--c, #4493F8); font-weight: 500; }

.mdp .md-alert-title svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.mdp .md-alert-note { --c: #4493F8; }

.mdp .md-alert-tip { --c: #3FB950; }

.mdp .md-alert-important { --c: #AB7DF8; }

.mdp .md-alert-warning { --c: #D29922; }

.mdp .md-alert-caution { --c: #F85149; }

.mdp .md-img {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px dashed #3D444D;
  color: #9198A1;
}

.mdp .footnotes { margin-top: 24px; padding-top: 12px; border-top: 1px solid #3D444D; font-size: 0.85em; color: #9198A1; }

.mdp .footnotes ol { padding-left: 1.6em; }

.mdp sup a { font-size: 0.8em; }

.mdp .front-matter td,
.mdp .front-matter th { vertical-align: top; }

.mdp .hl-k { color: #FF7B72; }

.mdp .hl-s { color: #A5D6FF; }

.mdp .hl-c { color: #9198A1; }

.mdp .hl-n { color: #79C0FF; }

.mdp .hl-t { color: #FFA657; }

.mdp .hl-f { color: #D2A8FF; }

.mdp .flow { display: flex; justify-content: center; overflow-x: auto; }

.mdp .flow svg { max-width: 100%; height: auto; }

.mdp .flow-msg { padding: 10px 12px; border-radius: 6px; border: 1px dashed #3D444D; color: #9198A1; font-size: 0.9em; }

.flow .node rect,
.flow .node polygon,
.flow .node circle,
.flow .node path { fill: rgba(47, 210, 232, 0.08); stroke: #2FD2E8; stroke-width: 1.3; }

.flow .node text { fill: #E6EDF3; font: 500 13px var(--mono); }

.flow .edge path { fill: none; stroke: #9AA4B2; stroke-width: 1.4; }

.flow .edge.dotted path { stroke-dasharray: 3 4; }

.flow .edge.thick path { stroke-width: 2.6; }

.flow .edge.draw path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 0.9s ease-out forwards; }

.flow .edge.draw.dotted path { animation: draw-dotted 0.9s ease-out forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }

@keyframes draw-dotted { from { opacity: 0; } to { opacity: 1; } }

.flow .edge-label rect { fill: #0D1117; }

.flow .edge-label text { fill: #9198A1; font: 400 11.5px var(--mono); }

.flow marker path { fill: #9AA4B2; stroke: none; }

/* -------------------------------------------------------- ## The disk wins. */

.disk-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(60px, 9vw, 130px) minmax(0, 1fr);
  align-items: center;
}

.term,
.mini {
  position: relative;
  margin: 0;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
}

.term { border: 1px solid var(--line); background: rgba(4, 6, 9, 0.9); }

.term figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
}

.term figcaption b { color: var(--silver); font-weight: 500; }

.term-dots { display: flex; gap: 6px; }

.term-dots i { width: 10px; height: 10px; border-radius: 50%; background: #343A46; }

.term-body,
.mini-body {
  height: 17.6em;
  margin: 0;
  padding: 12px 14px;
  overflow: hidden;
  font: 400 13px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.term-body { color: #9DA7B5; }

.term-body .w { color: var(--notice); animation: write 1.2s ease-out; }

.term-body .p { color: var(--notice); }

@keyframes write { from { background: rgba(255, 178, 36, 0.25); } }

.beam { position: relative; height: 2px; margin: 0 6px; background: rgba(255, 178, 36, 0.14); }

.beam span {
  position: absolute;
  top: -3px;
  left: 0;
  width: 26px;
  height: 8px;
  border-radius: 8px;
  background: var(--notice);
  box-shadow: 0 0 18px var(--notice), 0 0 4px #fff;
  opacity: 0;
}

.beam.go span { animation: beam 0.7s cubic-bezier(0.6, 0, 0.4, 1) forwards; }

@keyframes beam {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 26px); opacity: 0; }
}

.mini {
  border: 1px solid rgba(47, 210, 232, 0.32);
  background: #101318;
  box-shadow: 0 0 70px -24px rgba(47, 210, 232, 0.5);
}

.mini-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  background: #1F242D;
  font-size: 12px;
  color: var(--white);
}

.mini-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; transition: background-color 0.2s; }

.mini-dot.edited { background: #C9D1DC; }

.mini-body { color: #E6EDF3; }

.mini-body .line { display: block; }

.mini-body .new { animation: line-in 0.9s ease-out; }

@keyframes line-in { from { background: rgba(255, 178, 36, 0.22); color: var(--white); } }

.mini-body .mine { color: var(--white); background: rgba(47, 210, 232, 0.14); box-shadow: inset 2px 0 0 var(--caret); }

.mini-body .mine.gone { animation: gone 0.6s steps(5) forwards; }

@keyframes gone {
  0% { text-shadow: -3px 0 var(--meddle), 3px 0 var(--caret); }
  100% { opacity: 0; }
}

.mini-body .mine.back { animation: back 0.9s ease-out; }

@keyframes back { from { background: rgba(47, 210, 232, 0.45); } }

.mini-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  background: #1A1E26;
  border-top: 1px solid rgba(0, 0, 0, 0.45);
  font-size: 11.5px;
  color: #8B93A1;
  white-space: nowrap;
}

.mini-notice { color: var(--notice); overflow: hidden; text-overflow: ellipsis; }

.mini-notice:not(:empty)::before { content: "⚠ "; }

.mini-notice.pulse { animation: pulse 1s ease-in-out infinite alternate; }

@keyframes pulse { to { text-shadow: 0 0 12px var(--notice); } }

.mini-right { margin-left: auto; }

.mini-key {
  position: absolute;
  right: 18px;
  bottom: 46px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(196, 206, 219, 0.28);
  background: linear-gradient(180deg, #2B313D, #1C2028);
  color: var(--white);
  font: 600 18px/1 var(--mono);
  box-shadow: 0 5px 0 #08090C, 0 0 32px rgba(47, 210, 232, 0.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
}

.mini-key.show { opacity: 1; transform: none; }

.mini-key.press { transform: translateY(4px); box-shadow: 0 1px 0 #08090C, 0 0 46px rgba(47, 210, 232, 0.7); }

.disk-foot { margin: 26px 0 0; font-size: 15px; color: rgba(196, 206, 219, 0.8); }

.disk-foot code { color: var(--white); }

/* ---------------------------------------------------------- ## One font. */

.glyphs {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--line);
  overflow: hidden;
  touch-action: pan-y;
}

.glyphs figure {
  margin: 0;
  min-width: 0;
  aspect-ratio: 3 / 4.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(8, 10, 14, 0.86);
}

.glyphs .g {
  font-size: clamp(40px, 7vw, 112px);
  line-height: 1;
  font-weight: 400;
  color: var(--white);
  text-shadow: 0 0 calc(var(--glow, 0) * 34px) rgba(47, 210, 232, 0.75);
}

.glyphs figcaption { font-size: 11.5px; color: var(--dim); }

.waterfall-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(8, 10, 14, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.waterfall {
  position: relative;
  border-top: 1px solid var(--line);
  outline-offset: 6px;
}

.wf-row {
  display: grid;
  grid-template-columns: 4ch minmax(0, 1fr);
  align-items: baseline;
  gap: 2ch;
  padding: 5px 0;
  border-bottom: 1px solid rgba(196, 206, 219, 0.06);
  color: rgba(196, 206, 219, 0.4);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}

.wf-pt { font-size: 11px; text-align: right; color: rgba(196, 206, 219, 0.35); }

.wf-sample { overflow: hidden; line-height: 1.25; }

.wf-row:hover { color: rgba(196, 206, 219, 0.75); }

.wf-row.is-current { color: var(--white); }

.wf-row.is-current .wf-pt { color: var(--caret); }

.wf-row.is-current .wf-sample::after {
  content: "";
  display: inline-block;
  width: 0.12em;
  height: 0.8em;
  margin-left: 0.1em;
  background: var(--caret);
  box-shadow: 0 0 10px var(--caret);
  animation: blink var(--blink) steps(1) infinite;
}

.wf-buttons { display: flex; gap: 8px; }

.wf-note { margin: 18px 0 6px; font-size: 14px; color: var(--silver); }

.wf-note b { font-size: 44px; line-height: 1; color: var(--white); font-weight: 800; }

.wf-note span { display: block; margin-top: 6px; color: var(--caret); font-size: 13px; }

.wf-hint { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(196, 206, 219, 0.78); }

/* --------------------------------------------- ## Everything it doesn't have. */

.arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
}

.arena-screen {
  position: relative;
  height: clamp(440px, 64vh, 620px);
  border-radius: 16px;
  border: 1px solid rgba(255, 61, 110, 0.32);
  background: rgba(4, 5, 8, 0.78);
  overflow: hidden;
  box-shadow: 0 0 80px -30px rgba(255, 61, 110, 0.5), inset 0 0 80px rgba(0, 0, 0, 0.6);
}

#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.arena.playing #game { cursor: none; }

.arena-hud {
  position: absolute;
  top: 12px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--dim);
  pointer-events: none;
}

.arena-hud b { color: var(--white); font-size: 16px; }

.hp { display: flex; align-items: center; gap: 4px; }

.hp::before { content: "simplicity"; margin-right: 6px; }

.hp i {
  display: inline-block;
  width: 6px;
  height: 17px;
  border-radius: 1.5px;
  background: linear-gradient(var(--caret-hi), var(--caret-lo));
  box-shadow: 0 0 8px var(--caret);
}

.hp i.lost { background: rgba(196, 206, 219, 0.14); box-shadow: none; }

.arena-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(8, 10, 14, 0.62), rgba(8, 10, 14, 0.3));
  transition: opacity 0.35s;
}

.arena-overlay.is-hidden { opacity: 0; pointer-events: none; }

.arena-title {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
  text-shadow: -2px 0 var(--meddle), 2px 0 var(--caret);
}

.arena-text { margin: 0; max-width: 42ch; color: var(--silver); }

.arena-keys { margin: 0; font-size: 12.5px; color: var(--dim); }

.arena-keys b { color: var(--white); font-weight: 600; }

.reject-log {
  height: clamp(440px, 64vh, 620px);
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: auto;
}

.reject-log h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--meddle); }

.reject-log ol { margin: 0; padding: 0; list-style: none; }

.reject-log li {
  padding: 9px 0;
  border-bottom: 1px solid rgba(196, 206, 219, 0.07);
  font-size: 13px;
  animation: log-in 0.5s ease-out;
}

@keyframes log-in { from { background: rgba(255, 61, 110, 0.18); } }

.reject-log li b {
  color: var(--white);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: var(--meddle);
  text-decoration-thickness: 2px;
}

.reject-log li em { font-style: normal; color: var(--meddle); margin-left: 0.6ch; font-size: 12px; }

.reject-log li span { display: block; margin-top: 2px; color: rgba(196, 206, 219, 0.72); font-size: 13px; line-height: 1.5; }

.reject-log .empty { color: var(--dim); font-size: 12.5px; border: 0; animation: none; }

/* ------------------------------------------------------- ## Get marPad. */

.get {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16vh 0 calc(var(--sb-h) + 32px);
}

.get-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.get-inner > p { max-width: 52ch; margin: 0 0 22px; font-size: 17px; }

.get h2 { margin-bottom: 0.35em; }

.get-icon {
  position: relative;
  width: clamp(150px, 17vw, 240px);
  margin-bottom: 28px;
  animation: hover 7s ease-in-out infinite;
}

.get-icon img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(47, 210, 232, 0.28)); }

.get-icon::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -22%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(47, 210, 232, 0.45), transparent 70%);
  filter: blur(6px);
  animation: hover-shadow 7s ease-in-out infinite;
}

@keyframes hover { 50% { transform: translateY(-14px) rotate(-1.5deg); } }

@keyframes hover-shadow { 50% { transform: scale(0.8); opacity: 0.6; } }

.terminal {
  position: relative;
  width: min(640px, 100%);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(4, 6, 9, 0.9);
  text-align: left;
}

.terminal pre {
  margin: 0;
  padding: 18px 92px 18px 20px;
  overflow-x: auto;
  font: 400 14px/1.75 var(--mono);
  color: var(--white);
}

.prompt { color: var(--caret); user-select: none; -webkit-user-select: none; }

.copy {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(48, 55, 69, 0.5);
  color: var(--silver);
  font: 500 12px/1 var(--mono);
  cursor: pointer;
}

.copy:hover { color: var(--white); border-color: rgba(47, 210, 232, 0.6); }

.get-actions { margin-top: 26px; }

.get-inner > .get-last {
  margin: 72px 0 0;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
}

.site-foot { margin-top: 12vh; }

.site-foot p { margin: 0; text-align: center; font-size: 12px; line-height: 1.7; color: var(--dim); }

/* ------------------------------------------------------- the Text mode */

.textmode {
  --tm-bg: #1E1E1E;
  --tm-fg: #E2E2E2;
  --tm-dim: rgba(255, 255, 255, 0.3);
  --tm-chrome: #2A2A2A;
  min-height: 100vh;
  padding: calc(var(--tb-h) + 6px) 0 calc(var(--sb-h) + 24px);
  background: var(--tm-bg);
  color: var(--tm-fg);
}

.tm-doc {
  font: 400 14px/1.6 var(--mono);
  padding: 10px 24px 10px 0;
  outline: none;
  counter-reset: tm;
}

.tm-line { padding-left: 24px; }

.show-ruler .tm-line { display: grid; grid-template-columns: 7ch minmax(0, 1fr); padding-left: 0; }

.show-ruler .tm-line::before {
  counter-increment: tm;
  content: counter(tm);
  padding-right: 2ch;
  text-align: right;
  color: var(--tm-dim);
  user-select: none;
  -webkit-user-select: none;
}

.tm-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.6em; }

.tm-nowrap .tm-text { white-space: pre; overflow-wrap: normal; }

.tm-nowrap .tm-doc { overflow-x: auto; }

.is-text #preview-root { display: none; }

.is-text .textmode { display: block; }

.is-text .toolbar,
.is-text .statusbar {
  background: rgba(42, 42, 42, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}

.is-text .brand-mark rect { animation: none; }

.is-text .sbb-toggle[aria-pressed="true"],
.is-text .sb-eol.is-on { color: #3B9EFF; }

@media (prefers-color-scheme: light) {
  .textmode {
    --tm-bg: #FFFFFF;
    --tm-fg: #1D1D1F;
    --tm-dim: rgba(0, 0, 0, 0.3);
  }

  html.is-text { background: #FFFFFF; color-scheme: light; }

  .is-text .toolbar,
  .is-text .statusbar {
    background: rgba(246, 246, 246, 0.94);
    border-color: rgba(0, 0, 0, 0.1);
    color: #6E6E73;
  }

  .is-text .brand,
  .is-text .mode-switch button[aria-checked="true"],
  .is-text .tb-gh { color: #1D1D1F; }

  .is-text .brand-mark text { fill: #1D1D1F; }

  .is-text .mode-switch { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.08); }

  .is-text .mode-switch button { color: #6E6E73; }

  .is-text .mode-switch button[aria-checked="true"] { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }

  .is-text .statusbar { color: #6E6E73; }

  .is-text .sbb:hover { color: #1D1D1F; background: rgba(0, 0, 0, 0.06); }

  .is-text .goto { background: #FFFFFF; color: #1D1D1F; border-color: rgba(0, 0, 0, 0.12); }

  .is-text .goto li button { color: #1D1D1F; }

  .is-text .goto input { background: #FFFFFF; color: #1D1D1F; }
}

/* A cathode-ray goodbye, and hello. */
.crt {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background: #000;
  opacity: 0;
}

.crt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #F2FEFF;
  box-shadow: 0 0 24px 8px rgba(106, 240, 255, 0.85);
  transform: scale(0, 0);
}

.crt.off { animation: crt-bg-off 0.7s ease-in forwards; }

.crt.off::after { animation: crt-line-off 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards; }

.crt.on { animation: crt-bg-on 0.8s ease-out forwards; }

.crt.on::after { animation: crt-line-on 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards; }

.crt.pre { opacity: 1; }

.crt.done { animation: crt-fade 0.38s ease-out forwards; }

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

@keyframes crt-bg-off { 0% { opacity: 0; } 25%, 100% { opacity: 1; } }

@keyframes crt-line-off {
  0% { transform: scale(1, 300); opacity: 0; }
  25% { transform: scale(1, 1); opacity: 1; }
  70% { transform: scale(0.004, 1); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}

@keyframes crt-bg-on { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }

@keyframes crt-line-on {
  0% { transform: scale(0.004, 1); opacity: 1; }
  30% { transform: scale(1, 1); opacity: 1; }
  60% { transform: scale(1, 400); opacity: 0.4; }
  100% { transform: scale(1, 600); opacity: 0; }
}

/* ------------------------------------------------------------ smaller */

@media (max-width: 960px) {
  .touch-panels { grid-template-columns: 1fr; gap: 0; }

  .pane-arrow { height: 44px; }

  .pane-arrow span { top: 6px; bottom: 6px; left: 50%; right: auto; width: 2px; height: auto; background: linear-gradient(var(--caret), var(--silver)); }

  .pane-arrow span::after { right: auto; left: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid var(--silver); border-bottom: 0; }

  .portal { grid-template-columns: 1fr; }

  .portal-ring { width: 150px; margin: 10px auto; }

  .flyers { display: none; }

  .disk-stage { grid-template-columns: 1fr; }

  .beam { width: 2px; height: 50px; margin: 6px auto; }

  .beam span { width: 8px; height: 22px; left: -3px; }

  @keyframes beam {
    0% { top: 0; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: calc(100% - 22px); opacity: 0; }
  }

  .glyphs { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .waterfall-wrap { grid-template-columns: 1fr; gap: 28px; }

  .arena { grid-template-columns: 1fr; }

  .reject-log { height: auto; max-height: 340px; }
}

/* No room to take a window apart on a phone: it stays assembled, and the
   callouts become a list under it. */
@media (max-width: 900px), (max-height: 560px) {
  .anatomy-track { height: auto; }

  .anatomy-stage { position: relative; height: auto; padding: clamp(80px, 12vh, 140px) 0 0; overflow: visible; }

  .xwrap { padding: 0; perspective: none; }

  .mw { width: calc(100% - 2 * var(--gutter)); height: 560px; }

  .leaders { display: none; }

  .callouts {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    width: min(1160px, calc(100% - 2 * var(--gutter)));
    margin: 22px auto 0;
  }

  .callouts li { position: static; width: auto; opacity: 1; }
}

@media (max-width: 640px) {
  :root { --tb-h: 46px; }

  .tb-gh span,
  .mode-switch span { display: none; }

  .mode-switch button { padding: 6px 9px; }

  .hero-title { font-size: clamp(54px, 17vw, 110px); }

  .sb-sel,
  .sb-notice,
  .sb-eol:not(.is-on) { display: none; }

  .mw-lights { display: none; }

  .mw-toolbar { gap: 4px; padding: 0 8px; }

  .mw-group button { min-width: 28px; padding: 0 5px; }

  .mw-menu-btn { padding: 0 7px; }

  .mws-sel { display: none; }

  .hexgrid { gap: 3px; padding: 10px; font-size: 12px; }

  .switchboard .sb-lines li { font-size: 12.5px; }
}

/* ------------------------------------------------------ calm, on request */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .caret,
  .brand-mark rect { animation: none !important; }

  .js .typed-head .ch { opacity: 1; }

  .flyers { display: none; }
}