/* aayla design system
   language: white editorial pages (ssense, farfetch, vogue) with apple-style frosted glass controls and spring motion.
   red is only a pop: a dot, a button, an active tab. no gradients on surfaces.
   layout: floating glass bar, floating glass tab capsule on phones, one column that opens up into more as you go. */

/* jost, served from aayla itself (sil open font license, see /assets/fonts/jost-OFL.txt): no third-party request, faster first paint */
@font-face { font-family: "Jost"; src: url("/assets/fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/jost-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "The Seasons"; src: url("/assets/fonts/the-seasons.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #FFFFFF;
  --bg-2: #F6F6F6;
  --tint: #EEF6F1;
  --fill: #F2F2F2;
  --surface: #FFFFFF;
  --ink: #0B0B0C;
  --ink-2: #3A3A3C;
  --muted: #6E6E73;
  --line: #EBEBEB;
  /* soft green: calm and alive, never loud. a pop never a surface. --pop is the version for always-dark pages. */
  --accent: #2E7D5B;
  --accent-press: #23664A;
  --accent-soft: rgba(46, 125, 91, .12);
  --accent-2: #8CC5A6;
  --pop: #5FBF8F;
  /* status: green is open, amber is a waitlist, red is sold out */
  --st-open: #34C759;
  --st-wait: #FF9F0A;
  --st-out: #FF3B30;
  --on-accent: #FFFFFF;
  /* frosted glass: hairline edge, one soft top highlight, a wide quiet shadow */
  --glass: rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .9);
  --glass-edge: rgba(11, 11, 12, .07);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-shade: 0 1px 2px rgba(11, 11, 12, .04), 0 .5rem 1.75rem -.75rem rgba(11, 11, 12, .14);
  --lift-shade: 0 1px 2px rgba(11, 11, 12, .05), 0 1rem 2.5rem -1.25rem rgba(11, 11, 12, .22);
  --cover: #F1F1F1;
  --cover-ink: rgba(11, 11, 12, .82);
  /* the inverted slab: dark on a light page, light on a dark page, so it never melts into the background */
  --inv: #0B0B0C;
  --inv-ink: #FFFFFF;
  --inv-cover: #1A1A1C;

  --f-display: "The Seasons", Georgia, serif;
  --f-body: "Jost", system-ui, sans-serif;
  --f-ui: "Jost", system-ui, sans-serif;
  --f-tight: "Jost", system-ui, sans-serif;
  --f-round: "Jost", system-ui, sans-serif;

  --gut: clamp(1rem, 4vw, 4.5rem);
  --wrap: min(100% - 2 * var(--gut), 112rem);
  --bar-h: 3.75rem;
  --tab-h: 3.4rem;
  --r-xl: 2rem;
  --r-lg: 1.375rem;
  --r-md: 1rem;
  --r-sm: .75rem;

  /* springs: close curves for browsers that can't draw the real ones (safari before 17.2) */
  --spring-bouncy: cubic-bezier(.34, 1.56, .64, 1);
  --spring-smooth: cubic-bezier(.22, 1, .36, 1);
  --spring-snappy: cubic-bezier(.3, 1.3, .5, 1);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
/* the real springs, sampled from spring physics, where the browser can draw them */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-bouncy: linear(0, 0.084, 0.2695, 0.5161, 0.7504, 0.9625, 1.1108, 1.2019, 1.2402, 1.2323, 1.192, 1.1378, 1.0801, 1.0251, 0.9845, 0.9564, 0.9436, 0.9422, 0.9496, 0.9617, 0.9764, 0.9897, 1.0006, 1.0086, 1.0129, 1.0141, 1.013, 1.0104, 1.0069, 1.0036, 1.0006, 0.9985, 0.9972, 0.9966, 0.9967, 0.9973, 0.998, 0.9989, 0.9996, 1.0002, 1);
    --spring-smooth: linear(0, 0.0269, 0.0902, 0.1758, 0.2729, 0.3736, 0.4613, 0.5546, 0.6396, 0.715, 0.7803, 0.8357, 0.8769, 0.915, 0.9453, 0.9688, 0.9865, 0.9994, 1.0075, 1.0136, 1.0172, 1.0189, 1.0193, 1.0187, 1.0175, 1.0158, 1.0139, 1.012, 1.0101, 1.0085, 1.0069, 1.0054, 1.0042, 1.0031, 1.0022, 1.0016, 1.001, 1.0006, 1.0002, 1, 1);
    --spring-snappy: linear(0, 0.0469, 0.1414, 0.2651, 0.4018, 0.539, 0.683, 0.7953, 0.8895, 0.9646, 1.0211, 1.0643, 1.0871, 1.0979, 1.0994, 1.0941, 1.0827, 1.0698, 1.0561, 1.0425, 1.03, 1.0178, 1.0089, 1.0019, 0.9967, 0.9932, 0.9909, 0.9901, 0.9902, 0.9908, 0.9921, 0.9934, 0.9948, 0.9961, 0.9973, 0.9985, 0.9993, 1, 1.0004, 1.0007, 1);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0B; --bg-2: #141416; --tint: #111A15; --fill: #1C1C1E; --surface: #141416; --ink: #F5F5F7; --ink-2: #D1D1D6; --muted: #8E8E93; --line: #26262A;
    --accent: #5FBF8F; --on-accent: #08140E; --accent-press: #7ACFA3; --accent-soft: rgba(95, 191, 143, .18); --accent-2: #A6DCC0; --st-open: #30D158; --st-wait: #FFB340; --st-out: #FF453A;
    --glass: rgba(30, 30, 34, .66); --glass-strong: rgba(30, 30, 34, .9); --glass-edge: rgba(255, 255, 255, .1); --glass-hi: rgba(255, 255, 255, .1);
    --glass-shade: 0 1px 2px rgba(0, 0, 0, .3), 0 .5rem 1.75rem -.75rem rgba(0, 0, 0, .6); --lift-shade: 0 1rem 2.5rem -1.25rem rgba(0, 0, 0, .8);
    --cover: #19191B; --cover-ink: rgba(255, 255, 255, .86);
    --inv: #F2F0EC; --inv-ink: #0B0B0C; --inv-cover: #E4E1DB;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A0B; --bg-2: #141416; --tint: #111A15; --fill: #1C1C1E; --surface: #141416; --ink: #F5F5F7; --ink-2: #D1D1D6; --muted: #8E8E93; --line: #26262A;
  --accent: #5FBF8F; --on-accent: #08140E; --accent-press: #7ACFA3; --accent-soft: rgba(95, 191, 143, .18); --accent-2: #A6DCC0; --st-open: #30D158; --st-wait: #FFB340; --st-out: #FF453A;
  --glass: rgba(30, 30, 34, .66); --glass-strong: rgba(30, 30, 34, .9); --glass-edge: rgba(255, 255, 255, .1); --glass-hi: rgba(255, 255, 255, .1);
  --glass-shade: 0 1px 2px rgba(0, 0, 0, .3), 0 .5rem 1.75rem -.75rem rgba(0, 0, 0, .6); --lift-shade: 0 1rem 2.5rem -1.25rem rgba(0, 0, 0, .8);
  --cover: #19191B; --cover-ink: rgba(255, 255, 255, .86);
    --inv: #F2F0EC; --inv-ink: #0B0B0C; --inv-cover: #E4E1DB;
  color-scheme: dark;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .28s var(--ease) both vt-out; }
::view-transition-new(root) { animation: .45s var(--ease) both vt-in; }
::view-transition-group(pc-cover) { animation-duration: .55s; animation-timing-function: var(--spring-smooth); }
@keyframes vt-out { to { opacity: 0; scale: .985; } }
@keyframes vt-in { from { opacity: 0; scale: 1.01; } }

html { background: var(--bg); font-size: clamp(15px, 0.3vw + 13.8px, 30px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--bg); color: var(--ink);
  font: 400 1rem/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  padding-bottom: calc(var(--tab-h) + 1.75rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 56rem) and (orientation: landscape) { body { padding-bottom: 0; } }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; width: 1.1rem; height: 1.1rem; flex: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* while something sits over the page (the opening, a sheet, a popup), the page under it can't be scrolled, phones included */
body.locked, html:has(> body.locked) { overflow: hidden; overscroll-behavior: none; }
/* a search brought into view stops just under the bar */
[data-search] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + 1rem); }
html.searching, html.searching body { overflow: hidden; overscroll-behavior: none; }

/* ---------- glass ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shade);
}
.glass-strong { background: var(--glass-strong); }

/* ---------- springs: things land with a little give, every time they come into view ---------- */
.spring { opacity: 0; translate: 0 1.6rem; scale: .985; transition: opacity .5s var(--ease), translate 1.15s var(--spring-bouncy), scale 1.15s var(--spring-bouncy); transition-delay: calc(var(--i, 0) * 50ms); }
.spring.in { opacity: 1; translate: 0 0; scale: 1; }
.lift { transition: scale .6s var(--spring-smooth), box-shadow .4s var(--ease); }
@media (hover: hover) { .lift:hover { scale: 1.02; } }
.lift:active { scale: .965; transition-duration: .2s; }
.tap { transition: scale .5s var(--spring-snappy), background-color .2s, color .2s; }
.tap:active { scale: .92; transition-duration: .12s; }
@media (hover: hover) { .tap:hover { scale: 1.04; } }
.jiggle { animation: jiggle .7s var(--spring-bouncy); }
@keyframes jiggle { 0% { scale: .82; } 100% { scale: 1; } }

/* ---------- type ---------- */
.display { font: 400 clamp(3rem, 1.6rem + 5.4vw, 8.6rem)/.9 var(--f-display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.h2 { font: 400 clamp(1.9rem, 1.35rem + 2vw, 3.6rem)/1 var(--f-ui); letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.h3 { font: 400 1rem/1.3 var(--f-body); margin: 0; }
.lede { font: 300 clamp(1.05rem, .98rem + .35vw, 1.35rem)/1.45 var(--f-body); margin: 0; max-width: 34ch; text-wrap: pretty; color: var(--ink-2); }
.meta { font: 400 .8125rem/1.4 var(--f-ui); color: var(--muted); margin: 0; }
.kicker { font: 400 .8125rem/1 var(--f-ui); letter-spacing: .02em; color: var(--muted); margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.kicker i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
.num { font-family: var(--f-tight); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.link { font: 400 .875rem var(--f-ui); display: inline-flex; align-items: center; gap: .35rem; }
.link svg { width: .9rem; height: .9rem; transition: translate .5s var(--spring-smooth); }
.link:hover svg { translate: 4px 0; }
/* "did you mean ...?": the fixed email is the thing to tap */
.email-fix { display: inline; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: .18em; padding: 0; overflow-wrap: anywhere; }

/* ---------- floating bar ---------- */
.bar { position: sticky; top: 0; z-index: 40; padding-top: calc(env(safe-area-inset-top, 0px) + .6rem); pointer-events: none; }
.bar-in { display: flex; align-items: center; gap: .75rem; height: var(--bar-h); }
.bar-in > * { pointer-events: auto; }
.wordmark { font: 400 1.95rem/1 var(--f-display); letter-spacing: -0.01em; padding: .3rem .9rem .45rem; border-radius: 999px; border: 1px solid transparent; transition: background .3s, box-shadow .3s, border-color .3s; }
.bar.scrolled .wordmark { background: var(--glass); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shade); }
.bar-actions { margin-left: auto; display: flex; gap: .4rem; }
/* small phones (older iphones, many androids at 360 wide, folding phones closed): the bar tightens so nothing spills off
   the side. on the narrowest, the $ steps aside (give stays in the menu and the footer). */
@media (max-width: 380px) {
  .bar-in { gap: .4rem; }
  .bar .wordmark { font-size: 1.7rem; padding-inline: .6rem; }
  .bar-actions { gap: .3rem; }
  .bar-actions .circle { width: 2.45rem; height: 2.45rem; }
  .demo-tag { margin-left: .2rem; padding: .25rem .5rem; }
}
@media (max-width: 330px) { .bar-give { display: none; } .bar .wordmark { font-size: 1.55rem; padding-inline: .45rem; } .gv-fan-card { width: 6.5rem; } .gv-fan { overflow-x: clip; } }
@media (max-width: 300px) { .bar-actions .circle { width: 2.2rem; height: 2.2rem; } .bar-actions { gap: .2rem; } .bar .wordmark { padding-inline: .3rem; } .demo-tag { display: none; } }
.circle { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; position: relative; }
/* the donate coin: a "$" that turns like a coin when you reach for it */
.bar-give span { font: 500 1.05rem/1 var(--f-ui); transition: rotate .8s var(--spring-bouncy); display: block; }
@media (hover: hover) { .bar-give:hover span { rotate: y 360deg; } }
.bar-give[aria-current="page"] { color: var(--accent); }
.circle .dot { position: absolute; top: .55rem; right: .55rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }

/* tips: the page softly blurs away, and the tips come one step at a time, each acted out on a tiny screen */
.tips:focus { outline: none; }
.tips { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem); overflow: auto; overscroll-behavior: contain;
  background: var(--bg); background: color-mix(in srgb, var(--bg) 0%, transparent); -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%);
  transition: background-color .6s var(--ease), -webkit-backdrop-filter .6s var(--ease), backdrop-filter .6s var(--ease); }
.tips.on { background: var(--bg); background: color-mix(in srgb, var(--bg) 45%, transparent); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.tips-in { position: relative; display: grid; gap: 1.4rem; width: min(100%, 27rem); opacity: 0; translate: 0 1.2rem; scale: .97; transition: opacity .45s var(--ease), translate .7s var(--spring-smooth), scale .7s var(--spring-smooth); }
.tips.on .tips-in { opacity: 1; translate: 0 0; scale: 1; transition-delay: .08s; }
.tips-top { display: grid; gap: .55rem; }
.tips-title { margin: 0; font: 400 clamp(1.3rem, 1.1rem + .8vw, 1.6rem)/1.15 var(--f-ui); color: var(--ink-2); }
.tips-dots { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .3rem; margin-top: .35rem; }
.tips-dots i { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.tips-dots i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; scale: 0 1; transition: scale .6s var(--ease); }
.tips-dots i.done::after, .tips-dots i.on::after { scale: 1 1; }
.tips-deck { display: grid; touch-action: pan-y; }
.tip-step { grid-area: 1 / 1; display: grid; align-content: start; gap: .7rem; opacity: 0; pointer-events: none; translate: calc(var(--dir, 1) * 2.2rem) 0; filter: blur(6px); transition: opacity .35s var(--ease), translate .6s var(--spring-smooth), filter .4s var(--ease); }
.tip-step[data-side="before"] { translate: -2.2rem 0; }
.tip-step[data-side="after"] { translate: 2.2rem 0; }
.tip-step.on { opacity: 1; pointer-events: auto; translate: 0 0; filter: none; transition-delay: .1s; }
.tip-big { margin: .4rem 0 0; font: 400 clamp(2rem, 1.6rem + 2vw, 2.8rem)/1 var(--f-ui); letter-spacing: -0.02em; }
.tip-line { margin: 0; font: 400 1rem/1.45 var(--f-ui); color: var(--ink-2); }
.tip-tries { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.tip-tries .chip { height: 2.2rem; padding: 0 .85rem; font-size: .8125rem; }
.tips-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tips-nav .circle:disabled { opacity: .3; }
.tips-nav .btn svg { width: .9rem; height: .9rem; margin-left: .45rem; }
.tips-hint { margin: 0; font: 400 .8125rem var(--f-ui); color: var(--muted); }
.tips-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; opacity: 0; scale: .6; transition: opacity .3s, scale .6s var(--spring-bouncy); }
.tips.on .tips-close { opacity: 1; scale: 1; transition-delay: .2s; }

/* the tiny screen: a glass card where a search types itself and the result plays out */
.td { position: relative; height: 12.5rem; padding: 1rem; border-radius: var(--r-xl); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shade); overflow: hidden; display: grid; align-content: start; gap: .85rem; }
.td-q { margin: 0; display: flex; align-items: center; gap: .55rem; height: 2.7rem; padding: 0 1rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font: 400 1rem var(--f-ui); box-shadow: 0 0 0 0 var(--accent-soft); transition: box-shadow .4s; }
.td-q svg { width: .95rem; height: .95rem; color: var(--muted); flex: none; }
.td-caret { width: 1.5px; height: 1.15rem; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.td.play .td-q { box-shadow: 0 0 0 3px var(--accent-soft); }
.td img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* say: three people rise up under the search */
.td-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.td-card { display: block; aspect-ratio: 4 / 5; max-height: 7.2rem; border-radius: var(--r-md); overflow: hidden; background: var(--cover); opacity: 0; translate: 0 1.2rem; scale: .9; transition: opacity .4s var(--ease), translate .7s var(--spring-bouncy), scale .7s var(--spring-bouncy); transition-delay: calc(var(--d, 0) * 110ms); }
.td-res .td-card { width: 100%; }
.td.play .td-card { opacity: 1; translate: 0 0; scale: 1; }
/* place: a map wakes up and the nickname becomes a real city */
.td-map { position: relative; height: 7.2rem; border-radius: var(--r-md); background-color: var(--fill); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 1.4rem 1.4rem; display: grid; place-items: center; }
.td-pin { position: relative; width: .9rem; height: .9rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); scale: 0; transition: scale .6s var(--spring-bouncy); }
.td-pin i { position: absolute; inset: -.6rem; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.td.play .td-pin { scale: 1; }
.td.play .td-pin i { animation: ping 1.8s ease-out .3s infinite; }
.td-chip { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .8rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font: 400 .8125rem var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.td-chip svg { width: .75rem; height: .75rem; color: var(--accent); }
.td-hit { position: absolute; left: .6rem; bottom: .6rem; opacity: 0; translate: 0 .6rem; transition: opacity .4s var(--ease) .35s, translate .6s var(--spring-bouncy) .35s; }
.td.play .td-hit { opacity: 1; translate: 0 0; }
/* detail: the details switch on one after another */
.td-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.td-chips .td-chip { transition: background .3s, color .3s, border-color .3s, scale .5s var(--spring-bouncy); transition-delay: calc(var(--d) * 260ms); }
.td.play .td-chips .td-chip { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.td.play .td-chips .td-chip:nth-child(3) { background: var(--bg); color: var(--ink-2); border-color: var(--line); }
/* typo: the wrong spelling gets a wavy line, and aayla answers with the right word */
.td-typo .td-q span { text-decoration: underline wavy transparent; text-underline-offset: .3rem; transition: text-decoration-color .3s; }
.td-typo.play .td-q span { text-decoration-color: var(--st-out); text-decoration-color: color-mix(in srgb, var(--st-out) 70%, transparent); }
.td-fix { margin: 0; justify-self: start; padding: .55rem .95rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 .9rem var(--f-ui); opacity: 0; translate: 0 .6rem; transition: opacity .4s var(--ease) .25s, translate .6s var(--spring-bouncy) .25s; }
.td.play .td-fix { opacity: 1; translate: 0 0; }
/* name: the person surfaces first, the letters you typed in bold */
.td-row { display: flex; align-items: center; gap: .8rem; padding: .6rem; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); opacity: 0; translate: 0 .8rem; transition: opacity .4s var(--ease), translate .7s var(--spring-bouncy); }
.td.play .td-row { opacity: 1; translate: 0 0; }
.td-face { width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; background: var(--cover); flex: none; }
.td-row b { display: block; font: 500 1rem var(--f-ui); }
.td-row small { display: block; font: 400 .8125rem var(--f-ui); color: var(--muted); }
/* save: the bookmark fills, and it flies up into the saved circle */
.td-plan { display: grid; gap: .35rem; }
.td-prow { display: flex; align-items: center; gap: .6rem; height: 2.1rem; padding: 0 .35rem 0 .7rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font: 400 .8125rem var(--f-ui); opacity: 0; translate: 0 .6rem; transition: opacity .4s var(--ease), translate .7s var(--spring-bouncy); transition-delay: calc(var(--d) * 160ms + .3s); }
.td-prow b { font: 500 .6875rem var(--f-ui); color: var(--accent); }
.td-pfaces { margin-left: auto; display: flex; }
.td-pfaces i { width: 1.5rem; height: 1.5rem; border-radius: 50%; overflow: hidden; background: var(--cover); box-shadow: 0 0 0 2px var(--bg); }
.td-pfaces i + i { margin-left: -.45rem; }
.td.play .td-prow { opacity: 1; translate: 0 0; }
.td-pick { height: 100%; display: flex; justify-content: center; align-items: center; gap: 1rem; }
.td-pk { display: grid; gap: .55rem; width: 6.2rem; }
.td-pk .td-card { width: 100%; max-height: 7.6rem; }
.td-bar { height: .45rem; border-radius: 999px; background: var(--fill); overflow: hidden; }
.td-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--muted); transition: width 1s var(--spring-smooth) .7s; }
.td-pk:first-child .td-bar i { background: var(--accent); }
.td.play .td-bar i { width: var(--w); }
.td-never .td-chip svg { color: var(--muted); }
.td-never .td-fix { font-size: .8125rem; }
.td-save { position: relative; height: 100%; display: grid; place-items: center; }
.td-one { position: relative; width: 7.6rem; max-height: none; opacity: 1; translate: 0 0; scale: 1; }
.td-mark { position: absolute; top: .4rem; right: .4rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--glass-strong); color: var(--ink); }
.td-mark svg, .td-bin svg { width: .9rem; height: .9rem; }
.td.play .td-mark { color: var(--accent); animation: pop .55s var(--spring-bouncy) .2s both; }
.td.play .td-mark path { fill: currentColor; transition: fill-opacity .3s .2s; }
.td-bin { position: absolute; top: 0; right: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); }
.td-bin::before { content: ""; position: absolute; width: .7rem; height: .7rem; border-radius: 2px; background: var(--accent); opacity: 0; }
.td.play .td-bin::before { animation: td-fly .8s cubic-bezier(.5, 0, .2, 1) .55s both; }
.td.play .td-bin { animation: catch .7s var(--spring-bouncy) 1.3s both; color: var(--accent); }
@keyframes td-fly { 0% { opacity: 0; translate: -6.2rem 4.3rem; scale: 1.2; } 15% { opacity: 1; } 100% { opacity: 0; translate: 0 0; scale: .4; } }
@media (min-width: 56rem) and (orientation: landscape) {
  .tips-in { width: 30rem; }
  .td { height: 13.5rem; }
  .tips-close { top: 1.5rem; right: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .tips, .tips-in, .tip-step { transition: none; } }
/* ---------- the menu: one glass button that stretches into the pill. the same piece of glass, never a swap ---------- */
.menu { position: fixed; z-index: 60; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + .9rem); translate: -50% 0; display: grid; place-items: end center; transition: translate .6s var(--spring-smooth), scale .6s var(--spring-smooth), opacity .4s var(--ease); }
.menu.tucked:not(.open) { translate: -50% .35rem; scale: .92; }
/* phones: out of sight until the first scroll, then it rises in */
.menu.waiting:not(.open) { translate: -50% calc(100% + 2rem + env(safe-area-inset-bottom, 0px)); opacity: 0; pointer-events: none; }
.menu-shell { position: relative; width: var(--mw, 8.5rem); height: var(--mh, 3.25rem); border-radius: 999px; overflow: hidden; transition: background-color .3s; }
.menu.ready .menu-shell { transition: width .6s var(--spring-snappy), height .6s var(--spring-snappy), background-color .3s; }
.menu.open .menu-shell { background: var(--glass-strong); }
.menu-btn { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 3.25rem; padding: 0 1.3rem 0 1.15rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .65rem; font: 400 .9375rem var(--f-ui); white-space: nowrap; transition: opacity .25s, scale .6s var(--spring-bouncy), filter .3s; }
.menu-ico { display: grid; gap: .3rem; width: 1.05rem; }
.menu-ico i { display: block; height: 1.5px; border-radius: 2px; background: currentColor; transition: width .5s var(--spring-bouncy); }
.menu-ico i:last-child { width: 62%; }
.menu-btn:hover .menu-ico i:last-child { width: 100%; }
.menu-here { color: var(--muted); }
.menu-here:not(:empty)::before { content: ""; display: inline-block; width: .3rem; height: .3rem; border-radius: 50%; background: var(--accent); margin: 0 .55rem .15rem 0; vertical-align: middle; }
.menu.open .menu-btn { opacity: 0; scale: .7; filter: blur(4px); pointer-events: none; }
.menu-pill { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; align-items: center; gap: .2rem; padding: .3rem; width: min(100vw - 2.5rem, 27rem); opacity: 0; filter: blur(6px); pointer-events: none; transition: opacity .2s, filter .35s; }
.menu.open .menu-pill { opacity: 1; filter: none; pointer-events: auto; transition-delay: .08s; }
.menu-links { position: relative; flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 3.6rem; }
.menu-lens { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px; pointer-events: none;
  /* a gray pane of glass resting over the page you're on */
  background: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 .4rem 1.1rem -.6rem rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); }
