/* Asterism — asterism.run
   Ink #101114 · Paper #FAFAF8
   Dark-first. Light is the secondary theme.
   Zero external requests: system fonts, local SVG, no scripts. */

/* ---------- tokens ---------- */

:root {
  color-scheme: dark light;

  /* brand */
  --ink:    #101114;
  --paper:  #FAFAF8;
  --star:   #E7C87A;

  /* surfaces (dark is the default theme) */
  --bg:       #101114;
  --bg-soft:  #131418;
  --surface:  #17191E;

  /* text — body sits at ≥ 7:1 on --bg */
  --fg:    #FAFAF8;
  --fg-2:  rgba(250, 250, 248, 0.74);
  --fg-3:  rgba(250, 250, 248, 0.62);
  --dim:   rgba(250, 250, 248, 0.34);

  --line:   rgba(250, 250, 248, 0.09);
  --line-2: rgba(250, 250, 248, 0.16);
  --line-3: rgba(250, 250, 248, 0.28);

  --accent:      var(--star);
  --accent-dim:  rgba(231, 200, 122, 0.30);
  --accent-rule: rgba(231, 200, 122, 0.50);
  /* the gold when it has to carry a letter: >= 7:1 in both themes */
  --accent-ink:  var(--star);

  /* the terminal is dark in both themes: it is a terminal */
  --term-bg:    #0A0B0D;
  --term-chrome:#141519;
  --term-fg:    #FAFAF8;
  --term-dim:   rgba(250, 250, 248, 0.63);
  --term-line:  rgba(250, 250, 248, 0.10);

  --btn-bg: #FAFAF8;
  --btn-fg: #101114;

  --shadow: 0 1px 2px rgba(0,0,0,.30),
            0 12px 28px -12px rgba(0,0,0,.55),
            0 40px 80px -40px rgba(0,0,0,.65);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;

  /* 8px grid */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;

  --wrap: 72rem;
  --pad: 1.5rem;
  --prose: 68ch;
  --radius: 12px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:       #FAFAF8;
    --bg-soft:  #F4F4F1;
    --surface:  #FFFFFF;

    --fg:    #101114;
    --fg-2:  rgba(16, 17, 20, 0.74);
    --fg-3:  rgba(16, 17, 20, 0.74);
    --dim:   rgba(16, 17, 20, 0.36);

    --line:   rgba(16, 17, 20, 0.10);
    --line-2: rgba(16, 17, 20, 0.16);
    --line-3: rgba(16, 17, 20, 0.30);

    --accent:      #96731A;
    --accent-dim:  rgba(150, 115, 26, 0.32);
    --accent-rule: rgba(150, 115, 26, 0.55);
    --accent-ink:  #6B520F;

    --btn-bg: #101114;
    --btn-fg: #FAFAF8;

    --shadow: 0 1px 2px rgba(16,17,20,.06),
              0 12px 28px -14px rgba(16,17,20,.20),
              0 40px 80px -44px rgba(16,17,20,.28);
  }
}

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.62;
  letter-spacing: -0.005em;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  /* no transitions on themable properties: avoids a flash on scheme switch */
}

::selection { background: var(--accent-dim); color: var(--fg); }

img, svg { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-3);
  text-underline-offset: 0.22em;
  transition: text-decoration-color .15s ease, color .15s ease, opacity .15s ease;
}
a:hover { text-decoration-color: currentColor; }

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

code { font-family: var(--mono); font-size: 0.88em; letter-spacing: 0; }
pre code { font-size: inherit; }   /* blocks set their own size */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.ast {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
}

/* a wrapped command line may break between flags, never inside one */
.nb { white-space: nowrap; }

/* ---------- wordmark ---------- */

.wordmark { display: block; width: 164px; }
.wordmark picture { display: contents; }
.wordmark img { width: 100%; height: auto; }
.wordmark-sm { width: 140px; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .nav { background: var(--bg); }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 4.5rem;
}
.brand { display: block; text-decoration: none; }
.brand:hover { opacity: 0.78; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
}
.nav-links a {
  padding: 0.45rem 0.7rem;
  border-radius: 7px;
  color: var(--fg-3);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.nav-links a:hover { color: var(--fg); background: var(--surface); }

.nav-gh {
  border: 1px solid var(--line-2);
  color: var(--fg) !important;
}
.nav-gh:hover { border-color: var(--line-3); }

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
}

.hero::after {
  /* one soft light source, top-left, keeps the ink from going flat */
  content: "";
  position: absolute;
  inset: -30% 20% 40% -25%;
  z-index: -2;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(231, 200, 122, 0.055), transparent 70%);
  pointer-events: none;
}

.hero-inner { position: relative; }

h1 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.125rem, 5.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.026em;
  font-weight: 600;
  text-wrap: balance;
}

