/* MIR's page until its site stands at /mir: one view, dark as the alpha is.
   Every size, tone and time is the design system's (mir.css, written by its build: version 1.6.0). What is the page's
   own is named here once, in :root, and derived from the system's values. */

@font-face { font-family: "Matrix Sans Print"; src: url(fonts/MatrixSansPrint.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Inter"; src: url(fonts/InterVariable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --margin: var(--mir-space-m4);
  --mark-high: 40px;                                                         /* the mark's height (the founder, 2026-10-09); fitted to the display's pixels it comes to 39, 40.5 or 40 */
  --top: calc(var(--mark-high) + var(--mir-mark-clear) * 2);                 /* the top: the mark, and its own clear space above and below it */
  --ask: var(--mir-type-size-p15);                                           /* the size of what the field and its button say: one size for both */
  --type: 22ms;                                                              /* a letter typed in the display: the app's own pace (TYPE_MS, apps/mir-web/src/panel/morph.ts in the MIR repo) */
  --bar: calc(var(--mir-control-row) + var(--mir-space-m4) * 2);             /* the foot: a control row, and a module of air above and below */
  --head: var(--mir-type-size-p20);                                          /* the line's size, on the face's lattice: two px to a dot (three where there is room) */
  --wide: var(--mir-layout-w2);                                              /* the field's width (where there is room: exactly the line's, ink to ink) */
  --cap: calc(var(--mir-type-panel-cap-dots) / var(--mir-type-panel-dots-per-size));      /* a capital's height in the panel's face, in sizes of it */
  --ground: #0a0a0a;                                                         /* the page's ground (the founder, 2026-10-10: darker than the panel's deck, which it was for a round). rings.js reads it: six figures, as written here */
  --dot: #2a2a2a;                                                            /* a dot of the rings at rest, on every ring (the founder, 2026-10-10: darker than the system's dim, which it was). rings.js reads it, as the ground */
  --fill-rest: #191919;                                                      /* the field on it (the mix below, written out for a browser without color-mix) */
  --ease: var(--mir-motion-curve-ease);
  --change: var(--mir-motion-time-change);
  --panel-face: var(--mir-type-panel-family), ui-monospace, monospace;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --fill-rest: color-mix(in srgb, var(--mir-active) 6%, var(--ground)); }      /* a field is the ground lifted a little: it follows the ground, and the label's tone reads on it */
}
@media (pointer: coarse) { :root { --ask: var(--mir-type-size-p20); } }      /* (under a finger: a phone zooms into a field whose letters are under 16 px) */
@media (min-width: 600px) {
  :root {
    --margin: var(--mir-space-m10);
    --head: var(--mir-type-size-p30);
    /* the line's ink at that size: the face's own measure of it (the system's `mark.line.ink`), less the dot the page leaves off
       the line's end (the founder, 2026-10-10), which is two dots' places of the face */
    --wide: calc(var(--mir-type-size-p30) * (var(--mir-mark-line-ink) - 2 / var(--mir-type-panel-dots-per-size)));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
  background: var(--ground); color: var(--mir-ready);
  font-family: var(--mir-type-reading-family), system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--mir-type-reading-size); line-height: var(--mir-type-reading-line);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* what is said in the panel's face: what names or states */
.head, .row-input, .row-cta, .done-head { font-family: var(--panel-face); font-weight: 400; font-kerning: none; font-synthesis: none; }

/* the rings: behind everything, never in the way of a press */
.rings { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.js .rings { opacity: 0; transition: opacity var(--mir-motion-time-wake) var(--ease); }
.js .rings.on { opacity: 1; }
.top, .core, .foot { position: relative; z-index: 1; }

/* the focus a keyboard sees: one ring, clear of what it rings */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--mir-active); outline-offset: 3px; }

/* ── the top: the mark, in the middle. Three drawings of it, each built on the pixels of its kind of display: one is shown ── */
.top { display: flex; align-items: center; justify-content: center; min-height: var(--top); padding: env(safe-area-inset-top, 0px) var(--margin) 0; }
.mark { margin: 0; line-height: 0; }
.mark-box { display: block; }
.mark-word { display: none; fill: var(--mir-active); color: var(--mir-active); overflow: visible; }      /* (as it builds itself a block may reach a hair past its box) */
.mark-word.at-2 { display: block; }
@media (max-resolution: 1.49dppx), (-webkit-max-device-pixel-ratio: 1.49) { .mark-word.at-2 { display: none; } .mark-word.at-1 { display: block; } }
@media (min-resolution: 2.5dppx), (-webkit-min-device-pixel-ratio: 2.5) { .mark-word.at-2 { display: none; } .mark-word.at-3 { display: block; } }

