/* Letters from A. — late-night desk, one candle, cheap paper. Phone first. */

:root {
  --ink-bg:      #070a10;
  --paper:       #11141b;
  --paper-edge:  rgba(245, 201, 126, .11);
  --ink:         #767f8e;   /* what most of the letter is written in */
  --ink-strong:  #aab3c0;
  --lit:         #f5c97e;   /* ink that caught the candle */
  --wax:         #93332c;
  --whisper:     #4d5564;
  --bad:         #c4635c;
  --serif:       "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:        ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ink-bg);
  color: var(--ink);
  font-family: var(--serif);
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    calc(env(safe-area-inset-top) + 20px)
    16px
    calc(env(safe-area-inset-bottom) + 20px);
}

/* ── the room ──────────────────────────────────────────────────────────── */

/* one warm light above the desk, breathing */
.candle {
  position: fixed;
  inset: -20% 0 auto 0;
  height: 90vh;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% 22%, rgba(245, 201, 126, .13), rgba(245, 201, 126, .05) 45%, transparent 72%);
  animation: flicker 7s ease-in-out infinite;
}

/* and the dark closing in at the edges */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 85% at 50% 35%, transparent 42%, rgba(0, 0, 0, .72) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  38%      { opacity: .88; }
  52%      { opacity: 1.04; }
  70%      { opacity: .93; }
}

/* ── the letter ────────────────────────────────────────────────────────── */

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.boot {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--whisper);
  animation: flicker 3s ease-in-out infinite;
}

.letter {
  width: 100%;
  padding: 30px 22px 26px;
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(245, 201, 126, .045), transparent 32%),
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(255, 255, 255, .016) 33px 34px),
    var(--paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .03) inset,
    0 30px 70px -30px rgba(0, 0, 0, .9),
    0 0 90px -40px rgba(245, 201, 126, .25);
  animation: unfold .9s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes unfold {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.letter-head {
  margin-bottom: 22px;
  text-align: center;
}

.numeral {
  display: block;
  font-size: 11px;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: rgba(245, 201, 126, .5);
}

.numeral::before { content: "letter "; }

.title {
  margin: 10px 0 0;
  font-size: 21px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--ink-strong);
}

.letter-head::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, var(--paper-edge) 30%, var(--paper-edge) 70%, transparent);
}

.body {
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .012em;
  text-align: left;
  hyphens: none;
}

.body p { margin: 0 0 14px; }
.body i { font-style: normal; }

.sign {
  margin: 22px 0 0;
  text-align: right;
  font-size: 22px;
  font-style: italic;
  color: rgba(245, 201, 126, .62);
}

/* ── the plan of the house ─────────────────────────────────────────────── */

