/* Matrix — Act I.
   Visual rules:
   1. Everything inside the simulation is graded green, like fluorescent office
      light. No neutral greys, no pure white.
   2. The only saturated colours in the whole act are the two pills.
   3. When the simulation stutters, the type itself stretches and squeezes
      (both families are variable on the width axis). */

@font-face {
  font-family: "Martian Mono";
  src: url(../fonts/martian-mono-latin.woff2) format("woff2");
  font-weight: 100 800; font-stretch: 75% 112.5%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  src: url(../fonts/martian-mono-latin-ext.woff2) format("woff2");
  font-weight: 100 800; font-stretch: 75% 112.5%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(../fonts/instrument-sans-latin.woff2) format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(../fonts/instrument-sans-latin-ext.woff2) format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}

:root {
  /* the simulation's grade */
  --ink: #1c2620;          /* green-black ink, office text */
  --ink-soft: #46544a;
  --paper: #e3ebd6;        /* paper under fluorescent light */
  --tile: #c3cbb6;         /* ceiling tile */
  --tile-line: #a9b39c;
  --fabric: #6f7c68;       /* cubicle partition */
  --screen: #06120b;       /* a switched-on monitor */
  --phosphor: #a8efa0;
  --phosphor-dim: #5f9a62;
  /* reserved: the only saturated colours of the act */
  --pill-red: #d2321e;
  --pill-blue: #2f5fd0;

  --mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Instrument Sans", system-ui, sans-serif;

  --step--1: .8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 2.4414rem;
  --step-4: 3.8147rem;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
  color: var(--paper);
  font: 400 var(--step-0)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

#stage { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; }

/* ---------- the stutter: type that loses its width ---------- */

@keyframes stutter {
  0%   { font-stretch: 100%; transform: translateX(0); }
  12%  { font-stretch: 75%;  transform: translateX(-3px); }
  24%  { font-stretch: 112%; transform: translateX(4px); }
  36%  { font-stretch: 82%;  transform: translateX(-1px); }
  60%  { font-stretch: 108%; transform: translateX(2px); }
  100% { font-stretch: 100%; transform: translateX(0); }
}
.stutter, .stutter * { animation: stutter .55s steps(6) 1; }

/* a full-frame tear: the world shown for an instant as what it is */
.tear {
  position: absolute; inset: 0; z-index: 900; pointer-events: none;
  font: 300 14px/18px var(--mono); color: var(--phosphor);
  background: rgba(6, 18, 11, .92);
  white-space: pre; overflow: hidden; transform: scaleX(-1);
  text-shadow: 0 0 6px rgba(168, 239, 160, .6);
}

/* ---------- title: a call trace locking on ---------- */

.title {
  background: var(--screen);
  color: var(--phosphor);
  font-family: var(--mono);
  display: grid;
  grid-template-columns: minmax(1.5rem, 1fr) minmax(0, 46rem) minmax(1.5rem, 1fr);
  align-content: center;
}
.title__trace {
  position: absolute; inset: 0; padding: 1.25rem 1.5rem;
  font-size: 11px; line-height: 1.6; color: var(--phosphor-dim);
  white-space: pre; overflow: hidden; opacity: .4;
  mask-image: linear-gradient(90deg, #000 0 12%, transparent 34%);
}
.title__body { grid-column: 2; position: relative; }
.title__logo {
  margin: 0;
  font-weight: 200; font-stretch: 112.5%;
  font-size: clamp(2.5rem, min(12vw, 17dvh), 8.5rem); line-height: .9;
  letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(168, 239, 160, .35);
  display: flex;
}
.title__logo span { display: inline-block; min-width: .72em; text-align: center; }
.title__logo span.locked { font-weight: 500; }
.title__act {
  margin: 1.25rem 0 3rem; font-size: var(--step--1); color: var(--phosphor-dim);
  font-stretch: 85%;
}
.title__menu { display: grid; gap: .25rem; justify-items: start; }
.title__menu button {
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--step-1); font-weight: 300;
  color: var(--phosphor); text-align: left;
}
.title__menu button::before { content: ">"; display: inline-block; width: 1.6em; opacity: 0; }
.title__menu button:hover::before, .title__menu button:focus-visible::before { opacity: 1; }
.title__menu button:focus-visible { outline: none; text-shadow: 0 0 10px var(--phosphor); }
.title__menu button[disabled] { opacity: .35; cursor: default; }
.title__menu button[disabled]::before { opacity: 0; }
.title__keys { margin-top: 3rem; font-size: 11px; color: var(--phosphor-dim); }
.title__confirm p { margin: 0 0 1rem; font-size: var(--step--1); max-width: 34em; }

.cursor::after {
  content: ""; display: inline-block; width: .55em; height: 1em;
  background: currentColor; vertical-align: -.12em; margin-left: .15em;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- boot text and chapter cards ---------- */

.boot {
  background: var(--screen); color: var(--phosphor);
  font: 300 var(--step--1)/1.9 var(--mono);
  padding: clamp(1.5rem, 6vw, 4rem);
}
.boot p { margin: 0; }

.card {
  background: #000; display: grid; place-content: center; text-align: center;
  color: var(--paper);
}
.card__n { font: 300 var(--step--1) var(--mono); color: var(--phosphor-dim); margin: 0 0 1rem; }
.card__name {
  margin: 0; font-family: var(--sans); font-weight: 700;
  font-size: clamp(2.5rem, 9vw, 6rem); line-height: 1; letter-spacing: -.02em;
  font-stretch: 75%;
  transition: font-stretch 2.4s cubic-bezier(.2, .7, .1, 1), opacity 1.2s;
}
.card--in .card__name { font-stretch: 100%; }

/* ---------- MetaOS: the office desktop ---------- */

.os {
  --bar: 2.75rem;
  background-color: var(--tile);
  /* acoustic ceiling tiles */
  background-image:
    linear-gradient(var(--tile-line) 2px, transparent 2px),
    linear-gradient(90deg, var(--tile-line) 2px, transparent 2px),
    radial-gradient(circle at 30% 40%, rgba(28, 38, 32, .05) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 75%, rgba(28, 38, 32, .05) 1px, transparent 1.5px);
  background-size: 120px 120px, 120px 120px, 9px 9px, 13px 13px;
  background-position: -1px calc(var(--bar) - 1px);
  color: var(--ink);
  font-size: 14px;
}
/* two fluorescent panels set into the ceiling */
.os__light {
  position: absolute; width: 238px; height: 118px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 18px, rgba(28, 38, 32, .06) 18px 20px),
    linear-gradient(#f3f8e8, #e6efd6);
  box-shadow: 0 0 60px 18px rgba(240, 248, 225, .55);
}
.os__light--a { left: 361px; top: calc(var(--bar) + 121px); }
.os__light--b { left: 841px; top: calc(var(--bar) + 361px); }
.os__mark {
  position: absolute; right: 2rem; bottom: 1.5rem;
  font: 700 clamp(3rem, 9vw, 7rem)/1 var(--sans); font-stretch: 75%;
  letter-spacing: -.03em; color: rgba(28, 38, 32, .09);
  user-select: none;
}

.os__bar {
  position: absolute; inset: 0 0 auto 0; height: var(--bar); z-index: 500;
  display: flex; align-items: stretch;
  background: var(--paper); border-bottom: 2px solid var(--ink);
}
.os__brand {
  display: flex; align-items: center; gap: .55rem; padding: 0 1rem;
  font-weight: 700; font-stretch: 80%; border-right: 2px solid var(--ink);
}
.os__brand i { width: 14px; height: 14px; background: var(--ink); display: block;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 60%, 0 100%); }
.os__tabs { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.os__tab {
  border: 0; border-right: 1px solid var(--tile-line); background: none;
  padding: 0 1rem; cursor: pointer; white-space: nowrap; font-stretch: 85%;
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis;
}
.os__tab[aria-current="true"] { background: var(--ink); color: var(--paper); }
.os__where {
  display: flex; align-items: center; padding: 0 1rem; gap: 1rem;
  border-left: 2px solid var(--ink); font-stretch: 85%; color: var(--ink-soft);
}
.os__clock { font: 500 13px var(--mono); color: var(--ink); min-width: 3.4em; text-align: right; }

.os__icons {
  position: absolute; top: calc(var(--bar) + 1.25rem); left: 1rem; z-index: 1;
  display: grid; gap: .5rem;
}
.os__icon {
  width: 92px; padding: .5rem .25rem; background: none; border: 0; cursor: pointer;
  display: grid; justify-items: center; gap: .35rem; position: relative;
}
.os__icon svg { width: 40px; height: 40px; stroke: var(--ink); stroke-width: 1.6; fill: none; }
.os__icon span {
  font-size: 12.5px; line-height: 1.2; padding: .1rem .3rem; background: var(--paper);
}
.os__icon:hover span, .os__icon:focus-visible span { background: var(--ink); color: var(--paper); }
.os__icon[data-badge]::after {
  content: attr(data-badge); position: absolute; top: .25rem; right: 1.15rem;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; background: var(--ink); color: var(--paper);
  font: 500 11px/1.25rem var(--mono); text-align: center;
}

/* windows: flat sheets with a hard shadow, nothing borrowed from Redmond */
.win {
  position: absolute; z-index: 10; display: flex; flex-direction: column;
  background: var(--paper); border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(28, 38, 32, .28);
  max-width: calc(100vw - 1rem); max-height: calc(100dvh - var(--bar) - 1rem);
}
.win--focus { box-shadow: 10px 10px 0 rgba(28, 38, 32, .4); }
.win__head {
  display: flex; align-items: center; gap: .75rem; flex: none;
  padding: 0 0 0 .85rem; height: 2.1rem; cursor: grab; user-select: none; touch-action: none;
  border-bottom: 2px solid var(--ink);
}
.win--focus .win__head { background: var(--ink); color: var(--paper); }
.win__title { flex: 1; font-weight: 600; font-stretch: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__close {
  width: 2.1rem; height: 100%; border: 0; border-left: 2px solid var(--ink); background: none; cursor: pointer;
  display: grid; place-items: center;
}
.win--focus .win__close { border-left-color: var(--paper); }
.win__close svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; }
.win__body { flex: 1; overflow: auto; min-height: 0; }

/* a thought: Neo's own voice over the desktop */
.thought {
  position: absolute; left: 50%; bottom: 2.25rem; z-index: 800; transform: translateX(-50%);
  width: min(36rem, calc(100vw - 2rem));
  font: italic 500 var(--step-1)/1.35 var(--sans); color: var(--ink); text-align: center;
  background: var(--paper); padding: .9rem 1.25rem; border: 2px solid var(--ink);
  animation: thought 4.5s ease both;
}
@keyframes thought { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }

.btn {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: .4rem .9rem; cursor: pointer; font-weight: 600; font-stretch: 85%;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--ink-soft); }
.btn[disabled] { opacity: .4; cursor: default; }
.btn[disabled]:hover { background: var(--paper); color: var(--ink); }

.status { min-height: 1.5em; margin: 0; font-size: 13px; color: var(--ink-soft); }
.status--bad { color: var(--ink); font-weight: 600; }
.status--bad::before { content: ""; display: inline-block; width: .6em; height: .6em; background: var(--ink); margin-right: .45em; }

/* tasks */
.tasks { padding: 1rem 1.15rem 1.15rem; width: 25rem; max-width: 100%; }
.tasks__intro { margin: 0 0 1rem; color: var(--ink-soft); }
.tasks ol { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: task; }
.tasks li {
  counter-increment: task; display: grid; grid-template-columns: 1.75rem 1fr; gap: .25rem .5rem;
  padding: .55rem 0; border-top: 1px solid var(--tile-line);
}
.tasks li::before { content: counter(task); font: 500 12px/1.6 var(--mono); color: var(--ink-soft); }
.tasks li.done span { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-soft); }
.tasks li small { grid-column: 2; color: var(--ink-soft); }