.menu-link:focus-visible { outline: none; }
.menu-glyph { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; font: 500 1.32rem/1 var(--f-ui); transition: scale .5s var(--spring-snappy); }
.menu-link:active .menu-glyph { scale: .8; }
.menu-link { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; gap: .15rem; border-radius: 999px; font: 500 .66rem var(--f-ui); color: var(--ink-2); opacity: 0; translate: 0 .5rem; scale: .7; transition: opacity .2s, translate .5s var(--spring-smooth), scale .5s var(--spring-smooth), color .2s; }
.menu.open .menu-link { opacity: 1; translate: 0 0; scale: 1; transition-delay: calc(var(--i) * 35ms + 120ms); }
.menu-link svg { width: 1.4rem; height: 1.4rem; transition: scale .5s var(--spring-snappy); }
.menu-link:active svg { scale: .8; }
.menu-link[aria-current="page"] { color: var(--accent); }
.menu-link .badge-count { position: absolute; top: .25rem; left: calc(50% + .45rem); min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 .6rem/1 var(--f-ui); display: grid; place-items: center; }
@media (min-width: 56rem) and (orientation: landscape) {
  .menu { top: calc(env(safe-area-inset-top, 0px) + 1.1rem); bottom: auto; place-items: start center; }
  .menu.tucked:not(.open) { translate: -50% 0; scale: 1; }
  .menu-shell { --mh: 2.75rem; }
  .menu-btn, .menu-pill { top: 0; bottom: auto; }
  .menu-btn { height: 2.75rem; font-size: .9rem; }
  .menu-pill { width: max-content; }
  .menu-links { display: flex; height: 2.4rem; }
  .menu-link { display: flex; padding: 0 1.05rem; font: 400 .9rem var(--f-ui); }
  .menu-link svg, .menu-link .menu-glyph { display: none; }
  .menu-link[aria-current="page"] { color: var(--ink); }
  .menu-link .badge-count { position: static; margin-left: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .menu.ready .menu-shell { transition: background-color .3s; } }

/* ---------- hero: one sentence, one search, and the people it finds turning past ---------- */
.hero { padding-block: clamp(1.5rem, 5vw, 4.5rem) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); justify-items: center; text-align: center; }
.hero .display { max-width: 13ch; font-size: clamp(3rem, 1.8rem + 4.2vw, 6.8rem); }
@media (min-width: 56rem) and (orientation: landscape) { .hero .display { max-width: 18ch; } .hero .lede { max-width: 44ch; } }
.hero .lede { margin-inline: auto; }
.hero .search { margin-inline: auto; }
/* the words sit on glass, so the people moving behind them never fight the headline */
.hero-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2.2vw, 1.75rem); justify-items: center; width: min(100%, 66rem); padding: clamp(2rem, 4.5vw, 4rem) clamp(1.5rem, 5vw, 5rem); border-radius: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--bg); background: color-mix(in srgb, var(--bg) 58%, transparent); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 2.5rem 5rem -2.5rem rgba(11, 11, 12, .28); }
.hero-short { display: none; }
.hero-show { display: none; }
.hero-card > * { max-width: 100%; }
/* phones, folds and tablets held upright: the headline leads, left aligned, one short line, then search */
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .hero { justify-items: stretch; text-align: left; }
  .hero-card { justify-items: start; width: 100%; padding: 1.6rem 1.25rem 1.25rem; border-radius: 1.75rem; }
  .hero .display { max-width: 11ch; margin: 0; font-size: clamp(2.5rem, 1rem + 7.2vw, 4.8rem); line-height: .94; }
  .hero-long { display: none; }
  .hero .hero-short { display: block; margin: 0; font-size: 1.02rem; }
  .hero .search { width: 100%; max-width: none; }
  /* the first screen on a phone: a search typing itself above a stack of the people it finds */
  .hero { padding-top: .25rem; gap: 0; overflow-x: clip; }
  .hero .mosaic { display: none; }
  /* tall enough that the card below never covers the front card's name, on any phone; it still overlaps the rest */
  .hero-show { display: grid; justify-items: center; gap: .9rem; height: max(clamp(17rem, 46vh, 26rem), calc(5.6rem + min(70vw, 18.75rem))); height: max(clamp(17rem, 46svh, 26rem), calc(5.6rem + min(70vw, 18.75rem))); padding-top: .5rem; perspective: 1100px; }
  .hs-q { display: inline-flex; align-items: center; gap: .5rem; height: 2.6rem; max-width: 92%; padding: 0 1.1rem; border-radius: 999px; margin: 0; font: 400 .95rem var(--f-ui); white-space: nowrap; overflow: hidden; }
  .hs-q svg { width: 1rem; height: 1rem; flex: none; color: var(--accent); }
  .hs-caret { width: 1.5px; height: 1.1rem; background: var(--accent); animation: blink 1s steps(1) infinite; }
  .hs-stack { position: relative; width: min(56vw, 15rem); aspect-ratio: 4 / 5; transform-style: preserve-3d; }
  .hs-card { position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--cover); box-shadow: var(--lift-shade);
    transform: translate(calc(var(--k, 0) * 1.4rem * var(--side, 1)), calc(var(--k, 0) * -.5rem)) rotate(calc(var(--k, 0) * 6deg * var(--side, 1))) scale(calc(1 - var(--k, 0) * .07)); z-index: calc(10 - var(--k, 0)); opacity: clamp(0, 3.6 - var(--k, 0), 1); transition: transform .9s var(--spring-bouncy), opacity .4s; }
  .hs-card:nth-child(even) { --side: -1; }
  .hs-card .cover { height: 100%; } .hs-card .cover .mono { font-size: 5rem; }
  .hs-card.deal { animation: hs-deal 1s var(--spring-bouncy) backwards; }
  @keyframes hs-deal { from { transform: translateY(70%) rotate(-12deg) scale(.8); opacity: 0; } }
  .hs-name { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; display: grid; gap: .05rem; padding: .55rem .75rem; border-radius: var(--r-md); font: 400 .75rem var(--f-ui); color: var(--ink-2); text-align: left; }
  .hs-name b { font: 400 1.05rem var(--f-ui); color: var(--ink); }
  .hs-found { position: absolute; top: .6rem; right: .6rem; padding: .25rem .6rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 .7rem var(--f-ui); opacity: 0; scale: .5; transition: opacity .3s, scale .6s var(--spring-bouncy); }
  .hs-card:last-child .hs-found { opacity: 1; scale: 1; transition-delay: .5s; }
  .hero-card { margin-top: -2.75rem; position: relative; z-index: 2; }
}
.hero-word { display: inline-block; animation: rise 1.1s var(--spring-bouncy) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
@keyframes rise { from { opacity: 0; translate: 0 .5em; } }

/* the flow: profile cards on a 3d turntable, each tagged with a search that finds them */
.flow-wrap { width: 100%; display: grid; gap: .9rem; justify-items: center; margin-top: clamp(.5rem, 2vw, 1.5rem); }
/* the turntable is a phone thing. on wide screens the hero breathes straight into explore */
@media (min-width: 56rem) and (orientation: landscape) { .flow-wrap { display: none !important; } .hero { padding-bottom: clamp(1rem, 3vw, 3rem); } }
.flow { position: relative; width: calc(100% + 2 * var(--gut)); margin-inline: calc(-1 * var(--gut)); height: clamp(22rem, 18rem + 14vw, 34rem); perspective: 1600px; perspective-origin: 50% 40%; touch-action: pan-y; overflow: hidden; padding-block: 1.5rem; }
.flow-card { position: absolute; left: 50%; top: 1.5rem; width: clamp(12.5rem, 10rem + 9vw, 19rem); margin-left: calc(clamp(12.5rem, 10rem + 9vw, 19rem) / -2); transform-style: preserve-3d; transition: transform 1s var(--spring-smooth), opacity .6s var(--ease), filter .6s var(--ease); will-change: transform; cursor: pointer; }
/* while a finger drags, the cards follow it exactly; the spring only plays when it lets go */
.flow.dragging .flow-card { transition: none; }
.flow-card .cover { aspect-ratio: 4 / 5; border-radius: var(--r-lg); box-shadow: var(--lift-shade); }
.flow-card .pc-body { padding-top: .7rem; text-align: left; }
.flow-q { position: absolute; z-index: 2; left: .6rem; right: .6rem; top: .6rem; display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: var(--r-sm); font: 400 .75rem/1.25 var(--f-ui); text-align: left; }
.flow-q svg { width: .8rem; height: .8rem; color: var(--accent); }
.flow-q span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-label { display: inline-flex; align-items: center; gap: .5rem; }
.flow-label svg { width: .8rem; height: .8rem; color: var(--accent); }
.flow:focus-visible { outline-offset: -2px; }
.flow-card:not(.on) a, .flow.dragging a { pointer-events: none; }
.flow-card .pc-body { opacity: 0; transition: opacity .4s var(--ease); }
.flow-card.on .pc-body { opacity: 1; }

/* ---------- search ---------- */
.search { position: relative; width: 100%; max-width: 44rem; text-align: left; }
.search-row { display: flex; align-items: center; gap: .5rem; }
.search-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: .55rem; height: 3.75rem; padding: 0 .45rem 0 1.25rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11, 11, 12, .04), 0 .75rem 2rem -1.25rem rgba(11, 11, 12, .25); transition: box-shadow .4s var(--ease), border-color .3s, scale .6s var(--spring-smooth); }
/* nothing around a focused search box moves, scales or blurs: iphone browsers draw the cursor where the box was before it moved */
.search-field:focus-within { -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; border-width: 1.5px; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--ring, 0deg), var(--accent), var(--accent-2), var(--line) 30%, var(--line) 70%, var(--accent)) border-box; animation: ring-spin 4s linear infinite; box-shadow: 0 0 0 4px var(--accent-soft), 0 .75rem 2rem -1.25rem rgba(11, 11, 12, .3); }
.search-field > svg { color: var(--ink); }
.search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 max(16px, 1.05rem)/1 var(--f-body); position: relative; z-index: 1; }
.search-field input::placeholder { color: var(--muted); }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ghost { position: absolute; z-index: 0; pointer-events: none; white-space: pre; color: var(--muted); opacity: .6; }
.ghost kbd { font: 500 .62rem var(--f-ui); color: var(--muted); border: 1px solid var(--line); border-radius: .35rem; padding: .05rem .3rem; margin-left: .4rem; vertical-align: .15em; }
.search-go { flex: none; width: 2.85rem; height: 2.85rem; border-radius: 50%; display: grid; place-items: center; }
.search-go { border-radius: var(--r-sm); color: var(--ink); overflow: hidden; transition: color .25s var(--ease); }
.search-go svg { width: 1.3rem; height: 1.3rem; }
.search-go:hover, .search-go:focus-visible { color: var(--accent); }
.search-go:hover svg, .search-go:focus-visible svg { animation: go-loop .55s var(--ease); }
.search-field.typing { animation-duration: 1.1s; box-shadow: 0 0 0 4px var(--accent-soft), 0 0 2.6rem -.6rem var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 2.6rem -.6rem color-mix(in srgb, var(--accent) 60%, transparent); }
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ring-spin { to { --ring: 360deg; } }
.search-field:focus-within .search-go svg { translate: .12rem 0; transition: translate .5s var(--spring-snappy); }
@keyframes go-loop { 45% { translate: 1.4rem 0; opacity: 0; } 46% { translate: -1.4rem 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes pulse { 50% { scale: 1.12; } }
.search-cancel { display: none; font: 400 .9375rem var(--f-ui); color: var(--accent); padding: 0 .3rem; }
.suggest { display: none; }
.search.open .suggest:not(:empty) { display: grid; }
.suggest { position: absolute; top: calc(100% + .6rem); left: 0; right: 0; z-index: 50; color: var(--ink); border-radius: var(--r-lg); padding: .5rem; gap: .1rem; max-height: min(70vh, 36rem); overflow: auto; transform-origin: top center; animation: drop-in .22s var(--ease); }
/* no fade on glass: a fading blur is drawn late on iphones, so the panel only drops into place */
@keyframes drop-in { from { scale: .98; translate: 0 -.3rem; } }
@keyframes pop-in { from { opacity: 0; scale: .96; translate: 0 -.4rem; } }
.understood { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: .45rem .55rem; font: 400 .8125rem var(--f-ui); color: var(--muted); }
.token { display: inline-flex; align-items: center; gap: .3rem; height: 1.7rem; padding: 0 .65rem; border-radius: 999px; background: var(--fill); color: var(--ink); font: 400 .8125rem var(--f-ui); animation: jiggle .6s var(--spring-bouncy); }
.token svg { width: .8rem; height: .8rem; color: var(--accent); }
.s-row { display: flex; align-items: center; gap: .75rem; padding: .5rem .6rem; border-radius: var(--r-sm); transition: background .2s; }
.s-row:hover, .s-row.active { background: var(--fill); }
.s-row .s-ico { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--ink-2); flex: none; }
.s-row .s-ico svg { width: 1rem; height: 1rem; }
.s-row .cover { width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none; }
.s-row .cover .mono { font-size: 1rem; }
.s-body { min-width: 0; display: grid; }
.s-body b { font-weight: 700; }
.s-count { margin-left: auto; font: 400 .9rem var(--f-tight); color: var(--muted); white-space: nowrap; }
.s-why { color: var(--accent); }
.s-plan { background: var(--tint); border-radius: var(--r-md); margin: .2rem 0 .3rem; }
.s-plan > svg { width: .9rem; height: .9rem; margin-left: auto; color: var(--accent); flex: none; }
.s-faces { display: flex; flex: none; }
.s-faces .cover { width: 2rem; height: 2rem; aspect-ratio: auto; border-radius: 50%; box-shadow: 0 0 0 2px var(--tint); }
.s-faces .cover + .cover { margin-left: -.7rem; }
.s-faces .mono { font-size: .8rem; }
.s-head { padding: .6rem .6rem .2rem; font: 400 .75rem var(--f-ui); color: var(--muted); margin: 0; }
.s-all { display: flex; justify-content: space-between; align-items: center; padding: .7rem .6rem .45rem; margin-top: .2rem; border-top: 1px solid var(--line); font: 400 .875rem var(--f-ui); }
.s-all svg { color: var(--accent); }
/* phones and tablets held upright: the open search becomes a full-screen sheet. the same rule as NARROW in core.js, so the box
   is never moved without its sheet styles (that left it at the bottom of the page on big upright screens) */
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .search.open:not(.inline) { position: fixed; inset: var(--vv-top, 0px) 0 auto 0; height: var(--vv-h, 100%); z-index: 60; max-width: none; padding: calc(env(safe-area-inset-top, 0px) + .75rem) 1rem 1rem; display: flex; flex-direction: column; gap: .75rem; }
  .search.open:not(.inline)::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg); background: color-mix(in srgb, var(--bg) 58%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); }
  /* the blur is there the moment the sheet opens. only what sits on it fades in: fading the sheet itself makes
     iphones draw the blur late, after the fade */
  .search.open:not(.inline) > * { animation: sheet .16s var(--ease) both; }
  @keyframes sheet { from { opacity: 0; translate: 0 -.25rem; } }
  .search.open:not(.inline) .search-field { height: 3.1rem; box-shadow: none; }
  .search.open:not(.inline) .search-go { width: 2.3rem; height: 2.3rem; }
  .search.open:not(.inline) .search-cancel { display: block; }
  .search.open:not(.inline) .suggest { position: static; border: 0; box-shadow: none; background: transparent; padding: 0; max-height: none; flex: 1; align-content: start; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* chips, rails and tool rows scroll sideways with room above and below, so nothing gets cut off */
.chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin: -1rem calc(-1 * var(--gut)); padding: 1rem var(--gut); scroll-padding-inline: var(--gut); scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 56rem) and (orientation: landscape) { .chips.wrapping { flex-wrap: wrap; justify-content: center; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .45rem; height: 2.4rem; padding: 0 1.05rem; border-radius: 999px; font: 400 .875rem var(--f-ui); white-space: nowrap; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: var(--glass-edge); border: 1px solid transparent; }
.chip svg { width: .85rem; height: .85rem; color: var(--accent); }
.chip.on { background: var(--ink); color: var(--bg); }
.chip .num { color: var(--muted); }
.pop-in { animation: pop-in .6s var(--spring-bouncy) both; animation-delay: calc(var(--i, 0) * 30ms); }
.chip.line { background: transparent; border-color: var(--line); }

/* ---------- sections ---------- */
.section { padding-block: clamp(3.5rem, 7vw, 8rem) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.section-head .h2 { max-width: 18ch; }
.section-note { margin-top: .6rem; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(66%, 18rem); gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: -1rem calc(-1 * var(--gut)); padding: 1rem var(--gut) 1.5rem; scroll-padding-inline: var(--gut); overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 72rem) { .rail { grid-auto-columns: 19rem; } }

/* ---------- covers: a photo, or the person's initials on quiet grey ---------- */
.cover { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--cover); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--spring-smooth); }
.cover .mono { font: 400 clamp(3.4rem, 2.6rem + 3vw, 6rem)/1 var(--f-display); letter-spacing: -0.03em; color: var(--cover-ink); transition: scale .9s var(--spring-smooth); }

/* ---------- profile card ---------- */
.matrix { display: grid; gap: 1.8rem .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 1.1rem; } }
@media (min-width: 72rem) { .matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 120rem) { .matrix { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pc { position: relative; min-width: 0; display: grid; gap: .7rem; align-content: start; }
.pc-media { display: block; border-radius: var(--r-lg); overflow: hidden; }
.pc-media .cover { aspect-ratio: 4 / 5; border-radius: inherit; }
/* hover: the second photo fades in, or a quiet panel says what they do */
.pc-media { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--spring-smooth); }
.pc-media::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .28), transparent 55%); opacity: 0; transition: opacity .4s; pointer-events: none; }
@media (hover: hover) { .pc:hover .pc-media::after { opacity: 1; } }
.pc-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease), scale .9s var(--spring-smooth); scale: 1.06; }
.pc-peek { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; display: grid; gap: .2rem; padding: .7rem .8rem; border-radius: var(--r-md); background: var(--glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 400 .8125rem/1.35 var(--f-body); color: var(--ink); opacity: 0; translate: 0 .8rem; transition: opacity .3s var(--ease), translate .6s var(--spring-smooth); pointer-events: none; }
.pc-peek span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-peek b { font: 400 .75rem var(--f-tight); letter-spacing: .04em; color: var(--accent); }
.pc-peek:has(span:empty):not(:has(b)) { display: none; }
@media (hover: hover) {
  .pc:hover .cover img, .pc:hover .cover .mono { scale: 1.05; }
  .pc:hover .pc-alt { opacity: 1; scale: 1; }
  .pc:hover .pc-media:not(:has(.pc-alt)) .pc-peek { opacity: 1; translate: 0 0; }
  .pc:hover .pc-cat { color: var(--ink); font-weight: 500; }
  .pc:hover .pc-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
.pc-cat { transition: color .25s; }
.pc-body { display: grid; gap: .1rem; padding-inline: .15rem; min-width: 0; }
.pc-cat { font: 400 .75rem var(--f-ui); color: var(--muted); margin: 0; display: flex; align-items: center; gap: .4rem; }
/* open status: taking clients, waitlist, sold out. a small dot, never a banner */
.od { flex: none; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); }
.od-open { background: var(--st-open); box-shadow: 0 0 0 3px var(--st-open); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-open) 18%, transparent); }
.od-wait { background: var(--st-wait); box-shadow: 0 0 0 3px var(--st-wait); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-wait) 18%, transparent); }
.od-out { background: var(--st-out); box-shadow: 0 0 0 3px var(--st-out); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-out) 16%, transparent); }
.od-icon { width: 1rem; height: 1rem; display: inline-grid; place-items: center; background: none !important; box-shadow: none !important; color: var(--muted); }
.od-icon.od-open { color: var(--st-open); } .od-icon.od-wait { color: var(--st-wait); } .od-icon.od-out { color: var(--st-out); }
.od-icon svg { width: 100%; height: 100%; }
.od-open:not(.od-icon) { animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 6px transparent; } }
.pc-sym { position: absolute; z-index: 2; top: .6rem; left: .6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: rotate .7s var(--spring-bouncy), scale .5s var(--spring-bouncy); pointer-events: none; }
.pc-sym svg { width: 1.05rem; height: 1.05rem; }
.pc:hover .pc-sym { rotate: -14deg; scale: 1.12; }
[data-density="5"] .pc-sym, [data-density="4"] .pc-sym { display: none; }
.pc-vouch { font: 400 .6875rem var(--f-ui); color: var(--ink-2); display: inline-flex; align-items: center; gap: .3rem; }
.pc-vouch::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: conic-gradient(var(--accent) 0 70%, var(--accent-soft) 0); }
.open-pill { display: inline-flex; align-items: center; gap: .5rem; margin: .7rem 0 0; font: 400 .8125rem var(--f-ui); color: var(--ink-2); }
.pf-sub a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.pf-sub a:hover { text-decoration-color: currentColor; }
.pc-name { font: 400 1rem/1.3 var(--f-body); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-place { font: 300 .875rem/1.3 var(--f-body); color: var(--ink-2); margin: 0; }
.pc-away { color: var(--muted); white-space: nowrap; }
.pc-biz { margin: -.05rem 0 .05rem; font: 400 .8125rem/1.3 var(--f-ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-why { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.pc-why span { font: 400 .6875rem var(--f-ui); color: var(--ink-2); background: var(--fill); border-radius: 999px; padding: .15rem .55rem; }
.pc-why span::before { content: ""; display: inline-block; width: .3rem; height: .3rem; border-radius: 50%; background: var(--accent); margin-right: .35rem; vertical-align: .1em; }
.pc-test { font: 400 .6875rem var(--f-ui); color: var(--muted); }
.save { position: absolute; z-index: 2; top: .6rem; right: .6rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.save[aria-pressed="true"] { color: var(--accent); }
.save[aria-pressed="true"] path { fill: currentColor; }
.save.pop { animation: pop .55s var(--spring-bouncy); }
.save[aria-pressed="true"].pop path { animation: save-fill .5s var(--ease); }
@keyframes save-fill { from { fill-opacity: 0; } }
.save-ghost { position: fixed; z-index: 200; width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; display: grid; place-items: center; color: var(--accent); pointer-events: none; animation: save-fly .75s cubic-bezier(.5, 0, .2, 1) both; }
.save-ghost svg { width: 1rem; height: 1rem; }
@keyframes save-fly { 0% { translate: 0 0; scale: 1; opacity: 0; } 15% { opacity: 1; scale: 1.4; } 60% { translate: calc(var(--dx) * .55) calc(var(--dy) * .55 - 3rem); } 100% { translate: var(--dx) var(--dy); scale: .5; opacity: .9; } }
[data-saved-target] { position: relative; }
[data-saved-target].catch { animation: catch .7s var(--spring-bouncy); }
[data-saved-target].catch::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: ping .8s ease-out both; pointer-events: none; }
[data-saved-target].catch svg { color: var(--accent); }
[data-saved-target].catch path { fill: currentColor; }
[data-saved-target].drop { animation: drop .5s var(--ease); }
@keyframes catch { 0% { scale: 1; } 30% { scale: 1.28; } 60% { scale: .92; } 100% { scale: 1; } }
@keyframes drop { 25% { rotate: -10deg; } 50% { rotate: 8deg; } 75% { rotate: -4deg; } }
@keyframes pop { 0% { scale: .6; } 100% { scale: 1; } }
.pc-featured .pc-cat { color: var(--accent); }

/* ---------- explore: rows of people, like a streaming app ---------- */
.xg { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 4vw, 3.5rem); }
.xr-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .9rem; }
.xr-title { margin: 0; font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem)/1 var(--f-ui); letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: .55rem; }
.xr-title i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); align-self: center; }
.xr-title .num { font-size: .55em; color: var(--muted); }
.xr-head .meta { flex-basis: 100%; order: 3; }
.xr-head .link { margin-left: auto; }
.xr-rail { grid-auto-columns: min(42%, 13rem); min-height: 14rem; }
@media (min-width: 56rem) and (orientation: landscape) { .xr-rail { grid-auto-columns: 14.5rem; } }
@media (min-width: 100rem) { .xr-rail { grid-auto-columns: 16rem; } }
.xr-head .kicker { flex-basis: 100%; margin-bottom: .2rem; }
/* curated lists sit on their own soft panel so they read as picked, not sorted */
.xr-list { padding: clamp(1.1rem, 3vw, 2rem); margin-inline: calc(-1 * min(var(--gut), 1rem)); border-radius: var(--r-xl); background: var(--bg-2); }
.xr-list.xr-tint { background: var(--tint); }
.xr-list .xr-title { font-size: clamp(1.8rem, 1.3rem + 2vw, 3.2rem); }
.near-ask { display: grid; gap: .8rem; justify-items: start; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-xl); border: 1px dashed var(--line); }
.near-copy { margin: 0; font: 300 1.05rem/1.45 var(--f-body); color: var(--ink-2); max-width: 36ch; }
.near-ask .chips { margin-block: -.5rem -.75rem; max-width: 100%; }
.near-ask .btn svg { color: currentColor; }
.xr-more { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
.xr-all { justify-self: center; }

/* ---------- the mosaic behind the headline ---------- */
.hero { position: relative; isolation: isolate; }
.mosaic { position: absolute; z-index: -1; left: 50%; translate: -50% 0; top: calc(-1 * var(--bar-h) - 1rem); width: 100vw; height: calc(100% - 22rem); min-height: 34rem; display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: .7rem; padding-inline: .35rem; overflow: hidden; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.mosaic.on { opacity: .9; }
.m-col { display: grid; gap: .7rem; align-content: start; animation: drift 50s linear infinite; }
@keyframes drift { to { translate: 0 calc(-50% - .35rem); } }
.m-tile .cover { aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.m-tile .cover .mono { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }
@media (prefers-reduced-motion: reduce) { .m-col { animation: none; } }

/* ---------- featured: plain, dark, editorial ---------- */
.featured { border-radius: var(--r-xl); background: var(--inv); color: var(--inv-ink); }
.featured-in { display: grid; gap: 1.25rem; padding: clamp(1.75rem, 5vw, 5rem); }
/* with a photo, the card is always dark: the photo fills it and the words sit on a shadow at the bottom (left on wide screens) */
.featured.has-photo { --inv: #0B0B0C; --inv-ink: #FFFFFF; position: relative; overflow: hidden; isolation: isolate; background: var(--inv); }
.featured-photo { position: absolute; left: 0; top: 0; z-index: -2; width: 100%; height: 66%; object-fit: cover; object-position: 50% 30%; }
.featured.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(11, 11, 12, 0) 30%, #0B0B0C 64%); }
.featured.has-photo .featured-in { min-height: clamp(34rem, 150vw, 44rem); align-content: end; }
@media (min-width: 56rem) and (orientation: landscape) {
  .featured-photo { left: 38%; width: 62%; height: 100%; object-position: 50% 30%; }
  .featured.has-photo::before { background: linear-gradient(to right, #0B0B0C 38%, rgba(11, 11, 12, .6) 55%, rgba(11, 11, 12, 0) 80%); }
  .featured.has-photo .featured-in { min-height: 34rem; grid-template-columns: minmax(0, 1fr); max-width: 42rem; }
}
@media (min-width: 56rem) and (orientation: landscape) { .featured-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: 4rem; } }
.featured-label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font: 400 .8125rem var(--f-ui); color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 70%, transparent); margin: 0; grid-column: 1 / -1; }
.featured-label b { font-weight: 400; color: var(--inv-ink); }
.featured-label i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--pop); }
.featured-name { font: 400 clamp(3.2rem, 2rem + 5vw, 8.5rem)/.86 var(--f-display); letter-spacing: -0.03em; margin: .4rem 0 0; }
.featured-side { display: grid; gap: 1.1rem; justify-items: start; }
.featured-side p { margin: 0; color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 70%, transparent); font-weight: 300; font-size: 1.1rem; max-width: 34ch; }

/* ---------- cta ---------- */
/* who did your ___? */
.nom { display: grid; gap: 1.1rem; justify-items: stretch; padding: clamp(2rem, 5vw, 4.5rem); border-radius: var(--r-xl); border: 1px solid var(--line); }
.nom-title { margin: 0; font: 400 clamp(2.2rem, 1.5rem + 3vw, 4.6rem)/1.02 var(--f-ui); letter-spacing: -0.02em; text-wrap: balance; }
.nom-blank { display: inline-block; min-width: 2.5ch; padding: 0 .08em; border-bottom: .06em solid var(--accent); line-height: .95; }
.nom .lede { max-width: 38ch; }
.nom-copy { display: grid; gap: 1.1rem; justify-items: start; }
.nom-stage { display: none; }
@media (min-width: 56rem) and (orientation: landscape) {
  .nom { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 3rem; padding-block: clamp(2.5rem, 5vw, 5rem); overflow: hidden; }
  .nom-stage { display: grid; place-items: center; height: clamp(24rem, 32vw, 30rem); perspective: 1400px; cursor: pointer; }
  .nom-stack { position: relative; width: clamp(13rem, 17vw, 16.5rem); aspect-ratio: 4 / 5.6; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--spring-smooth); }
  .nom-card { position: absolute; inset: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .7rem; padding: .6rem .6rem .9rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--lift-shade);
    transform: translate3d(calc(var(--k, 0) * 1.6rem), calc(var(--k, 0) * -.9rem), calc(var(--k, 0) * -60px)) rotate(calc(var(--k, 0) * 4deg - 3deg)); opacity: calc(1 - var(--k, 0) * .22);
    transition: transform .9s var(--spring-bouncy), opacity .5s; animation: deal .9s var(--spring-bouncy) backwards; }
  .nom-card .cover { border-radius: calc(var(--r-lg) - .4rem); height: 100%; }
  .nom-card figcaption { display: grid; gap: .1rem; font: 400 .8125rem/1.3 var(--f-ui); color: var(--muted); padding-inline: .3rem; }
  .nom-card .nom-q { color: var(--accent); }
  .nom-card b { font: 400 1.35rem/1.1 var(--f-ui); color: var(--ink); }
  .nom-card.gone { animation: undeal .6s var(--ease) forwards; }
  @keyframes deal { from { opacity: 0; transform: translate3d(-4rem, 3rem, 80px) rotate(-14deg) scale(.85); } }
  @keyframes undeal { to { opacity: 0; transform: translate3d(5rem, -3rem, -200px) rotate(18deg) scale(.8); } }
}
.nom-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.25rem; color: var(--ink-2); }
.nom-link svg { width: .85rem; height: .85rem; color: var(--accent); }
/* nobody yet? we'll find them */
.ask { display: grid; gap: .9rem; max-width: 40rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-xl); margin-bottom: 2rem; }
.ask-title { margin: 0; font: 400 clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem)/1.08 var(--f-ui); letter-spacing: -0.01em; }
.ask-row { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .ask-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ask .answer-row { align-items: center; gap: 1rem; }
.ask.ask-thin { max-width: 52rem; margin-top: 1.5rem; gap: 1rem; grid-template-rows: none; }
.ask-thin .ask-title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.ask-thin-copy { display: grid; gap: .5rem; }
.ask-thin-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.ask-thin-row .f-label { flex: 1 1 14rem; }
.ask-thin .form-msg:empty { display: none; }
.ask-thin-nom { max-width: 52rem; margin: .9rem 0 0; padding-inline: .25rem; font: 400 .875rem var(--f-ui); color: var(--muted); }
.ask-thin-nom .link { font: inherit; color: var(--ink); }
.tries { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.tries .group-head { margin: 0; }
.tries-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tries-row .chip svg { width: 1em; height: 1em; opacity: .6; }
.cta { display: grid; gap: 1.25rem; justify-items: start; padding: clamp(2rem, 5vw, 5rem); border-radius: var(--r-xl); background: var(--tint); }
.cta .h2 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 5.4rem); max-width: 12ch; }
.cta p { margin: 0; max-width: 36ch; font-weight: 300; font-size: 1.1rem; color: var(--ink-2); }

/* ---------- buttons ---------- */
.btn { height: 3rem; padding: 0 1.35rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; font: 400 .9375rem var(--f-ui); white-space: nowrap; transition: scale .5s var(--spring-snappy), background .2s, opacity .2s; }
.btn:active { scale: .95; transition-duration: .12s; }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn svg { width: 1rem; height: 1rem; }
.btn { position: relative; overflow: hidden; isolation: isolate; }
/* buttons are glass too: tinted, blurred, with a light edge, and a shine that sweeps across on hover */
.btn-ink { background: var(--ink); background: color-mix(in srgb, var(--ink) 86%, transparent); color: var(--bg); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 var(--bg), 0 .7rem 1.6rem -.9rem var(--ink); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg) 22%, transparent), 0 .7rem 1.6rem -.9rem color-mix(in srgb, var(--ink) 70%, transparent); }
.btn::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, transparent 35%, var(--bg) 50%, transparent 65%); background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--bg) 28%, transparent) 50%, transparent 65%); translate: -120% 0; transition: translate .8s var(--ease); pointer-events: none; }
.btn-soft::after { background: linear-gradient(105deg, transparent 35%, var(--surface) 50%, transparent 65%); background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 65%); }
@media (hover: hover) { .btn:hover::after { translate: 120% 0; } }
.btn-light { background: #fff; color: #0B0B0C; }
.featured .btn-light, .spot-house .btn-light, .give .btn-light { background: var(--inv-ink); color: var(--inv); }
.btn-soft { background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 var(--glass-hi); }
.btn-sm { height: 2.2rem; padding: 0 .95rem; font-size: .8125rem; }

/* ---------- discover: one centered axis. title, a dock that follows you, faces to jump into, then people ---------- */
.disc { padding-bottom: 3rem; }
.disc-hero { display: grid; justify-items: center; text-align: center; gap: .6rem; padding-block: clamp(1rem, 4vw, 3rem) 1rem; }
.disc-title { font-size: clamp(3rem, 1.8rem + 5vw, 7rem); }
.disc-dock { position: sticky; z-index: 20; top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + .9rem); width: var(--wrap); max-width: 50rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.dock-in { display: flex; align-items: center; gap: .5rem; }
.dock-in .search { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
.dock-refine { position: relative; flex: none; height: 3.75rem; padding: 0 1.25rem; display: inline-flex; align-items: center; gap: .55rem; border-radius: 999px; background: var(--glass-strong); color: var(--ink); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); font: 400 .9375rem var(--f-ui); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shade); }
.dock-refine svg { width: 1.2rem; height: 1.2rem; transition: rotate .6s var(--spring-bouncy); }
.dock-refine:hover svg { rotate: 90deg; }
.dock-refine b { position: absolute; top: -.25rem; right: -.25rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 600 .7rem/1 var(--f-ui); box-shadow: 0 0 0 2px var(--bg); animation: jiggle .55s var(--spring-bouncy); }
.dock-active { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; }
.dock-active .chip { height: 2.1rem; padding: 0 .55rem 0 .9rem; background: var(--glass-strong); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--glass-shade); }
.dock-active .chip svg { width: .7rem; height: .7rem; color: var(--muted); }
.dock-active .link { font-size: .8125rem; color: var(--muted); padding: 0 .4rem; }
@media not all and (min-width: 40rem) { .dock-refine { width: 3.75rem; padding: 0; justify-content: center; } .dock-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* faces to jump into: recent searches, then worlds, each with someone real in it */
.disc-lens { display: grid; gap: .5rem; padding-top: 1.4rem; }
.lens-row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .4rem max(var(--gut), calc((100% - 112rem) / 2)); scroll-padding-inline: var(--gut); scroll-snap-type: x proximity; }
.lens-row::-webkit-scrollbar { display: none; }
.lens-row[hidden] { display: none; }
@media (min-width: 72rem) { .lens-row { justify-content: safe center; } }
.bubble { --bs: clamp(4.6rem, 4rem + 2vw, 6rem); flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: .45rem; width: var(--bs); font: 400 .75rem/1.2 var(--f-ui); color: var(--ink-2); text-align: center; }
/* a set width and height, never a ratio: some phone browsers stretch a ratio box inside a grid into an oval */
.bubble-ring { position: relative; width: var(--bs); height: var(--bs); flex: none; border-radius: 50%; padding: 3px; background: var(--bg); box-shadow: 0 0 0 1.5px var(--line); transition: box-shadow .3s, scale .6s var(--spring-bouncy); }
.bubble-ring .cover { position: absolute; inset: 3px; width: auto; height: auto; aspect-ratio: auto; border-radius: 50%; }
.bubble-ring .cover .mono { font-size: 1.6rem; }
.bubble:hover .bubble-ring, .bubble:focus-visible .bubble-ring { box-shadow: 0 0 0 2px var(--accent); scale: 1.06; }
.bubble-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* results: a grid that fits whatever screen it's on. density picks the smallest card; the screen decides how many fit */
.disc-results { padding-top: .75rem; container-type: inline-size; }
.disc-results .matrix { --min: 12.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min)), 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem) clamp(.6rem, 1.4vw, 1.1rem); gap: clamp(1.4rem, 3cqi, 2.6rem) clamp(.6rem, 1.4cqi, 1.1rem); transition: gap .4s var(--ease); }
[data-density="1"] .matrix { --min: 24rem; }
[data-density="2"] .matrix { --min: 17rem; }
[data-density="4"] .matrix { --min: 9.5rem; }
[data-density="5"] .matrix { --min: 7rem; }
@container (max-width: 40rem) {
  .disc-results .matrix { --min: 9.5rem; }
  [data-density="1"] .matrix { --min: 100%; }
  [data-density="2"] .matrix { --min: 12rem; }
  [data-density="4"] .matrix { --min: 6.5rem; }
  [data-density="5"] .matrix { --min: 4.8rem; }
}
[data-density="4"] .pc-biz, [data-density="5"] .pc-biz, [data-density="4"] .pc-place, [data-density="4"] .pc-why, [data-density="4"] .pc-test, [data-density="5"] .pc-place, [data-density="5"] .pc-why, [data-density="5"] .pc-test, [data-density="5"] .pc-cat { display: none; }
[data-density="4"] .pc-name, [data-density="5"] .pc-name { font-size: .8125rem; }
[data-density="4"] .save, [data-density="5"] .save { width: 2rem; height: 2rem; top: .35rem; right: .35rem; }
[data-density="5"] .save { display: none; }
[data-density="4"] .cover .mono { font-size: 2.2rem; } [data-density="5"] .cover .mono { font-size: 1.6rem; }
[data-density="4"] .pc-media, [data-density="5"] .pc-media { border-radius: var(--r-md); }
[data-density="4"] .pc-peek, [data-density="5"] .pc-peek { display: none; }
.view-set { display: grid; gap: .8rem; padding-top: 1.25rem; }
.seg-sort button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 .3rem .8rem -.4rem rgba(0, 0, 0, .2); }
.seg-sort button { transition: color .3s, background .3s, box-shadow .3s; }
.fx .seg-sort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 1.5rem; }
.fx .seg-sort button { padding: 0 .6rem; }
.density { display: flex; align-items: center; gap: .6rem; font: 400 .875rem var(--f-ui); color: var(--ink-2); }
.density > span { margin-right: auto; }
.density svg { width: .9rem; height: .9rem; color: var(--muted); }
.density input { width: 8rem; accent-color: var(--ink); }

