/* r3ai.dev, clear water edition.
   Plan: blues and greens, the colours of the lake I sail on, over a slow shader that moves like water.
   Surfaces stay mostly transparent so the water shows through. Blue and green meet in one gradient
   (the "tide") that is used for the primary button, the nav pill and small marks, and nowhere else.
   Only the floating controls are liquid glass. The showpiece is the clear cube of three R's.
   Type: Newsreader for headings, Geist for reading. Content is left aligned. */
@view-transition { navigation: auto; }

:root {
  color-scheme: light dark;
  --ground: light-dark(#e9f4f5, #06161f);
  --ink: light-dark(#0a2230, #e6f3f3);
  --soft: light-dark(#3f5a66, #9ab5bc);
  --blue: light-dark(#0b6cc4, #63b8ff);
  --green: light-dark(#0a7f66, #52d9ad);
  --accent: var(--blue);
  --tide: linear-gradient(115deg, var(--blue), var(--green));
  --on-tide: light-dark(#ffffff, #04202a);
  --surface: light-dark(rgb(255 255 255 / .3), rgb(150 225 235 / .055));
  --surface-strong: light-dark(rgb(248 253 254 / .6), rgb(8 32 42 / .58));
  --hair: light-dark(rgb(10 70 90 / .14), rgb(160 230 240 / .15));
  --edge: light-dark(rgb(255 255 255 / .9), rgb(190 240 250 / .22));
  --glass: light-dark(rgb(255 255 255 / .28), rgb(40 95 110 / .28));
  --shade: light-dark(rgb(10 70 100 / .26), rgb(0 0 0 / .6));
  --display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 68rem;
  --read: 40rem;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.62 var(--body);
  overflow-x: clip;
}
#silk { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: color-mix(in oklab, var(--green) 80%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.02em; font-optical-sizing: auto; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }

/* ---------- liquid glass: used only for floating controls ---------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--edge);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .22)),
    inset 0 -1px 1px light-dark(rgb(10 70 100 / .1), rgb(0 0 0 / .4)),
    0 14px 34px -18px var(--shade),
    0 2px 6px -2px light-dark(rgb(10 70 100 / .12), rgb(0 0 0 / .5));
}
/* a highlight that follows the pointer across the glass */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, -60%), light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .16)), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
.glass:hover::after { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--surface-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- top capsule and phone tab bar ---------- */
.bar {
  position: sticky;
  top: 14px;
  z-index: 20;
  margin: 14px auto 0;
  width: fit-content;
  max-width: calc(100% - 28px);
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .36rem .32rem 1.05rem;
  view-transition-name: bar;
}
.bar, .tabs { background: light-dark(rgb(240 250 252 / .62), rgb(9 36 47 / .62)); }
.mark { font: 600 1.35rem/1 var(--display); text-decoration: none; margin-right: .5rem; letter-spacing: -.02em; }
.mark sup { font-size: .58em; color: var(--green); margin-left: .04em; }
.links, .tabs { position: relative; }
.links { display: flex; gap: .1rem; }
.links a, .tabs a { position: relative; z-index: 1; text-decoration: none; font-weight: 500; font-size: .98rem; padding: .48rem .95rem; border-radius: 999px; white-space: nowrap; transition: color .2s; }
.links a:hover, .tabs a:hover { color: var(--ink); }
.links a[aria-current="page"], .tabs a[aria-current="page"] { background: var(--tide); color: var(--on-tide); }
/* where the browser can do it, the dark pill becomes a lens that slides to whatever you point at */
@supports (anchor-name: --a) and (position-anchor: --a) {
  .links a[aria-current="page"], .tabs a[aria-current="page"] { background: none; anchor-name: --here; }
  .links:has(a:hover) a[aria-current="page"], .tabs:has(a:hover) a[aria-current="page"] { anchor-name: none; color: var(--ink); }
  .links a:hover, .tabs a:hover { anchor-name: --here; color: var(--on-tide); }
  .links::before, .tabs::before {
    content: "";
    position: absolute;
    position-anchor: --here;
    left: anchor(left);
    right: anchor(right);
    top: anchor(top);
    bottom: anchor(bottom);
    border-radius: 999px;
    background: var(--tide);
    transition: left .34s cubic-bezier(.3, 1.3, .5, 1), right .34s cubic-bezier(.3, 1.3, .5, 1), top .34s, bottom .34s;
  }
  .links:not(:has(a[aria-current="page"], a:hover))::before, .tabs:not(:has(a[aria-current="page"], a:hover))::before { display: none; }
}
.theme { appearance: none; border: 0; background: none; color: inherit; width: 2.3rem; height: 2.3rem; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.theme:hover { background: light-dark(rgb(255 255 255 / .6), rgb(255 255 255 / .12)); }
.theme svg { width: 1.15rem; height: 1.15rem; }
.tabs { display: none; }
@media (max-width: 640px) {
  .bar { width: calc(100% - 28px); justify-content: space-between; }
  .links { display: none; }
  .tabs {
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    padding: .32rem;
    view-transition-name: tabs;
  }
  .tabs a { flex: 1; text-align: center; padding-inline: .2rem; font-size: .93rem; }
  body { padding-bottom: 5.5rem; }
}
/* the capsule tightens as you scroll, like the iOS bars do */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
    .bar { animation: tighten linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
    @keyframes tighten { to { scale: .92; translate: 0 -4px; } }
  }
}

main { flex: 1; padding-block: clamp(1.5rem, 4vw, 3rem); display: grid; gap: clamp(1.1rem, 2vw, 1.5rem); align-content: start; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 1.5rem; padding-block: clamp(1rem, 4vw, 3rem); }
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.9rem); line-height: 1.02; letter-spacing: -0.03em; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero p { margin-top: 1.3rem; font-size: clamp(1.08rem, 1.7vw, 1.28rem); max-width: 33rem; color: var(--soft); }
.acts { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.hero .acts { margin-top: 1.7rem; }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); } .stage { order: -1; } .scene { --s: clamp(170px, 50vw, 230px); } }

/* the cube of three R's: a 3 by 3 puzzle you can turn. Six tile colours, all blues and greens. */
.stage { display: grid; justify-items: center; gap: .1rem; min-width: 0; }
.scene { --s: clamp(150px, 22vw, 250px); --c: calc(var(--s) / 3); perspective: calc(var(--s) * 5.5); display: grid; place-items: center; padding: calc(var(--s) * .3) calc(var(--s) * .22) calc(var(--s) * .36); border-radius: 28px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scene:active { cursor: grabbing; }
.scene:has(.cube:focus-visible) { outline: 2px solid var(--accent); outline-offset: -6px; }
.cube { width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, -20deg)) rotateY(var(--ry, -32deg)); touch-action: none; outline: none; }
.qb { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.fc {
  position: absolute;
  left: calc(var(--c) / -2);
  top: calc(var(--c) / -2);
  width: var(--c);
  height: var(--c);
  display: grid;
  place-content: center;
  justify-items: center;
  font-style: normal;
  color: var(--on, #fff);
  background: light-dark(#0c2b3c, #020c12);
  outline: 1px solid light-dark(#0c2b3c, #020c12);
  backface-visibility: hidden;
  transform: var(--t) translateZ(calc(var(--c) / 2));
}
.fc[data-k]::before {
  content: "";
  position: absolute;
  inset: 5.5%;
  border-radius: 19%;
  background: linear-gradient(140deg, rgb(255 255 255 / .46), rgb(255 255 255 / 0) 48%), var(--tile);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -2px 5px rgb(0 25 45 / .2);
}
.fc > * { position: relative; }
.fc b { font: 500 calc(var(--c) * .6)/.9 var(--display); letter-spacing: -.04em; }
.fc span { font: 500 calc(var(--c) * .15)/1 var(--body); margin-top: .35em; opacity: .85; }
.fc sup { font-size: .5em; }
.n0 { --t: rotateY(90deg); --tile: #0d9d74; }
.n1 { --t: rotateY(-90deg); --tile: #6cc8f5; --on: #0a2230; }
.n2 { --t: rotateX(-90deg); --tile: #b9e860; --on: #0a2230; }
.n3 { --t: rotateX(90deg); --tile: #f2fbfc; --on: #0a2230; }
.n4 { --t: rotateY(0deg); --tile: #1272d6; }
.n5 { --t: rotateY(180deg); --tile: #12386b; }
.cube-ui { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; }
.hero .cube-say { flex-basis: 100%; margin: .15rem 0 0; max-width: none; text-align: center; font-size: .9rem; color: var(--soft); min-height: 1.6em; }
html:not(.js) .cube-ui { display: none; }

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 500; padding: .72rem 1.3rem; border-radius: 999px; background: var(--tide); color: var(--on-tide); border: 1px solid transparent; box-shadow: 0 10px 24px -14px var(--blue); transition: scale .2s; }
.btn:hover { color: var(--on-tide); scale: 1.03; }
.btn:active { scale: .98; }
.btn.glass { background: var(--glass); color: var(--ink); border-color: var(--edge); }
.btn.glass:hover { color: var(--ink); }
button.btn { font: inherit; font-weight: 500; cursor: pointer; }
.btn.sm { padding: .42rem .95rem; font-size: .92rem; }
.btn[disabled] { opacity: .6; cursor: default; scale: 1; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { display: inline-block; font-size: .82rem; font-weight: 500; line-height: 1; padding: .36rem .68rem; border-radius: 999px; border: 1px solid var(--hair); color: var(--soft); white-space: nowrap; }
.chip.live { color: var(--green); border-color: color-mix(in oklab, var(--green) 50%, transparent); }

/* ---------- quiet content surfaces ---------- */
.sheet {
  --r: 26px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.sheet.strong { background: var(--surface-strong); }
@supports (corner-shape: squircle) { .sheet { corner-shape: squircle; border-radius: calc(var(--r) * 1.7); } }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1.1rem, 2vw, 1.5rem); }
.tile { padding: clamp(1.3rem, 2.6vw, 2rem); display: grid; gap: .7rem; align-content: start; grid-column: span 3; }
.tile h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.tile > p { color: var(--soft); }
.tile .end { margin-top: auto; padding-top: .8rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
a.tile { text-decoration: none; color: inherit; transition: translate .3s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
a.tile:hover { translate: 0 -4px; color: inherit; background: var(--surface-strong); }
.span-2 { grid-column: span 2; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
@media (max-width: 860px) { .tile, .span-2, .span-4 { grid-column: span 6; } }
.ask { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ask > div:first-child { display: grid; gap: .7rem; }
.ask p { color: var(--soft); }
.ask .end { margin: 0; padding: 0; }
@media (max-width: 620px) { .ask { grid-template-columns: minmax(0, 1fr); } }

/* ---------- section head ---------- */
.head { padding-block: clamp(1rem, 4vw, 2.75rem) .5rem; display: grid; gap: 1rem; }
.head h1 { font-size: clamp(2.8rem, 8vw, 5.4rem); letter-spacing: -0.035em; }
.head p { max-width: var(--read); font-size: 1.18rem; color: var(--soft); }
.h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-top: 1.2rem; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.1rem, 2vw, 1.5rem); }
.card { --r: 22px; padding: 1.35rem; display: grid; gap: .65rem; align-content: start; }
.card h3 { font-size: 1.42rem; line-height: 1.15; }
.card p { color: var(--soft); }
.card .end { margin-top: auto; padding-top: .5rem; display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; font-weight: 500; }
.note { font-size: .93rem; color: var(--soft); max-width: var(--read); }
.empty { padding: 1.25rem; color: var(--soft); }

/* ---------- post lists ---------- */
.list { list-style: none; margin: 0; padding: .4rem; display: grid; align-content: start; }
.list li + li { border-top: 1px solid var(--hair); }
.list a { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .3rem 1.25rem; padding: 1.05rem; border-radius: 18px; text-decoration: none; color: inherit; transition: background-color .2s; }
.list a:hover { background: light-dark(rgb(255 255 255 / .6), rgb(255 255 255 / .06)); color: inherit; }
.list time { font-size: .9rem; color: var(--soft); font-variant-numeric: tabular-nums; display: grid; gap: .45rem; justify-items: start; align-content: start; }
.list h3 { font-size: 1.4rem; line-height: 1.18; }
.list p { color: var(--soft); margin-top: .3rem; max-width: var(--read); }
@media (max-width: 620px) { .list a { grid-template-columns: minmax(0, 1fr); } .list time { display: flex; align-items: center; gap: .6rem; } }

/* ---------- article ---------- */
.post { --r: 32px; padding: clamp(1.4rem, 5vw, 3.5rem); display: grid; gap: 1.5rem; }
.post header { display: grid; gap: 1rem; max-width: 46rem; }
.when { display: flex; gap: .6rem; align-items: center; color: var(--soft); font-size: .95rem; }
.post h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; }
.prose { max-width: var(--read); display: grid; gap: 1.1rem; font-size: 1.09rem; }
.prose h2 { font-size: 1.7rem; margin-top: 1rem; }
.prose h3 { font-size: 1.3rem; margin-top: .6rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.prose li::marker { color: var(--green); }
.prose blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid; border-image: linear-gradient(var(--blue), var(--green)) 1; color: var(--soft); font-family: var(--display); font-size: 1.2em; }
.prose code { font: .88em ui-monospace, 'SFMono-Regular', Menlo, monospace; background: light-dark(rgb(10 70 90 / .08), rgb(255 255 255 / .09)); padding: .1em .4em; border-radius: 6px; }
.prose pre { margin: 0; padding: 1rem; border-radius: 14px; background: light-dark(rgb(10 70 90 / .06), rgb(0 0 0 / .3)); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--hair); width: 100%; }
/* a page from static/ shown inside a post ({{embed}} in build.mjs). The frame is as tall as a 1060 by 1640 drawing plus its controls. */
.embed { margin: 0; display: grid; gap: .8rem; justify-items: start; width: 100%; max-width: 34rem; }
.embed .frame { position: relative; width: 100%; padding-top: calc(154.8% + 13rem); border-radius: 20px; overflow: hidden; border: 1px solid var(--hair); background: #fbf6ea; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose img { border-radius: 14px; border: 1px solid var(--hair); max-width: min(100%, 26rem); }

/* ---------- request form ---------- */
.form { --r: 32px; padding: clamp(1.4rem, 5vw, 3rem); display: grid; gap: 1.4rem; max-width: 46rem; }
.field { display: grid; gap: .45rem; min-width: 0; }
.field label, .field legend { font-weight: 500; }
.form small { color: var(--soft); font-size: .92rem; }
.opt { font-weight: 400; font-size: .85rem; color: var(--soft); margin-left: .3rem; }
.input { font: inherit; color: var(--ink); width: 100%; padding: .75rem .95rem; border-radius: 16px; border: 1px solid var(--hair); background: light-dark(rgb(255 255 255 / .66), rgb(255 255 255 / .07)); }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 16px; }
textarea.input { min-height: 9.5rem; resize: vertical; display: block; }
select.input { appearance: none; padding-right: 2.6rem; background-image: linear-gradient(45deg, transparent 50%, var(--soft) 50%), linear-gradient(135deg, var(--soft) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%; background-size: .36rem .36rem; background-repeat: no-repeat; }
select.input option, select.input optgroup { background: light-dark(#fff, #0b2733); color: light-dark(#0a2230, #e6f3f3); }
.pick { border: 0; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.pick legend { padding: 0; margin-bottom: .55rem; }
.pick label { position: relative; cursor: pointer; padding: .5rem 1.05rem; border-radius: 999px; border: 1px solid var(--hair); background: light-dark(rgb(255 255 255 / .5), rgb(255 255 255 / .05)); }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick label:has(input:checked) { background: var(--tide); color: var(--on-tide); border-color: transparent; }
.pick label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.two + small { margin-top: -.8rem; }
@media (max-width: 560px) { .two { grid-template-columns: minmax(0, 1fr); } }
.hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-weight: 500; }
.form-msg.bad { color: light-dark(#a3341f, #ffa08a); }
.form-done { display: grid; gap: .8rem; }
.form-done h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.form-done p { color: var(--soft); max-width: var(--read); }

/* ---------- blog filters ---------- */
.filters { display: flex; gap: .45rem; flex-wrap: wrap; }
html:not(.js) .filters { display: none; }
button.chip { font: inherit; font-size: .9rem; font-weight: 500; line-height: 1; padding: .55rem .9rem; cursor: pointer; color: var(--ink); background: light-dark(rgb(255 255 255 / .45), rgb(255 255 255 / .05)); }
button.chip span { color: var(--soft); margin-left: .25rem; font-variant-numeric: tabular-nums; }
button.chip[aria-pressed="true"] { background: var(--tide); color: var(--on-tide); border-color: transparent; }
button.chip[aria-pressed="true"] span { color: inherit; opacity: .8; }
a.chip { text-decoration: none; }
a.chip:hover { color: var(--accent); border-color: currentColor; }
.when { flex-wrap: wrap; }
.list li[hidden] { display: none; }
.list li:not([hidden]) ~ li:not([hidden]) { border-top: 1px solid var(--hair); }
.list li + li { border-top: 0; }

/* ---------- start here: a numbered path ---------- */
.path { list-style: none; margin: 0; padding: .4rem; display: grid; max-width: 52rem; }
.path li + li { border-top: 1px solid var(--hair); }
.path a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.15rem 1.05rem; border-radius: 18px; text-decoration: none; color: inherit; transition: background-color .2s; }
.path a:hover { background: light-dark(rgb(255 255 255 / .6), rgb(255 255 255 / .06)); color: inherit; }
.step { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tide); color: var(--on-tide); font: 500 1.3rem/1 var(--display); }
.path h3 { font-size: 1.45rem; line-height: 1.18; margin-block: .2rem .35rem; }
.path p { color: var(--soft); max-width: var(--read); }
.path .why { font-size: .88rem; font-weight: 500; color: var(--green); }

/* ---------- pictures on cards (games page) ---------- */
.cards.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.shot { display: block; margin: -.35rem -.35rem .3rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); aspect-ratio: 16 / 9; background: var(--surface-strong); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.2, .8, .2, 1); }
.card:hover .shot img { scale: 1.04; }

/* ---------- requests readers have made ---------- */
.asked { max-width: 46rem; }
.asked > li > * { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 1.05rem; }
.asked h3 { font-size: 1.25rem; }

/* ---------- try-it demos ---------- */
.demo { --r: 32px; padding: clamp(1.2rem, 4vw, 2.5rem); display: grid; gap: 1.3rem; }
.demo h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); outline: none; }
.demo h3 { font-size: 1.2rem; margin-top: .6rem; }
.demo .field > span, .demo legend { font-weight: 500; }
.demo .field small, .demo .hint { color: var(--soft); font-size: .92rem; font-weight: 400; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; }
.demo-controls .field { min-width: 11rem; }
.demo-status { padding: .8rem 1.05rem; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--green) 45%, transparent); background: color-mix(in oklab, var(--green) 10%, transparent); max-width: none; }
.demo-status.bad { --warn: light-dark(#a3341f, #ffa08a); border-color: color-mix(in oklab, var(--warn) 55%, transparent); background: color-mix(in oklab, var(--warn) 11%, transparent); color: var(--warn); font-weight: 500; }
.demo-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; }
.demo-cols section { display: grid; gap: .7rem; }
@media (max-width: 800px) { .demo-cols { grid-template-columns: minmax(0, 1fr); } }
.routes, .people { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.routes li, .people li { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; padding: .7rem .9rem; border-radius: 16px; border: 1px solid var(--hair); background: light-dark(rgb(255 255 255 / .45), rgb(255 255 255 / .04)); }
.routes li > div:first-child, .people li > div { display: grid; }
.routes span, .people span { font-size: .88rem; color: var(--soft); }
.routes select { width: auto; min-width: 11rem; padding-block: .5rem; }
.assign { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.assign b { font-weight: 500; }
.chip.board, .chip.supervisor { color: var(--blue); border-color: color-mix(in oklab, var(--blue) 50%, transparent); }
.routes li.is-open { --warn: light-dark(#a3341f, #ffa08a); border-color: var(--warn); background: color-mix(in oklab, var(--warn) 12%, transparent); }
.chip.none { --warn: light-dark(#a3341f, #ffa08a); background: var(--warn); color: light-dark(#fff, #2a0a03); border-color: transparent; font-weight: 600; letter-spacing: .03em; }
.people li.is-out { opacity: .62; }
.people li.is-out strong { text-decoration: line-through; }
.btn[aria-pressed="true"] { background: var(--tide); color: var(--on-tide); border-color: transparent; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .92rem; color: var(--soft); }
.steps li { display: flex; align-items: center; gap: .45rem; }
.steps span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--hair); font-size: .82rem; font-weight: 500; }
.steps .on { color: var(--ink); font-weight: 500; }
.steps .on span, .steps .did span { background: var(--tide); color: var(--on-tide); border-color: transparent; }
.pick.stack { flex-direction: column; align-items: flex-start; }
.pick.stack label { border-radius: 16px; }
.quotes { display: grid; gap: .8rem; }
#wz-pick { display: grid; gap: 1.1rem; }
#wz-pick:empty { display: none; }
.quote { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
@media (max-width: 560px) { .quote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: .8rem; border-bottom: 1px solid var(--hair); } .quote .field:first-child { grid-column: 1 / -1; } }
.paper { display: grid; gap: .9rem; padding: clamp(1rem, 3vw, 2rem); border-radius: 18px; border: 1px solid var(--hair); background: light-dark(#fff, rgb(255 255 255 / .05)); }
.paper .sample { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.paper table { width: 100%; border-collapse: collapse; }
.paper th, .paper td { text-align: left; vertical-align: top; padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; }
.paper th { width: 38%; font-weight: 500; color: var(--soft); }
.paper .grid th { width: auto; }
.paper .sign { margin-top: 1.4rem; display: flex; gap: 1rem; align-items: end; color: var(--soft); }
.paper .sign span { flex: 1; max-width: 20rem; border-bottom: 1px solid var(--ink); height: 1.6rem; }
@media print {
  #silk, .bar, .tabs, .foot, .head, .note, .demo-controls, .steps, .people button { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .sheet, .paper { border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- search ---------- */
.search { display: grid; gap: .5rem; max-width: 34rem; }
.search .input { border-radius: 999px; padding-inline: 1.2rem; }
.search .input:focus-visible { border-radius: 999px; }
html:not(.js) .search { display: none; }

/* ---------- "try this yourself" prompt boxes ---------- */
.try { display: grid; gap: .7rem; justify-items: start; margin-top: .8rem; padding: 1.2rem; border-radius: 20px; border: 1px solid color-mix(in oklab, var(--green) 40%, transparent); background: color-mix(in oklab, var(--green) 8%, transparent); }
.try h2 { font-size: 1.35rem; margin: 0; }
.try .hint { font-size: .92rem; color: var(--soft); }
.prose pre.prompt { width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 1rem; line-height: 1.55; background: light-dark(rgb(255 255 255 / .7), rgb(0 0 0 / .28)); border: 1px solid var(--hair); }
html:not(.js) [data-copy] { display: none; }

/* ---------- small tools inside posts (the scoring calculator) ---------- */
.widget { --r: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.1rem; }
.prose > * { min-width: 0; }
.widget .field > span { font-weight: 500; font-size: .92rem; }
.widget .hint { font-size: .92rem; color: var(--soft); }
.quote.boat { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 620px) { .quote.boat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .quote.boat .btn { justify-self: start; } }
.scroll { overflow-x: auto; }
.widget table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.widget th, .widget td { text-align: left; padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.widget th { font-weight: 500; color: var(--soft); font-size: .9rem; }
.widget tbody tr:first-child td { color: var(--green); }

/* ---------- ask the site ---------- */
.answer { display: grid; gap: .8rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); max-width: var(--read); font-size: 1.09rem; }
.answer h2 { font-size: 1.1rem; margin-top: .4rem; }
.answer ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: 1rem; }
#ask-ideas button.chip { white-space: normal; text-align: left; line-height: 1.25; }

/* ---------- games page: save for offline ---------- */
.offline { --r: 22px; padding: 1.35rem; display: grid; gap: .9rem; }
.offline h2 { font-size: 1.42rem; margin-bottom: .5rem; }
.offline p { color: var(--soft); max-width: var(--read); }
.offline .hint { font-size: .92rem; }
.offline .end { display: flex; gap: .5rem; flex-wrap: wrap; }
.offline[hidden] { display: none; }

/* ---------- live bus map demo ---------- */
.map-cols { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
@media (max-width: 800px) { .map-cols { grid-template-columns: minmax(0, 1fr); } }
.map-wrap { border-radius: 18px; overflow: hidden; border: 1px solid var(--hair); background: light-dark(#f3faf8, #0b222c); }
.map { display: block; width: 100%; height: auto; }
.map .water { fill: light-dark(#cfe7f3, #123a52); }
.map .streets path { stroke: light-dark(rgb(10 70 90 / .1), rgb(160 230 240 / .09)); stroke-width: 6; fill: none; }
.map .route { fill: none; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.map .stop { cursor: pointer; outline: none; }
.map .stop circle { fill: light-dark(#fff, #0b222c); stroke: var(--ink); stroke-width: 3; }
.map .stop text { font: 500 19px var(--body); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: light-dark(#f3faf8, #0b222c); stroke-width: 4; }
.map .stop.is-picked circle, .map .stop:focus-visible circle { stroke: var(--accent); stroke-width: 6; }
.map .bus { cursor: pointer; outline: none; transition: transform var(--glide, .5s) linear; }
.map .bus .spin { transition: transform .3s; }
.map .bus circle { stroke: #fff; stroke-width: 3; }
.map .bus text { font: 600 15px var(--body); fill: #fff; text-anchor: middle; pointer-events: none; }
.map .bus.is-picked circle, .map .bus:focus-visible circle { stroke: var(--ink); stroke-width: 5; }
.map .bus.parked .spin { opacity: 0; }
.map-clock { font: 500 1.7rem/1 var(--display); min-width: 7.5rem; font-variant-numeric: tabular-nums; }
.feed { margin: 0; padding: .9rem; border-radius: 14px; background: light-dark(rgb(10 70 90 / .06), rgb(0 0 0 / .3)); font: .82rem/1.45 ui-monospace, 'SFMono-Regular', Menlo, monospace; overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .map .bus { transition: none; } }
/* on a phone the stop names are too small to read, so only the transit center and the stop you picked are named */
@media (max-width: 640px) { .map .stop text { display: none; font-size: 34px; stroke-width: 8; } .map .stop.is-picked text, .map .stop[data-stop="hub"] text { display: block; } .map .stop circle { r: 12; } .map .bus circle { r: 19; } .map .bus text { font-size: 22px; } .map .bus text { transform: translateY(3px); } }

/* ---------- bus stop sign demo: e-paper is black on grey-white in both themes ---------- */
.sign-case { justify-self: start; width: min(100%, 44rem); padding: clamp(.7rem, 2.4vw, 1.3rem); border-radius: 22px; background: #23282b; box-shadow: inset 0 0 0 2px #3a4145, 0 18px 40px -22px var(--shade); }
.epaper { container-type: inline-size; aspect-ratio: 2.9 / 1; display: grid; grid-template-rows: auto 1fr 1fr 1fr auto; background: #dfddd3; color: #15171a; border-radius: 6px; padding: 2.2cqw 3cqw; font-family: var(--body); overflow: hidden; }
.ep-head, .ep-foot { display: flex; justify-content: space-between; gap: 1rem; font-size: 3cqw; font-weight: 600; }
.ep-head { border-bottom: .5cqw solid #15171a; padding-bottom: 1cqw; }
.ep-foot { font-size: 2.3cqw; font-weight: 500; border-top: .25cqw solid #15171a; padding-top: .8cqw; }
.ep-row { display: grid; grid-template-columns: 7cqw minmax(0, 1fr) auto; align-items: center; gap: 2.5cqw; font-size: 5cqw; }
.ep-row b { display: grid; place-items: center; height: 6.6cqw; border-radius: 1cqw; background: #15171a; color: #dfddd3; font-size: 4.6cqw; }
.ep-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-row strong { font-size: 5.6cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .epaper.redraw { animation: redraw .42s steps(1); }
  @keyframes redraw { 0% { filter: invert(1); } 35% { filter: invert(0) contrast(.4); } 70% { filter: none; } }
}

/* ---------- footer ---------- */
.foot { padding-block: 1.5rem 2.25rem; display: grid; gap: .5rem; font-size: .9rem; color: var(--soft); }
.foot nav { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* headline words settle in once, on load */
  .hero h1, .head h1 { animation: settle .9s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes settle { from { opacity: 0; translate: 0 .35em; filter: blur(8px); letter-spacing: .01em; } }
  /* cards ease in as they scroll into view, where the browser supports scroll-driven animation */
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes reveal { from { opacity: 0; translate: 0 28px; scale: .97; } }
  }
}
/* page-to-page transitions: titles travel, everything else cross-fades softly */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .9, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}