/* mail */
.mail { display: grid; grid-template-columns: 15rem 1fr; width: 46rem; max-width: 100%; height: min(25rem, calc(100dvh - var(--bar) - 4.5rem)); }
.mail__list { list-style: none; margin: 0; padding: 0; border-right: 2px solid var(--ink); overflow: auto; }
.mail__item {
  display: grid; gap: .1rem; width: 100%; text-align: left; padding: .6rem .75rem; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--tile-line);
}
.mail__item b { font-weight: 600; font-stretch: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail__item span { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail__item.unread b::before { content: ""; display: inline-block; width: .5em; height: .5em; background: var(--ink); margin-right: .4em; vertical-align: .1em; }
.mail__item[aria-current="true"] { background: var(--ink); color: var(--paper); }
.mail__item[aria-current="true"] span { color: var(--tile); }
.mail__read { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mail__head { padding: .85rem 1rem; border-bottom: 1px solid var(--tile-line); display: grid; gap: .15rem; }
.mail__head dt { display: none; }
.mail__head dd { margin: 0; }
.mail__head .subj { font-weight: 700; font-size: 1.05rem; font-stretch: 90%; }
.mail__text { flex: 1; min-height: 0; overflow: auto; padding: 1rem; white-space: pre-wrap; line-height: 1.55; max-width: 38em; }
.mail__text--empty { color: var(--ink-soft); }
.mail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; border-top: 2px solid var(--ink); }
.mail__actions .status { flex-basis: 100%; }

/* timesheet: the security log prints out like a till receipt */
.sheet { display: grid; grid-template-columns: 1fr 15rem; gap: 1.25rem; padding: 1.15rem; width: 42rem; max-width: 100%; }
.sheet__intro { margin: 0 0 1rem; color: var(--ink-soft); }
.sheet table { border-collapse: collapse; width: 100%; }
.sheet td, .sheet th { padding: .35rem 0; border-bottom: 1px solid var(--tile-line); text-align: left; font-weight: 400; }
.sheet tfoot th, .sheet tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; }
.sheet input {
  width: 4.5rem; font: 500 15px var(--mono); padding: .25rem .4rem; text-align: right;
  border: 2px solid var(--ink); background: #f1f6e8; color: var(--ink);
}
.sheet__total { font: 600 15px var(--mono); text-align: right; padding-right: .5rem; }
.sheet__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.receipt {
  align-self: start; background: #f1f6e8; padding: 1rem .9rem 1.4rem;
  font: 400 11.5px/1.65 var(--mono); color: var(--ink);
  /* torn bottom edge */
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
}
.receipt h3 { margin: 0 0 .5rem; font: 600 11.5px var(--mono); border-bottom: 1px dashed var(--ink-soft); padding-bottom: .5rem; }
.receipt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }

