/* gruvbox dark, the values dejima's marks use. Everything below refers to
   these through the semantic names; no other hex values appear. */
:root {
  --gb-bg0-h: #1d2021;
  --gb-bg0:   #282828;
  --gb-bg0-s: #32302f;
  --gb-bg1:   #3c3836;
  --gb-bg2:   #504945;
  --gb-bg4:   #7c6f64;
  --gb-gray:  #928374;
  --gb-fg4:   #a89984;
  --gb-fg1:   #ebdbb2;
  --gb-orange: #fe8019;
  --gb-yellow: #fabd2f;
  --gb-aqua:   #8ec07c;
  --gb-red:    #fb4934;

  --bg: var(--gb-bg0);
  --bg-well: var(--gb-bg0-h);
  --bg-raise: var(--gb-bg0-s);
  --rule: var(--gb-bg1);
  --rule-strong: var(--gb-bg2);
  --fg: var(--gb-fg1);
  --fg-dim: var(--gb-fg4);
  --fg-faint: var(--gb-gray);
  /* Below AA on purpose: only for what the page shows as gone, and always
     beside a line that says so in full contrast. */
  --faded: var(--gb-bg4);
  --highlight: color-mix(in srgb, var(--gb-fg1) 8%, transparent);
  /* One accent, the wordmark's orange, for anything you can act on. Aqua
     means kept or allowed, red means refused; neither is decoration. */
  --accent: var(--gb-orange);
  --kept: var(--gb-aqua);
  --refused: var(--gb-red);
  --code-key: var(--gb-yellow);

  --font-head: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body: "IBM Plex Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 38rem;
  --wrap: 72rem;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7rem);
}

@font-face { font-family: "Jost"; src: url("assets/fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("assets/fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("assets/fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("assets/fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

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

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); margin-bottom: 1.25rem; }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1.1em; }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--bg-raise);
  padding: 0.08em 0.35em;
  border-radius: 3px;
}
h2 code { font-size: 0.9em; background: none; padding: 0; color: var(--accent); }

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

