.lights-host { position: absolute; inset: 0 0 auto; height: 140px; overflow: hidden; pointer-events: none; z-index: 2; }

.home {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(110px, 14vw, 170px) 24px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas: 'intro jar' 'write jar';
  column-gap: clamp(32px, 6vw, 90px);
  row-gap: 56px;
  align-items: start;
}
.intro { grid-area: intro; animation: rise 1s var(--ease-out) both; }
.jar-col { grid-area: jar; position: sticky; top: 60px; animation: rise 1.2s 0.15s var(--ease-out) both; }
.write { grid-area: write; animation: rise 1.2s 0.3s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.cd-caption { margin: 10px 0 0; font: 400 26px var(--f-hand); color: var(--ink-dim); }
.cd-block.is-today .countdown { display: none; }
.cd-block.is-today .cd-caption { font: 400 clamp(30px, 4vw, 44px) / 1.1 var(--f-display); color: var(--lamp); }

.jar-stage { position: relative; max-width: 420px; margin: 0 auto; padding-top: 30px; }
.jar-stage::before {
  /* warm glow behind the glass */
  content: '';
  position: absolute;
  inset: 18% 6% 2%;
  background: radial-gradient(closest-side, rgba(255, 201, 139, 0.28), transparent);
  filter: blur(20px);
}
#jar { cursor: pointer; }
.jar-count { text-align: center; margin: 14px 0 0; font: 400 12px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.jar-count b { font-weight: 400; color: var(--lamp); }

/* ---------- the paper strip you write on ---------- */
.strip {
  --tint: #a9b8ff;
  position: relative;
  margin: 0;
  padding: 26px 30px 22px 34px;
  border-radius: 4px 14px 6px 12px;
  color: var(--paper-ink);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tint) 55%, transparent) 0 8px, transparent 8px),
    color-mix(in srgb, var(--paper) 84%, var(--tint));
  box-shadow: 0 30px 60px -24px rgba(8, 3, 20, 0.7), 0 2px 0 rgba(255, 255, 255, 0.6) inset;
  rotate: -0.6deg;
  transition: background-color 0.4s, rotate 0.5s var(--ease-spring);
  transform-origin: 60% 50%;
}
.strip:focus-within { rotate: 0deg; }
.strip-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 4px; flex-wrap: wrap; }
.strip-to { font: 400 32px/1 var(--f-hand); }