/* the stream: chunks of people with something alive between them */
[data-results] { transition: opacity .35s var(--ease), filter .35s var(--ease); }
[data-results].settling { opacity: .45; filter: blur(2px); transition-duration: .15s; }
.stream { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); gap: clamp(2.5rem, 6cqi, 4.5rem); }
.disc-results .matrix { grid-auto-flow: row dense; }
/* sizes: a big card leads each chunk, portrait like the rest. only where there's room for two columns. */
@container (min-width: 20rem) {
  .matrix > .pc-xl { grid-column: span 2; grid-row: span 2; }
}
@container (max-width: 50rem) { [data-density="1"] .matrix > .pc-xl { grid-column: auto; grid-row: auto; } }
/* the big card keeps a portrait shape of its own, so it never collapses when it fills its rows alone */
.pc-xl .pc-media { width: 100%; height: 100%; aspect-ratio: 4 / 5; }
.pc-xl .pc-media .cover { aspect-ratio: auto; height: 100%; min-height: 100%; }
.pc-xl { grid-template-rows: minmax(0, 1fr); }
.pc-xl .pc-body { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; padding: .85rem 1rem; border-radius: var(--r-md); background: var(--glass-strong); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--glass-shade); }
.pc-xl .pc-name { font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem); font-size: clamp(1.1rem, 1rem + .8cqi, 1.6rem); }
.pc-xl .pc-peek { display: none; }
.pc-xl .cover .mono { font-size: clamp(5rem, 4rem + 6vw, 9rem); font-size: clamp(5rem, 4rem + 6cqi, 9rem); }
@supports (animation-timeline: view()) {
  .pc-xl .cover img { animation: drift-in linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes drift-in { from { translate: 0 -6%; scale: 1.12; } to { translate: 0 6%; scale: 1.12; } }
}
/* the modules */
.mod { position: relative; display: grid; gap: 1rem; }
.mod-kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font: 400 .8125rem var(--f-ui); color: var(--muted); }
.mod-kicker i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); animation: beat 1.8s ease-in-out infinite; }
@keyframes beat { 50% { scale: 1.6; opacity: .6; } }
.mod-title { margin: 0; font: 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem)/1.05 var(--f-ui); font: 400 clamp(1.6rem, 1.2rem + 1.6cqi, 2.6rem)/1.05 var(--f-ui); letter-spacing: -0.01em; text-wrap: balance; }
.mod-note { margin: 0; font: 400 .9rem var(--f-ui); color: var(--ink-2); min-height: 1.3em; }
.mod-found { grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(1.25rem, 3vw, 2.25rem); padding: clamp(1.25rem, 3cqi, 2.25rem); border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--glass-shade); overflow: hidden; }
@container (min-width: 44rem) { .mod-found { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; } }
.mod-copy { display: grid; gap: .6rem; justify-items: start; text-align: left; }
.found-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; padding: 2.1rem .5rem .5rem; }
.found-tile { display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; filter: grayscale(1) opacity(.45); transition: filter .6s, transform .9s var(--spring-bouncy), box-shadow .6s; }
.found-tile .cover { height: 100%; border-radius: inherit; }
.found-tile .cover .mono { font-size: 1.4rem; }
.found-tile.up, .found-tile:hover { filter: none; transform: scale(1.1); position: relative; z-index: 2; box-shadow: 0 0 0 2px var(--accent), 0 .8rem 1.6rem -.8rem rgba(0, 0, 0, .45); }
.found-tag { position: absolute; z-index: 3; left: 50%; top: 2.1rem; translate: -50% calc(-100% - .55rem); padding: .25rem .65rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 .7rem var(--f-ui); pointer-events: none; transition: left .9s var(--spring-bouncy), top .9s var(--spring-bouncy); }
.mod-fresh .rail, .group-related .rail { margin-top: .25rem; }
.rail-cards { grid-auto-columns: clamp(10rem, 40vw, 15rem); grid-auto-columns: clamp(10rem, 40cqi, 15rem); }
.mod-world { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.75rem, 6vw, 4rem); gap: clamp(1.75rem, 6cqi, 4rem); padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.75rem); padding: clamp(1.5rem, 4cqi, 2.5rem) clamp(1.25rem, 4cqi, 2.75rem); border-radius: var(--r-xl); text-align: left; width: 100%; }
.mod-world .mod-copy { align-content: center; }
.world-fan { position: relative; width: clamp(7rem, 22vw, 12rem); width: clamp(7rem, 22cqi, 12rem); aspect-ratio: 1; align-self: center; margin-block: .5rem; }
.world-fan > span { position: absolute; left: 50%; top: 50%; width: 56%; aspect-ratio: 4 / 5; translate: -50% -50%; border-radius: var(--r-md); overflow: hidden; border: 2px solid var(--bg); box-shadow: var(--lift-shade); transform-origin: 50% 140%; transform: rotate(calc(var(--i) * 12deg)); transition: transform .8s var(--spring-bouncy); }
.world-fan .cover { height: 100%; } .world-fan .cover .mono { font-size: 1.6rem; }
.mod-world:hover .world-fan > span { transform: rotate(calc(var(--i) * 20deg)) translateY(-.3rem); }
.mod-world .link { color: var(--ink); }
/* the contact book: a calm list of names, faces and whether they're open */
.mod-book, .mod-near { padding: clamp(1.25rem, 3vw, 2.25rem); padding: clamp(1.25rem, 3cqi, 2.25rem); border-radius: var(--r-xl); background: var(--bg-2); overflow: hidden; }
/* plan it all: an occasion becomes a header card and one row per part of it */
.plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 2.6rem); gap: clamp(1.6rem, 4cqi, 2.6rem); }
.plan-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; justify-items: start; padding: clamp(1.4rem, 4vw, 2.6rem); padding: clamp(1.4rem, 4cqi, 2.6rem); border-radius: var(--r-xl); background: var(--tint); }
.plan-title { margin: 0; font: 400 clamp(2.2rem, 1.5rem + 3vw, 4.2rem)/.98 var(--f-display); font: 400 clamp(2.2rem, 1.5rem + 3cqi, 4.2rem)/.98 var(--f-display); letter-spacing: -0.02em; text-wrap: balance; }
.plan-head .meta { max-width: 46ch; }
.plan-parts { display: flex; flex-wrap: wrap; gap: .35rem; }
.plan-parts span { padding: .3rem .7rem; border-radius: 999px; background: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font: 400 .75rem var(--f-ui); }
.plan-head .btn svg { width: .95rem; height: .95rem; margin-right: .45rem; }
.plan-kept svg:last-child { margin: 0 0 0 .45rem; }
.plan-row .group-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.plan-n { font: 400 .75rem var(--f-ui); color: var(--accent); }
.plan-wide { font: 400 .75rem var(--f-ui); color: var(--muted); }
/* the doorway in discover: each occasion with a few faces it would bring up */
.mod-plan { padding: clamp(1.25rem, 3vw, 2.25rem); padding: clamp(1.25rem, 3cqi, 2.25rem); border-radius: var(--r-xl); background: var(--tint); }
.plan-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .6rem; }
.plan-pick { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem .7rem .7rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-align: left; transition: translate .5s var(--spring-bouncy), box-shadow .3s; }
.plan-pick:hover { translate: 0 -.2rem; box-shadow: var(--glass-shade); }
.plan-pick > svg { width: .9rem; height: .9rem; margin-left: auto; color: var(--accent); flex: none; transition: translate .4s var(--spring-bouncy); }
.plan-pick:hover > svg { translate: .2rem 0; }
.plan-faces { position: relative; flex: none; width: 4.4rem; height: 2.6rem; }
.plan-faces > span { position: absolute; top: 0; left: calc(var(--k) * .95rem); width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden; background: var(--cover); box-shadow: 0 0 0 2px var(--surface); transition: translate .5s var(--spring-bouncy); }
.plan-pick:hover .plan-faces > span { translate: calc(var(--k) * .3rem) 0; }
.plan-faces .cover { width: 100%; height: 100%; aspect-ratio: auto; }
.plan-faces .mono { font-size: .95rem; }
.plan-pick-l { font: 400 .95rem/1.2 var(--f-ui); }
@container (min-width: 44rem) { .mod-book, .mod-near { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; align-items: center; } }
.book-letter { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: .4rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 400 1.7rem/1 var(--f-ui); box-shadow: 0 .6rem 1.4rem -.6rem var(--accent); animation: jiggle 1s var(--spring-bouncy); }
.mod-book .mod-copy, .mod-near .mod-copy { position: relative; }
.ct-list { position: relative; display: grid; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.ct-row { display: flex; align-items: center; gap: .85rem; padding: .7rem 1rem .7rem .7rem; border-bottom: 1px solid var(--line); transition: background .2s; }
.ct-row:last-child { border-bottom: 0; }
@media (hover: hover) { .ct-row:hover { background: var(--fill); } .ct-row:hover .ct-go { translate: 3px 0; color: var(--accent); } }
.ct-face { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden; }
.ct-face .cover { height: 100%; } .ct-face .cover .mono { font-size: 1rem; }
.ct-body { flex: 1; min-width: 0; display: grid; font: 400 .8125rem var(--f-ui); color: var(--muted); }
.ct-body b { font: 400 1rem var(--f-ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-go { color: var(--muted); transition: translate .5s var(--spring-snappy), color .2s; }
.ct-go svg { width: .9rem; height: .9rem; }
/* most vouched: three people, each with how many would send a friend */
.mod-vouched { gap: 1.25rem; align-items: center; }
@container (min-width: 44rem) { .mod-vouched { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; } }
.vouched-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1.25rem); gap: clamp(.5rem, 2cqi, 1.25rem); padding-top: .75rem; }
.vouched-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-shade); transition: translate .7s var(--spring-bouncy); }
.vouched-card:nth-child(2) { translate: 0 -.75rem; }
@media (hover: hover) { .vouched-card:hover { translate: 0 -1.1rem; } }
.vouched-card .cover { aspect-ratio: 4 / 5; }
.vouched-n { position: absolute; top: .5rem; left: .5rem; display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; font: 400 .7rem var(--f-ui); color: var(--ink-2); }
.vouched-n b { font: 500 .95rem var(--f-ui); color: var(--accent); }
.vouched-name { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; padding: .4rem .7rem; border-radius: var(--r-sm); background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 400 clamp(.85rem, .75rem + .6vw, 1.1rem) var(--f-ui); font: 400 clamp(.85rem, .75rem + .6cqi, 1.1rem) var(--f-ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a gentle ask between the people */
.mod-nom { grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(1.4rem, 4vw, 2.5rem); padding: clamp(1.4rem, 4cqi, 2.5rem); border-radius: var(--r-xl); justify-items: start; }
@container (min-width: 44rem) { .mod-nom { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; } }
/* two screens side by side (dual-screen phones, spanned windows): search on one, people on the other */
@media (horizontal-viewport-segments: 2) {
  .disc { display: grid; grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0); column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); align-items: start; }
  .disc-hero, .disc-dock, .disc-lens { grid-column: 1; }
  .disc-dock { position: static; width: auto; margin-inline: var(--gut); }
  .disc-results { grid-column: 2; grid-row: 1 / span 3; }
}
/* folded like a laptop: the top half holds the search, the bottom half scrolls */
@media (vertical-viewport-segments: 2) { .disc-hero { min-height: calc(env(viewport-segment-height 0 0) - var(--bar-h) - 7rem); align-content: end; } }

.load-more { height: 1px; }
.spot { grid-column: 1 / -1; display: grid; gap: 1rem; padding: .75rem; border-radius: var(--r-xl); background: var(--bg-2); align-items: center; }
.spot { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (min-width: 40rem) { .spot { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 2.5rem; padding: 1rem; } }
.spot.spring { translate: -3rem 0; rotate: -1.5deg; scale: .96; }
.spot.spring.in { translate: 0 0; rotate: 0deg; scale: 1; }
.spot-media { display: block; border-radius: var(--r-lg); overflow: hidden; }
.spot-media .cover { aspect-ratio: 4 / 5; }
.spot-body { display: grid; gap: .7rem; justify-items: start; padding: .5rem .5rem 1rem; }
.spot-label { display: flex; align-items: center; gap: .45rem; margin: 0; font: 400 .75rem var(--f-ui); color: var(--muted); }
.spot-label i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
.spot-name { margin: 0; font: 400 clamp(1.6rem, 1rem + 2.6vw, 4rem)/.95 var(--f-ui); letter-spacing: -0.015em; }
.spot-line { margin: 0; font-weight: 300; color: var(--ink-2); max-width: 36ch; }
.spot-house { background: var(--inv); color: var(--inv-ink); }
.spot-house .spot-label, .spot-house .spot-line { color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 72%, transparent); }
.spot-house .cover { background: var(--inv-cover); }
.spot-house .cover .mono { color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 86%, transparent); }
.results-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin: 1.25rem 0; }
/* taking clients now: one tap, a breathing green dot when it's on */
.open-now { order: 3; gap: .5rem; height: 2.3rem; padding: 0 .95rem; font-size: .8125rem; transition: background .3s, color .3s, border-color .3s; }
.open-now i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); transition: background .3s; }
.open-now[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.open-now[aria-pressed="true"] i { background: var(--st-open); animation: gfd-breathe 2s ease-in-out infinite; }
.open-now.pop { animation: jiggle .55s var(--spring-bouncy); }
.results-count { font: 400 clamp(1.6rem, 1.3rem + 1vw, 2.4rem)/1 var(--f-ui); margin: 0; }
.widened { font: 400 .875rem var(--f-ui); color: var(--ink-2); margin: 0 0 1.25rem; padding: .75rem 1rem; border-radius: var(--r-md); background: var(--bg-2); }
.group { margin-top: 2.5rem; }
.group:first-child { margin-top: 0; }
.group-head { display: flex; align-items: center; gap: .6rem; font: 400 .8125rem var(--f-ui); color: var(--muted); margin: 0 0 1rem; }
.group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.empty { padding-block: 2.5rem; display: grid; gap: 1rem; justify-items: start; }
.empty p { font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem)/1.08 var(--f-ui); margin: 0; max-width: 22ch; }
.more-btn { margin: 2.5rem auto 0; display: flex; }

/* the filter panel: one calm page. a sheet from the bottom on phones, a glass panel on the right on computers */
.sheet-scrim { position: fixed; inset: 0; z-index: 70; background: var(--bg); background: color-mix(in srgb, var(--bg) 40%, transparent); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); opacity: 0; transition: opacity .35s; }
.sheet-scrim.on { opacity: 1; }
.sheet { position: fixed; left: .5rem; right: .5rem; bottom: .5rem; z-index: 71; height: min(90vh, 52rem); height: min(90svh, 52rem); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: var(--r-xl); translate: 0 110%; transition: translate .6s var(--spring-smooth); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden; }
@media (min-width: 56rem) and (orientation: landscape) { .sheet { left: auto; right: 1rem; top: 1rem; bottom: 1rem; height: auto; width: 30rem; translate: 110% 0; } }
.sheet.on { translate: 0 0; }
.sheet-grab { display: grid; justify-items: center; gap: .6rem; padding: .6rem 1.25rem .5rem; touch-action: none; }
.sheet-grab::before { content: ""; width: 2.4rem; height: .3rem; border-radius: 999px; background: var(--muted); opacity: .35; }
@media (min-width: 56rem) and (orientation: landscape) { .sheet-grab::before { display: none; } .sheet-grab { padding-top: 1.1rem; } }
.sheet-title { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.5rem; }
.sheet-title h2 { font: 400 1.7rem/1 var(--f-ui); margin: 0; flex: 1; }
.sheet-foot { display: flex; gap: .5rem; padding: .75rem 1.25rem 1rem; }
.sheet-foot .btn { flex: 1; }
.sheet-title .circle { width: 2.4rem; height: 2.4rem; }
.opt-hint { font: 400 .8125rem var(--f-ui); color: var(--muted); margin: 1rem 0 .5rem; }
.sheet-title > div { flex: 1; display: grid; gap: .2rem; }
.fx-count { margin: 0; font: 400 .8125rem var(--f-ui); color: var(--muted); }
.fx-close { flex: none; }
.fx { overflow: auto; overscroll-behavior: contain; padding: .25rem 1.25rem 1rem; display: grid; gap: 0; align-content: start; }
.fx-sec { display: grid; border-bottom: 1px solid var(--line); }
/* each section folds: a row with what's set, opening into its options */
.fx-h { margin: 0; }
.fx-toggle { width: 100%; display: flex; align-items: center; gap: .75rem; min-height: 3.6rem; padding: .4rem 0; text-align: left; color: var(--ink); }
.fx-name { flex: none; font: 400 1.02rem var(--f-ui); }
.fx-sum { flex: 1; min-width: 0; text-align: right; font: 400 .8125rem var(--f-ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.fx-sum.set { color: var(--accent); }
.fx-chev { flex: none; width: .95rem; height: .95rem; color: var(--muted); transition: rotate .5s var(--spring-bouncy); }
.fx-sec.open .fx-chev { rotate: 180deg; }
.fx-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--spring-smooth), opacity .3s var(--ease); }
.fx-body-in { min-height: 0; overflow: hidden; display: grid; gap: .7rem; }
.fx-sec.open .fx-body { grid-template-rows: 1fr; opacity: 1; }
.fx-sec.open .fx-body-in { padding: .2rem .2rem 1.25rem; }
.sf-ask { display: grid; gap: .7rem; justify-items: start; }
.sf-q { margin: 0; font: 400 .95rem/1.4 var(--f-ui); }
.sf-q span { color: var(--accent); }
.fx-ico { display: grid; place-items: center; }
.fx-ico svg { width: 1.3rem; height: 1.3rem; }
/* the kinds of work: a calm grid of tiles, each lights up blue when picked */
.fx-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.fx-cat { position: relative; display: grid; justify-items: center; align-content: center; gap: .35rem; min-height: 4.6rem; padding: .7rem .35rem .55rem; border-radius: var(--r-md); background: var(--fill); border: 1px solid transparent; text-align: center; color: var(--ink-2); transition: background .25s, color .25s, border-color .25s, scale .5s var(--spring-snappy); }
.fx-cat-l { font: 400 .75rem/1.2 var(--f-ui); }
.fx-cat .num, .fx-way .num { position: absolute; top: .35rem; right: .45rem; font: 400 .625rem var(--f-ui); color: var(--muted); }
.fx-cat[aria-pressed="true"], .fx-way[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fx-cat[aria-pressed="true"] .fx-ico, .fx-way[aria-pressed="true"] .fx-ico { animation: jiggle .6s var(--spring-bouncy); }
.fx-cat:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .fx-cat:not(:disabled):hover, .fx-way:hover { background: var(--bg-2); border-color: var(--line); } }
/* typed filters: a field, then the best few matches as chips */
.fx-type { position: relative; display: flex; align-items: center; }
.fx-type svg { position: absolute; left: .95rem; width: .95rem; height: .95rem; color: var(--muted); pointer-events: none; }
.fx-type .input { padding-left: 2.5rem; }
.fx-type .input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fx-sugg { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 2.2rem; }
.fx-sugg .chip { height: 2.2rem; padding: 0 .85rem; font-size: .8125rem; }
.fx-sugg .chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.fx-sugg .chip[aria-pressed="true"] svg { width: .7rem; height: .7rem; margin-left: .35rem; }
.fx-sugg .opt-hint { margin: .4rem 0 0; }
/* price: a big number that rolls, and one slider. across on computers, standing up on phones */
.fx-price { display: grid; gap: 1rem; padding: 1.1rem 1.1rem 1.4rem; border-radius: var(--r-lg); background: var(--fill); }
.fx-big { display: grid; gap: .25rem; }
.fx-big-n { font: 300 clamp(2.6rem, 2rem + 3vw, 3.6rem)/1 var(--f-ui); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-big-sub { font: 400 .8125rem/1.35 var(--f-ui); color: var(--muted); max-width: 26ch; }
.fx-slider { --k: 0; position: relative; height: 2.6rem; cursor: pointer; touch-action: none; border-radius: 999px; outline-offset: 4px; }
.fx-slider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .45rem; translate: 0 -50%; border-radius: 999px; background: var(--line); }
.fx-fill { position: absolute; left: 0; top: 50%; height: .45rem; width: calc(var(--k) * 100%); translate: 0 -50%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .45s var(--spring-smooth); }
.fx-ticks i { position: absolute; top: 50%; left: calc(var(--t) * 100%); width: .3rem; height: .3rem; translate: -50% -50%; border-radius: 50%; background: var(--surface); opacity: .9; }
.fx-knob { position: absolute; top: 50%; left: calc(var(--k) * 100%); width: 1.9rem; height: 1.9rem; translate: -50% -50%; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--glass-edge), 0 .3rem .9rem -.2rem rgba(0, 0, 0, .3); transition: left .45s var(--spring-smooth), scale .4s var(--spring-bouncy); }
.fx-slider.drag .fx-knob { scale: 1.15; }
.fx-slider.drag .fx-fill, .fx-slider.drag .fx-knob { transition-duration: .2s; }
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .fx-price { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .fx-slider { width: 2.6rem; height: 11rem; }
  .fx-slider::before { left: 50%; right: auto; top: 0; bottom: 0; width: .45rem; height: auto; translate: -50% 0; }
  .fx-fill { left: 50%; top: auto; bottom: 0; width: .45rem; height: calc(var(--k) * 100%); translate: -50% 0; background: linear-gradient(0deg, var(--accent-2), var(--accent)); transition: height .45s var(--spring-smooth); }
  .fx-ticks i { left: 50%; top: auto; bottom: calc(var(--t) * 100%); translate: -50% 50%; }
  .fx-knob { left: 50%; top: auto; bottom: calc(var(--k) * 100%); translate: -50% 50%; transition: bottom .45s var(--spring-smooth), scale .4s var(--spring-bouncy); }
  .fx-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* how they work: a few clear cards */
.fx-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.fx-way { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 3.2rem; padding: .6rem 1.8rem .6rem .8rem; border-radius: var(--r-md); background: var(--fill); border: 1px solid transparent; text-align: left; font: 400 .8125rem/1.25 var(--f-ui); color: var(--ink-2); transition: background .25s, color .25s, border-color .25s; }
.fx-way .fx-ico svg { width: 1.1rem; height: 1.1rem; }
.fx-way .num { top: 50%; translate: 0 -50%; }
.fx .view-set { padding-top: 0; }
.fx .suggest-filter { padding-top: .5rem; }

/* ---------- profile page ---------- */
.pf { display: grid; gap: 1.5rem; padding-block: .75rem 2rem; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .92); display: grid; place-items: center; opacity: 0; transition: opacity .35s; }
.lightbox.on { opacity: 1; }
.lightbox .cover { width: min(92vw, 70vh * .8); width: min(92vw, 70svh * .8); aspect-ratio: 4 / 5; border-radius: var(--r-lg); scale: .9; transition: scale .7s var(--spring-bouncy); touch-action: pan-y; }
.lightbox.on .cover { scale: 1; }
.lightbox .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.lightbox .circle { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; }
.pf-info { display: grid; gap: 1.3rem; align-content: start; min-width: 0; }
.found { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; height: 1.9rem; padding: 0 .85rem; border-radius: 999px; font: 400 .75rem var(--f-ui); background: var(--fill); }
.found i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
.pf-name { font: 400 clamp(3rem, 1.9rem + 4.2vw, 7rem)/.9 var(--f-display); letter-spacing: -0.025em; margin: 1rem 0 0; text-wrap: balance; }
.pf-biz { display: block; margin-top: .7rem; font: 400 clamp(1rem, .9rem + .5vw, 1.35rem)/1.2 var(--f-ui); letter-spacing: 0; color: var(--muted); }
.gf-biz { display: grid; gap: .4rem; margin-top: .9rem; }
.pf-name-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .3rem .6rem; margin-top: 1rem; }
.pf-name-row .pf-name { margin: 0; }
.pf-msg, .pf-th { position: relative; flex: none; width: 2.6rem; height: 2.6rem; margin-bottom: .35rem; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--ink); }
.pf-msg { background: var(--accent); color: var(--on-accent); box-shadow: 0 .5rem 1.2rem -.5rem var(--accent); }
.pf-msg svg, .pf-th svg { width: 1.2rem; height: 1.2rem; }
.pf-msg:not(.seen) { animation: msg-nudge 3.2s var(--spring-bouncy) 1.2s infinite; }
@keyframes msg-nudge { 0%, 70%, 100% { rotate: 0deg; scale: 1; } 76% { rotate: -12deg; scale: 1.08; } 84% { rotate: 9deg; } 92% { rotate: -4deg; } }
/* the unread dot: a small badge until the message is opened */
.pf-msg i, .pc-msg i { position: absolute; top: .05rem; right: .05rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--st-out); border: 2px solid var(--bg); transition: scale .4s var(--spring-bouncy); }
.pf-msg.seen i, .pc-msg.seen i { scale: 0; }
/* on cards: a little glass icon in the corner, under save */
.pc-msg { position: absolute; z-index: 2; right: .75rem; top: 3.45rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; color: var(--accent); }
.pc-msg svg { width: 1.05rem; height: 1.05rem; }
.pc-msg i { width: .55rem; height: .55rem; border-width: 1.5px; }
[data-density="5"] .pc-msg, [data-density="4"] .pc-msg { display: none; }
/* the bubble: glass, pops from the icon, types for a beat, then the words land */
.msg-pop { position: fixed; z-index: 95; width: min(19rem, 100vw - 24px); padding: .75rem .75rem .85rem; border-radius: 1.4rem; transform-origin: var(--ox, 1.5rem) 0; scale: .4; opacity: 0; translate: 0 -.4rem; transition: scale .55s var(--spring-bouncy), opacity .2s, translate .55s var(--spring-bouncy); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, .35); }
.msg-pop.above { transform-origin: var(--ox, 1.5rem) 100%; translate: 0 .4rem; }
.msg-pop.on { scale: 1; opacity: 1; translate: 0 0; }
.msg-head { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem .2rem; font: 400 .75rem var(--f-ui); color: var(--muted); }
.msg-head b { font-weight: 500; color: var(--ink); }
.msg-head span:last-child { margin-left: auto; }
.msg-ico { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.msg-ico svg { width: .85rem; height: .85rem; }
.msg-bubble { position: relative; justify-self: start; display: inline-grid; margin: 0; padding: .6rem .95rem; max-width: 100%; border-radius: 1.15rem 1.15rem 1.15rem .35rem; background: var(--accent); color: var(--on-accent); font: 400 .95rem/1.35 var(--f-ui); }
.msg-text { grid-area: 1 / 1; opacity: 0; translate: 0 .3rem; transition: opacity .3s, translate .45s var(--spring-bouncy); overflow-wrap: anywhere; }
.msg-dots { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .25rem; height: 1.3rem; transition: opacity .2s; }
.msg-dots i { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; animation: msg-dot 1s ease-in-out infinite; }
.msg-dots i:nth-child(2) { animation-delay: .15s; } .msg-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes msg-dot { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -.25rem; opacity: 1; } }
.msg-pop:not(.msg-typed) .msg-text { visibility: hidden; }
.msg-pop.msg-typed .msg-dots { opacity: 0; }
.msg-pop.msg-typed .msg-text { opacity: 1; translate: 0 0; }
.pf-found { display: inline-flex; align-items: center; gap: .45rem; margin: .7rem 0 0; font: 400 .8125rem var(--f-ui); color: var(--ink-2); }
.pf-found i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; }
.pf-sub { font: 400 .9rem var(--f-ui); color: var(--muted); margin: .7rem 0 0; }
.pf-headline { font: 300 clamp(1.15rem, 1.05rem + .45vw, 1.55rem)/1.4 var(--f-body); margin: 0; max-width: 32ch; }
.pf-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pf-test { font: 400 .8125rem var(--f-ui); color: var(--muted); margin: 0; }
.th-card { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: var(--r-lg); }
.th-card .cover { width: 3.1rem; height: 3.1rem; border-radius: 50%; flex: none; }
.th-card .cover .mono { font-size: 1.2rem; }
.th-card .s-body { flex: 1; min-width: 0; }
.th-demo { flex: none; display: grid; place-items: center; padding: 0; background: none; border: 0; color: inherit; }
.th-logo { width: 1.6rem; height: 1.6rem; }
.th-post { margin-top: .75rem; }
.pick svg { color: var(--accent); }
.seg { position: relative; display: inline-flex; padding: .25rem; border-radius: 999px; background: var(--fill); }
.seg button { position: relative; z-index: 1; height: 2.4rem; padding: 0 1.15rem; border-radius: 999px; font: 400 .875rem var(--f-ui); color: var(--ink-2); transition: color .3s; }
.pf-bar { position: sticky; bottom: calc(var(--tab-h) + 1.4rem + env(safe-area-inset-bottom, 0px)); z-index: 10; display: flex; gap: .5rem; align-items: center; padding: .4rem; border-radius: 999px; }
.pf-bar .btn { flex: 1; }
.pf-bar .save { position: static; flex: none; width: 2.9rem; height: 2.9rem; }
/* ---------- profile: a deck of work you can throw, facts as glass tiles, a live map, vouches ---------- */
.pf-stage { position: relative; perspective: 1400px; padding: .75rem .9rem 2.6rem .25rem; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pf-stage img { -webkit-user-drag: none; }
.pf-stage ::selection { background: transparent; }
.pf-deck { position: relative; aspect-ratio: 4 / 5; max-height: 72vh; max-height: 72svh; margin-inline: auto; transform: rotateY(calc(var(--tx, 0) * 8deg)) rotateX(calc(var(--ty, 0) * -6deg)); transform-style: preserve-3d; transition: transform .9s var(--spring-smooth); }
.pf-photo { position: absolute; inset: 0; margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--cover); cursor: grab; user-select: none; box-shadow: var(--lift-shade);
  transform: translate(calc(min(var(--k), 3) * .85rem), calc(min(var(--k), 3) * -.6rem)) rotate(calc(min(var(--k), 3) * 2.6deg)) scale(calc(1 - min(var(--k), 3) * .04)); z-index: calc(10 - var(--k)); opacity: clamp(0, 4 - var(--k), 1);
  transition: transform .8s var(--spring-bouncy), opacity .3s; }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; translate: calc(var(--tx, 0) * -14px) calc(var(--ty, 0) * -14px); scale: 1.06; transition: translate .9s var(--spring-smooth); }