.lede {
  margin: var(--s3) 0 0;
  max-width: 56ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.58;
  letter-spacing: -0.008em;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* ---------- hero: the unpacking ---------- */

/* Your machines are a list; the * spreads them into one call.
   Every element runs one 18s clock with no delays, so the stages stay in
   lockstep and any frame can be frozen with a negative animation-delay.
   Roughly ten of those seconds rest on the finished diagram.
   The composed diagram is the base CSS: reduced motion stops the clock
   and the whole thing is already sitting in its final state. */

.unpack {
  --u: 18s;
  --u-ease: cubic-bezier(.33, .06, .2, 1);
  margin: clamp(2.25rem, 4.5vw, 3rem) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  font-family: var(--mono);
  font-size: clamp(0.8125rem, 3.4vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  white-space: nowrap;
  text-align: center;
}

.u-row { position: relative; }
.u-list { color: var(--fg-2); }
.u-list > span { display: inline-block; }
.u-brk, .u-sep { color: var(--fg-3); }

.u-call {
  margin-block: 0.18em;
  color: var(--fg);
  font-size: 1.18em;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.u-ast {
  display: inline-block;
  color: var(--accent-ink);
  font-weight: 700;
}

.u-out { color: var(--fg); }

.u-arw {
  font-size: 1.15em;
  line-height: clamp(1.9rem, 3.6vw, 2.6rem);
  color: var(--fg-3);
  user-select: none;
}

/* --- the clock --- */

.unpack .u-list  { animation: u-type    var(--u) var(--u-ease) infinite; }
.unpack .u-list > span { animation: u-fold var(--u) var(--u-ease) infinite; }
.unpack .u-arw-1 { animation: u-arw-a   var(--u) var(--u-ease) infinite; }
.unpack .u-call  { animation: u-resolve var(--u) var(--u-ease) infinite; }
.unpack .u-ast   { animation: u-flare   var(--u) cubic-bezier(.2, 1.4, .4, 1) infinite; }
.unpack .u-arw-2 { animation: u-arw-b   var(--u) var(--u-ease) infinite; }
.unpack .u-out   { animation: u-print   var(--u) var(--u-ease) infinite; }

/* where each token goes when the list folds */
.u-brk-l { --dx:  0.8em; }
.u-m-a   { --dx:  2.1em; }
.u-m-b   { --dx:  0em;   }
.u-m-c   { --dx: -2.1em; }
.u-brk-r { --dx: -0.8em; }

/* the list types itself out */
@keyframes u-type {
  0%   { opacity: 1; clip-path: inset(-0.3em 100% -0.35em 0);
         animation-timing-function: steps(1, end); }
  1.4% { clip-path: inset(-0.3em 100% -0.35em 0);
         animation-timing-function: steps(13, end); }
  9%   { clip-path: inset(-0.3em 0 -0.35em 0); }
  90%  { opacity: 1; clip-path: inset(-0.3em 0 -0.35em 0); }
  97%, 100% { opacity: 0; clip-path: inset(-0.3em 0 -0.35em 0); }
}

/* the tokens converge on the centre and drop out of the brackets */
@keyframes u-fold {
  0%, 17.5% { transform: translate(0, 0); opacity: 1; }
  21.5%, 23.5% { transform: translate(var(--dx), 0.45em); opacity: 0; }
  27.5%, 100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes u-arw-a {
  0%, 13%   { opacity: 0; transform: translateY(-0.5em); }
  17%, 90%  { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(0); }
}

/* the call resolves underneath them */
@keyframes u-resolve {
  0%, 19.5% { opacity: 0; transform: translateY(0.5em) scale(0.96); }
  24%, 90%  { opacity: 1; transform: translateY(0) scale(1); }
  97%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* the asterisk lands last and lands hardest */
@keyframes u-flare {
  0%, 20.5%   { opacity: 0; transform: scale(0.3) rotate(-140deg); }
  25%         { opacity: 1; transform: scale(1.26) rotate(0deg); }
  29%, 100%   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes u-arw-b {
  0%, 25%   { opacity: 0; transform: translateY(-0.5em); }
  29%, 90%  { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(0); }
}

/* the answer prints, and from here to 90% nothing moves */
@keyframes u-print {
  0%    { opacity: 1; clip-path: inset(-0.3em 100% -0.35em 0);
          animation-timing-function: steps(1, end); }
  28.5% { clip-path: inset(-0.3em 100% -0.35em 0);
          animation-timing-function: steps(12, end); }
  34%   { clip-path: inset(-0.3em 0 -0.35em 0); }
  90%   { opacity: 1; clip-path: inset(-0.3em 0 -0.35em 0); }
  97%, 100% { opacity: 0; clip-path: inset(-0.3em 0 -0.35em 0); }
}

/* on a wide screen the diagram takes the empty column beside the headline */
@media (min-width: 66rem) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
    column-gap: var(--s6);
    align-items: start;
  }
  .hero-inner h1      { grid-column: 1; grid-row: 1; }
  .hero-inner .lede   { grid-column: 1; grid-row: 2; }
  .hero-inner .term   { grid-column: 1 / -1; grid-row: 3; }
  .hero-inner .cta    { grid-column: 1 / -1; grid-row: 4; }
  .hero-inner .unpack {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
  }
}

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

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin: var(--s4) 0 0;
}
.cta-end { margin-top: var(--s5); }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.button .ast { color: currentColor; opacity: 0.55; }
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.18);
}
.button:active { transform: translateY(0); }

.quiet {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--fg-3);
  text-decoration: none;
}
.quiet span { display: inline-block; transition: transform .15s ease; }
.quiet:hover { color: var(--fg); }
.quiet:hover span { transform: translateX(3px); }

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

