/*
 * Fake Fables — the look.
 *
 * From _product/design_v4.html (direction A, "Lantern") with the red chalk of
 * design_v5 as the one hot colour. Everything reads from the tokens at the top;
 * night is the same tokens with paper and ink swapped.
 *
 * No build step. This file goes up over FTP like everything else.
 */

:root {
  --dsp:  "Fraunces", Georgia, "Times New Roman", serif;
  --ui:   "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Xanh Mono", "Courier New", monospace;

  --ground:   #F6EDCF;   /* butter */
  --ground-2: #EDE1B6;
  --ink:      #1F1A15;   /* warm charcoal */
  --ink-2:    #6B614B;
  --accent:   #B5432A;   /* red chalk */
  --accent-2: #2B48D6;   /* cobalt, drawings only */
  --chalk:    #FBF6E8;
  --shade:    #1F1A15;
  --blend:    multiply;
  --grain-a:  .13;
  /* plain rgba twins for the card: html2canvas cannot read color-mix() */
  --rule-solid: rgba(31, 26, 21, .16);
  --rule-soft:  rgba(31, 26, 21, .08);
  --shade-35:   rgba(31, 26, 21, .35);
  --tint-solid: #F0DCC6;
  --tint2-solid:#E9E4CF;

  --wght: 400; --soft: 60; --wonk: 1;      /* the question face, moved by the page */
  --r: 6px; --r-lg: 16px; --r-pill: 999px;
  --ease:   cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
html[data-mode="night"] {
  --ground:   #15130F;
  --ground-2: #1F1B14;
  --ink:      #F3E9CB;
  --ink-2:    #A89D7E;
  --accent:   #E8785A;
  --accent-2: #8B9BFF;
  --chalk:    #FFFFFF;
  --shade:    #0A0907;
  --blend:    screen;
  --grain-a:  .10;
  --rule-solid: rgba(243, 233, 203, .16);
  --rule-soft:  rgba(243, 233, 203, .08);
  --shade-35:   rgba(10, 9, 7, .45);
  --tint-solid: #241A14;
  --tint2-solid:#1C1C16;
}
:root {
  --rule:   color-mix(in oklab, var(--ink) 16%, transparent);
  --rule-2: color-mix(in oklab, var(--ink) 8%,  transparent);
  --panel:  color-mix(in oklab, var(--ink) 5%,  var(--ground));
  --tint:   color-mix(in oklab, var(--accent) 9%, var(--ground));
  --shadow: 0 1px 0 var(--rule), 0 12px 40px -18px color-mix(in oklab, var(--shade) 45%, transparent);
}

/* ------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  transition: background .6s, color .6s;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--grain);
  opacity: var(--grain-a);
  mix-blend-mode: var(--blend);
  pointer-events: none;
  z-index: 0;
}
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------ the drawing behind the question */
/*
 * The newest object they set down, drawn large and faint in whichever corner
 * the arrangement leaves empty. It changes with every real answer, so the
 * page is never the same twice.
 */
#bg {
  position: fixed; z-index: 0; pointer-events: none;
  width: min(46vmin, 420px); height: min(46vmin, 420px);
  right: 4vw; bottom: 8vh;
  opacity: 0; transform: rotate(-6deg) scale(.92);
  transition: opacity .8s var(--ease), transform .9s var(--ease), right .7s var(--ease), left .7s var(--ease), top .7s var(--ease), bottom .7s var(--ease);
}
#bg.in { opacity: 1; transform: rotate(-4deg) scale(1); }
#bg .dr { width: 100%; height: 100%; opacity: .11; overflow: visible; }
#bg .bgw {
  display: block; font: italic 700 clamp(3rem, 12vmin, 8rem)/1 var(--dsp); color: var(--accent); opacity: .16;
  transform: rotate(-8deg); white-space: nowrap; letter-spacing: -.02em;
}
body[data-arr="arr-centre"]   #bg { right: auto; left: 5vw; bottom: 12vh; top: auto; }
body[data-arr="arr-editorial"]#bg { right: 6vw; left: auto; bottom: 10vh; top: auto; }
body[data-arr="arr-margin"]   #bg { right: 8vw; left: auto; top: 12vh; bottom: auto; }
body[data-arr="arr-anchored"] #bg { right: 10vw; left: auto; top: 10vh; bottom: auto; }
body[data-arr="arr-poster"]   #bg { right: 6vw; left: auto; bottom: 14vh; top: auto; }
body[data-arr="arr-thread"]   #bg { right: 6vw; left: auto; top: 14vh; bottom: auto; }
body[data-arr="arr-card"]     #bg { opacity: 0 !important; }
body[data-arr="arr-read"]     #bg { right: 6vw; left: auto; top: 16vh; bottom: auto; }
body.onpiece #bg { opacity: 0 !important; }

/* ------------------------------------------------------------ working */
/* a thin red line runs along the top of the page whenever the interviewer is thinking */
#busybar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 30; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .25s; }
#busybar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--accent); border-radius: 2px; }
#busybar.on { opacity: 1; }
#busybar.on::before { animation: sweep 1.4s var(--ease) infinite; }
@keyframes sweep { 0% { left: -40%; width: 30%; } 60% { width: 45%; } 100% { left: 110%; width: 30%; } }
.stage.busy .question { opacity: .75; }

/* ------------------------------------------------------------ the bar */
.bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(16px, 4vw, 40px);
}
.wordmark {
  margin: 0;
  font: 400 1.05rem var(--dsp);
  font-variation-settings: "wght" 500, "SOFT" 100, "WONK" 1;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
/* the same word as the rest, struck through in red chalk */
.wordmark .fake {
  font: inherit; letter-spacing: inherit; text-transform: none; color: inherit;
  text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: .1em;
}
.wordmark .me {
  font: 400 .6em var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-2); margin-left: .5em; vertical-align: .3em;
}
.bar .ico { display: flex; gap: .15rem; }
.ibtn {
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2);
  display: inline-grid; place-items: center;
}
.ibtn:hover { background: var(--panel); color: var(--ink); }
.ibtn svg { width: 19px; height: 19px; }

