/* Hallmark · shape: app screen · genre: playful · theme: Sticker (deal 1/3, seed friendly-tool-where-small-247c·eae6a6b6·2026-10-31·r0) · redesign: full
 * nav: kept, a top bar with the wordmark and the three steps · signature: the search universe tally, a lime die-cut with the running total and a bar filling toward 20,000, over a sheet of phrase stickers, calmed to ink and lime on the done screen look at Alex's ask · states: loading (thinking dots, "..." counts), empty (phrases appear here), error (message in the log, add note), full · sticker: sheet, vinyl in dark mode
 * axes: light/display-heavy/chromatic-magenta · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V5 · weakest: P, a guided tool has little to argue, so the phrases themselves carry it: every search phrase is a sticker you keep or peel off */
/* Hallmark · waive 39b · the 21px input is index.html opened from disk, where /static/app.css cannot load · the served page measures every field at 40px or more */
/* Hallmark · dismissed F7 · the pill chips are the step tags and the search-phrase stickers, tags the Sticker theme sets as pills */
/* Hallmark · dropped .mark · a drawn two-dot logo, the Sticker theme never draws a sticker, the wordmark carries the brand */
/* Hallmark · copy: verbatim · every tester-facing line stays in COPY in app.js as the owner's draft */
@import url("./tokens.css");
@import url("./base.css");

/* App tokens: fills keep dark type in both colourways, and the hard shadow keeps its own colour. */
:root {
  --color-fill-ink: oklch(21% 0.011 81);
  --color-shadow: oklch(21% 0.011 81);
  --color-card: oklch(99.4% 0.007 89);
  --shadow-card: 5px 6px 0 var(--color-shadow);
  --shadow-small: 3px 4px 0 var(--color-shadow);
  --shadow-press: 1px 1px 0 var(--color-shadow);
  --app-width: 1280px;
  --control: 40px;
  --color-bubble: oklch(92.8% 0.021 79);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: oklch(21% 0.011 81); --color-paper-2: oklch(25.5% 0.013 72); --color-paper-3: oklch(28% 0.013 72);
    --color-card: oklch(25.5% 0.013 72);
    --color-ink: oklch(95.7% 0.013 82); --color-ink-2: oklch(88% 0.013 82); --color-muted: oklch(76% 0.017 70);
    --color-rule: oklch(33% 0.016 75); --color-shadow: oklch(10% 0.008 81); --color-bubble: oklch(34% 0.016 72);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(21% 0.011 81); --color-paper-2: oklch(25.5% 0.013 72); --color-paper-3: oklch(28% 0.013 72);
  --color-card: oklch(25.5% 0.013 72);
  --color-ink: oklch(95.7% 0.013 82); --color-ink-2: oklch(88% 0.013 82); --color-muted: oklch(76% 0.017 70);
  --color-rule: oklch(33% 0.016 75); --color-shadow: oklch(10% 0.008 81); --color-bubble: oklch(34% 0.016 72);
}

body { min-height: 100vh; }
button { cursor: pointer; color: inherit; }
textarea { resize: vertical; }