.trash { padding: 1.15rem; width: 22rem; max-width: 100%; }
.trash p { margin: 0; }
.trash pre { margin: .75rem 0 0; font: 400 13px/1.6 var(--mono); white-space: pre-wrap; }

/* login */
.login {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 50;
}
.login form { background: var(--paper); border: 2px solid var(--ink); box-shadow: 10px 10px 0 rgba(28,38,32,.35); width: min(22rem, calc(100vw - 2rem)); }
.login h2 { margin: 0; padding: .55rem .85rem; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; font-stretch: 85%; }
.login label { display: grid; gap: .3rem; padding: .75rem 1rem 0; font-size: 13px; }
.login input { font: 500 14px var(--mono); padding: .4rem .5rem; border: 2px solid var(--ink); background: #f1f6e8; color: var(--ink); }
.login input[readonly] { background: transparent; }
.login .row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; }

/* ---------- scenes: widescreen plate, subtitles in the black ---------- */

.scene {
  background: #000; display: flex; flex-direction: column;
}
/* the plate gives up height before the subtitles do: it is drawn to be cropped */
.scene__plate {
  flex: 0 1 auto; min-height: 0; position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 2.39 / 1; max-height: 62dvh;
  margin-top: auto;
}
.scene__subs {
  flex: 0 0 auto; min-height: min(11rem, 40dvh); margin-bottom: auto;
  max-height: 70dvh; overflow-y: auto;
  padding: 1.5rem 1.25rem 2rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  cursor: pointer;
}
.scene__who { font: 400 12px var(--mono); color: var(--phosphor-dim); min-height: 1.2em; margin: 0; }
.scene__line {
  margin: 0; max-width: 34em; font: 500 clamp(1.05rem, 2.3vw, 1.4rem)/1.45 var(--sans);
  color: var(--paper); text-wrap: balance;
}
.scene__line--narr { font-style: italic; font-weight: 400; color: #b9c4ad; }
.scene__more { width: 0; height: 0; border: 6px solid transparent; border-top-color: var(--phosphor-dim); margin-top: .5rem; opacity: 0; }
.scene__more.on { opacity: 1; animation: blink 1.05s steps(1) infinite; }
.scene__choices { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; justify-items: center; }
.scene__choices button {
  background: none; border: 0; cursor: pointer; padding: .3rem .5rem;
  font: 500 clamp(1rem, 2.1vw, 1.25rem)/1.4 var(--sans); color: #b9c4ad;
}
.scene__choices button kbd { font: 400 12px var(--mono); color: var(--phosphor-dim); margin-right: .65rem; }
.scene__choices button:hover, .scene__choices button:focus-visible { color: var(--paper); outline: none; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

.scene__plate--blank { visibility: hidden; }
.scene__plate .plate, .scene__layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__layer { animation: screen-in .8s ease both; }
.scene__line--asked { opacity: .55; }

/* plate motion, all of it slow except the club */
.pl-cleaners { animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(14px, 7px); } }
.pl-squeegee { transform-box: fill-box; transform-origin: 0 100%; animation: wipe 1.7s ease-in-out infinite alternate; }
@keyframes wipe { from { transform: rotate(-30deg); } to { transform: rotate(22deg); } }
.pl-flicker { animation: flicker 6s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: .85; } 47% { opacity: .7; } 48% { opacity: .9; } 81% { opacity: .78; } }
.pl-beam { transform-box: view-box; transform-origin: 65px 0; animation: sweep 6.5s ease-in-out infinite alternate; }
.pl-beam--b { transform-origin: 175px 0; animation-duration: 9s; animation-direction: alternate-reverse; }
@keyframes sweep { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
.pl-strobe { opacity: 0; animation: strobe 3.8s steps(1) infinite; }
@keyframes strobe { 0% { opacity: 0; } 58% { opacity: .07; } 60% { opacity: 0; } 63% { opacity: .05; } 65% { opacity: 0; } }
.pl-bob { animation: bob .476s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(1.3px); } }