/* the ledger: one mark per question, weight = what the answer gave */
.ledger { display: inline-flex; align-items: flex-end; gap: 5px; height: 22px; }
.ledger i {
  display: block; width: 4px; height: 8px;
  background: var(--ink-2); opacity: .35; border-radius: 1px;
  transition: height .5s var(--spring), background .4s, opacity .4s;
}
.ledger i[data-v="1"] { height: 14px; background: var(--ink); opacity: 1; }
.ledger i[data-v="2"] { height: 22px; background: var(--accent); opacity: 1; }
.ledger i[data-v="0"] { height: 6px;  background: var(--ink-2); opacity: .7; }
.ledger i.next { background: transparent; border-bottom: 2px dotted var(--ink-2); height: 0; opacity: 1; }
.ledger i.next.busy { animation: tick 1.1s infinite; }
@keyframes tick { 50% { opacity: .15; } }

/* ------------------------------------------------------------ the stage */
.stage {
  position: relative; z-index: 1;
  min-height: calc(100vh - 70px);
  padding: 0 clamp(16px, 4vw, 40px) 7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  transition: filter .7s, background .6s;
}
.stage::after {                       /* the ghost numeral: the turn */
  content: attr(data-n);
  position: fixed; right: -.04em; bottom: -.22em;
  font: 200 min(48vw, 52vh)/1 var(--dsp);
  font-variation-settings: "wght" 200, "SOFT" 100, "WONK" 1;
  color: var(--ink); opacity: .045;
  letter-spacing: -.06em; pointer-events: none; z-index: 0;
  transition: opacity .6s;
}
.stage[data-n=""]::after { opacity: 0; }
.stage > * { position: relative; z-index: 1; }

#main  { max-width: 60ch; }
.kick  {
  font: 400 .72rem var(--mono); letter-spacing: .08em; color: var(--ink-2);
  margin: 0 0 .9rem; min-height: 1em;
}
.kick b { font-weight: 400; color: var(--accent); }

.question {
  font-family: var(--dsp);
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.015em;
  margin: 0; max-width: 20ch; text-wrap: balance;
  font-optical-sizing: auto;
  font-variation-settings: "wght" var(--wght), "SOFT" var(--soft), "WONK" var(--wonk);
  transition: font-variation-settings .7s var(--ease), color .7s, opacity .4s, transform .5s var(--ease);
}
.question .w { display: inline-block; transition: transform .7s var(--ease), color .7s; }
.question.in  { opacity: 0; transform: translateY(8px); }
.question em  { font-style: italic; color: var(--accent); }

/* states: what an answer does to the page */
.stage.warm  { --wght: 450; --soft: 70;  --wonk: 1; }
.stage.lit   { --wght: 560; --soft: 100; --wonk: 1; background: var(--tint); }
.stage.slump { --wght: 200; --soft: 0;   --wonk: 0; filter: saturate(.55); }
.stage.slump #main { transform: translateY(8px); }
#main { transition: transform .7s var(--ease), opacity .3s; }
.stage.crack .question .w { color: var(--ink-2); }
.stage.busy #answer { pointer-events: none; }
.stage.busy #answer > *:not(.think) { opacity: .45; }

#answer { margin-top: 1.6rem; }
#answer > * { transition: opacity .25s; }