/* the mark: small, in a corner, readable on light and dark photos, never in the way of a tap */
.pf-mark { position: absolute; z-index: 2; right: 1.15rem; bottom: .95rem; display: flex; align-items: baseline; gap: .3em; max-width: calc(100% - 2.3rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-bottom: .2em; font: 400 .6875rem/1.3 var(--f-ui); letter-spacing: .02em; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 .9rem rgba(0, 0, 0, .25); pointer-events: none; user-select: none; -webkit-user-select: none; }
.pf-mark b { font: 400 .9375rem/1.3 var(--f-display); letter-spacing: 0; }
.pf-photo .pf-mark { opacity: clamp(0, 1 - var(--k), 1); transition: opacity .4s var(--ease); }
.lightbox .pf-mark { right: .9rem; bottom: .8rem; }
.pf-photo.drag { transition: none; cursor: grabbing; }
.pf-photo.fly { transition: transform .4s var(--ease), opacity .4s; opacity: 0; }
.pf-photo:first-child { view-transition-name: pc-cover; }
.pf-mono .cover { height: 100%; } .pf-mono .mono { font-size: min(32vw, 13rem); }
.pf-sym { position: absolute; z-index: 12; top: .1rem; left: -.2rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; color: var(--ink); animation: bob 5s ease-in-out infinite; }
.pf-sym svg { width: 1.5rem; height: 1.5rem; }
.pf-sym:has(.crt) { cursor: pointer; }
/* folding phones opened sideways, and small tablets: the photo leaves room for the name */
@media (orientation: landscape) and (max-width: 55.99rem) { .pf-deck { max-height: 58vh; max-height: 58svh; } }
.pf-deck-hint { position: absolute; z-index: 12; left: 50%; bottom: .4rem; translate: -50% 0; margin: 0; display: flex; align-items: center; padding: .3rem .4rem; border-radius: 999px; font: 400 .75rem var(--f-ui); color: var(--ink-2); white-space: nowrap; }
/* the photos in miniature: the one on top grows a little and wears the ring */
.pf-dots { display: flex; align-items: center; gap: .3rem; }
.pf-dot { position: relative; width: 1.2rem; height: 1.2rem; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--cover); opacity: .55; scale: .86; cursor: pointer; transition: scale .5s var(--spring-bouncy), opacity .3s var(--ease), box-shadow .3s var(--ease); }
.pf-dot img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pf-dot.on { opacity: 1; scale: 1.12; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--accent); }
@media (hover: hover) { .pf-dot:hover { opacity: .9; } }
.pf-hint-text { overflow: hidden; max-width: 14rem; margin: 0 .55rem 0 .6rem; transition: max-width .7s var(--ease), margin .7s var(--ease), opacity .35s var(--ease); }
.pf-deck-hint.quiet .pf-hint-text { max-width: 0; margin: 0; opacity: 0; }
.pf-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.pf-badges p { margin: 0; }
.open-pill, .pf-found { display: inline-flex; align-items: center; gap: .5rem; height: 2.1rem; padding: 0 .85rem; border-radius: 999px; font: 400 .8125rem var(--f-ui); color: var(--ink-2); }
/* known for: their words, large, rising one at a time */
.pf-known { position: relative; margin: .5rem 0 0; padding: 1.6rem 1.25rem 1.25rem; border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.pf-sticker { position: absolute; top: -.8rem; left: 1rem; padding: .3rem .8rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 .75rem var(--f-ui); rotate: -5deg; box-shadow: 0 .5rem 1rem -.5rem var(--accent); transition: rotate .6s var(--spring-bouncy); }
.pf-known:hover .pf-sticker { rotate: 4deg; }
.pf-known blockquote { margin: 0; font: 400 clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem)/1.15 var(--f-ui); letter-spacing: -0.01em; text-wrap: balance; }
.pf-known span { display: inline-block; opacity: .15; translate: 0 .3em; transition: opacity .5s var(--ease), translate .7s var(--spring-bouncy); transition-delay: calc(var(--w) * 45ms); }
.pf-known.in span { opacity: 1; translate: 0 0; }
/* facts as tiles that lift */
.pf-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.fact { min-width: 0; padding: .9rem 1rem; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: translate .6s var(--spring-bouncy), box-shadow .4s; }
.fact:hover { translate: 0 -.25rem; box-shadow: var(--glass-shade); }
.fact dt { font: 400 .72rem var(--f-ui); color: var(--muted); margin-bottom: .35rem; }
.fact dd { margin: 0; font: 400 .9375rem/1.4 var(--f-ui); }
.fact-wide, .fact-map { grid-column: 1 / -1; }
/* on phones every tile gets the full width, so what they offer reads as easily as what they make */
@media not all and (min-width: 56rem) and (orientation: landscape) { .pf-facts > .fact { grid-column: 1 / -1; } }
.fact-sub { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--ink-2); }
.meter { display: inline-flex; gap: .2rem; font: 500 1.5rem/1 var(--f-ui); }
.meter i { font-style: normal; color: var(--muted); color: color-mix(in srgb, var(--muted) 45%, transparent); transition: color .4s, translate .6s var(--spring-bouncy); }
.meter i.on { color: var(--accent); }
.fact-price:hover .meter i.on { translate: 0 -.2rem; }
.fact-price:hover .meter i.on:nth-child(2) { transition-delay: .05s; } .fact-price:hover .meter i.on:nth-child(3) { transition-delay: .1s; } .fact-price:hover .meter i.on:nth-child(4) { transition-delay: .15s; }
/* the live map */
.pf-map { --T: 64cqw; position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; container-type: inline-size; background-color: var(--fill); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 1.4rem 1.4rem; }
.map-tiles { position: absolute; display: grid; grid-template-columns: repeat(3, var(--T)); left: calc(50% - var(--T) * (1 + var(--ox))); top: calc(50% - var(--T) * (1 + var(--oy))); filter: grayscale(.85) contrast(.95); transition: scale 1.2s var(--spring-smooth); }
.map-tiles img { width: var(--T); height: var(--T); display: block; }
.pf-map:hover .map-tiles { scale: 1.06; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-tiles { filter: grayscale(1) invert(.9) contrast(.9); } }
:root[data-theme="dark"] .map-tiles { filter: grayscale(1) invert(.9) contrast(.9); }
.map-pin { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.map-pin i { position: absolute; inset: -.6rem; border-radius: 50%; border: 2px solid var(--accent); animation: ping 2s ease-out infinite; }
@keyframes ping { from { scale: .4; opacity: 1; } to { scale: 2.2; opacity: 0; } }
.map-label { position: absolute; left: .6rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; font: 400 .8125rem var(--f-ui); }
.map-label svg { width: .8rem; height: .8rem; color: var(--accent); }
.map-credit { position: absolute; right: .5rem; bottom: .35rem; font: 400 .6rem var(--f-ui); color: var(--muted); }
/* vouches, folded small: a ring with the count, and the reasons rolling past one at a time */
.pf-vouch { scroll-margin-top: calc(var(--bar-h) + 2rem); display: flex; align-items: center; gap: .9rem; padding: .8rem .8rem .8rem .9rem; border-radius: 999px; }
.pf-vouch.pop { animation: jiggle .7s var(--spring-bouncy); }
.vouch-ring { position: relative; flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from var(--ring, 0deg), var(--accent), var(--accent-2), var(--accent)); animation: ring-spin 6s linear infinite; }
.vouch-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.vouch-ring b { position: relative; font: 500 1.05rem var(--f-ui); color: var(--accent); }
.pf-vouch.none .vouch-ring { background: var(--line); animation: none; }
.pf-vouch.none .vouch-ring::after { content: "+"; position: relative; font: 300 1.4rem/1 var(--f-ui); color: var(--muted); }
.vouch-copy { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.vouch-n { margin: 0; font: 400 .9rem/1.3 var(--f-ui); }
.vouch-reel { position: relative; margin: 0; height: 1.35rem; overflow: hidden; font: 400 .8125rem/1.35rem var(--f-ui); color: var(--muted); }
.vouch-reel:empty { display: none; }
.vouch-reel span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vouch-reel span b { font-weight: 500; color: var(--accent); }
.vouch-reel .in { animation: reel-in .6s var(--spring-bouncy) both; }
.vouch-reel .out { animation: reel-out .45s var(--ease) both; }
@keyframes reel-in { from { translate: 0 110%; opacity: 0; } }
@keyframes reel-out { to { translate: 0 -110%; opacity: 0; } }
.pf-vouch .btn { flex: none; }
/* a vouch lands: the ring spins up, glows and throws sparks; the count rolls over */
.vouch-ring { transition: scale .6s var(--spring-bouncy), box-shadow .6s; }
.pf-vouch:hover .vouch-ring { animation-duration: 2.4s; scale: 1.06; }
.pf-vouch.cheer .vouch-ring { animation: ring-spin .9s linear 2, ring-cheer 1.2s var(--spring-bouncy); box-shadow: 0 0 0 .4rem var(--accent-soft), 0 0 1.6rem var(--accent-soft); }
@keyframes ring-cheer { 0% { scale: 1; } 25% { scale: 1.32; } 55% { scale: .94; } 100% { scale: 1; } }
.vn-roll { display: inline-grid; height: 1.3em; overflow: hidden; line-height: 1.3em; vertical-align: bottom; }
.vn-roll span { grid-area: 1 / 1; animation: vn-out .7s var(--spring-bouncy) .15s both; }
.vn-roll span + span { animation-name: vn-in; }
@keyframes vn-out { to { translate: 0 -110%; opacity: 0; } }
@keyframes vn-in { from { translate: 0 110%; opacity: 0; } }
.vouch-burst { position: absolute; inset: 0; pointer-events: none; }
.vouch-burst i { position: absolute; left: 50%; top: 50%; width: .4rem; height: .4rem; margin: -.2rem; border-radius: 50%; background: var(--accent); rotate: var(--a); animation: spark 1s cubic-bezier(.2, .7, .3, 1) var(--d) both; }
.vouch-burst i:nth-child(even) { width: .28rem; height: .7rem; border-radius: 2px; background: var(--accent-2); }
@keyframes spark { 0% { translate: 0 0; opacity: 0; scale: .4; } 15% { opacity: 1; } 100% { translate: 0 -3.4rem; opacity: 0; scale: 1; } }
.vouch-sheet .vouch-picks .pick { transition: scale .4s var(--spring-bouncy); }
.vouch-sheet .vouch-picks .pick:hover { scale: 1.05; }
@media (min-width: 56rem) and (orientation: landscape) {
  .pf-vouch { padding: 1rem 1rem 1rem 1.1rem; }
  .vouch-ring { width: 3.6rem; height: 3.6rem; }
  .vouch-ring b { font-size: 1.2rem; }
  .pf-vouch.cheer .vouch-burst i { animation-name: spark-far; }
  @keyframes spark-far { 0% { translate: 0 0; opacity: 0; scale: .4; } 15% { opacity: 1; } 100% { translate: 0 -5rem; opacity: 0; scale: 1.2; } }
}
@media (prefers-reduced-motion: reduce) { .pf-vouch.cheer .vouch-ring { animation: none; } }
.pf-vouch .btn:disabled { opacity: .55; }
.pf-row { display: grid; gap: .6rem; }
.pf-more { container-type: inline-size; }
.more-stage { display: grid; gap: 1.5rem; }
/* more like this: one lead card, then pairs. on wide screens one row, the lead only a little larger, so nobody's photo is blown up */
.more-grid { display: grid; gap: 1.8rem .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; }
.more-grid > .pc-lead { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .more-grid { max-width: none; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
  .more-grid > .pc-lead { grid-column: auto; }
  .more-grid > .pc-lead .pc-name { font-size: 1.2rem; }
}
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .pf-bar { padding: .4rem; }
  .pf-stage { max-width: 30rem; margin-inline: auto; width: 100%; }
}
@media (min-width: 56rem) and (orientation: landscape) {
  .pf { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: start; padding-top: 1.5rem; }
  .pf-stage { position: sticky; top: calc(var(--bar-h) + 1.5rem); }
  .pf-deck { max-height: calc(100vh - var(--bar-h) - 6rem); max-height: calc(100svh - var(--bar-h) - 6rem); }
  .pf-bar { position: static; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-start; }
  .pf-bar .btn { flex: 0 1 auto; }
  /* what they make and offer on the left, where they are on the right: side by side, so the page stays short and the map stays sharp */
  .pf-facts:has(.fact-map) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; align-items: start; }
  .pf-facts:has(.fact-map) > .fact:not(.fact-map) { grid-column: 1; }
  .pf-facts:has(.fact-map) > .fact-map { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; display: flex; flex-direction: column; }
  .pf-facts > .fact-map dd { flex: 1; display: flex; }
  .pf-facts > .fact-map .pf-map { flex: 1; aspect-ratio: auto; min-height: 11rem; max-height: 17rem; }
  .pf-facts:not(:has(.fact:not(.fact-map))) > .fact-map { grid-column: 1 / -1; grid-row: auto; }
  .pf-facts:not(:has(.fact:not(.fact-map))) .pf-map { max-width: 26rem; }
}
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 2.5rem + env(safe-area-inset-bottom, 0px)); translate: -50% 1rem; opacity: 0; pointer-events: none; margin: 0; padding: .7rem 1.2rem; border-radius: 999px; font: 400 .875rem var(--f-ui); white-space: nowrap; transition: opacity .3s, translate .6s var(--spring-bouncy); z-index: 95; }
.toast.on { opacity: 1; translate: -50% 0; }
.old-browser { margin: 0; padding: .75rem 1rem; background: var(--fill); color: var(--ink); font: 400 .875rem/1.4 var(--f-ui); text-align: center; }
.toast-wrap { white-space: normal; width: max-content; max-width: min(26rem, calc(100% - 2rem)); text-align: center; border-radius: var(--r-lg); line-height: 1.4; }
@media (min-width: 56rem) and (orientation: landscape) { .toast { bottom: 2rem; } }

/* ---------- saved ---------- */
.page-head { padding-block: clamp(1.5rem, 4vw, 4rem) 1.5rem; display: grid; gap: .75rem; }

/* ---------- get found: a conversation with aayla ---------- */
.chat { width: min(100%, 40rem); margin-inline: auto; min-height: calc(100vh - var(--bar-h) - 8rem); min-height: calc(100svh - var(--bar-h) - 8rem); display: grid; grid-template-rows: auto 1fr; padding-block: 1rem 2rem; }
.chat-top { display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem; }
.chat-top .circle { width: 2.4rem; height: 2.4rem; }
.chat-progress { flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.chat-progress i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 3px; transition: width .7s var(--spring-smooth); }
.step { display: grid; gap: 1.25rem; }
.f-label { display: grid; gap: .35rem; }
.answer-row .input { flex: 1; min-width: 0; }
.answer-row .select { flex: 1; min-width: 0; }
.chat-stage { position: relative; display: grid; align-content: start; gap: 1.5rem; padding-top: clamp(1rem, 6vh, 4rem); }
.who { display: flex; align-items: center; gap: .6rem; font: 400 .8125rem var(--f-ui); color: var(--muted); }
.who .avatar { position: relative; width: 2.2rem; height: 2.2rem; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--bg); display: grid; place-items: center; font: 400 1.1rem/1 var(--f-ui); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); animation: bob 4s ease-in-out infinite; }
.who .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.say { font: 400 clamp(1.9rem, 1.4rem + 2.2vw, 3.4rem)/1.06 var(--f-ui); letter-spacing: -0.01em; margin: 0; min-height: 1.1em; text-wrap: balance; }
.say .w { display: inline-block; opacity: 0; translate: 0 .35em; filter: blur(4px); animation: word-in .7s var(--spring-smooth) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes word-in { to { opacity: 1; translate: 0 0; filter: none; } }
.say-sub { font: 300 1.05rem/1.45 var(--f-body); color: var(--ink-2); margin: 0; max-width: 36ch; }
.dots { display: inline-flex; gap: .3rem; padding: .9rem 1rem; border-radius: 999px; background: var(--fill); justify-self: start; }
.dots i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--muted); animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { translate: 0 -.3rem; opacity: .5; } }
.answer { display: grid; gap: .9rem; animation: answer-in .8s var(--spring-bouncy) both; }
@keyframes answer-in { from { opacity: 0; translate: 0 1.5rem; scale: .98; } }
.answer .input { height: 3.6rem; font-size: max(16px, 1.15rem); border-radius: var(--r-md); }
.answer-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.answer-row .btn { flex: none; }
.reply { display: grid; gap: .7rem; padding: 1.1rem 1.2rem; border-radius: var(--r-lg); background: var(--bg-2); animation: answer-in .8s var(--spring-bouncy) both; }
.reply p { margin: 0; font-weight: 300; }
.term { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.term .f-hint { margin: 0; }
.term-near { display: grid; gap: .5rem; }
.term-near:empty { display: none; }
.gf-me-who { display: flex; align-items: center; gap: .8rem; }
.gf-me-who img { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--fill); }
.gf-me-who > span { display: grid; gap: .1rem; min-width: 0; }
.gf-me-who b { font-weight: 500; overflow-wrap: anywhere; }
.reply .gf-me-about { color: var(--ink-2); font-size: .9375rem; }
.pickers { display: flex; flex-wrap: wrap; gap: .45rem; }
.pick { display: inline-flex; align-items: center; gap: .35rem; height: 2.4rem; padding: 0 1rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 400 .875rem var(--f-ui); transition: background .25s, color .25s, scale .5s var(--spring-snappy); }
.pick[aria-pressed="true"] { background: var(--ink); color: var(--bg); animation: jiggle .55s var(--spring-bouncy); }
.pick svg { width: .8rem; height: .8rem; }
.pick.add { background: transparent; border: 1px dashed var(--line); color: var(--ink-2); }
.input, .select { width: 100%; min-width: 0; height: 3.2rem; padding: 0 1rem; font: 400 max(16px, 1rem) var(--f-body); background: var(--fill); border: 1px solid transparent; border-radius: var(--r-md); outline: 0; transition: border-color .2s, box-shadow .3s, background .2s; }
.input:focus, .select:focus { background: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.f-hint { font: 400 .8125rem/1.4 var(--f-ui); color: var(--muted); margin: 0; }
.agree { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); }
.agree input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--accent); flex: none; }
.form-msg { font: 400 .875rem var(--f-ui); color: var(--accent); margin: 0; min-height: 1.2em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.input.area { height: auto; min-height: 7rem; padding: .9rem 1rem; resize: vertical; line-height: 1.45; font-size: max(16px, 1rem); }
.price-picks .pick { height: auto; padding: .55rem 1rem; display: grid; justify-items: start; gap: .05rem; border-radius: var(--r-md); }
.price-picks .pick b { font: 400 1rem var(--f-tight); letter-spacing: .05em; color: var(--accent); }
.price-picks .pick[aria-pressed="true"] b { color: inherit; }
.money { display: flex; align-items: center; gap: .4rem; font: 400 1.1rem var(--f-tight); }
.money .input { width: 9rem; }
.pick.filed { gap: .35rem; padding-right: .45rem; }
.pick.filed button { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); color: inherit; transition: background .2s, scale .4s var(--spring-snappy); }
.pick.filed button:hover { background: rgba(255, 255, 255, .32); }
.pick.filed button:active { scale: .85; }
.pick.filed button svg { width: .7rem; height: .7rem; }
.more-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.more-links .pick { gap: .4rem; }
.more-links .pick b { font-weight: 500; }
.more-links button svg { width: .8rem; height: .8rem; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ph { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--fill); animation: pop-in .6s var(--spring-bouncy) both; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph:first-child::after { content: "cover"; position: absolute; left: .4rem; bottom: .4rem; font: 400 .65rem var(--f-ui); padding: .15rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; }
.ph.ph-add::after { display: none; }
.ph.busy img { opacity: .45; filter: blur(2px); }
.ph.busy::before { content: ""; position: absolute; z-index: 1; inset: 0; margin: auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.ph button { position: absolute; top: .35rem; right: .35rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; }
.ph button svg { width: .75rem; height: .75rem; }
.ph-add { display: grid; place-items: center; align-content: center; gap: .3rem; border: 1.5px dashed var(--line); background: transparent; font: 400 .8125rem var(--f-ui); color: var(--ink-2); }
.ph-add span { font: 300 1.8rem/1 var(--f-body); }
.ph-cover { position: absolute; left: .35rem; bottom: .35rem; padding: .2rem .55rem; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 .65rem var(--f-ui); color: var(--ink); }
.ph .ph-cover { top: auto; right: auto; width: auto; height: auto; display: inline-block; }
/* make it yours: banner, symbol, open status */
.banner-preview { overflow: hidden; border-radius: 999px; padding: .55rem 0; background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.banner-track { display: flex; align-items: center; gap: 1rem; width: max-content; animation: marquee 16s linear infinite; font: 400 .9rem var(--f-ui); white-space: nowrap; }
.banner-track svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }
.sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr)); gap: .4rem; }
.sym { aspect-ratio: 1; border-radius: var(--r-md); display: grid; place-items: center; background: var(--fill); border: 1px solid transparent; color: var(--ink-2); transition: background .2s, color .2s, rotate .6s var(--spring-bouncy), scale .5s var(--spring-bouncy); }
.sym svg { width: 1.3rem; height: 1.3rem; }
.sym:hover { rotate: -10deg; scale: 1.08; }
.sym[aria-pressed="true"] { background: var(--ink); color: var(--bg); animation: jiggle .55s var(--spring-bouncy); }
.avail-picks .pick { gap: .5rem; }
.avail-picks .od { width: .6rem; height: .6rem; }
.avail-picks .od-icon { width: 1rem; height: 1rem; }
.pick[aria-pressed="true"] .od-icon { color: #3DDC97; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { position: relative; display: grid; gap: .15rem; padding: 0 0 1.4rem 2.2rem; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); }
.timeline li::after { content: ""; position: absolute; left: .55rem; top: 1.45rem; bottom: .1rem; width: 1.5px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.done::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--bg); }
.timeline li.now::before { border-color: var(--accent); background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.timeline b { font: 400 1.05rem var(--f-body); }
.timeline span { font: 300 .9375rem var(--f-body); color: var(--ink-2); }
.timeline li { animation: answer-in .8s var(--spring-bouncy) both; }
.timeline li:nth-child(2) { animation-delay: .1s; } .timeline li:nth-child(3) { animation-delay: .2s; } .timeline li:nth-child(4) { animation-delay: .3s; }
.tip { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--accent-soft); font: 400 .875rem/1.45 var(--f-ui); color: var(--ink-2); }
.tip svg { width: .85rem; height: .85rem; color: var(--accent); margin-top: .2rem; }
/* ---------- get found: a tiny screen under each question, acting out what the step is for. every scene loops every six seconds. ---------- */
.gfd { --T: 6s; position: relative; height: 10rem; padding: 1rem; border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shade); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow: hidden; display: grid; align-content: center; gap: .8rem; max-width: 26rem; }
.gfd img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gfd-q { margin: 0; display: flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .95rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font: 400 .9rem var(--f-ui); white-space: nowrap; overflow: hidden; }
.gfd-q svg { flex: none; width: .9rem; height: .9rem; color: var(--muted); }
/* typing: the words uncover left to right, a letter at a time */
.gfd-type { display: inline-block; white-space: nowrap; clip-path: inset(0 100% 0 0); animation: gfd-type var(--T) steps(var(--n)) infinite; }
@keyframes gfd-type { 0%, 4% { clip-path: inset(0 100% 0 0); } 32%, 90% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.gfd-card { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; background: var(--cover); }
.gfd-found { position: absolute; top: .35rem; left: .35rem; padding: .2rem .5rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 .625rem var(--f-ui); }
/* hi: a search types, three people rise, one is found */
.gfd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; height: 4.6rem; }
.gfd-cards .gfd-card { animation: gfd-rise var(--T) var(--spring-bouncy) infinite; animation-delay: calc(var(--k) * 90ms); }
@keyframes gfd-rise { 0%, 36% { opacity: 0; translate: 0 1.2rem; scale: .9; } 48%, 90% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; } }
.gfd-cards .gfd-found { animation: gfd-pop var(--T) var(--spring-bouncy) infinite; }
@keyframes gfd-pop { 0%, 55% { scale: 0; } 62%, 90% { scale: 1; } 100% { scale: 0; } }
/* link: a web address types, the page opens, a cursor taps */
/* name: a name tag fills in */
/* work and vibe: chips switch on, one after another */
/* makes: products, services, both, then what they make lands */
/* price: the dollar signs fill, and the starting price lands */
/* find: the searches that should land on you stack up, each with a check */
/* city: a pin drops, rings spread, the city settles in */
/* links: your page in the middle, your other places orbiting it */
/* photos: your photos drop into place, the first one becomes the cover */
/* look: your card, a note popping beside it, an open sign that breathes */
@keyframes gfd-breathe { 50% { box-shadow: 0 0 0 .3rem var(--st-open); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--st-open) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .gfd *, .gfd *::before, .gfd *::after { animation: none !important; clip-path: none !important; opacity: 1 !important; } }
/* the preview card, thrown around on springs */
.card3d-stage { width: min(100%, 15rem); perspective: 900px; touch-action: none; cursor: grab; padding: .5rem; user-select: none; }
.card3d-stage.grab { cursor: grabbing; }
.card3d { position: relative; transform-style: preserve-3d; will-change: transform; }
.card3d-face { transform: translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-lg); background: var(--surface); padding: .5rem .5rem .8rem; box-shadow: var(--lift-shade); }
.card3d-face .pc-media { border-radius: var(--r-md); }
/* blur inside a turning card makes some browsers flatten it and show both sides at once, so the faces stay solid */
.card3d-face, .card3d-face * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.card3d-face .glass { background: var(--glass-strong); }
.card3d-back { position: absolute; inset: 0; transform: rotateY(180deg) translateZ(1px); background: var(--inv); color: var(--inv-ink); display: grid; align-content: center; justify-items: center; gap: .6rem; padding: 1.25rem; text-align: center; }
.card3d-back .wordmark { font-size: 2.6rem; padding: 0; }
.card3d-found { display: inline-flex; align-items: center; gap: .4rem; font: 400 .75rem var(--f-ui); color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 70%, transparent); margin-bottom: .4rem; }
.card3d-found i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--pop); }
.card3d-q { display: inline-flex; align-items: center; gap: .35rem; font: 400 .8125rem var(--f-ui); padding: .35rem .75rem; border-radius: 999px; background: var(--inv-ink); background: color-mix(in srgb, var(--inv-ink) 10%, transparent); }
.card3d-q svg { width: .7rem; height: .7rem; color: var(--pop); }
.card3d-hint { margin-top: -.25rem; }
.code { font: 400 clamp(2.6rem, 2rem + 3vw, 4.6rem)/1 var(--f-tight); letter-spacing: .08em; padding: 1rem 1.5rem; border-radius: var(--r-lg); background: var(--bg-2); user-select: all; justify-self: start; }
.burst { position: fixed; z-index: 96; width: .5rem; height: .5rem; border-radius: 50%; pointer-events: none; }

