/* Butter Side Up Studios: a quiet palette, with the brand's crust and butter as accents. */
/* We could have used a framework. We used a butter knife. */
:root {
  --paper: #FAF8F4;
  --ink: #1A1714;
  --ink-2: #5F574E;
  --ink-3: #8C8379;
  --rule: #E3DDD3;
  --crust: #B5712E;
  --butter: #FFD84D;
  --night: #161310;
  --night-ink: #F3EEE6;
  --night-ink-2: #A69D90;
  --night-rule: #342E28;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --gutter: clamp(16px, 4vw, 40px); /* Spread evenly. */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--butter); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--crust); outline-offset: 3px; }
code { font: .88em/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
p code, td code { padding: .1em .4em; border: 1px solid var(--rule); border-radius: 5px; background: #fff; white-space: nowrap; }
/* Hidden means hidden, even where a class gives the element a display of its own. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.01em; }
.label, .section-head h2 { font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fine { font-size: .88rem; color: var(--ink-3); }
.idx { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .2s;
}
.link:hover { text-decoration-color: currentColor; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 8px 14px; border-radius: 6px; background: var(--ink); color: var(--paper);
}
.skip:focus { top: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.35em; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font: 500 .98rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s;
}
.btn:hover { background: #000; }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-small { padding: .7em 1.1em; font-size: .88rem; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transition: background-color .2s, color .2s; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arrow { transition: none; }
}

/* Header */
.nav {
  position: sticky; top: 0; z-index: 50; /* 50, because 51 felt arrogant, and 49 felt like giving up too much. */
  background: rgb(250 248 244 / .86);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
/* The name stays on one line: "Studios" steps out where it would crowd the button or the links. */
@media (max-width: 420px), (min-width: 761px) and (max-width: 820px) {
  .brand-tail { display: none; }
}
.brand img { transform-origin: 50% 55%; }
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav-links a { color: var(--ink-2); font-size: .94rem; text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .nav nav { display: none; }
  .nav .btn-small { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* Opening */
.hero { padding: clamp(56px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); }
.hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.available { display: inline-flex; align-items: center; gap: .7em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--butter); box-shadow: 0 0 0 4px rgb(255 216 77 / .3); }
h1 {
  font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 500;
  line-height: 1; letter-spacing: -.04em; text-wrap: balance;
}
h1 .serif { letter-spacing: -.025em; }
.hero-bottom {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px 64px;
  margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--rule);
}
.lede { max-width: 34em; color: var(--ink-2); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.5; }
.hero-cta { display: grid; justify-items: start; gap: 12px; }
@media (max-width: 760px) {
  .hero-bottom { grid-template-columns: 1fr; }
}

/* Sections */
.section { padding: clamp(72px, 10vw, 136px) 0; }
/* The homepage runs its sections closer together: 40% of the usual space between them. */
.home .section { padding: clamp(29px, 4vw, 54px) 0; }
.home .hero { padding-bottom: clamp(16px, 2.4vw, 32px); }
.section-head {
  display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 16px 48px;
  margin-bottom: clamp(40px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--rule);
}
.section-head .num { margin-right: 1em; color: var(--ink); }
.section-head:last-child { margin-bottom: 0; }
.statement { max-width: 21em; font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 450; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.statement + p { max-width: 36em; margin-top: 20px; color: var(--ink-2); font-size: 1.1rem; }
/* Body text below a section's head, at the left edge like the section's other content. */
.costs p, .section-copy > p { max-width: 40em; color: var(--ink-2); font-size: 1.1rem; }
.section-copy > p + p { margin-top: 20px; }
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; }
}

/* What we build */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; margin: 0; padding: 0; list-style: none; }
.services li { padding-top: 18px; border-top: 1px solid var(--ink); }
.services h3 { margin: 28px 0 10px; font-size: 1.3rem; font-weight: 500; letter-spacing: -.015em; }
.services p { color: var(--ink-2); font-size: 1rem; }
@media (max-width: 1000px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services { grid-template-columns: 1fr; }
}

/* Selected work */
.project { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.project-media {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 6px;
  background: linear-gradient(140deg, #EFE7DA, #E2D5C1);
  color: var(--ink-2); font-size: .9rem;
}
/* The tutor's media box: a sample conversation that opens the demo */
.project-chat {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 48px clamp(18px, 3vw, 36px) clamp(20px, 3vw, 32px);
  color: var(--ink); font-size: .95rem; line-height: 1.4; text-decoration: none;
}
.chat-hint { position: absolute; top: 16px; left: clamp(18px, 3vw, 36px); color: var(--ink-2); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.chat-bubble { max-width: 84%; padding: 9px 13px; border-radius: 14px; }
.chat-bubble.you { align-self: flex-end; border-bottom-right-radius: 4px; background: #FFF1BF; }
.chat-bubble.tutor { align-self: flex-start; border-bottom-left-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgb(26 23 20 / .06); }
.chat-bubble b { font-weight: 600; }
.chat-cta { align-self: center; margin-top: 6px; padding: .5em 1.15em; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .9rem; font-weight: 500; transition: background-color .2s; }
.project-chat:hover .chat-cta { background: #000; }
/* By Heart's media box: a real result from the app, in the app's colors, that opens it */
.recite-score { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.recite-note { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.2; }
.recite-text {
  margin-top: 4px; padding: 12px 15px; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgb(26 23 20 / .06);
  font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.4rem); line-height: 1.35;
}
.recite-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font-family: var(--sans); font-size: .82rem; }
.said-close { color: #A15C00; }
.said-wrong { color: #AD2A24; }
.said-extra { color: var(--ink-2); text-decoration: line-through; }
.project + .project { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--rule); }
.project-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.project h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.kicker { margin-top: 10px; color: var(--ink-2); font-size: 1.15rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 14px 28px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); font-size: .98rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }
@media (max-width: 860px) {
  .project { grid-template-columns: 1fr; }
  .project-chat { aspect-ratio: auto; }
}

/* The Test Kitchen */
.kitchen { background: var(--night); color: var(--night-ink); }
.kitchen .section-head { border-top-color: var(--night-rule); }
.kitchen .section-head h2 { color: var(--night-ink-2); }
.kitchen .section-head .num { color: var(--night-ink); }
.kitchen .statement + p { color: var(--night-ink-2); }
.toys { border-top: 1px solid var(--night-rule); }
.toy {
  display: grid; grid-template-columns: minmax(200px, .8fr) 1.3fr 1.1fr; gap: 24px 48px;
  padding: clamp(32px, 4vw, 52px) 0; border-bottom: 1px solid var(--night-rule);
}
.toy h3 { font-size: 1.6rem; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.status { display: inline-flex; align-items: center; gap: .6em; margin-top: 12px; color: var(--night-ink-2); font-size: .85rem; }
.status::before { content: ""; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }
.status.served { color: var(--butter); }
.status.served::before { background: currentColor; }
.toy-what > p:first-child { font-size: 1.05rem; }
.toy-why h4 { margin-bottom: 14px; color: var(--night-ink-2); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.toy-why ul { margin: 0; padding: 0; list-style: none; }
.toy-why li { position: relative; margin-bottom: 10px; padding-left: 20px; color: var(--night-ink-2); font-size: .98rem; }
.toy-why li::before { content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: currentColor; }
.bridge { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.3; }
/* A light stage, with room above the box for the chef to stand. */
.stage {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 170px; margin-top: 22px; padding: 108px 16px 16px;
  border-radius: 10px; background: var(--paper); color: var(--ink);
}
.stage-hint { position: absolute; top: 14px; right: 16px; color: var(--ink-3); font-size: .8rem; }
/* A short looping recording of the real toy, opening its page. main.js plays it only while it's on
   screen, and never for visitors who asked for less motion: they see its still instead. */
.stage-video { min-height: 0; padding: 0; overflow: hidden; }
.stage-video video { display: block; width: 100%; height: auto; transition: opacity .2s; }
.stage-video:hover video { opacity: .92; }
/* Holds the recording's place while a toy is in the oven: one lot from its catalog. */
.stage-lot { justify-content: space-between; gap: 32px; min-height: 240px; padding: 20px; }
.stage-lot .label { color: var(--ink-2); }
.lot-name { margin-bottom: 10px; font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.2; }
.lot-notes { color: var(--ink-2); font-size: .92rem; }
.stage input {
  width: 100%; padding: .75em .95em; border: 1px solid var(--rule); border-radius: 8px;
  background: #fff; color: var(--ink); font: 400 1rem var(--sans);
}
.stage input:focus { border-color: var(--ink); outline: 2px solid var(--butter); outline-offset: 1px; }
.toy-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: .92rem; }
@media (max-width: 1100px) {
  .toy { grid-template-columns: 1fr 1fr; }
  .toy-title { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .toy { grid-template-columns: 1fr; }
}

/* Running costs: what keeps the site up, and its one bill */
.costs .table-scroll { margin: 32px 0 28px; }
.costs .table td:last-child { white-space: nowrap; }
.costs .table tfoot td { border-bottom: 0; color: var(--ink); font-weight: 600; }

/* Process */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 28px; margin: 0; padding: 0; list-style: none; }
.steps li { padding-top: 18px; border-top: 1px solid var(--ink); }
.steps h3 { margin: 28px 0 10px; font-size: 1.2rem; font-weight: 500; letter-spacing: -.015em; }
.steps p { color: var(--ink-2); font-size: .98rem; }
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--rule); }
  .steps li { display: grid; grid-template-columns: 4rem 1fr; padding: 20px 0; border-top-color: var(--rule); }
  .steps h3 { margin: 0 0 6px; }
}

/* Contact: the button to /start/, with plain email beside it, in a row like a form's foot (below) */
.contact-ways { margin-top: 28px; }

/* Footer */
.footer { padding: 32px 0 44px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .9rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; }
.footer ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* Forms: the start page's inquiry, and the Alphabet Soup page's recipe box */
.form { display: grid; gap: 28px; }
.field { display: grid; gap: 6px; color: var(--ink-3); font-size: .85rem; font-weight: 500; }
.field input, .field textarea {
  width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 1.1rem/1.4 var(--sans);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.form-foot, .contact-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form-status { padding: 12px 14px; border-left: 2px solid var(--butter); background: #fff; }
.form-status:empty { display: none; }
.hint { font-weight: 400; }

/* Inner pages */
.page-hero { padding: clamp(40px, 7vw, 96px) 0 clamp(8px, 2vw, 24px); }
.back { display: inline-block; margin-bottom: clamp(28px, 4vw, 48px); color: var(--ink-2); font-size: .92rem; text-decoration: none; }
.back:hover { color: var(--ink); }
.page-title { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.page-hero .status { color: var(--ink-3); }
.page-hero .status.served { color: var(--crust); }
.page-hero .status.served::before { background: var(--butter); border-color: var(--crust); }
.page-lede { max-width: 38em; margin-top: 24px; color: var(--ink-2); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.5; }
.section-tight { padding-block: clamp(48px, 7vw, 96px); }
.page-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 28px; }

/* Test Kitchen pages all share one layout (templates/test-kitchen-page.html). In "Try it", the toy
   sits on the left and "Things to try" on the right. The tips fold into a slim tab the first time
   you use the toy, so the toy gets the room; the tab opens them again (main.js). */
.play {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start;
  column-gap: clamp(32px, 5vw, 72px);
  transition: grid-template-columns .35s cubic-bezier(.4, 0, .2, 1), column-gap .35s cubic-bezier(.4, 0, .2, 1);
}
.play.tips-closed { grid-template-columns: minmax(0, 1fr) 44px; column-gap: 20px; }
.play-toy { min-width: 0; }
.tips { position: sticky; top: 88px; }
.tips-head { margin-bottom: 16px; font: inherit; }
.tips-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tips-act::after { content: "Hide"; color: var(--ink-3); font-size: .85rem; }
.tips-toggle:hover .tips-act::after { color: var(--ink); }
.tips ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
/* Numbered rows, here and in the start page's "What happens next" */
.tips li, .start-next li { display: grid; grid-template-columns: 2.75rem 1fr; padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.tips li { font-size: 1rem; }
.tips .idx, .start-next .idx { padding-top: .2em; }
.play.tips-closed .tips ol { display: none; }
.play.tips-closed .tips-head { margin: 0; }
.play.tips-closed .tips-toggle {
  justify-content: flex-start; gap: 10px; width: 44px; padding: 18px 0;
  border: 1px solid var(--rule); border-radius: 999px; background: #fff;
  writing-mode: vertical-rl;
}
.play.tips-closed .tips-toggle:hover { border-color: var(--ink); }
.play.tips-closed .tips-act::after { content: "+"; color: var(--ink); font-size: 1.1rem; line-height: 1; }
@media (max-width: 860px) {
  .play, .play.tips-closed { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .tips { position: static; }
  .play.tips-closed { row-gap: 24px; }
  .play.tips-closed .tips-toggle { width: auto; padding: 10px 20px; writing-mode: horizontal-tb; }
}
@media (prefers-reduced-motion: reduce) {
  .play { transition: none; }
}

/* What's really going on, as a table: the toy on the left, the skill on the right (Test Kitchen pages) */
.explain table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.explain th, .explain td { padding: 16px 32px 16px 0; border-top: 1px solid var(--night-rule); text-align: left; vertical-align: top; }
.explain th { color: var(--night-ink-2); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.explain td:first-child { width: 38%; color: var(--night-ink); }
.explain td:last-child { color: var(--night-ink-2); }
.explain .bridge { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 640px) {
  .explain thead { display: none; }
  .explain tr { display: block; padding: 16px 0; border-top: 1px solid var(--night-rule); }
  .explain td { display: block; width: auto !important; padding: 0; border: 0; }
  .explain td + td { margin-top: 6px; }
}

/* Add it to your site: the line to paste, and the options */
.code { display: flex; align-items: center; gap: 16px; padding: 16px 16px 16px 20px; border-radius: 10px; background: var(--night); color: var(--night-ink); }
.code code { flex: 1; min-width: 0; font-size: .92rem; overflow-wrap: anywhere; }
.copy {
  flex: none; padding: .55em 1em; border: 1px solid var(--night-rule); border-radius: 999px;
  background: transparent; color: var(--night-ink); font: 500 .85rem var(--sans); cursor: pointer;
}
.copy:hover { border-color: var(--night-ink-2); }
.touches { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin: 48px 0; }
.touches h3 { margin-bottom: 8px; font-size: 1.1rem; font-weight: 500; }
.touches p { color: var(--ink-2); }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.table th, .table td { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.table th { color: var(--ink-3); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.table td:last-child { color: var(--ink-2); }
@media (max-width: 560px) {
  .touches { grid-template-columns: 1fr; }
}

/* The Language Tutor page's "What's really going on" */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin: 0 0 clamp(40px, 5vw, 56px); padding: 0; list-style: none; }
.how li { padding-top: 18px; border-top: 1px solid var(--night-rule); }
.how h3 { margin-bottom: 10px; font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; }
.how p { color: var(--night-ink-2); font-size: .98rem; }
@media (max-width: 900px) {
  .how { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .how { grid-template-columns: 1fr; }
}

/* Start a project (/start/): the inquiry form, with what happens next beside it. The form's
   class names are scoped to .start, since the fridge and the tutor demo have their own. */
.start { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.start .form { gap: 36px; max-width: 40em; }
.start .choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.start .choices legend { margin-bottom: 12px; padding: 0; color: var(--ink-3); font-size: .85rem; font-weight: 500; }
.start .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.start .chip { position: relative; }
.start .chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.start .chip span {
  display: inline-block; padding: .5em 1em; border: 1px solid var(--rule); border-radius: 999px;
  background: #fff; color: var(--ink-2); font-size: .95rem;
  transition: background-color .15s, border-color .15s, color .15s;
}
.start .chip:hover span { border-color: var(--ink-3); color: var(--ink); }
.start .chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.start .chip input:focus-visible + span { outline: 2px solid var(--crust); outline-offset: 3px; }
/* The honeypot: off screen for people, still there for bots that fill in every box */
.start .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.start .btn:disabled { opacity: .6; cursor: progress; }
.start-done { display: grid; gap: 20px; max-width: 36em; padding-top: 24px; border-top: 1px solid var(--rule); }
.start-done:focus { outline: 0; }
.start-done p:not(.label, .statement) { color: var(--ink-2); font-size: 1.1rem; }
.start-next { padding-top: 24px; border-top: 1px solid var(--rule); }
.start-next ol { margin: 16px 0 0; padding: 0; list-style: none; }
@media (max-width: 860px) {
  .start { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .start .chip span { transition: none; }
}

/* Page not found (404.html): the copy beside the toast that landed butter side down */
.not-found {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center;
  gap: clamp(32px, 6vw, 96px); padding-block: clamp(48px, 8vw, 112px);
}
.not-found .page-title { margin-top: 16px; }
.not-found .page-lede { margin-bottom: 32px; }
.not-found-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 32px; padding: 0; list-style: none; font-size: .95rem; }
.not-found-art { justify-self: center; width: 100%; max-width: 360px; }
.not-found-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .not-found { grid-template-columns: 1fr; padding-block: 32px 56px; }
  .not-found-art { order: -1; max-width: 200px; }
}
/* 404 toast: it falls onto the screen as if the screen were the floor, then the butter splats out
   and drips. The resting layout is the finished picture, so without motion it is simply the still. */
/* The secret to immortality is animation-iteration-count: infinite. The toast chose differently. */
.toast-art { overflow: visible; }
.toast-art.play .toast-fall { animation: toast-fall .76s linear both; }
.toast-art.play .toast-flip { animation: toast-flip .76s linear both; }
.toast-art.play .toast-butter-face { animation: toast-face .76s linear both; }
.toast-art.play .toast-land { animation: toast-land .32s .76s ease-out both; }
.toast-art.play .toast-shadow { animation: toast-shadow 1.06s linear both; }
.toast-art.play .toast-splat { animation: toast-splat .5s .74s both; }
/* Each drip runs at its own pace, so they land one by one: quickest on the far right, a slow ooze in
   the short middle one, and a straggler second from the right. */
.toast-art.play .toast-drip-1 { animation: toast-drip-1 2.6s 1.12s cubic-bezier(.55, 0, .35, 1) both; }
.toast-art.play .toast-drip-2 { animation: toast-drip-2 1.5s 1.30s cubic-bezier(.45, 0, .3, 1) both; }
.toast-art.play .toast-drip-3 { animation: toast-drip-3 1.6s 1.00s cubic-bezier(.5, 0, .25, 1) both; }
.toast-art.play .toast-drip-4 { animation: toast-drip-4 1.9s 1.20s cubic-bezier(.4, 0, .6, 1) both; }
.toast-art.play .toast-drip-5 { animation: toast-drip-5 2.8s 1.38s cubic-bezier(.65, 0, .35, 1) both; }
.toast-art.play .toast-drip-6 { animation: toast-drip-6 1.2s 1.08s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes toast-fall {
  0% { transform: translate(-260.0px, -420.0px) rotate(150.0deg) scale(3.200); opacity: 0; }
  8.333% { transform: translate(-234.2px, -378.4px) rotate(137.5deg) scale(3.152); opacity: 1; }
  16.667% { transform: translate(-208.9px, -337.5px) rotate(125.0deg) scale(3.016); }
  25% { transform: translate(-184.1px, -297.4px) rotate(112.5deg) scale(2.813); }
  33.333% { transform: translate(-159.8px, -258.2px) rotate(100.0deg) scale(2.571); }
  41.667% { transform: translate(-136.2px, -220.0px) rotate(87.5deg) scale(2.316); }
  50% { transform: translate(-113.2px, -182.8px) rotate(75.0deg) scale(2.065); }
  58.333% { transform: translate(-90.9px, -146.9px) rotate(62.5deg) scale(1.830); }
  66.667% { transform: translate(-69.6px, -112.4px) rotate(50.0deg) scale(1.618); }
  75% { transform: translate(-49.3px, -79.6px) rotate(37.5deg) scale(1.430); }
  83.333% { transform: translate(-30.3px, -48.9px) rotate(25.0deg) scale(1.266); }
  91.667% { transform: translate(-13.2px, -21.3px) rotate(12.5deg) scale(1.123); }
  100% { transform: translate(-0.0px, -0.0px) rotate(0.0deg) scale(1.000); }
}
@keyframes toast-flip {
  0% { transform: scaleX(-1.000); }
  8.333% { transform: scaleX(-0.707); }
  16.667% { transform: scaleX(-0.000); }
  25% { transform: scaleX(0.707); }
  33.333% { transform: scaleX(1.000); }
  41.667% { transform: scaleX(0.707); }
  50% { transform: scaleX(0.000); }
  58.333% { transform: scaleX(-0.707); }
  66.667% { transform: scaleX(-1.000); }
  75% { transform: scaleX(-0.707); }
  83.333% { transform: scaleX(-0.000); }
  91.667% { transform: scaleX(0.707); }
  100% { transform: scaleX(1.000); }
}
@keyframes toast-face {
  0%, 16.66% { opacity: 1; } 16.67%, 50% { opacity: 0; } 50.01%, 83.33% { opacity: 1; } 83.34%, 100% { opacity: 0; }
}
@keyframes toast-land {
  30% { transform: scale(1.045); } 65% { transform: scale(.985); }
}
@keyframes toast-shadow {
  0.00% { transform: translate(150.0px, 230.0px) rotate(150.0deg) scale(1.450); opacity: 0.000; }
  5.97% { transform: translate(135.1px, 207.2px) rotate(137.5deg) scale(1.413); opacity: 0.025; }
  11.95% { transform: translate(120.5px, 184.8px) rotate(125.0deg) scale(1.375); opacity: 0.050; }
  17.92% { transform: translate(106.2px, 162.9px) rotate(112.5deg) scale(1.337); opacity: 0.075; }
  23.90% { transform: translate(92.2px, 141.4px) rotate(100.0deg) scale(1.300); opacity: 0.100; }
  29.87% { transform: translate(78.6px, 120.5px) rotate(87.5deg) scale(1.262); opacity: 0.125; }
  35.85% { transform: translate(65.3px, 100.1px) rotate(75.0deg) scale(1.225); opacity: 0.150; }
  41.82% { transform: translate(52.5px, 80.4px) rotate(62.5deg) scale(1.188); opacity: 0.175; }
  47.80% { transform: translate(40.1px, 61.5px) rotate(50.0deg) scale(1.150); opacity: 0.200; }
  53.77% { transform: translate(28.4px, 43.6px) rotate(37.5deg) scale(1.113); opacity: 0.225; }
  59.75% { transform: translate(17.5px, 26.8px) rotate(25.0deg) scale(1.075); opacity: 0.250; }
  65.72% { transform: translate(7.6px, 11.7px) rotate(12.5deg) scale(1.038); opacity: 0.275; }
  71.70% { transform: translate(0.0px, 0.0px) rotate(0.0deg) scale(1.000); opacity: 0.300; }
  100% { transform: none; opacity: 0; }
}
@keyframes toast-splat {
  0% { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.12, .8, .3, 1); }
  4% { opacity: 1; }
  62% { transform: scale(1.05); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: none; }
}
@keyframes toast-drip-1 { from { transform: translateY(-441px); } }
@keyframes toast-drip-2 { from { transform: translateY(-319px); } }
@keyframes toast-drip-3 { from { transform: translateY(-494px); } }
@keyframes toast-drip-4 { from { transform: translateY(-123px); } }
@keyframes toast-drip-5 { from { transform: translateY(-378px); } }
@keyframes toast-drip-6 { from { transform: translateY(-500px); } }
@media (prefers-reduced-motion: reduce) {
  .toast-art.play * { animation: none !important; }
}

/* Joe was here too. Joe has been spoken to about the CSS. */