/* screens dissolve into each other */
.screen--in { animation: screen-in .6s ease both; }
.screen--leaving { animation: screen-out .6s ease both; pointer-events: none; }
@keyframes screen-in { from { opacity: 0; } }
@keyframes screen-out { to { opacity: 0; } }

/* the speaker in the corner, legible on light and dark screens alike */
.sound {
  position: fixed; right: .75rem; bottom: .75rem; z-index: 990; width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  color: #a8efa0; mix-blend-mode: difference;
}
.sound svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sound .sound__cross { display: none; }
.sound[aria-pressed="true"] .sound__waves { display: none; }
.sound[aria-pressed="true"] .sound__cross { display: inline; }

/* ---------- Neo's terminal ---------- */

.term {
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)),
    var(--screen);
  color: var(--phosphor);
  font: 300 14px/1.7 var(--mono);
  display: flex; flex-direction: column;
  text-shadow: 0 0 5px rgba(168, 239, 160, .45);
}
.term__out { flex: 1; overflow-y: auto; padding: clamp(1rem, 4vw, 2.5rem) clamp(1rem, 5vw, 3.5rem) .5rem; white-space: pre-wrap; word-break: break-word; }
.term__out p { margin: 0; max-width: 72ch; }
.term__out .dim { color: var(--phosphor-dim); }
.term__out .hl { font-weight: 600; }
.term__row { display: flex; gap: .75em; padding: 0 clamp(1rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem); }
.term__row label { white-space: nowrap; color: var(--phosphor-dim); }
.term__row input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0;
  font: inherit; color: inherit; text-shadow: inherit; caret-color: var(--phosphor);
}
.term--hijack .term__out { display: grid; place-content: center; font-size: var(--step-1); }

