/* Generated by @bricksofa/error-pages — ground: paper, palette: eucalyptus. */
:root {
  color-scheme: light dark;
  --background: #fafafa;
  --foreground: #191a1b;
  --card: #ffffff;
  --card-foreground: #191a1b;
  --popover: #ffffff;
  --popover-foreground: #191a1b;
  --secondary: #f3f3f4;
  --secondary-foreground: #2b2c2e;
  --muted: #f3f3f4;
  --muted-foreground: #64656b;
  --accent: #ececee;
  --accent-foreground: #191a1b;
  --destructive: #cc3b3b;
  --destructive-on-tint: #ae282c;
  --destructive-foreground: #ffffff;
  --border: #e6e6e8;
  --input: #e2e2e5;
  --dim: #6a6b71;
  --success: #27824a;
  --success-on-tint: #1d6b3b;
  --warning: #8d6e17;
  --warning-on-tint: #765a07;
  --scrollbar-thumb: #bcbcc2;
  --shadow-color: rgba(25, 26, 27, 0.1);
  --primary: #3f7d6c;
  --primary-foreground: #ffffff;
  --primary-on-tint: #2f6657;
  --ring: #3f7d6c;
  --gradient-brand: linear-gradient(135deg, #4f8f7d 0%, #86c3b0 52%, #cfe3d7 100%);
  --radius: 0.1875rem;
  --font-sans: var(--font-sans-face, system-ui, -apple-system, sans-serif);
  --font-display: var(--font-display-face, Georgia, "Times New Roman", serif);
  --font-mono: var(--font-mono-face, ui-monospace, SFMono-Regular, Menlo, monospace);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;

  /* The type ramp, each step with the leading it was drawn against. Every size on this
     page names one of these, so nothing sets a size without also setting its measure —
     the omission a consumer had to patch by hand when the base left h1 inheriting a
     paragraph's 1.5. */
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-sm: 0.8125rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 0.875rem;
  --text-base--line-height: 1.375rem;
  --text-lg: 1rem;
  --text-lg--line-height: 1.5rem;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.75rem;
  --text-2xl: 1.75rem;
  --text-2xl--line-height: 2rem;
  --text-3xl: 2.25rem;
  --text-3xl--line-height: 2.5rem;
  --text-display: 3.75rem;
  --text-display--line-height: 1;

  /* One spacing unit, derived rather than invented, and every gap a whole multiple of
     it written as calc() so the arithmetic stays visible in the generated file. */
  --step: calc(var(--text-xs--line-height) / 2);

  /* A hairline that reads on the page ground. --border is drawn for adjacency — an edge
     with a fill on one side — and measures under 1.2:1 against --background on every
     ground, so it cannot carry structure on its own. Declared twice: an engine without
     color-mix keeps the flat value and draws a heavier hairline, where a single
     declaration would invalidate and fall back to currentColor — a bar, not a rule. */
  --rule: var(--dim);
  --rule: color-mix(in srgb, var(--dim) 70%, transparent);

  /* The inset a bottom-anchored block clears. One ground places the way home against the
     block-end edge, which on a phone is where the home indicator sits. */
  --safe-block-end: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
  --background: #0b0b0d;
  --foreground: #ededf0;
  --card: #151517;
  --card-foreground: #ededf0;
  --popover: #151517;
  --popover-foreground: #ededf0;
  --secondary: #1e1e21;
  --secondary-foreground: #dcdce0;
  --muted: #1e1e21;
  --muted-foreground: #9a9aa2;
  --accent: #242427;
  --accent-foreground: #ededf0;
  --destructive: #e05a5a;
  --destructive-on-tint: #f27371;
  --destructive-foreground: #0b0b0d;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.12);
  --dim: #8b8c93;
  --success: #55b06f;
  --success-on-tint: #55b26f;
  --warning: #d9a441;
  --warning-on-tint: #d9a441;
  --scrollbar-thumb: #42424a;
  --shadow-color: rgba(0, 0, 0, 0.55);
  --primary: #74bda6;
  --primary-foreground: #0d1f1a;
  --primary-on-tint: #74bda6;
  --ring: #74bda6;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* min-height, never height: copy longer than this package ships grows the page rather
     than being cut off the edge a ground is aligned to. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  padding-inline: calc(var(--step) * 3);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}

/* Grid on both, so a ground can place a top-level element without the renderer emitting
   a per-ground hook. The markup is one document for all three. */
main {
  container-type: inline-size;
  display: grid;
  overflow-wrap: break-word;
}

h1,
p {
  margin: 0;
}

/* The way home, and the only place any of the three sheets spends its accent. It is spent
   on the underline rather than on the label's ink: --primary against --background falls
   under 4.5:1 in six of the eighteen light pairings, while --primary-on-tint clears it in
   all thirty-six. One accent declaration in one shared rule, so a ground's composition
   cannot move the accent onto a role where it stops clearing the floor.

   Every colour contrast.test.ts reads is declared here or in a ground block, never
   inherited: the gate resolves a role by finding a color declaration inside a
   block, so a rule that inherits the right value passes on screen and throws in the gate.

   The tap floor is padding around the label's own line box, so the target is a
   consequence of the type rather than a height set beside it; viewport-fit.test.ts
   measures what it actually renders. */
.home {
  display: inline-flex;
  align-items: center;
  padding-block: calc(var(--step) * 1.5);
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--primary-on-tint);
}

.home:hover,
.home:active {
  text-decoration-color: var(--foreground);
}