.plan {
  margin: 24px 0 26px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 3px;
  background: linear-gradient(180deg, #0c0e14, #090b11);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.plan-grid { display: grid; }

.cell {
  position: relative;
  aspect-ratio: 1;
  border: 0 solid rgba(184, 176, 154, .34);
  transition: background .12s;
}

/* the walls she has drawn in ink */
.cell.wn { border-top-width: 1.5px; }
.cell.we { border-right-width: 1.5px; }
.cell.ws { border-bottom-width: 1.5px; }
.cell.ww { border-left-width: 1.5px; }

.cell b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 12px;
  color: #6a7180;
}

/* the yard door and her room. The door breathes until someone sets off from
   it — the one wordless way to say that this is a thing you walk rather than
   a thing you read, and reading it gets the numbers in the wrong order. */
.cell.gate {
  box-shadow: inset 0 0 0 2px rgba(159, 180, 204, .45);
  animation: door 2.6s ease-in-out infinite;
}

.plan.walked .cell.gate { animation: none; }

@keyframes door {
  0%, 100% { background: rgba(159, 180, 204, .05); }
  50%      { background: rgba(159, 180, 204, .26); }
}
.cell.her  { box-shadow: inset 0 0 0 2px rgba(245, 201, 126, .5); background: rgba(245, 201, 126, .07); }

/* the line your finger leaves */
.cell.trod { background: rgba(245, 201, 126, .17); }
.cell.trod b { color: var(--lit); }
.cell.here { background: rgba(245, 201, 126, .3); }

.plan.through .cell.trod { background: rgba(245, 201, 126, .26); }
.plan.through { box-shadow: 0 0 44px -14px rgba(245, 201, 126, .55); }

/* ── the house at night ────────────────────────────────────────────────── */

.night {
  margin: 24px 0 18px;
  padding: 18px 16px 0;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 3px;
  background: linear-gradient(180deg, #080a10 0%, #0b0e16 55%, #070910 100%);
  overflow: hidden;
}

.house { display: grid; gap: 6px; }

.floor {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
}

.win {
  aspect-ratio: 3 / 4;
  border-radius: 1px;
  background: #0d1017;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* a lamp behind the glass: warm, and it spills */
.win.lamp {
  background: linear-gradient(180deg, #f6d79c, #d8a55c);
  box-shadow: 0 0 10px rgba(245, 201, 126, .5), 0 0 22px rgba(245, 201, 126, .18);
}

/* the moon lying on the glass: cold, flat, and nobody is home */
.win.moon {
  background: linear-gradient(200deg, #9fb4cc, #5d7085);
  box-shadow: 0 0 6px rgba(159, 180, 204, .28);
}

.river {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(159, 180, 204, .12);
  opacity: .34;
  filter: blur(.6px);
  overflow: hidden;
}

.house.mirror {
  transform: scaleY(-1);
  animation: ripple 5.5s ease-in-out infinite;
}

@keyframes ripple {
  0%, 100% { transform: scaleY(-1) skewX(0deg); }
  50%      { transform: scaleY(-1) skewX(.7deg); }
}

/* ── the dials ─────────────────────────────────────────────────────────── */

.dials {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 0 26px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.dial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 74px;
  border: 1px solid rgba(245, 201, 126, .16);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 18%, transparent 82%, rgba(0, 0, 0, .55)),
    linear-gradient(90deg, #1a1c22, #262a33 50%, #1a1c22);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .7);
  cursor: grab;
}

.dial.rolling { cursor: grabbing; border-color: rgba(245, 201, 126, .4); }

.dial span {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--lit);
  text-shadow: 0 0 14px rgba(245, 201, 126, .3);
}

/* ── the wheel ─────────────────────────────────────────────────────────── */

.cipher {
  margin: 22px 0 18px;
  padding: 14px 12px;
  border-left: 2px solid rgba(245, 201, 126, .22);
  background: rgba(0, 0, 0, .3);
  font-size: 17px;
  line-height: 2;
  letter-spacing: .26em;
  text-align: center;
  color: #9aa2b0;
}

.cipher .sp { display: inline-block; width: .7em; }
.cipher .gone { color: #4a5160; }

.wheel {
  position: relative;
  width: 268px;
  height: 268px;
  margin: 8px auto 22px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.ring.outer {
  border: 1px solid rgba(255, 255, 255, .06);
  background: radial-gradient(circle at 50% 30%, rgba(245, 201, 126, .05), transparent 60%);
}

.ring.inner {
  inset: 32px;
  border: 1px solid rgba(245, 201, 126, .16);
  background:
    radial-gradient(circle at 50% 28%, #23201a, #14151a 70%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .7), inset 0 0 22px rgba(0, 0, 0, .6);
  cursor: grab;
  transition: transform .14s cubic-bezier(.2, .8, .3, 1);
}

.wheel.turning .ring.inner { cursor: grabbing; transition: none; }

.ring i {
  position: absolute;
  left: 50%;
  top: 50%;
  font-style: normal;
  font-size: 13px;
  /* stand each letter out on its radius, then stand it back upright */
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}

.ring .o { color: #6e7684; }

.ring .n {
  color: rgba(245, 201, 126, .82);
  /* the inner letters turn with the ring, so they need the ring's turn taken
     back out of them to stay the right way up */
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)) rotate(var(--spin, 0deg));
}

.hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a342a, #14151a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(245, 201, 126, .12);
}

/* ── through the wall ──────────────────────────────────────────────────── */

.wall {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 122px;
  margin: 24px 0 18px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 3px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, .35) 46px 48px),
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(0, 0, 0, .35) 26px 28px),
    linear-gradient(170deg, #15161a, #0d0e12);
}

.listen {
  position: relative;
  z-index: 2;
  padding: 12px 22px;
  border: 1px solid rgba(245, 201, 126, .18);
  border-radius: 24px;
  background: rgba(0, 0, 0, .45);
  color: rgba(245, 201, 126, .78);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}

.listen:hover { border-color: rgba(245, 201, 126, .38); }
.wall.listening .listen { color: #6f7686; border-color: rgba(255, 255, 255, .08); cursor: default; }

/* the plaster takes each knock, so this is countable with the sound off */
.dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, rgba(245, 201, 126, .16), transparent 70%);
  opacity: 0;
}

.dust.hit { animation: knock .34s ease-out; }

@keyframes knock {
  0%   { opacity: .9; transform: scale(.96); }
  100% { opacity: 0;  transform: scale(1.04); }
}

.square {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  table-layout: fixed;
}

.square td {
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .05);
  text-align: center;
  font-size: 15px;
  color: #79818f;
}

.square td span {
  font-size: 11px;
  color: #4d5464;
}

.square td span::before { content: "/"; margin: 0 1px; }

/* ── the grille ────────────────────────────────────────────────────────── */

.grille {
  position: relative;
  margin: 26px 0 28px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.grille-page {
  display: grid;
  border: 1px solid rgba(255, 255, 255, .05);
  background: #0a0c12;
}

.grille-page i {
  display: flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0;
  color: #5d6572;
}

/* the card: old, opaque, and plainly a separate object lying on the page */
.grille-card {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  cursor: grab;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .8));
  transition: transform .12s cubic-bezier(.2, .8, .3, 1), filter .2s;
}