.end { background: var(--screen); color: var(--phosphor); font-family: var(--mono); display: grid; place-content: center; gap: 1rem; padding: 2rem; text-align: left; }
.end h2 { margin: 0; font-weight: 200; font-stretch: 112.5%; font-size: var(--step-3); }
.end p { margin: 0; color: var(--phosphor-dim); max-width: 36em; }
.end button { justify-self: start; margin-top: 1.5rem; background: none; border: 1px solid var(--phosphor-dim); color: var(--phosphor); font-family: var(--mono); padding: .6rem 1rem; cursor: pointer; }
.end button:hover { border-color: var(--phosphor); }


@media (max-width: 720px) {
  .os__icons { grid-auto-flow: column; top: auto; bottom: .75rem; left: .5rem; right: 3.25rem; justify-content: space-around; }
  .os__where span:not(.os__clock), .os__tabs { display: none; }
  .os__bar { justify-content: space-between; }
  .os__light { display: none; }
  .win { left: .5rem !important; right: .5rem; top: calc(var(--bar) + .5rem) !important; max-height: calc(100dvh - var(--bar) - 7.5rem); }
  .mail { grid-template-columns: 1fr; grid-template-rows: 9rem 1fr; height: calc(100dvh - var(--bar) - 10rem); }
  .mail__list { border-right: 0; border-bottom: 2px solid var(--ink); }
  .sheet { grid-template-columns: 1fr; }
  .scene__plate { aspect-ratio: 16 / 9; }
}

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

