/* channel.is. Paper and ink, one serif for reading, one sans for anything you press or fill in (docs/brand.md). */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Type scale. Reading text scales a little with the screen; everything you press or glance at stays a fixed size.
   Desktop: body 17–20px, nav 15px, actions 15px, small print 13px. Phone: body 15–17px, nav 14px, actions 15px, small print 12–13px. */
:root {
  color-scheme: light dark;
  --paper: #fdfcfa;
  --ink: #323232;
  --quiet: #706a64;
  --hairline: #d9d4cf;
  --espresso: #c8beb4;
  --vermilion: #fb513d;
  --mark-filter: none;
  --text-body: clamp(16px, 2.4dvh, 20px);
  --leading: 1.4;
  --text-h1: calc(var(--text-body) * 1.2);
  --text-nav: 15px;
  --text-action: 15px;
  --text-small: 13px;
  --gutter: clamp(20px, 4vw, 40px);
  --stack: clamp(12px, 2dvh, 18px);     /* between blocks of a panel */
  --header-top: clamp(20px, 3.2dvh, 28px);
  --header-bottom: clamp(24px, 4.4dvh, 36px);
  --logo: 100px;                          /* the wordmark's minimum width (docs/brand.md) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #11100f;
    --ink: #f8f6f4;
    --quiet: #948e88;
    --hairline: #36332f;
    --espresso: #5c554d;
    --mark-filter: invert(1);
  }
}

/* A short laptop window: the same type, set a little tighter. */
@media (min-width: 860px) and (max-height: 700px) {
  :root { --leading: 1.35; --stack: 10px; --header-bottom: 22px; }
}

/* A phone: tighter header, body a step smaller, never under 15px. */
@media (max-width: 859px) {
  :root {
    --text-body: clamp(15px, 2.1dvh, 17px);
    --text-nav: 14px;
    --text-small: 12px;
    --stack: clamp(8px, 1.5dvh, 14px);
    --header-top: 16px;
    --header-bottom: 20px;
  }
}

/* A short or very narrow phone gives a little more to the words. */
@media (max-width: 859px) and (max-height: 600px), (max-width: 340px) {
  :root { --text-body: 14px; --leading: 1.3; --text-nav: 12px; --stack: 6px; --header-bottom: 14px; }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-body)/var(--leading) "Source Serif 4", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The app's PaperBackground (Print.swift): the same paper color, and the same grain at the same 128pt tile and 3.5%. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/paper.png") 0 0 / 128px;
  opacity: .035;
  filter: var(--mark-filter);
}

/* Your handle sits on Lilac, the brand's expressive field, in either appearance. */
body { transition: background-color .5s ease; }
body[data-tab="handle"] {
  --paper: #db8bfa;
  --ink: #323232;
  --quiet: #4a3a52;
  --hairline: #7d5c8c;
  --cross: #323232;
  --mark-filter: none;
}