.grille-card.held {
  cursor: grabbing;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .9)) brightness(1.1);
}

.grille-card span {
  background:
    linear-gradient(150deg, #2a2620, #1d1a16 60%, #232019);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .5);
}

/* a hole is a hole: the page shows through it, and a little light with it */
.grille-card span.hole {
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(245, 201, 126, .12),
    inset 0 2px 5px rgba(0, 0, 0, .7);
}

/* ── held to the light ─────────────────────────────────────────────────── */

.heat {
  position: relative;
  height: 230px;
  margin: 24px 0 26px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(255, 255, 255, .012) 29px 30px),
    linear-gradient(180deg, #0c0e14, #08090e);
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  --hx: -300px;
  --hy: -300px;
}

/* the writing exists everywhere on the page; only what is warm can be read */
.heat-ink {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
  -webkit-mask-image: radial-gradient(circle 66px at var(--hx) var(--hy), #000 0 38%, rgba(0,0,0,.35) 62%, transparent 78%);
  mask-image: radial-gradient(circle 66px at var(--hx) var(--hy), #000 0 38%, rgba(0,0,0,.35) 62%, transparent 78%);
}

.heat.lit .heat-ink { opacity: 1; }

.heat-ink i {
  position: absolute;
  font-family: var(--serif);
  font-style: normal;
  font-size: 30px;
  letter-spacing: 0;
  color: #c98b4b;
  text-shadow: 0 0 16px rgba(201, 139, 75, .55), 0 0 40px rgba(201, 139, 75, .25);
}

/* the light itself */
.heat-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--hx), var(--hy));
  background: radial-gradient(circle, rgba(245, 201, 126, .17), rgba(245, 201, 126, .06) 45%, transparent 70%);
  transition: opacity .35s ease;
}

.heat.lit .heat-glow { opacity: 1; }

.heat-char { position: absolute; inset: 0; pointer-events: none; }

/* left over the flame too long: the paper takes it, and so does the letter */
.scorch {
  position: absolute;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: radial-gradient(circle, #05060a 0 42%, rgba(5, 6, 10, .85) 62%, transparent 78%);
  box-shadow: 0 0 22px 6px rgba(0, 0, 0, .8);
  animation: scorch 5.2s ease-out forwards;
}

@keyframes scorch {
  0%   { opacity: 0; transform: scale(.4); }
  12%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1); }
}

/* ── the watch list ───────────────────────────────────────────────────── */

.watch-list {
  margin: 20px 0 22px;
  padding: 16px 18px;
  border-left: 2px solid rgba(245, 201, 126, .22);
  background: rgba(0, 0, 0, .3);
}

.watch {
  display: block;
  line-height: 2.1;
  font-size: 15px;
  color: #828a98;
}

.watch b {
  font-weight: 400;
  letter-spacing: .16em;
  color: #b9b09a;
}

/* ── the torn letter ───────────────────────────────────────────────────── */

.torn {
  position: relative;
  margin: 26px 0 28px;
  padding: 0;
  /* the dark behind the strips: every gap a wrong pair leaves reads as a hole
     in the page, which is most of how you see that it is wrong */
  background: #05070b;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .8);
  border-radius: 2px;
  user-select: none;
  -webkit-user-select: none;
}

.strip {
  position: absolute;
  left: 0;
  right: 0;
  background:
    linear-gradient(180deg, rgba(245, 201, 126, .05), transparent 55%),
    #1e222c;
  cursor: pointer;
  transition: top .32s cubic-bezier(.2, .8, .3, 1), filter .2s, transform .2s;
  /* the pale rim follows the clip path, so you can see the shape of the tear;
     the dark one makes a strip lying over its neighbour obvious */
  filter:
    drop-shadow(0 -1px 0 rgba(245, 201, 126, .18))
    drop-shadow(0 1px 0 rgba(245, 201, 126, .1))
    drop-shadow(0 4px 6px rgba(0, 0, 0, .75));
}