/* ------------------------------------------------------------ answers */
.opts { display: grid; gap: .5rem; max-width: 520px; transition: opacity .3s; }
.opts.two { grid-template-columns: 1fr 1fr; max-width: 620px; }
.opts.two .opt { min-height: 96px; align-items: flex-end; font-size: 1.15rem; }
.opt {
  position: relative; display: flex; text-align: left;
  font: 500 1.05rem/1.25 var(--ui);
  padding: .85rem 1rem .85rem 2.4rem;
  border: 1.5px solid var(--ink); border-radius: var(--r);
  background: transparent; color: var(--ink);
  transition: background .25s, color .25s, transform .25s var(--ease), opacity .4s;
  animation: rise .5s var(--ease) both;
}
.opt .k {
  position: absolute; left: .75rem; top: .9rem;
  font: 400 .68rem var(--mono); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 3px; padding: .1em .35em; line-height: 1;
}
.opt:hover { background: var(--panel); transform: translateY(-1px); }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.opt[aria-pressed="true"] .k { color: var(--ground); border-color: color-mix(in oklab, var(--ground) 40%, transparent); }
.opt.from::after {
  content: "from what you said";
  position: absolute; right: .7rem; top: -.6rem;
  font: 400 .64rem var(--mono); letter-spacing: .06em; color: var(--accent);
  background: var(--ground); padding: 0 .35em;
}
.opt.big { font-family: var(--dsp); font-size: 1.4rem; font-variation-settings: "wght" 400, "SOFT" 60, "WONK" 1; padding-left: 1rem; }
.opt.big.sort { font-style: italic; }
.opt.dim { opacity: .35; }
.yn { display: flex; gap: .6rem; flex-wrap: wrap; }
.yn .opt { padding: 1rem 1.6rem; min-width: 110px; justify-content: center; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* neither, actually: the way out of any set of options */
.else { margin-top: .9rem; max-width: 560px; }
.else .neither {
  font: italic 400 1.02rem var(--dsp); font-variation-settings: "wght" 400, "SOFT" 80, "WONK" 1;
  color: var(--ink-2); text-decoration: underline dotted; text-decoration-color: var(--accent); text-underline-offset: .3em;
  padding: .2rem 0; animation: rise .5s .25s var(--ease) both;
}
.else .neither:hover { color: var(--ink); }
.else.open { animation: rise .4s var(--ease) both; }
.else.open .wordin { max-width: 560px; }
.faded { opacity: .35; pointer-events: none; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; max-width: 560px; transition: opacity .3s; }
.chip {
  font: 500 .98rem var(--ui); padding: .55rem .95rem;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  transition: all .2s; animation: rise .5s var(--ease) both;
}
.chip:hover { background: var(--panel); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.chip[aria-pressed="true"]::before { content: "✓ "; opacity: .7; }
.chip:disabled { cursor: default; }
.chip.taken { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.chip.none { border-style: dashed; color: var(--ink-2); font-style: italic; }
.chip.none[aria-pressed="true"] { color: var(--ground); }

/* tap the words that fit */
.cloud { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; max-width: 620px; transition: opacity .3s; }
.cloud button {
  font-family: var(--dsp); font-variation-settings: "wght" 400, "SOFT" 60, "WONK" 1;
  background: none; border: 0; padding: 0; line-height: 1.2; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .09em; text-underline-offset: .1em;
  transition: color .25s, text-decoration-color .25s;
}
.cloud button:hover { color: var(--ink); }
.cloud button[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--accent); }
.cloud .s1 { font-size: 1.1rem; } .cloud .s2 { font-size: 1.5rem; font-style: italic; }
.cloud .s3 { font-size: 2rem; }   .cloud .s4 { font-size: 2.7rem; font-style: italic; }

/* rank: tap them in order */
.rank { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .4rem; max-width: 520px; }
.rank li {
  display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border: 1.5px solid var(--ink); border-radius: var(--r);
  background: var(--ink); color: var(--ground); font: 500 1rem var(--ui);
  animation: rise .4s var(--ease) both;
}
.rank li .i { font: 400 .78rem var(--mono); opacity: .7; }

/* the slider */
.scale { max-width: 560px; margin-top: .4rem; }
.scale .ends { display: flex; justify-content: space-between; gap: 1rem; font: 400 1.15rem var(--dsp); font-variation-settings: "wght" 400, "SOFT" 60, "WONK" 1; margin-bottom: .6rem; }
.scale .ends span:last-child { text-align: right; }
.scale input { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; }
.scale input::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
.scale input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--ground); box-shadow: 0 0 0 1.5px var(--ink); cursor: grab; }
.scale input::-moz-range-track { height: 2px; background: var(--ink); }
.scale input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--ground); box-shadow: 0 0 0 1.5px var(--ink); }
.scale .mid { text-align: center; font: 400 .74rem var(--mono); color: var(--ink-2); margin-top: .3rem; }

/* typed */
.wordin { max-width: 560px; }
.wordin input, .wordin textarea {
  width: 100%; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); outline: 0; padding: .2em 0;
  font: 400 2.2rem/1.1 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 60, "WONK" 1;
}
.wordin input::placeholder, .wordin textarea::placeholder { color: var(--ink-2); opacity: .6; font-style: italic; }
.wordin input:focus, .wordin textarea:focus { border-bottom-color: var(--accent); }
.wordin.sentence input { font-size: 1.5rem; }
.wordin.number input { font-size: 3rem; font-variant-numeric: tabular-nums; max-width: 8ch; }
.wordin.long textarea {
  font: 400 1.1rem/1.9 var(--ui); border: 0; resize: none; height: 8.5em; padding: 0;
  background: repeating-linear-gradient(transparent 0 calc(1.9em - 1px), var(--rule) calc(1.9em - 1px) 1.9em);
  background-attachment: local;
}
.wordin .meta { display: flex; justify-content: space-between; font: 400 .72rem var(--mono); color: var(--ink-2); margin-top: .5rem; letter-spacing: .05em; }
.wordin .meta .enough { color: var(--accent); opacity: 0; transition: opacity .4s; }
.wordin .meta .enough.on { opacity: 1; }

/* a year: scrub the ruler */
.year { max-width: 600px; }
.year .v { font: 300 4rem/1 var(--dsp); font-variation-settings: "wght" 300, "SOFT" 80, "WONK" 1; font-variant-numeric: tabular-nums; margin-bottom: .4rem; }
.year .v small { font: 400 .8rem var(--mono); color: var(--ink-2); margin-left: .8rem; }
.year .ruler {
  height: 34px; position: relative;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 10%) bottom/100% 14px no-repeat,
              repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 2%) bottom/100% 8px no-repeat;
}
.year input { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; margin: 0; position: absolute; inset: 0; }
.year input::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.year input::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 34px; background: var(--accent); cursor: ew-resize; border-radius: 2px; }
.year input::-moz-range-thumb { width: 4px; height: 34px; background: var(--accent); border: 0; }
.year .ends { display: flex; justify-content: space-between; font: 400 .7rem var(--mono); color: var(--ink-2); margin-top: .3rem; }

/* a number: the stepper */
.num { display: flex; align-items: center; gap: 1rem; }
.num input { width: 5ch; text-align: center; border: 0; border-bottom: 2px solid var(--ink); background: transparent; color: var(--ink); font: 300 4rem/1 var(--dsp); font-variant-numeric: tabular-nums; outline: 0; border-radius: 0; -moz-appearance: textfield; }
.num input::-webkit-outer-spin-button, .num input::-webkit-inner-spin-button { -webkit-appearance: none; }
.num button { width: 52px; height: 52px; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font: 300 1.8rem/1 var(--dsp); }
.num button:hover { background: var(--ink); color: var(--ground); }