a { color: inherit; }
a:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
h1, p, ul { margin: 0; padding: 0; font-size: 1em; }
strong { font-weight: 600; }
h1 { font-size: var(--text-h1); font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
ul { list-style: none; }

/* One screen: no page scroll. Main only scrolls if someone's zoom or a tiny window leaves no other way to read it. */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.col {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  padding: env(safe-area-inset-top) max(env(safe-area-inset-right), var(--gutter)) 0 max(env(safe-area-inset-left), var(--gutter));
}

/* The pictures. On a phone, whatever room the words leave, down to nothing on a short screen. */
.art {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

.art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease, filter .3s ease;
}

.art > img.on { opacity: 1; }
.art > img[data-for="channel"] { object-position: 50% 28%; }

/* The app's own screens. Hover one of the things you can do and the picture falls back, out of focus, and the screen
   comes up in front of it, held in a slab of glass in the shape of the phone, as iOS's own glass material: the
   background blurred and brightened through it, lit along its edge, and set down with one soft shadow. No drawn
   device frame.
   Motion is a fade from soft focus, in at 240ms and out at 160ms, and nothing else: no scale or slide, so nothing
   moves once it's there. Each layer fades itself rather than the phone fading as a whole, because a fading parent
   would cut the glass off from what's behind it (an ancestor's opacity or filter is a backdrop root). */
:root { --enter: 240ms cubic-bezier(.2, .8, .2, 1); --leave: 160ms cubic-bezier(.4, 0, 1, 1); }

body[data-mock] .art > img.on { filter: blur(8px) brightness(.45) saturate(.8); }

/* The stage: over the picture's column on a wide screen, over everything on a phone. It never takes the pointer on a
   wide screen; on a phone it does while a screen is up, so a tap anywhere puts it away. */
.stage {
  position: fixed;
  inset: 0 0 0 round(54%, 1px);
  z-index: 5;
  container-type: size;
  pointer-events: none;
}

.mocks {
  position: absolute;
  inset: 0;
}

/* Blurring the photo behind a screen smooths its grain away, so the photo's own grain goes back over it here
   (grain.png: single-pixel speckle, light and dark flecks, about 1.4% in the shadows, at the size the photo shows it):
   above the photo and the faint mark, below the phone, which stays clean. */
.grain {
  position: absolute;
  inset: 0;
  background: url("/grain.png") 0 0 / 218px;
  opacity: 0;
  transition: opacity var(--leave);
}
body[data-mock] .grain { opacity: 1; transition: opacity var(--enter); }

.stage-hint { display: none; }

@media (max-width: 859px) {
  /* Out of the page entirely until a screen is up: a backdrop filter that merely waits at opacity 0 blanks the first paint. */
  .stage {
    inset: 0;
    display: none;
    opacity: 0;
    background: rgba(17, 16, 15, .62);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: opacity var(--leave), display 160ms allow-discrete;
  }
  body[data-mock] .stage { display: block; opacity: 1; pointer-events: auto; transition: opacity var(--enter), display 260ms allow-discrete; }
  @starting-style { body[data-mock] .stage { opacity: 0; } }
  .phone { --sw: round(down, min(60cqw, 35cqh), 2px); }
  .stage-hint {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(16px + env(safe-area-inset-bottom));
    margin: 0;
    text-align: center;
    color: rgba(253, 252, 250, .6);
    font: 500 var(--text-small)/1.3 "Inter", system-ui, sans-serif;
    opacity: 0;
    transition: opacity var(--leave);
  }
  body[data-mock] .stage-hint { opacity: 1; transition: opacity var(--enter); }
}

.phone {
  /* The screen's width sets everything: an iPhone 17 Pro's 1206×2622 screen, in a rim of glass --b wide. Every size
     and the position are whole pixels (round()), so no edge or corner is drawn across half a pixel; the width is even
     so it centres exactly. The screen's outline is the device's own (mocks/screen-mask.png, exported by the iOS
     Simulator with its display mask). The glass's corner is that outline grown by the rim, fitted: a superellipse
     over --eg, or the nearest circle, --rg, where the browser can't draw one. */
  --sw: round(down, min(32cqh, 56cqw), 2px);
  --sh: round(calc(var(--sw) * 2622 / 1206), 1px);
  --b: round(calc(var(--sw) * .024), 1px);
  --eg: round(calc(var(--sw) * .22305), 1px);
  --rg: round(calc(var(--sw) * .18947), 1px);
  --ox: var(--b);
  --oy: var(--b);
  --w: calc(var(--sw) + var(--b) * 2);
  --h: calc(var(--sh) + var(--b) * 2);
  position: absolute;
  left: round(down, calc(50% - var(--w) / 2), 1px);
  top: round(down, calc(50% - var(--h) / 2), 1px);
  width: var(--w);
  height: var(--h);
  margin: 0;
  pointer-events: none;
}

/* The glass's continuous corner, where the browser can draw it. Measured from the device's display mask, the screen's
   corner is a superellipse with exponent 2.74 (K 1.454) over 20.1% of the screen's width; grown by the rim it is
   K 1.39 over 22.3%, which this follows to within half a pixel at this size. */
@supports (corner-shape: superellipse(1.39)) {
  .phone .glass { border-radius: var(--eg); corner-shape: superellipse(1.39); }
  .phone .lens { border-radius: round(calc(var(--sw) * .075 * 1.5), 1px); corner-shape: superellipse(1.454); }
  /* The chat lens and the input inside it share one curve, the input's 1pt in from the pane's. */
  .phone .lens.chat { border-radius: calc(var(--u) * 9); }
  .lens.chat .composer { corner-shape: superellipse(1.454); }
}

/* The glass, as iOS's dark glass: what's behind it blurred, dimmed and a little more saturated, under a smoky body
   that lifts slightly toward the top, a line of light round the edge, and one wide, soft shadow. */
.glass {
  position: absolute;
  inset: 0;
  border-radius: var(--rg);
  background: linear-gradient(170deg, rgba(40, 40, 42, .55), rgba(12, 12, 13, .62) 40%, rgba(8, 8, 9, .66) 75%, rgba(24, 24, 26, .6));
  -webkit-backdrop-filter: blur(28px) saturate(1.4) brightness(.7);
  backdrop-filter: blur(28px) saturate(1.4) brightness(.7);
  /* The line of light is a half-pixel inset shadow, so it follows the corner's own curve exactly: one device pixel all
     round, a touch brighter along the top. */
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .16),
    inset 0 .5px 0 rgba(255, 255, 255, .22),
    0 24px 60px -20px rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity var(--leave);
}

