/* fold33.io: the one page. The brief dialog has its own sheet, brief.css */
:root {
  color-scheme: dark;
  --bg: #060a11;
  --panel: rgba(11, 17, 27, .78);
  --line: rgba(169, 188, 205, .12);
  --line2: rgba(169, 188, 205, .24);
  --line3: rgba(169, 188, 205, .5); /* input boundaries: 3:1 on the panels */
  --fg: #e4e8ee;
  --dim: #8a98a9;
  --mute: #768394;
  --tld: #566273; /* the wordmark's ".io", as drawn */
  --luna: #ece3d2;
  --ghost: #9db3cc;
  --accent: #cddcec;
  --accent-rgb: 205, 220, 236;
  --glow: .35;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}
/* paper: cream cotton stock, navy ink */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9e3d7;
  --panel: rgba(250, 247, 240, .5);
  --line: rgba(24, 32, 46, .12);
  --line2: rgba(24, 32, 46, .22);
  --line3: rgba(24, 32, 46, .55);
  --fg: #141c28;
  --dim: #4f5764;
  --mute: #5f646b;
  --tld: #8b8f94;
  --luna: #101a2a;
  --ghost: #101a2a;
  --accent: #1c3152;
  --accent-rgb: 28, 49, 82;
  --glow: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; }