.strip-text {
  position: absolute;
  top: 11px;
  left: 16px;
  right: 12px;
  height: 40px;
  line-height: 40px;
  font-size: 14.5px;
  letter-spacing: .01em;
  color: #8b93a1;
  white-space: nowrap;
  overflow: hidden;
}

.strip.lifted {
  z-index: 99 !important;
  transform: scale(1.014);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)) brightness(1.22);
}

.strip.lifted .strip-text { color: var(--lit); }

/* every tear matched: it lies flat again and the shadows go */
.torn.knit .strip {
  cursor: default;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  background:
    linear-gradient(180deg, rgba(245, 201, 126, .06), transparent 55%),
    #1b1f28;
}

.torn.knit .strip-text { color: #b3b9c4; }

.torn.knit::after {
  content: "";
  position: absolute;
  inset: -6px -10px;
  border-radius: 3px;
  box-shadow: 0 0 60px -14px rgba(245, 201, 126, .4);
  pointer-events: none;
  animation: unfold .9s ease both;
}

/* ── the moth ──────────────────────────────────────────────────────────── */

.field-note {
  display: block;
  margin: 22px 0 8px;
  text-align: center;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #39404e;
}

.moth-field {
  position: relative;
  height: 210px;
  margin: 0 0 6px;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: 3px;
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(245, 201, 126, .13), transparent 70%),
    linear-gradient(180deg, #0a0c12, #06080d);
  overflow: hidden;
  touch-action: none;              /* the chase must not scroll the page */
  cursor: crosshair;
}

/* the lamp it will eventually give in to — scoped, because a bare .lamp is
   the kind of name another letter will want back one day, and did */
.moth-field .lamp {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--lit);
  box-shadow: 0 0 18px 7px rgba(245, 201, 126, .3), 0 0 44px 16px rgba(245, 201, 126, .12);
  animation: flicker 5s ease-in-out infinite;
}

.moth {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 20px;
  will-change: transform;
}

.moth .w {
  position: absolute;
  top: 0;
  width: 13px;
  height: 20px;
  background: linear-gradient(160deg, rgba(222, 210, 182, .92), rgba(141, 129, 104, .85) 62%, rgba(84, 77, 60, .8));
  box-shadow: 0 0 12px rgba(214, 198, 166, .22);
}

.moth .l {
  left: 0;
  border-radius: 70% 30% 40% 60% / 70% 60% 40% 30%;
  transform-origin: right center;
  animation: wing-l .16s linear infinite alternate;
}

.moth .r {
  right: 0;
  border-radius: 30% 70% 60% 40% / 60% 70% 30% 40%;
  transform-origin: left center;
  animation: wing-r .16s linear infinite alternate;
}

.moth .b {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 3px;
  height: 15px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #241f15;
}

/* antennae, so it reads as a moth and not a pair of petals */
.moth .b::before,
.moth .b::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 6px;
  height: 6px;
  border-top: 1px solid rgba(180, 168, 140, .7);
  border-radius: 60% 0 0 0;
}

.moth .b::before { left: -6px; }
.moth .b::after  { right: -6px; transform: scaleX(-1); }

@keyframes wing-l { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
@keyframes wing-r { from { transform: scaleX(1); } to { transform: scaleX(.3); } }

/* settled at the lamp: wings folded, almost still */
.moth.resting .w { animation-duration: 2.4s; }
.moth.resting .l { animation-name: rest-l; }
.moth.resting .r { animation-name: rest-r; }

@keyframes rest-l { from { transform: scaleX(.62); } to { transform: scaleX(.5); } }
@keyframes rest-r { from { transform: scaleX(.62); } to { transform: scaleX(.5); } }


/* it went through your fingers */
.moth.slipped .w { animation-duration: .07s; }
.moth.slipped { filter: blur(1.2px) brightness(1.25); }

/* held: wings open, and the ink on them is finally readable */
.moth.caught {
  transition: transform .55s cubic-bezier(.2, .8, .3, 1);
  filter: drop-shadow(0 0 16px rgba(245, 201, 126, .5));
}

.moth.caught .w { animation: none; transform: scaleX(1.15); }
.moth-field.still { cursor: default; }
.moth-field.still .lamp { animation: none; }

.wings-note {
  margin: 14px 0 22px;
  text-align: center;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #5c5847;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .7s ease, transform .7s ease;
}

.wings-note.show { opacity: 1; transform: none; }

.wings-note b {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--lit);
  text-shadow: 0 0 22px rgba(245, 201, 126, .3);
}

/* ── struck out ────────────────────────────────────────────────────────── */