/* ---------- about ---------- */
.about { display: grid; gap: clamp(4rem, 9vw, 9rem); padding-bottom: 2rem; }
.ab-hero { padding-top: clamp(2rem, 6vw, 6rem); display: grid; gap: 1.4rem; }
.ab-hero .display { max-width: 12ch; }
.ab-hero .answer-row { margin-top: .5rem; }
.ab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1.5rem 0 0; max-width: 40rem; }
.ab-stats div { padding: 1rem 1.1rem; border-radius: var(--r-lg); background: var(--bg-2); display: grid; gap: .3rem; }
.ab-stats dt { font: 400 .75rem var(--f-ui); color: var(--muted); }
.ab-stats dd { margin: 0; font-size: clamp(2.4rem, 1.8rem + 2.4vw, 4rem); line-height: 1; }
@keyframes marquee { to { translate: -50% 0; } }
/* the reel: who aayla is for, as small photos drifting past, each with its name */
.ab-reel { overflow: hidden; margin-block: -2.5rem; padding-block: 1.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.reel-track { display: flex; width: max-content; animation: marquee 80s linear infinite; }
.reel-run { display: flex; gap: clamp(.75rem, 1.5vw, 1.25rem); padding-right: clamp(.75rem, 1.5vw, 1.25rem); }
@media (hover: hover) { .ab-reel:hover .reel-track { animation-play-state: paused; } }
.reel-card { position: relative; margin: 0; width: clamp(7.5rem, 11vw, 11rem); rotate: calc(var(--r) * 1.5deg); transition: rotate .7s var(--spring-bouncy), translate .7s var(--spring-bouncy); }
.reel-card:hover { rotate: 0deg; translate: 0 -.4rem; }
.reel-card > span { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--cover); box-shadow: var(--lift-shade); }
.reel-card img { width: 100%; height: 100%; object-fit: cover; }
.reel-card figcaption { position: absolute; left: .45rem; bottom: .45rem; padding: .3rem .65rem; border-radius: 999px; background: var(--glass-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--glass-edge); font: 400 .8125rem var(--f-ui); color: var(--ink); white-space: nowrap; }
/* after the house: five arches of real work, at a slow float */
.ab-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.4rem, 1.4vw, 1.25rem); align-items: end; margin-block: -1rem; }
.gal-arch { display: block; aspect-ratio: 3 / 5; border-radius: 999px 999px var(--r-lg) var(--r-lg); overflow: hidden; background: var(--cover); box-shadow: var(--lift-shade); }
.gal-arch:nth-child(2), .gal-arch:nth-child(4) { aspect-ratio: 3 / 4.2; }
.gal-arch:nth-child(3) { aspect-ratio: 3 / 5.8; }
.gal-arch img { width: 100%; height: 100%; object-fit: cover; animation: gal-float 9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.8s); }
@keyframes gal-float { from { scale: 1.04; translate: 0 -2%; } to { scale: 1.1; translate: 0 2%; } }
@media (prefers-reduced-motion: reduce) { .gal-arch img, .reel-track { animation: none; } }
.ab-statement p { margin: 0; font: 400 clamp(1.9rem, 1.2rem + 3vw, 4.4rem)/1.12 var(--f-ui); letter-spacing: -0.01em; max-width: 26ch; text-wrap: pretty; }
.ab-statement span { color: var(--line); transition: color .5s var(--ease); }
.ab-statement span.lit { color: var(--ink); }
.ab-pillars { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .ab-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar { --pad: clamp(1.5rem, 3vw, 2.4rem); display: grid; gap: .8rem; align-content: start; padding: var(--pad); border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pillar .num { color: var(--accent); font-size: 1.1rem; }
.pillar h2 { margin: 0; font: 400 clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem)/1 var(--f-ui); }
.pillar p { margin: 0; font-weight: 300; color: var(--ink-2); }
.ab-aayla { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) and (orientation: landscape) { .ab-aayla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; } }
/* aayla's face: a portrait that leans toward you, with her "a" orbiting the frame */
.ab-face { position: relative; margin: 0; width: min(100%, 26rem); justify-self: center; perspective: 1000px; }
.ab-photo { display: block; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-xl) var(--r-xl); overflow: hidden; background: var(--bg-2); box-shadow: var(--lift-shade); transform: rotateY(calc(var(--fx, 0) * 10deg)) rotateX(calc(var(--fy, 0) * -8deg)); transition: transform .9s var(--spring-smooth); }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-badge { position: absolute; right: -.5rem; bottom: 12%; width: 5.5rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--inv); color: var(--inv-ink); font: 400 3.2rem/1 var(--f-display); box-shadow: 0 0 0 6px var(--bg); animation: bob 5s ease-in-out infinite; }
.ab-badge::after { content: ""; position: absolute; top: 24%; right: 24%; width: .7rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
@keyframes bob { 50% { translate: 0 -.6rem; rotate: -6deg; } }
.ab-words { display: grid; gap: 1.1rem; }
.ab-words p:not(.kicker) { margin: 0; font: 300 clamp(1.05rem, 1rem + .3vw, 1.3rem)/1.55 var(--f-body); max-width: 38ch; }
.ab-house { display: grid; gap: 1rem; padding-block: clamp(2rem, 5vw, 4rem); border-block: 1px solid var(--line); }
.ab-house p:not(.kicker) { margin: 0; max-width: 46ch; font-weight: 300; font-size: 1.1rem; color: var(--ink-2); }
.ab-how ol { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; counter-reset: how; }
@media (min-width: 48rem) { .ab-how ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-how li { counter-increment: how; display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--ink); }
.ab-how li::before { content: "0" counter(how); font: 400 .9rem var(--f-tight); color: var(--accent); }
.ab-how b { font: 400 1.5rem/1.1 var(--f-ui); }
.ab-how span { font-weight: 300; color: var(--ink-2); }
.give { display: grid; gap: 1.1rem; justify-items: start; padding: clamp(2rem, 6vw, 5rem); border-radius: var(--r-xl); background: var(--inv); color: var(--inv-ink); }
.give .kicker { color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 70%, transparent); }
.give .h2 { font-size: clamp(2.6rem, 1.8rem + 3.6vw, 5.6rem); }
.give > p:not(.kicker) { margin: 0; max-width: 44ch; font-weight: 300; font-size: 1.1rem; color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 78%, transparent); }
.give-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.give .give-fine { font: 400 .75rem/1.5 var(--f-ui); color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 55%, transparent); }
/* keep aayla free: on computers the give card splits, words on the left, a small live give module on the right */
.give-copy { display: grid; gap: 1.1rem; justify-items: start; }
.give-copy > p:not(.kicker):not(.give-fine) { margin: 0; max-width: 44ch; font-weight: 300; font-size: 1.1rem; color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 78%, transparent); }
.ab-gv { display: none; }
@media (min-width: 56rem) and (orientation: landscape) {
  .give-split { grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 1fr); align-items: center; column-gap: clamp(2rem, 5vw, 5rem); }
  .ab-gv { display: block; justify-self: stretch; width: 100%; max-width: 27rem; position: relative; padding: 1.8rem 1.5rem 1.5rem; border-radius: var(--r-xl); background: var(--inv-ink); background: color-mix(in srgb, var(--inv-ink) 5%, transparent); border: 1px solid var(--inv-ink); border: 1px solid color-mix(in srgb, var(--inv-ink) 12%, transparent); overflow: hidden; isolation: isolate; }
  .ab-gv::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 1rem; width: 15rem; height: 9rem; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--pop), transparent); background: radial-gradient(closest-side, color-mix(in srgb, var(--pop) 40%, transparent), transparent); filter: blur(10px); animation: gv-glow 6s ease-in-out infinite alternate; }
  @keyframes gv-glow { to { scale: 1.25; opacity: .6; } }
}
.ab-gv-pick, .ab-gv-thanks { display: grid; gap: .9rem; justify-items: center; text-align: center; }
.ab-gv-amount { display: flex; align-items: flex-start; justify-content: center; font: 400 clamp(4rem, 3rem + 3vw, 5.6rem)/1 var(--f-tight); height: 1em; overflow: hidden; color: var(--inv-ink); }
.ab-gv-cur { font-size: .45em; margin: .12em .06em 0 0; color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 60%, transparent); }
.ab-gv-digits { display: flex; }
.ab-gv-digits[data-len="4"] { font-size: .82em; } .ab-gv-digits[data-len="5"], .ab-gv-digits[data-len="6"], .ab-gv-digits[data-len="7"] { font-size: .62em; }
.ab-gv-says { margin: 0; min-height: 1.4em; font: 300 .95rem var(--f-body); color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 70%, transparent); }
.ab-gv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ab-gv-chip { height: 2.4rem; padding: 0 1rem; border-radius: 999px; background: var(--inv-ink); background: color-mix(in srgb, var(--inv-ink) 9%, transparent); color: var(--inv-ink); font: 400 .9rem var(--f-tight); transition: background .25s, color .25s, scale .5s var(--spring-snappy); }
.ab-gv-chip:hover { scale: 1.05; }
.ab-gv-chip.on { background: var(--inv-ink); color: var(--inv); animation: jiggle .55s var(--spring-bouncy); }
.ab-gv-custom { display: flex; align-items: center; gap: .6rem; font: 400 .8125rem var(--f-ui); color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 60%, transparent); }
.ab-gv-in { display: inline-flex; align-items: center; gap: .2rem; height: 2.3rem; padding: 0 .8rem; border-radius: 999px; background: var(--inv-ink); background: color-mix(in srgb, var(--inv-ink) 8%, transparent); color: var(--inv-ink); }
.ab-gv-in input { width: 4.2rem; border: 0; outline: 0; background: none; color: inherit; font: 400 max(16px, .95rem) var(--f-tight); appearance: textfield; -moz-appearance: textfield; }
.ab-gv-in input::-webkit-inner-spin-button, .ab-gv-in input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ab-gv-pay { width: 100%; height: 3.3rem; border-radius: 999px; background: var(--inv-ink); color: var(--inv); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font: 500 1rem var(--f-ui); transition: scale .4s var(--spring-snappy); }
.ab-gv-pay:hover { scale: 1.02; } .ab-gv-pay:active { scale: .97; }
.ab-gv-badge { width: 1.6rem; height: 1.6rem; border-radius: .45rem; background: var(--inv); color: var(--inv-ink); display: grid; place-items: center; font: 400 .95rem/1 var(--f-tight); }
.ab-gv-thanks h3 { margin: 0; font: 400 2rem/1 var(--f-ui); color: var(--inv-ink); }
.ab-gv-thanks p { margin: 0; max-width: 30ch; font: 300 .95rem/1.5 var(--f-body); color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 75%, transparent); }
.ab-gv-thanks .link { color: var(--inv-ink); }
.ab-gv-tag-label { margin: 0; font: 400 .9rem var(--f-ui); color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 70%, transparent); }
.ab-gv-tag { display: grid; gap: .3rem; justify-items: center; width: 100%; padding: 1rem; border-radius: var(--r-lg); background: var(--inv-ink); background: color-mix(in srgb, var(--inv-ink) 8%, transparent); border: 1px solid var(--pop); border: 1px solid color-mix(in srgb, var(--pop) 60%, transparent); color: var(--inv-ink); }
.ab-gv-tag-name { font: 400 clamp(2rem, 1.7rem + 1.6vw, 2.6rem)/1 var(--f-display); }
.ab-gv-tag-hint { font: 400 .75rem var(--f-ui); color: var(--inv-ink); color: color-mix(in srgb, var(--inv-ink) 60%, transparent); }
.ab-gv-heart { width: 5.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--inv-ink); color: var(--inv); display: grid; place-items: center; animation: jiggle .9s var(--spring-bouncy); position: relative; }
.ab-gv-heart span { font: 400 3.2rem/1 var(--f-display); translate: 0 -.08em; }
.ab-gv-heart::after { content: ""; position: absolute; inset: -.5rem; border-radius: 50%; border: 1px solid var(--pop); border: 1px solid color-mix(in srgb, var(--pop) 70%, transparent); animation: ring 2.4s var(--ease) infinite; }
.ab-share { display: grid; gap: .9rem; justify-items: start; }
.ab-next { display: grid; gap: 1rem; }
@media (min-width: 56rem) and (orientation: landscape) { .ab-next { grid-template-columns: 1.3fr 1fr; } }
.next-card { display: grid; gap: 1rem; align-content: start; justify-items: start; padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--r-xl); background: var(--bg-2); }
.next-card p:not(.kicker) { margin: 0; max-width: 36ch; font-weight: 300; color: var(--ink-2); }
.next-deck { background: var(--accent); color: var(--on-accent); }
.next-deck .kicker, .next-deck p:not(.kicker) { color: rgba(255, 255, 255, .85); }
.next-deck .kicker i { background: #fff; }
.sweep { position: fixed; inset: 0; z-index: 200; background: #0B0B0C; pointer-events: none; }

/* ---------- give: a quiet, dark checkout ---------- */
.page-give { padding-bottom: 0; background: #0B0B0C; color: #fff; }
.give-page { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: calc(env(safe-area-inset-top, 0px) + .75rem) var(--gut) calc(env(safe-area-inset-bottom, 0px) + 1.5rem); }
.gv-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--bar-h); }
.gv-top .wordmark { color: #fff; padding: 0; }
.gv-ghost { background: rgba(255, 255, 255, .08); color: #fff; }
.gv-secure { justify-self: end; display: inline-flex; align-items: center; gap: .35rem; font: 400 .75rem var(--f-ui); color: rgba(255, 255, 255, .55); }
.gv-secure svg { width: .85rem; height: .85rem; }
.gv-pick, .gv-thanks { width: min(100%, 30rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 1.1rem; text-align: center; padding-block: 2rem; animation: answer-in .9s var(--spring-smooth) both; }
.gv-kicker { margin: 0; font: 400 .8125rem var(--f-ui); color: rgba(255, 255, 255, .6); letter-spacing: .02em; }
.gv-kicker i { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--pop); margin-right: .5rem; vertical-align: .1em; }
/* the give page tells a short story in pictures, with the checkout always in reach */
.gv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); padding-top: 1rem; }
@media (min-width: 56rem) and (orientation: landscape) {
  .gv-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .gv-hero, .gv-story { grid-column: 1; }
  .gv-pay-col { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 1.5rem; }
  .gv-m2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.gv-hero { display: grid; gap: 1rem; justify-items: start; }
.gv-fan { position: relative; width: 100%; height: clamp(13rem, 24vw, 19rem); margin-bottom: .5rem; }
.gv-fan-card { position: absolute; left: 50%; bottom: 0; width: clamp(7.5rem, 12vw, 10.5rem); aspect-ratio: 4 / 5.2; translate: -50% 0; border-radius: var(--r-lg); overflow: hidden; background: #1A1A1C; border: 3px solid #0B0B0C; transform-origin: 50% 130%;
  transform: rotate(calc(var(--i) * 10deg * var(--spread, 1))); z-index: calc(3 - var(--i) * var(--i)); box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .9); transition: transform .8s var(--spring-bouncy); animation: fan-in 1.1s var(--spring-bouncy) backwards; animation-delay: calc((var(--i) + 2) * 90ms); }
.gv-fan-card img { width: 100%; height: 100%; object-fit: cover; }
@keyframes fan-in { from { transform: rotate(0deg) translateY(3rem); opacity: 0; } }
.gv-title { margin: 0; font: 400 clamp(3.4rem, 2rem + 6vw, 7.5rem)/.9 var(--f-display); letter-spacing: -0.025em; }
.gv-hero .gv-p { font-size: 1.15rem; max-width: 34ch; }
.gv-pay-col .gv-pick, .gv-pay-col .gv-thanks { width: 100%; padding: 2rem 1.4rem; border-radius: var(--r-xl); background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); }
.gv-story { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.gv-moment { position: relative; display: grid; gap: 1rem; }
.gv-img { display: block; position: relative; overflow: hidden; border-radius: var(--r-xl); background: #161618; }
.gv-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.06; transition: scale 1.4s var(--ease); }
.gv-moment.in .gv-img img { scale: 1; }
.gv-moment h2 { margin: 0; font: 400 clamp(1.8rem, 1.3rem + 2vw, 3rem)/1.02 var(--f-ui); letter-spacing: -0.01em; }
.gv-moment p { margin: 0; font: 300 1.05rem/1.5 var(--f-ui); color: rgba(255, 255, 255, .72); max-width: 38ch; }
.gv-cap { display: grid; gap: .7rem; }
.gv-m1 .gv-img { aspect-ratio: 4 / 3; }
.gv-m1 .gv-cap { position: relative; width: min(88%, 27rem); margin: -5rem 1rem 0 auto; padding: 1.4rem; border-radius: var(--r-lg); background: #0B0B0C; }
.gv-pair { position: relative; height: clamp(18rem, 30vw, 24rem); }
.gv-pair .gv-img { position: absolute; }
.gv-pair .gv-img:first-child { left: 0; top: 0; width: 62%; height: 78%; rotate: -4deg; }
.gv-pair .gv-img:last-child { right: 0; bottom: 0; width: 56%; height: 68%; rotate: 5deg; border: 4px solid #0B0B0C; }
.gv-moment.in .gv-pair .gv-img:first-child { animation: settle-l 1.2s var(--spring-bouncy); }
.gv-moment.in .gv-pair .gv-img:last-child { animation: settle-r 1.2s var(--spring-bouncy) .1s backwards; }
@keyframes settle-l { from { rotate: -14deg; translate: -2rem 1rem; } }
@keyframes settle-r { from { rotate: 16deg; translate: 2rem 1rem; } }
.gv-m3 .gv-img { aspect-ratio: 16 / 11; }
.gv-glass { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: 1.25rem; border-radius: var(--r-lg); background: rgba(11, 11, 12, .5); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.gv-strip { display: grid; gap: 1rem; }
.gv-strip h2 { margin: 0; font: 400 .8125rem var(--f-ui); color: rgba(255, 255, 255, .6); }
.gv-strip-row { overflow: hidden; margin-inline: calc(-1 * var(--gut)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.gv-strip-track { display: flex; gap: .75rem; width: max-content; animation: marquee 45s linear infinite; }
@media (hover: hover) { .gv-strip-row:hover .gv-strip-track { animation-play-state: paused; } }
.gv-person { width: 8rem; display: grid; gap: .3rem; font: 400 .875rem var(--f-ui); color: #fff; }
.gv-person .cover { aspect-ratio: 4 / 5; border-radius: var(--r-md); background: #1A1A1C; }
.gv-person .cover .mono { font-size: 2.4rem; color: rgba(255, 255, 255, .8); }
.gv-person span { font-size: .75rem; color: rgba(255, 255, 255, .55); }
.gv-amount { display: flex; align-items: flex-start; justify-content: center; font: 400 clamp(5.5rem, 4rem + 9vw, 9rem)/1 var(--f-tight); letter-spacing: .01em; height: 1em; overflow: hidden; }
.gv-cur { font-size: .45em; margin: .12em .06em 0 0; color: rgba(255, 255, 255, .6); }
.gv-digits { display: flex; }
.dg { display: inline-block; }
.dg.up { animation: dg-up .5s var(--spring-snappy); }
.dg.down { animation: dg-down .5s var(--spring-snappy); }
@keyframes dg-up { from { translate: 0 .6em; opacity: 0; } }
@keyframes dg-down { from { translate: 0 -.6em; opacity: 0; } }
.gv-says { margin: -.25rem 0 .25rem; min-height: 1.4em; font: 300 1rem var(--f-body); color: rgba(255, 255, 255, .7); }
/* faces from aayla that light up as the gift grows */
.gv-faces { display: flex; justify-content: center; margin: -.25rem 0 .25rem; }
.gv-face { width: 2.1rem; height: 2.1rem; margin-left: -.55rem; border-radius: 50%; overflow: hidden; border: 2px solid #141416; background: #1A1A1C; filter: grayscale(1) brightness(.45); scale: .88; transition: filter .5s, scale .6s var(--spring-bouncy), translate .6s var(--spring-bouncy); transition-delay: calc(var(--i) * 25ms); }
.gv-face:first-child { margin-left: 0; }
.gv-face.on { filter: none; scale: 1; translate: 0 -.15rem; }
.gv-face .cover { height: 100%; } .gv-face .cover .mono { font-size: .8rem; color: rgba(255, 255, 255, .8); }
/* long amounts shrink to fit */
.gv-digits[data-len="4"] { font-size: .82em; } .gv-digits[data-len="5"] { font-size: .68em; } .gv-digits[data-len="6"], .gv-digits[data-len="7"], .gv-digits[data-len="8"] { font-size: .55em; }
.gv-dial { position: relative; width: 100%; height: 4.5rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); outline-offset: 4px; }
.gv-dial::-webkit-scrollbar { display: none; }
.gv-dial.grab { cursor: grabbing; scroll-snap-type: none; }
.gv-ruler { display: flex; align-items: flex-end; height: 100%; padding-inline: calc(50% - 6px); width: max-content; }
.tick { position: relative; flex: none; width: 12px; height: 100%; scroll-snap-align: center; display: flex; justify-content: center; align-items: flex-end; }
.tick::before { content: ""; width: 1.5px; height: 1.1rem; background: rgba(255, 255, 255, .28); border-radius: 1px; }
.tick.mid::before { height: 1.6rem; background: rgba(255, 255, 255, .45); }
.tick.big::before { height: 2.2rem; background: rgba(255, 255, 255, .7); }
.tick b { position: absolute; top: .1rem; font: 400 .7rem var(--f-tight); color: rgba(255, 255, 255, .55); }
.gv-dial-wrap { position: relative; width: 100%; }
.gv-needle { position: absolute; left: 50%; bottom: -.2rem; width: 3px; height: 3rem; translate: -50% 0; border-radius: 3px; background: var(--pop); pointer-events: none; }
.gv-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.gv-chip { height: 2.6rem; padding: 0 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: 400 .9375rem var(--f-tight); letter-spacing: .03em; transition: background .25s, color .25s, scale .5s var(--spring-snappy); }
.gv-chip.on { background: #fff; color: #0B0B0C; }
.gv-custom { display: flex; align-items: center; gap: .75rem; font: 400 .8125rem var(--f-ui); color: rgba(255, 255, 255, .55); }
.gv-custom-in { display: inline-flex; align-items: center; gap: .2rem; height: 2.6rem; padding: 0 .9rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: 400 1rem var(--f-tight); }
.gv-custom input { width: 4.5rem; border: 0; outline: 0; background: none; color: #fff; font: 400 max(16px, 1rem) var(--f-tight); appearance: textfield; -moz-appearance: textfield; }
.gv-custom input::-webkit-inner-spin-button { -webkit-appearance: none; }
.gv-pay { width: 100%; height: 3.6rem; margin-top: .5rem; border-radius: 999px; background: #fff; color: #0B0B0C; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; font: 500 1.0625rem var(--f-ui); box-shadow: 0 1rem 2.5rem -1rem rgba(95, 191, 143, .45); transition: scale .5s var(--spring-snappy), box-shadow .3s; }
.gv-pay:active { scale: .97; }
.gv-badge { width: 1.7rem; height: 1.7rem; border-radius: .5rem; background: #0B0B0C; color: #fff; display: grid; place-items: center; font: 400 1rem/1 var(--f-tight); }
.gv-other { font: 400 .875rem var(--f-ui); color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 3px; }
.gv-fine { margin: .5rem 0 0; font: 400 .72rem/1.5 var(--f-ui); color: rgba(255, 255, 255, .4); max-width: 34ch; }
.gv-heart { width: 7rem; aspect-ratio: 1; border-radius: 50%; background: #fff; color: #0B0B0C; display: grid; place-items: center; animation: jiggle .9s var(--spring-bouncy); position: relative; }
.gv-heart span { font: 400 4.2rem/1 var(--f-display); translate: 0 -.08em; }
.gv-heart::after { content: ""; position: absolute; inset: -.6rem; border-radius: 50%; border: 1px solid rgba(95, 191, 143, .6); animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { from { scale: .9; opacity: 1; } to { scale: 1.5; opacity: 0; } }
.gv-h { margin: 0; font: 400 clamp(2.4rem, 1.8rem + 2.5vw, 3.6rem)/1 var(--f-ui); }
.gv-p { margin: 0; font: 300 1.05rem/1.5 var(--f-body); color: rgba(255, 255, 255, .72); max-width: 34ch; }
.gv-row { display: grid; gap: .6rem; width: 100%; }
/* the cashtag after a tap on give: big, one tap to copy, with cash app a tap away again */
.gv-tag-label { margin: 0; font: 400 .9rem var(--f-ui); color: rgba(255, 255, 255, .7); }
.gv-tag { display: grid; gap: .3rem; justify-items: center; width: 100%; padding: 1.1rem 1rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, .08); border: 1px solid rgba(95, 191, 143, .55); color: #fff; }
.gv-tag-name { font: 400 clamp(2.2rem, 1.8rem + 2vw, 3rem)/1 var(--f-display); letter-spacing: -0.01em; }
.gv-tag-hint { font: 400 .78rem var(--f-ui); color: rgba(255, 255, 255, .6); }
.gv-tag-open { width: 100%; }
.gv-ghost-btn { height: 3.2rem; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); font: 400 1rem var(--f-ui); }
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .gv-fan { height: 17rem; }
  .gv-fan-card { width: 9.5rem; }
  .gv-fan { animation: fan-sway 7s ease-in-out infinite alternate; }
  .gv-title { font-size: clamp(3.2rem, 1.5rem + 9vw, 5rem); }
  .gv-pay-col .gv-pick { position: relative; overflow: clip; padding: 2.25rem 1.1rem 1.5rem; background: linear-gradient(180deg, rgba(95, 191, 143, .14), rgba(255, 255, 255, .03) 45%); border-color: rgba(95, 191, 143, .28); }
  .gv-pay-col .gv-pick::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 2.5rem; width: 16rem; height: 10rem; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(95, 191, 143, .45), transparent); filter: blur(24px); animation: aura 5s ease-in-out infinite alternate; }
  .gv-pick { isolation: isolate; }
  .gv-presets { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; width: calc(100% + 2.2rem); margin-inline: -1.1rem; padding-inline: 1.1rem; scroll-snap-type: x proximity; }
  .gv-presets::-webkit-scrollbar { display: none; }
  .gv-chip { flex: none; scroll-snap-align: center; }
  .gv-pick .gv-pay { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + .9rem); z-index: 3; }
}
@keyframes fan-sway { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes aura { from { scale: .85; opacity: .7; } to { scale: 1.15; opacity: 1; } }
.gv-sheet { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .5); display: grid; align-items: end; justify-items: center; opacity: 0; transition: opacity .3s; }
.gv-sheet.on { opacity: 1; }
.gv-sheet-in { width: min(100% - 1rem, 30rem); margin-bottom: .5rem; display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 2rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-xl); background: #18181B; translate: 0 110%; transition: translate .6s var(--spring-smooth); }
.gv-sheet.on .gv-sheet-in { translate: 0 0; }
@media (min-width: 56rem) and (orientation: landscape) { .gv-sheet { align-items: center; } }

/* ---------- the deck ---------- */
.page-deck { padding-bottom: 0; background: #0B0B0C; color: #fff; overflow: hidden; }
.deck { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(env(safe-area-inset-top, 0px) + .75rem) var(--gut) calc(env(safe-area-inset-bottom, 0px) + .9rem); touch-action: pan-y; user-select: none; }
.deck-top { display: flex; align-items: center; gap: 1rem; height: var(--bar-h); }
.deck .wordmark { color: #fff; padding-left: 0; }
.deck-progress { flex: 1; height: 2px; background: rgba(255, 255, 255, .16); border-radius: 2px; overflow: hidden; }
.deck-progress i { display: block; height: 100%; width: 0; background: #fff; transition: width .7s var(--spring-smooth); }
.deck .glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); box-shadow: none; color: #fff; }
.deck .circle:disabled { opacity: .3; }
.slides { position: relative; }
.slide { position: absolute; inset: 0; display: grid; align-items: center; transition: translate .9s var(--spring-smooth), opacity .5s var(--ease), filter .6s var(--ease); }
.slide.before { translate: -12% 0; opacity: 0; filter: blur(8px); pointer-events: none; }
/* any slide that isn't showing waits off to the right, from the very first frame, before the deck's script has run */
.slide:not(.on):not(.before) { translate: 12% 0; opacity: 0; filter: blur(8px); pointer-events: none; }
.sl-in { display: grid; gap: clamp(1rem, 2.5vh, 1.75rem); max-width: 62rem; overflow: auto; max-height: 100%; padding-block: 1rem; }
.slide.on .sl-in > * { animation: sl-up .9s var(--spring-smooth) both; }
.slide.on .sl-in > :nth-child(2) { animation-delay: .07s; } .slide.on .sl-in > :nth-child(3) { animation-delay: .14s; } .slide.on .sl-in > :nth-child(4) { animation-delay: .21s; } .slide.on .sl-in > :nth-child(5) { animation-delay: .28s; }
@keyframes sl-up { from { opacity: 0; translate: 0 1.5rem; } }
.sl-kicker { margin: 0; font: 400 .8125rem var(--f-ui); color: var(--pop); letter-spacing: .02em; }
.sl-mark { margin: 0 0 .2em; font: 400 clamp(5rem, 3rem + 14vw, 16rem)/.8 var(--f-display); letter-spacing: -0.03em; }
.sl-cover { display: grid; gap: 1.25rem; }
.sl-h { margin: 0; font: 400 clamp(2.2rem, 1.4rem + 3.6vw, 5.4rem)/1 var(--f-display); letter-spacing: -0.015em; max-width: 18ch; text-wrap: balance; }
.sl-big { font-size: clamp(3rem, 1.8rem + 5.5vw, 8rem); }
.sl-lede { margin: 0; font: 300 clamp(1.1rem, 1rem + .6vw, 1.6rem)/1.45 var(--f-body); color: rgba(255, 255, 255, .78); max-width: 40ch; }
.sl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.sl-list li { font: 300 clamp(1.05rem, 1rem + .5vw, 1.5rem)/1.4 var(--f-body); color: rgba(255, 255, 255, .85); padding-left: 1.4rem; position: relative; }
.sl-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--pop); }
.sl-cols, .sl-stats { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .sl-cols, .sl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-cols div, .sl-stats div { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; gap: .5rem; align-content: start; }
.sl-cols b { font: 400 1.4rem/1.1 var(--f-ui); }
.sl-cols p, .sl-stats p { margin: 0; font-weight: 300; color: rgba(255, 255, 255, .72); }
.sl-stats b { font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: .9; }
@media (min-width: 56rem) and (orientation: landscape) { .slide:has(> .sl-vis) .sl-stats b { font-size: clamp(2.4rem, 1.6rem + 2.2vw, 4.2rem); } }
.sl-source { margin: 0; font: 400 .72rem/1.5 var(--f-ui); color: rgba(255, 255, 255, .45); max-width: 60ch; }
.sl-source a { text-decoration: underline; }
.sl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sl-steps li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.sl-steps span { font: 400 .8125rem var(--f-ui); color: var(--pop); }
.sl-steps b { font: 300 clamp(1.05rem, 1rem + .5vw, 1.45rem)/1.4 var(--f-body); }
.sl-ghost { border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.deck-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.deck-count { font-size: 1rem; color: rgba(255, 255, 255, .6); min-width: 4.5rem; text-align: center; }
.deck-cover { position: fixed; inset: 0; z-index: 150; background: #0B0B0C; pointer-events: none; display: none; }
/* arriving from the about page: the ink that swept in dissolves on its own, so the deck can never stay hidden behind it */
html.swept .deck-cover { display: block; animation: uncover .9s var(--ease) .25s forwards; }
@keyframes uncover { to { opacity: 0; } }
/* deck visuals: each slide pairs its words with something moving. wide: side by side. tall: the picture sits behind, softened. */
.slide { grid-template-columns: minmax(0, 1fr); }
.slide > * { grid-area: 1 / 1; }
.sl-in { position: relative; z-index: 1; }
.sl-vis { position: relative; z-index: 0; align-self: center; justify-self: center; width: 100%; height: 100%; max-height: 34rem; pointer-events: none; opacity: .28; transition: opacity .8s var(--ease); }
.slide.on .sl-vis { animation: vis-in 1.2s var(--spring-smooth) both .1s; }
@keyframes vis-in { from { opacity: 0; scale: .9; } }
@media (min-width: 56rem) and (orientation: landscape) {
  .slide:has(> .sl-vis) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }
  .slide:has(> .sl-vis) > .sl-in { grid-column: 1; }
  .slide:has(> .sl-vis) > .sl-vis { grid-column: 2; opacity: 1; }
  .sl-photo:has(> .sl-vis) { grid-template-columns: minmax(0, 1fr); }
  .sl-photo > .sl-vis { grid-column: 1 !important; opacity: .55 !important; }
}
.v-tile { display: block; position: relative; overflow: hidden; border-radius: var(--r-md); background: #1A1A1C; }
.v-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-tile:empty::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, #2A2A2E, #141416); }
/* cover: a fan of work dealt open behind the name. flat on purpose, so it looks the same on every phone and browser */
.v-fan { display: grid; place-items: center; }
.v-fan-in { position: relative; width: clamp(7rem, 11vw, 10.5rem); aspect-ratio: 3 / 4; }
.v-fan-in .v-tile { position: absolute; inset: 0; border-radius: var(--r-lg); box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, .85); transform-origin: 50% 120%; rotate: calc((var(--i) - 2) * 11deg); translate: calc((var(--i) - 2) * 18%) calc(var(--fan-d, 0) * 1%); }
.slide.on .v-fan-in .v-tile { animation: fan-in .9s var(--spring-smooth) both, fan-breathe 6s var(--ease) 1s infinite alternate; animation-delay: calc(var(--i) * 70ms), calc(1s + var(--i) * 200ms); }
.v-fan-in .v-tile:nth-child(3) { z-index: 2; } .v-fan-in .v-tile:nth-child(2), .v-fan-in .v-tile:nth-child(4) { z-index: 1; }
@keyframes fan-in { from { rotate: 0deg; translate: 0 0; opacity: 0; } }
@property --fan-d { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes fan-breathe { to { --fan-d: -3; } }
/* problem: buried, then found */
.v-buried { display: grid; place-items: center; }
.v-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; width: min(100%, 30rem); perspective: 900px; }
.v-grid .v-tile { aspect-ratio: 1; filter: grayscale(1) brightness(.45) blur(1.5px); transition: filter .6s, transform .9s var(--spring-bouncy), box-shadow .6s; }
.v-grid .v-tile.up { filter: none; transform: translateZ(140px) scale(1.25); z-index: 2; box-shadow: 0 0 0 2px var(--pop), 0 1.5rem 3rem -1rem rgba(0, 0, 0, .9); }
.v-found { position: absolute; z-index: 3; translate: -50% -100%; padding: .3rem .7rem; border-radius: 999px; background: var(--pop); color: #08140E; font: 400 .75rem var(--f-ui); transition: left .9s var(--spring-bouncy), top .9s var(--spring-bouncy); }
/* what: the phone */
.v-phone { display: grid; place-items: center; perspective: 1400px; }
.v-device { width: clamp(13rem, 19vw, 17rem); aspect-ratio: 9 / 18.5; border-radius: 2.4rem; padding: .55rem; background: #1C1C1E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 3rem 5rem -2rem rgba(0, 0, 0, .9); transform: rotateY(calc(-16deg + var(--px, 0) * 18deg)) rotateX(calc(6deg + var(--py, 0) * -10deg)); transition: transform .9s var(--spring-smooth); }
.v-screen { height: 100%; border-radius: 1.9rem; background: #fff; color: #0B0B0C; padding: 1.4rem .8rem .8rem; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; gap: .5rem; align-content: start; overflow: hidden; }
.v-wordmark { grid-column: 1 / -1; font: 400 1.3rem/1 var(--f-display); text-align: center; }
.v-search { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 .7rem; border-radius: 999px; border: 1px solid #E5E5E5; font: 400 .66rem var(--f-ui); }
.v-search i { width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.v-card { display: grid; gap: .25rem; opacity: 0; translate: 0 1rem; transition: opacity .4s, translate .8s var(--spring-bouncy); transition-delay: calc(var(--i) * 90ms); }
.v-card .v-tile { aspect-ratio: 4 / 5; border-radius: .7rem; background: #EEE; }
.v-card b, .v-card em { display: block; height: .35rem; border-radius: 2px; background: #E2E2E2; }
.v-card b { width: 80%; background: #CFCFCF; } .v-card em { width: 55%; }
.v-phone.shown .v-card { opacity: 1; translate: 0 0; }
/* think bigger: one page, wearing a different partner each week */
.v-sp { display: grid; place-items: center; --sp: #2E7D5B; }
.v-sp-in { display: grid; justify-items: center; gap: .9rem; width: clamp(12rem, 20vw, 16rem); }
.v-sp-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; background: var(--sp); background: color-mix(in srgb, var(--sp) 22%, transparent); color: #fff; font: 400 .75rem var(--f-ui); transition: background .6s var(--ease); }
.v-sp-tag i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--sp); transition: background .6s var(--ease); }
.v-sp-card { position: relative; width: 100%; display: grid; gap: .3rem; padding: .6rem .6rem .9rem; border-radius: var(--r-lg); background: #fff; color: #0B0B0C; box-shadow: 0 0 0 3px var(--sp), 0 2rem 3.5rem -1.8rem rgba(0, 0, 0, .9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp) 70%, transparent), 0 2rem 3.5rem -1.8rem rgba(0, 0, 0, .9); transition: box-shadow .6s var(--ease); }
.v-sp-card .v-tile { aspect-ratio: 4 / 4.2; border-radius: calc(var(--r-lg) - .3rem); margin-bottom: .35rem; }
.v-sp-card .v-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--sp), transparent 55%); background: linear-gradient(to top, color-mix(in srgb, var(--sp) 45%, transparent), transparent 55%); transition: background .6s var(--ease); }
.v-sp-sym { position: absolute; top: 1rem; left: 1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--sp); box-shadow: 0 .4rem 1rem -.4rem rgba(0, 0, 0, .5); transition: color .6s var(--ease); }
.v-sp-sym svg { width: 1.1rem; height: 1.1rem; }
.v-sp-name { font: 400 1.35rem/1.05 var(--f-display); letter-spacing: -.01em; color: #0B0B0C; transition: color .6s var(--ease); }
.v-sp[data-type="bold"] .v-sp-name { font: 600 1.15rem/1.1 var(--f-ui); letter-spacing: -.02em; color: var(--sp); }
.v-sp[data-type="wide"] .v-sp-name { font: 500 .95rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--sp); }
.v-sp[data-type="italic"] .v-sp-name { font: italic 400 1.35rem/1.05 var(--f-display); color: var(--sp); }
.v-sp-what { font: 400 .75rem var(--f-ui); color: #5A5A60; }
.v-sp-msg { justify-self: start; margin-top: .3rem; padding: .45rem .75rem; border-radius: 1rem 1rem 1rem .3rem; background: var(--sp); color: #fff; font: 400 .75rem var(--f-ui); transition: background .6s var(--ease); }
.v-sp-dots { display: flex; gap: .4rem; }
.v-sp-dots i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); opacity: .35; scale: .8; transition: opacity .4s, scale .5s var(--spring-bouncy); }
.v-sp-dots i.on { opacity: 1; scale: 1.15; }
.v-sp.swap .v-sp-sym, .v-sp.swap .v-sp-name { animation: sp-swap .7s var(--spring-bouncy); }
@keyframes sp-swap { from { scale: .6; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v-sp.swap .v-sp-sym, .v-sp.swap .v-sp-name { animation: none; } }
/* phones and tall screens: the page sits above the words as a small card, in full color, instead of behind them */
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .slide[data-slide="sponsor"] { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }
  .slide[data-slide="sponsor"] > .sl-in { flex: 0 1 auto; min-height: 0; }
  .v-sp { flex: none; height: auto; max-height: none; opacity: 1; }
  .v-sp-in { width: min(100%, 19rem); gap: .6rem; }
  .v-sp-card { grid-template-columns: 4rem minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: .8rem; row-gap: .15rem; align-items: center; padding: .55rem .8rem .55rem .55rem; }
  .v-sp-card .v-tile { grid-row: 1 / 4; aspect-ratio: 1; margin: 0; border-radius: .8rem; }
  .v-sp-sym { top: .2rem; left: .2rem; width: 1.6rem; height: 1.6rem; }
  .v-sp-sym svg { width: .8rem; height: .8rem; }
  .v-sp-name { font-size: 1.1rem; }
  .v-sp[data-type="bold"] .v-sp-name, .v-sp[data-type="italic"] .v-sp-name { font-size: 1.05rem; }
  .v-sp[data-type="wide"] .v-sp-name { font-size: .8rem; }
  .v-sp-msg { margin-top: .15rem; padding: .3rem .6rem; font-size: .6875rem; }
  .v-sp-dots { display: none; }
}
@media not all and (min-width: 56rem) and (orientation: landscape) { @media (max-height: 700px) { .v-sp-tag { display: none; } .slide[data-slide="sponsor"] { gap: .6rem; } } }
/* perks: a sealed card that fills, pops, turns over to the perk, and a creature that celebrates */
.v-perk { display: grid; place-items: center; }
.v-pk { position: relative; width: clamp(14rem, 22vw, 18rem); aspect-ratio: 4 / 5; perspective: 1000px; }
.v-pk-card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s var(--spring-smooth); }
.v-perk.open .v-pk-card { transform: rotateY(180deg); }
.v-pk-face { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .9rem; padding: 1.4rem; border-radius: var(--r-xl); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; }
.v-pk-front { background: #161618; border: 1px solid rgba(255, 255, 255, .1); color: #fff; }
.v-pk-front p { margin: 0; font: 400 .9375rem/1.35 var(--f-ui); color: rgba(255, 255, 255, .75); }
.v-pk-lock { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--pop); color: #08140E; transition: scale .5s var(--spring-bouncy); }
.v-pk-lock svg { width: 1.4rem; height: 1.4rem; }
.v-perk.fill .v-pk-lock { animation: pk-shake .5s var(--ease) 1.1s; }
.v-perk.open .v-pk-lock { scale: 1.4; opacity: 0; transition: scale .4s, opacity .3s; }
@keyframes pk-shake { 25% { rotate: -10deg; } 50% { rotate: 9deg; } 75% { rotate: -5deg; } }
.v-pk-dots { display: flex; gap: .5rem; }
.v-pk-dots i { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); transition: background .3s, border-color .3s, scale .4s var(--spring-bouncy); transition-delay: calc(.25s + var(--i) * .3s); }
.v-perk.fill .v-pk-dots i { background: var(--pop); border-color: var(--pop); scale: 1.15; }
.v-pk-back { transform: rotateY(180deg); background: #fff; color: #0B0B0C; box-shadow: 0 0 0 3px var(--pop), 0 2.5rem 4rem -2rem rgba(0, 0, 0, .9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pop) 60%, transparent), 0 2.5rem 4rem -2rem rgba(0, 0, 0, .9); }
.v-pk-kick { display: inline-flex; align-items: center; gap: .45rem; font: 400 .8125rem var(--f-ui); color: #2E7D5B; }
.v-pk-kick i { width: .45rem; height: .45rem; border-radius: 50%; background: #2E7D5B; }
.v-pk-back b { font: 400 clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem)/1.02 var(--f-display); letter-spacing: -.01em; }
.v-pk-from { font: 400 .8125rem var(--f-ui); color: #5A5A60; }
.v-pk-code { padding: .45rem .9rem; border-radius: 999px; border: 1.5px dashed #C9C9CC; font: 500 .75rem var(--f-ui); letter-spacing: .08em; color: #3A3A3C; }
.v-pk-cr { position: absolute; z-index: 2; right: -1.6rem; bottom: -1.2rem; width: 5.2rem; height: 5.2rem; opacity: 0; translate: 0 1rem; transition: opacity .4s, translate .7s var(--spring-bouncy); transition-delay: .5s; }
.v-pk-cr .crt { width: 100%; height: 100%; }
.v-perk.open .v-pk-cr { opacity: 1; translate: 0 0; }
.v-pk-burst { position: absolute; z-index: 3; left: 50%; top: 50%; pointer-events: none; }
.v-pk-burst i { position: absolute; width: .45rem; height: .45rem; margin: -.225rem; border-radius: 50%; background: var(--pop); opacity: 0; rotate: var(--a); }
.v-perk.open .v-pk-burst i { animation: pk-burst 1s var(--ease) forwards; animation-delay: calc(.35s + var(--d)); }
.v-perk.open .v-pk-burst i:nth-child(3n) { background: #C9A24A; }
.v-perk.open .v-pk-burst i:nth-child(3n + 1) { background: #fff; }
@keyframes pk-burst { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-9rem) scale(.4); } }
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .slide[data-slide="perks"] { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
  .slide[data-slide="perks"] > .sl-in { flex: 0 1 auto; min-height: 0; }
  .v-perk { flex: none; height: auto; max-height: none; opacity: 1; }
  .v-pk { width: 10.5rem; }
  .v-pk-face { gap: .5rem; padding: .9rem; }
  .v-pk-lock { width: 2.4rem; height: 2.4rem; }
  .v-pk-front p, .v-pk-from { font-size: .75rem; }
  .v-pk-code { font-size: .625rem; padding: .3rem .6rem; }
  .v-pk-cr { width: 3.6rem; height: 3.6rem; right: -1.2rem; bottom: -.8rem; }
}
@media not all and (min-width: 56rem) and (orientation: landscape) { @media (max-height: 700px) { .v-pk { width: 8.4rem; } .v-pk-code, .v-pk-from { display: none; } .slide[data-slide="perks"] { gap: .5rem; } } }
@media (prefers-reduced-motion: reduce) { .v-pk-card, .v-pk-cr { transition-duration: .01s; } .v-pk-burst { display: none; } }
/* creatures: a few of the family on the floor of the slide */
.v-cr { display: grid; place-items: center; }
.v-cr-in { display: flex; align-items: end; justify-content: center; gap: clamp(.4rem, 1.5vw, 1.2rem); width: min(100%, 38rem); }
.v-cr-one { flex: 1; aspect-ratio: 1; display: grid; place-items: center; translate: 0 calc((var(--i) - 2) * (var(--i) - 2) * -.4rem); }
.v-cr-one .crt { width: 100%; height: 100%; }
.v-cr-one:nth-child(3) { flex: 1.35; }
.slide.on .v-cr-one { animation: vis-in 1s var(--spring-bouncy) both; animation-delay: calc(var(--i) * 90ms); }
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .slide[data-slide="creatures"] { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
  .slide[data-slide="creatures"] > .sl-in { flex: 0 1 auto; min-height: 0; }
  .v-cr { flex: none; height: auto; max-height: none; opacity: 1; }
  .v-cr-in { width: min(100%, 20rem); }
}
/* audience: arches */
.v-arches { display: flex; align-items: end; justify-content: center; gap: .9rem; }
.v-arches .v-tile { width: 28%; aspect-ratio: 3 / 5; border-radius: 999px 999px var(--r-md) var(--r-md); translate: 0 calc(var(--i) * -1.5rem + var(--py, 0) * (var(--i) + 1) * 12px); transition: translate .9s var(--spring-smooth); }
.v-arches .v-tile:nth-child(2) { aspect-ratio: 3 / 6; }
/* traction: a line that draws itself */
.v-spark { color: var(--pop); display: grid; place-items: center; }
.v-spark svg { width: 100%; height: 70%; overflow: visible; }
.v-spark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.slide.on .v-spark path { animation: draw 1.8s var(--ease) .3s forwards; }
.v-spark circle { fill: var(--pop); opacity: 0; transform-box: fill-box; transform-origin: center; }
.slide.on .v-spark circle { animation: pop-dot .6s var(--spring-bouncy) 1.9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop-dot { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
/* model: three glass slabs, each one higher */
.v-slabs { display: grid; place-items: center; perspective: 1000px; }
.v-slabs i { grid-area: 1 / 1; width: min(80%, 20rem); aspect-ratio: 16 / 7; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: end start; padding: 1rem; font: 400 .8125rem var(--f-ui); font-style: normal; color: rgba(255, 255, 255, .7);
  transform: rotateX(58deg) rotateZ(calc(-24deg + var(--px, 0) * 10deg)) translateZ(calc(var(--k) * 4.5rem)); transition: transform .9s var(--spring-smooth); }
.v-slabs i:nth-child(1) { --k: 0; } .v-slabs i:nth-child(2) { --k: 1; } .v-slabs i:nth-child(3) { --k: 2; border-color: var(--pop); }
.slide.on .v-slabs i { animation: slab 1s var(--spring-bouncy) both; animation-delay: calc(var(--k) * 140ms + .2s); }
@keyframes slab { from { opacity: 0; transform: rotateX(58deg) rotateZ(-24deg) translateZ(-4rem); } }
/* what this becomes: a bento of ideas, each on a picture */
.sl-wide { max-width: 76rem; }
.sl-bento { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 56rem) and (orientation: landscape) { .sl-bento { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, minmax(9rem, 1fr)); } .sl-bento article:first-child { grid-row: span 2; } .sl-bento article:last-child { grid-column: span 2; } }
.sl-bento article { position: relative; overflow: hidden; display: grid; align-content: end; gap: .35rem; min-height: 9rem; padding: 1rem 1.1rem; border-radius: var(--r-lg); background: #1A1A1C; isolation: isolate; transition: scale .6s var(--spring-bouncy); }
.sl-bento article:hover { scale: 1.02; }
.sl-bento .v-bg { position: absolute; inset: 0; z-index: -1; }
.sl-bento .v-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; scale: 1.08; translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -14px); transition: translate .9s var(--spring-smooth); }
.sl-bento .v-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(0, 0, 0, .78)); }
.sl-bento b { font: 400 clamp(1.1rem, 1rem + .6vw, 1.5rem)/1.1 var(--f-ui); }
.sl-bento p { margin: 0; font: 300 .9rem/1.4 var(--f-ui); color: rgba(255, 255, 255, .78); }
/* how: three cards that lift */
.sl-cards div { padding: 1.25rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); transition: translate .6s var(--spring-bouncy), background .3s; }
.sl-cards div:hover { translate: 0 -.4rem; background: rgba(255, 255, 255, .08); }
.slide.on .sl-cards div { animation: card-in .9s var(--spring-bouncy) both; }
.slide.on .sl-cards div:nth-child(2) { animation-delay: .1s; } .slide.on .sl-cards div:nth-child(3) { animation-delay: .2s; }
@keyframes card-in { from { opacity: 0; transform: perspective(800px) rotateX(24deg) translateY(2rem); } }
.sl-n { font: 400 .8125rem var(--f-ui); color: var(--pop); }
/* vision: a slow wall of work behind the big words */
.v-wall { position: absolute; inset: -10% -5%; max-height: none; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 75%); }
.v-wall-in { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; width: 120%; rotate: -8deg; animation: wall 40s linear infinite alternate; }
.v-wall-in .v-tile { aspect-ratio: 4 / 5; }
@keyframes wall { to { translate: -12% -8%; } }
/* the house: a small constellation. the houses sit around a bleuue concept, the lines draw in, and aayla glows */
.v-net { position: relative; width: min(100%, 24rem); aspect-ratio: 1; justify-self: center; }
.v-net-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v-net-lines line { stroke: rgba(255, 255, 255, .22); stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: 1; }
.slide.on .v-net-lines line { animation: draw .9s var(--ease) both; animation-delay: calc(.2s + var(--i) * 120ms); }
.v-node { position: absolute; translate: -50% -50%; padding: .45rem .8rem; border-radius: 999px; background: #161618; border: 1px solid rgba(255, 255, 255, .16); font: 400 clamp(.72rem, .65rem + .3vw, .95rem) var(--f-ui); color: rgba(255, 255, 255, .85); white-space: nowrap; }
.v-hub { left: 50%; top: 50%; padding: .7rem 1.1rem; background: #fff; color: #0B0B0C; border-color: #fff; font-weight: 500; }
.v-new { background: var(--pop); color: #0B0B0C; border-color: var(--pop); font: 400 clamp(1rem, .85rem + .5vw, 1.35rem) var(--f-display); box-shadow: 0 0 0 0 var(--pop); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pop) 55%, transparent); }
.slide.on .v-node { animation: node-in .6s var(--spring-bouncy) both; animation-delay: calc(.5s + var(--i, 0) * 110ms); }
.slide.on .v-new { animation: node-in .6s var(--spring-bouncy) both 1.1s, glow 2.4s var(--ease) 1.8s infinite; }
@keyframes node-in { from { opacity: 0; scale: .6; } }
@keyframes glow { 50% { box-shadow: 0 0 0 .7rem var(--pop); box-shadow: 0 0 0 .7rem color-mix(in srgb, var(--pop) 0%, transparent); } 0% { box-shadow: 0 0 0 0 var(--pop); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pop) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .v-fan-in .v-tile, .v-wall-in, .v-node, .v-net-lines line { animation: none !important; } .v-net-lines line { stroke-dashoffset: 0; } }
/* phones and upright tablets: the picture sits above the words, smaller, at full strength */
@media not all and (min-width: 56rem) and (orientation: landscape) {
  /* the picture and the words sit together in the middle of the screen, the picture a calm size above them; long slides scroll */
  .slide:has(> .sl-vis):not(.sl-photo) { grid-template-rows: minmax(0, 1fr) auto minmax(0, auto) minmax(0, 1fr); align-items: stretch; row-gap: 1.1rem; }
  .slide:has(> .sl-vis):not(.sl-photo) > .sl-vis { grid-row: 2; opacity: 1; height: clamp(9rem, 26vh, 13rem); height: clamp(9rem, 26svh, 13rem); max-height: none; }
  .slide:has(> .sl-vis):not(.sl-photo) > .sl-in { grid-row: 3; align-self: start; padding-top: 0; }
  .slide:has(> .sl-vis):not(.sl-photo) .sl-mark { font-size: clamp(4rem, 2rem + 12vw, 7rem); }
  .slide:has(> .sl-vis):not(.sl-photo) .sl-h { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 3rem); }
  .v-fan-in { width: 5.6rem; }
  .v-net { width: 100%; height: 100%; aspect-ratio: auto; }
  .v-grid { width: min(100%, 15rem); gap: .3rem; }
  .v-device { width: 6.6rem; border-radius: 1.2rem; padding: .3rem; }
  .v-screen { border-radius: .95rem; padding: .7rem .4rem .4rem; gap: .25rem; }
  .v-wordmark { font-size: .75rem; } .v-search { height: 1.1rem; font-size: .4rem; padding: 0 .35rem; }
  .v-arches .v-tile { width: 18%; }
  .v-slabs i { width: 11rem; padding: .5rem; font-size: .7rem; transform: rotateX(58deg) rotateZ(-24deg) translateZ(calc(var(--k) * 2.2rem)); }
  .v-spark svg { height: 90%; }
}
@media (orientation: landscape) and (max-height: 32rem) { .sl-h { font-size: clamp(1.8rem, 1rem + 3vw, 3rem); } .sl-stats b { font-size: 2.6rem; } .deck-top { height: 2.6rem; } }

/* ---------- the fine print ---------- */
.legal { padding-block: clamp(1.5rem, 4vw, 4rem) 2rem; }
.legal-head { display: grid; gap: 1rem; padding-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); }
.legal-head .display { font-size: clamp(2.8rem, 1.8rem + 4vw, 6rem); }
.legal-body { display: grid; gap: 2rem; padding-top: 2rem; }
@media (min-width: 56rem) and (orientation: landscape) { .legal-body { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; } .legal-toc { position: sticky; top: calc(var(--bar-h) + 2rem); align-self: start; max-height: calc(100vh - var(--bar-h) - 4rem); max-height: calc(100svh - var(--bar-h) - 4rem); overflow: auto; } }
.legal-toc summary { cursor: pointer; font: 400 .875rem var(--f-ui); list-style: none; display: flex; justify-content: space-between; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--bg-2); }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc ol { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .1rem; }
.legal-toc a { display: block; padding: .4rem 1rem; border-radius: var(--r-sm); font: 400 .8125rem/1.35 var(--f-ui); color: var(--muted); transition: color .2s, background .2s; }
.legal-toc a.on { color: var(--ink); background: var(--fill); }
.legal-text { max-width: 44rem; }
.legal-text section { scroll-margin-top: calc(var(--bar-h) + 2rem); padding-bottom: 1.5rem; }
.legal-text h2 { font: 400 clamp(1.5rem, 1.25rem + 1vw, 2.1rem)/1.1 var(--f-ui); margin: 1.5rem 0 1rem; }
.legal-text p, .legal-text li { font: 300 1rem/1.7 var(--f-body); color: var(--ink-2); }
.legal-text p { margin: 0 0 1rem; }
.legal-text b { font-weight: 700; color: var(--ink); }
.legal-text a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.legal-text ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal-text table { width: 100%; border-collapse: collapse; font: 400 .875rem/1.45 var(--f-ui); margin-bottom: 1rem; display: block; overflow-x: auto; }
.legal-text th, .legal-text td { text-align: left; padding: .65rem .75rem .65rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-text th { color: var(--muted); font-weight: 400; }

/* ---------- ask aayla ---------- */
.ask { grid-template-rows: auto auto auto auto auto; gap: 1.25rem; align-content: start; }
.ask-head { display: grid; gap: 1rem; padding-top: clamp(1rem, 5vh, 3rem); }
.ask-log { display: grid; gap: .75rem; align-content: start; }
.ask-log:empty { display: none; }
.msg { max-width: min(36rem, 88%); padding: .85rem 1.1rem; border-radius: 1.25rem; font: 300 1.0625rem/1.5 var(--f-body); animation: answer-in .7s var(--spring-bouncy) both; }
.msg.me { justify-self: end; background: var(--ink); color: var(--bg); border-bottom-right-radius: .4rem; font-weight: 400; }
.msg.aayla { justify-self: start; background: var(--bg-2); border-bottom-left-radius: .4rem; }
.msg a { text-decoration: underline; text-underline-offset: 3px; }
.ask-form { position: sticky; bottom: calc(var(--tab-h) + 1.4rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: .5rem; align-items: center; padding: .4rem .4rem .4rem .5rem; border-radius: 999px; background: var(--glass-strong); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shade); }
@media (min-width: 56rem) and (orientation: landscape) { .ask-form { bottom: 1.5rem; } }
.ask-form .input { height: 3rem; border-radius: 999px; background: transparent; }
.ask-form .input:focus { box-shadow: none; border-color: transparent; background: transparent; }
.ask-fine { margin-top: -.5rem; }

/* ---------- footer: one big sign-up, three short columns, the disclosure ---------- */
.foot { margin-top: clamp(4rem, 8vw, 8rem); padding-block: clamp(2.5rem, 5vw, 4.5rem) 2rem; border-top: 1px solid var(--line); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); }
/* phones: the footer opens on a fan of real faces */
.foot-card { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.25rem 1rem 1rem; border-radius: var(--r-xl); }
.foot-card[hidden] { display: none; }
.foot-fan { position: relative; flex: none; width: 6.4rem; height: 5.2rem; }
.foot-fan > span { position: absolute; left: 50%; bottom: 0; width: 3.4rem; aspect-ratio: 4 / 5; translate: -50% 0; border-radius: .7rem; overflow: hidden; border: 2px solid var(--bg); box-shadow: var(--lift-shade); transform-origin: 50% 130%; transform: rotate(calc((var(--i) - 1.5) * 14deg)); animation: fan-in .9s var(--spring-bouncy) backwards; animation-delay: calc(var(--i) * 70ms); }
.foot-fan .cover { height: 100%; } .foot-fan .cover .mono { font-size: 1.2rem; }
@keyframes fan-in { from { transform: rotate(0deg) translateY(.6rem); opacity: 0; } }
.foot-card-copy { display: grid; gap: .2rem; font: 400 .8125rem/1.4 var(--f-ui); color: var(--muted); }
.foot-card-copy b { font: 400 1.05rem/1.2 var(--f-ui); color: var(--ink); }
@media (min-width: 56rem) and (orientation: landscape) { .foot-card { display: none; } }
@media (min-width: 56rem) and (orientation: landscape) { .foot-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .foot-base { grid-column: 1 / -1; } }
.sub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.sub .h2 { max-width: 14ch; }
.sub-row { position: relative; display: flex; align-items: center; height: 3.6rem; padding: .35rem .35rem .35rem 1.25rem; border-radius: 999px; background: var(--fill); border: 1px solid transparent; max-width: 30rem; transition: border-color .3s, background .3s, box-shadow .3s; }
.sub-row:focus-within { background: var(--surface); border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.sub-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 max(16px, 1rem) var(--f-body); }
.sub-go { flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); position: relative; transition: background .3s, scale .5s var(--spring-snappy); }
.sub-go svg { position: absolute; transition: opacity .25s, scale .6s var(--spring-bouncy), translate .5s var(--spring-smooth); }
.sub-check { opacity: 0; scale: .4; }
.sub.busy .sub-arrow { translate: .6rem 0; opacity: 0; }
.sub.done .sub-go { background: var(--accent); color: var(--on-accent); }
.sub.done .sub-arrow { opacity: 0; }
.sub.done .sub-check { opacity: 1; scale: 1; }
.sub.done .sub-row { animation: jiggle .7s var(--spring-bouncy) .5s both; background: var(--tint); border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.sub-sent { position: absolute; inset: 0 3.6rem 0 1.25rem; display: flex; align-items: center; pointer-events: none; overflow: hidden; }
.sub-to { font: 400 .95rem var(--f-ui); color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; translate: 0 .8rem; }
.sub.done .sub-input { opacity: 0; transition: opacity .25s; }
.sub.done .sub-to { animation: sub-to .7s var(--spring-bouncy) .75s both; }
@keyframes sub-to { to { opacity: 1; translate: 0 0; } }
.sub-fly { position: absolute; left: 1.2rem; top: 50%; width: 1.6rem; height: 1.3rem; margin-top: -.65rem; color: var(--accent); opacity: 0; pointer-events: none; }
.sub-fly svg { width: 100%; height: 100%; display: block; }
.sub.done .sub-fly { animation: sub-fly 1.1s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes sub-fly { 0% { opacity: 0; scale: .4; translate: 0 0; rotate: 0deg; } 15% { opacity: 1; scale: 1.15; } 45% { translate: 40% -1.2rem; rotate: -8deg; } 100% { opacity: 0; scale: .6; translate: 22rem -6rem; rotate: -18deg; } }
.sub.done .sub-check path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: sub-draw .5s var(--ease) .55s forwards; }
@keyframes sub-draw { to { stroke-dashoffset: 0; } }
.sub.done .sub-note { animation: pop-in .6s var(--spring-bouncy) .9s both; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .sub.done .sub-to { opacity: 1; translate: 0 0; animation: none; } .sub.done .sub-fly { display: none; } }
.sub.shake .sub-row { animation: shake .4s var(--ease); }
@keyframes shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
.sub-note { font: 400 .8125rem/1.45 var(--f-ui); color: var(--muted); margin: 0; max-width: 40ch; }
.foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.foot-links div { display: grid; gap: .55rem; align-content: start; }
.foot-links .meta { margin-bottom: .2rem; }
.foot-links a { font: 400 .9375rem var(--f-ui); width: fit-content; transition: color .2s, translate .5s var(--spring-smooth); }
@media (hover: hover) { .foot-links a:hover { color: var(--accent); translate: 3px 0; } }
.foot-btn { justify-self: start; text-align: left; padding: 0; background: none; border: 0; font: 400 .9375rem var(--f-ui); color: inherit; cursor: pointer; }
.foot-motion { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
/* reduce motion, chosen in the footer: everything still fades and moves, briefly and once. nothing loops, flies or spins. */
html.calm { scroll-behavior: auto; }
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .2s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .15s !important; transition-delay: 0s !important; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.foot-base .wordmark { padding: 0; }
.wordmark .tm { font: 400 .36em var(--f-ui); vertical-align: super; margin-left: .12em; letter-spacing: 0; color: var(--ink-2); }
.foot-base p { font: 400 .8125rem var(--f-ui); color: var(--muted); margin: 0; }
.foot-base .foot-copy { flex-basis: 100%; font-size: .75rem; }
/* phones and upright tablets: each group is one fine line, label on the left, links flowing after it */
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .foot { padding-block: 2.5rem 1.5rem; }
  .foot-in { gap: 2.25rem; }
  .foot-links { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .foot-links div { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; padding: .95rem 0 .95rem 6.25rem; border-bottom: 1px solid var(--line); }
  .foot-links .meta { position: absolute; left: 0; top: 1.05rem; margin: 0; font-size: .75rem; }
  .foot-links a, .foot-links .foot-btn:not(.foot-motion) { font-size: .875rem; color: var(--ink-2); }
  .foot-base { flex-direction: column; align-items: flex-start; gap: .6rem; padding-top: 0; border-top: 0; }
  .foot-base .wordmark { font-size: 1.6rem; }
  .foot-base p { font-size: .72rem; }
  .foot-base .foot-copy { flex-basis: auto; }
}

/* ---------- share sheet ---------- */
.share-sheet { position: fixed; inset: 0; z-index: 96; display: grid; align-items: end; justify-items: center; background: var(--bg); background: color-mix(in srgb, var(--bg) 40%, transparent); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); opacity: 0; transition: opacity .3s; }
.share-sheet.on { opacity: 1; }
@media (min-width: 56rem) and (orientation: landscape) { .share-sheet { align-items: center; } }
.share-in { position: relative; width: min(100% - 1rem, 30rem); margin-bottom: .5rem; padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-xl); display: grid; gap: .85rem; translate: 0 110%; transition: translate .6s var(--spring-smooth); }
.share-sheet.on .share-in { translate: 0 0; }
.share-title { margin: 0; font: 400 1.9rem/1 var(--f-ui); padding-right: 3rem; }
.share-card { width: 100%; aspect-ratio: 1200 / 630; border-radius: var(--r-md); border: 1px solid var(--line); object-fit: cover; animation: pop-in .6s var(--spring-bouncy) both; }
.share-url { margin: 0; font: 400 .8125rem var(--f-ui); color: var(--muted); word-break: break-all; }
.share-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-row .btn { flex: 1 1 auto; }
.share-bio { color: var(--accent); justify-self: start; }
.share-close { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; }

/* ---------- get found: links that open when tapped, the price slider, searches typed out, the email code ---------- */
.lks { display: grid; gap: .45rem; }
.lk { border-radius: var(--r-md); background: var(--fill); transition: background .3s; }
.lk-head { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 400 .9375rem var(--f-ui); }
.lk-head b { font-weight: 400; flex: none; }
.lk-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .8125rem; text-align: right; }
.lk.open .lk-val { visibility: hidden; }
.lk-plus { position: relative; flex: none; width: .8rem; height: .8rem; }
.lk-plus::before, .lk-plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; border-radius: 2px; background: var(--ink-2); transition: rotate .4s var(--spring-bouncy); }
.lk-plus::after { rotate: 90deg; }
.lk.open .lk-plus::after { rotate: 0deg; }
.lk-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.lk-body > div { overflow: hidden; padding: 0 .55rem; }
.lk.open .lk-body { grid-template-rows: 1fr; }
.lk.open .lk-body > div { padding-bottom: .55rem; }
.lk-body .input { background: var(--surface); }
.ps { display: grid; gap: .6rem; padding: 1rem 1rem .8rem; border-radius: var(--r-lg); background: var(--fill); --v: 0; }
.ps-read { display: flex; align-items: baseline; gap: .7rem; min-height: 2.6rem; }
.ps-read b { display: inline-flex; font: 400 2.2rem/1 var(--f-display); color: var(--muted); }
.ps.set .ps-read b { color: var(--accent); }
.ps-read b i { font-style: normal; display: inline-block; animation: ps-pop .5s var(--spring-bouncy) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes ps-pop { from { opacity: 0; translate: 0 .5rem; scale: .6; } }
.ps-read span { font: 400 .9375rem var(--f-ui); color: var(--ink-2); }
.ps:not(.set) .ps-read span { color: var(--muted); }
.ps-track { position: relative; height: 2.2rem; display: grid; align-items: center; }
.ps-notches { position: absolute; left: .7rem; right: .7rem; top: 50%; height: 0; display: flex; justify-content: space-between; pointer-events: none; }
.ps-notches i { width: .55rem; height: .55rem; margin-top: -.275rem; border-radius: 50%; background: var(--line); transition: background .3s, scale .4s var(--spring-bouncy); }
.ps-notches i.on { background: var(--accent); scale: 1.15; }
.ps-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2.2rem; margin: 0; background: transparent; cursor: pointer; position: relative; z-index: 1; }
.ps-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--accent) calc(var(--v) * 100%), var(--line) calc(var(--v) * 100%)); }
.ps:not(.set) .ps-range::-webkit-slider-runnable-track { background: var(--line); }
.ps-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
.ps-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
.ps-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: calc(2px - .75rem); border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 .3rem .8rem -.3rem rgba(0, 0, 0, .35); transition: scale .3s var(--spring-bouncy); }
.ps-range::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.ps-range:active::-webkit-slider-thumb { scale: 1.15; }
.ps-float { position: absolute; left: calc(.7rem + var(--v) * (100% - 1.4rem)); top: -.2rem; translate: -50% 0; font: 400 1.2rem var(--f-display); font-style: normal; color: var(--accent); pointer-events: none; animation: ps-float .9s var(--ease) forwards; }
@keyframes ps-float { from { opacity: 1; translate: -50% 0; } to { opacity: 0; translate: -50% -1.8rem; } }
.ps-ends { display: flex; justify-content: space-between; font: 400 .75rem var(--f-ui); color: var(--muted); }
.gf-typer { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.gf-ty { display: inline-flex; align-items: center; gap: .55rem; height: 2.8rem; padding: 0 1.1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 400 .9375rem var(--f-ui); min-width: min(100%, 16rem); }
.gf-ty svg { width: 1rem; height: 1rem; flex: none; color: var(--muted); }
.gf-ty-caret { width: 1.5px; height: 1.1rem; background: var(--accent); animation: blink-caret 1s steps(1) infinite; }
@keyframes blink-caret { 50% { opacity: 0; } }
.gf-change { justify-self: start; }
.gf-all { margin-top: .4rem; }
.gf-all .pick svg { width: .85rem; height: .85rem; }
.gf-jump { display: grid; gap: .35rem; margin-top: .4rem; max-height: 50vh; max-height: 50svh; overflow: auto; }
.gf-jump-row { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-radius: var(--r-md); border: 0; background: var(--fill); color: var(--ink); font: 400 .9375rem var(--f-ui); cursor: pointer; text-align: left; }
.gf-jump-row svg { width: .9rem; height: .9rem; color: var(--muted); }
.agree a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.code-in { font: 400 1.9rem/1 var(--f-display); letter-spacing: .5em; text-align: center; height: 4rem; max-width: 18rem; padding-left: .5em; }
@media (prefers-reduced-motion: reduce) { .lk-body, .lk-plus::after { transition: none; } .ps-read b i, .ps-float, .gf-ty-caret { animation: none; } }

/* ---------- creatures: small living symbols. matte, quiet, slow; a look, a turn or a little heart now and then ---------- */
.crt { position: relative; display: block; width: 88%; height: 88%; }
:is(.pc-sym, .pf-sym, .sym, .ed-snip-media .pc-sym, .crp-stage, .crp-thumb) .crt > svg, .crt > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.crt > svg { position: relative; }
.pf-sym .crt { width: 92%; height: 92%; }
.crt .c-body { transform-origin: 50px 88px; animation: c-breathe 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.c-floor { position: absolute; left: 28%; width: 44%; bottom: 5.5%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .16), transparent); transform-origin: center; pointer-events: none; }
/* the shadow answers the body: smaller and lighter when it leaves the ground, wider when it lands */
.crt-pip .c-floor { animation: c-f-hop 3.2s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes c-f-hop { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 80% { transform: scale(.8); opacity: .65; } 90% { transform: scale(1.06, 1); } }
:is(.crt-puff, .crt-glim) .c-floor { animation: c-f-drift 5.5s ease-in-out infinite; }
@keyframes c-f-drift { 50% { transform: scale(.88); opacity: .7; } }
.crt-glim .c-floor { bottom: 2%; }
.crt-3d { perspective: 600px; }
.crt.crt-3d > svg { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(var(--ry, 0deg)); }
.crt.crt-3d > .c-back { transform: rotateY(calc(var(--ry, 0deg) + 180deg)); }
.crt .c-eyes { transform-origin: 50px 50px; animation: c-blink 6.5s infinite; }
.crt .c-look { transition: transform .9s var(--ease); }
@keyframes c-breathe { 50% { transform: scale(.985, 1.025); } }
@keyframes c-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.12); } }
.crt .c-leaf { transform-origin: 50px 30px; animation: c-sway 5s ease-in-out infinite; }
@keyframes c-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.crt .c-drift { animation: c-drift 5.5s ease-in-out infinite; }
@keyframes c-drift { 50% { transform: translateY(-4px); } }
.crt .c-hop { transform-origin: 50px 88px; animation: c-hop 3.2s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes c-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px) scale(.97, 1.03); } 90% { transform: translateY(0) scale(1.03, .97); } }
.crt .c-ant { transform-origin: 50px 44px; animation: c-ant 3s ease-in-out infinite; }
@keyframes c-ant { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.crt .c-tend path { transform-box: fill-box; transform-origin: top center; animation: c-tend 4.5s ease-in-out infinite; }
.crt .c-tend path:nth-child(2) { animation-delay: -1.5s; } .crt .c-tend path:nth-child(3) { animation-delay: -3s; }
@keyframes c-tend { 0%, 100% { transform: skewX(-6deg); } 50% { transform: skewX(6deg); } }
.crt .c-halo { animation: c-halo 4.5s ease-in-out infinite; }
@keyframes c-halo { 0%, 100% { opacity: .25; } 50% { opacity: .55; } }
.crt .c-petals { transform-origin: 50px 54px; animation: c-round 24s linear infinite; }
@keyframes c-round { to { transform: rotate(360deg); } }
.crt .c-peek { transform-origin: 50px 60px; animation: c-peek 8s infinite; }
@keyframes c-peek { 0%, 35% { transform: scaleY(.1); } 42%, 72% { transform: scaleY(1); } 78%, 100% { transform: scaleY(.1); } }
.crt .c-hat { transform-origin: 30px 44px; }
.crt-tint { animation: c-tint 14s linear infinite; }
@keyframes c-tint { to { filter: hue-rotate(360deg); } }
.crt.c-turn > .c-front { animation: c-turn 1.4s var(--ease); }
@keyframes c-turn { 50% { transform: scaleX(-1); } }
.c-emote { position: absolute; left: 62%; top: -8%; width: 32%; height: 32%; pointer-events: none; animation: c-up 1.8s var(--ease) forwards; }
.c-emote svg { width: 100%; height: 100%; }
@keyframes c-up { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 25% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-14px) scale(.9); } }
/* each one's own move, when tapped */
.c-move-squish > .c-front { animation: c-m-squish .9s var(--spring-bouncy); }
@keyframes c-m-squish { 30% { transform: scale(1.18, .8); } 60% { transform: scale(.9, 1.12) translateY(-6%); } }
.c-move-hop > .c-front { animation: c-m-hop 1s var(--ease); }
@keyframes c-m-hop { 20% { transform: translateY(-16%) scale(.95, 1.05); } 40% { transform: translateY(0) scale(1.06, .94); } 60% { transform: translateY(-9%); } 80% { transform: translateY(0); } }
.c-move-spin > .c-front { animation: c-m-spin 1.1s var(--ease); }
@keyframes c-m-spin { to { transform: rotate(360deg); } }
.c-move-float > .c-front { animation: c-m-float 1.6s var(--ease); }
@keyframes c-m-float { 50% { transform: translateY(-18%) rotate(-6deg); } }
.c-move-wobble > .c-front { animation: c-m-wob 1s var(--spring-bouncy); }
@keyframes c-m-wob { 25% { transform: rotate(-12deg) scale(1.04); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
.c-move-glow > .c-front { animation: c-m-glow 1.4s var(--ease); }
@keyframes c-m-glow { 40% { transform: scale(1.12); filter: brightness(1.25) drop-shadow(0 0 14px rgba(180, 150, 220, .8)); } }
.c-move-wake > .c-front { animation: c-m-wake 1.2s var(--spring-bouncy); }
@keyframes c-m-wake { 30% { transform: translateY(-5%) rotate(-8deg); } 60% { transform: rotate(8deg); } }
.c-move-tip .c-hat { animation: c-m-tip 1.3s var(--spring-bouncy); }
/* the shadow during a move: it stays on the ground */
.c-move-squish > .c-floor { animation: c-f-squish .9s var(--spring-bouncy); }
@keyframes c-f-squish { 30% { transform: scaleX(1.25); } 60% { transform: scale(.85); opacity: .7; } }
.c-move-hop > .c-floor { animation: c-f-hop2 1s var(--ease); }
@keyframes c-f-hop2 { 20% { transform: scale(.72); opacity: .5; } 40% { transform: scale(1.1, 1); opacity: 1; } 60% { transform: scale(.82); opacity: .7; } 80% { transform: scale(1); } }
.c-move-float > .c-floor { animation: c-f-float 1.6s var(--ease); }
@keyframes c-f-float { 50% { transform: scale(.7); opacity: .45; } }
.c-move-wake > .c-floor { animation: c-f-float 1.2s var(--spring-bouncy); }
.c-move-glow > .c-floor { animation: c-f-glow 1.4s var(--ease); }
@keyframes c-f-glow { 40% { transform: scale(1.15); opacity: .6; } }
@keyframes c-m-tip { 35% { transform: translate(-4px, -14px) rotate(-24deg); } 70% { transform: translate(0, -4px) rotate(4deg); } }
/* cards stay calm: on a page full of people, creatures only breathe */
.pc-sym .crt .c-hop, .pc-sym .crt .c-petals, .pc-sym .crt .c-drift { animation: none; }
:is(.pc-sym, .ed-snip-media, .crp-thumb) .c-floor { display: none; }
html.calm .crt *, html.calm .crt-tint { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .crt *, .crt-tint, .c-emote { animation: none !important; } }

/* the creatures: a section of their own under the symbols, each in the same square, and the pop-up they open */
.cr-sec { display: grid; gap: .45rem; margin-top: .3rem; }
.cr-head { display: inline-flex; align-items: center; gap: .45rem; }
.cr-i { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font: italic 500 .6875rem/1 var(--f-display); color: var(--ink-2); display: grid; place-items: center; padding: 0; cursor: pointer; }
.sym.sym-crt { position: relative; }
.sym.sym-crt .crt { width: 74%; height: 74%; }
.sym.sym-crt .c-floor { display: none; }
.sym.sym-crt.locked .crt { filter: grayscale(1) opacity(.42); }
:is(.sym-crt, .crp-thumb).locked .crt-tint { animation: none; }
.sym.sym-crt .crp-lock { top: .15rem; right: .15rem; width: .95rem; height: .95rem; }
.sym.sym-crt .crp-lock svg { width: .48rem; height: .48rem; }
.sym.sym-crt[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.crp { position: fixed; inset: 0; z-index: 97; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; justify-items: center; background: var(--bg); background: color-mix(in srgb, var(--bg) 45%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transition: opacity .3s; }
.crp.on { opacity: 1; }
@media (min-width: 56rem) and (orientation: landscape) { .crp { align-items: center; } }
.crp-in { position: relative; width: min(100% - 1rem, 28rem); margin-bottom: .5rem; padding: 1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-xl); translate: 0 110%; transition: translate .6s var(--spring-smooth); }
.crp.on .crp-in { translate: 0 0; }
.crp-top { display: flex; align-items: center; justify-content: space-between; }
.crp-x { width: 2.4rem; height: 2.4rem; }
.crp-stage { position: relative; height: 13.5rem; display: grid; place-items: center; perspective: 700px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.crp-stage.grab { cursor: grabbing; }
.crp-big { position: relative; width: 10.5rem; height: 10.5rem; }
.crp-big .crt { width: 100%; height: 100%; }
.crp-big .crt > svg { transition: transform .8s var(--spring-bouncy); }
.crp-big .crt .c-floor { transition: transform .8s var(--spring-bouncy); }
.crp-big.dragging .crt > svg, .crp-big.dragging .crt .c-floor { transition: none; }
.crp-meta { text-align: center; min-height: 3.2rem; margin-top: -.3rem; }
.crp-meta b { display: block; font: 400 1.35rem var(--f-ui); }
.crp-meta span { display: block; font: 400 .8125rem var(--f-ui); color: var(--muted); }
.crp-meta span.need { color: var(--accent); }
.crp-hint { margin: .1rem 0 .7rem; text-align: center; font: 400 .75rem var(--f-ui); color: var(--muted); }
.crp-strip { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .1rem .5rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.crp-strip::-webkit-scrollbar { display: none; }
.crp-thumb { position: relative; flex: none; width: 4rem; height: 4rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--fill); display: grid; place-items: center; padding: 0; scroll-snap-align: center; cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .4s var(--spring-bouncy); }
.crp-thumb .crt { width: 76%; height: 76%; }
.crp-thumb.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: translateY(-2px); }
.crp-thumb.locked .crt { filter: grayscale(1) opacity(.42); }
.crp-lock { position: absolute; top: .25rem; right: .25rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--muted); }
.crp-lock svg { width: .55rem; height: .55rem; }
.crp-go { width: 100%; margin-top: .6rem; }
.crp-go:disabled { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .crp-in, .crp-big { transition-duration: .01s; } }

/* ---------- recommend someone: short steps that slide, a card that builds as you type, then sealed ---------- */
.rec { position: fixed; inset: 0; z-index: 96; display: grid; align-items: end; justify-items: center; background: var(--bg); background: color-mix(in srgb, var(--bg) 40%, transparent); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); opacity: 0; transition: opacity .3s; }
.rec.on { opacity: 1; }
@media (min-width: 56rem) and (orientation: landscape) { .rec { align-items: center; } }
.rec-in { position: relative; width: min(100% - 1rem, 32rem); max-height: calc(100vh - 1rem); max-height: calc(100svh - 1rem); overflow: hidden auto; overscroll-behavior: contain; margin-bottom: .5rem; padding: 1.15rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-xl); display: grid; gap: .8rem; translate: 0 110%; transition: translate .6s var(--spring-smooth); }
.rec.on .rec-in { translate: 0 0; }
.rec-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7rem 1rem; }
.rec-x { width: 2.4rem; height: 2.4rem; }
.rec-prog { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.rec-prog i { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.rec-prog i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--spring-smooth); }
.rec-prog i.on::after { transform: scaleX(1); }
.rec.sealed .rec-prog i::after { background: var(--ink); }
/* every step sits in the same place; the one you're on slides in, the last one slides out to the left */
.rec-stage { display: grid; }
.rec-step { grid-area: 1 / 1; display: grid; gap: .75rem; align-content: start; min-width: 0; opacity: 0; translate: 2.5rem 0; pointer-events: none; visibility: hidden; transition: opacity .35s var(--ease), translate .6s var(--spring-smooth), visibility 0s .6s; }
.rec-step.past { translate: -2.5rem 0; }
.rec-step.on { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; transition-delay: .08s, .08s, 0s; }
.rec-step > * { margin: 0; }
.rec-title { font: 400 1.75rem/1.05 var(--f-ui); letter-spacing: -.01em; }
.rec-small { font-size: .8125rem; }
.rec-say { position: relative; border-radius: var(--r-md); overflow: hidden; }
.rec-say .input.area { min-height: 6.5rem; }
/* reading: a soft light passes over what they wrote while aayla fills in the details */
.rec-scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, var(--accent) 50%, transparent 70%); background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 70%); background-size: 250% 100%; opacity: 0; }
.rec.reading .rec-scan { opacity: 1; animation: rec-scan 1.1s var(--ease) infinite; }
@keyframes rec-scan { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.rec-reading { font: 400 .8125rem var(--f-ui); color: var(--accent); min-height: 1.1em; }
.rec.reading .rec-reading::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: rec-dots 1.2s steps(4) infinite; }
@keyframes rec-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
/* the card they're making, the way it'll look on aayla */
.rec-card { display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem .7rem .7rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 .75rem 2rem -1.25rem rgba(11, 11, 12, .35); animation: rec-pop .7s var(--spring-bouncy) both; }
.rec-card .cover { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; }
.rec-card .cover .mono { font-size: 1.15rem; }
.rec-card-body { display: grid; gap: .15rem; min-width: 0; }
.rec-card-body > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-card-body b { font: 400 1.05rem var(--f-ui); }
.rec-card-body span { font: 400 .8125rem var(--f-ui); color: var(--ink-2); }
.rec-card-body .rec-at { color: var(--accent); }
@keyframes rec-pop { from { opacity: 0; scale: .9; translate: 0 .5rem; } }
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .65rem; }
.rec-grid > :nth-child(-n + 2) { grid-column: 1 / -1; }
@media (max-width: 22rem) { .rec-grid { grid-template-columns: minmax(0, 1fr); } }
.rec-here { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .4rem .8rem; padding: .8rem; border-radius: var(--r-lg); background: var(--accent-soft); animation: rec-pop .6s var(--spring-bouncy) both; }
.rec-here[hidden] { display: none; }
.rec-here-face .cover { width: 2.6rem; height: 2.6rem; border-radius: 50%; }
.rec-here b { display: block; font: 400 .9375rem var(--f-ui); }
.rec-here .meta { font-size: .8125rem; }
.rec-here .btn { grid-column: 1 / -1; justify-self: start; }
.rec-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.rec-chips .chip { height: 2.1rem; font-size: .8125rem; animation: rec-pop .5s var(--spring-bouncy) both; animation-delay: calc(var(--i) * 45ms); }
.rec-mine { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font: 400 .9375rem var(--f-ui); color: var(--ink); text-align: left; cursor: pointer; }
.rec-tick { flex: none; width: 1.15rem; height: 1.15rem; border-radius: .35rem; border: 1.5px solid var(--line); display: grid; place-items: center; transition: background .25s, border-color .25s; }
.rec-mine[aria-pressed="true"] { border-color: var(--accent); }
.rec-mine[aria-pressed="true"] .rec-tick { background: var(--accent); border-color: var(--accent); }
.rec-mine[aria-pressed="true"] .rec-tick::after { content: ""; width: .32rem; height: .6rem; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -1px; }
.rec-mine-in { display: grid; gap: .5rem; animation: rec-pop .5s var(--spring-bouncy) both; }
.rec-mine-in[hidden] { display: none; }
.rec-foot { display: flex; gap: .5rem; }
.rec-foot[hidden] { display: none; }
.rec-foot [data-r-next] { flex: 1; }
.rec-foot [data-r-back][hidden] { display: none; }
.rec-note { margin: 0; font: 400 .75rem/1.4 var(--f-ui); color: var(--muted); }
.rec.sealed .rec-note { display: none; }
/* sealed: the card settles in, tilts, and gets its stamp */
.rec-seal { position: relative; padding: .4rem 0 .8rem; }
.rec-card-sealed { animation: rec-seal 1s var(--spring-bouncy) both; }
@keyframes rec-seal { 0% { opacity: 0; scale: 1.08; translate: 0 -.6rem; rotate: 0deg; } 60% { opacity: 1; } 100% { rotate: -1.5deg; } }
.rec-stamp { position: absolute; right: .6rem; bottom: .1rem; padding: .3rem .7rem; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); background: var(--surface); font: 500 .75rem var(--f-ui); letter-spacing: .04em; rotate: 6deg; animation: rec-stamp .6s var(--spring-bouncy) .55s both; }
@keyframes rec-stamp { from { opacity: 0; scale: 1.8; rotate: -10deg; } }
.rec-share .btn { flex: 1 1 calc(50% - .5rem); }
@media (prefers-reduced-motion: reduce) { .rec-step, .rec-in { transition-duration: .01s; } .rec-card, .rec-card-sealed, .rec-stamp, .rec-chips .chip, .rec-here, .rec-mine-in { animation: none; } .rec.reading .rec-scan { animation: none; opacity: .5; } }