.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--accent); color: var(--bg); padding: 0.5rem 1rem; z-index: 20; }
.skip:focus { left: 0.5rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Every value sits in the same cell, so the widest sets the width and the
   line doesn't reflow as they change. */
.rotate { display: inline-grid; transition: opacity 250ms ease; }
.rotate > span { grid-area: 1 / 1; visibility: hidden; }
.rotate > .is-on { visibility: visible; }
.rotate.is-changing { opacity: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
.prose,
.wrap.prose > * { max-width: var(--measure); }
.wrap.prose { max-width: var(--wrap); }

/* --- buttons ----------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 1rem; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.85rem 1.3rem;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
}
.button:hover { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.button--quiet { background: transparent; color: var(--fg); border-color: var(--rule-strong); }
.button--quiet:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

/* --- header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner { display: flex; align-items: center; gap: 2rem; padding-block: 0.8rem; }
.brand img { height: 30px; width: auto; }
.site-nav { display: flex; gap: 1.6rem; margin-left: auto; font-family: var(--font-head); font-size: 1rem; }
.site-nav a { color: var(--fg-dim); text-decoration: none; }
.site-nav a:hover { color: var(--fg); }
.site-header__github { padding: 0.55rem 0.9rem; font-size: 0.95rem; }

@media (max-width: 52rem) {
  .site-nav { display: none; }
  .site-header__github { margin-left: auto; }
}

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

.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--section-y); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

.hero__title {
  font-size: clamp(3.1rem, 7.2vw, 5.6rem);
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-weight: 500;
}
.hero__sub { font-family: var(--font-head); font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--fg-dim); margin: 1rem 0 1.5rem; line-height: 1.3; }
.hero__body { max-width: 34rem; }
.hero__fine { color: var(--fg-dim); font-size: 0.95rem; }

@media (max-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- terminal ---------------------------------------------------------- */

.term { margin: 0; }

/* Scenes share one grid cell, so the hero keeps the height of the tallest and
   doesn't jump when it switches. */
.term__scenes { display: grid; }
.scene { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; gap: 1rem; transition: opacity 500ms ease; }
.scene:not(.is-active) { visibility: hidden; opacity: 0; }

/* Two terminals on your machine. dejima starts in the top one, which turns
   into the sandbox until the session ends; the bottom one stays yours. */
.pane {
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 300ms ease, background-color 600ms ease;
}
.pane.is-open { background: var(--bg-well); }
.pane:not(.is-open) .pane__open, .pane.is-open .pane__closed { display: none; }

/* Where to look while a scene plays: the pane being written to gets a lighter
   border, and the line being typed or printed a soft highlight. */
.pane.is-live { border-color: var(--fg-faint); }
.t-line.is-current {
  background: var(--highlight);
  box-shadow: 0 0 0 0.3rem var(--highlight);
  border-radius: 2px;
}

.pane__label {
  margin: 0;
  padding: 0.45rem 1rem;
  font-family: var(--font-head);
  font-size: 0.9rem;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--rule);
  transition: color 600ms ease;
}
.pane.is-open .pane__label { color: var(--accent); }

.pane__body {
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.3vw, 0.86rem);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pane__body code { background: none; padding: 0; font-size: inherit; }

.t-line { display: inline-block; min-width: 100%; transition: opacity 400ms ease; }
.t-prompt { color: var(--fg-faint); }
.t-rest { visibility: hidden; }
.t-you { color: var(--fg); }

/* A mark, then its text in a column of its own, so a wrapped line hangs
   under the text rather than under the mark. */
.t-ask, .t-agent, .t-note, .t-kept { display: inline-grid; grid-template-columns: 3ch minmax(0, 1fr); width: 100%; vertical-align: top; }
.t-ask { color: var(--fg); margin-top: 0.5em; }
.t-ask .t-mark { color: var(--fg-dim); }
.t-note { color: var(--fg-dim); font-style: italic; }
.t-agent { color: var(--fg); margin-top: 0.5em; }
.t-agent .t-mark { color: var(--accent); }
.t-over { color: var(--fg); font-style: italic; margin-top: 0.75em; }
.t-out { color: var(--fg-dim); }
.t-kept { grid-template-columns: 6ch minmax(0, 1fr); color: var(--kept); margin-top: 0.75em; }
.pane__body > code > .t-line:first-child { margin-top: 0; }

/* When the session ends what happened inside fades back. By colour rather
   than opacity: a faded layer per line renders as a visible box behind the
   text in Chromium. */
.scene.is-over :is(.t-ask, .t-note, .t-agent),
.scene.is-over :is(.t-ask, .t-note, .t-agent) * { color: var(--faded); transition: color 900ms ease; }

/* Lines wait hidden, keeping their space so the panes don't grow, and fade in
   as the session reaches them. Without the script all of them show. */
.scene.is-playing .t-line { opacity: 0; }
.scene.is-playing .t-line.is-shown { opacity: 1; }

.term__caption { color: var(--fg-dim); font-size: 0.9rem; margin-top: 0.75rem; min-height: 3.4em; }

/* The sessions are tabs: they only work with the script, which unhides them. */
.term__tabs { display: flex; flex-wrap: wrap; gap: 0 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule-strong); }
.term__tabs[hidden] { display: none; }
.term__tab {
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--fg-dim);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}
.term__tab:hover { color: var(--fg); }
.term__tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

.scene.is-resetting * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .scene, .t-line, .scene * { transition: none; }
}

/* --- sections ---------------------------------------------------------- */

.section { padding-block: var(--section-y); }
.section--well { background: var(--bg-well); }

.points { list-style: none; padding: 0; margin: 1.75rem 0; display: grid; gap: 1rem; }
.points li { padding-left: 1.25rem; border-left: 2px solid var(--rule-strong); }
.points strong { font-weight: 600; }

.lead { font-size: 1.25rem; line-height: 1.6; }
.prose__next { margin-top: clamp(3.5rem, 7vw, 5rem); }

/* --- mess, mistakes, malice ------------------------------------------- */

.mmm { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.mmm__item h3 { margin: 0 0 0.75rem; font-size: 1.55rem; }
.mmm__item p { color: var(--fg); font-size: 1.04rem; }

@media (max-width: 60rem) {
  .mmm { grid-template-columns: 1fr; max-width: var(--measure); }
}

.pull { margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; max-width: 46rem; }
.pull p {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

/* --- install ----------------------------------------------------------- */

.code { position: relative; max-width: 44rem; margin: 2rem 0 0.9rem; }
.code pre {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  padding-right: 6rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.98rem;
  line-height: 1.8;
}
.code pre code { background: none; padding: 0; font-size: inherit; }
.code__copy {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  font-family: var(--font-head);
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--bg-raise);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}
.code__copy:hover { border-color: var(--accent); color: var(--accent); }

.install__note { color: var(--fg-dim); font-size: 0.98rem; max-width: 44rem; }
.install__fine { color: var(--fg-dim); font-size: 0.98rem; max-width: 44rem; margin-top: 2.5rem; }

.facts { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; max-width: 58rem; }
.facts strong { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1.2rem; margin-bottom: 0.25rem; }
@media (max-width: 46rem) { .facts { grid-template-columns: 1fr; } }

/* --- not a locked box -------------------------------------------------- */

.testimony { margin: 2rem 0 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--accent); }
.testimony p { font-style: italic; font-size: 1.2rem; margin-bottom: 0.4rem; }
.testimony footer { color: var(--fg-dim); font-size: 0.95rem; }