.struck {
  display: block;
  margin: 12px 0 12px 18px;
}

.struck::before {
  content: "—";
  margin-right: 10px;
  color: #2f3644;
}

.struck:last-of-type { margin-bottom: 20px; }

.ink {
  position: relative;
  display: inline-block;
  color: var(--ink-strong);
  cursor: pointer;
  touch-action: none;                 /* the hold must not scroll the page */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.veil {
  position: absolute;
  inset: -2px -4px;
  border-radius: 2px;
  background:
    linear-gradient(92deg, #0c0d11, #16171c 40%, #0b0c10);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 6px rgba(0, 0, 0, .5);
  clip-path: inset(0 0 0 0);
  transition: clip-path .2s ease-out, opacity .3s ease;
}

/* a slow glint across the bars: the only invitation the player gets */
.veil::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(105deg, transparent 42%, rgba(245, 201, 126, .14) 50%, transparent 58%);
  background-size: 260% 100%;
  animation: glint 5.5s ease-in-out infinite;
}

@keyframes glint {
  0%, 62%  { background-position: 130% 0; }
  88%, 100% { background-position: -30% 0; }
}

/* thumb down: the ink gives way, left to right */
.ink.wiping .veil {
  transition: clip-path .78s linear;
  clip-path: inset(0 0 0 100%);
}

.ink.open .veil { opacity: 0; clip-path: inset(0 0 0 100%); pointer-events: none; }
.ink.open .veil::after { animation: none; }

.ink.open {
  color: #cbb994;
  text-shadow: 0 0 18px rgba(245, 201, 126, .18);
}

/* what the censor pressed too hard on stays a little smudged */
.ink.open .ink-text {
  background: linear-gradient(180deg, transparent 62%, rgba(245, 201, 126, .1) 62%);
}

/* ── her mother's scales ──────────────────────────────────────────────── */

.scales {
  margin: 26px 0 28px;
  padding: 10px 12px 14px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 3px;
  background: linear-gradient(180deg, #0c0e14, #090b11);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* the rig: a post, a beam across it, and two pans hanging off the ends */
.sc-rig { position: relative; height: 152px; }

.sc-post {
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: 6px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(184, 176, 154, .45), rgba(184, 176, 154, .08));
}

.sc-post::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: 84px;
  height: 3px;
  border-radius: 2px;
  background: rgba(184, 176, 154, .22);
}

.sc-beam {
  position: absolute;
  left: 50%;
  top: 14px;
  width: min(calc(100% - 96px), 240px);
  height: 0;
  transform: translateX(-50%) rotate(var(--tilt, 0deg));
  /* slow, and it overshoots once: a beam that snaps looks like a switch */
  transition: transform .65s cubic-bezier(.3, 1.35, .45, 1);
}

.sc-arm {
  position: absolute;
  inset: -1px 0 auto;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(184, 176, 154, .22), rgba(184, 176, 154, .6), rgba(184, 176, 154, .22));
}

/* the pans stay level however the beam lies — they hang, they do not tip */
.sc-hang {
  position: absolute;
  top: 0;
  width: 0;
  transform: rotate(calc(-1 * var(--tilt, 0deg)));
  transform-origin: 50% 0;
  transition: transform .65s cubic-bezier(.3, 1.35, .45, 1);
}

.sc-hang[data-side="left"]  { left: 0; }
.sc-hang[data-side="right"] { right: 0; }

.sc-cord {
  position: absolute;
  left: -.5px;
  top: 0;
  width: 1px;
  height: 44px;
  background: rgba(184, 176, 154, .28);
}

.sc-pan {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 80px;
  min-height: 40px;
  padding: 5px 4px;
  border: 1px solid rgba(184, 176, 154, .22);
  border-top-color: rgba(184, 176, 154, .06);
  border-radius: 3px 3px 12px 12px;
  background: rgba(255, 255, 255, .012);
  cursor: pointer;
}

/* it takes a moment to come to rest, and says so rather than sitting dead */
.sc-rig.settling .sc-pan { opacity: .55; }
.sc-rig.stuck { animation: scStuck .45s ease-out; }

@keyframes scStuck {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* nothing to choose between them: the one thing the letter warned about */
.scales.sc-level .sc-arm {
  background: linear-gradient(90deg, rgba(245, 201, 126, .25), rgba(245, 201, 126, .8), rgba(245, 201, 126, .25));
  box-shadow: 0 0 20px -4px rgba(245, 201, 126, .5);
}

/* ── the things themselves ─────────────────────────────────────────────── */

.sc-desk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 68px;
  padding: 8px 4px;
  border-top: 1px solid rgba(255, 255, 255, .04);
  cursor: pointer;
}