/* ── the foot: one quiet line, low in its bar. The maker's name in it is the way to his portfolio: a link as the page's other is ── */
.foot { display: flex; align-items: flex-end; justify-content: center; min-height: var(--bar); padding: var(--mir-space-m2) var(--margin) calc(var(--mir-space-m4) + env(safe-area-inset-bottom, 0px)); }
.foot-line .textlink:focus-visible { outline-offset: 0; }      /* (the sign stands against the name and the year a space after it: the ring sits close, clear of both) */
.foot-line { margin: 0; font-size: var(--mir-type-reading-small); line-height: var(--mir-type-reading-small-line); color: var(--mir-label); text-align: center; text-wrap: balance; }

/* ── the middle: the line, what MIR is, then the way in ── */
.core { display: grid; align-content: center; justify-items: center; padding: var(--mir-space-m4) var(--margin); min-width: 0; }
.say { display: grid; justify-items: center; max-width: 100%; }
.head { margin: 0; max-width: 100%; font-size: var(--head); line-height: 1.2; color: var(--mir-active); text-align: center; text-wrap: balance; }
.sub { margin: var(--mir-space-m3) 0 0; max-width: min(100%, var(--wide)); color: var(--mir-ready); text-align: center; text-wrap: balance; }

.ways { display: grid; width: min(100%, var(--wide)); margin-top: var(--mir-space-m10); }
.way { grid-area: 1 / 1; min-width: 0; margin: 0; display: grid; }
.way > * { grid-area: 1 / 1; min-width: 0; }

/* one object: the field, and at its right what it does, in words alone (the founder, 2026-10-09). The words are dim like the
   field's own until what is typed can be sent, then they are lit and can be pressed */
.row { display: flex; height: var(--mir-chrome-card-row-control); border-radius: var(--mir-radius-control); background: var(--fill-rest); }
.row-input {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 var(--mir-space-m4); border: 0; border-radius: inherit;
  background: transparent; color: var(--mir-active); caret-color: var(--mir-active);
  font-size: var(--ask); line-height: 1; -webkit-appearance: none; appearance: none;
}
.row-input::placeholder { color: var(--mir-label); opacity: 1; }
.row-input:-webkit-autofill, .row-input:-webkit-autofill:hover, .row-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--mir-active); box-shadow: 0 0 0 100px var(--fill-rest) inset; caret-color: var(--mir-active); }
.row-cta {
  flex: none; display: inline-flex; align-items: center; justify-content: center; height: 100%; margin: 0; border: 0;
  padding: 0 var(--mir-space-m4);                                              /* its words end as far from the object's edge as the field's begin */
  border-radius: inherit; background: transparent; color: var(--mir-active);
  font-size: var(--ask); line-height: 1; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color var(--change) var(--ease);
}
.row-cta[aria-disabled="true"] { color: var(--mir-label); cursor: default; pointer-events: none; }      /* not yet: nothing to press */
.way[aria-busy="true"] .row-cta { color: var(--mir-active); cursor: progress; }
.row-cta:active { color: var(--mir-ready); }
.row-cta-text { display: block; text-box: trim-both cap alphabetic; }      /* (the words' box is their capitals' height, where a browser can trim it: the middle is then the letters' own) */
/* no ring round the field (the founder, 2026-10-09): a field with the cursor in it shows its caret. The words at its right, reached
   by the keyboard, are underlined; a press with a pointer shows nothing */
.row-input:focus-visible { outline: none; }
.row-cta:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.5em; }