/* ---------- someone's own invite (/r/<code>): what people said, then the page they could have ---------- */
.iv { display: grid; gap: 2.2rem; padding-block: 2rem 4rem; max-width: 40rem; }
.iv-wait { padding-block: 4rem; }
.iv-title { margin: .7rem 0 0; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); line-height: 1.02; text-wrap: balance; }
.iv-you { margin: 0; justify-self: start; padding: .6rem 1rem; border-radius: 999px; font: 400 .875rem var(--f-ui); color: var(--accent); }
.iv-words { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; }
.iv-words li { justify-self: start; max-width: 100%; padding: .7rem 1rem; border-radius: 1.2rem 1.2rem 1.2rem .35rem; font: 400 .9375rem/1.4 var(--f-ui); color: var(--ink-2); opacity: 0; translate: 0 .6rem; }
.iv.on .iv-words li { opacity: 1; translate: 0 0; transition: opacity .5s var(--ease), translate .8s var(--spring-bouncy); transition-delay: calc(.5s + var(--i) * .35s); }
.iv-page { display: grid; gap: 1rem; padding: 1.25rem; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.iv-label { margin: 0; font: 400 .8125rem var(--f-ui); color: var(--muted); }
.iv-card { display: flex; align-items: center; gap: .9rem; }
.iv-card .cover { flex: none; width: 4.2rem; height: 4.2rem; border-radius: 50%; }
.iv-card .cover .mono { font-size: 1.4rem; }
.iv-card-body { display: grid; gap: .2rem; min-width: 0; }
.iv-card-body b { font: 400 1.25rem var(--f-ui); }
.iv-card-body > span { font: 400 .875rem var(--f-ui); color: var(--ink-2); }
.iv-found { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent) !important; font-size: .8125rem !important; }
.iv-found i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: iv-ping 2.4s var(--ease) infinite; }
@keyframes iv-ping { 0% { box-shadow: 0 0 0 0 var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 .5rem transparent; } }
.iv-why { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.iv-why li { display: flex; align-items: baseline; gap: .7rem; font: 400 .9375rem/1.4 var(--f-ui); }
.iv-why .num { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: .75rem; }
.iv-go { justify-self: stretch; }
.iv-about { justify-self: center; font: 400 .875rem var(--f-ui); color: var(--ink-2); }
.iv-note { display: grid; gap: .9rem; padding-block: 3rem; justify-items: start; }
@media (prefers-reduced-motion: reduce) { .iv-words li { opacity: 1; translate: 0 0; } .iv-found i { animation: none; } }

/* ---------- the one notice ---------- */
.cookie { position: fixed; z-index: 80; left: .75rem; right: .75rem; bottom: calc(var(--tab-h) + 1.6rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: .9rem; padding: .85rem .85rem .85rem 1.1rem; border-radius: var(--r-lg); translate: 0 1rem; opacity: 0; transition: translate .7s var(--spring-bouncy), opacity .35s; }
.cookie.on { translate: 0 0; opacity: 1; }
.cookie p { margin: 0; font: 400 .8125rem/1.45 var(--f-ui); color: var(--ink-2); flex: 1; }
.cookie .link { font-size: .8125rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 56rem) and (orientation: landscape) { .cookie { left: auto; right: 1.25rem; bottom: 1.25rem; width: 26rem; } }

/* ---------- intro: the a becomes a magnifying glass, the glass becomes the search bar ---------- */
html.intro-on body > :not(.intro):not(.gate) { visibility: hidden; }
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer; background: var(--bg); transition: background-color .7s var(--ease); }
.intro.clear { background: transparent; pointer-events: none; }
.intro > .intro-word, .intro > .intro-mark { grid-area: 1 / 1; }
.intro-word { display: flex; font: 400 clamp(7rem, 36vw, 24rem)/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); perspective: 900px; transform-origin: center; }
.intro-word span { display: inline-block; transform-style: preserve-3d; }
.intro-mark { width: min(46vw, 14rem); aspect-ratio: 1; color: var(--ink); transform-origin: 0 0; }
.intro-mark svg { width: 100%; height: 100%; overflow: visible; }
.intro-ring { stroke-dasharray: 252; stroke-dashoffset: 252; }
.intro-skip { position: absolute; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); left: 50%; translate: -50% 0; font: 400 .75rem var(--f-ui); color: var(--muted); transition: opacity .3s; }
.intro.clear .intro-skip { opacity: 0; }