.sc-piece {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 46px;
  padding: 5px 0 3px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 4px;
  background: rgba(255, 255, 255, .014);
  color: #99a2b1;
  cursor: pointer;
  transition: transform .14s, color .18s, border-color .18s, background .18s;
}

.sc-piece svg { width: 26px; height: 26px; }

.sc-piece b {
  font: 400 12px/1 var(--serif);
  letter-spacing: .06em;
  color: #6a7180;
}

.sc-piece.lifted {
  transform: translateY(-5px);
  color: var(--lit);
  border-color: rgba(245, 201, 126, .35);
  background: rgba(245, 201, 126, .06);
  box-shadow: 0 8px 18px -10px #000;
}

.sc-piece.lifted b { color: var(--lit); }

/* in a pan they are small change, not exhibits */
.sc-pan .sc-piece {
  width: 32px;
  padding: 1px 0;
  border-color: transparent;
  background: none;
}

.sc-pan .sc-piece svg { width: 19px; height: 19px; }
.sc-pan .sc-piece b { font-size: 10px; }

/* ── the order you are sending ─────────────────────────────────────────── */

.sc-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.sc-end {
  flex: none;
  border-radius: 50%;
  background: rgba(184, 176, 154, .3);
}

.sc-end.light { width: 4px; height: 4px; }
.sc-end.heavy { width: 9px; height: 9px; }

.sc-line {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.sc-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px dashed rgba(255, 255, 255, .08);
  border-radius: 4px;
  cursor: pointer;
}

.sc-slot .sc-piece { width: 100%; border-color: transparent; background: none; }
.sc-slot .sc-piece svg { width: 22px; height: 22px; }

.scales.sc-full .sc-slot { border-style: solid; border-color: rgba(245, 201, 126, .28); }
.scales.sc-full .sc-slot .sc-piece { color: #c8b08a; }
.scales.sc-full .sc-slot .sc-piece b { color: var(--lit); }

/* and how they lay when she had them back */
.sc-keptrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 4px;
}

.sc-kept {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 38px;
  color: #8d95a4;
}

.sc-kept svg { width: 22px; height: 22px; }
.sc-kept b { font: 400 11px/1 var(--serif); color: var(--lit); }

/* ── folded small ──────────────────────────────────────────────────────── */

.fold {
  margin: 26px 0 28px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 3px;
  background: linear-gradient(180deg, #0c0e14, #090b11);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the sheet is the only paper here: the bands are transparent, which is what
   lets eight of them lie on each other and still all be read at once */
.fold-sheet {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 176, 154, .16);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008));
  box-shadow: 0 12px 26px -20px #000;
  cursor: grab;
  transition: height .5s cubic-bezier(.4, 0, .2, 1), box-shadow .5s, border-color .5s;
}

.fold-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  color: #848c9b;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.fold-band svg { display: block; width: 100%; height: 100%; }

/* laying the page out at the start, or after a resize, must not animate */
.fold-sheet.instant,
.fold-sheet.instant .fold-band { transition: none; }

.fold-creases { position: absolute; inset: 0; pointer-events: none; }

.fold-crease {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(255, 255, 255, .07);
}

/* the one it will take next */
.fold-crease.live { border-top-color: rgba(245, 201, 126, .3); }

/* shut: eight bands of marks in the same place, and four figures in them */
.fold.shut .fold-sheet {
  border-color: rgba(245, 201, 126, .32);
  box-shadow: 0 0 40px -12px rgba(245, 201, 126, .45);
}

