/* owlgit.com. A night sky and a git graph, in the logo's navy and bright blue. */
:root {
  color-scheme: dark;
  --bg: #040a15;
  --navy: #012244;
  --blue: #00acfb;
  --cyan: #05fdff;
  --text: #e3effa;
  --muted: #93abc6;

  /* one colour per branch: three from the logo's blue family, and a mint for articles */
  --c-tools: #7c8cff;
  --c-designs: #2ee6ff;
  --c-learning: #00acfb;
  --c-articles: #5ee6a8;

  --round: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --lane: 1.45rem;     /* width of one graph lane */
  --node: 1.1rem;
  --node-y: 2.25rem;   /* how far down a row its node sits */
  --gap: .8rem;        /* space between cards */
}

* { box-sizing: border-box; }
/* everything is sized in rem, and the root size follows the window (its height, or its
   width when the window is narrow), so the page always fits one screen without scrolling */
html { -webkit-text-size-adjust: 100%; font-size: clamp(11.5px, min(1.9vh, 1.2vw), 20px); }

body {
  margin: 0;
  background:
    radial-gradient(70rem 34rem at 50% -8rem, rgba(0, 150, 255, .22), transparent 70%),
    radial-gradient(46rem 34rem at 110% 105%, rgba(1, 52, 110, .55), transparent 70%),
    radial-gradient(40rem 30rem at -10% 60%, rgba(60, 40, 160, .14), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 1rem/1.55 var(--round);
  overflow: hidden;
  height: 100dvh;
}

img { max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: .2em; }
a:hover { color: var(--cyan); }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.prompt { color: var(--blue); margin-right: .7ch; user-select: none; }

/* Night sky: two tiled layers of small stars that twinkle out of step, a few brighter
   ones that stay put, and a shooting star now and then */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-image:
    radial-gradient(circle at 14% 22%, #fff 0 1px, rgba(150, 215, 255, .35) 2px, transparent 5px),
    radial-gradient(circle at 46% 7%, #fff 0 1px, rgba(150, 215, 255, .3) 2px, transparent 4px),
    radial-gradient(circle at 71% 16%, #fff 0 1.2px, rgba(150, 215, 255, .35) 2.4px, transparent 6px),
    radial-gradient(circle at 94% 55%, #fff 0 1px, rgba(150, 215, 255, .3) 2px, transparent 5px),
    radial-gradient(circle at 4% 68%, #fff 0 1px, rgba(150, 215, 255, .3) 2px, transparent 4px),
    radial-gradient(circle at 38% 93%, #fff 0 1px, rgba(150, 215, 255, .3) 2px, transparent 5px);
}
.sky::before, .sky::after {
  content: ""; position: absolute; inset: 0;
  animation: twinkle 5s ease-in-out infinite;
}
.sky::before {
  background-image:
    radial-gradient(1.5px 1.5px at 7% 12%, #cfeaff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 61%, #9fd6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 27%, #ffffff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 83%, #bfe4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 41%, #d9f1ff 50%, transparent 51%),
    radial-gradient(1px 1px at 69% 9%, #9fd6ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 81% 68%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 33%, #bfe4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 90%, #cfeaff 50%, transparent 51%);
  background-size: 23rem 19rem;
  opacity: .8;
}
.sky::after {
  background-image:
    radial-gradient(1px 1px at 11% 47%, #bfe4ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 15%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 72%, #9fd6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 6%, #cfeaff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 54%, #d9f1ff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 88%, #bfe4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 89% 24%, #9fd6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 77%, #ffffff 50%, transparent 51%);
  background-size: 31rem 27rem;
  background-position: 9rem 5rem;
  opacity: .55; animation-duration: 7s; animation-delay: -3s;
}
@keyframes twinkle { 50% { opacity: .3; } }
.comet {
  position: absolute; top: 3%; left: 58%;
  width: 8rem; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(190, 235, 255, 0), #e3f6ff);
  filter: drop-shadow(0 0 3px rgba(150, 215, 255, .8));
  opacity: 0;
  animation: comet 19s linear 5s infinite;
}
@keyframes comet {
  0% { transform: translate3d(0, 0, 0) rotate(155deg); opacity: 0; }
  .8% { opacity: .9; }
  4.2% { opacity: .9; }
  5.5%, 100% { transform: translate3d(-26rem, 12.1rem, 0) rotate(155deg); opacity: 0; }
}

/* ---------- Stage: hero on the left, graph on the right, one screen ---------- */
.stage {
  position: relative; z-index: 1;   /* in front of the owl, which flies behind the page */
  height: calc(100dvh - 2.6rem);
  max-width: 82rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 4rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 4.5rem);
}

.hero { text-align: center; }
.hero h1 { margin: 0; line-height: 0; }
.hero h1 img {
  width: min(100%, 36rem);
  filter: drop-shadow(0 0 2rem rgba(0, 172, 251, .35)) drop-shadow(0 1rem 1.8rem rgba(0, 0, 0, .5));
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-.5rem); } }

.tagline {
  margin: 1.5rem auto 0;
  max-width: 30rem;
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: balance;
}
.tagline span { white-space: nowrap; }   /* lines break between the four parts, not inside one */
.tagline a { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.w-tools { color: var(--c-tools); }
.w-designs { color: var(--c-designs); }
.w-learning { color: var(--c-learning); }
.w-articles { color: var(--c-articles); }
.tagline a:hover { color: #fff; }

/* Terminal window */
.term {
  width: min(27rem, 100%);
  margin: 2rem auto 0;
  text-align: left;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(16, 38, 74, .75), rgba(6, 16, 32, .92));
  border: 1px solid rgba(90, 170, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -22px rgba(0, 0, 0, .8), 0 0 40px -18px rgba(0, 172, 251, .6);
  overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: 7px;
  padding: .6rem .9rem;
  border-bottom: 1px solid rgba(90, 170, 255, .16);
  background: rgba(255, 255, 255, .03);
}
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--c-tools); opacity: .9; }
.term-bar i:nth-child(2) { background: var(--c-designs); }
.term-bar i:nth-child(3) { background: var(--c-learning); }
.term-bar span { margin-left: auto; font: .72rem var(--mono); color: var(--muted); }
.term-body { padding: .9rem 1.1rem 1.1rem; font: .9rem/1.8 var(--mono); color: var(--muted); }
.term-body p { margin: 0; }
.term-body b { color: var(--blue); font-weight: 600; }
.term-body .err { color: #ff9fb0; }
.cmd { color: var(--text); white-space: nowrap; }
/* a typed command: --n is its length in characters, --d when it starts */
.typed {
  display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap;
  width: calc(var(--n, 10) * 1ch);
  animation: type calc(var(--n, 10) * .09s) steps(var(--n, 10)) var(--d, .5s) both;
}
@keyframes type { from { width: 0; } }
.caret {
  display: inline-block; width: .6ch; height: 1.1em; margin-left: 2px; vertical-align: -.2em;
  background: var(--blue); animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.out { opacity: 0; animation: reveal .4s ease var(--d, 0s) forwards; }
.o1 { --d: 1.6s; }
.o2 { --d: 2s; }
@keyframes reveal { to { opacity: 1; } }

/* ---------- The graph ---------- */
main { min-width: 0; }
.graph-title { margin: 0 0 1rem; font: .9rem/1.6 var(--mono); color: var(--muted); }
.graph { list-style: none; margin: 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: calc(var(--lane) * 4) minmax(0, 1fr);
  column-gap: .9rem;
}
.lanes { position: relative; display: grid; grid-template-columns: repeat(4, var(--lane)); }
.lane { position: relative; }

/* a branch passing through this row on its way up */
.lane.pass::before,
.lane.tip::before,
.lane.root::before {
  content: ""; position: absolute; left: calc(50% - 1px); width: 0;
  border-left: 2px dashed var(--c);
  opacity: .75;
}
.lane.pass::before { top: 0; bottom: 0; }
/* the branch ends here: line runs from the node down to the next row */
.lane.tip::before { top: var(--node-y); bottom: 0; }

/* nodes */
.lane.tip::after,
.lane.root::after {
  content: ""; position: absolute;
  left: calc(50% - var(--node) / 2);
  top: calc(var(--node-y) - var(--node) / 2);
  width: var(--node); height: var(--node);
  border-radius: 50%;
}
/* in progress: hollow, like the top node in the logo's "g" */
.lane.tip::after {
  background: var(--bg);
  border: 3px solid var(--c);
  box-shadow: 0 0 0 4px var(--bg);
  animation: pulse 2.8s ease-in-out infinite;
}
#designs .lane.tip::after { animation-delay: .6s; }
#learning .lane.tip::after { animation-delay: 1.2s; }
#articles .lane.tip::after { animation-delay: 1.8s; }
@keyframes pulse {
  50% { box-shadow: 0 0 0 4px var(--bg), 0 0 16px 4px color-mix(in srgb, var(--c) 60%, transparent); }
}
/* done: solid and glowing */
.lane.root::before { display: none; }
.lane.root::after {
  background: radial-gradient(circle at 35% 30%, #9be4ff, var(--blue) 55%, #0077d6);
  box-shadow: 0 0 0 4px var(--bg), 0 0 22px 5px rgba(0, 172, 251, .6);
  z-index: 2;
}
/* the outer branches curve into the first commit */
.fork {
  position: absolute; top: 0;
  left: calc(var(--lane) / 2 + 1px);
  height: var(--node-y);
  border: 0 dashed var(--c);
  border-right-width: 2px; border-bottom-width: 2px;
  border-bottom-right-radius: 1.1rem;
  opacity: .75;
}
.fork.f1 { width: calc(var(--lane) * 1); }
.fork.f2 { width: calc(var(--lane) * 2); }
.fork.f3 { width: calc(var(--lane) * 3); }
/* main's own short stub from the learning branch down to the first commit */
.row.done .lane.root::before {
  display: block; top: 0; height: var(--node-y);
}

/* cards */
.card {
  position: relative;
  display: flex; gap: 1rem; align-items: flex-start;
  margin-bottom: var(--gap);
  padding: .85rem 1.2rem .95rem;
  border-radius: 1.3rem;
  color: inherit; text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 40%),
    linear-gradient(160deg, rgba(18, 46, 90, .72), rgba(6, 16, 33, .92));
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 22px 44px -26px rgba(0, 0, 0, .9);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.row:last-child .card { margin-bottom: 0; }
a.card:hover { color: inherit; }
a.card:focus-visible { outline-offset: 4px; border-radius: 1.3rem; }
/* the arrow on a card that leads somewhere */
.go {
  align-self: center; margin-left: auto; padding-left: .4rem;
  font-size: 1.3rem; line-height: 1; color: var(--c);
  opacity: .45; transition: transform .25s ease, opacity .25s ease;
}
.row:hover .go, a.card:focus-visible .go { opacity: 1; transform: translateX(.3rem); }
.row:hover .card {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 75%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 26px 50px -24px rgba(0, 0, 0, .9), 0 0 46px -14px var(--c);
}

.icon {
  flex: none;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 1rem;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .55), transparent 42%), linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 45%, #021a3a));
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .28), 0 10px 22px -10px var(--c);
}
.icon svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: #031326; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.text { min-width: 0; }
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin: 0 0 .3rem;
  font: .78rem/1.4 var(--mono);
  color: var(--muted);
}
.branch { color: var(--c); }
.soon {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .15rem .65rem;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); animation: caret 1.6s ease-in-out infinite; }
.card h2 { margin: 0 0 .1rem; font-size: 1.4rem; line-height: 1.25; letter-spacing: -.01em; }
.text > p:last-child { margin: 0; color: var(--muted); text-wrap: pretty; }

/* ---------- Footer ---------- */
footer { position: fixed; left: 0; right: 0; bottom: .7rem; text-align: center; color: var(--muted); font-size: .82rem; }
footer p { margin: 0; }

/* ---------- The owl that watches ---------- */
.owl-live { position: relative; aspect-ratio: 1; line-height: 0; }
.owl-live img { width: 100%; height: 100%; display: block; }
/* each eye is redrawn on top of the picture so the pupil can move */
.eye {
  position: absolute; width: 23.6%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, #0fb0f7, #04bbfb 70%);
}
.e-l { left: 33.1%; top: 49.3%; }
.e-r { left: 65.5%; top: 49.5%; }
.pupil {
  position: absolute; left: 10%; top: 10%; width: 80%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #0a2550, #000819 62%);
  transform: translate(var(--px, 0), var(--py, 0));
  transition: transform .12s ease-out;
}
.pupil::after {
  content: ""; position: absolute; right: 16%; top: 14%; width: 26%; height: 26%;
  border-radius: 50%; background: #fff;
}
.lid {
  position: absolute; inset: 0;
  background: #0a2f66;
  transform: scaleY(0); transform-origin: top;
  animation: blink 6.5s infinite;
}
.e-r .lid { animation-delay: .04s; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(0); } 97% { transform: scaleY(1); } }

/* The flying owl. JS moves it and swings its wings; these rules draw its looks.
   owl-rig.webp is a strip of three pictures: the body in flight, one wing (the right wing
   is the same picture mirrored), and the folded owl that sits on a perch. */
.flyer {
  position: fixed; left: 0; top: 0;
  width: 10.5rem; aspect-ratio: 402 / 300;
  z-index: 0; pointer-events: none;   /* above the sky, behind the cards and the text */
  opacity: 0;
  will-change: transform;
  transition: opacity .6s ease;
}
.flyer.ready { opacity: 1; }
/* .owl leans, crouches and settles on its feet: 83% down the picture is where the toes rest */
.owl { position: absolute; inset: 0; transform-origin: 50% 83%; transition: transform .5s cubic-bezier(.34, 1.5, .6, 1); }
.owl.lean-l { transform: rotate(-8deg); }
.owl.lean-r { transform: rotate(8deg); }
.owl.crouch { transform: scale(1.06, .88); transition: transform .16s ease-in; }
.owl.settle { animation: settle .55s ease-out; }
@keyframes settle {
  0% { transform: scale(1.08, .86); }
  45% { transform: scale(.97, 1.05); }
}
.bird {
  position: absolute; inset: 0;
  filter: brightness(1) saturate(1) drop-shadow(0 .7rem 1rem rgba(0, 0, 0, .55)) drop-shadow(0 0 1.2rem rgba(0, 172, 251, .4));
  transition: filter .6s ease;
}
.bird i { position: absolute; inset: 0; background: url(/img/owl-rig.webp) 0 0 / 300% 100% no-repeat; }
.bird .wing { background-position: 50% 0; transform-origin: 43.78% 53.33%; }   /* the shoulder */
.bird .sit { background-position: 100% 0; transition: opacity .2s ease; }
/* perched, the folded owl is all that shows. In flight it fades away over the body and wings. */
.bird .wing, .bird .body { opacity: 0; transition: opacity 0s .2s; }
.flying .bird .wing, .flying .bird .body { opacity: 1; transition: none; }
.flying .bird .sit { opacity: 0; }

/* The twig it stands on in the dark sky: a short piece of branch with a commit on it.
   JS moves it under the owl; its line sits on the toe line. .roost only matters on phones. */
.roost { display: contents; }
.twig {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: 10.5rem; aspect-ratio: 402 / 300;
  pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.twig.on { opacity: 1; }
.twig::before {
  content: ""; position: absolute; left: 14%; right: 10%; top: 83%;
  border-top: 2px dashed color-mix(in srgb, var(--blue) 60%, transparent);
}
.twig::after {
  content: ""; position: absolute; left: 14%; top: 83%;
  width: .8rem; height: .8rem; margin: calc(-.4rem + 1px) 0 0 -.4rem;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--blue);
  box-shadow: 0 0 .7rem -.1rem var(--blue);
}

/* in the dark it is only a shadow with a faint rim, and two glowing eyes are drawn over it */
.shade .bird { filter: brightness(.13) saturate(.6) drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 .6rem rgba(0, 172, 251, .28)); }
.glow {
  position: absolute; top: 49.2%;
  width: 15.6%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #d6fbff 0 56%, #3fd6ff 76%, #0a8fe6 92%, rgba(10, 143, 230, 0) 100%);
  box-shadow: 0 0 .9rem .15rem rgba(47, 208, 255, .55);
  opacity: 0;
  transition: opacity .5s ease;
}
.glow .pupil { left: 17%; top: 17%; width: 66%; height: 66%; }
.g-l { left: 40.42%; }
.g-r { left: 59.58%; }
.shade .glow { opacity: 1; animation: blink-dark 4.6s infinite; }
/* a slow blink, then a quick second one, the way an owl blinks at night */
@keyframes blink-dark {
  0%, 46%, 58%, 66%, 100% { transform: translate(-50%, -50%) scaleY(1); opacity: 1; }
  50%, 54% { transform: translate(-50%, -50%) scaleY(.06); opacity: .5; }
  62% { transform: translate(-50%, -50%) scaleY(.06); opacity: .5; }
}

/* ---------- Section pages: one frame, four different heroes ----------
   Each page sets --c on <body> to its branch colour. The frame is the top bar, the words
   (.lede) and the facts. Only the hero below them changes from page to page. */
.top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 82rem; height: 4.8rem; margin: 0 auto;
  padding: .9rem clamp(1.25rem, 4vw, 4rem) 0;
}
.brand { line-height: 0; }
.brand img { width: 9rem; filter: drop-shadow(0 0 1rem rgba(0, 172, 251, .3)); }
.branches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; font: .8rem/1 var(--mono); }
.branches a {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .5rem .8rem; border-radius: 999px;
  color: var(--muted); text-decoration: none;
  border: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.branches a::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  border: 2px solid var(--c, var(--blue));
}
.branches a:hover { color: var(--text); border-color: color-mix(in srgb, var(--c, var(--blue)) 40%, transparent); }
.branches a[aria-current] {
  color: var(--text);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
}
.branches a[aria-current]::before { background: var(--c); box-shadow: 0 0 .6rem var(--c); }

