/* CommonPlace — the site.  A live sky behind the page (a flowing, grained
   gradient drawn in WebGL that turns from dawn to night as you read), paper
   and gouache laid on it, words that change colour with the sky.
   Newsreader for what matters, Instrument Sans for the rest. */

:root {
  /* Set by main.js from the sky behind the page. */
  --top: #2B3358;
  --fg: #FCF6EC;
  --fg-2: rgba(252, 246, 236, 0.74);
  --fg-3: rgba(252, 246, 236, 0.5);
  --line: rgba(252, 246, 236, 0.16);
  --stars: 0;

  --ink: #1A1915;
  --ivory: #FCF6EC;
  --paper: #FFFDF8;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(24px, 6vw, 96px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #1B2340;
  color: var(--fg);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }

/* ---------- The sky ---------- */

.sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; display: block; }
.stars {
  position: fixed;
  inset: 0 0 30% 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--stars);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.4px 1.4px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 61% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 77% 16%, #fff, transparent), radial-gradient(1px 1px at 88% 44%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 6% 58%, rgba(255,255,255,.6), transparent), radial-gradient(1.3px 1.3px at 36% 66%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 70% 62%, rgba(255,255,255,.6), transparent), radial-gradient(1.2px 1.2px at 94% 8%, #fff, transparent),
    radial-gradient(1px 1px at 52% 52%, rgba(255,255,255,.5), transparent), radial-gradient(1.1px 1.1px at 18% 84%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 82% 72%, rgba(255,255,255,.5), transparent), radial-gradient(1.2px 1.2px at 58% 6%, #fff, transparent);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { to { filter: brightness(0.55); } }

/* A second grain over everything, so paper and words share the film. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1.6 -0.4'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}


/* ---------- Type ---------- */

.display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 340;
  font-optical-sizing: auto;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 320; }
.words p { max-width: 28em; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.65; color: var(--fg-2); text-wrap: pretty; }
.words .display { margin-bottom: 28px; }
.words.center { max-width: 760px; margin: 0 auto; text-align: center; }
.words.center p { margin: 0 auto; }

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--fg);
}
/* A fading blur of the sky itself: words pass under the bar without a seam. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -24px 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, transparent);
  pointer-events: none;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 22px/1 var(--serif); letter-spacing: -0.015em; }
.brand .mark-ink { display: none; }
.on-paper .brand .mark-ink { display: block; }
.on-paper .brand .mark-ivory { display: none; }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  text-decoration: none;
  font: 500 15px/1 var(--sans);
  background: var(--fg);
  color: var(--top);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.pill-large { height: 56px; padding: 0 32px; border-radius: 28px; font-size: 17px; }

/* ---------- The opening: the headline beside one composed collage ---------- */