body { position: relative; z-index: 0; font: 400 16px/1.6 var(--sans); color: var(--fg); background: radial-gradient(90% 60% at 50% 0%, #0c1522 0%, var(--bg) 70%) no-repeat, var(--bg); -webkit-font-smoothing: antialiased; transition: background-color .4s, color .4s; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="light"] body { background: radial-gradient(80% 70% at 70% 20%, #f1ece2 0%, var(--bg) 70%) no-repeat, var(--bg); }
/* cotton paper fibres: noise lit from the upper right, multiplied onto the stock */
[data-theme="light"] body::after { opacity: .42; mix-blend-mode: multiply; background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.1'%3E%3CfeDistantLight azimuth='-45' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
[data-theme="light"] #stars { display: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.mono { font: 400 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ink { color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), var(--glow)); }
/* read by screen readers, not shown */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ↵ ✕ ← ☾ drawn inline, since the fonts don't have them */
.glyph { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; flex: none; }

.mark { display: block; width: 26px; height: 26px; }
#f33 .lit { fill: var(--luna); }
#f33 .gh { fill: var(--ghost); fill-opacity: .42; }
#f33 .fold { stroke: var(--ghost); stroke-width: 2; stroke-dasharray: 3 3.6; opacity: .7; }
[data-theme="light"] #f33 .gh { fill-opacity: .22; }

/* ── intro: the seascape, then into the moon, drawn on canvas; under the film grain like the page ── */
/* head.js sets intro-on and intro-ui before first paint when the intro will play, so its first frame
   is the first thing drawn */
.intro { display: none; position: fixed; inset: 0; z-index: 20; overflow: hidden; }
html.intro-on .intro { display: block; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-line { position: absolute; left: 0; right: 0; bottom: 15%; text-align: center; font: italic 400 clamp(22px, 2.6vw, 34px)/1.2 var(--serif); letter-spacing: -.01em; color: rgba(236, 227, 210, .92); opacity: 0; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
.intro-skip { position: absolute; right: 18px; bottom: 18px; padding: 8px 13px; border-radius: 99px; border: 1px solid rgba(228, 232, 238, .2); background: rgba(6, 10, 17, .35); color: rgba(228, 232, 238, .75); font: 400 12px/1 var(--mono); letter-spacing: .08em; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-on .moon canvas, html.intro-on .moon .rays, html.intro-on .moon .halo { opacity: 0; }
html.intro-ui .nav, html.intro-ui .hero > :not(.moon), html.intro-ui .foot { visibility: hidden; }
html.reveal .nav, html.reveal .hero > :not(.moon):not(.emboss), html.reveal .foot { animation: rise .75s cubic-bezier(.2, .7, .2, 1) both; }
html.reveal .hero h1 { animation-delay: .04s; }
html.reveal .hero .lede { animation-delay: .11s; }
html.reveal .hero .prompt { animation-delay: .17s; }
html.reveal .hero .chips { animation-delay: .24s; }
html.reveal .nav { animation-delay: .33s; }
html.reveal .foot { animation-delay: .38s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ── one screen whenever it fits: the nav, the hero, the footer. When it doesn't fit (a short or
   zoomed screen, a long request, a list that wraps), the page scrolls and the footer follows ── */
body { display: grid; grid-template: auto 1fr auto / minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }

/* ── nav ── */
.nav { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: clamp(16px, 3vh, 26px) 44px; padding: clamp(16px, 3svh, 26px) 44px; }
.brand { display: flex; align-items: center; gap: 11px; font: 500 16px/1 var(--mono); letter-spacing: -.01em; }
.brand .tld { color: var(--tld); }
.nav-end { display: flex; gap: 28px; align-items: center; font: 400 13px/1 var(--mono); color: var(--dim); }
.status { display: inline-flex; align-items: center; gap: 9px; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), calc(var(--glow) * 2.5)); animation: pulse 2.4s ease-in-out infinite; }
.theme { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line2); background: none; color: var(--dim); font: 400 12px/1 var(--mono); cursor: pointer; transition: color .2s, border-color .2s; }
.theme > span { display: inline-flex; align-items: center; gap: 8px; }
.theme svg { width: 13px; height: 13px; }
/* the button names the other theme: paper by night, night on paper */
[data-theme="dark"] .theme .to-night, [data-theme="light"] .theme .to-paper { display: none; }

/* ── hero ── */
/* overflow-x: the halo and the turning rays reach past the edges of a phone screen */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px 14px; text-align: center; overflow-x: clip; }
/* the moon gives up height first, so the rest fits on one screen. On a wide screen 620px high and
   up, 480px stays for the rest, with room to breathe; below that the moon keeps up to 140px while
   about 385px stays for the rest. Narrower layouts set their own */
.moon, .emboss { position: relative; width: clamp(40px, min(70vw, max(100vh - 480px, min(140px, 100vh - 385px))), 400px); width: clamp(40px, min(70vw, max(100svh - 480px, min(140px, 100svh - 385px))), 400px); aspect-ratio: 1; flex: none; }
/* the moon is a button: it replays the intro. Only the disc takes the click, not the halo */
button.moon { display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* disabled while things are paused; some engines fade disabled buttons, and this is the moon */
button.moon:disabled { cursor: default; opacity: 1; }
button.moon:focus-visible { outline-offset: 8px; }
.moon .halo { position: absolute; inset: -34%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(236, 227, 210, .09), rgba(150, 175, 215, .045) 52%, transparent 74%); }
.moon .rays { position: absolute; inset: -30%; border-radius: 50%; opacity: .55; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(210, 222, 245, .1) 0deg .6deg, transparent .6deg 3.4deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 60%, #000 62%, transparent 96%); mask: radial-gradient(circle closest-side, transparent 60%, #000 62%, transparent 96%);
  animation: spin 360s linear infinite; }
.moon canvas { position: relative; display: block; width: 100%; height: 100%; transition: filter .5s; }
.emboss { display: none; overflow: visible; }
[data-theme="light"] .moon { display: none; }
[data-theme="light"] .emboss { display: block; animation: press 1.6s .25s cubic-bezier(.2, .7, .2, 1) both; }
.emboss .e-lit { fill: #eee8dc; }
.emboss .e-gh, .emboss .e-fold { fill: #e1dacc; }
.emboss .e-fold { fill: none; stroke: #e1dacc; stroke-width: 1.6; stroke-dasharray: 2.6 2.4; }
.emboss .e-crease { fill: none; stroke: #d8d0c1; stroke-width: 1; stroke-linecap: round; }
@keyframes press { from { opacity: 0; } }
/* the sheet was folded in half: a crease down the middle of the first screen, the left half a shade darker */
[data-theme="light"] body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; pointer-events: none; z-index: -1;
  background:
    linear-gradient(90deg, transparent, rgba(70, 52, 28, .05) 40%, rgba(70, 52, 28, .13) 49.4%, rgba(255, 255, 255, .85) 50.6%, rgba(255, 255, 255, .25) 58%, transparent) 50% 0 / 28px 100% no-repeat,
    linear-gradient(90deg, rgba(70, 52, 28, 0), rgba(70, 52, 28, .035) 50%, transparent 50%);
  -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent);
  animation: crease 1.4s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes crease { from { clip-path: inset(0 0 100% 0); } }

/* the size has its own lines: an engine without svh would otherwise throw the whole font shorthand
   away when it gets to the var() and fall back to 16px sans. vh lines come before svh ones */
h1 { margin-top: clamp(12px, 3.2vh, 32px); margin-top: clamp(12px, 3.2svh, 32px); font: 400 42px/1.02 var(--serif); font-size: clamp(42px, min(9vw, 7.6vh), 76px); font-size: clamp(42px, min(9vw, 7.6svh), 76px); letter-spacing: -.02em; text-wrap: balance; }
h1 em { font-style: italic; color: var(--fg); }
[data-theme="dark"] h1 em { color: #fff; }
.lede { margin-top: clamp(8px, 1.8vh, 16px); margin-top: clamp(8px, 1.8svh, 16px); }

.prompt { position: relative; width: min(760px, 100%); margin-top: clamp(14px, 2.8vh, 24px); margin-top: clamp(14px, 2.8svh, 24px); display: flex; align-items: flex-start; gap: 14px; padding: 15px 14px 15px 22px; border-radius: 16px; text-align: left;
  background: var(--panel); border: 1px solid var(--line3); box-shadow: 0 30px 80px -30px #000, 0 0 90px -34px rgba(var(--accent-rgb), calc(var(--glow) + .1));
  font: 400 16.5px/30px var(--mono); transition: border-color .25s; }
[data-theme="light"] .prompt { box-shadow: inset 0 2px 5px rgba(60, 45, 25, .12), inset 0 -1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(255, 255, 255, .7); }
/* the orbiting ring: a conic gradient on a square that turns by transform, which the compositor
   runs without repainting, seen through a 1px ring. The square is 240px wider than the box, more
   than its diagonal at any height the box gets to, so no corner ever shows */
.orbit { position: absolute; inset: -1px; border-radius: inherit; padding: 1px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.orbit::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% + 240px); height: 0; padding-bottom: calc(100% + 240px);
  background: conic-gradient(from 200deg, transparent 0 60%, rgba(var(--accent-rgb), .85) 75%, transparent 90%);
  transform: translate(-50%, -50%); animation: orbit 7s linear infinite; }
[data-theme="light"] .orbit { opacity: .35; }
/* focused: a solid ring in the ink, not just a lighter border */
.prompt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 30px 80px -30px #000, 0 0 90px -34px rgba(var(--accent-rgb), calc(var(--glow) + .1)); }
[data-theme="light"] .prompt:focus-within { box-shadow: 0 0 0 1px var(--accent), inset 0 2px 5px rgba(60, 45, 25, .12), inset 0 -1px 0 rgba(255, 255, 255, .8), 0 1px 0 rgba(255, 255, 255, .7); }
.ps1 { flex: none; }
.field { position: relative; display: grid; flex: 1; min-width: 0; }
/* long requests scroll inside the box instead of pushing the page down */
.field textarea { display: block; width: 100%; min-height: 30px; max-height: 7.5em; resize: none; overflow: hidden auto; background: none; border: 0; outline: 0; font: inherit; color: var(--fg); caret-color: var(--accent);
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
/* the examples and the empty-submit message sit over the textarea and never change its height */
.ghost, .prompt-msg { position: absolute; inset: 0; pointer-events: none; white-space: pre-wrap; }
.ghost { overflow: clip; overflow-clip-margin: 12px; color: var(--mute); }
.ghost::after { content: ""; display: inline-block; width: .6em; height: 1.15em; margin-left: 3px; vertical-align: -4px; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), calc(var(--glow) * 2)); animation: blink 1.05s steps(1) infinite; }
.prompt.has-value .ghost { display: none; }
.prompt:focus-within .ghost::after { display: none; }
.prompt-msg { color: var(--accent); }
.prompt.is-invalid .ghost { visibility: hidden; }
.send { flex: none; align-self: center; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); color: var(--dim); font: 500 12px/1 var(--mono); letter-spacing: .06em; cursor: pointer; transition: background .2s, color .2s; }
.prompt.has-value .send { background: var(--accent); border-color: transparent; color: var(--bg); }
.prompt.is-empty { animation: shake .4s; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: clamp(12px, 2.2vh, 18px); margin-top: clamp(12px, 2.2svh, 18px); font: 400 13px/1.6 var(--mono); }
.chips button { display: inline-flex; align-items: center; padding: 3px 0; background: none; border: 0; cursor: pointer; color: var(--dim); font: inherit; transition: color .2s; }
/* the brackets are drawing, not words: screen readers hear "ai", not "[ ai ]" */
.chips button::before { content: "["; content: "[" / ""; margin-right: .55em; color: var(--mute); transition: color .2s; }
.chips button::after { content: "]"; content: "]" / ""; margin-left: .55em; color: var(--mute); transition: color .2s; }
.chips button[aria-expanded="true"] { color: var(--accent); }
.chips button[aria-expanded="true"]::before, .chips button[aria-expanded="true"]::after { color: var(--accent); }
.wild { width: 13px; height: 13px; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.chips button[aria-expanded="true"] .wild { transform: rotate(90deg); }
/* what's possible in a category, in the space kept for it under the chips */
.sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px; width: min(760px, 100%); min-height: 2.6em; margin-top: 8px; font: 400 12.5px/1.6 var(--mono);
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.sub.is-open { opacity: 1; transform: none; pointer-events: auto; }
.sub-path { color: var(--accent); }
.sub button { padding: 3px 1px; background: none; border: 0; border-bottom: 1px dotted transparent; cursor: pointer; color: var(--dim); font: inherit; transition: color .2s, border-color .2s; }
.sub button[aria-pressed="true"] { color: var(--accent); border-bottom: 1px solid var(--accent); }
/* everything the open category covers, faint in the empty sky around the hero (lexicon.js) */
.lexicon { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .35s ease; font: 400 11px/1.2 var(--mono); letter-spacing: .02em; }
.lexicon.on { opacity: 1; }
html.brief-open .lexicon, html.intro-on .lexicon, html.intro-ui .lexicon { opacity: 0; }
.lx { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--ghost); opacity: .24; transition: opacity .3s, color .3s, text-shadow .3s;
  animation: lx-in .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) backwards; }
.lx::before { content: ""; display: inline-block; width: 2px; height: 2px; margin: 0 7px 0 0; border-radius: 50%; background: currentColor; vertical-align: .3em; }
.lx.hot { opacity: .9; color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), calc(var(--glow) * 1.6)); }
[data-theme="light"] .lx { color: var(--dim); opacity: .3; }
[data-theme="light"] .lx.hot { opacity: .95; color: var(--accent); }
.lexicon.settled .lx { animation: none; }
@keyframes lx-in { from { opacity: 0; transform: translateY(3px); } }
.nojs { margin-top: 8px; font: 400 12px/1.6 var(--mono); color: var(--dim); }
.nojs a, .mail a, .legal a { text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; }