/* ---------- chapter 3: the plan of floor 12 ---------- */

.plan {
  background: #8e9a84; color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto; gap: .75rem;
  padding: clamp(.75rem, 2.5vw, 1.5rem);
}
.call {
  justify-self: center; width: min(44rem, 100%);
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: baseline;
  background: var(--screen); color: var(--phosphor); padding: .7rem 1rem;
  font: 300 13.5px/1.55 var(--mono); min-height: 3.6rem;
  box-shadow: 6px 6px 0 rgba(28, 38, 32, .35);
}
.call__who { color: var(--phosphor-dim); font-size: 11.5px; }
.call__line { margin: 0; }
.plan__desk { min-height: 0; min-width: 0; display: grid; place-items: center; overflow: hidden; }
.plan__sheet {
  background: var(--paper); box-shadow: 10px 10px 0 rgba(28, 38, 32, .35);
  touch-action: manipulation; user-select: none;
}
.plan__grid { stroke: #c3cbb6; stroke-width: .25; }
.plan__wall { fill: var(--ink); }
.plan__part { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: square; }
.plan__post { fill: var(--ink); }
.plan__label--onwall { fill: var(--paper); text-anchor: middle; font-size: 2.9px; }
.plan__plant { fill: none; stroke: var(--ink); stroke-width: .8; stroke-dasharray: 1.2 1; }
.plan__lift { fill: none; stroke: var(--ink-soft); stroke-width: .5; }
.plan__label { font: 400 4.2px var(--sans); fill: var(--ink-soft); }
.plan__title { font: 700 7px var(--sans); font-stretch: 80%; fill: var(--ink); }
.plan__goal { stroke: var(--ink); stroke-width: 1.2; }
.plan__neo circle:first-child { fill: var(--ink); }
.plan__ring { fill: none; stroke: var(--ink); stroke-width: .5; animation: ring 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.plan__neo, .plan__agent { transition: transform .16s ease-out; }
.plan__agent rect { fill: #f1f6e8; stroke: var(--ink); stroke-width: 1.3; }
.plan__agent .plan__nose { fill: var(--ink); }
.plan__agent--hit rect { fill: var(--ink); }
.plan__next { fill: var(--ink-soft); }
.plan__trail { fill: var(--ink-soft); opacity: .6; }
.plan__hintdot { fill: none; stroke: var(--ink); stroke-width: .6; }
.plan__hintwait { fill: none; stroke: var(--ink); stroke-width: .6; stroke-dasharray: .8 .8; }
.plan__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.plan__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: 12.5px; }
.plan__legend li { display: flex; align-items: center; gap: .5rem; }
.lg { width: 14px; height: 14px; display: inline-block; flex: none; }
.lg--agent { background: #f1f6e8; border: 2px solid var(--ink); }
.lg--blind { background: repeating-linear-gradient(45deg, rgba(28,38,32,.45) 0 1.5px, transparent 1.5px 4px), var(--paper); }
.lg--next { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); margin: 0 4px; }
.pad { display: grid; grid-template-columns: repeat(3, 2.9rem); grid-template-rows: repeat(3, 2.9rem); gap: .3rem; }
.pad button { border: 2px solid var(--ink); background: var(--paper); cursor: pointer; font: 500 1.1rem var(--mono); }
.pad button:active { background: var(--ink); color: var(--paper); }
.pad__up { grid-column: 2; grid-row: 1; } .pad__left { grid-column: 1; grid-row: 2; } .pad__wait { grid-column: 2; grid-row: 2; }
.pad__right { grid-column: 3; grid-row: 2; } .pad__down { grid-column: 2; grid-row: 3; }
.plan__side { justify-self: end; display: grid; gap: .5rem; justify-items: end; text-align: right; }
.plan__hint { border: 2px solid var(--ink); background: var(--paper); padding: .45rem .9rem; cursor: pointer; font-weight: 600; font-stretch: 85%; }
.plan__hint:hover { background: var(--ink); color: var(--paper); }
.plan__keys { margin: 0; font-size: 12px; color: var(--ink); opacity: .75; max-width: 16em; }

/* ---------- chapter 3: the ledge ---------- */

.pl-windstreaks { animation: wind 2.6s linear infinite; }
@keyframes wind { to { transform: translateX(80px); } }
.pl-neo { transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.pl-neo--wobble > g { animation: wobble .5s ease-in-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wobble { 25% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }
.pl-scaffold { transition: transform 3s ease-in; }
.pl-scaffold--up { transform: translateY(-70px); }
.gauge { width: min(26rem, 90vw); display: grid; gap: .6rem; justify-items: center; }
.gauge__track { position: relative; width: 100%; height: 14px; border: 1px solid var(--phosphor-dim); }
.gauge__calm { position: absolute; top: 0; bottom: 0; background: rgba(168, 239, 160, .22); }
.gauge__needle { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--paper); }
.gauge__step {
  background: none; border: 1px solid var(--phosphor-dim); color: var(--paper); cursor: pointer;
  font: 500 var(--step-0) var(--sans); padding: .5rem 1.4rem;
}
.gauge__step:hover { border-color: var(--paper); }

/* ---------- chapter 4: the plates that move ---------- */

.pl-wriggle { animation: wriggle .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes wriggle { from { transform: skewY(-4deg) scaleX(.97); } to { transform: skewY(4deg) scaleX(1.03); } }
.pl-rain { animation: rain .5s linear infinite; }
@keyframes rain { to { transform: translateY(16px); } }
.pl-passing { animation: passing 3.2s linear infinite; }
@keyframes passing { from { transform: translateX(160px); } to { transform: translateX(-60px); } }
.pl-scan { animation: scan 2.2s linear infinite; }
@keyframes scan { from { transform: translateY(-4px); } to { transform: translateY(6px); } }

/* the mouth seals: the words lose their width until they are a line */
.scene__choices--sealing button { animation: seal 1.4s ease-in forwards; pointer-events: none; }
@keyframes seal {
  40% { font-stretch: 75%; letter-spacing: -.08em; }
  80% { letter-spacing: -.5em; opacity: .7; }
  100% { letter-spacing: -.6em; opacity: 0; transform: scaleX(.1); }
}

/* ---------- chapter 4: the probe ---------- */

.probe {
  background: #050a07; color: var(--phosphor); font-family: var(--mono);
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 1rem;
  padding: clamp(1rem, 3vw, 2rem);
}
.probe__head { text-align: center; max-width: 40rem; }
.probe__head h2 { margin: 0 0 .4rem; font-weight: 300; font-stretch: 112%; font-size: var(--step-1); }
.probe__head p { margin: 0; font-size: 13px; color: var(--phosphor-dim); line-height: 1.6; }
.probe__screen { position: relative; align-self: center; width: min(26rem, 88vw, 52dvh); aspect-ratio: 1; }
.probe__body { position: absolute; inset: 0; width: 100%; height: 100%; }
.probe__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.probe__cell {
  border: 1px solid rgba(95, 154, 98, .35); background: transparent; color: var(--phosphor); cursor: pointer;
  font: 500 clamp(.8rem, 2.2vw, 1.05rem) var(--mono); display: grid; place-items: center; padding: 0;
}
.probe__cell:hover, .probe__cell:focus-visible { background: rgba(168, 239, 160, .12); outline: none; }
.probe__cell[data-d] { background: rgba(168, 239, 160, max(.07, calc(.55 - var(--d) * .07))); color: var(--phosphor); }
.probe__cell[data-near] { color: var(--screen); }
.probe__cell[data-d="0"] { background: var(--phosphor); }
.probe__cell--bug { background: var(--phosphor) !important; animation: blink .4s steps(1) 4; }
.probe__foot { display: grid; gap: .6rem; justify-items: center; text-align: center; }
.probe__modes { display: flex; gap: .5rem; }
.probe__modes button { background: none; border: 1px solid var(--phosphor-dim); color: var(--phosphor); padding: .45rem 1rem; cursor: pointer; font: 400 13px var(--mono); }
.probe__modes button[aria-pressed="true"] { background: var(--phosphor); color: var(--screen); }
.probe__status { margin: 0; min-height: 1.5em; font-size: 13px; }

@media (max-width: 720px) {
  .plan__foot { grid-template-columns: 1fr auto; }
  .plan__legend { display: none; }
  .plan__keys { display: none; }
  .call { font-size: 12.5px; }
}

/* short windows: the panel preview, a phone on its side */
@media (max-height: 560px) {
  .scene__subs { padding: .75rem 1rem 1rem; gap: .3rem; }
  .scene__line { font-size: 1rem; }
  .scene__choices { gap: 0; margin-top: .25rem; }
  .scene__choices button { font-size: .95rem; padding: .15rem .5rem; }
  .title__act { margin: .75rem 0 1.25rem; }
  .title__menu button { padding: .2rem 0; font-size: var(--step-0); }
  .title__keys { margin-top: 1.25rem; }
  .card__name { font-size: clamp(2rem, 14dvh, 6rem); }
  .boot { line-height: 1.6; padding: 1rem 1.5rem; }
  .plan { gap: .4rem; padding: .5rem; }
  .call { min-height: 0; padding: .4rem .75rem; font-size: 12px; }
  .pad { grid-template-columns: repeat(3, 2.2rem); grid-template-rows: repeat(3, 2.2rem); gap: .2rem; }
  .plan__legend { font-size: 11.5px; }
  .probe { gap: .5rem; padding: .75rem; }
  .probe__head p { display: none; }
  .probe__screen { width: min(26rem, 88vw, 48dvh); }
  .term { font-size: 12.5px; }
  .end { gap: .5rem; }
  .end button { margin-top: .5rem; }
  .mail__head { padding: .45rem .75rem; }
  .mail__text { padding: .5rem .75rem; }
  .mail__actions { padding: .4rem .75rem; gap: .35rem; }
  .mail__actions .btn { padding: .2rem .6rem; }
}
@media (max-height: 560px) and (max-width: 720px) {
  .os__icons { bottom: .25rem; gap: 0; }
  .os__icon { padding: .2rem; gap: .15rem; width: 80px; }
  .os__icon svg { width: 26px; height: 26px; }
  .os__icon span { font-size: 11px; }
  .win { max-height: calc(100dvh - var(--bar) - 5.25rem); }
  .mail { grid-template-rows: 4.2rem 1fr; height: calc(100dvh - var(--bar) - 6.4rem); }
  .mail__item { padding: .3rem .6rem; }
}