.opening {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px var(--gutter) 80px;
}
.opening-grid {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.opening-words .display { font-size: clamp(56px, 6.8vw, 116px); line-height: 0.95; letter-spacing: -0.035em; }
.lede { margin: 32px 0 44px; max-width: 24em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--fg-2); }
.opening-actions { display: flex; align-items: center; gap: 22px; }
.opening-actions .pill { height: 50px; padding: 0 28px; border-radius: 25px; }
.opening-hint { font-size: 14px; color: var(--fg-2); }
.opening-words > * { opacity: 0; transform: translateY(16px); animation: rise 1.4s var(--ease) forwards; }
.opening-words .display { animation-delay: 0.2s; }
.opening-words .lede { animation-delay: 0.4s; }
.opening-words .opening-actions { animation-delay: 0.55s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* The collage: yellow paper, a strip of dry ink, two prints; the
   viewfinder's corners close on the first, as the app does. */
.collage { position: relative; aspect-ratio: 1 / 0.92; width: 100%; max-width: 600px; justify-self: end; }
.collage > * { position: absolute; margin: 0; opacity: 0; animation: lay 1.5s var(--ease) forwards; }
.c-yellow { left: 4%; top: 4%; width: 52%; --r: -7deg; filter: drop-shadow(0 18px 28px rgba(30, 20, 40, 0.22)); animation-delay: 0.3s; }
.c-ink { left: 22%; bottom: 3%; width: 70%; --r: 2deg; filter: drop-shadow(0 14px 22px rgba(30, 20, 40, 0.18)); animation-delay: 0.45s; }
.c-print { padding: 2.2% 2.2% 6%; background: var(--paper); box-shadow: 0 1px 2px rgba(40, 25, 10, 0.12), 0 30px 60px rgba(30, 20, 40, 0.28); }
.c-print img { width: 100%; }
.c-fuji { left: 26%; top: 14%; width: 60%; --r: 3deg; animation-delay: 0.6s; }
.c-cup { right: 0; bottom: 10%; width: 34%; --r: -5deg; animation-delay: 0.8s; }
.c-note { right: 2%; top: 0; font: italic 360 20px/1 var(--serif); color: var(--fg); --r: -3deg; animation-delay: 1.9s; }
.c-note-line { right: 14%; top: 5%; width: 64px; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; filter: url(#pencil); --r: 0deg; animation-delay: 1.9s; }
@keyframes lay {
  from { opacity: 0; transform: translateY(28px) rotate(calc(var(--r) * 1.8)); }
  to { opacity: 1; transform: translateY(0) rotate(var(--r)); }
}
.frame { position: absolute; inset: -9%; pointer-events: none; animation: frame 1.2s var(--ease) 1.4s forwards; }
.frame i { position: absolute; width: 16%; height: 20%; border: 3px solid var(--ivory); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); opacity: 0; animation: frame-in 0.6s var(--ease) 1.4s forwards; }
.frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.frame i:nth-child(3) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.frame i:nth-child(4) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
@keyframes frame { to { inset: -4%; } }
@keyframes frame-in { to { opacity: 1; } }

/* ---------- Scenes ---------- */

.scene {
  position: relative;
  min-height: 110vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(140px, 18vh, 220px) var(--gutter);
}
.split {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(56px, 8vw, 140px);
}
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.split .reveal:nth-child(2) { transition-delay: 0.18s; }

/* The desk, mounted like a print */
.mount { margin: 0; padding: 14px 14px 40px; background: var(--paper); transform: rotate(1.4deg); box-shadow: 0 1px 2px rgba(40, 25, 10, 0.1), 0 40px 80px rgba(40, 25, 20, 0.22); }
.mount.reveal { transform: translateY(28px) rotate(1.4deg); }
.mount.reveal.in { transform: rotate(1.4deg); }
.desk { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menubar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 24px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  font-size: 11px;
  color: var(--ink);
  background: rgba(252, 251, 248, 0.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.menubar b { font-weight: 600; margin-right: 12px; }
.mb-right { display: inline-flex; align-items: center; gap: 8px; }
.window { position: absolute; left: 8%; top: 17%; width: 62%; height: 70%; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px rgba(26, 25, 21, 0.1), 0 24px 60px rgba(26, 25, 21, 0.26); }
.window-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #F3F1EC; border-bottom: 1px solid rgba(26, 25, 21, 0.06); border-radius: 9px 9px 0 0; }
.window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #EE6A5F; }
.window-bar i:nth-child(2) { background: #F4BF4F; }
.window-bar i:nth-child(3) { background: #61C454; }
.window-bar span { margin: 0 auto; padding: 3px 14px; border-radius: 10px; background: #fff; font-size: 10px; color: #8A867B; }
.window-body { display: flex; gap: 6%; padding: 6%; height: calc(100% - 28px); }
.window-text { flex: 1; display: flex; flex-direction: column; gap: 9%; }
.window-text b { margin-bottom: 4%; font: 400 clamp(17px, 1.9vw, 28px)/1.1 var(--serif); color: var(--ink); }
.window-text s { display: block; height: 5px; border-radius: 3px; background: #E6E2D8; }
.window-text s.short { width: 62%; }
.window-body img { width: 46%; height: 64%; object-fit: cover; border-radius: 3px; }
.corners { position: absolute; inset: -6%; pointer-events: none; }
.corners i { position: absolute; width: 14%; height: 18%; border: 4px solid var(--ivory); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45)); opacity: 0; }
.corners i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.corners i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.corners i:nth-child(3) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.corners i:nth-child(4) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.play .corners { animation: close 7s var(--ease) infinite; }
.play .corners i { animation: corner 7s var(--ease) infinite; }
@keyframes close { 0%, 8% { inset: -6%; } 16%, 100% { inset: -1.5%; } }
@keyframes corner { 0%, 6% { opacity: 0; } 9%, 22% { opacity: 1; } 30%, 100% { opacity: 0; } }
.island {
  position: absolute; left: 50%; top: 36px;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 16px 6px 6px;
  border-radius: 30px;
  background: rgba(252, 251, 248, 0.96);
  box-shadow: 0 0 0 1px rgba(26, 25, 21, 0.06), 0 16px 40px rgba(26, 25, 21, 0.22);
  white-space: nowrap;
  transform: translate(-50%, -150%) scale(0.6);
  opacity: 0;
}
.island img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.island-label { font: 500 10px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #C8643F; }
.island-title { margin-top: 4px !important; font: 500 13.5px/1.2 var(--sans); color: var(--ink); }
.chip { margin-left: 4px; padding: 5px 11px; border-radius: 12px; background: rgba(26, 25, 21, 0.06); font-size: 12px; color: #4E4B44; opacity: 0; }
.play .island { animation: island 7s var(--ease) infinite; }
.play .chip { animation: chip 7s var(--ease) infinite; }
@keyframes island {
  0%, 12% { transform: translate(-50%, -150%) scale(0.6); opacity: 0; }
  18%, 82% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  90%, 100% { transform: translate(-50%, -150%) scale(0.6); opacity: 0; }
}
@keyframes chip { 0%, 40% { opacity: 0; transform: translateX(-6px); } 46%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }

/* The two keys, drawn on a scrap of yellow paper.  They press at the start
   of the capture loop (the corners close just after), and pressing them, or
   both ⌘ keys on the reader's keyboard, plays it again. */
.keys {
  position: relative;
  display: inline-flex;
  gap: 18px;
  margin-top: 48px;
  padding: 40px 44px 46px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.keys:focus-visible { outline: 2px solid var(--fg); outline-offset: 6px; border-radius: 4px; }
.keys-paper {
  position: absolute;
  inset: 0;
  background: #EEC64A url("/art/scrap-yellow.svg") center / cover;
  clip-path: polygon(2% 4%, 40% 1%, 98% 3%, 97% 52%, 99% 97%, 55% 99%, 1% 96%, 3% 48%);
  transform: rotate(-2.5deg);
  box-shadow: 0 20px 40px rgba(60, 40, 10, 0.18);
  filter: drop-shadow(0 16px 24px rgba(60, 40, 10, 0.18));
}
.key {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 84px;
  border-radius: 20px;
  border: 2px solid var(--ink);
  background: #FBF8F1;
  box-shadow: 0 7px 0 -2px var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.key span { font: 400 38px/1 var(--sans); color: var(--ink); }
.play .key, .keys:active .key { animation: press 7s var(--ease) infinite; }
.keys:active .key { animation: none; transform: translateY(5px); box-shadow: 0 2px 0 -2px var(--ink); }
@keyframes press {
  0%, 1% { transform: translateY(0); box-shadow: 0 7px 0 -2px var(--ink); }
  3%, 8% { transform: translateY(5px); box-shadow: 0 2px 0 -2px var(--ink); }
  12%, 100% { transform: translateY(0); box-shadow: 0 7px 0 -2px var(--ink); }
}
.key-ticks { position: absolute; left: 50%; top: 6px; width: 120px; transform: translateX(-50%); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; filter: url(#pencil); opacity: 0; }
.play .key-ticks { animation: ticks 7s var(--ease) infinite; }
@keyframes ticks { 0%, 2% { opacity: 0; transform: translate(-50%, 4px); } 4%, 10% { opacity: 1; transform: translate(-50%, 0); } 16%, 100% { opacity: 0; } }
.pencil-note { position: absolute; bottom: 12px; font: italic 360 17px/1 var(--serif); color: #4A3A16; }
.note-left { left: 74px; transform: rotate(-4deg); }
.note-right { right: 66px; transform: rotate(3deg); }
.try { margin-top: 18px !important; font: italic 360 16px/1.4 var(--serif); color: var(--fg-3) !important; }

/* Pencil, in the margins */
.margin-note { position: absolute; right: -28px; top: -50px; display: flex; align-items: flex-start; gap: 6px; color: var(--fg); pointer-events: none; }
.margin-note svg { width: 92px; height: 54px; order: -1; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; filter: url(#pencil); margin-top: 6px; }
.margin-note span { margin-top: -6px; font: italic 360 19px/1 var(--serif); white-space: nowrap; transform: rotate(-3deg); }
.mount { position: relative; }
.scribble { position: absolute; left: 0; bottom: -7px; width: 100%; height: 16px; fill: none; stroke: #E3835C; stroke-width: 2.4; stroke-linecap: round; filter: url(#pencil); stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.4s var(--ease); }
.search-line { position: relative; border-bottom-color: transparent !important; }
.search.typed-done .scribble { stroke-dashoffset: 0; }
.table-bracket { position: absolute; left: 50%; bottom: 20px; width: 900px; height: 40px; transform: translateX(-50%); fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; filter: url(#pencil); opacity: 0; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.6s var(--ease) 1.8s, opacity 0.4s 1.8s; }
.table-note { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%) rotate(-1.5deg); font: italic 360 19px/1 var(--serif); opacity: 0; transition: opacity 1s var(--ease) 2.6s; white-space: nowrap; }
.table.in .table-bracket { opacity: 0.8; stroke-dashoffset: 0; }
.table.in .table-note { opacity: 0.85; }

/* The table: scattered, then filed */
.table { position: relative; width: 100%; max-width: 1100px; height: 440px; margin: 88px auto 0; }
.card {
  position: absolute;
  left: 50%; top: 40%;
  width: 220px;
  margin: 0;
  padding: 8px 8px 24px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.12), 0 22px 44px rgba(60, 35, 20, 0.2);
  transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) rotate(var(--sr));
  transition: transform 1.9s var(--ease);
}
.card img { width: 100%; aspect-ratio: 320 / 220; object-fit: cover; }
.table.in .card { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--tr)); }
.table.in .card:nth-child(2n) { transition-delay: 0.08s; }
.table.in .card:nth-child(3n) { transition-delay: 0.16s; }
.stack-label {
  position: absolute;
  left: 50%; top: calc(40% + 128px);
  transform: translateX(-50%) translateX(var(--tx));
  white-space: nowrap;
  font: italic 340 25px/1 var(--serif);
  letter-spacing: -0.01em;
  opacity: 0;
  transition: opacity 1s var(--ease) 1.5s;
}
.stack-label span { margin-left: 6px; font: 500 12px/1 var(--sans); font-style: normal; color: var(--fg-3); vertical-align: middle; }
.table.in .stack-label { opacity: 1; }

/* The search, typeset */
.search { width: 100%; max-width: 640px; margin: 88px auto 0; }
.search-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font: italic 340 clamp(28px, 3vw, 40px)/1.2 var(--serif);
  letter-spacing: -0.015em;
  min-height: 66px;
}
.caret { align-self: center; width: 1.5px; height: 30px; background: #E3835C; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.results { list-style: none; margin: 8px 0 0; padding: 0; }
.result {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.result.shown { opacity: 1; transform: none; }
.result img { width: 76px; padding: 4px 4px 10px; background: var(--paper); aspect-ratio: 76 / 62; object-fit: cover; box-shadow: 0 8px 20px rgba(20, 10, 30, 0.25); }
.r-title { font: 400 21px/1.25 var(--serif); text-shadow: 0 1px 12px rgba(30, 20, 40, 0.25); }
.why { font-size: 13.5px; color: var(--fg-2); }

/* The agents, as a few lines of dialogue */
.dialogue { max-width: 640px; margin: 80px auto 0; text-align: center; }
.ask { font: italic 340 clamp(28px, 3vw, 40px)/1.25 var(--serif); letter-spacing: -0.015em; }
.answer { margin-top: 26px !important; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: var(--fg-2); }
.answer b { font-weight: 500; color: var(--fg); }
.cmd { margin-top: 48px !important; font: 400 12.5px/1.6 var(--mono); color: var(--fg-3); overflow-wrap: anywhere; }

/* Download, under the stars */
.download { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 160px var(--gutter) 40px; text-align: center; }
.download-words { display: flex; flex-direction: column; align-items: center; margin: auto 0; }
.app-icon { width: 136px; height: 136px; margin-bottom: 48px; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)); }
.download .display { margin-bottom: 48px; font-size: clamp(48px, 6vw, 96px); }
.meta { margin-top: 22px; font-size: 14px; color: var(--fg-3); }
.footer { margin-top: 120px; font-size: 13px; color: var(--fg-3); }

/* ---------- Smaller screens ---------- */

@media (max-width: 1100px) {
  .table { transform: scale(0.8); transform-origin: center top; margin-bottom: -88px; }
}
@media (max-width: 860px) {
  .opening { padding-top: 104px; }
  .opening-grid { grid-template-columns: 1fr; gap: 24px; }
  .collage { order: -1; justify-self: center; max-width: 420px; }
  .opening-words { text-align: left; }
  .table-bracket, .table-note { display: none; }
  .split { grid-template-columns: 1fr; gap: 64px; }
  .table { height: 680px; transform: none; margin: 56px auto 0; }
  .table .card { top: 50%; width: 150px; padding: 6px 6px 16px; }
  .table.in .card { transform: translate(-50%, -50%) translate(var(--mx), var(--my)) rotate(var(--mr)); }
  .stack-label { top: 50%; font-size: 19px; transform: translateX(-50%) translate(var(--mx), var(--my)); }
}
@media (max-width: 560px) {
  .keys { padding: 30px 30px 38px; gap: 12px; }
  .key { width: 70px; height: 64px; border-radius: 16px; }
  .key span { font-size: 30px; }
  .note-left { left: 52px; } .note-right { right: 46px; }
  .margin-note { display: none; }
  .result { grid-template-columns: 60px 1fr; row-gap: 2px; gap: 16px; }
  .result img { grid-row: span 2; width: 60px; }
  .r-title { font-size: 18px; }
  .menubar { font-size: 8.5px; height: 18px; }
  .window-bar { height: 20px; }
  .window-bar span { display: none; }
  .island { top: 24px; padding: 4px 10px 4px 4px; gap: 8px; }
  .island img { width: 26px; height: 26px; }
  .island-title { font-size: 11px; }
  .chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .opening-words > *, .collage > * { opacity: 1; transform: rotate(var(--r, 0deg)); }
  .frame { inset: -4%; } .frame i { opacity: 1; }
  .reveal, .result, .stack-label { opacity: 1 !important; transform: none !important; }
  .mount.reveal { transform: rotate(1.4deg) !important; }
  .island { opacity: 1 !important; transform: translate(-50%, 0) !important; }
  .scribble { stroke-dashoffset: 0 !important; }
  .table-bracket, .table-note { opacity: 0.8 !important; stroke-dashoffset: 0 !important; }
  .chip { opacity: 1 !important; }
  .table .card { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--tr)) !important; }
}