/* ---------- gate: the first screen of the day. just a cursor. ---------- */
.gate { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: env(safe-area-inset-top, 0px) var(--gut) env(safe-area-inset-bottom, 0px); transition: opacity .6s var(--ease), translate .7s var(--spring-smooth); overflow: auto; overscroll-behavior: contain; }
.gate.out { opacity: 0; translate: 0 -1rem; pointer-events: none; transition: opacity .3s var(--ease), translate .35s var(--ease); }
/* only while the gate is really on screen: if it's ever gone, the home page shows, never a blank page */
html.gating:has(body > .gate:not([hidden]):not(.out)) body > :not(.gate):not(.intro):not(script) { display: none !important; }
.gate-top { height: var(--bar-h); display: flex; align-items: center; justify-content: center; margin-top: .6rem; }
.gate-mid { width: min(100%, 46rem); margin-inline: auto; align-self: center; display: grid; gap: 1.4rem; justify-items: center; padding-bottom: 6vh; }
.gate .search { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.gate .search-cancel { display: none; }
.gate .search-field { height: clamp(4rem, 3.5rem + 1.6vw, 5rem); padding-left: 1.4rem; }
.gate .search-field > svg { width: 1.3rem; height: 1.3rem; }
.gate .search-field input { font-size: max(16px, clamp(1.1rem, 1rem + .5vw, 1.45rem)); }
.gate .search-field.grow { animation: grow .75s var(--spring-smooth) both; }
@keyframes grow { from { clip-path: inset(0 calc(100% - 4rem) 0 0 round 999px); } to { clip-path: inset(-2rem -2rem -2rem -2rem round 999px); } }
.gate .search-field.hush > svg, .gate .hush { opacity: 0; }
.gate .search-go { transition: opacity .4s, scale .5s var(--spring-snappy); }
.typed { position: absolute; z-index: 2; pointer-events: none; white-space: nowrap; overflow: hidden; color: var(--ink); }
.typed-in { display: inline-block; transition: translate .3s var(--ease); }
.typed-in .ch { display: inline-block; white-space: pre; animation: ch-in .35s var(--spring-snappy) both; }
@keyframes ch-in { from { opacity: 0; translate: 0 .25em; } }
.typed-in.selected .ch { background: var(--accent-soft); }
.typed-in.gone .ch { animation: ch-out .3s var(--ease) both; animation-delay: calc(var(--i) * 6ms); }
@keyframes ch-out { to { opacity: 0; translate: 0 -.3em; filter: blur(3px); } }
.caret::after, .fake-caret::after { content: ""; display: inline-block; width: 2px; height: 1.25em; vertical-align: -.24em; background: var(--accent); border-radius: 1px; animation: blink 1.05s ease-in-out infinite; }
.caret.solid::after { animation: none; }
@keyframes blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
.fake-caret { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; pointer-events: none; }
.gate .search-field:focus-within .fake-caret, .gate .search-field.has-text .fake-caret { display: none; }
.gate .suggest { display: grid; animation: none; max-height: min(60vh, 30rem); max-height: min(60svh, 30rem); overflow: auto; overscroll-behavior: contain; }
.gate .suggest:empty { display: none; }
.gate-browse { display: inline-flex; align-items: center; gap: .45rem; font: 400 .9375rem var(--f-ui); color: var(--ink-2); padding: .65rem 1.1rem; border-radius: 999px; }
.gate-browse svg { width: .9rem; height: .9rem; transition: translate .5s var(--spring-smooth); }
.gate-browse:hover svg { translate: 4px 0; }
.gate-late { opacity: 0; translate: 0 .8rem; transition: opacity .6s var(--ease), translate .9s var(--spring-bouncy); }
.gate.ready .gate-late { opacity: 1; translate: 0 0; }
.gate.typing-now .flips { opacity: 0; pointer-events: none; }
/* suggestions open over the page under the box, so the box itself never moves while you type in it */
.gate .search { position: relative; }
.gate .suggest:not(:empty) { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + .6rem); }
.gate-foot { text-align: center; padding-block: 1rem; font: 400 .75rem var(--f-ui); color: var(--muted); }
/* recent searches flip in as 3d cards under the search, then flip away */
.flips { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; perspective: 1200px; transition: opacity .4s; }
@media (max-width: 40rem) { .flips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flips > :nth-child(3) { display: none; } }
.flip { display: grid; gap: .55rem; transform-style: preserve-3d; transform: rotateY(-95deg) translateZ(2rem); opacity: 0; transition: transform 1.1s var(--spring-bouncy), opacity .4s var(--ease); transition-delay: calc(var(--i) * 120ms); text-align: left; }
.flip.in { transform: none; opacity: 1; }
.flip.out { transform: rotateY(95deg) translateZ(2rem); opacity: 0; transition-duration: .55s, .35s; transition-timing-function: var(--ease); }
.flip .cover { aspect-ratio: 1; border-radius: var(--r-md); }
.flip .cover .mono { font-size: 2.4rem; }
.flip-q { font: 400 .75rem/1.3 var(--f-ui); color: var(--muted); }
.flip-q b { font-weight: 400; color: var(--ink); }
.flip-name { font: 400 .875rem/1.2 var(--f-body); }

@media (orientation: landscape) and (max-height: 32rem) {
  .gate-mid { padding-bottom: 0; }
  .flow { height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  .spring { opacity: 1; translate: none; scale: none; }
}

/* ---------- city pages ---------- */
.city-head { display: grid; gap: 1.4rem; justify-items: start; padding: clamp(2rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.city-head .display { font-size: clamp(2.8rem, 1.6rem + 5vw, 7rem); }
.city-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-column: 1 / -1; }
.city-plain a { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font: 400 1rem var(--f-ui); }
.city-plain span { color: var(--muted); }
.city-more .h2 { margin-bottom: 1.1rem; }
.city-cta { display: grid; gap: 1rem; justify-items: start; }

/* ---------- edit your page ---------- */
.edit { display: grid; gap: 2rem; }
.edit-col { min-width: 0; max-width: 44rem; }
@media (min-width: 56rem) and (orientation: landscape) {
  .edit { grid-template-columns: minmax(0, 44rem) minmax(16rem, 21rem); justify-content: center; gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .edit-side { order: 2; position: sticky; top: calc(var(--bar-h) + 2.5rem); padding-top: clamp(2rem, 8vh, 5rem); }
}
/* the card beside the form: a demo of what a link lets you change, then their own card */
.edit-side { display: grid; justify-items: center; gap: 1rem; }
.edit-side .card3d-stage { width: min(100%, 17rem); margin-top: 2rem; }
@media not all and (min-width: 56rem) and (orientation: landscape) { .edit-side { order: 2; padding-top: 1rem; justify-items: start; } .edit.in .edit-side { order: 0; } .edit-side .card3d-stage { width: min(80vw, 18rem); margin-left: -.5rem; } .edit-side-hint { text-align: left; } }
.ed-demo { display: flex; align-items: baseline; gap: .55rem; max-width: 100%; min-height: 2.6rem; margin: 0; padding: .6rem 1rem; border-radius: 999px; font: 400 .875rem var(--f-ui); white-space: nowrap; overflow: hidden; }
.ed-demo-k { color: var(--muted); flex: none; }
.ed-demo-k::after { content: ":"; }
.ed-demo-v { overflow: hidden; text-overflow: ellipsis; }
.ed-caret { flex: none; width: 1.5px; height: 1rem; align-self: center; background: var(--accent); animation: blink 1s steps(1) infinite; }
.edit-side-hint { text-align: center; max-width: 18rem; }
/* the form, in a few calm glass groups */
.ed-group { display: grid; gap: 1.6rem; padding: clamp(1.1rem, 3vw, 1.75rem); border-radius: var(--r-xl); }
.ed-group > .kicker { margin: 0; }
.ed-group .edit-h { font-size: 1.05rem; }
.edit-ask { display: grid; gap: .85rem; max-width: 30rem; padding-bottom: 2rem; }
.edit-form { display: grid; gap: 1.25rem; padding-bottom: 2rem; }
.edit-sec { display: grid; gap: .75rem; }
.edit-h { margin: 0; font: 400 1.25rem/1.2 var(--f-ui); }
.edit-sec .pick .od { margin-right: .1rem; }
.edit-save { position: sticky; bottom: calc(var(--tab-h) + 1.75rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .6rem .6rem 1.1rem; border-radius: 999px; z-index: 5; }
.edit-save .form-msg { min-height: 0; color: var(--ink-2); flex: 1 1 12rem; }
@media (min-width: 56rem) and (orientation: landscape) { .edit-save { bottom: 1rem; } }
/* step by step: the steps as chips up top, one group at a time, back and next at the bottom */
/* where they are: "2 of 6 · your card" over a bar of six steps, each one tappable */
.ed-top { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + .3rem); z-index: 6; display: grid; gap: .6rem; margin-inline: calc(-1 * var(--gut)); padding: .35rem var(--gut) .8rem; background: linear-gradient(var(--bg) 82%, transparent); scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + .3rem); }
.ed-prog { display: grid; gap: .45rem; }
.ed-prog-t { display: flex; align-items: baseline; gap: .55rem; margin: 0; font: 400 .8125rem var(--f-ui); color: var(--muted); }
.ed-prog-t b { font: 400 1.05rem var(--f-ui); color: var(--ink); }
.ed-prog-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
.ed-prog-bar button { position: relative; height: 1.1rem; padding: 0; border: 0; background: none; cursor: pointer; }
.ed-prog-bar button::before { content: ""; position: absolute; inset: auto 0 50%; height: .25rem; translate: 0 50%; border-radius: 999px; background: var(--line); transition: background-color .4s var(--ease); }
.ed-prog-bar button.done::before { background: var(--accent); background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ed-prog-bar button[aria-current="step"]::before { background: var(--accent); }
/* phones: a small live piece of their card under the steps. it changes as they type. */
.ed-snip { position: relative; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: center; gap: .3rem .8rem; padding: .5rem .9rem .5rem .5rem; border-radius: var(--r-lg); }
.ed-snip-media { position: relative; width: 4.25rem; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }
.ed-snip-media .cover { position: absolute; inset: 0; }
.ed-snip-media .cover .mono { font-size: 1.3rem; }
.ed-snip-media .pc-sym { top: .25rem; left: .25rem; width: 1.4rem; height: 1.4rem; }
.ed-snip-media .pc-sym svg { width: .75rem; height: .75rem; }
.ed-snip-body { display: grid; gap: .1rem; min-width: 0; }
.ed-snip-body > * { position: static; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-snip .pc-cat { font: 400 .75rem var(--f-ui); color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.ed-snip .pc-name { font: 400 1.15rem/1.2 var(--f-ui); color: var(--ink); }
.ed-snip .pc-name.ghost { color: var(--muted); }
.ed-snip .pc-biz, .ed-snip .pc-place { font: 400 .8125rem var(--f-ui); color: var(--ink-2); }
.ed-snip .pc-biz:empty { display: none; }
.ed-snip .ed-snip-bubble { position: static; translate: none; grid-column: 1 / -1; order: -1; justify-self: start; max-width: 100%; }
.ed-snip-qs { display: none; grid-column: 1 / -1; flex-wrap: wrap; gap: .3rem; }
.ed-snip-qs .card3d-q { background: var(--fill); font-size: .75rem; padding: .25rem .6rem; }
.ed-snip[data-focus="back"] .ed-snip-qs { display: flex; }
.ed-snip:not([data-focus="top"]) .ed-snip-bubble { display: none; }
.ed-snip [data-lc-place], .ed-snip [data-lc-cat], .ed-snip [data-lc-name], .ed-snip [data-lc-biz] { transition: color .4s var(--ease); }
.edit[data-at="4"] .ed-snip [data-lc-place], .edit[data-at="0"] .ed-snip [data-lc-cat] { color: var(--accent); }
@media (min-width: 56rem) and (orientation: landscape) { .edit-form .ed-snip { display: none; } }
.edit[data-at="5"] .edit-form .ed-snip { display: none; }
.edit-form .edit-save { flex-wrap: nowrap; padding: .5rem; }
.edit-form .edit-save .form-msg { flex: 1 1 auto; min-width: 0; font-size: .8125rem; }
.edit-save [data-step-back] { flex: none; width: 2.9rem; height: 2.9rem; }
.edit-side { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + 1rem); }
.edit-save [data-step-back]:disabled { opacity: .35; }
.edit-save .btn svg { margin-left: .35rem; width: .9rem; height: .9rem; }
.gf-retry { display: inline-flex; align-items: center; gap: .45rem; }
.gf-retry svg { width: 1rem; height: 1rem; flex: none; }
.gf-retry.circle { width: 2.9rem; height: 2.9rem; padding: 0; justify-content: center; }
@media (hover: hover) { .gf-retry:hover svg { rotate: -180deg; transition: rotate .6s var(--spring-smooth); } }
/* claiming a page: one screen at a time, the page's card on top */
.edit.claiming .edit-side { display: none; }
.edit-claim { display: grid; gap: 1.1rem; max-width: 36rem; padding-bottom: 3rem; }
.edit-claim .kicker, .edit-claim .display, .edit-claim .lede { margin: 0; }
.edit-claim .display { font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.2rem); }
.edit-claim .ed-snip { max-width: 26rem; }
.edit-claim .code { justify-self: start; max-width: 100%; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); letter-spacing: .04em; }
.edit-claim .edit-ask { padding-bottom: 0; }
.edit-claim .btn svg { width: 1rem; height: 1rem; margin-right: .4rem; }
.edit-claim .btn-ink svg { margin: 0 0 0 .35rem; width: .9rem; height: .9rem; }
.edit-claim .link { justify-self: start; text-decoration: underline; text-underline-offset: 3px; }
.ed-review-card:empty { display: none; }
.ed-review-title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
/* phones: one step at a time with the small piece of the card on top. the hello only on the first step, the whole card
   only at review, and the bar with back and next sits where the menu was, so nothing covers it. */
@media not all and (min-width: 56rem) and (orientation: landscape) {
  .edit.in { gap: 1rem; }
  .edit.in:not([data-at="0"]) .page-head { display: none; }
  .edit.in .edit-side { display: none; }
  .ed-review-card .card3d-stage { margin: 2.75rem auto .5rem; width: min(70vw, 16rem); }
  .edit-form { padding-bottom: 5.5rem; }
  .page-edit:has(.edit.in) .menu { display: none; }
  .edit-form .edit-save { bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem); }
  .edit-form .ed-group { padding-bottom: 1.5rem; }
}

/* ---------- edit your page, saved: what happens next. a little window shows their page catching up: a phone on
   phones, a browser window on anything wider. the bar fills when the new version of the site is out. ---------- */
.edit.done .page-head, .edit.done .edit-side { display: none; }
.edit.done { grid-template-columns: minmax(0, 52rem); }
.ed-done { display: grid; gap: 1rem; padding-block: .5rem 3rem; animation: done-in .7s var(--spring-smooth) both; }
.ed-done .kicker { margin: 0; }
.ed-done-title { margin: 0; font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); }
.ed-done-grid { display: grid; gap: 1.75rem; margin-top: .75rem; }
@media (min-width: 40rem) { .ed-done-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); } }
.ed-done-frame { position: relative; justify-self: center; width: min(100%, 17rem); padding: .55rem; border-radius: 2.2rem; background: var(--fill); box-shadow: var(--lift-shade); }
.ed-done-chrome { display: flex; align-items: center; justify-content: center; gap: .3rem; height: 1.6rem; margin-bottom: .35rem; }
.ed-done-chrome i { display: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--line); }
.ed-done-chrome span { width: 4.5rem; height: 1.1rem; border-radius: 999px; background: var(--bg); color: transparent; overflow: hidden; font: 400 .7rem/1.1rem var(--f-ui); white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 40rem) {
  .ed-done-frame { width: 100%; max-width: 30rem; border-radius: var(--r-lg); padding: .5rem; }
  .ed-done-chrome { justify-content: flex-start; padding-inline: .4rem; }
  .ed-done-chrome i { display: block; }
  .ed-done-chrome span { flex: 1; width: auto; margin-left: .5rem; padding-inline: .7rem; color: var(--muted); }
}
.ed-done-screen { position: relative; display: grid; gap: .55rem; align-content: start; min-height: 15rem; padding: 2.4rem .75rem 1rem; border-radius: 1.7rem; background: var(--bg); overflow: hidden; }
@media (min-width: 40rem) { .ed-done-screen { border-radius: calc(var(--r-lg) - .4rem); min-height: 13rem; } }
.ed-done-screen .ed-snip { margin-bottom: .4rem; }
.ed-done-line { height: .55rem; border-radius: 999px; background: var(--fill); width: 92%; }
.ed-done-line.short { width: 60%; }
/* the lines shimmer while it updates, and settle once it's live */
.ed-done:not(.live) .ed-done-line { background: linear-gradient(90deg, var(--fill) 30%, var(--accent) 50%, var(--fill) 70%) 0 0 / 300% 100%; background: linear-gradient(90deg, var(--fill) 30%, color-mix(in srgb, var(--accent) 18%, var(--fill)) 50%, var(--fill) 70%) 0 0 / 300% 100%; animation: done-shimmer 1.6s linear infinite; }
.ed-done-check { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); scale: 0; transition: scale .6s var(--spring-bouncy); }
.ed-done-check svg { width: 1rem; height: 1rem; }
.ed-done.live .ed-done-check { scale: 1; }
.ed-done-bar { height: .3rem; margin: .55rem .9rem .2rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.ed-done-bar b { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 1.2s var(--ease); }
.ed-done-side { display: grid; gap: 1.25rem; align-content: start; }
.ed-done-status { display: flex; align-items: center; gap: .6rem; margin: 0; font: 400 1rem var(--f-ui); color: var(--ink); }
.ed-done-status i { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); animation: done-pulse 1.4s ease-in-out infinite; }
.ed-done.live .ed-done-status i { animation: none; }
.ed-done-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: done; }
.ed-done-steps li { position: relative; display: grid; gap: .2rem; padding-left: 2.2rem; counter-increment: done; }
.ed-done-steps li::before { content: counter(done); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--fill); font: 400 .75rem var(--f-ui); color: var(--ink-2); }
.ed-done-steps b { font: 400 .8125rem var(--f-ui); color: var(--muted); }
.ed-done-steps span { font: 300 .975rem/1.45 var(--f-ui); color: var(--ink-2); }
.ed-done .answer-row .btn svg { margin-left: .35rem; width: .9rem; height: .9rem; }
.ed-done-bell { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; text-decoration: underline; text-underline-offset: 3px; }
.ed-done-bell svg { width: 1rem; height: 1rem; color: var(--accent); }
.nt-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.nt-list li { position: relative; padding-left: 1.4rem; font: 300 .95rem/1.45 var(--f-ui); color: var(--ink-2); }
.nt-list li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.nt-bell { display: grid; place-items: center; width: 2.6rem; aspect-ratio: 1; border-radius: 26%; background: var(--accent); color: var(--on-accent); }
.nt-bell svg { width: 1.3rem; height: 1.3rem; }
@keyframes done-in { from { opacity: 0; translate: 0 1rem; } }
@keyframes done-shimmer { to { background-position: -300% 0; } }
@keyframes done-pulse { 50% { opacity: .35; scale: .8; } }
@media (prefers-reduced-motion: reduce) { .ed-done, .ed-done-line, .ed-done-status i { animation: none !important; } .ed-done-check, .ed-done-bar b { transition: none; } }