/* The die-cut: a raised surface on a white edge and a hard offset. */
.diecut { background: var(--color-card); border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

/* Top bar */
.top { border-bottom: var(--rule-bar) dashed var(--color-rule); }
.bar { max-width: var(--app-width); margin-inline: auto; padding: var(--space-md) var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; }
.brand { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; letter-spacing: var(--tracking-display); }
.steps { display: flex; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.steps li { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 2px var(--color-rule); }
.steps li.past { color: var(--color-ink); box-shadow: none; }
.new-project { margin-left: auto; border: 0; background: none; padding: var(--space-2xs) var(--space-sm); font: inherit; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.steps li.on { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }

main { max-width: var(--app-width); margin-inline: auto; padding: var(--space-xl) var(--space-lg) var(--space-2xl); }

/* Controls */
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control); padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-md); line-height: 1; }
.primary { background: var(--color-fill-ink); color: var(--color-white); box-shadow: 0 0 0 4px var(--color-white), var(--shadow-card);
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.primary:hover:not(:disabled) { background: var(--color-ink-2); translate: -1px -2px; }
.primary:active:not(:disabled) { translate: 4px 5px; box-shadow: 0 0 0 4px var(--color-white), var(--shadow-press); }
.primary:disabled { background: var(--color-paper-2); color: var(--color-muted); box-shadow: 0 0 0 4px var(--color-white), var(--shadow-press); cursor: not-allowed; opacity: 0.55; }
.primary.wide { width: 100%; min-height: 48px; margin-top: var(--space-xl); font-size: var(--text-lg); }
.secondary { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.secondary:hover:not(:disabled) { background: var(--color-ink); color: var(--color-paper); }
.secondary:active:not(:disabled) { translate: 1px 1px; }
.secondary:disabled { background: var(--color-paper-2); color: var(--color-muted); box-shadow: inset 0 0 0 2px var(--color-rule); cursor: not-allowed; opacity: 0.55; }
.primary:focus-visible, .secondary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }

/* Inputs: a 2px ink edge, square, the focus ring an outline */
.start textarea, .start input, .say textarea, .add input {
  width: 100%; min-height: var(--control); border: 2px solid var(--color-ink); border-radius: 12px; background: var(--color-paper-3); color: var(--color-ink);
  padding: var(--space-xs) var(--space-sm); font-size: var(--text-md); }
.start textarea:focus-visible, .start input:focus-visible, .say textarea:focus-visible, .add input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.start textarea:disabled, .say textarea:disabled, .add input:disabled { opacity: 0.55; cursor: not-allowed; }
::placeholder { color: var(--color-muted); opacity: 1; }

/* 1. Welcome */
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.intro h1 { font-size: var(--text-3xl); max-width: 16ch; line-height: 1.05; }
.lede { font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink-2); max-width: 44ch; margin-top: var(--space-md); }
.drift { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xs); margin-top: var(--space-xl); max-width: 36rem; }
.drift span { font-size: var(--text-sm); font-weight: 700; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); font-weight: 600; rotate: -2deg; }
.drift span:nth-child(4n+2) { rotate: 2deg; }
.drift span:nth-child(4n+3) { rotate: -1deg; }
.drift span:nth-child(4n) { rotate: 1deg; }
.drift span:nth-child(n+11) { display: none; }

.start { display: grid; gap: var(--space-xs); padding: var(--space-lg); }
.start label { font-weight: 700; margin-top: var(--space-xs); }
.start label:first-child { margin-top: 0; }
.opt { font-weight: 400; color: var(--color-muted); }
.start .primary { justify-self: start; margin-top: var(--space-md); min-height: 48px; padding: 0 var(--space-xl); font-size: var(--text-lg); }

.how { list-style: none; margin: var(--space-2xl) 0 0; padding: var(--space-lg) 0 0; border-top: var(--rule-bar) dashed var(--color-rule);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.how li { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-md); background: var(--color-card);
  border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); rotate: -1deg; }
.how li:nth-child(2) { rotate: 1.2deg; translate: 0 6px; }
.how li:nth-child(3) { rotate: -0.6deg; }
.how b { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--color-fill-ink); color: var(--color-accent-2);
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }

/* 2. Shape it together */
#work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-xl); align-items: start; }
.chat { display: flex; flex-direction: column; height: calc(100vh - 140px); min-height: 520px; position: sticky; top: var(--space-md); }
.log { flex: 1; overflow-y: auto; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.msg { max-width: 88%; padding: var(--space-sm) var(--space-md); border-radius: 16px; }
.msg p { margin: 0 0 var(--space-xs); } .msg p:last-child { margin: 0; }
.msg ul, .msg ol { margin: var(--space-2xs) 0 var(--space-xs); padding-left: var(--space-lg); }
.msg li { margin: var(--space-3xs) 0; }
.msg.guide { background: var(--color-bubble); border-top-left-radius: 4px; align-self: flex-start; }
.msg.tester { background: var(--color-ink); color: var(--color-paper); border-top-right-radius: 4px; align-self: flex-end; }
.msg.error { background: var(--color-slot); color: var(--color-fill-ink); align-self: flex-start; }
.status { display: flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-lg) var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }
.dots { display: inline-flex; gap: var(--space-2xs); }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink); animation: blink 1.2s var(--ease-in-out) infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; } .dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.say { display: flex; gap: var(--space-xs); padding: var(--space-sm); border-top: var(--rule-bar) dashed var(--color-rule); align-items: end; }
.say textarea { resize: none; }