.swatches { border: 0; margin: 0; padding: 0; display: flex; gap: 8px; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatches img { display: block; width: 30px; height: 30px; transition: transform 0.3s var(--ease-spring), filter 0.3s; filter: saturate(0.85); }
.swatches label:hover img { transform: rotate(-12deg) scale(1.12); }
.swatches input:checked + img { transform: scale(1.32) rotate(10deg); filter: saturate(1.1) drop-shadow(0 3px 4px rgba(58, 46, 79, 0.35)); }
.swatches input:focus-visible + img { outline: 2px solid var(--paper-ink); outline-offset: 2px; border-radius: 50%; }

.strip textarea {
  display: block;
  width: 100%;
  min-height: 140px;
  resize: none;
  overflow: hidden;
  border: 0;
  background: repeating-linear-gradient(180deg, transparent 0 33px, var(--paper-line) 33px 35px);
  background-attachment: local;
  color: var(--paper-ink);
  font: 400 27px/35px var(--f-hand);
  padding: 0;
  margin-top: 8px;
}
.strip textarea::placeholder, .strip input::placeholder { color: rgba(58, 46, 79, 0.38); }
.strip textarea:focus, .strip input:focus { outline: none; }

.strip-foot { display: flex; align-items: baseline; gap: 10px 22px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(58, 46, 79, 0.2); }
.sign { display: flex; align-items: baseline; gap: 8px; font: 400 27px var(--f-hand); flex: 1 1 200px; }
.sign input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--paper-ink); padding: 0; border-bottom: 1.5px solid rgba(58, 46, 79, 0.25); }
.handle { display: flex; align-items: baseline; gap: 2px; font: 400 13px var(--f-mono); color: rgba(58, 46, 79, 0.6); flex: 1 1 220px; }
.handle input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--paper-ink); padding: 2px 0; }
.chars { font: 400 11px var(--f-mono); color: rgba(58, 46, 79, 0.45); margin-left: auto; }
.chars.near { color: #b0476f; }
.invalid { animation: nudge 0.4s; }
.invalid input, input.invalid { border-bottom-color: #c24d7a !important; }
@keyframes nudge { 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }

.hp { position: absolute; left: -9999px; }

.send-row { display: flex; align-items: center; gap: 14px 16px; margin-top: 28px; flex-wrap: wrap; }
.review { flex: 1 1 100%; margin: 0; color: var(--ink-faint); font-size: 13px; }
.note:empty { display: none; }
.note { flex: 1 1 100%; margin: 4px 0 0; color: var(--ink-dim); font-size: 15px; max-width: 52ch; }
.note.is-done { color: var(--ink); }
.note.is-error { color: #ffb4cf; }

/* folding the strip into a star */
.strip.folding { animation: fold 0.75s cubic-bezier(0.6, 0, 0.4, 1) forwards; pointer-events: none; }
@keyframes fold {
  0% { transform: none; }
  35% { transform: scaleY(0.16) scaleX(1.02); border-radius: 30px; }
  70% { transform: scaleY(0.12) scaleX(0.2) rotate(-90deg); border-radius: 40px; opacity: 1; }
  100% { transform: scale(0.02) rotate(-260deg); opacity: 0; }
}
.strip.unfolding { animation: unfold 0.7s var(--ease-out) both; }
@keyframes unfold { from { opacity: 0; transform: translateY(26px) scale(0.97); } }

/* your star: the paper you folded, back to change */
.star-tag {
  position: absolute;
  top: -12px;
  left: 30px;
  z-index: 2;
  margin: 0;
  padding: 5px 12px 4px;
  border-radius: 3px;
  font: 400 11px var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-ink);
  background: color-mix(in srgb, var(--tint) 62%, var(--paper));
  box-shadow: 0 4px 10px -4px rgba(20, 8, 40, 0.45);
  rotate: -2deg;
  transition: background-color 0.4s;
}
.star-tag[hidden] { display: none; }
.strip.is-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.3s; }
.strip.is-locked .swatches, .strip.is-locked .chars { display: none; }
.strip.is-locked .x-btn, .strip.is-locked .tilt-handle { display: none; }
.strip.is-locked .sticker-layer .stk { pointer-events: none; }
.strip.is-locked .polaroid-frame { cursor: default; }
.strip.is-locked .polaroid-cap:placeholder-shown { visibility: hidden; }
.strip.is-locked .handle:has(input:placeholder-shown) { visibility: hidden; }
#fold.is-unchanged { cursor: default; }
.tray[hidden] { display: none; }
.standing { flex: 1 1 100%; margin: 0; font-size: 15px; color: var(--ink); max-width: 56ch; }
.standing[hidden] { display: none; }
.standing::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--lamp); vertical-align: 1px; }
.standing[data-status='approved']::before, .standing[data-status='opened']::before { background: var(--pink); }
.standing[data-status='denied']::before { background: #ffb4cf; }

/* saving an edit: the paper creases and opens out again, with a glint across it */
.strip.refolding { animation: refold 0.7s var(--ease-out); }
@keyframes refold {
  0% { transform: none; }
  30% { transform: scaleY(0.82) scaleX(0.985); }
  60% { transform: scaleY(1.03); }
  100% { transform: none; }
}
.strip.refolding::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  animation: glint 0.7s ease-out both;
}
@keyframes glint { from { background-position: 120% 0; } to { background-position: -40% 0; } }

@media (max-width: 900px) {
  .send-row .btn { flex: 1 1 auto; }
  .home { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'intro' 'jar' 'write'; row-gap: 36px; padding-inline: 16px; }
  .jar-col { position: relative; top: 0; }
  .jar-stage { max-width: 330px; }
  .strip { padding: 22px 18px 18px 26px; }
  .strip textarea { font-size: 25px; }
}