/* ---------- add aayla as an app: a little screen that acts out each tap, and the steps beside it ---------- */
.modal-install .modal-card { width: min(100%, 30rem); }
.inst-stage { justify-self: center; width: min(100%, 13rem); }
.inst-stage.desk { width: 100%; }
.inst-screen { position: relative; overflow: hidden; aspect-ratio: 9 / 16; max-height: 17rem; margin-inline: auto; border-radius: 1.8rem; border: 6px solid var(--ink); background: var(--bg); box-shadow: var(--lift-shade); }
.inst-stage.desk .inst-screen { aspect-ratio: 16 / 10; max-height: none; border-radius: var(--r-md); border-width: 1px; border-color: var(--line); }
.inst-page { position: absolute; inset: 0; display: grid; align-content: start; gap: .45rem; padding: 2.2rem .9rem .9rem; transition: filter .5s var(--ease); }
.inst-stage.desk .inst-page { padding-top: 2.4rem; }
.inst-word { font: 400 1.4rem/1 var(--f-display); color: var(--ink); }
.inst-line { height: .4rem; width: 85%; border-radius: 999px; background: var(--fill); }
.inst-line.short { width: 55%; }
.inst-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .3rem; }
.inst-cards i { aspect-ratio: 4 / 5; border-radius: .5rem; background: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--fill)); }
.inst-stage.desk .inst-cards { width: 55%; }
/* the browser's bar, with the button to find */
.inst-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2.4rem; display: grid; place-items: center; background: var(--fill); }
.inst-bar.top { top: 0; bottom: auto; justify-items: end; padding-right: .7rem; }
.inst-share, .inst-menu { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: var(--accent); }
.inst-share svg, .inst-menu svg { width: 1.1rem; height: 1.1rem; }
.inst-topbar { position: absolute; inset: 0 0 auto 0; height: 1.9rem; display: flex; align-items: center; gap: .3rem; padding: 0 .5rem; background: var(--fill); }
.inst-topbar > i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--line); }
.inst-url { flex: 1; margin-left: .4rem; height: 1.15rem; border-radius: 999px; background: var(--bg); font: 400 .65rem/1.15rem var(--f-ui); color: var(--muted); padding-left: .6rem; }
.inst-menu { width: auto; min-width: 1.6rem; height: 1.3rem; border-radius: .4rem; font: 400 .7rem var(--f-ui); padding: 0 .35rem; }
.inst-stage[data-step="0"] .inst-share, .inst-stage[data-step="0"] .inst-menu { animation: inst-ping 1.4s var(--ease) infinite; }
@keyframes inst-ping { 0% { box-shadow: 0 0 0 0 var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); } 100% { box-shadow: 0 0 0 .7rem transparent; background: var(--accent-soft); } }
/* the share sheet or menu, with the one row that matters */
.inst-sheet { position: absolute; left: .4rem; right: .4rem; bottom: .4rem; display: grid; gap: .3rem; padding: .5rem; border-radius: 1rem; background: var(--surface); box-shadow: 0 -.5rem 2rem -1rem rgba(0, 0, 0, .35); translate: 0 115%; transition: translate .6s var(--spring-smooth); }
.inst-stage.desk .inst-sheet { left: auto; right: .5rem; top: 2.1rem; bottom: auto; width: 55%; translate: 0 0; opacity: 0; scale: .9; transform-origin: 100% 0; transition: opacity .3s var(--ease), scale .5s var(--spring-smooth); }
.inst-row { display: flex; align-items: center; gap: .4rem; min-width: 0; height: 1.7rem; padding: 0 .5rem; border-radius: .6rem; background: var(--fill); font: 400 .66rem var(--f-ui); color: var(--ink); }
.inst-row svg { width: .95rem; height: .95rem; flex: none; color: var(--accent); }
.inst-row b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-stage[data-step="1"] .inst-sheet { translate: 0 0; }
.inst-stage.desk[data-step="1"] .inst-sheet { opacity: 1; scale: 1; }
.inst-stage[data-step="1"] .inst-page { filter: blur(2px) brightness(.92); }
.inst-stage[data-step="1"] .inst-row.hit { animation: inst-hit 1.4s var(--ease) .5s infinite; }
@keyframes inst-hit { 30%, 60% { background: var(--accent); color: var(--on-accent); } }
.inst-stage[data-step="1"] .inst-row.hit svg { color: inherit; }
/* home screen, and aayla landing on it */
.inst-home { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: .7rem .6rem; padding: 2rem .8rem; background: linear-gradient(160deg, var(--accent), var(--bg)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, var(--bg)), var(--bg)); opacity: 0; transition: opacity .5s var(--ease); }
.inst-stage.desk .inst-home { grid-template-columns: repeat(8, 1fr); align-content: end; padding: 1rem; }
.inst-home i { aspect-ratio: 1; border-radius: 26%; background: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.inst-stage[data-step="2"] .inst-home { opacity: 1; }
.inst-app { display: block; aspect-ratio: 1; border-radius: 26%; overflow: hidden; scale: 0; translate: 0 -2rem; transition: scale .7s var(--spring-bouncy) .35s, translate .7s var(--spring-bouncy) .35s; box-shadow: 0 .4rem 1rem -.4rem rgba(0, 0, 0, .5); }
.inst-app svg { display: block; width: 100%; height: 100%; }
.inst-stage[data-step="2"] .inst-app { scale: 1; translate: 0 0; }
/* the steps: tap one to see it */
.inst-steps { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.inst-steps button { display: flex; align-items: baseline; gap: .7rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: var(--r-sm); background: none; text-align: left; font: 300 .95rem/1.45 var(--f-ui); color: var(--ink-2); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.inst-steps .num { flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--fill); font-size: .75rem; color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease); }
.inst-steps li.on button { background: var(--accent-soft); color: var(--ink); }
.inst-steps li.on .num { background: var(--accent); color: var(--on-accent); }
.inst-go { justify-self: start; }
.inst-why { margin: 0; }
/* the nudge, once, for people who come back */
.inst-nudge { position: fixed; z-index: 70; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem); width: min(calc(100% - 2rem), 26rem); display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .7rem .7rem .7rem .8rem; border-radius: var(--r-lg); translate: -50% 1rem; opacity: 0; transition: opacity .4s var(--ease), translate .6s var(--spring-smooth); }
.inst-nudge.on { opacity: 1; translate: -50% 0; }
.inst-nudge .inst-app { scale: 1; translate: 0 0; width: 2.6rem; }
.inst-nudge p { margin: 0; font: 400 .85rem/1.35 var(--f-ui); color: var(--ink); }
.inst-x { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.inst-x svg { width: .9rem; height: .9rem; }
@media (prefers-reduced-motion: reduce) { .inst-stage *, .inst-nudge { animation: none !important; transition: none !important; } }

/* ---------- folding and two-screen phones: a dialog, a nudge or a note never sits across the fold ---------- */
@media (horizontal-viewport-segments: 2) {
  .modal { justify-items: start; padding-right: calc(100vw - env(viewport-segment-right 0 0, 50vw) + 1rem); }
  .inst-nudge, .toast { left: calc(env(viewport-segment-width 0 0, 50vw) / 2); }
}
@media (vertical-viewport-segments: 2) {
  .modal { align-items: start; padding-bottom: calc(100vh - env(viewport-segment-bottom 0 0, 50vh) + 1rem); }
}

/* ---------- saved: your people fanned out, grouped, and more like them ---------- */
.sv-head { display: grid; gap: 2.2rem; justify-items: center; text-align: center; padding-block: clamp(1rem, 4vw, 3rem) 1rem; }
.sv-copy { display: grid; gap: .7rem; justify-items: center; }
.sv-title { font-size: clamp(2.8rem, 1.6rem + 5vw, 6.5rem); max-width: 12ch; }
.sv-fan { position: relative; width: min(100%, 26rem); height: clamp(11rem, 26vw, 16rem); }
.sv-card { position: absolute; left: 50%; bottom: 0; width: clamp(6.5rem, 14vw, 9rem); aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; border: 3px solid var(--bg); box-shadow: var(--lift-shade); translate: -50% 0; transform-origin: 50% 140%;
  transform: rotate(calc(var(--i) * 11deg + var(--lean, 0) * 10deg)); transition: transform .8s var(--spring-bouncy); animation: fan-in 1s var(--spring-bouncy) backwards; animation-delay: calc((var(--i) + 2) * 80ms); }
.sv-card .cover { height: 100%; } .sv-card .cover .mono { font-size: 2.2rem; }
.sv-fan:hover .sv-card { transform: rotate(calc(var(--i) * 17deg + var(--lean, 0) * 14deg)) translateY(-.4rem); }
.sv-filters .chips { justify-content: safe center; margin-bottom: 1rem; }
/* your lists: a shelf of small tiles, each a little fan of the people in it */
.sv-lists { margin: .5rem calc(-1 * var(--gut)) 1.5rem; }
.sv-shelf { display: flex; justify-content: safe center; gap: .7rem; overflow-x: auto; padding: .5rem var(--gut) .75rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.sv-shelf::-webkit-scrollbar { display: none; }
.sv-tile { flex: none; width: 9.5rem; display: grid; gap: .2rem; justify-items: start; padding: .75rem .8rem .8rem; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid transparent; text-align: left; scroll-snap-align: start; transition: background .3s, border-color .3s, translate .5s var(--spring-bouncy); }
.sv-tile:hover { translate: 0 -.2rem; }
.sv-tile[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sv-tile-fan { position: relative; display: block; width: 100%; height: 4.4rem; margin-bottom: .45rem; }
.sv-tile-fan > span { position: absolute; top: .2rem; left: calc(var(--i) * 1.45rem); width: 3.3rem; height: 4rem; border-radius: .7rem; overflow: hidden; background: var(--cover); box-shadow: 0 .4rem .9rem -.5rem rgba(0, 0, 0, .35); rotate: calc((var(--i) - 1) * 5deg); transition: rotate .5s var(--spring-bouncy), translate .5s var(--spring-bouncy); }
.sv-tile:hover .sv-tile-fan > span { rotate: calc((var(--i) - 1) * 9deg); translate: calc((var(--i) - 1) * .25rem) -.15rem; }
.sv-tile-fan .cover { width: 100%; height: 100%; aspect-ratio: auto; }
.sv-tile-fan .mono { font-size: 1.3rem; }
.sv-tile-blank { display: grid !important; place-items: center; color: var(--muted); background: var(--fill) !important; box-shadow: none !important; }
.sv-tile-blank svg { width: 1.1rem; height: 1.1rem; }
.sv-tile-name { font: 400 .95rem/1.2 var(--f-ui); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-tile-n { font: 400 .75rem var(--f-ui); color: var(--muted); }
.sv-tile-new { background: transparent; border: 1px dashed var(--line); }
.sv-tile-plus { position: relative; display: grid; place-items: center; width: 100%; height: 4.4rem; margin-bottom: .45rem; }
.sv-tile-plus i { position: absolute; width: 1.4rem; height: 2px; border-radius: 2px; background: var(--accent); transition: rotate .6s var(--spring-bouncy); }
.sv-tile-plus i + i { rotate: 90deg; }
.sv-tile-new:hover .sv-tile-plus i { rotate: 90deg; }
.sv-tile-new:hover .sv-tile-plus i + i { rotate: 180deg; }
.sv-del.sure { color: var(--st-out); }
.sv-copy .answer-row { justify-content: center; }
/* who's in the list: tap faces in and out */
.sv-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .8rem .6rem; max-height: min(52vh, 26rem); max-height: min(52svh, 26rem); overflow: auto; padding: .3rem .1rem; }
.sv-pick { display: grid; justify-items: center; gap: .35rem; }
.sv-pick-face { position: relative; width: 4.2rem; height: 4.2rem; border-radius: 50%; overflow: visible; }
.sv-pick-face .cover { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 50%; overflow: hidden; transition: scale .5s var(--spring-bouncy), box-shadow .3s; }
.sv-pick-face .mono { font-size: 1.4rem; }
.sv-pick[aria-pressed="true"] .cover { scale: .92; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.sv-check { position: absolute; right: -.1rem; bottom: -.1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); scale: 0; transition: scale .5s var(--spring-bouncy); }
.sv-check svg { width: .8rem; height: .8rem; }
.sv-pick[aria-pressed="true"] .sv-check { scale: 1; }
.sv-pick-name { font: 400 .75rem var(--f-ui); color: var(--ink-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-list { display: grid; gap: clamp(2.5rem, 5vw, 4rem); container-type: inline-size; }
.sv-group .group-head { margin-bottom: 1rem; }
.sv-empty { display: grid; gap: 1.2rem; justify-items: center; text-align: center; padding-block: 2rem; }
.sv-empty p { margin: 0; font: 400 clamp(1.3rem, 1.1rem + 1vw, 1.9rem)/1.2 var(--f-ui); max-width: 24ch; }
.sv-ghost { position: relative; width: 12rem; height: 9rem; }
.sv-ghost span { position: absolute; left: 50%; bottom: 0; width: 5.5rem; aspect-ratio: 4 / 5; translate: -50% 0; border-radius: var(--r-md); border: 1.5px dashed var(--line); background: var(--glass); transform-origin: 50% 140%; animation: ghost-fan 4s var(--spring-bouncy) infinite alternate; }
.sv-ghost span:nth-child(1) { --r: -14deg; } .sv-ghost span:nth-child(3) { --r: 14deg; }
@keyframes ghost-fan { from { rotate: 0deg; } to { rotate: var(--r, 0deg); } }
.sv-ghost i { position: absolute; left: 50%; top: 1.4rem; translate: -50% 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); animation: bob 2.4s ease-in-out infinite; }
.sv-ghost i svg { width: 1rem; height: 1rem; }

/* ---------- about: a tilted wall of work, pictures on every idea, a crowd where someone gets found ---------- */
.ab-hero { position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; }
.ab-collage { perspective: 1400px; }
.ab-collage-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; transform: rotateX(18deg) rotateZ(-8deg) rotateY(-14deg); transform-style: preserve-3d; animation: collage 14s ease-in-out infinite alternate; }
@keyframes collage { to { transform: rotateX(12deg) rotateZ(-4deg) rotateY(-6deg) translateY(-1rem); } }
.ab-tile { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--cover); box-shadow: var(--lift-shade); transform: translateZ(calc(var(--i) * 6px)); }
.ab-tile:nth-child(3n+2) { translate: 0 1.4rem; }
.ab-tile img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 56rem) and (orientation: landscape) {
  .ab-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 4rem; align-items: center; }
  .ab-hero > :not(.ab-collage) { grid-column: 1; }
  .ab-collage { grid-column: 2; grid-row: 1 / span 6; }
}
@media not all and (min-width: 56rem) and (orientation: landscape) { .ab-collage { max-width: 22rem; margin: 0 auto 1rem; } }
.pillar { position: relative; overflow: hidden; transition: translate .6s var(--spring-bouncy), rotate .6s var(--spring-bouncy); }
.pillar:hover { translate: 0 -.4rem; rotate: -1deg; }
.pillar-img { display: block; aspect-ratio: 16 / 10; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) .5rem; overflow: hidden; background: var(--cover); }
.pillar-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--spring-smooth); }
.pillar:hover .pillar-img img { scale: 1.08; }
.ab-found { display: grid; gap: 1.5rem; align-items: center; padding-block: clamp(2rem, 5vw, 4rem); }
@media (min-width: 56rem) and (orientation: landscape) { .ab-found { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4rem; } }

/* ---------- get found: the conversation, and on wide screens their card building itself beside it ---------- */
.gf-main { position: relative; }
@media not all and (min-width: 56rem) and (orientation: landscape) { .gf-main { width: min(100% - 2.75rem, 40rem); } .gf-live { display: none; } }
@media (min-width: 56rem) and (orientation: landscape) {
  .gf-main { display: grid; grid-template-columns: minmax(0, 40rem) minmax(16rem, 22rem); justify-content: center; gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .gf-main .chat { margin-inline: 0; }
  .gf-live { position: sticky; top: calc(var(--bar-h) + 3rem); display: grid; justify-items: center; gap: 1.1rem; padding-top: clamp(3rem, 10vh, 6rem); }
  .gf-live .card3d-stage { width: min(100%, 17rem); margin-top: 2.2rem; }
}
.card3d-qs { display: grid; justify-items: center; gap: .4rem; }
.pc-name.ghost, .card3d .pc-name.ghost { position: static; z-index: auto; opacity: 1; white-space: nowrap; color: var(--muted); }
.card3d-face .pc-sym { top: 1.1rem; left: 1.1rem; }
/* their message, popping above the live card like a text arriving */
.card3d-stage { position: relative; }
.lc-bubble { position: absolute; z-index: 3; left: 50%; top: -1.6rem; translate: -50% 0; display: flex; align-items: center; gap: .45rem; max-width: 105%; margin: 0; padding: .45rem .8rem .45rem .45rem; border-radius: 1.1rem 1.1rem 1.1rem .3rem; background: var(--accent); color: var(--on-accent); font: 400 .8125rem/1.3 var(--f-ui); box-shadow: 0 .8rem 1.6rem -.8rem var(--accent); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-bubble span:last-child { overflow: hidden; text-overflow: ellipsis; }
.lc-bubble-ico { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--on-accent); background: color-mix(in srgb, var(--on-accent) 20%, transparent); }
.lc-bubble-ico svg { width: .8rem; height: .8rem; }
.gf-review { padding-top: 1.8rem; }
/* the message step: words, an icon, and the bubble as people will see it */
.msg-icons { display: flex; flex-wrap: wrap; gap: .4rem; }
.msg-icons .sym { width: 2.8rem; }
.msg-icons .sym[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.msg-preview { display: flex; align-items: flex-end; gap: .5rem; margin: 0; }
.msg-preview .msg-bubble { display: block; }
.msg-preview .msg-bubble.ghost { opacity: .45; }
.city-guess { color: var(--accent); }
.chat-progress i { background: var(--accent); }
.step .answer { animation-timing-function: var(--spring-bouncy); }

/* ---------- ask a friend: /pick/ ---------- */
.pk { display: grid; gap: clamp(1.5rem, 4vw, 2.75rem); padding-block: clamp(1.25rem, 5vw, 3.5rem) 3rem; }
.pk-head { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.pk-title { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 6rem); max-width: 14ch; padding-bottom: .12em; }
.pk-head .meta { max-width: 34rem; }
.pk-cards { --cols: 2; display: grid; gap: clamp(.6rem, 2vw, 1.25rem); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); width: 100%; max-width: calc(var(--n, 2) * 16rem); margin-inline: auto; }
.pk-cards:has(> :nth-child(3):last-child) { --cols: 3; }
@media (min-width: 52rem) { .pk-cards { --cols: var(--n, 2); } }
@media (max-width: 40rem) { .pk-cards:has(> :nth-child(3):last-child) .pk-name { font-size: .95rem; } .pk-cards:has(> :nth-child(3):last-child) .pk-what { font-size: .75rem; } .pk-cards:has(> :nth-child(3):last-child) .pk-tap { padding: .4rem .6rem; font-size: .75rem; } .pk-cards:has(> :nth-child(3):last-child) .pk-see { font-size: .75rem; text-align: center; } }
.pk-slot { display: grid; grid-template-rows: 1fr auto; gap: .6rem; justify-items: center; }
.pk-card { width: 100%; display: grid; gap: .3rem; justify-items: start; align-content: start; grid-template-rows: auto auto 1fr auto; text-align: left; padding: .5rem .5rem 1rem; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--lift-shade); transition: scale .5s var(--spring-bouncy), opacity .35s, box-shadow .3s; }
.pk-face { width: 100%; margin-bottom: .5rem; }
.pk-face .cover { width: 100%; aspect-ratio: 4 / 5; border-radius: calc(var(--r-xl) - .4rem); overflow: hidden; }
.pk-name { padding-inline: .5rem; font: 500 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.15 var(--f-ui); }
.pk-what { padding-inline: .5rem; color: var(--muted); font: 400 .875rem/1.35 var(--f-ui); }
.pk-tap { align-self: end; margin: .6rem .5rem 0; padding: .45rem .9rem; border-radius: 999px; background: var(--tint); font: 500 .8125rem/1 var(--f-ui); transition: background .3s, color .3s; }
@media (hover: hover) { .pk-card:hover .pk-tap { background: var(--accent); color: var(--on-accent); } }
.pk-see { font-size: .875rem; }
.choosing .pk-card:not(.chosen) { opacity: .35; scale: .96; }
.pk-card.chosen { scale: 1.03; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), var(--lift-shade); }
.pk-card.chosen .pk-tap { background: var(--accent); color: var(--on-accent); }
.pk-bars { display: grid; gap: .25rem; width: 100%; max-width: 40rem; margin-inline: auto; padding: .6rem; border-radius: var(--r-xl); }
.pk-bar { display: flex; gap: .9rem; align-items: center; padding: .6rem; border-radius: var(--r-lg); transition: background .25s; }
@media (hover: hover) { .pk-bar:hover { background: var(--tint); } }
.pk-bar-face { flex: none; width: 3.4rem; height: 3.4rem; }
.pk-bar-face .cover { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 50%; overflow: hidden; }
.pk-bar-body { flex: 1; min-width: 0; display: grid; gap: .5rem; }
.pk-bar-top { display: flex; align-items: baseline; gap: .6rem; font: 400 1rem/1.2 var(--f-ui); }
.pk-bar-top b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-yours { flex: none; padding: .2rem .55rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 .75rem/1.2 var(--f-ui); }
.pk-bar-n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.pk-track { position: relative; height: .55rem; border-radius: 999px; background: var(--fill); overflow: hidden; }
.pk-track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--muted); transition: width 1.1s var(--spring-smooth); }
.grown .pk-track i { width: var(--w); }
.pk-bar.lead .pk-track i { background: var(--accent); }
.pk-bar.lead .pk-bar-n { color: var(--ink); }
.pk-foot { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.pk-foot:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .pk-track i, .pk-card { transition: none; } }

/* ---------- admin ---------- */
.adm { display: grid; gap: 1.5rem; padding-block: 2rem 4rem; }
.adm-head { display: grid; gap: .6rem; }
.adm-gate, .adm-form { display: grid; gap: 1rem; padding: clamp(1.1rem, 3vw, 1.75rem); border-radius: var(--r-xl); max-width: 56rem; }
.adm-gate { max-width: 26rem; }
.adm-tabs { margin-bottom: .5rem; }
.adm-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.adm-find { max-width: 22rem; }
.adm-list { display: grid; gap: .6rem; }
.adm-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .75rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.adm-face { width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; background: var(--fill); display: grid; place-items: center; font: 500 1rem var(--f-ui); }
.adm-face img { width: 100%; height: 100%; object-fit: cover; }
.adm-who { display: grid; gap: .15rem; min-width: 0; font: 400 .875rem/1.35 var(--f-ui); }
.adm-who b { font-weight: 500; font-size: 1rem; }
.adm-who small { color: var(--muted); }
.adm-who > span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.adm-line { color: var(--ink-2) !important; }
.adm-flag { color: var(--st-out) !important; font-size: .8125rem; }
.adm-acts { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.adm-down { grid-column: 1 / -1; display: grid; gap: .75rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.adm-h { margin: 2rem 0 .75rem; font: 400 1.25rem var(--f-ui); }
.nt-preview { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .7rem; align-items: center; max-width: 24rem; padding: .7rem .8rem; border-radius: 1.1rem; background: var(--surface); box-shadow: var(--lift-shade); font: 400 .85rem/1.35 var(--f-ui); }
.nt-preview b { display: block; font-weight: 500; }
.nt-preview > span:last-child { display: grid; min-width: 0; color: var(--ink-2); }
.nt-preview-ico { display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border-radius: 26%; background: var(--accent); color: #fff; font: 400 1.4rem/1 var(--f-display); }
.adm-check { display: flex; gap: .55rem; align-items: center; font: 400 .9rem var(--f-ui); }
.adm-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.adm-wide { grid-column: 1 / -1; }
.adm-drop { display: grid; gap: .35rem; justify-items: center; text-align: center; padding: 2rem 1rem; border: 1.5px dashed var(--line); border-radius: var(--r-lg); cursor: pointer; font: 400 .9rem var(--f-ui); color: var(--muted); transition: border-color .2s, background .2s; }
.adm-drop b { color: var(--ink); font-weight: 500; }
.adm-drop.on { border-color: var(--accent); background: var(--accent-soft); }
.adm-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.adm-table table { width: 100%; border-collapse: collapse; font: 400 .8125rem/1.4 var(--f-ui); }
.adm-table th, .adm-table td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table th { color: var(--muted); font-weight: 400; }
.adm-meter { height: .5rem; border-radius: 999px; background: var(--fill); overflow: hidden; }
.adm-meter i { display: block; height: 100%; background: var(--accent); transition: width .4s var(--ease); }
.adm-sum, .adm-done { font: 400 1rem var(--f-ui); }
@media (max-width: 40rem) { .adm-row { grid-template-columns: 3rem minmax(0, 1fr); } .adm-acts { grid-column: 1 / -1; justify-content: flex-start; } }
.pf-claim { margin-top: 1.5rem; }
.pf-claim a { text-decoration: underline; text-underline-offset: 3px; }
.ts-box { position: fixed; z-index: 120; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); translate: -50% 0; }
.ts-box:empty { display: none; }

/* ---------- popups: the whole page blurs behind them, like tips ---------- */
.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem); overflow: auto; overscroll-behavior: contain;
  background: var(--bg); background: color-mix(in srgb, var(--bg) 0%, transparent); -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%);
  transition: background-color .5s var(--ease), -webkit-backdrop-filter .5s var(--ease), backdrop-filter .5s var(--ease); }
.modal:focus { outline: none; }
.modal.on { background: var(--bg); background: color-mix(in srgb, var(--bg) 45%, transparent); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.modal-card { display: grid; gap: 1rem; width: min(100%, 28rem); padding: clamp(1.4rem, 4vw, 2rem); border-radius: var(--r-xl); opacity: 0; translate: 0 1rem; scale: .97; transition: opacity .35s var(--ease), translate .6s var(--spring-smooth), scale .6s var(--spring-smooth); }
.modal.on .modal-card { opacity: 1; translate: 0 0; scale: 1; transition-delay: .06s; }
.modal-title { margin: 0; font: 400 clamp(1.9rem, 1.5rem + 2vw, 2.6rem)/1.02 var(--f-display); letter-spacing: -0.02em; }
.modal-body { margin: 0; font: 400 .9375rem/1.5 var(--f-body); color: var(--ink-2); }
.modal-ok { justify-self: stretch; }
.modal-ok svg { width: .9rem; height: .9rem; margin-left: .45rem; }
.btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 .7rem 1.6rem -.9rem var(--accent); box-shadow: 0 .7rem 1.6rem -.9rem color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-accent:active { background: var(--accent-press); }

/* ---------- the demo ---------- */
.demo-tag { margin-left: .5rem; padding: .3rem .65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 .6875rem/1 var(--f-ui); letter-spacing: .04em; align-self: center; }
.bar-in:has(.demo-tag) .wordmark { margin-right: 0; }
.demo-real { display: grid; gap: .55rem; padding: 1rem; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.demo-real-title { margin: 0; font: 500 1.0625rem/1.2 var(--f-ui); color: var(--ink); }
.demo-real-note { margin: 0; font: 400 .875rem/1.45 var(--f-ui); color: var(--ink-2); }
.demo-real-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
.demo-real .input { flex: 1 1 11rem; background: var(--bg); border: 1.5px solid var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.demo-real .input:focus { border-color: var(--accent); }
.demo-real .btn { flex: 1 0 auto; height: 3.2rem; }
.demo-real .form-msg { margin: 0; color: var(--ink); }
.demo-real .form-msg:empty { display: none; }
.modal-demo .modal-ok { background: none; color: var(--ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--line); }
[data-demo] .pc-test, [data-demo] .pf-test { display: none; }
.demo-toast { white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 2rem); }

/* ---------- nothing jumps while the page fills in ---------- */
/* the rail of worlds keeps its height until it's drawn (unless a search hides it), results hold the screen until they
   arrive, so the footer never flashes into view and then away */
.lens-row.worlds:empty { min-height: clamp(115px, 11vw, 157px); }
.has-q .lens-row.worlds:empty { min-height: 0; }
[data-results]:empty { min-height: 100vh; min-height: 100svh; }
[data-saved-list]:empty { min-height: 60vh; min-height: 60svh; }
.lens-row[data-quick]:empty { display: none; }

/* computers: chrome redraws every blur under the page each time it scrolls or the menu moves, so the small controls
   (chips, buttons, labels on photos) sit on solid glass instead, and the menu fades without blurring its words */
@media (hover: hover) and (pointer: fine) {
  .chip, .btn-soft, .btn-ink, .pick, .pc-peek, .vouched-name, .ph-cover, .reel-card figcaption, .dock-active .chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chip, .btn-soft, .pick { background: var(--glass-strong); }
  .menu-pill, .menu.open .menu-btn { filter: none; }
  .menu-shell { contain: layout paint; }
}