.fold.shut .fold-band { color: #dcc08e; }

/* and how it lies in the drawer afterwards, already shut */
.fold-sheet.kept-shut { height: auto; cursor: default; }
.fold-sheet.kept-shut .fold-band { position: static; transform: none; }
.fold-sheet.kept-shut .fold-band svg { height: auto; }

/* ── the dry well ──────────────────────────────────────────────────────── */

.sounding {
  margin: 26px 0 28px;
  padding: 10px 12px 4px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 3px;
  background: linear-gradient(180deg, #0c0e14, #090b11);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.sounding.paying { cursor: grabbing; }

.snd-well { display: block; width: 100%; height: auto; }

/* the shaft: brick going up past the lead while it is going down, and quite
   still the moment it is resting on something */
.snd-dark { fill: #080b11; }
.snd-course { stroke: rgba(184, 176, 154, .13); stroke-width: 1; }
.snd-wall { stroke: rgba(184, 176, 154, .22); stroke-width: 1.4; fill: none; }
.snd-lip { stroke: rgba(184, 176, 154, .5); stroke-width: 4; stroke-linecap: round; }
.snd-neck { stroke: rgba(184, 176, 154, .5); stroke-width: 1.7; fill: none; }

.snd-lead {
  fill: rgba(196, 188, 168, .85);
  stroke: rgba(0, 0, 0, .5);
  stroke-width: .8;
}

/* the brick it came to rest on, which you only see once you have found it */
.snd-ledge {
  fill: rgba(184, 176, 154, .16);
  stroke: rgba(184, 176, 154, .3);
  stroke-width: 1;
  opacity: 0;
  transition: opacity .18s;
}

.sounding.soft .snd-ledge { opacity: 1; }

.snd-strand { stroke: rgba(184, 176, 154, .3); stroke-width: 1.4; }
.snd-tick { stroke: rgba(184, 176, 154, .42); stroke-width: 1.3; }
.snd-tick.big { stroke: rgba(184, 176, 154, .78); stroke-width: 1.7; }

/* the marks on the line, which are scenery: the figure by the lead is the
   one that answers the question */
.snd-figure {
  fill: #5c6472;
  font-family: var(--serif);
  font-size: 10px;
}

.snd-depth {
  fill: #8d95a4;
  font-family: var(--serif);
  font-size: 15px;
  transition: fill .2s;
}

/* resting on something: that is a number she asked for */
.sounding.soft .snd-depth {
  fill: var(--lit);
  font-size: 17px;
}

/* the mark going past your hand */
.snd-hand { fill: rgba(245, 201, 126, .8); }

.snd-cord {
  fill: none;
  stroke: rgba(184, 176, 154, .55);
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* soft: the lead is sitting on something, and every mark that goes past your
   hand from here on is line and not depth. The rule says so by going out. */
.sounding.soft .snd-cord { stroke: rgba(245, 201, 126, .5); }
.sounding.soft .snd-tick { stroke: rgba(184, 176, 154, .14); }
.sounding.soft .snd-tick.big { stroke: rgba(184, 176, 154, .24); }
.sounding.soft .snd-figure { fill: #454c58; }
.sounding.soft .snd-strand { stroke: rgba(184, 176, 154, .12); }

/* what it came to, in the drawer */
.snd-kept {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0 4px;
}

.snd-step { display: inline-flex; align-items: baseline; gap: 5px; }
.snd-step b { font-weight: 400; font-size: 19px; color: var(--lit); }
.snd-step em { font-style: normal; font-size: 11px; color: #5a616e; }

/* ── four locks ────────────────────────────────────────────────────────── */

.wax {
  margin: 26px 0 28px;
  padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 3px;
  background: linear-gradient(180deg, #0c0e14, #090b11);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.wx-ward { display: block; width: 100%; height: auto; fill: currentColor; }

/* the wax: warm, soft, and out of a lock she could reach */
.wx-lumps {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.wx-lump {
  position: relative;
  flex: 0 1 68px;
  padding: 7px 8px 4px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 4px;
  background: rgba(255, 255, 255, .014);
  color: #b08d5c;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, transform .14s;
}

.wx-lump b {
  display: block;
  margin-top: 3px;
  font: 400 11px/1 var(--serif);
  text-align: center;
  color: #6a7180;
}

.wx-lump.set { color: #c9a26b; }
.wx-lump.held {
  transform: translateY(-3px);
  border-color: rgba(245, 201, 126, .4);
  background: rgba(245, 201, 126, .06);
}
.wx-lump.held b { color: var(--lit); }

/* his page: twelve wards cut in steel, and every one of them has its opposite
   somewhere on the same page */
.wx-page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 18px 0 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.wx-card {
  position: relative;
  padding: 7px 9px 4px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 4px;
  background: rgba(255, 255, 255, .012);
  color: #7f8795;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}

.wx-card b {
  display: block;
  margin-top: 3px;
  font: 400 12px/1 var(--serif);
  letter-spacing: .06em;
  text-align: center;
  color: #6a7180;
}

.wx-card.taken {
  color: #c9a26b;
  border-color: rgba(245, 201, 126, .3);
  background: rgba(245, 201, 126, .05);
}

.wx-card.taken b { color: var(--lit); }

/* which lock it has been put against */
.wx-card.taken::after {
  content: attr(data-at);
  position: absolute;
  top: -6px;
  right: -6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #1a1d25;
  box-shadow: 0 0 0 1px rgba(245, 201, 126, .4);
  font: 400 10px/17px var(--serif);
  text-align: center;
  color: var(--lit);
}

.wax.wx-full .wx-lumps { filter: drop-shadow(0 0 16px rgba(245, 201, 126, .18)); }

/* what was cut, in the drawer */
.wx-keptrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 4px;
}

.wx-kept {
  position: relative;
  width: 46px;
  color: #b08d5c;
  text-align: center;
}

.wx-kept b {
  display: block;
  margin-top: 3px;
  font: 400 14px/1 var(--serif);
  color: var(--lit);
}

.wx-kept em {
  position: absolute;
  top: -5px;
  left: -5px;
  font: normal 10px/1 var(--serif);
  color: #5a616e;
}

/* ── the drawer ────────────────────────────────────────────────────────── */

.drawer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 18px auto 0;
}

.drawer-pull {
  display: block;
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
  background: transparent;
  color: #4a5162;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s;
}

.drawer-pull::before { content: "▾  "; }
.drawer-pull[aria-expanded="true"]::before { content: "▴  "; }
.drawer-pull:hover { color: rgba(245, 201, 126, .6); }

.drawer-stack { padding-bottom: 6px; }

.drawer-wait {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--whisper);
}

.paper {
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 3px;
  background: rgba(10, 12, 18, .75);
  overflow: hidden;
}

.paper header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
}

.paper header .numeral {
  display: inline;
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(245, 201, 126, .45);
}

.paper header .numeral::before { content: none; }

.paper header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  color: #7d8593;
}

.paper .paper-body,
.paper .paper-answer { display: none; }

.paper.open .paper-body,
.paper.open .paper-answer { display: block; }

.paper-body {
  padding: 0 18px;
  font-size: 14.5px;
  line-height: 1.85;
  color: #6c7482;
}

/* the kept copies are read-only: nothing in them is a puzzle any more */
.paper-body .ink { pointer-events: none; }
.paper-body .wings-note { margin: 16px 0; }

.kept-lines {
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 2px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .3);
}

.kept-lines span { display: block; line-height: 1.9; }

.paper-answer {
  margin: 14px 0 18px;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #454c5c;
}

.paper-answer b {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: none;
  color: rgba(245, 201, 126, .75);
}

/* a quiet note about how progress is kept, since there is no account */
.footnote {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 18px auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #333a47;
}

/* ── the lock ──────────────────────────────────────────────────────────── */

.lock {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.field {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(245, 201, 126, .16);
  border-radius: 26px;
  background: rgba(0, 0, 0, .28);
  color: var(--lit);
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .3em;
  text-indent: .3em;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}

.field::placeholder {
  color: var(--whisper);
  letter-spacing: .12em;
  text-transform: lowercase;
  font-style: italic;
}

.field:focus {
  border-color: rgba(245, 201, 126, .4);
  background: rgba(0, 0, 0, .42);
  box-shadow: 0 0 0 4px rgba(245, 201, 126, .06), 0 0 26px -8px rgba(245, 201, 126, .35);
}

.seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  margin-top: 14px;
  border: 1px solid rgba(245, 201, 126, .14);
  border-radius: 25px;
  background: transparent;
  color: rgba(245, 201, 126, .78);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .12s;
}

.seal:active { transform: scale(.985); }

.seal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wax);
  box-shadow: 0 0 10px rgba(147, 51, 44, .8);
}

.seal[disabled] { opacity: .45; pointer-events: none; }

.verdict {
  min-height: 20px;
  margin: 16px 0 0;
  text-align: center;
  font-size: 13.5px;
  font-style: italic;
  letter-spacing: .02em;
  color: var(--whisper);
  transition: color .3s;
}

.verdict.bad { color: var(--bad); }
.verdict.good { color: var(--lit); }

.hint {
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 2px solid rgba(245, 201, 126, .3);
  background: rgba(245, 201, 126, .035);
  font-size: 14px;
  font-style: italic;
  line-height: 1.7;
  color: #8d8471;
  animation: unfold .6s ease both;
}

.hint::before {
  content: "in the margin";
  display: block;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(245, 201, 126, .42);
}

/* ── reactions ─────────────────────────────────────────────────────────── */

.letter.wrong { animation: shake .42s cubic-bezier(.36, .07, .19, .97) both; }

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.letter.solved { animation: burn 1.15s ease-in forwards; }

@keyframes burn {
  0%   { opacity: 1; transform: none; filter: none; }
  35%  { filter: brightness(1.5) sepia(.4); }
  100% { opacity: 0; transform: translateY(-22px) scale(.97); filter: brightness(.4) blur(3px); }
}

.done .numeral::before { content: none; }
.done .body { text-align: center; color: var(--whisper); }
.done .sign { text-align: center; }

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

@media (min-width: 600px) {
  .letter { padding: 46px 44px 40px; }
  .body { font-size: 17px; }
}