/* ---------- things tucked into the paper (shapes come from letter.css) ---------- */
.sheet { padding-bottom: 20px; transition: background-color 0.4s, rotate 0.5s var(--ease-spring), box-shadow 0.3s; }
.sticker-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sheet.sticker-hover { box-shadow: 0 30px 60px -24px rgba(8, 3, 20, 0.7), 0 0 0 3px color-mix(in srgb, var(--lamp) 70%, transparent), 0 0 40px rgba(255, 201, 139, 0.35); }
.sheet .stk { --stk: 64px; }

/* remove buttons and the tilt handle appear when you hover or focus a piece */
.x-btn, .tilt-handle {
  appearance: none;
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.2s, scale 0.3s var(--ease-spring);
}
.x-btn { top: -11px; right: -11px; background: var(--paper-ink); color: var(--paper); box-shadow: 0 4px 10px -2px rgba(20, 8, 40, 0.5); }
.x-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.extras > :hover > .x-btn, .extras > :focus-within > .x-btn,
.polaroid:hover .tilt-handle, .polaroid:focus-within .tilt-handle { opacity: 1; scale: 1; }
.x-btn:hover { background: #c24d7a; }
@media (hover: none) {
  .x-btn, .tilt-handle { opacity: 0.9; scale: 0.9; }
}
.tilt-handle { right: -13px; bottom: -13px; width: 32px; height: 32px; background: var(--lamp); color: #3a2410; cursor: grab; touch-action: none; box-shadow: 0 4px 10px -2px rgba(20, 8, 40, 0.5); }
.tilt-handle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.polaroid.tilting { box-shadow: 0 24px 40px -14px rgba(30, 14, 50, 0.6); }
.polaroid.tilting .tilt-handle { cursor: grabbing; scale: 1.15; opacity: 1; }
.polaroid-cap:focus { outline: none; background: rgba(58, 46, 79, 0.05); }
.polaroid.dropping-in { animation: drop-in 0.75s var(--ease-spring) both; }
@keyframes drop-in {
  0% { translate: 0 -70px; scale: 1.2; opacity: 0; }
  55% { translate: 0 6px; scale: 0.97; opacity: 1; }
  100% { translate: 0 0; scale: 1; }
}
.polaroid.settle { animation: settle 0.45s var(--ease-spring); }
@keyframes settle { 30% { scale: 1.04; } 65% { scale: 0.98; } }

/* shared entrances / exits */
.popping-in { animation: pop-in 0.6s var(--ease-spring) both; }
@keyframes pop-in { 0% { scale: 0.3; opacity: 0; } 60% { scale: 1.08; opacity: 1; } 100% { scale: 1; } }
.leaving { animation: leave 0.35s var(--ease-out) forwards; pointer-events: none; }
@keyframes leave { to { scale: 0.4; opacity: 0; translate: 0 24px; } }
.shake { animation: nudge 0.4s; }
.boing { animation: boing 0.45s var(--ease-spring); }
@keyframes boing { 30% { scale: 0.9 1.08; } 60% { scale: 1.05 0.96; } }

.stk-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  width: calc(var(--stk) * 1.15);
  height: calc(var(--stk) * 1.15);
  margin: calc(var(--stk) * -0.575) 0 0 calc(var(--stk) * -0.575);
  pointer-events: none;
  transition: scale 0.25s var(--ease-spring), rotate 0.15s;
  scale: 1.1;
}
.stk-ghost.over { scale: 1.25; }

/* drop a photo anywhere */
.drop-veil {
  position: absolute;
  inset: -6px;
  z-index: 5;
  display: none;
  place-items: center;
  border-radius: 14px;
  border: 2.5px dashed rgba(58, 46, 79, 0.4);
  background: rgba(255, 248, 238, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.drop-veil span { font: 400 34px var(--f-hand); color: var(--paper-ink); transition: scale 0.3s var(--ease-spring); }
.dragging-file .drop-veil { display: grid; }
.sheet.drop-hot .drop-veil { border-color: var(--lamp-deep); background: rgba(255, 228, 190, 0.7); }
.sheet.drop-hot .drop-veil span { scale: 1.15; }

/* ---------- the craft tray under the paper ---------- */
.tray {
  margin-top: 26px;
  padding: 18px 18px 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 244, 232, 0.07), rgba(255, 244, 232, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 244, 232, 0.1), 0 30px 60px -30px rgba(8, 3, 20, 0.8);
  backdrop-filter: blur(6px);
}
.tray-title { margin: 0 0 12px; font: 400 26px var(--f-hand); color: var(--ink); }
.tray-title span { font: 400 11px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-left: 6px; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 5px; border-radius: 16px; background: rgba(16, 9, 30, 0.35); }
.tab {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-dim);
  font: 600 13px var(--f-body);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease-spring); }