/* ── the footer: the ticker, the address for anyone who'd rather write, and the privacy notice ── */
.foot { position: relative; display: flex; height: 40px; border-top: 1px solid var(--line); font: 400 12px/1 var(--mono); color: var(--dim); }
.ticker { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker-track { display: flex; flex: none; white-space: nowrap; animation: crawl var(--crawl, 140s) linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
/* paused, one copy of the facts that scrolls sideways (site.js makes it focusable) */
html.still .ticker { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
/* clear of the faded edges at either end (5%, as the mask) */
html.still .ticker-track { padding: 0 5%; }
html.still .ticker::-webkit-scrollbar { display: none; }
/* the pause control names what it will do, like the theme button. Both labels share one cell, so
   it keeps its width and the ticker beside it doesn't shift */
.motion { flex: none; display: grid; align-items: center; padding: 0 16px 0 22px; border: 0; border-right: 1px solid var(--line); background: none; color: var(--dim); font: inherit; cursor: pointer; transition: color .2s; }
.motion > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.motion svg { width: 10px; height: 10px; }
html:not(.js) .motion { display: none; }
html.still .motion .to-still, html:not(.still) .motion .to-move { visibility: hidden; }
/* inside the footer's edges, which are the screen's edges when everything fits */
.motion:focus-visible, .ticker:focus-visible { outline-offset: -5px; }
.ticker-track span { display: inline-flex; align-items: center; }
.ticker-track span::after { content: ""; width: 4px; height: 4px; margin: 0 26px; border-radius: 50%; background: var(--mute); }
.ticker-track .ticker-moon { color: var(--accent); }
.ticker-moon .glyph { margin-right: .6em; }
.mail, .legal { flex: none; display: flex; align-items: center; padding: 0 18px; border-left: 1px solid var(--line); white-space: nowrap; }
.legal { padding-right: 22px; }
.mail a, .legal a { padding: 13px 0; }
@keyframes crawl { to { transform: translateX(-50%); } }

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* behind the brief, and under the intro, the page holds still: nothing to see, and the dialog's
   blurred backdrop would have to be redrawn for every frame of it */
html.brief-open .ticker-track, html.brief-open .rays, html.brief-open .status i, html.brief-open .orbit::before, html.brief-open .ghost::after,
html.intro-on .ticker-track, html.intro-on .orbit::before { animation-play-state: paused; }
/* motion off. html.still is the pause control, or the system's reduce-motion setting until the
   visitor picks (head.js). Without scripts the media query does it. Everything rests where it ends
   up: the ring and the rays unturned, the cursor solid, pages and lists in place */
html.still *, html.still *::before, html.still *::after { animation: none !important; transition: none !important; }
html.still { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after { animation: none !important; transition: none !important; }
  html:not(.js) { scroll-behavior: auto; }
}

/* hover only where there's a pointer to hover with: iOS keeps :hover on after a tap */
@media (hover: hover) {
  .intro-skip:hover { color: #fff; border-color: rgba(228, 232, 238, .45); }
  .theme:hover { color: var(--fg); border-color: var(--dim); }
  .motion:hover { color: var(--fg); }
  button.moon:not(:disabled):hover canvas { filter: brightness(1.12); }
  .send:hover { background: var(--accent); border-color: transparent; color: var(--bg); }
  .chips button:hover { color: var(--accent); }
  .chips button:hover::before, .chips button:hover::after { color: var(--accent); }
  .chips button:hover .wild { transform: rotate(90deg); }
  .sub button:hover { color: var(--fg); border-bottom-color: var(--line2); }
  .sub button[aria-pressed="true"]:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .nojs a:hover, .mail a:hover, .legal a:hover { color: var(--fg); text-decoration-color: currentColor; }
}

/* Windows contrast themes drop the ink, so open and picked get the system highlight */
@media (forced-colors: active) {
  .chips button[aria-expanded="true"], .sub button[aria-pressed="true"], .sub button[aria-pressed="true"]:hover { forced-color-adjust: none; background: Highlight; color: HighlightText; box-shadow: 0 0 0 3px Highlight; }
  .chips button[aria-expanded="true"]::before, .chips button[aria-expanded="true"]::after { color: HighlightText; }
  .sub button[aria-pressed="true"], .sub button[aria-pressed="true"]:hover { border-bottom-color: HighlightText; }
  .prompt:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
  .lexicon { display: none; }
}

/* tablets and phones: 16px in the prompt, or iOS zooms in on focus */
@media (max-width: 860px) {
  .nav { padding: 16px 20px; }
  .nav-end { gap: 16px; }
  .status { display: none; }
  .hero { padding: 0 20px 10px; }
  .moon, .emboss { width: clamp(40px, min(70vw, 90vh - 318px), 400px); width: clamp(40px, min(70vw, 90svh - 318px), 400px); }
  .prompt { padding: 12px 12px 12px 16px; font-size: 16px; line-height: 26px; }
  .field textarea { min-height: 26px; }
  .chips { gap: 8px 18px; }
  .sub { font-size: 12px; gap: 4px 14px; }
}
/* phones: the prompt symbol and enter share the top line, so the request gets the full width */
@media (max-width: 760px) {
  .moon, .emboss { width: clamp(40px, min(70vw, 90vh - 368px), 400px); width: clamp(40px, min(70vw, 90svh - 368px), 400px); }
  .prompt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 9px 9px 12px 16px; }
  .ps1 { grid-area: 1 / 1; line-height: 20px; }
  .send { grid-area: 1 / 2; height: 30px; }
  .field { grid-area: 2 / 1 / 3 / 3; }
  .field textarea { min-height: 52px; }
}
/* fold phones' cover screens: the longer examples need a third line */
@media (max-width: 319px) {
  .field textarea { min-height: 78px; }
}
@media (max-width: 600px) {
  .mail-lead, .motion-word { display: none; }
  /* the address and the notice share one cell, so the ticker keeps its room */
  .mail { padding: 0 0 0 14px; }
  .legal { padding: 0 18px 0 14px; border-left: 0; }
  .motion { padding: 0 14px 0 18px; }
}
@media (max-width: 400px) {
  .mail { padding-left: 12px; }
  .legal { padding: 0 14px 0 12px; }
  .motion { padding: 0 12px 0 14px; }
}