/* under the field: the way in for someone who has a serial, or what is wrong with what was typed */
.note {
  margin: var(--mir-space-m3) 0 0; min-height: calc(var(--mir-type-reading-small-line) * 2);
  font-size: var(--mir-type-reading-small); line-height: var(--mir-type-reading-small-line); color: var(--mir-label);
  text-align: center; text-wrap: balance;
}
.note-fault { color: var(--mir-active); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.textlink {
  padding: 0; border: 0; background: none; color: var(--mir-ready); cursor: pointer;
  font-size: var(--mir-type-reading-small); line-height: var(--mir-type-reading-small-line);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  transition: color var(--change) var(--ease);
}
.textlink:active { color: var(--mir-active); }
@media (hover: hover) { .textlink:hover { color: var(--mir-active); } }
@media (pointer: coarse) { .note .textlink, .foot-line .textlink { padding-block: var(--mir-space-m4); } }      /* (a finger's target: the line itself does not move) */

/* once joined: the words stand where the field stood, and the page does not move */
.way[data-state="done"] .way-fields { visibility: hidden; }
.done { align-self: start; text-align: center; }
.done:focus-visible { outline: none; }                                               /* (the words are given the focus so they are read out: they are not a control) */
.done-head { margin: 0; font-size: var(--mir-type-size-p20); line-height: var(--mir-chrome-card-row-control); color: var(--mir-active); }
.done-body { margin: 0; font-size: var(--mir-type-reading-small); line-height: var(--mir-type-reading-small-line); color: var(--mir-ready); overflow-wrap: anywhere; }
.done .textlink { margin: var(--mir-space-m1) 0 0; color: var(--mir-label); }

/* a form posted with no script comes back to one of these */
.plain-note { display: none; grid-area: 2 / 1; margin: var(--mir-space-m3) 0 0; font-size: var(--mir-type-reading-small); line-height: var(--mir-type-reading-small-line); color: var(--mir-active); text-align: center; }
.plain-note:target { display: block; }
.js .plain-note { display: none; }

/* ── the intro (intro.js): the page comes up element by element, as the instrument wakes. `intro` is on the root from the head's
   script until it is over, `go` once its times are set. Everything waits dark for its time (--at-..., from intro.js). Every line
   of words is typed as the instrument's display writes one, a letter (.ch) at the display's pace; the field and its button come
   up as lights do, and what they say is typed too ── */
.intro .mark-word, .intro .head, .intro .sub, .intro .row, .intro .note, .intro .foot-line { opacity: 0; }
.intro.go .mark-word, .intro.go .head, .intro.go .sub, .intro.go .note, .intro.go .foot-line { opacity: 1; }
.intro.go .head { --at: var(--at-head, 0ms); }
.intro.go .sub { --at: var(--at-sub, 0ms); }
.intro.go .row { --at: var(--at-row, 0ms); animation: lit var(--mir-motion-time-wake) var(--ease) var(--at-row, 0ms) both; }
.intro.go .note { --at: var(--at-note, 0ms); }
.intro.go .foot-line { --at: var(--at-foot, 0ms); }
.intro.go .ch { opacity: 0; animation: lit var(--type) step-start calc(var(--at, 0ms) + var(--i, 0) * var(--type)) both; }      /* typed: a letter is there, from its time, or is not */
@keyframes lit { from { opacity: 0; } to { opacity: 1; } }

/* a narrow view: there is not room for an address beside the words, so they stand under the field, a row tall each */
@media (max-width: 599px) {
  .row { flex-direction: column; height: auto; background: none; }
  .row-input, .row-cta { height: var(--mir-chrome-card-row-control); flex: none; border-radius: var(--mir-radius-control); }
  .row-input { background: var(--fill-rest); text-align: center; }
  .row-cta { width: 100%; }
}
/* the narrowest phones: a serial still fits its field whole (under 320 px across, at the least size a phone leaves a field alone at) */
@media (max-width: 359px) { .row-input { padding-inline: var(--mir-space-m2); } }
@media (max-width: 319px) { :root { --ask: 16px; } }
/* a low view (a phone on its side): the bars and the gaps give their air to the middle */
@media (max-height: 479px) {
  :root { --top: calc(var(--mark-high) + var(--mir-space-m2) * 2); --bar: var(--mir-control-row); --head: var(--mir-type-size-p20); }
  .sub { margin-top: var(--mir-space-m2); }
  .ways { margin-top: var(--mir-space-m6); }
  .note { min-height: var(--mir-type-reading-small-line); }
}

/* the system's own colours: the rings are a picture and go; every control gets an edge */
@media (forced-colors: active) {
  .rings { display: none; }
  .mark-word { fill: CanvasText; color: CanvasText; }
  .row { border: 1px solid FieldText; }
  .row-cta { color: ButtonText; }
  .row-cta[aria-disabled="true"] { color: GrayText; }
  :focus-visible { outline-color: Highlight; }
  .row-input:focus-visible, .row-cta:focus-visible { outline: 2px solid Highlight; outline-offset: -4px; }      /* (in the system's colours a ring is what is seen) */
}
@media (forced-colors: active) and (max-width: 599px) { .row { border: 0; } .row-input { border: 1px solid FieldText; } }

@media (prefers-reduced-motion: reduce) {
  .row-cta, .textlink, .js .rings { transition: none; }
}