.tab:hover { color: var(--ink); }
.tab:hover svg { transform: rotate(-10deg) scale(1.12); }
.tab[aria-selected='true'] { background: var(--paper); color: var(--paper-ink); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6); }
.tab-dot { position: absolute; top: 7px; right: calc(50% - 20px); width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px var(--night-2); scale: 0; transition: scale 0.35s var(--ease-spring); }
.tab[aria-selected='true'] .tab-dot { box-shadow: 0 0 0 2px var(--paper); }
.tab.has .tab-dot { scale: 1; }

.panel { padding: 18px 2px 0; animation: panel-in 0.35s var(--ease-out); }
.panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; translate: 0 8px; } }
.fine { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); }
.fine + .fine { margin-top: 6px; }
.fine svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--lamp); stroke-width: 2; stroke-linejoin: round; }
.fine.is-error { color: #ffb4cf; }
.hint { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-dim); }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

.btn--small { font-size: 14px; padding: 9px 16px; display: inline-block; }
label.btn { user-select: none; }
.drop:has(#photo-file:focus-visible) label.btn, .photo-controls:has(#photo-file:focus-visible) label.btn { outline: 2px solid var(--lamp); outline-offset: 3px; }

/* photo drop zone */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 16px;
  border-radius: 18px;
  border: 2px dashed rgba(255, 244, 232, 0.22);
  transition: border-color 0.25s, background-color 0.25s, scale 0.3s var(--ease-spring);
}
.drop:hover, .drop.drop-hot { border-color: var(--lamp); background: rgba(255, 201, 139, 0.07); }
.drop.drop-hot { scale: 1.03; }
.drop[hidden] { display: none; }
.drop-art { position: relative; width: 96px; height: 70px; margin-bottom: 10px; }
.drop-art i { position: absolute; left: 50%; top: 4px; width: 50px; height: 58px; margin-left: -25px; border-radius: 3px; background: #fffdf8; box-shadow: 0 6px 12px -6px #000; transition: rotate 0.4s var(--ease-spring), translate 0.4s var(--ease-spring); }
.drop-art i::after { content: ''; position: absolute; inset: 5px 5px 14px; background: linear-gradient(160deg, #a9b8ff, #ffa3c8 60%, #ffe08f); border-radius: 1px; }
.drop-art i:nth-child(1) { rotate: -14deg; translate: -18px 4px; }
.drop-art i:nth-child(2) { rotate: 12deg; translate: 18px 4px; }
.drop-art i:nth-child(3) { rotate: -2deg; }
.drop:hover .drop-art i:nth-child(1), .drop.drop-hot .drop-art i:nth-child(1) { rotate: -22deg; translate: -28px 2px; }
.drop:hover .drop-art i:nth-child(2), .drop.drop-hot .drop-art i:nth-child(2) { rotate: 20deg; translate: 28px 2px; }
.drop:hover .drop-art i:nth-child(3), .drop.drop-hot .drop-art i:nth-child(3) { translate: 0 -6px; rotate: 3deg; }
.drop-big { margin: 0; font: 400 28px/1.1 var(--f-hand); }
.drop-small { margin: 2px 0 12px; font-size: 14px; color: var(--ink-dim); }
.photo-controls[hidden] { display: none; }
.tilt { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 400 12px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.tilt input { flex: 1; accent-color: var(--lamp); }

/* doodle pad: pad and tools side by side on a wide tray, stacked on a narrow one */
.doodle-desk { display: grid; grid-template-columns: minmax(0, 440px) auto; gap: 20px; align-items: start; }
.pad-wrap { position: relative; }
.pad {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, var(--paper-line) 27px 28px),
    color-mix(in srgb, var(--paper) 86%, var(--tint));
  box-shadow: inset 0 2px 8px rgba(58, 46, 79, 0.15), 0 10px 24px -14px #000;
  cursor: crosshair;
  touch-action: none;
}
.pad-hint { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 400 28px var(--f-hand); color: rgba(58, 46, 79, 0.35); pointer-events: none; transition: opacity 0.3s; }
.pad-hint.gone { opacity: 0; }
.pad-tools { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.inks { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; }
.ink { position: relative; display: block; cursor: pointer; }
.ink input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ink-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15); transition: scale 0.3s var(--ease-spring), box-shadow 0.2s; }
.ink--eraser .ink-dot { background: rgba(255, 244, 232, 0.12); color: var(--ink); }
.ink--eraser svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ink:hover .ink-dot { scale: 1.12; }
.ink input:checked + .ink-dot { scale: 1.22; box-shadow: 0 0 0 2.5px var(--night-2), 0 0 0 4.5px var(--ink); }
.ink input:focus-visible + .ink-dot { outline: 2px solid var(--lamp); outline-offset: 5px; }
.pad-actions { display: flex; flex-direction: column; gap: 6px; }
.icon-btn { appearance: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 244, 232, 0.08); color: var(--ink); cursor: pointer; transition: background-color 0.2s, transform 0.3s var(--ease-spring); }
.icon-btn:hover { background: rgba(255, 244, 232, 0.16); transform: rotate(-12deg); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* sticker sheet */
.sticker-sheet {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 1px 1px, rgba(58, 46, 79, 0.12) 1px, transparent 1.5px) 0 0 / 12px 12px,
    #fbf3ff;
  box-shadow: 0 14px 30px -16px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  rotate: 0.6deg;
}
.sticker-src {
  appearance: none;
  aspect-ratio: 1;
  padding: 8px;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: grab;
  touch-action: none;
  rotate: var(--r, 0deg);
  transition: scale 0.3s var(--ease-spring), rotate 0.3s var(--ease-spring), opacity 0.2s;
}
.sticker-src:hover { scale: 1.14; rotate: calc(var(--r, 0deg) * -1); }
.sticker-src.pressed { scale: 0.92; }
.sticker-src.peeled { opacity: 0.25; scale: 0.9; }
.sticker-src:focus-visible { outline-color: var(--paper-ink); }

/* voice */
.rec { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 18px; background: rgba(16, 9, 30, 0.35); }
.rec-btn {
  --p: 0;
  --lvl: 0;
  appearance: none;
  position: relative;
  flex: none;
  width: 74px;
  height: 74px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #2a1f40;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px #000, inset 0 0 0 1px rgba(255, 244, 232, 0.12);
  transition: transform 0.25s var(--ease-spring);
}
.rec-btn:hover { transform: scale(1.06); }
.rec-btn:active { transform: scale(0.94); }
.rec-btn:disabled { opacity: 0.6; cursor: progress; }
.rec-btn:focus-visible { border-radius: 50%; }
.rec-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#ff8fb8 calc(var(--p) * 360deg), rgba(255, 244, 232, 0.1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
.rec-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: #ff6f9f;
  box-shadow: 0 0 calc(10px + var(--lvl) * 30px) rgba(255, 111, 159, 0.6);
  scale: calc(1 + var(--lvl) * 0.5);
  transition: border-radius 0.3s var(--ease-spring), width 0.3s var(--ease-spring), height 0.3s, margin 0.3s;
}
.rec-btn.on .rec-dot { width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 6px; }
.rec-body { flex: 1; min-width: 0; }
.wave { display: block; width: 100%; height: 46px; }
.rec-time { margin: 6px 0 0; font: 400 13px var(--f-mono); color: var(--ink); }
.rec-max { color: var(--ink-faint); }
.is-recording .rec-time span:first-child { color: #ff8fb8; }
.rec-after { margin-top: 12px; }
.rec-after[hidden] { display: none; }

/* ---------- preview: the letter as Hollie unfolds it ---------- */
.reader { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; align-content: center; gap: 28px; padding: 24px 16px; }
.reader[hidden] { display: none; }
.reader-backdrop { position: absolute; inset: 0; background: rgba(16, 9, 30, 0.72); backdrop-filter: blur(6px); animation: fade 0.5s both; }
.reader.closing .reader-backdrop { animation: fade 0.45s reverse both; }
@keyframes fade { from { opacity: 0; } }
body:has(.reader:not([hidden])) { overflow: hidden; }

.letter {
  --tint: #a9b8ff;
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tint) 70%, #3a2e4f) transparent;
  padding: 30px clamp(22px, 5vw, 46px) 26px;
  border-radius: 6px 16px 8px 14px;
  color: var(--paper-ink);
  background: color-mix(in srgb, var(--paper) 80%, var(--tint));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  outline: none;
  rotate: -0.8deg;
}
.letter::before { /* the fold creases left from the star */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(58, 46, 79, 0.06) calc(20% - 1px) 20%);
  pointer-events: none;
}
.letter.unfolding { animation: letter-unfold 0.9s var(--ease-out) both; }
@keyframes letter-unfold {
  0% { clip-path: inset(46% 48% 46% 48% round 40px); transform: scale(0.6) rotate(-30deg); opacity: 0; }
  30% { opacity: 1; }
  60% { clip-path: inset(40% 0 40% 0 round 20px); transform: scale(1) rotate(2deg); }
  100% { clip-path: inset(0 0 0 0 round 0); transform: none; }
}
.letter.folding { animation: letter-fold 0.5s ease-in both; }
@keyframes letter-fold {
  0% { clip-path: inset(0 0 0 0); }
  50% { clip-path: inset(42% 0 42% 0 round 20px); }
  100% { clip-path: inset(46% 48% 46% 48% round 40px); transform: scale(0.5) rotate(40deg); opacity: 0; }
}
.letter-count { margin: 0 0 6px; font: 400 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(58, 46, 79, 0.5); }
.letter-msg {
  font: 400 clamp(28px, 4.4vw, 36px) / 43px var(--f-hand);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: repeating-linear-gradient(180deg, transparent 0 40px, var(--paper-line) 40px 42px, transparent 42px 43px);
}
.letter-msg span { display: inline; animation: ink 0.5s var(--ease-out) both; }
@keyframes ink { from { opacity: 0; filter: blur(4px); } }
.letter-foot { margin-top: 18px; text-align: right; }
.letter-from { margin: 0; font: 400 34px var(--f-hand); }
.letter-from::before { content: '— '; }
.letter-handle { margin: 0; font: 400 13px var(--f-mono); color: rgba(58, 46, 79, 0.6); }
.letter-handle:empty { display: none; }
.reader-actions { position: relative; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; animation: rise 0.6s 0.6s var(--ease-out) both; }
.reader.closing .reader-actions { opacity: 0; transition: opacity 0.2s; }
.flying-star { z-index: 66; }
.sparkle { position: fixed; z-index: 67; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; }

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  .tray { padding: 14px 12px 16px; }
  .tray-title { font-size: 24px; margin-bottom: 10px; }
  .tab { font-size: 12px; }
  .extras { gap: 12px 16px; justify-content: center; }
  .sheet { padding-bottom: 16px; }
  .sheet .stk, .letter .stk { --stk: 48px; }
  .doodle-desk { grid-template-columns: minmax(0, 1fr); }
  .pad-wrap { max-width: none; }
  .pad-tools, .inks, .pad-actions { flex-direction: row; }
  .pad-tools { justify-content: space-between; }
  .sticker-sheet { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px; }
  .rec { gap: 12px; padding: 12px; }
  .rec-btn { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .cassette.is-playing .reel { animation: none; }
}