.doors { margin-top: 3rem; max-width: 52rem; }
.doors table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.doors th { font-family: var(--font-head); font-weight: 500; text-align: left; color: var(--fg-dim); padding: 0 1rem 0.6rem 0; border-bottom: 1px solid var(--rule-strong); }
.doors td { padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doors td:first-child { color: var(--fg-dim); width: 40%; }
.doors__note { color: var(--fg-dim); font-size: 0.98rem; margin-top: 1.25rem; }

.limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; margin-top: 4rem; max-width: 60rem; }
.limits h3 { margin-bottom: 1rem; }
.limits ul { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.6rem; font-size: 1.02rem; }
.limits li { position: relative; padding-left: 1.4rem; }
.limits li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 2px; background: var(--fg-faint); }
.limits > div:last-child li::before { background: var(--kept); }
@media (max-width: 46rem) { .limits { grid-template-columns: 1fr; } }

/* --- isolated and sealed ---------------------------------------------- */

.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; margin-top: 2.5rem; max-width: 60rem; }
.modes h3 { margin-bottom: 0.75rem; }
.modes pre { margin: 0 0 1rem; font-family: var(--font-mono); font-size: 0.95rem; color: var(--accent); }
.modes pre code { background: none; padding: 0; color: inherit; }
.modes p { font-size: 1.02rem; }
.modes__note { color: var(--fg-dim); font-size: 0.98rem; margin-top: 2rem; max-width: 44rem; }
@media (max-width: 46rem) { .modes { grid-template-columns: 1fr; } }

/* --- around the work --------------------------------------------------- */

.around { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; margin: 2.5rem 0 0; max-width: 60rem; }
.around dt { font-family: var(--font-head); font-weight: 500; font-size: 1.2rem; margin-bottom: 0.35rem; }
.around dd { margin: 0; color: var(--fg); font-size: 1.02rem; }
@media (max-width: 46rem) { .around { grid-template-columns: 1fr; } }

/* --- layers ------------------------------------------------------------ */

.layer-list { list-style: none; padding: 0; margin: 3rem 0 0; max-width: 44rem; display: grid; gap: 2rem; }
.layer-list li { padding-left: 1.25rem; border-left: 2px solid var(--rule-strong); }
.layer-list h3 { margin-bottom: 0.4rem; }
.layer-list h3 a { text-decoration-color: var(--rule-strong); }
.layer-list h3 a:hover { text-decoration-color: var(--accent); }
.layer-list p { margin: 0; color: var(--fg-dim); font-size: 1.02rem; }
.see { white-space: nowrap; color: var(--fg); }

.xray { margin-top: 3.5rem; max-width: 60rem; }
.xray h3 { margin-bottom: 0.6rem; }
.xray__shot { display: block; margin-top: 1.5rem; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; }
.xray__shot:hover { border-color: var(--accent); }

/* --- darner ------------------------------------------------------------ */

.darner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; max-width: 60rem; }
.darner__panel { margin: 0; }
.darner__panel figcaption { font-family: var(--font-head); color: var(--fg-dim); font-size: 1rem; margin-bottom: 0.6rem; }
.darner__panel pre {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  height: calc(100% - 2.2rem);
}
.darner__panel code { background: none; padding: 0; font-size: inherit; }
.c-comment { color: var(--fg-faint); }
.c-key { color: var(--code-key); }
.c-mention { color: var(--accent); }
.darner__line { font-family: var(--font-head); font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.3; margin: 2.25rem 0 0; max-width: 40rem; }
.darner + .darner__line + .facts { margin-bottom: 2.5rem; }
@media (max-width: 46rem) { .darner { grid-template-columns: minmax(0, 1fr); } .darner__panel pre { height: auto; } }

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

.site-footer { border-top: 1px solid var(--rule); padding-block: 3.5rem 4rem; font-size: 0.98rem; }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem 4rem; }
.site-footer__about img { height: 34px; width: auto; margin-bottom: 1.1rem; }
.site-footer__about p { color: var(--fg-dim); max-width: 30rem; }
.site-footer__links { display: grid; gap: 0.5rem; align-content: start; font-family: var(--font-head); font-size: 1.05rem; }
.site-footer__links a { text-decoration: none; }
.site-footer__legal { grid-column: 1 / -1; color: var(--fg-dim); font-size: 0.9rem; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
@media (max-width: 46rem) { .site-footer__inner { grid-template-columns: 1fr; } }