.phone .screen {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: var(--sw);
  height: var(--sh);
  overflow: hidden;
  background: #fdfcfa;
  -webkit-mask: url("/mocks/screen-mask.png") 0 0 / 100% 100% no-repeat;
  mask: url("/mocks/screen-mask.png") 0 0 / 100% 100% no-repeat;
  opacity: 0;
  filter: blur(6px);
  will-change: opacity, filter;
  transition: opacity var(--leave), filter var(--leave);
}

.phone .screen img { display: block; width: 100%; height: 100%; }

/* The lens: a pane held over one part of the screen, a little off its edge. Its picture is the same screenshot, scaled
   by --lw/--cw and positioned so the crop's center meets the lens's center. No stroke: it reads from its light, a soft
   highlight at the top and a shade along the bottom, and from sitting higher than the screen, by its shadow.
   It arrives with the screen, not after it. */
.lens {
  --lx: .5;
  --z: calc(var(--lw) / var(--cw));
  --lwpx: round(calc(var(--sw) * var(--lw)), 2px);
  --lh: round(calc(var(--lwpx) * var(--ch) * 2622 / (var(--cw) * 1206)), 1px);
  position: absolute;
  width: var(--lwpx);
  height: var(--lh);
  left: round(down, calc(var(--ox) + var(--lx) * var(--sw) - var(--lwpx) / 2), 1px);
  top: round(down, calc(var(--oy) + var(--cy) * var(--sh) - var(--lh) / 2 - var(--sh) * .025), 1px);
  overflow: hidden;
  border-radius: round(calc(var(--sw) * .075), 1px);
  background: #fdfcfa;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .2),
    0 18px 44px -14px rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity var(--leave);
}

/* Where each lens looks: --cx/--cy the center and --cw/--ch the size of what it holds, as fractions of the screen;
   --lw its width and --lx (default .5) its center, in screen widths. Here, not in the markup: the page's CSP allows no inline styles. */
.phone[data-mock="message"] { --cx: .66; --cy: .607; --cw: .7; --ch: .09; --lw: 1.1; }

/* The message lens is drawn, not cropped: the end of the thread and the chat input grown round a reply being
   written, on a pane of light glass with a 1pt rim of it showing round the input. Sized in --u, a hundredth of the
   screen's width, so it scales with the phone. It sits a little wider than the screen, over the bottom of the thread. */