.panel { display: grid; gap: var(--space-lg); }
.tally { background: var(--color-fill-ink); color: var(--color-white); padding: var(--space-lg); border: 0; box-shadow: none; }
.tally h2 { font-size: var(--text-2xl); max-width: none; color: var(--color-accent-2); }
.hint { font-size: var(--text-sm); margin-top: var(--space-2xs); max-width: 48ch; }
.meter { margin-top: var(--space-md); }
.meter-text { display: flex; align-items: baseline; gap: var(--space-xs); }
.meter-text strong { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.meter-text span { font-weight: 700; }
.track { height: 16px; margin-top: var(--space-sm); border-radius: var(--radius-pill); background: transparent; box-shadow: inset 0 0 0 2px var(--color-white); overflow: hidden; }
.fill { height: 100%; background: var(--color-accent-2); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.meter.over .fill { background: var(--color-accent); }
.room { margin-top: var(--space-xs); font-size: var(--text-sm); min-height: 1lh; }
.room.over { font-weight: 700; }

.groups { display: grid; gap: var(--space-lg); }
.group h3 { font-family: var(--font-display); font-size: var(--text-lg); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); max-width: none; margin-bottom: var(--space-sm); }
.group h3 small { font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.phrases { display: grid; gap: var(--space-sm); }
.phrase { background: var(--color-card); border: 4px solid var(--color-white); border-radius: 14px; box-shadow: var(--shadow-small); rotate: -0.4deg;
  transition: translate var(--dur-micro) var(--ease-out), rotate var(--dur-micro) var(--ease-out); }
.phrase:nth-child(even) { rotate: 0.4deg; }
.phrase:hover { translate: 0 -2px; rotate: 0deg; }
.phrase.open { rotate: 0deg; }
.phrase-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); cursor: pointer; min-height: 56px; }
.phrase-main { flex: 1; min-width: 0; }
.phrase-name { font-weight: 700; font-size: var(--text-md); }
.phrase-why { font-size: var(--text-sm); color: var(--color-muted); }
.count { flex: none; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.tag { font-size: var(--text-xs); font-weight: 700; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); margin-left: var(--space-xs); vertical-align: 2px; white-space: nowrap; }
.tag.mixed { box-shadow: inset 0 0 0 2px var(--color-muted); color: var(--color-ink-2); border-radius: var(--radius-pill); }
.tag.mine { background: var(--color-ink); color: var(--color-paper); }
.phrase.covered { opacity: 0.7; }
.phrase.covered .count { color: var(--color-muted); box-shadow: inset 0 0 0 2px var(--color-rule); }
.x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--color-muted); font-size: var(--text-xl); line-height: 1;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.x:hover { background: var(--color-paper-2); color: var(--color-ink); }
.x:active { background: var(--color-rule); }
.x:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.examples { display: none; padding: 0 var(--space-md) var(--space-md); border-top: var(--rule-bar) dashed var(--color-rule); }
.phrase.open .examples { display: block; }
.examples p { margin: var(--space-sm) 0 var(--space-xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.examples ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.examples li { font-size: var(--text-sm); padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 2px var(--color-rule); }
.empty { color: var(--color-muted); padding: var(--space-xl) var(--space-xs); text-align: center; border: var(--rule-bar) dashed var(--color-rule); border-radius: var(--radius-card); }

.aside h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.aside-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.aside-list button { min-height: 32px; border: var(--rule-bar) dashed var(--color-muted); background: transparent; border-radius: var(--radius-pill); padding: 0 var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.aside-list button:hover { border-style: solid; border-color: var(--color-ink); }
.aside-list button:active { background: var(--color-paper-2); }
.aside-list button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.add { display: flex; gap: var(--space-xs); }
.add input { border-radius: var(--radius-pill); padding: 0 var(--space-md); }
.note { font-size: var(--text-sm); color: var(--color-ink-2); }

/* 3. Done */
.done-wrap { max-width: 44rem; margin-inline: auto; }
.done-wrap h1 { font-size: var(--text-3xl); max-width: 18ch; }
.done-list { padding: var(--space-lg); margin-top: var(--space-xl); rotate: -0.5deg; }
.done-list h2 { font-size: var(--text-lg); margin: var(--space-md) 0 var(--space-2xs); }
.done-list h2:first-child { margin-top: 0; }
.done-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.done-list li { font-size: var(--text-sm); font-weight: 600; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 2px var(--color-ink); }
.next { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--color-fill-ink); color: var(--color-white); border-radius: var(--radius-card); }
.next h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); color: var(--color-accent-2); }
.next p { max-width: 60ch; }