.term {
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  max-width: 50rem;
  background: var(--term-bg);
  border: 1px solid var(--term-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.term-bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  background: linear-gradient(var(--term-chrome), #101115);
  border-bottom: 1px solid var(--term-line);
}
.lights { display: flex; gap: 0.5rem; }
.lights i {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}
.l-r { background: #FF5F57; }
.l-y { background: #FEBC2E; }
.l-g { background: #28C840; }

.term-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: -0.005em;
  color: var(--term-dim);
  white-space: nowrap;
}

.term pre {
  margin: 0;
  padding: 1.25rem 1.25rem 1.5rem;
  overflow-x: auto;
  color: var(--term-fg);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.8;
  letter-spacing: -0.005em;
  tab-size: 2;
}
.term .p { color: var(--accent); user-select: none; }
.term .c { color: var(--term-fg); font-weight: 600; }
.term .o { color: var(--term-dim); }
.term .g { color: #7FD1A6; }

.cur {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.1em;
  vertical-align: -0.18em;
  background: var(--term-fg);
  animation: blink 1.15s steps(1, end) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

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

.feature {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--line);
}
#status { background: var(--bg-soft); }

.marker {
  margin: 0 0 var(--s3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.marker .ast { margin-right: 0.15rem; text-transform: none; }

h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -0.024em;
  font-weight: 600;
  text-wrap: balance;
}

h3 { margin: 0 0 var(--s2); font-size: 1rem; font-weight: 600; }

.prose { margin-top: var(--s3); max-width: var(--prose); }
.prose p {
  margin: 0 0 var(--s2);
  color: var(--fg-2);
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }
.prose code { color: var(--fg); }
.prose strong { color: var(--fg); font-weight: 600; }

@media (min-width: 62rem) {
  .feature .wrap {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 0 var(--s6);
  }
  .marker {
    position: sticky;
    top: 6.5rem;
    align-self: start;
    margin: 0;
    padding-top: 0.35rem;
  }
}

/* ---------- code snippet ---------- */

.snip {
  margin: var(--s4) 0 0;
  padding: 1.125rem 1.25rem;
  max-width: 48rem;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.9;
  letter-spacing: -0.005em;
}
.snip .cm { color: var(--fg-3); }

/* ---------- parts grid ---------- */

.parts {
  margin: var(--s4) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.parts > div {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--line);
}
.parts dt {
  margin-bottom: 0.375rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.parts dd {
  margin: 0;
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg-2);
}

@media (min-width: 44rem) {
  .parts {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s4);
  }
}
@media (min-width: 68rem) {
  .parts { grid-template-columns: repeat(3, 1fr); }
}

.pull {
  margin: var(--s4) 0 0;
  padding-left: 1.125rem;
  border-left: 2px solid var(--accent-rule);
  max-width: 52ch;
  font-size: 1.0625rem;
  color: var(--fg);
  text-wrap: pretty;
}

/* ---------- status columns ---------- */

.status {
  margin: var(--s4) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 48rem) {
  .status { grid-template-columns: 1.15fr 1fr; gap: var(--s5); }
}

.status ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 46ch;
}
.status li {
  position: relative;
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-2);
}
.status li::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--dim);
}
.status li:last-child { margin-bottom: 0; }
.status code { color: var(--fg); }
.status strong { color: var(--fg); font-weight: 600; }

.tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.tag-now { border-color: var(--accent-dim); }

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

.foot {
  border-top: 1px solid var(--line);
  padding: var(--s5) 0 var(--s4);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4) var(--s5);
}
.sig {
  margin: var(--s2) 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: -0.012em;
  color: var(--fg-3);
}

.tagline {
  margin: 0.6rem 0 0;
  max-width: 34ch;
  font-size: 0.9375rem;
  color: var(--fg-2);
}
.foot-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.foot-links a { color: var(--fg-3); text-decoration: none; }
.foot-links a:hover { color: var(--fg); }

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fg-3);
}
.foot-legal p { margin: 0; }
.foot-legal a { color: var(--fg-3); }
.foot-legal a:hover { color: var(--fg); }

/* ---------- small screens ---------- */

@media (max-width: 34rem) {
  :root { --pad: 1.25rem; }
  .wordmark { width: 142px; }
  .nav-links { font-size: 0.75rem; }
  .nav-links a { padding: 0.4rem 0.55rem; }
  .term-title { display: none; }

  /* a narrow terminal wraps its lines — so does this one */
  .term pre, .snip { font-size: 0.75rem; padding-inline: 1rem; }
  /* wrap between words only — never inside a flag like --cpus */
  .term pre code, .snip code {
    white-space: pre-wrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .term pre { overflow-x: hidden; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cur { animation: none; opacity: 1; }
  /* the diagram's resting styles are its final frame, so stopping the
     clock leaves the whole thing composed and readable */
  .unpack, .unpack * { animation: none !important; }
}