/* go, skip, and the small text buttons */
.actions { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-top: 1.2rem; }
.go {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .95rem var(--ui); padding: .8rem 1.15rem;
  border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--ground);
  transition: transform .25s var(--ease), opacity .3s;
}
.go:hover { transform: translateX(3px); }
.go[disabled] { opacity: .35; pointer-events: none; }
.go svg { width: 16px; height: 16px; }
.go.ghost { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.go.accent { background: var(--accent); color: #fff; }
.go.accent:hover { background: var(--accent); }
.quiet {
  font: 400 .84rem var(--mono); color: var(--ink-2); background: none; border: 0; padding: .4rem 0;
  text-decoration: underline dotted; text-underline-offset: .25em;
}
.quiet:hover { color: var(--ink); }
.hint { font: 400 .82rem var(--mono); color: var(--ink-2); margin: .4rem 0 .8rem; }
.hint.lead { font: 400 1.15rem/1.35 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 80, "WONK" 1; color: var(--ink); margin: 0 0 1.2rem; max-width: 44ch; }
.err  { font: 400 .95rem var(--ui); color: var(--accent); margin: .4rem 0 .8rem; max-width: 44ch; }

/* ------------------------------------------------------------ the quip */
/* types itself the moment a tap lands: the interviewer, audibly thinking */
.quip {
  font: italic 400 1.3rem/1.3 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 100, "WONK" 1;
  color: var(--ink); min-height: 1.4em; margin-top: 2rem; max-width: 40ch;
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.quip.on { opacity: 1; transform: none; }
.quip b { font-weight: 400; font-style: normal; color: var(--accent); }
.quip .caret { display: inline-block; width: .5em; height: 1em; background: var(--accent); vertical-align: -.12em; margin-left: .18em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------ the notes */
.notes { font: 400 .84rem/1.65 var(--mono); color: var(--ink-2); max-width: 26ch; }
.notes .lbl { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0 0 1rem; }
.notes p { margin: 0 0 .7rem; animation: rise .5s var(--ease) both; }
.notes .pins { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .4rem; }
.notes .pin {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .09em; text-underline-offset: .15em;
  animation: rise .5s var(--ease) both;
}
.notes .cur::after { content: "_"; color: var(--accent); animation: blink 1s steps(2) infinite; }

/* ------------------------------------------------------------ the table */
/*
 * A shelf under the bar, top left, where nothing else ever sits: one object
 * per answer, set down as they go. A real answer draws its object; a dead one
 * leaves a small cracked mark. Newest on the right, landing with a bounce.
 */
.table {
  position: fixed; left: clamp(16px, 4vw, 40px); top: 66px; z-index: 1;
  display: flex; align-items: flex-end; gap: .5rem; max-width: 40vw;
  pointer-events: none; opacity: 0; transition: opacity .5s;
}
.table.on { opacity: 1; }
/* at the end the objects move onto the card, so the shelf gets out of the way */
.stage.read ~ .table { opacity: 0; }
.table::before {
  content: ""; position: absolute; left: -.4rem; right: -.4rem; bottom: -.45rem; height: 1px;
  background: var(--ink); opacity: .35;
}
.table .obj {
  display: inline-flex; align-items: flex-end; justify-content: center;
  width: 44px; height: 44px; transform: rotate(var(--tilt, 0deg));
}
.table .obj .dr { width: 44px; height: 44px; overflow: visible; }
.table .obj.v2 .dr .sf { opacity: .75; }
.table .obj.v1 .dr { opacity: .8; }
.table .obj.v0 .dr { width: 30px; height: 30px; opacity: .5; }
.table .obj.land { animation: land .7s var(--spring) both; }
@keyframes land { from { transform: translateY(-26px) rotate(var(--tilt, 0deg)) scale(1.2); opacity: 0; } 60% { opacity: 1; } }
.chalkw {
  display: inline-block; font: italic 700 1.05rem/1 var(--dsp); color: var(--accent);
  transform: rotate(var(--r, -4deg)); white-space: nowrap; letter-spacing: -.01em; padding-bottom: 4px;
}
.table .obj:has(.chalkw) { width: auto; padding: 0 .3rem; }

/* ------------------------------------------------------------ the thread */
/* the previous exchange, ghosted above the question in one arrangement */
#thread { display: none; }
#thread .gq {
  font: 400 1.4rem/1.2 var(--dsp); font-variation-settings: "wght" 300, "SOFT" 80, "WONK" 1;
  color: var(--ink-2); opacity: .6; max-width: 26ch; margin: 0 0 .4rem; text-wrap: balance;
}
#thread .ga {
  font: 400 .9rem/1.4 var(--ui); color: var(--ink); opacity: .8; margin: 0 0 2.2rem;
  padding-left: 1rem; border-left: 2px solid var(--accent); max-width: 40ch;
}

/* ------------------------------------------------------------ thinking */
/* no spinner: a line writes itself under the question until the answer lands */
.think { margin-top: 1.6rem; min-height: 3.2em; font: italic 400 1.25rem/1.4 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 100, "WONK" 1; color: var(--ink); max-width: 40ch; }
.think .caret { display: inline-block; width: .5em; height: 1em; background: var(--accent); vertical-align: -.12em; margin-left: .18em; animation: blink 1s steps(2) infinite; }
.think .pen { display: block; width: 120px; height: 18px; margin-top: 1rem; overflow: visible; }
.think .pen path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: write 2.6s var(--ease) infinite; opacity: .7; }
@keyframes write { 0% { stroke-dashoffset: 260; opacity: 0; } 15% { opacity: .7; } 70% { stroke-dashoffset: 0; opacity: .7; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ------------------------------------------------------------ arrangements */
/*
 * Where the question sits. One class on the stage, chosen fresh for every
 * question and never the same twice in a row. The first question is always
 * centred. None of them puts the question against the left edge: the narrowest
 * gutter any arrangement allows on a wide screen is 12vw.
 */
.stage.swap #main, .stage.swap .quip, .stage.swap .notes, .stage.swap #thread { opacity: 0; transition: opacity .2s; }
.quip, .notes, #thread { transition: opacity .4s var(--ease); }
#main { transition: transform .7s var(--ease), opacity .4s var(--ease); }

@media (min-width: 900px) {
  .stage { min-height: calc(100vh - 70px); column-gap: 3rem; align-content: start; padding-top: 2.4rem; }
  #main { max-width: none; width: 100%; }
  .quip { max-width: none; }

  /* editorial: the question inset a fifth of the way in, notes to the right */
  .stage { grid-template-columns: minmax(14vw, 1fr) minmax(0, 60ch) 17rem minmax(4vw, 1fr); }
  .stage #main   { grid-column: 2; padding-top: 10vh; }
  .stage .quip   { grid-column: 2; }
  .stage .notes  { grid-column: 3; grid-row: 1 / span 2; padding-top: 10vh; }
  .stage #thread { grid-column: 2; }

  /* centre: the first question, and now and then a later one */
  .stage.arr-centre { grid-template-columns: minmax(8vw, 1fr) minmax(0, 60ch) minmax(8vw, 1fr); align-content: center; justify-items: center; text-align: center; padding-bottom: 12vh; }
  .stage.arr-centre #main { padding-top: 0; }
  .stage.arr-centre .question { margin-left: auto; margin-right: auto; }
  .stage.arr-centre .opts, .stage.arr-centre .rank, .stage.arr-centre .scale, .stage.arr-centre .wordin, .stage.arr-centre .year, .stage.arr-centre .else { margin-left: auto; margin-right: auto; }
  .stage.arr-centre .chips, .stage.arr-centre .cloud, .stage.arr-centre .actions, .stage.arr-centre .yn, .stage.arr-centre .num { justify-content: center; margin-left: auto; margin-right: auto; }
  .stage.arr-centre .wordin input, .stage.arr-centre .num input { text-align: center; }
  .stage.arr-centre .notes { display: none; }

  /* margin: the notes sit in a left margin, the question after them */
  .stage.arr-margin { grid-template-columns: minmax(5vw, .6fr) 15rem minmax(0, 60ch) minmax(6vw, 1fr); }
  .stage.arr-margin #main  { grid-column: 3; }
  .stage.arr-margin .quip  { grid-column: 3; }
  .stage.arr-margin .notes { grid-column: 2; }

  /* anchored: the question sits low, the notes stay high */
  .stage.arr-anchored { align-content: end; }
  .stage.arr-anchored #main { padding-top: 0; padding-bottom: 8vh; }
  .stage.arr-anchored .notes { align-self: start; }

  /* poster: one enormous question, the options in a row beneath it */
  .stage.arr-poster { grid-template-columns: minmax(12vw, 1fr) minmax(0, 92ch) minmax(8vw, 1fr); }
  .stage.arr-poster #main { padding-top: 8vh; }
  .stage.arr-poster .question { font-size: clamp(3rem, 6.4vw, 6rem); max-width: 14ch; line-height: 1; }
  .stage.arr-poster #answer { margin-top: 2.6rem; }
  .stage.arr-poster .opts, .stage.arr-poster .opts.two { display: flex; flex-wrap: wrap; gap: .6rem; max-width: none; }
  .stage.arr-poster .opts.two .opt { min-height: 0; align-items: center; }
  .stage.arr-poster .opt { padding-right: 1.6rem; }
  .stage.arr-poster .chips, .stage.arr-poster .cloud, .stage.arr-poster .scale, .stage.arr-poster .wordin, .stage.arr-poster .year { max-width: 720px; }
  .stage.arr-poster .notes { display: none; }

  /* card: the page goes cobalt and the question is a sheet of paper laid on it */
  .stage.arr-card { grid-template-columns: minmax(6vw, 1fr) minmax(0, 58ch) minmax(6vw, 1fr); align-content: center; padding-bottom: 10vh; }
  .stage.arr-card #main {
    padding: 2.6rem 2.8rem 2.8rem; background: var(--ground); color: var(--ink);
    border-radius: var(--r-lg); transform: rotate(-1.2deg);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
  }
  .stage.arr-card .quip { color: var(--card-text); }
  .stage.arr-card .quip b { color: var(--card-text); }
  .stage.arr-card .notes { display: none; }
  .stage.arr-card::after { color: var(--card-text); }

  /* thread: the last exchange ghosted above, the question low */
  .stage.arr-thread { grid-template-columns: minmax(16vw, 1fr) minmax(0, 60ch) minmax(4vw, 1fr); align-content: end; }
  .stage.arr-thread #thread { display: block; padding-top: 8vh; }
  .stage.arr-thread #main { padding-top: 0; padding-bottom: 8vh; }
  .stage.arr-thread .notes { display: none; }

  /* read: the end of the sitting is a reading column, nothing else */
  .stage.arr-read { grid-template-columns: minmax(12vw, 1fr) minmax(0, 64ch) minmax(8vw, 1.4fr); align-content: start; }
  .stage.arr-read #main { padding-top: 8vh; }
  .stage.arr-read .notes { display: none; }
}

/* the card arrangement colours the whole page, bar included */
:root { --card-ground: #2B48D6; --card-text: #F6EDCF; }
html[data-mode="night"] { --card-ground: #1B2A7A; --card-text: #F3E9CB; }
body.oncard { background: var(--card-ground); }
body.oncard .bar, body.oncard .wordmark, body.oncard .wordmark .fake, body.oncard .ibtn { color: var(--card-text); }
body.oncard .wordmark .fake { text-decoration-color: var(--card-text); }
body.oncard .ibtn:hover { background: rgba(255, 255, 255, .12); color: var(--card-text); }
body.oncard .ledger i { background: var(--card-text); opacity: .4; }
body.oncard .ledger i[data-v="1"], body.oncard .ledger i[data-v="2"] { background: var(--card-text); opacity: 1; }
body.oncard .ledger i.next { background: transparent; border-bottom-color: var(--card-text); }
body.oncard .stage.lit { background: transparent; }
body.oncard .table::before { background: var(--card-text); }
body.oncard .table .dr .c, body.oncard .table .dr .c2 { stroke: var(--card-text); }
body.oncard .table .chalkw { color: var(--card-text); }

@media (max-width: 899px) {
  .stage { min-height: calc(100vh - 66px); grid-template-rows: 1fr auto auto; padding-bottom: 2.5rem; }
  .stage #main { display: flex; flex-direction: column; }
  .question { font-size: clamp(1.8rem, 8vw, 2.4rem); max-width: none; }
  #answer { margin-top: auto; padding-top: 1.6rem; }
  .stage.read { min-height: 0; grid-template-rows: auto auto auto; }
  .stage.read #answer { margin-top: 0; }
  .opts, .opts.two, .chips, .cloud, .rank, .scale, .wordin, .year { max-width: none; }
  .quip { margin-top: 1.4rem; order: 2; font-size: 1.15rem; }
  .notes { order: 3; margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: .8rem; max-width: none;
           display: flex; gap: 1rem; overflow: hidden; white-space: nowrap; mask: linear-gradient(90deg, #000 85%, transparent); }
  .notes .lbl { display: none; }
  .notes p { margin: 0; }
  .notes .pins { margin: 0; flex-wrap: nowrap; }
  .stage::after { font-size: 60vw; }
  .bar { padding: .9rem 16px; }
  .table { position: static; max-width: none; margin: 0 16px 1.2rem; padding-top: .4rem; gap: .4rem; overflow: hidden; order: 4; }
  .table .obj, .table .obj .dr { width: 34px; height: 34px; }
  .table .obj.v0 .dr { width: 24px; height: 24px; }
  #bg { width: 56vw; height: 56vw; right: -6vw !important; left: auto !important; bottom: 4vh !important; top: auto !important; }
  body.oncard { background: var(--ground); }
  body.oncard .bar, body.oncard .wordmark, body.oncard .wordmark .fake, body.oncard .ibtn { color: var(--ink); }
  body.oncard .wordmark .fake { text-decoration-color: var(--accent); }
  body.oncard .ledger i { background: var(--ink-2); opacity: .35; }
  body.oncard .ledger i[data-v="1"] { background: var(--ink); opacity: 1; }
  body.oncard .ledger i[data-v="2"] { background: var(--accent); opacity: 1; }
  body.oncard .table::before { background: var(--ink); }
  body.oncard .table .dr .c, body.oncard .table .dr .c2 { stroke: var(--ink); }
  body.oncard .table .chalkw { color: var(--accent); }
}

/* ------------------------------------------------------------ the menu at the end */
/* three finished objects; each one is obviously a thing to tap */
.offer { display: grid; gap: .9rem; max-width: 600px; margin-top: .4rem; }
.offer button {
  position: relative; text-align: left; cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: var(--r-lg);
  background: var(--ground); color: var(--ink); padding: 1.1rem 1.3rem 1.1rem;
  display: grid; gap: .35rem;
  box-shadow: 0 2px 0 var(--ink);
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .25s var(--ease), background .25s, box-shadow .25s;
}
.offer button.in { opacity: 1; transform: none; }
.offer button:hover { background: var(--panel); transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.offer button:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.offer button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.offer .f { display: flex; align-items: baseline; gap: .7rem; font: 400 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.offer .f .n { color: var(--accent); }
.offer .t { font: 400 1.55rem/1.1 var(--dsp); font-variation-settings: "wght" 450, "SOFT" 80, "WONK" 1; letter-spacing: -.015em; }
.offer .s { font: 400 .98rem/1.45 var(--ui); color: var(--ink-2); max-width: 46ch; }
.offer .go {
  justify-self: start; margin-top: .5rem; display: inline-flex; align-items: center; gap: .45rem;
  font: 600 .88rem var(--ui); padding: .55rem 1rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--ground); transition: background .25s, color .25s;
}
.offer .go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.offer button:hover .go { background: var(--accent); color: #fff; }
.offer button:hover .go svg { transform: translateX(4px); }
.offer button[aria-pressed="true"] .s, .offer button[aria-pressed="true"] .f { color: color-mix(in oklab, var(--ground) 70%, transparent); }
.offer button[aria-pressed="true"] .f .n { color: var(--ground); }
.offer button[aria-pressed="true"] .go { background: var(--ground); color: var(--ink); }
.offer button.taken { border-style: dashed; box-shadow: none; }
.offer button.taken .t { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1px; }

/* the shapes: the person's choice, the interviewer's suggestions first */
.formmenu { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 620px; margin-top: .4rem; }
.formmenu button {
  text-align: left; cursor: pointer; display: grid; gap: .25rem; align-content: start;
  padding: .85rem 1rem .9rem; border: 1.5px solid var(--ink); border-radius: var(--r-lg);
  background: var(--ground); color: var(--ink); box-shadow: 0 2px 0 var(--ink);
  transition: transform .25s var(--ease), background .25s, box-shadow .25s;
  animation: rise .5s var(--ease) both;
}
.formmenu button:hover { background: var(--panel); transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.formmenu button:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.formmenu button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.formmenu .f { display: flex; justify-content: space-between; gap: .5rem; font: 400 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.formmenu .tag { color: var(--accent); white-space: nowrap; }
.formmenu .t { font: 400 1.2rem/1.15 var(--dsp); font-variation-settings: "wght" 450, "SOFT" 80, "WONK" 1; letter-spacing: -.01em; }
.formmenu button.sug { background: var(--tint); }
.formmenu button.taken { border-style: dashed; box-shadow: none; }
.formmenu button.taken .t { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1px; }
.formmenu button[aria-pressed="true"] .f, .formmenu button[aria-pressed="true"] .tag { color: color-mix(in oklab, var(--ground) 70%, transparent); }
@media (max-width: 520px) { .formmenu { grid-template-columns: 1fr; } }

/* the full text and the notes, folded under the card */
.fulltext { margin-top: 1.6rem; max-width: 540px; border-top: 1px solid var(--rule); padding-top: .6rem; }
.fulltext summary { cursor: pointer; font: 400 .84rem var(--mono); color: var(--ink-2); list-style: none; padding: .3rem 0; }
.fulltext summary::-webkit-details-marker { display: none; }
.fulltext summary::before { content: "+ "; color: var(--accent); }
.fulltext[open] summary::before { content: "− "; }
.fulltext summary:hover { color: var(--ink); }
.fulltext .txt { font: 400 1.02rem/1.6 var(--dsp); margin-top: .6rem; }
.fulltext .txt p { margin: 0 0 .8em; }
.fulltext .nts { margin-top: 1rem; padding-top: .8rem; border-top: 1px dotted var(--rule); font: 400 .84rem/1.6 var(--mono); color: var(--ink-2); }
.fulltext .nts p { margin: 0 0 .3rem; }
.fulltext .nts .pn { color: var(--ink); }

/* ------------------------------------------------------------ the piece */
/*
 * The card is the piece. Fixed at 540 x 675 so the screen and the share
 * image are the same object; scaled to fit where it is shown. The body is
 * laid out from the line shapes the writer uses, and shrinks a step at a time
 * until it fits inside the card.
 */
.cardwrap { position: relative; overflow: hidden; width: 100%; max-width: 540px; margin: .4rem 0 0; border-radius: 4px; box-shadow: var(--shadow); }
.cardwrap > .card { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
body.onpiece .stage.lit { background: var(--ground); }
.card {
  width: 540px; height: 675px; padding: 40px 44px 34px;
  background: var(--ground); color: var(--ink);
  font: 400 14.5px/1.4 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 40, "WONK" 0;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.card::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: var(--grain-a); mix-blend-mode: var(--blend); pointer-events: none; }
.card > * { position: relative; }
.card .kick { font: 400 9.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; margin: 0 0 22px; min-height: 0; }
.card .kick b { font-weight: 400; color: var(--accent); }
.card.hasart .kick { padding-right: 130px; }
.card.hasart h5 { padding-right: 120px; }
.card h5 { font: 400 30px/1.05 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 60, "WONK" 1; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
.card .body { flex: 1; min-height: 0; overflow: hidden; font-size: 14.5px; line-height: 1.42; }
.card .body p { margin: 0 0 9px; }
.card .body p:first-child::first-letter { font-size: 2.6em; float: left; line-height: .8; padding: .06em .1em 0 0; color: var(--accent); font-variation-settings: "wght" 500, "SOFT" 100, "WONK" 1; }
.card .body .lbl { font: 400 9px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 10px 0 5px; }
.card .body .lbl:first-child { margin-top: 0; }
.card .body ul, .card .body ol { margin: 0 0 8px; padding-left: 1.25em; }
.card .body li { margin: 0 0 4px; }
.card .body .rows { display: grid; gap: 0; margin: 0 0 8px; }
.card .body .row { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rule-solid); align-items: baseline; }
.card .body .row:last-child { border-bottom: 0; }
.card .body .row b { font: 400 9px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.card .body .sig { font-style: italic; font-size: 1.35em; font-variation-settings: "wght" 300, "SOFT" 100, "WONK" 1; margin-top: 10px; }
.card .art { position: absolute; right: 32px; top: 22px; width: 100px; height: 100px; }
.card .art svg { width: 100%; height: 100%; overflow: visible; }
.card .foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-solid); font: 400 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.card .foot .objs { display: inline-flex; align-items: flex-end; gap: 6px; }
.card .foot .objs .dr { width: 22px; height: 22px; overflow: visible; }
.card .foot .objs .chalkw { font-size: 11px; padding-bottom: 2px; }
.card .foot .objs .txt { letter-spacing: .1em; }
.card .foot .wordmark { font-size: 12px; }
.card .stamp { position: absolute; right: 26px; bottom: 60px; width: 92px; height: 92px; color: var(--accent); transform: rotate(-13deg); mix-blend-mode: var(--blend); opacity: .92; }
.card .stamp svg { width: 100%; height: 100%; overflow: visible; }
.card .stamp text { font: 700 8.6px var(--ui); letter-spacing: .2em; fill: currentColor; }
.card .stamp .big { font: 400 34px var(--dsp); letter-spacing: -.03em; fill: currentColor; }
.card .stamp .small { font: 400 8px var(--mono); letter-spacing: .06em; fill: currentColor; }
.card .stamp.thump { animation: thump .6s var(--ease) both; }
@keyframes thump { from { transform: rotate(-13deg) scale(1.7); opacity: 0; } 60% { transform: rotate(-13deg) scale(.96); opacity: .92; } }

/* the papers: what the form is printed on */
.card.ruled { background-image: repeating-linear-gradient(transparent 0 21px, var(--rule-soft) 21px 22px); background-position: 0 12px; }
.card.grid  { background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); background-size: 20px 20px; }
.card.tint  { background-color: var(--tint-solid); }
.card.tint2 { background-color: var(--tint2-solid); }
.card.inkblock { background: var(--ink); color: var(--ground); }
.card.inkblock .kick, .card.inkblock .foot, .card.inkblock .foot .wordmark, .card.inkblock .body .lbl, .card.inkblock .body .row b { color: var(--ground); }
.card.inkblock .foot { border-top-color: rgba(255, 255, 255, .25); }
.card.inkblock .body { display: flex; flex-direction: column; justify-content: center; text-align: center; border: 3px double var(--ground); padding: 22px 20px; font-size: 20px; line-height: 1.25; font-variation-settings: "wght" 300, "SOFT" 100, "WONK" 1; }
.card.inkblock .body p { margin: 0 0 12px; }
.card.inkblock .body p:first-child::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; }
.card.inkblock h5 { text-align: center; }
.card.inkblock .dr .c, .card.inkblock .dr .c2 { stroke: var(--ground); }
.card.portrait .body { font-size: 19px; line-height: 1.35; font-variation-settings: "wght" 350, "SOFT" 80, "WONK" 1; }
.card.portrait .body p:first-child::first-letter { font-size: 2.4em; }

/* the drawings: charcoal outline, red-chalk hatch, chalk highlight */
.dr .c  { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dr .c2 { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.dr .s  { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; opacity: .9; }
.dr .sf { fill: var(--accent); opacity: .5; }
.dr .b  { fill: var(--accent-2); opacity: .55; }
.dr .k  { fill: none; stroke: var(--chalk); stroke-width: 2.4; stroke-linecap: round; opacity: .95; }
.dr .kf { fill: var(--chalk); opacity: .6; }
.dr .rough { filter: url(#rough); }
.dr.crack .c2 { stroke: var(--ink-2); stroke-width: 3; opacity: .8; }

/* share row, keep, and what costs money */
.share { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .9rem var(--ui); padding: .7rem 1.1rem;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  background: var(--ink); color: var(--ground);
  transition: transform .2s var(--ease), opacity .3s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; transform: none; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn svg { width: 16px; height: 16px; }

.keep { margin-top: 2.2rem; max-width: 440px; }
.keep .lead { font: 400 1.3rem/1.2 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 80, "WONK" 1; margin: 0 0 .6rem; }
.field { display: flex; gap: .5rem; align-items: center; border-bottom: 2px solid var(--ink); padding: .3rem 0; }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); outline: 0; padding: .3rem 0; font: 400 1.15rem var(--dsp); font-variation-settings: "wght" 400, "SOFT" 60, "WONK" 1; }
.field input::placeholder { color: var(--ink-2); font-style: italic; opacity: .7; }
.field .btn { padding: .5rem .9rem; }

.prices { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.8rem; max-width: 560px; }
.price { display: grid; gap: .3rem; padding: 1rem 1.1rem; border: 1.5px solid var(--ink); border-radius: var(--r-lg); background: transparent; color: var(--ink); text-align: left; transition: transform .25s var(--ease); }
.price:hover { transform: translateY(-2px); }
.price .t { font: 400 1.25rem/1.1 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 80, "WONK" 1; letter-spacing: -.01em; }
.price .d { font: 400 .86rem/1.4 var(--ui); color: var(--ink-2); }
.price .p { font: 400 .95rem var(--mono); color: var(--accent); margin-top: .3rem; }
.more { margin-top: 2rem; display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }

/* the ending, and the stop */
.ending { max-width: 44ch; font: 400 1.35rem/1.35 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 80, "WONK" 1; margin: 1.4rem 0 0; }
.plain {
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #fff; color: #111; padding: 1.6rem 1.8rem; border-radius: 4px; max-width: 520px; border: 1px solid #ddd;
}
.plain h2 { margin: 0 0 .6rem; font: 600 1.2rem system-ui, sans-serif; }
.plain a { color: #0645ad; }
.plain ul { padding-left: 1.2rem; }
.plain p, .plain li { margin: .4rem 0; }

/* ------------------------------------------------------------ chrome */
.sheetwrap { position: fixed; inset: 0; z-index: 40; display: grid; place-items: end center; background: color-mix(in oklab, var(--shade) 55%, transparent); padding: 1rem; }
.sheet {
  width: 100%; max-width: 440px; background: var(--ground); border: 1.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 1.4rem 1.4rem 1.6rem; box-shadow: var(--shadow); animation: rise .35s var(--ease) both;
}
.sheet .handle { width: 36px; height: 4px; border-radius: 2px; background: var(--rule); margin: -.4rem auto 1rem; }
.sheet h2 { font: 400 1.5rem/1.15 var(--dsp); font-variation-settings: "wght" 400, "SOFT" 80, "WONK" 1; margin: 0 0 .5rem; letter-spacing: -.01em; }
.sheet p { font: 400 .95rem/1.5 var(--ui); color: var(--ink-2); margin: 0 0 1rem; }
@media (min-width: 900px) { .sheetwrap { place-items: center; } }

.toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 50;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--ink); color: var(--ground); font: 400 .84rem var(--mono);
  padding: .7rem 1rem; border-radius: var(--r-pill); box-shadow: var(--shadow);
  animation: rise .4s var(--ease) both; white-space: nowrap; max-width: calc(100vw - 2rem);
}
.toast svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* the door when the site is closed */
.closed { display: grid; place-items: center; min-height: 70vh; text-align: center; }
.closed .question { max-width: none; }

/* the kept page */
.kept { max-width: 60ch; margin: 0 auto; padding: 2rem clamp(16px, 4vw, 40px) 6rem; position: relative; z-index: 1; }
.kept .doc + .doc { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--rule); }
.kept .doc .kick { margin-bottom: .6rem; }
.kept .back { display: inline-block; margin-top: 3rem; }

/* offscreen render slot for the image */
#render { position: fixed; left: -9999px; top: 0; z-index: -1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  body::before, .bar, .share, .keep, .prices, .more, .toast, .sheetwrap, .quip, .notes, .table, #bg { display: none !important; }
  body { background: #fff; color: #000; }
  .cardwrap { box-shadow: none; }
}