/* 1. Intro frames, one idea each, with a next button (Alex 2026-11-04) */
.frames { margin-top: var(--space-xl); padding: var(--space-lg); rotate: -0.6deg; max-width: 36rem; }
.frame { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-lg); align-items: center; min-height: 150px; }
.frame-art svg, .lesson-art svg { width: 100%; height: auto; fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.frame-art { padding: var(--space-xs); border-radius: 50%; background: var(--color-accent-2); aspect-ratio: 1; display: grid; place-items: center; }
.frame-art svg { stroke: var(--color-fill-ink); }
.frame-text h2 { font-size: var(--text-xl); max-width: none; }
.frame-text p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.frame-nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-md); }
.round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--color-fill-ink); color: var(--color-white); font-size: var(--text-xl); line-height: 1; }
.round:disabled { opacity: 0.25; cursor: default; }
.round:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.frame-dots { display: flex; gap: var(--space-xs); }
.frame-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 0; background: var(--color-rule); }
.frame-dots button.on { background: var(--color-ink); }
.start .drift { margin-top: var(--space-lg); }
.country { display: grid; gap: var(--space-xs); }
.country label { font-weight: 700; margin-top: var(--space-xs); }
.country select, .confirm input, .saved input { min-height: var(--control); border: 2px solid var(--color-ink); border-radius: 10px; padding: 0 var(--space-sm); background: var(--color-card); color: var(--color-ink); font: inherit; width: 100%; }

/* coming back with a project code (Alex 2026-11-05) */
.start-col { display: grid; gap: var(--space-lg); align-content: start; }
.return { display: grid; gap: var(--space-xs); padding: 0 var(--space-xs); }
.return label { font-weight: 700; }
.return input { min-height: var(--control); border: 2px solid var(--color-ink); border-radius: 10px; padding: 0 var(--space-sm); background: var(--color-card); color: var(--color-ink); font: inherit; width: 100%; text-transform: uppercase; letter-spacing: 0.08em; }
.code-line { color: var(--color-ink); font-size: var(--text-md); }
.code { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.06em; padding: var(--space-3xs) var(--space-sm); border-radius: 8px; background: var(--color-accent-2); color: var(--color-fill-ink); }
.handoff .build-grid, .handoff #sampleBox { display: none; }
.explain { margin-top: var(--space-xl); }
.explain .frames { margin-top: var(--space-sm); rotate: 0.4deg; }
.explain-title { font-size: var(--text-lg); }

/* depth mark on the meter: the guide recommends more than this */
.track { position: relative; }
.meter .track::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--depth, 30%); width: 2px; background: var(--color-white); opacity: 0.6; }

/* confirm and the resume link */
.confirm { display: grid; gap: var(--space-xs); padding: var(--space-lg); margin-top: var(--space-md); }
.confirm h3 { font-size: var(--text-xl); max-width: none; }
.confirm label { font-weight: 700; margin-top: var(--space-xs); }
.confirm-row { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }
.saved { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); }
.saved-row { display: flex; gap: var(--space-xs); margin-top: var(--space-2xs); }
.saved-row input { font-size: var(--text-sm); color: var(--color-ink-2); }