.section { height: calc(100dvh - 7.4rem); padding-top: .5rem; }
.section.flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }   /* hero on the left */
.section.wide {                                                              /* hero across the page */
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch; align-content: center; row-gap: 1.2rem;
}
.section.center {                                                            /* everything on one axis */
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center;
  text-align: center; row-gap: 1.5rem;
}

.lede { min-width: 0; }
.section.wide .lede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; }
.side { display: flex; flex-direction: column; align-items: flex-end; }
.side .facts { margin-top: 0; }
.kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 0 0 .9rem; font: .85rem/1.4 var(--mono); color: var(--c);
}
.lede h1 {
  margin: 0; font-size: 6.4rem; line-height: 1; letter-spacing: -.035em; font-weight: 800;
  color: #fff;
  background: linear-gradient(175deg, #fff 35%, color-mix(in srgb, var(--c) 80%, #fff));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1.6rem color-mix(in srgb, var(--c) 40%, transparent));
}
.lead { margin: 1.3rem 0 0; max-width: 28rem; font-size: 1.5rem; line-height: 1.45; font-weight: 500; text-wrap: balance; }
.facts {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 1.8rem 0 0; padding: 0; list-style: none;
  font: .76rem/1.3 var(--mono); color: var(--muted); text-align: left;
}
.facts li {
  min-width: 6.4rem; padding: .6rem .9rem .65rem; border-radius: 1rem;
  background: linear-gradient(160deg, rgba(18, 46, 90, .6), rgba(6, 16, 33, .85));
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.facts b { display: block; color: var(--text); font: 600 1.05rem/1.35 var(--round); }
.back {
  display: inline-flex; align-items: center; margin-top: 1.6rem;
  font: .88rem var(--mono); color: var(--muted); text-decoration: none;
}
.back .prompt { color: var(--c); }
.back:hover { color: var(--text); }
.scene { position: relative; min-width: 0; }

/* Tools: a workbench. The terminal opens the branch and reads its README. */
.bench { width: 100%; margin: 0; }
.bench .term-body { padding: 1.2rem 1.5rem 1.4rem; font-size: 1.05rem; line-height: 1.9; }
.bench .faint { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.tile {
  position: absolute; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 1.1rem;
  font: 700 1.1rem var(--mono); color: #06122a;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .55), transparent 42%), linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 45%, #021a3a));
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .28), 0 14px 26px -10px var(--c);
  animation: float 6s ease-in-out infinite;
}
.tile.t1 { left: -2.5rem; bottom: 4.2rem; rotate: -9deg; }
.tile.t2 { right: -1.6rem; top: 6.5rem; rotate: 8deg; animation-delay: -2s; }
.tile.t3 { right: 3.2rem; bottom: -1.6rem; rotate: -4deg; animation-delay: -4s; }

/* Designs: an artboard, with a shape selected and the site's own palette pinned below */
.board {
  position: relative; aspect-ratio: 1.32; border-radius: 1.3rem; overflow: hidden;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c) 32%, transparent) 1px, transparent 1.6px) 1.1rem 1.1rem / 1.6rem 1.6rem,
    linear-gradient(160deg, rgba(18, 46, 90, .72), rgba(6, 16, 33, .92));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 50px -24px var(--c);
}
.ruler { position: absolute; left: 0; top: 0; background-color: rgba(4, 10, 21, .55); }
.ruler.rx {
  right: 0; height: 1.1rem; border-bottom: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, transparent) 0 1px, transparent 1px .8rem);
  background-size: 100% 45%; background-position: 0 100%; background-repeat: no-repeat;
}
.ruler.ry {
  bottom: 0; width: 1.1rem; border-right: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--c) 55%, transparent) 0 1px, transparent 1px .8rem);
  background-size: 45% 100%; background-position: 100% 0; background-repeat: no-repeat;
}
.sq {
  position: absolute; left: 12%; top: 15%; width: 31%; aspect-ratio: 1; border-radius: 22%;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .5), transparent 45%), linear-gradient(160deg, var(--c-tools), #2a36a8);
  box-shadow: inset 0 -1.2rem 2rem rgba(0, 0, 0, .3), 0 1.4rem 2.4rem -1rem rgba(0, 0, 0, .7);
}
/* the selected shape: a frame with four handles, its size, and the pointer that drags it */
.pick {
  position: absolute; left: 33%; top: 27%; width: 28%; aspect-ratio: 1;
  outline: 1.5px solid var(--c); outline-offset: .5rem;
  transform-origin: 0 0; animation: resize 7s ease-in-out infinite;
}
@keyframes resize { 50% { transform: scale(1.14); } }
.ci {
  position: absolute; inset: 0; border-radius: 50%; opacity: .95;
  background: radial-gradient(circle at 32% 26%, #d5fbff, var(--c) 48%, #0a7fd0);
  box-shadow: inset 0 -1rem 2rem rgba(0, 40, 90, .35), 0 1.4rem 2.4rem -1rem rgba(0, 0, 0, .7);
}
.pick b {
  position: absolute; width: .6rem; height: .6rem; margin: -.8rem;
  background: #fff; border: 1.5px solid var(--c); border-radius: 2px;
}
.pick b:nth-of-type(1) { left: 0; top: 0; }
.pick b:nth-of-type(2) { right: 0; top: 0; }
.pick b:nth-of-type(3) { left: 0; bottom: 0; }
.pick b:nth-of-type(4) { right: 0; bottom: 0; }
.pick .size {
  position: absolute; left: 50%; top: calc(100% + 1.1rem); translate: -50% 0;
  padding: .12rem .5rem; border-radius: .4rem; white-space: nowrap;
  background: var(--c); color: #03202b; font: 600 .68rem/1.5 var(--mono);
}
.ptr {
  position: absolute; right: -1.9rem; bottom: -2.1rem; width: 1.5rem;
  fill: #fff; stroke: #06122a; stroke-width: 1.2; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
.aa {
  position: absolute; right: 9%; top: 13%;
  font: 800 4.8rem/1 var(--round); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 70%, #fff); opacity: .85;
}
.swatches {
  position: absolute; left: 8%; right: 6%; bottom: 7%;
  display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none;
  font: .62rem/1 var(--mono); color: var(--muted); text-align: center;
}
.swatches li {
  flex: 1; padding: 2.5rem 0 .45rem; border-radius: .7rem; overflow: hidden;
  background: linear-gradient(var(--s), var(--s)) top / 100% 2.1rem no-repeat, rgba(4, 10, 21, .75);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* Learning: a constellation. Each star is a step, and the line between them draws itself. */
.map { position: relative; min-height: 15rem; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(-10% 100% -10% 0); animation: sweep 3s ease-out .4s forwards; }
@keyframes sweep { to { clip-path: inset(-10% 0 -10% 0); } }
.map polyline {
  fill: none; stroke: color-mix(in srgb, var(--c) 75%, transparent);
  stroke-width: 2; stroke-dasharray: 7 7; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.map ol { margin: 0; padding: 0; list-style: none; }
.map li {
  position: absolute; left: var(--x); top: var(--y);
  animation: pop .5s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) backwards;
}
@keyframes pop { from { opacity: 0; scale: .3; } }
.map li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 1.15rem; height: 1.15rem; margin: -.575rem;
  border-radius: 50%; background: var(--bg); border: 3px solid var(--c);
  box-shadow: 0 0 0 4px var(--bg), 0 0 1.1rem .2rem color-mix(in srgb, var(--c) 55%, transparent);
}
.map li span {
  position: absolute; left: 0; top: 1.3rem; translate: -50% 0;
  padding: .3rem .8rem; border-radius: 999px; white-space: nowrap;
  font: .82rem/1.4 var(--mono); color: var(--text);
  background: color-mix(in srgb, var(--c) 14%, rgba(4, 10, 21, .8));
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
}
.map li.up span { top: auto; bottom: 1.3rem; }
.map li.goal::before { background: radial-gradient(circle at 35% 30%, #c9efff, var(--c) 55%, #0077d6); border-color: var(--bg); }

/* Articles: a writing desk. One page on top of a small pile, with a draft on it. */
.p-articles .lede h1 { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; }
.p-articles .kicker, .p-articles .facts { justify-content: center; }
.p-articles .lead { margin-left: auto; margin-right: auto; }
.desk { position: relative; width: min(100%, 40rem); }
.sheet {
  position: relative; display: block; text-align: left;
  padding: 1.3rem 1.6rem 1.6rem; border-radius: 1.1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), transparent 55%),
    linear-gradient(160deg, rgba(24, 54, 98, .94), rgba(8, 20, 40, .97));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 50px -26px var(--c);
}
.sheet.under { position: absolute; inset: 0; padding: 0; opacity: .55; }
/* pushed down far enough that a tilted corner never rises above the top page, where the owl stands */
.sheet.u1 { rotate: 2.6deg; translate: .7rem 1.1rem; }
.sheet.u2 { rotate: -3.4deg; translate: -.6rem 1.4rem; opacity: .35; }
.slug { display: flex; justify-content: space-between; margin: 0; font: .74rem/1.4 var(--mono); color: var(--muted); }
.slug span:first-child { color: var(--c); text-transform: uppercase; letter-spacing: .14em; }
.headline { margin: .7rem 0 1.1rem; font: 700 1.9rem/1.2 var(--serif); letter-spacing: -.01em; color: var(--text); }
.headline span { white-space: nowrap; }   /* the caret stays with the last word */
.headline .caret { height: .95em; background: var(--c); }
/* the lines of the draft that are not written yet */
.ln {
  display: block; height: .55rem; width: var(--w, 100%); margin-top: .85rem; border-radius: 999px;
  background: linear-gradient(90deg, rgba(190, 220, 255, .1) 40%, color-mix(in srgb, var(--c) 45%, transparent) 50%, rgba(190, 220, 255, .1) 60%) 0 0 / 300% 100%;
  animation: write 4.5s ease-in-out infinite;
}
@keyframes write { from { background-position: 100% 0; } to { background-position: 0 0; } }
.after { display: flex; flex-direction: column; align-items: center; }
.after .facts { margin-top: 0; }
.after .back { margin-top: 1.2rem; }

/* ---------- 404 ---------- */
.lost { display: grid; place-items: center; overflow-y: auto; }
.lost main { text-align: center; padding: 2rem 1.25rem; }
.lost .big { width: min(200px, 50vw); margin: 0 auto; filter: drop-shadow(0 0 30px rgba(0, 172, 251, .4)); }
.lost h1 { margin: .6rem 0 0; font-size: 3.4rem; line-height: 1; letter-spacing: -.02em; }
.lost .term { margin-top: 1.3rem; }
.button {
  display: inline-block; margin-top: .4rem; padding: .6rem 1.4rem;
  border-radius: 999px; text-decoration: none; font-weight: 600;
  color: #031326; background: linear-gradient(160deg, #7fdcff, var(--blue));
  box-shadow: 0 12px 26px -12px var(--blue);
}
.button:hover { color: #031326; filter: brightness(1.1); }

/* ---------- Narrow screens: stack, and still try to fit one screen ---------- */
@media (max-width: 900px) {
  html { font-size: clamp(11.5px, 1.56vh, 16px); }
  body { overflow-y: auto; height: auto; min-height: 100dvh; }
  .stage {
    height: auto; min-height: calc(100dvh - 7.6rem);
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    row-gap: 1.6rem;
    padding: 1.2rem 1rem 1rem;
    max-width: 38rem;
  }
  .hero h1 img { width: min(100%, 24rem); }
  .tagline { margin-top: 1rem; font-size: 1.3rem; }
  .term { display: none; }
  .graph-title { display: none; }
  :root { --lane: .95rem; --node: .95rem; --node-y: 2.2rem; --gap: .75rem; }
  .row { column-gap: .5rem; }
  .card { gap: .8rem; padding: .85rem .95rem .95rem; }
  .icon { width: 2.7rem; height: 2.7rem; }
  .top { flex-direction: column; justify-content: center; height: auto; gap: .8rem; padding: 1.1rem 1rem 0; }
  .branches { justify-content: center; gap: .1rem; font-size: .76rem; }
  .branches a { padding: .45rem .5rem; }
  .bench { display: block; }   /* the home page hides its terminal on phones; this one is the page */
  .section, .section.flip { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; padding-top: 1.6rem; }
  .section.flip .lede { order: -1; }
  .section.wide { grid-template-rows: auto; }
  .lede h1 { font-size: 3.9rem; }
  .lead { font-size: 1.3rem; }
  .tile.t1 { display: none; }   /* it would sit on the last prompt */
  .tile.t2 { right: -.5rem; }
  .bench .term-body { font-size: .9rem; padding: 1rem 1.1rem 1.6rem; }
  .side { align-items: flex-start; }
  .board { aspect-ratio: 1.1; }
  .map { min-height: 22rem; margin: 0 3rem; }   /* room at the sides for the first and last labels */
  .map li span { font-size: .78rem; padding: .25rem .65rem; }
  /* a phone has no empty sky to fly in, so the owl sits on a twig above the footer */
  .roost { display: block; position: relative; width: 6.4rem; margin: 0 auto .4rem; }
  .flyer { position: static; width: 100%; }
  .twig { position: absolute; inset: 0; width: auto; opacity: 1; }
  footer { position: static; padding: 0 1rem 1rem; }
}

/* very short windows: let the page scroll instead of crushing it */
@media (max-height: 520px) {
  html { font-size: 12px; }
  body { overflow-y: auto; height: auto; }
  .stage { height: auto; padding-bottom: 1rem; }
  .roost { display: block; position: relative; width: 6rem; margin: 0 auto .4rem; }
  .flyer { position: static; width: 100%; }
  .twig { position: absolute; inset: 0; width: auto; opacity: 1; }
  footer { position: static; padding-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .out { opacity: 1; }
  .map svg { clip-path: none; }
}