.lens.chat {
  --u: calc(var(--sw) / 100);
  --lwpx: round(calc(var(--sw) * 1.2), 2px);
  top: auto;
  bottom: round(calc(var(--h) - var(--oy) - var(--sh) * .955), 1px);
  height: auto;
  padding: calc(var(--u) * 4) 1px 1px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 9);
  background: rgba(253, 252, 250, .62);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .75),
    0 1px 2px rgba(0, 0, 0, .14),
    0 22px 50px -16px rgba(0, 0, 0, .5);
  font: 400 calc(var(--u) * 4.6)/1.3 "Inter", system-ui, sans-serif;
  letter-spacing: -.011em;
  color: #1c1b1a;
}
.lens.chat::after { display: none; }
.lens.chat p { margin: 0; }
.lens.chat .when { align-self: center; font-size: calc(var(--u) * 3.2); font-weight: 500; color: #706a64; }
.lens.chat .bubble {
  max-width: 72%;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 5.4);
}
.lens.chat .bubble.out { align-self: flex-end; margin-right: calc(var(--u) * 3); background: #2d6bea; color: #fff; }
.lens.chat .bubble.in { align-self: flex-start; margin-left: calc(var(--u) * 3); background: #ebe7e2; }
.lens.chat .composer {
  margin-top: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 4) calc(var(--u) * 4.4) calc(var(--u) * 3);
  border-radius: calc(var(--u) * 9 - 1px);
  background: #fdfcfa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.lens.chat .caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -.2em;
  background: #2d6bea;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lens.chat .caret { animation: none; } }
.lens.chat .bar { display: flex; align-items: center; gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 3.4); }
.lens.chat .to { flex: 1; display: flex; align-items: center; gap: calc(var(--u) * .9); font-size: calc(var(--u) * 3.4); color: #706a64; }
.lens.chat .to b { font-weight: 600; color: #1c1b1a; }
.lens.chat svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lens.chat .seal { width: calc(var(--u) * 4); height: calc(var(--u) * 4); fill: #d9a520; stroke: none; }
.lens.chat .seal .tick { fill: none; stroke: #fff; stroke-width: 2.2; }
.lens.chat .key {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
}
.lens.chat .key svg { width: 52%; height: 52%; }
.lens.chat .plus { background: #f1eee9; color: #1c1b1a; }
.lens.chat .send { background: #2d6bea; color: #fff; }

.lens img {
  position: absolute;
  display: block;
  width: calc(var(--sw) * var(--z));
  height: auto;
  left: calc(var(--lwpx) / 2 - var(--cx) * var(--sw) * var(--z));
  top: calc(var(--lh) / 2 - var(--cy) * var(--sh) * var(--z));
  max-width: none;
}

.lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 45% at 50% -2%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 80% 40% at 50% 108%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 70%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
  pointer-events: none;
}

/* The mark from beside the words, laid faint across the whole stage behind the screen. */
.sigil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
  opacity: 0;
  transition: opacity var(--leave);
}

body[data-mock="message"] .phone[data-mock="message"] :is(.glass, .lens),
body[data-mock="email"] .phone[data-mock="email"] :is(.glass, .lens),
body[data-mock="photo"] .phone[data-mock="photo"] :is(.glass, .lens),
body[data-mock="write"] .phone[data-mock="write"] :is(.glass, .lens) {
  opacity: 1;
  transition: opacity var(--enter);
}

body[data-mock="message"] .phone[data-mock="message"] .screen,
body[data-mock="email"] .phone[data-mock="email"] .screen,
body[data-mock="photo"] .phone[data-mock="photo"] .screen,
body[data-mock="write"] .phone[data-mock="write"] .screen {
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--enter), filter var(--enter);
}

body[data-mock="message"] .sigil[data-mock="message"],
body[data-mock="email"] .sigil[data-mock="email"],
body[data-mock="photo"] .sigil[data-mock="photo"],
body[data-mock="write"] .sigil[data-mock="write"] { opacity: .16; transition: opacity var(--enter); }

@media (min-width: 860px) {
  .app { flex-direction: row; }
  .col { flex: 1 1 54%; min-width: 0; height: 100%; }
  .art { flex: 1 1 46%; background: #0f0f0d; }
}

/* A phone: tabs, words, picture, footer, top to bottom. */
@media (max-width: 859px) {
  .col { display: contents; }
  .tabs, .legal { margin-inline: max(env(safe-area-inset-left), var(--gutter)); }
  .tabs { margin-top: env(safe-area-inset-top); }
  main { flex: 0 1 auto !important; margin-inline: calc(max(env(safe-area-inset-left), var(--gutter)) - 8px) !important; }
  .art { order: 1; margin: 8px var(--gutter); border-radius: 14px; }
  .art img[data-for="channel"] { object-position: 50% 68%; } /* The band is too short for the whole hand, so it shows the fingers. */
  .legal { order: 2; }
  @container (max-height: 60px) { .art > img { display: none; } }
}

main { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -8px; padding: 0 8px; }
main::-webkit-scrollbar { display: none; }

/* The sans: Inter for the nav, actions, fields and small print. */
.tab, .cta, .line, .forms, .status, .legal, .claim button { font-family: "Inter", system-ui, sans-serif; letter-spacing: -.011em; }

/* Header: the logo on the left, Business and Claim your handle on the right of the column, all on one baseline. */
.tabs {
  flex: none;
  display: flex;
  align-items: baseline;
  padding: var(--header-top) 0 var(--header-bottom);
  white-space: nowrap;
}

.tab-group { display: flex; align-items: baseline; gap: clamp(16px, 2.5vw, 28px); margin-left: auto; }

.tab {
  padding: 6px 0;
  font-size: var(--text-nav);
  font-weight: 500;
  line-height: 1;
  color: var(--quiet);
  text-decoration: none;
  transition: color .15s;
}
.tab:hover, .tab[aria-selected="true"] { color: var(--ink); }
.tab:not(.wordmark)[aria-selected="true"] { text-decoration: underline 1.5px; text-underline-offset: 3px; }

/* Claim your handle stands out by weight and ink, with no button behind it. */
.tab.tab-cta { color: var(--ink); font-weight: 600; }

/* The wordmark: never narrower than 100px (docs/brand.md). Its foot sits on the selected tab's underline. */
.logo { display: block; width: var(--logo); height: auto; filter: var(--mark-filter); }
.tab.wordmark { padding: 0; position: relative; top: 4.5px; }

@media (max-width: 340px) { .tab-group { gap: 10px; } }

/* Panels */
.panel {
  max-width: 32em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack);
  padding-bottom: 8px;
  outline: none;
}

.panel[hidden] { display: none; }

html.js .panel > * { animation: rise .6s cubic-bezier(.22, 1, .36, 1) both; }
html.js .panel > :nth-child(2) { animation-delay: 60ms; }
html.js .panel > :nth-child(3) { animation-delay: 120ms; }
html.js .panel > :nth-child(4) { animation-delay: 180ms; }
html.js .panel > :nth-child(5) { animation-delay: 240ms; }
html.js .panel > :nth-child(6) { animation-delay: 300ms; }
html.js .panel > :nth-child(7) { animation-delay: 360ms; }
html.js .panel > :nth-child(8) { animation-delay: 420ms; }
html.js .panel > :nth-child(9) { animation-delay: 480ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* An ink symbol, drawn again and again: the app's stop-motion primitives. */
.figure { display: block; margin-left: -.3em; filter: var(--mark-filter); }
.figure img { display: block; width: clamp(40px, 8.4dvh, 68px); height: auto; }

/* The warrior: the same stop-motion, as a film strip of 15 frames at the app's 7.5 a second. */
.warrior {
  --cell: clamp(44px, 9.4dvh, 80px);
  width: var(--cell);
  height: var(--cell);
  margin-left: 0;
  background: url("/marks/Warrior.png") 0 0 / calc(var(--cell) * 15) var(--cell) no-repeat;
}

html.js .panel > .warrior { animation: rise .6s cubic-bezier(.22, 1, .36, 1) both, film 2s steps(15) infinite; }

@keyframes film { to { background-position-x: calc(var(--cell) * -15); } }

/* Phones give the symbols' room to the words: the warrior shrinks, the handle tab drops its eye, short screens keep only Business's. */
@media (max-width: 859px) and (max-height: 900px) { .warrior { --cell: 44px; } #handle .figure { display: none; } }
@media (max-width: 859px) and (max-height: 760px) { .figure { display: none; } #business .figure { display: block; } }
@media (max-width: 859px) and (max-height: 620px) { .forms { display: none; } }

/* Things you can do: hover or tap one and its mark pops up. */
.task {
  cursor: pointer;
  text-decoration: underline 1px var(--hairline);
  text-underline-offset: .16em;
  transition: text-decoration-color .15s;
  -webkit-tap-highlight-color: transparent;
}

.task:hover, .task.lit { text-decoration-color: var(--ink); }

.pop {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
}

.pop img {
  position: absolute;
  z-index: 2;
  left: .1em;
  bottom: .95em;
  width: 1.8em;
  height: 1.8em;
  padding: .34em;
  border-radius: 50%;
  background: var(--espresso);
  opacity: 0;
  transform: scale(0);
  transform-origin: 0 100%;
  transition: transform .15s, opacity .15s;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) { .pop img { filter: invert(1); background: #a39a90; } }

.task:hover .pop img, .task.lit .pop img {
  opacity: 1;
  transform: none;
  transition: transform .5s linear(0, .092, .296, .528, .736, .897, 1.004, 1.063, 1.085, 1.084, 1.068, 1.049, 1.029, 1.014, 1.003, .996, .993, .995, .998, 1), opacity .12s;
}

/* Calls to action */
.ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  font-size: var(--text-action);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.cta::after {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}

.cta:hover::after { transform: translateX(3px) rotate(45deg); }

/* Your handle: a line to sign on, as on a document. */
.line {
  display: flex;
  align-items: baseline;
  width: 100%;
  margin-top: 4px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--ink);
  font-size: max(1em, 16px); /* iOS zooms into any field under 16px. */
  cursor: text;
}

.x { color: var(--cross, var(--vermilion)); font-weight: 600; margin-right: .42em; }
.prefix { color: var(--quiet); }

.line input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  letter-spacing: -.01em;
}

.line input::placeholder { color: var(--hairline); font-weight: 400; }
.line:focus-within { border-bottom-width: 2px; padding-bottom: 4.5px; }

/* The handle line's mark answers as you type: the signature cross until there's a name, then a green check if it's
   free or a red cross if it isn't. It dims while it asks. */
.x { display: inline-block; min-width: .7em; transition: color .15s ease, opacity .15s ease; }
.line[data-state="yes"] .x { color: var(--available, #12803c); }
.line[data-state="no"] .x { color: var(--unavailable, #d4291f); }
.line[data-state="wait"] .x { opacity: .35; }
/* On Lilac the brighter green and red lose their edge, so they go a step deeper. */
body[data-tab="handle"] { --available: #0b6b30; --unavailable: #c01f16; }

.status { min-height: 1.3em; margin-top: -4px; color: var(--quiet); font-size: var(--text-small); }
.status.yes { color: var(--ink); }
.status.no { color: var(--ink); }

.forms { display: flex; flex-direction: column; gap: 2px; font-size: max(1em, 16px); }
.forms b { font-weight: 600; }
.forms b.empty { font-weight: 400; color: var(--quiet); }
.forms li { overflow-wrap: anywhere; }

.countdown { color: var(--quiet); white-space: nowrap; }

/* The claim: the same field lines, and an ink button like the app's primary (ThreadsButtonStyle). */
.claim { display: flex; flex-direction: column; align-items: flex-start; gap: inherit; width: 100%; margin: 0; }
.claim .line input[type="email"] { margin-left: .5em; font-weight: 400; }
.claim[hidden] { display: none; }
.claim button {
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-action);
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.claim button:hover { opacity: .85; }
.claim button:disabled { opacity: .5; cursor: default; }
.claim button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.trap { position: absolute; left: -9999px; }
.claimed { display: flex; flex-direction: column; gap: inherit; outline: none; }
.claimed[hidden] { display: none; }

/* Footer: small print on one line, clear of the home indicator. */
.legal {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 8px 0 calc(clamp(12px, 2dvh, 24px) + env(safe-area-inset-bottom));
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: 1.3;
}

.legal a { text-decoration: none; }
.legal a:hover { color: var(--ink); }

@media (max-width: 859px) { .app .legal { flex-wrap: nowrap; gap: 16px; white-space: nowrap; } }
@media (max-width: 340px) { .app .legal { gap: 12px; } }

/* Documents: terms, privacy, guidelines, and the page for a name. These scroll, so they read at a steady size. */
.doc { max-width: 38em; margin: 0 auto; padding: clamp(20px, 4vw, 40px) var(--gutter) 64px; font-size: clamp(16px, 1.1vw + 12px, 18px); line-height: 1.55; }
.doc > .wordmark { display: inline-block; margin-bottom: 2.4em; }
.doc h1 { font-size: 1.7em; line-height: 1.2; letter-spacing: -.01em; }
.doc h2 { margin: 1.9em 0 .3em; font-size: 1.05em; font-weight: 600; }
.doc p, .doc ul { margin: .65em 0; }
.doc ul { padding-left: 1.1em; list-style: disc; }
.doc li { margin: .3em 0; }
.doc .note { color: var(--quiet); font-size: .86em; }
.doc .legal { margin-top: 3em; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* With no script every panel shows, one after another, and the page scrolls. */
html:not(.js) .app { height: auto; overflow: visible; }
html:not(.js) .art { display: none; }
html:not(.js) .panel[hidden] { display: flex; margin-top: 3em; }