/* 3. The build */
#done .done-wrap { max-width: 64rem; }
.build-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); align-items: start; }
.build-steps { list-style: none; margin: 0; padding: var(--space-lg); display: grid; gap: var(--space-sm); }
.build-steps li { display: flex; align-items: center; gap: var(--space-sm); font-weight: 600; color: var(--color-muted); }
.build-steps li small { margin-left: auto; font-size: var(--text-sm); font-weight: 700; }
.build-steps .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-rule); }
.build-steps li.done, .build-steps li.running, .build-steps li.failed { color: var(--color-ink); }
.build-steps li.done .mark { background: var(--color-fill-ink); box-shadow: none; }
.build-steps li.running .mark { background: var(--color-accent-2); box-shadow: inset 0 0 0 2px var(--color-ink); animation: blink 1.2s var(--ease-in-out) infinite; }
.build-steps li.failed .mark { background: var(--color-accent); box-shadow: none; }
.lesson { padding: var(--space-lg); background: var(--color-fill-ink); color: var(--color-white); border-radius: var(--radius-card); }
.lesson-art { width: 96px; }
.lesson-art svg { stroke: var(--color-accent-2); }
.lesson h2 { font-size: var(--text-xl); color: var(--color-accent-2); margin-top: var(--space-sm); max-width: none; }
.lesson p { margin-top: var(--space-xs); max-width: 48ch; }
.fail { padding: var(--space-lg); background: var(--color-slot); color: var(--color-fill-ink); border-radius: var(--radius-card); display: grid; gap: var(--space-md); justify-items: start; }
a.primary { text-decoration: none; }
.side { display: grid; gap: var(--space-lg); }
.side .primary.wide { margin-top: 0; }
.sample { margin-top: var(--space-xl); padding: var(--space-lg); }
.sample h2 { font-size: var(--text-xl); }
.sample table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); font-variant-numeric: tabular-nums; }
.sample th { text-align: left; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-2xs) 0; border-bottom: var(--rule-bar) solid var(--color-ink); }
.sample th:last-child, .sample td:last-child { text-align: right; }
.sample td { padding: var(--space-2xs) 0; border-bottom: var(--rule-hair) dashed var(--color-rule); }
.phrases-title { font-size: var(--text-lg); margin-top: var(--space-xl); }
.phrases-title + .done-list { margin-top: var(--space-sm); }

@media (max-width: 60rem) {
  .build-grid { grid-template-columns: minmax(0, 1fr); }
  .welcome-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  #work { grid-template-columns: minmax(0, 1fr); }
  .chat { position: static; height: auto; max-height: 60vh; min-height: 360px; }
  .log { min-height: 0; }
  #happy { position: sticky; bottom: var(--space-md); z-index: var(--z-sticky); }
}
@media (max-width: 40rem) {
  .frame { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-md); }
  .bar { padding: var(--space-sm) var(--space-md); flex-wrap: wrap; }
  main { padding: var(--space-lg) var(--space-md) var(--space-xl); }
  .intro h1, .done-wrap h1 { font-size: var(--text-2xl); }
  .how { grid-template-columns: minmax(0, 1fr); }
  .how li, .how li:nth-child(2), .how li:nth-child(3) { rotate: 0deg; translate: none; }
  .msg { max-width: 94%; }
  .x { width: 44px; height: 44px; }
}
@media (max-width: 40rem) {
  .drift { margin-top: var(--space-lg); }
  .drift span:nth-child(n+5) { display: none; }
}

/* invite gate (2026-11-06): shown instead of the start form until the invite code works */
.invite .invite-title { font-weight: 700; font-size: var(--text-lg, 1.2rem); margin: 0; }
.invite input { min-height: var(--control); border: 2px solid var(--color-ink); border-radius: 10px; padding: 0 var(--space-sm); background: var(--color-card); color: var(--color-ink); font: inherit; width: 100%; }