/* The other ways out: at most two, after the way home in the document and quieter than it
   on every ground. They take its underline and none of its emphasis. The label steps down
   from --foreground to --muted-foreground and the rule from the accent to --dim, so the
   page keeps one primary action and the accent is still spent once.

   One row, in columns. The two share a line, and a label too long for its share wraps
   inside its own column, so the row costs one target's height where two labels wrapped as
   whole items cost two, on the window least able to spare it. minmax(0, auto) hands a
   short label its full width before a long one takes what is left; a flex row shrinks
   both in proportion and breaks the short one first. Ranged to the block-start, so a
   label that wraps does not drop the first line of the one beside it. */
.links {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  justify-content: start;
  align-items: start;
  column-gap: calc(var(--step) * 3);
}

.links a {
  padding-block: calc(var(--step) * 0.5);
  color: var(--muted-foreground);
  text-decoration: underline;
  text-decoration-color: var(--dim);
}

.links a:hover,
.links a:active {
  color: var(--foreground);
  text-decoration-color: var(--foreground);
}

/* The tap floor, on the pointer that needs one, so a mouse keeps the tight row each ground
   composes. A floor, where the way home pads both sides of its line: these labels can
   wrap, and padding that brings one line to the floor is charged again for every line
   after it. Each ground adds the block-start padding that centres one line of its own
   step in the floor, which keeps two labels on one first line when only one of them
   wraps. */
@media (pointer: coarse) {
  .links a {
    min-block-size: 2.75rem;
  }
}

/* The rule follows its label into the system's link colour, as the way home's does. */
@media (forced-colors: active) {
  .links a {
    text-decoration-color: LinkText;
  }
}

/* A page with links gives back its head margin on a short window. The row has to come
   from somewhere on a page already full of copy, and the head margin is the one measure
   every ground has that is not holding two lines apart. An engine without :has() keeps
   the margin and the page grows past the window, which body's min-height allows. */
@media (max-height: 35rem) {
  body:has(.links) {
    padding-block-start: calc(var(--step) * 2);
  }
}

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

::selection {
  background-color: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--foreground);
}

@media (forced-colors: active) {
  .home {
    text-decoration-color: LinkText;
  }
}

/* ── paper · Printed sheet ─────────────────────────────────────────────────────
   A title page. The statement is set in the display face on a 30rem measure, the block
   centred on the page and the type ranged left within it. The wordmark drops to the foot
   as a colophon under a hairline: a colophon needs a boundary to sit below.

   The figure is not the subject. Georgia, the display stack's system fallback, draws
   old-style figures — 4 descends below the baseline, 0 sits at x-height. That is a text
   figure's job and not a display numeral's, so the status goes to the mono face at
   --text-xl, tracked, and reads as the section mark above the title rather than as the
   title itself.

   The phrase stops at --text-3xl. --text-display carries a leading of 1, which is a
   single-line measure, and a phrase a consumer can rewrite is an element that wraps.

   No motion. A link reports its press as a colour change; nothing on the sheet has any
   other state, so there is nothing for a reduced-motion query to counter. */

body {
  align-items: start;
  justify-items: center;
  padding-block-start: min(calc(var(--step) * 12), 12svh);
  padding-block-end: calc(var(--step) * 6 + var(--safe-block-end));
}

main {
  width: min(100%, 30rem);
}

/* The section mark. --dim rather than --foreground: the figure identifies the page and
   the phrase states it, and a second element in full ink competes for the first fixation.
   Ranged left, so the tracking's trailing space falls off an edge no line aligns to. */
.code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  letter-spacing: 0.22em;
  color: var(--dim);
}

/* Regular weight: authority comes from scale, and the display stack's Bold closes its
   counters at this size. */
.title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--foreground);
}

.phrase {
  display: block;
  margin-block-start: var(--step);
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Stepped, not interpolated. A clamp() on the size leaves the leading at one value across
   the whole range; changing step carries the leading the step was drawn with. */
@media (min-width: 30rem) {
  .phrase {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
  }
}

/* --text-lg, not --text-base: the page's whole content is one sentence, and --text-base
   is the dense-UI register. */
.message {
  margin-block-start: calc(var(--step) * 3);
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  color: var(--muted-foreground);
  text-wrap: balance;
}

/* A printed rule is a hairline. At this size 1px reads as the word's own underline and
   2px reads as a bar drawn under it. */
.home {
  justify-self: start;
  margin-block-start: calc(var(--step) * 3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* The colophon. The order property moves the wordmark to the foot; the DOM order the renderer emits
   is unchanged, and it holds nothing that takes focus, so the order a keyboard walks is
   the order on the sheet. */
.brand {
  order: 1;
  margin-block-start: min(calc(var(--step) * 4), 5svh);
  border-block-start: 1px solid var(--rule);
  padding-block-start: calc(var(--step) * 2);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The colophon's second line. The foot of a printed sheet is where it says who made it
   and where else to look, so the links sit under the wordmark and below the hairline, and
   the statement above keeps one action. order carries the wordmark's own value: equal
   order falls back to the document's, which puts the links after it.

   Set as the way home is, a step down the ramp: the same case, the same hairline at the
   same offset.

   The end margin gives this row four of the foot's six steps. The sheet is ranged to the
   head, so its foot is spare until the copy fills the window, and then two steps and the
   row's own padding are margin enough. */
.links {
  order: 1;
  margin-block-start: calc(var(--step) * 0.5);
  margin-block-end: calc(var(--step) * -4);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.links a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

@media (pointer: coarse) {
  .links a {
    padding-block-start: calc(var(--step) * 1.5);
  }
}

/* On the same short window the colophon closes up on the way home, whose own padding
   already stands between the two. */
@media (max-height: 35rem) {
  .brand:has(~ .links) {
    margin-block-start: calc(var(--step) * 2);
  }
}


/* Kept for the consumer layers that read it. Nothing this template draws uses it, and
   an appended layer that animates its own rows resolves rise and --duration-slow
   from here. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}