/* Pocard recipient page, in the Airmail look: white paper, airmail red and blue, tall
   condensed headings. The photo print, its back and the stamps keep the app's colors.
   Mobile first; the wide layout (front and back side by side) starts at 900px. */

:root {
  --paper: #fbfbf8;
  --paper-deep: #eef0f4;
  --white: #ffffff;
  --ink: #16181d;
  --muted: #4a4d55;
  --red: #d7262e;
  --red-dark: #b51d24;
  --blue: #1d3c8f;
  --blue-dark: #152d6e;
  --datestamp: #ffab4f;
  --rim: #fdfaf2;
  --back-paper: #fbf5e8;
  --back-paper-deep: #f1e4cb;
  --pen: #2e3d63;
  --line: rgba(22, 24, 29, 0.12);
  --line-strong: rgba(22, 24, 29, 0.28);
  --field: #6b6f78;
  --error: #a51d24;
  --stripe: repeating-linear-gradient(-45deg, var(--red) 0 12px, var(--paper) 12px 18px, var(--blue) 18px 30px, var(--paper) 30px 36px);
  --f-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, 'Courier New', monospace;
  --ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--paper); -webkit-text-size-adjust: 100%; }
/* Keeps focused controls clear of the sticky ad bar on phones. */
@media (max-width: 899px) {
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--f-ui);
  -webkit-tap-highlight-color: transparent;
}
/* The airmail stripe along the top of every page. */
body::before { content: ""; display: block; height: 8px; background: var(--stripe); }

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--red-dark); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
button { font: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Page frame */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.main { flex: 1; display: flex; flex-direction: column; }
.page[data-view="get"] .card-only,
.page[data-view="card"] .get-only { display: none !important; }

.top { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.wordmark {
  margin: 0;
  font: 700 30px/1.1 var(--f-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
}
.tagline { margin: 0; font: 400 15px/1.4 var(--f-ui); color: var(--muted); }
.top .tagline { display: none; }
.from {
  margin: 0;
  font: 400 13px/1.6 var(--f-ui);
  color: var(--muted);
}
.from-date {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.lead { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); text-align: center; }
.small { margin: 0; max-width: 320px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.loading { margin: 120px 0 0; text-align: center; font: 400 14px/1.5 var(--f-ui); color: var(--muted); }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 500 17px/1.1 var(--f-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-dark); color: var(--white); }
.btn-ghost { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-ghost:hover { background: rgba(29, 60, 143, 0.07); color: var(--blue); }
.btn-store { min-height: 54px; background: var(--ink); color: var(--white); }
.btn-store:hover { background: #000; color: var(--white); }
.btn-lg { min-height: 52px; }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 17px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(29, 60, 143, 0.35);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  font: 500 16px/1 var(--f-ui);
  cursor: pointer;
}
.pill:hover { background: rgba(29, 60, 143, 0.07); }
.pill[aria-disabled="true"] { cursor: default; border-color: var(--line-strong); color: var(--muted); background: transparent; }

.link-btn {
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--blue);
  font: 500 14px var(--f-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* The stage holds the photo print and, until it is opened, the envelope.
   The print's shape: a 4 x 6 portrait or 6 x 4 landscape card, or the original squarer print
   for cards made before shapes. --card-w and --card-h are its size in card points, --pw its
   width on screen and --pt one card point. */

.page { --card-w: 300; --card-h: 386; --card-max: 300px; --gutter: 64px; }
.page.shape-portrait { --card-h: 450; }
.page.shape-landscape { --card-w: 450; --card-h: 300; --card-max: 450px; --gutter: 32px; }

.card-col { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stage {
  --pw: max(220px, min(var(--card-max), calc(100vw - var(--gutter)), calc((100vh - 250px) * var(--card-w) / var(--card-h))));
  --pt: calc(var(--pw) / var(--card-w));
  --ew: min(340px, calc(100vw - 32px));
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
}
@supports (height: 100svh) {
  .stage { --pw: max(220px, min(var(--card-max), calc(100vw - var(--gutter)), calc((100svh - 250px) * var(--card-w) / var(--card-h)))); }
}
.page[data-state="sealed"] .stage { animation: arrive 0.8s var(--ease-out) both; }
/* The torn-off strip may fall past the edge of the page without making it scroll sideways. */
.page { overflow-x: clip; }
@keyframes arrive {
  from { opacity: 0; transform: translateY(-36px) rotate(-2deg); }
}

/* The print: a photo with a front and a back */

.print {
  position: relative;
  z-index: 5;
  width: var(--pw);
  height: calc(var(--pt) * var(--card-h));
  transform-origin: 50% 0;
  transition: transform 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.04), opacity 0.3s ease;
}
.page[data-state="sealed"] .print { visibility: hidden; }
.print.inside { z-index: 2; transition: none; transform: translateY(var(--in-y)) scale(var(--s)); }
.print.rising { z-index: 2; transition: transform 0.85s var(--ease-out); transform: translateY(var(--out-y)) scale(var(--s)); }
.print.behind { z-index: 2; }
.print.fade { opacity: 0; }
.page[data-state="out"] .print,
.page[data-state="revealed"] .print,
.page[data-state="reading"] .print { cursor: pointer; }
.print.turning { animation: lift 0.9s ease; }
@keyframes lift {
  40% { transform: translateY(-12px) scale(1.035); }
}

.print-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateY(0deg);
  transition: transform 0.9s cubic-bezier(0.3, 1.2, 0.45, 1);
}
.print-inner.flipped { transform: perspective(1400px) rotateY(180deg); }

.face {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: 0;
  border-radius: 3px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 22px 44px rgba(22, 24, 29, 0.26), 0 2px 6px rgba(22, 24, 29, 0.16);
}
.face::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(22, 24, 29, 0) 25%, rgba(22, 24, 29, 0.4));
  opacity: 0;
  pointer-events: none;
}
.print.turning .face::after { animation: shade 0.9s ease; }
@keyframes shade {
  45% { opacity: 1; }
}

.front { padding: calc(var(--pt) * 14); background: var(--rim); }
.front img { display: block; width: 100%; height: 100%; object-fit: cover; background: #d8d0bf; }
.datestamp {
  position: absolute;
  right: calc(var(--pt) * 24);
  bottom: calc(var(--pt) * 24);
  font: 700 calc(var(--pt) * 13)/1 var(--f-mono);
  letter-spacing: 0.12em;
  color: var(--datestamp);
  text-shadow: 0 0 6px rgba(255, 150, 50, 0.55);
}

/* The back, on the paper the sender chose. Photo paper (the back of a photo print) is off-white
   with the maker's mark printed faintly across it; airmail is thin pale blue onionskin with a soft
   crinkle; laid is cream with fine ribs crossed by chain lines; kraft is brown with flecks; washi
   is soft off-white with long fibres. The same papers as in the app. */
.back {
  overflow: hidden;
  transform: rotateY(180deg);
  background: linear-gradient(150deg, #f9f7f0, #f4f0e6 55%, #ede7d9);
}
.back:not(.paper-photo) .paper-mark { display: none; }
.back.paper-onionskin {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke-width='0.6' stroke-linecap='round'%3E%3Cpath d='M33.3 84.5Q33.3 86.6 34.4 88.4' stroke='%23ffffff' stroke-opacity='0.48'/%3E%3Cpath d='M102.0 151.3Q100.3 148.1 98.1 145.3' stroke='%23ffffff' stroke-opacity='0.59'/%3E%3Cpath d='M113.6 158.4Q117.3 158.0 120.9 159.1' stroke='%23ffffff' stroke-opacity='0.44'/%3E%3Cpath d='M17.7 152.3Q20.7 154.1 22.6 157.1' stroke='%23ffffff' stroke-opacity='0.36'/%3E%3Cpath d='M138.8 41.6Q139.7 40.4 140.1 38.9' stroke='%23ffffff' stroke-opacity='0.33'/%3E%3Cpath d='M66.2 57.6Q65.3 55.9 63.8 54.9' stroke='%23ffffff' stroke-opacity='0.55'/%3E%3Cpath d='M18.2 80.6Q16.4 82.2 14.3 83.6' stroke='%23ffffff' stroke-opacity='0.59'/%3E%3Cpath d='M21.4 158.4Q21.7 160.2 22.8 161.7' stroke='%23ffffff' stroke-opacity='0.46'/%3E%3Cpath d='M156.7 49.2Q159.5 47.6 161.1 44.8' stroke='%23ffffff' stroke-opacity='0.47'/%3E%3Cpath d='M24.3 33.8Q22.8 34.2 21.5 35.1' stroke='%23ffffff' stroke-opacity='0.45'/%3E%3Cpath d='M122.6 40.5Q122.3 44.0 123.8 47.2' stroke='%23ffffff' stroke-opacity='0.55'/%3E%3Cpath d='M67.4 97.7Q71.1 95.6 75.3 95.4' stroke='%23ffffff' stroke-opacity='0.58'/%3E%3Cpath d='M114.1 30.4Q114.9 32.8 115.9 35.2' stroke='%23ffffff' stroke-opacity='0.45'/%3E%3Cpath d='M140.4 129.1Q142.3 126.2 145.3 124.4' stroke='%23ffffff' stroke-opacity='0.41'/%3E%3Cpath d='M129.4 118.0Q133.5 117.4 137.5 116.4' stroke='%23ffffff' stroke-opacity='0.33'/%3E%3Cpath d='M144.9 13.7Q144.7 16.6 145.5 19.3' stroke='%23ffffff' stroke-opacity='0.58'/%3E%3Cpath d='M53.8 156.6Q57.8 154.2 62.4 154.4' stroke='%23ffffff' stroke-opacity='0.37'/%3E%3Cpath d='M44.1 98.7Q43.7 100.4 44.1 102.2' stroke='%23ffffff' stroke-opacity='0.48'/%3E%3Cpath d='M8.6 40.1Q8.9 42.5 8.4 44.8' stroke='%23ffffff' stroke-opacity='0.40'/%3E%3Cpath d='M0.4 114.8Q-2.6 117.0 -6.1 118.3' stroke='%23ffffff' stroke-opacity='0.60'/%3E%3Cpath d='M57.8 79.0Q55.6 81.4 53.1 83.6' stroke='%23ffffff' stroke-opacity='0.55'/%3E%3Cpath d='M9.0 139.6Q8.6 143.3 6.6 146.4' stroke='%23ffffff' stroke-opacity='0.39'/%3E%3Cpath d='M84.8 147.6Q85.3 150.6 85.6 153.6' stroke='%23ffffff' stroke-opacity='0.31'/%3E%3Cpath d='M34.6 100.3Q35.3 98.2 36.3 96.2' stroke='%23ffffff' stroke-opacity='0.35'/%3E%3Cpath d='M17.9 10.8Q14.6 12.6 10.8 13.1' stroke='%23ffffff' stroke-opacity='0.51'/%3E%3Cpath d='M36.4 111.3Q36.0 108.5 34.5 106.1' stroke='%23ffffff' stroke-opacity='0.52'/%3E%3Cpath d='M69.3 21.6Q71.1 19.0 72.8 16.4' stroke='%23ffffff' stroke-opacity='0.40'/%3E%3Cpath d='M40.5 9.1Q39.1 7.1 38.1 4.8' stroke='%23ffffff' stroke-opacity='0.40'/%3E%3Cpath d='M140.7 82.4Q142.7 80.8 145.1 80.2' stroke='%23ffffff' stroke-opacity='0.50'/%3E%3Cpath d='M103.0 65.1Q100.7 66.2 98.2 66.4' stroke='%23ffffff' stroke-opacity='0.42'/%3E%3Cpath d='M55.3 84.0Q53.4 81.3 51.1 78.8' stroke='%23ffffff' stroke-opacity='0.51'/%3E%3Cpath d='M146.0 61.4Q143.9 64.6 141.6 67.6' stroke='%23ffffff' stroke-opacity='0.44'/%3E%3Cpath d='M135.6 73.3Q132.5 72.7 129.9 70.8' stroke='%23ffffff' stroke-opacity='0.46'/%3E%3Cpath d='M84.4 145.5Q83.0 146.5 82.0 147.7' stroke='%23ffffff' stroke-opacity='0.50'/%3E%3Cpath d='M133.4 158.0Q130.0 160.9 126.3 163.5' stroke='%23ffffff' stroke-opacity='0.33'/%3E%3Cpath d='M39.4 72.0Q37.9 75.6 37.7 79.5' stroke='%23ffffff' stroke-opacity='0.53'/%3E%3Cpath d='M75.5 26.9Q79.6 27.6 83.6 26.3' stroke='%23ffffff' stroke-opacity='0.48'/%3E%3Cpath d='M19.8 37.3Q17.0 39.4 15.8 42.5' stroke='%23ffffff' stroke-opacity='0.54'/%3E%3Cpath d='M14.5 149.2Q15.4 146.2 16.3 143.3' stroke='%23ffffff' stroke-opacity='0.44'/%3E%3Cpath d='M16.4 14.4Q15.4 18.4 12.7 21.4' stroke='%23ffffff' stroke-opacity='0.55'/%3E%3Cpath d='M54.4 27.1Q57.4 26.2 60.1 24.5' stroke='%23ffffff' stroke-opacity='0.41'/%3E%3Cpath d='M95.0 136.7Q93.6 137.5 92.3 138.5' stroke='%23ffffff' stroke-opacity='0.42'/%3E%3Cpath d='M40.8 132.5Q40.1 129.0 37.9 126.3' stroke='%23ffffff' stroke-opacity='0.31'/%3E%3Cpath d='M158.6 153.2Q162.6 151.5 165.5 148.2' stroke='%23ffffff' stroke-opacity='0.56'/%3E%3Cpath d='M85.5 90.2Q87.1 90.4 88.7 91.0' stroke='%23ffffff' stroke-opacity='0.35'/%3E%3Cpath d='M12.2 22.6Q14.3 19.0 14.3 14.9' stroke='%23ffffff' stroke-opacity='0.42'/%3E%3Cpath d='M38.2 111.8Q40.9 113.0 43.9 112.9' stroke='%23ffffff' stroke-opacity='0.50'/%3E%3Cpath d='M75.6 90.3Q75.9 93.5 75.6 96.7' stroke='%23ffffff' stroke-opacity='0.43'/%3E%3Cpath d='M55.3 62.7Q54.1 65.5 52.1 67.9' stroke='%23ffffff' stroke-opacity='0.44'/%3E%3Cpath d='M117.6 119.9Q113.9 120.1 110.2 120.0' stroke='%23ffffff' stroke-opacity='0.45'/%3E%3Cpath d='M35.7 19.2Q35.1 21.5 34.6 23.7' stroke='%23ffffff' stroke-opacity='0.57'/%3E%3Cpath d='M142.4 35.5Q141.2 32.5 140.4 29.4' stroke='%23ffffff' stroke-opacity='0.34'/%3E%3Cpath d='M78.2 44.5Q77.8 47.0 78.5 49.4' stroke='%23ffffff' stroke-opacity='0.54'/%3E%3Cpath d='M71.3 140.8Q73.0 142.5 74.7 144.1' stroke='%23ffffff' stroke-opacity='0.50'/%3E%3Cpath d='M129.6 16.8Q131.2 16.4 132.8 16.4' stroke='%23ffffff' stroke-opacity='0.32'/%3E%3Cpath d='M154.2 58.5Q155.7 58.2 157.2 58.2' stroke='%23ffffff' stroke-opacity='0.50'/%3E%3Cpath d='M49.7 104.2Q51.1 108.5 53.9 112.0' stroke='%23ffffff' stroke-opacity='0.42'/%3E%3Cpath d='M102.8 131.4Q101.2 132.4 99.3 132.5' stroke='%23ffffff' stroke-opacity='0.57'/%3E%3Cpath d='M126.8 9.5Q126.3 7.5 125.1 6.0' stroke='%23ffffff' stroke-opacity='0.43'/%3E%3Cpath d='M134.9 152.0Q131.9 154.0 129.6 156.8' stroke='%23ffffff' stroke-opacity='0.56'/%3E%3Cpath d='M152.9 133.0Q152.4 135.9 151.3 138.6' stroke='%23ffffff' stroke-opacity='0.52'/%3E%3Cpath d='M49.9 80.7Q47.6 83.4 44.9 85.5' stroke='%23ffffff' stroke-opacity='0.45'/%3E%3Cpath d='M121.3 154.3Q117.5 154.0 113.8 155.0' stroke='%23ffffff' stroke-opacity='0.49'/%3E%3Cpath d='M116.0 36.5Q112.8 34.0 109.3 31.8' stroke='%23ffffff' stroke-opacity='0.46'/%3E%3Cpath d='M77.7 131.6Q73.7 130.9 69.8 131.7' stroke='%23ffffff' stroke-opacity='0.55'/%3E%3Cpath d='M116.7 137.1Q113.3 139.8 111.0 143.5' stroke='%23ffffff' stroke-opacity='0.43'/%3E%3Cpath d='M74.8 25.3Q74.0 22.7 72.2 20.6' stroke='%23ffffff' stroke-opacity='0.57'/%3E%3Cpath d='M137.9 131.5Q138.7 135.2 141.2 138.1' stroke='%23ffffff' stroke-opacity='0.49'/%3E%3Cpath d='M108.4 55.2Q105.5 55.6 103.0 57.1' stroke='%23ffffff' stroke-opacity='0.60'/%3E%3Cpath d='M144.3 39.6Q141.2 40.0 138.6 41.6' stroke='%23ffffff' stroke-opacity='0.40'/%3E%3C/svg%3E") 0 0 / calc(var(--pt) * 160) auto,
    linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0) 32%,
      rgba(143, 166, 203, 0.12) 50%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.35) 80%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(150deg, #eef3fa, #e3ebf6 55%, #d9e3f1);
}
.back.paper-laid {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--pt) * 14), rgba(138, 118, 80, 0.07) calc(var(--pt) * 14) calc(var(--pt) * 14.8), transparent calc(var(--pt) * 14.8) calc(var(--pt) * 28)),
    repeating-linear-gradient(180deg, rgba(138, 118, 80, 0.07) 0 calc(var(--pt) * 0.5), transparent calc(var(--pt) * 0.5) calc(var(--pt) * 1.8)),
    linear-gradient(150deg, #fbf6e8, #f5edd7 55%, #eee4ca);
}
.back.paper-kraft {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke-width='0.6' stroke-linecap='round'%3E%3Cpath d='M29.1 74.0Q28.9 75.1 29.7 76.0' stroke='%236b4f2e' stroke-opacity='0.32'/%3E%3Cpath d='M89.2 132.4Q88.4 130.6 87.1 129.1' stroke='%236b4f2e' stroke-opacity='0.39'/%3E%3Cpath d='M99.4 138.6Q101.5 138.1 103.4 139.0' stroke='%236b4f2e' stroke-opacity='0.29'/%3E%3Cpath d='M15.5 133.2Q17.3 134.1 18.2 135.9' stroke='%236b4f2e' stroke-opacity='0.24'/%3E%3Cpath d='M121.4 36.4Q122.0 35.9 122.1 35.1' stroke='%236b4f2e' stroke-opacity='0.22'/%3E%3Cpath d='M57.9 50.4Q57.6 49.4 56.7 49.0' stroke='%236b4f2e' stroke-opacity='0.37'/%3E%3Cpath d='M15.9 70.5Q15.0 71.4 13.8 72.1' stroke='%236b4f2e' stroke-opacity='0.39'/%3E%3Cpath d='M18.7 138.6Q18.7 139.6 19.4 140.3' stroke='%236b4f2e' stroke-opacity='0.31'/%3E%3Cpath d='M137.1 43.1Q138.8 42.4 139.5 40.7' stroke='%236b4f2e' stroke-opacity='0.32'/%3E%3Cpath d='M21.2 29.6Q20.4 29.7 19.9 30.2' stroke='%236b4f2e' stroke-opacity='0.30'/%3E%3Cpath d='M107.3 35.5Q106.8 37.4 107.9 39.1' stroke='%236b4f2e' stroke-opacity='0.37'/%3E%3Cpath d='M59.0 85.5Q60.9 83.9 63.4 84.2' stroke='%236b4f2e' stroke-opacity='0.39'/%3E%3Cpath d='M99.9 26.6Q100.2 27.9 100.8 29.2' stroke='%236b4f2e' stroke-opacity='0.30'/%3E%3Cpath d='M122.9 113.0Q123.7 111.1 125.6 110.4' stroke='%236b4f2e' stroke-opacity='0.27'/%3E%3Cpath d='M113.2 103.2Q115.5 103.0 117.7 102.3' stroke='%236b4f2e' stroke-opacity='0.22'/%3E%3Cpath d='M126.8 12.0Q126.5 13.5 127.1 15.0' stroke='%236b4f2e' stroke-opacity='0.38'/%3E%3Cpath d='M47.1 137.0Q49.2 135.2 51.9 135.8' stroke='%236b4f2e' stroke-opacity='0.25'/%3E%3Cpath d='M38.6 86.3Q38.2 87.2 38.6 88.1' stroke='%236b4f2e' stroke-opacity='0.32'/%3E%3Cpath d='M7.5 35.1Q7.8 36.4 7.4 37.6' stroke='%236b4f2e' stroke-opacity='0.26'/%3E%3Cpath d='M0.3 100.5Q-1.2 101.8 -3.2 102.4' stroke='%236b4f2e' stroke-opacity='0.40'/%3E%3Cpath d='M50.6 69.2Q49.4 70.5 48.0 71.6' stroke='%236b4f2e' stroke-opacity='0.36'/%3E%3Cpath d='M7.9 122.2Q8.0 124.3 6.6 125.9' stroke='%236b4f2e' stroke-opacity='0.26'/%3E%3Cpath d='M74.2 129.1Q74.5 130.7 74.6 132.4' stroke='%236b4f2e' stroke-opacity='0.21'/%3E%3Cpath d='M30.3 87.8Q30.6 86.6 31.2 85.6' stroke='%236b4f2e' stroke-opacity='0.23'/%3E%3Cpath d='M15.7 9.5Q13.9 10.6 11.8 10.8' stroke='%236b4f2e' stroke-opacity='0.34'/%3E%3Cpath d='M31.8 97.4Q31.9 95.8 30.8 94.6' stroke='%236b4f2e' stroke-opacity='0.35'/%3E%3Cpath d='M60.6 18.9Q61.6 17.5 62.6 16.1' stroke='%236b4f2e' stroke-opacity='0.27'/%3E%3Cpath d='M35.4 7.9Q34.6 6.9 34.2 5.7' stroke='%236b4f2e' stroke-opacity='0.27'/%3E%3Cpath d='M123.1 72.1Q124.1 71.1 125.5 71.0' stroke='%236b4f2e' stroke-opacity='0.33'/%3E%3Cpath d='M90.1 57.0Q88.9 57.7 87.6 57.6' stroke='%236b4f2e' stroke-opacity='0.28'/%3E%3Cpath d='M48.4 73.5Q47.4 72.0 46.1 70.7' stroke='%236b4f2e' stroke-opacity='0.34'/%3E%3Cpath d='M127.7 53.7Q126.7 55.5 125.3 57.1' stroke='%236b4f2e' stroke-opacity='0.29'/%3E%3Cpath d='M118.6 64.1Q116.8 64.0 115.6 62.8' stroke='%236b4f2e' stroke-opacity='0.31'/%3E%3Cpath d='M73.8 127.3Q73.1 127.7 72.6 128.4' stroke='%236b4f2e' stroke-opacity='0.33'/%3E%3Cpath d='M116.8 138.3Q114.9 139.9 112.8 141.3' stroke='%236b4f2e' stroke-opacity='0.22'/%3E%3Cpath d='M34.5 63.0Q33.4 64.9 33.5 67.1' stroke='%236b4f2e' stroke-opacity='0.35'/%3E%3Cpath d='M66.0 23.5Q68.3 24.3 70.5 23.2' stroke='%236b4f2e' stroke-opacity='0.32'/%3E%3Cpath d='M17.3 32.7Q15.5 33.6 15.1 35.5' stroke='%236b4f2e' stroke-opacity='0.36'/%3E%3Cpath d='M12.7 130.5Q13.2 128.9 13.7 127.3' stroke='%236b4f2e' stroke-opacity='0.30'/%3E%3Cpath d='M14.4 12.6Q14.1 15.0 12.3 16.5' stroke='%236b4f2e' stroke-opacity='0.36'/%3E%3Cpath d='M47.6 23.7Q49.3 23.4 50.7 22.3' stroke='%236b4f2e' stroke-opacity='0.28'/%3E%3Cpath d='M83.1 119.6Q82.4 120.0 81.8 120.5' stroke='%236b4f2e' stroke-opacity='0.28'/%3E%3Cpath d='M35.7 115.9Q35.6 113.9 34.1 112.5' stroke='%236b4f2e' stroke-opacity='0.21'/%3E%3Cpath d='M138.8 134.1Q141.2 133.4 142.6 131.3' stroke='%236b4f2e' stroke-opacity='0.38'/%3E%3Cpath d='M74.8 79.0Q75.6 78.9 76.4 79.4' stroke='%236b4f2e' stroke-opacity='0.23'/%3E%3Cpath d='M10.7 19.8Q12.2 17.9 11.8 15.5' stroke='%236b4f2e' stroke-opacity='0.28'/%3E%3Cpath d='M33.4 97.8Q34.8 98.7 36.5 98.4' stroke='%236b4f2e' stroke-opacity='0.34'/%3E%3Cpath d='M66.2 79.0Q66.4 80.7 66.2 82.5' stroke='%236b4f2e' stroke-opacity='0.29'/%3E%3Cpath d='M48.4 54.9Q47.9 56.5 46.7 57.7' stroke='%236b4f2e' stroke-opacity='0.29'/%3E%3Cpath d='M102.9 104.9Q100.9 105.0 98.9 105.0' stroke='%236b4f2e' stroke-opacity='0.30'/%3E%3Cpath d='M31.3 16.8Q30.9 18.0 30.7 19.2' stroke='%236b4f2e' stroke-opacity='0.38'/%3E%3Cpath d='M124.6 31.1Q123.9 29.4 123.5 27.7' stroke='%236b4f2e' stroke-opacity='0.23'/%3E%3Cpath d='M68.4 39.0Q68.0 40.3 68.6 41.6' stroke='%236b4f2e' stroke-opacity='0.36'/%3E%3Cpath d='M62.4 123.2Q63.3 124.1 64.2 125.0' stroke='%236b4f2e' stroke-opacity='0.34'/%3E%3Cpath d='M113.4 14.7Q114.2 14.4 115.0 14.5' stroke='%236b4f2e' stroke-opacity='0.21'/%3E%3Cpath d='M134.9 51.2Q135.7 51.0 136.4 51.0' stroke='%236b4f2e' stroke-opacity='0.34'/%3E%3Cpath d='M43.5 91.2Q44.0 93.7 45.8 95.5' stroke='%236b4f2e' stroke-opacity='0.28'/%3E%3Cpath d='M89.9 115.0Q89.2 115.6 88.2 115.5' stroke='%236b4f2e' stroke-opacity='0.38'/%3E%3Cpath d='M111.0 8.3Q110.8 7.2 110.1 6.5' stroke='%236b4f2e' stroke-opacity='0.28'/%3E%3Cpath d='M118.0 133.0Q116.3 134.0 115.1 135.6' stroke='%236b4f2e' stroke-opacity='0.37'/%3E%3Cpath d='M133.8 116.4Q133.7 118.0 132.9 119.4' stroke='%236b4f2e' stroke-opacity='0.34'/%3E%3Cpath d='M43.6 70.6Q42.5 72.2 40.9 73.3' stroke='%236b4f2e' stroke-opacity='0.30'/%3E%3Cpath d='M106.1 135.0Q104.0 134.6 102.0 135.4' stroke='%236b4f2e' stroke-opacity='0.33'/%3E%3Cpath d='M101.5 32.0Q99.7 30.5 97.8 29.3' stroke='%236b4f2e' stroke-opacity='0.31'/%3E%3Cpath d='M68.0 115.1Q65.8 114.5 63.6 115.2' stroke='%236b4f2e' stroke-opacity='0.37'/%3E%3Cpath d='M102.1 120.0Q100.0 121.3 99.0 123.5' stroke='%236b4f2e' stroke-opacity='0.29'/%3E%3Cpath d='M65.4 22.2Q65.2 20.6 64.0 19.6' stroke='%236b4f2e' stroke-opacity='0.38'/%3E%3Cpath d='M120.6 115.0Q120.8 117.2 122.4 118.7' stroke='%236b4f2e' stroke-opacity='0.32'/%3E%3Cpath d='M94.9 48.3Q93.2 48.3 92.0 49.3' stroke='%236b4f2e' stroke-opacity='0.40'/%3E%3Cpath d='M126.3 34.6Q124.5 34.6 123.2 35.7' stroke='%236b4f2e' stroke-opacity='0.27'/%3E%3Cpath d='M30.6 25.4Q30.9 24.1 31.0 22.7' stroke='%236b4f2e' stroke-opacity='0.20'/%3E%3Cpath d='M1.4 39.6Q0.0 40.4 -1.1 41.5' stroke='%236b4f2e' stroke-opacity='0.38'/%3E%3Cpath d='M84.8 46.8Q85.9 46.9 86.9 47.3' stroke='%236b4f2e' stroke-opacity='0.22'/%3E%3Cpath d='M111.3 99.3Q111.5 101.1 113.2 102.1' stroke='%236b4f2e' stroke-opacity='0.21'/%3E%3Cpath d='M71.8 29.1Q71.4 27.2 70.6 25.4' stroke='%236b4f2e' stroke-opacity='0.26'/%3E%3Cpath d='M115.0 90.8Q115.7 91.6 116.7 91.9' stroke='%236b4f2e' stroke-opacity='0.30'/%3E%3Cpath d='M62.4 22.9Q62.9 25.4 64.9 27.1' stroke='%236b4f2e' stroke-opacity='0.40'/%3E%3Cpath d='M110.5 139.4Q111.0 138.2 111.1 136.8' stroke='%236b4f2e' stroke-opacity='0.36'/%3E%3Cpath d='M61.8 87.7Q63.1 86.4 64.8 85.9' stroke='%236b4f2e' stroke-opacity='0.24'/%3E%3Cpath d='M63.7 115.2Q62.7 114.4 61.4 114.7' stroke='%236b4f2e' stroke-opacity='0.38'/%3E%3Cpath d='M30.1 3.1Q31.2 2.7 32.2 2.0' stroke='%236b4f2e' stroke-opacity='0.36'/%3E%3Cpath d='M107.6 15.6Q108.2 17.3 109.2 18.6' stroke='%236b4f2e' stroke-opacity='0.20'/%3E%3Cpath d='M49.0 11.1Q48.7 13.7 46.9 15.6' stroke='%236b4f2e' stroke-opacity='0.28'/%3E%3Cpath d='M138.9 2.1Q139.5 1.5 140.3 1.5' stroke='%236b4f2e' stroke-opacity='0.26'/%3E%3Cpath d='M119.2 62.3Q120.3 61.8 121.5 61.9' stroke='%236b4f2e' stroke-opacity='0.28'/%3E%3Cpath d='M139.5 131.5Q137.8 130.2 135.8 129.2' stroke='%236b4f2e' stroke-opacity='0.21'/%3E%3Cpath d='M101.2 37.5Q101.2 38.7 102.1 39.4' stroke='%236b4f2e' stroke-opacity='0.40'/%3E%3Cpath d='M55.5 55.8Q56.5 57.3 58.2 58.0' stroke='%236b4f2e' stroke-opacity='0.39'/%3E%3Cpath d='M39.9 7.8Q38.5 8.0 37.6 9.1' stroke='%236b4f2e' stroke-opacity='0.40'/%3E%3Cpath d='M67.3 35.0Q66.1 33.0 63.9 32.3' stroke='%236b4f2e' stroke-opacity='0.20'/%3E%3Cpath d='M67.7 117.4Q66.7 119.8 64.5 121.2' stroke='%236b4f2e' stroke-opacity='0.35'/%3E%3Cpath d='M25.0 120.8Q25.6 118.9 27.1 117.4' stroke='%236b4f2e' stroke-opacity='0.25'/%3E%3Cpath d='M49.7 110.6Q52.1 111.0 53.9 112.7' stroke='%236b4f2e' stroke-opacity='0.35'/%3E%3Cpath d='M25.8 123.8Q23.4 123.8 21.3 122.6' stroke='%236b4f2e' stroke-opacity='0.31'/%3E%3Cpath d='M50.2 109.3Q48.1 109.4 46.4 110.6' stroke='%236b4f2e' stroke-opacity='0.34'/%3E%3Cpath d='M101.2 99.4Q100.0 98.2 98.8 97.0' stroke='%236b4f2e' stroke-opacity='0.21'/%3E%3Cpath d='M9.8 87.3Q10.3 85.9 9.9 84.3' stroke='%236b4f2e' stroke-opacity='0.39'/%3E%3Cpath d='M127.6 10.5Q126.3 8.7 126.7 6.4' stroke='%236b4f2e' stroke-opacity='0.22'/%3E%3Cpath d='M116.7 12.1Q115.4 13.0 113.9 13.6' stroke='%236b4f2e' stroke-opacity='0.32'/%3E%3Cpath d='M2.5 67.6Q3.2 68.4 3.5 69.4' stroke='%236b4f2e' stroke-opacity='0.29'/%3E%3Cpath d='M114.2 100.7Q114.4 99.9 115.2 99.5' stroke='%236b4f2e' stroke-opacity='0.38'/%3E%3Cpath d='M7.5 92.4Q6.6 91.3 6.0 89.9' stroke='%236b4f2e' stroke-opacity='0.36'/%3E%3Cpath d='M88.8 5.8Q90.1 7.3 90.1 9.3' stroke='%236b4f2e' stroke-opacity='0.36'/%3E%3Cpath d='M136.6 126.8Q137.6 128.2 138.7 129.5' stroke='%236b4f2e' stroke-opacity='0.31'/%3E%3Cpath d='M134.0 113.1Q131.7 114.1 130.3 116.2' stroke='%236b4f2e' stroke-opacity='0.32'/%3E%3Cpath d='M79.6 37.5Q78.9 38.1 78.0 38.6' stroke='%236b4f2e' stroke-opacity='0.35'/%3E%3Cpath d='M114.9 54.1Q116.2 54.9 116.9 56.2' stroke='%236b4f2e' stroke-opacity='0.22'/%3E%3Cpath d='M34.2 26.6Q34.7 24.6 36.1 23.2' stroke='%236b4f2e' stroke-opacity='0.23'/%3E%3Cpath d='M38.7 27.2Q37.9 28.5 36.7 29.2' stroke='%236b4f2e' stroke-opacity='0.38'/%3E%3Cpath d='M27.6 55.8Q29.9 56.4 32.2 57.3' stroke='%236b4f2e' stroke-opacity='0.27'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke-width='0.6' stroke-linecap='round'%3E%3Cpath d='M101.1 21.5Q101.3 22.5 101.3 23.4' stroke='%23f4e4c4' stroke-opacity='0.29'/%3E%3Cpath d='M121.0 103.2Q119.1 102.6 117.6 101.2' stroke='%23f4e4c4' stroke-opacity='0.31'/%3E%3Cpath d='M125.5 137.9Q125.2 136.6 125.8 135.4' stroke='%23f4e4c4' stroke-opacity='0.32'/%3E%3Cpath d='M26.2 128.9Q26.3 128.0 26.6 127.1' stroke='%23f4e4c4' stroke-opacity='0.52'/%3E%3Cpath d='M2.9 39.0Q3.8 40.3 4.7 41.5' stroke='%23f4e4c4' stroke-opacity='0.45'/%3E%3Cpath d='M74.5 49.2Q75.3 49.1 76.2 49.2' stroke='%23f4e4c4' stroke-opacity='0.33'/%3E%3Cpath d='M78.0 73.2Q76.5 73.9 74.9 73.8' stroke='%23f4e4c4' stroke-opacity='0.33'/%3E%3Cpath d='M130.2 87.8Q130.3 88.8 130.6 89.7' stroke='%23f4e4c4' stroke-opacity='0.42'/%3E%3Cpath d='M113.1 86.8Q112.3 85.8 111.1 85.5' stroke='%23f4e4c4' stroke-opacity='0.34'/%3E%3Cpath d='M6.1 21.5Q4.9 21.3 4.2 20.4' stroke='%23f4e4c4' stroke-opacity='0.36'/%3E%3Cpath d='M31.1 2.0Q32.2 3.3 33.9 3.5' stroke='%23f4e4c4' stroke-opacity='0.54'/%3E%3Cpath d='M73.7 16.5Q72.5 15.1 72.8 13.3' stroke='%23f4e4c4' stroke-opacity='0.36'/%3E%3Cpath d='M87.9 113.7Q88.4 112.4 89.1 111.1' stroke='%23f4e4c4' stroke-opacity='0.46'/%3E%3Cpath d='M94.2 47.5Q95.2 45.9 95.5 44.1' stroke='%23f4e4c4' stroke-opacity='0.47'/%3E%3Cpath d='M7.0 63.5Q7.1 65.1 6.9 66.7' stroke='%23f4e4c4' stroke-opacity='0.51'/%3E%3Cpath d='M42.0 16.0Q43.9 16.6 45.9 16.3' stroke='%23f4e4c4' stroke-opacity='0.50'/%3E%3Cpath d='M47.2 52.1Q48.6 53.3 49.0 55.1' stroke='%23f4e4c4' stroke-opacity='0.28'/%3E%3Cpath d='M109.0 79.0Q107.8 77.2 108.5 75.2' stroke='%23f4e4c4' stroke-opacity='0.51'/%3E%3Cpath d='M135.7 37.1Q135.7 36.1 135.1 35.4' stroke='%23f4e4c4' stroke-opacity='0.51'/%3E%3Cpath d='M47.1 112.9Q47.8 112.0 48.1 110.9' stroke='%23f4e4c4' stroke-opacity='0.33'/%3E%3Cpath d='M24.2 103.2Q25.0 104.7 26.6 105.1' stroke='%23f4e4c4' stroke-opacity='0.54'/%3E%3Cpath d='M122.4 93.3Q121.8 94.1 121.6 95.1' stroke='%23f4e4c4' stroke-opacity='0.41'/%3E%3Cpath d='M130.8 99.5Q131.4 100.7 132.3 101.5' stroke='%23f4e4c4' stroke-opacity='0.28'/%3E%3Cpath d='M8.6 26.2Q10.1 27.2 10.4 29.0' stroke='%23f4e4c4' stroke-opacity='0.42'/%3E%3Cpath d='M10.8 79.4Q10.8 80.8 11.6 81.9' stroke='%23f4e4c4' stroke-opacity='0.51'/%3E%3Cpath d='M131.8 10.6Q130.7 9.1 129.4 7.8' stroke='%23f4e4c4' stroke-opacity='0.34'/%3E%3Cpath d='M104.6 36.1Q104.1 36.8 103.2 37.0' stroke='%23f4e4c4' stroke-opacity='0.28'/%3E%3Cpath d='M13.3 98.1Q15.0 99.2 16.3 100.6' stroke='%23f4e4c4' stroke-opacity='0.47'/%3E%3Cpath d='M109.0 35.8Q109.8 36.2 110.5 36.8' stroke='%23f4e4c4' stroke-opacity='0.47'/%3E%3Cpath d='M42.9 81.2Q42.0 82.6 40.8 83.8' stroke='%23f4e4c4' stroke-opacity='0.40'/%3E%3Cpath d='M106.2 60.9Q106.3 62.8 106.6 64.7' stroke='%23f4e4c4' stroke-opacity='0.42'/%3E%3Cpath d='M24.3 106.3Q24.7 105.5 24.6 104.6' stroke='%23f4e4c4' stroke-opacity='0.37'/%3E%3Cpath d='M123.7 10.8Q123.8 12.7 124.3 14.4' stroke='%23f4e4c4' stroke-opacity='0.54'/%3E%3Cpath d='M15.9 129.1Q17.0 127.8 16.7 126.0' stroke='%23f4e4c4' stroke-opacity='0.43'/%3E%3Cpath d='M56.4 107.8Q55.5 108.3 55.3 109.2' stroke='%23f4e4c4' stroke-opacity='0.53'/%3E%3Cpath d='M7.9 1.7Q8.2 0.7 8.1 -0.4' stroke='%23f4e4c4' stroke-opacity='0.52'/%3E%3Cpath d='M24.7 48.3Q26.8 48.5 28.4 47.0' stroke='%23f4e4c4' stroke-opacity='0.40'/%3E%3Cpath d='M124.4 5.9Q123.7 5.6 122.9 5.9' stroke='%23f4e4c4' stroke-opacity='0.36'/%3E%3Cpath d='M78.1 75.9Q78.9 76.2 79.7 76.4' stroke='%23f4e4c4' stroke-opacity='0.51'/%3E%3Cpath d='M59.3 31.4Q58.1 32.3 58.1 33.7' stroke='%23f4e4c4' stroke-opacity='0.51'/%3E%3Cpath d='M109.6 128.5Q108.5 129.7 107.2 130.6' stroke='%23f4e4c4' stroke-opacity='0.52'/%3E%3Cpath d='M121.2 33.2Q121.9 33.7 122.6 34.3' stroke='%23f4e4c4' stroke-opacity='0.36'/%3E%3Cpath d='M92.9 121.9Q92.9 122.7 92.7 123.6' stroke='%23f4e4c4' stroke-opacity='0.53'/%3E%3Cpath d='M34.5 82.3Q33.2 82.3 32.3 83.3' stroke='%23f4e4c4' stroke-opacity='0.48'/%3E%3Cpath d='M53.4 98.9Q52.2 98.1 51.5 96.8' stroke='%23f4e4c4' stroke-opacity='0.43'/%3E%3Cpath d='M26.8 25.4Q26.5 27.2 27.7 28.4' stroke='%23f4e4c4' stroke-opacity='0.48'/%3E%3Cpath d='M114.9 74.1Q114.8 74.8 114.9 75.6' stroke='%23f4e4c4' stroke-opacity='0.28'/%3E%3Cpath d='M14.8 40.5Q16.2 39.9 16.8 38.5' stroke='%23f4e4c4' stroke-opacity='0.37'/%3E%3Cpath d='M3.9 87.2Q3.4 86.5 3.0 85.7' stroke='%23f4e4c4' stroke-opacity='0.45'/%3E%3Cpath d='M109.7 82.1Q108.2 81.4 106.6 81.2' stroke='%23f4e4c4' stroke-opacity='0.36'/%3E%3C/svg%3E") 0 0 / calc(var(--pt) * 140) auto,
    radial-gradient(circle at 20% 15%, rgba(140, 106, 62, 0.16), transparent 30%),
    radial-gradient(circle at 75% 30%, rgba(240, 217, 174, 0.25), transparent 26%),
    radial-gradient(circle at 42% 60%, rgba(140, 106, 62, 0.16), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(140, 106, 62, 0.16), transparent 28%),
    radial-gradient(circle at 12% 86%, rgba(240, 217, 174, 0.25), transparent 24%),
    linear-gradient(150deg, #d5b788, #c8a673 55%, #bb9762);
}
.back.paper-washi {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke-width='0.8' stroke-linecap='round'%3E%3Cpath d='M45.8 116.2Q38.8 129.1 51.5 136.3' stroke='%23ffffff' stroke-opacity='0.68'/%3E%3Cpath d='M140.2 208.0Q134.7 190.6 121.3 178.3' stroke='%23ffffff' stroke-opacity='0.83'/%3E%3Cpath d='M156.2 217.8Q175.3 207.2 192.1 221.1' stroke='%23ffffff' stroke-opacity='0.63'/%3E%3Cpath d='M24.4 209.4Q45.4 212.4 48.7 233.4' stroke='%23ffffff' stroke-opacity='0.51'/%3E%3Cpath d='M190.8 57.3Q198.7 52.2 197.9 42.8' stroke='%23ffffff' stroke-opacity='0.46'/%3E%3Cpath d='M91.0 79.2Q90.8 66.7 78.5 65.0' stroke='%23ffffff' stroke-opacity='0.78'/%3E%3Cpath d='M25.0 110.8Q17.1 121.1 5.0 126.0' stroke='%23ffffff' stroke-opacity='0.84'/%3E%3Cpath d='M29.4 217.9Q25.9 229.5 36.8 234.7' stroke='%23ffffff' stroke-opacity='0.65'/%3E%3Cpath d='M215.5 67.7Q235.9 65.8 237.5 45.4' stroke='%23ffffff' stroke-opacity='0.67'/%3E%3Cpath d='M33.4 46.5Q23.7 45.0 18.8 53.5' stroke='%23ffffff' stroke-opacity='0.64'/%3E%3Cpath d='M168.6 55.7Q156.1 74.9 174.4 88.6' stroke='%23ffffff' stroke-opacity='0.78'/%3E%3Cpath d='M92.7 134.3Q107.6 112.6 131.7 123.4' stroke='%23ffffff' stroke-opacity='0.82'/%3E%3Cpath d='M156.9 41.8Q158.7 54.9 165.8 66.1' stroke='%23ffffff' stroke-opacity='0.64'/%3E%3Cpath d='M193.1 177.6Q195.4 155.7 217.4 154.1' stroke='%23ffffff' stroke-opacity='0.58'/%3E%3Cpath d='M177.9 162.2Q198.7 162.1 218.0 154.2' stroke='%23ffffff' stroke-opacity='0.47'/%3E%3Cpath d='M199.3 18.8Q192.7 33.8 202.4 47.0' stroke='%23ffffff' stroke-opacity='0.82'/%3E%3Cpath d='M73.9 215.3Q89.9 189.1 116.3 204.9' stroke='%23ffffff' stroke-opacity='0.52'/%3E%3Cpath d='M60.7 135.7Q52.9 144.8 60.5 154.1' stroke='%23ffffff' stroke-opacity='0.68'/%3E%3Cpath d='M11.8 55.1Q18.3 67.4 11.0 79.3' stroke='%23ffffff' stroke-opacity='0.56'/%3E%3Cpath d='M0.5 157.8Q-11.3 174.1 -31.4 175.2' stroke='%23ffffff' stroke-opacity='0.85'/%3E%3Cpath d='M79.5 108.7Q69.3 121.4 56.3 131.2' stroke='%23ffffff' stroke-opacity='0.78'/%3E%3Cpath d='M12.4 192.0Q19.3 213.4 0.4 225.8' stroke='%23ffffff' stroke-opacity='0.55'/%3E%3Cpath d='M116.6 202.9Q119.7 217.8 120.6 232.9' stroke='%23ffffff' stroke-opacity='0.44'/%3E%3Cpath d='M47.6 137.9Q48.3 125.9 56.4 116.9' stroke='%23ffffff' stroke-opacity='0.50'/%3E%3Cpath d='M24.6 14.9Q10.2 30.0 -10.3 26.2' stroke='%23ffffff' stroke-opacity='0.73'/%3E%3Cpath d='M50.0 153.1Q55.8 136.2 40.5 126.9' stroke='%23ffffff' stroke-opacity='0.74'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke-width='0.5' stroke-linecap='round'%3E%3Cpath d='M51.9 91.1Q53.9 97.8 51.6 104.5' stroke='%23c2b396' stroke-opacity='0.33'/%3E%3Cpath d='M20.1 116.3Q12.6 110.2 4.8 115.8' stroke='%23c2b396' stroke-opacity='0.22'/%3E%3Cpath d='M157.8 135.5Q146.5 139.0 137.1 131.9' stroke='%23c2b396' stroke-opacity='0.32'/%3E%3Cpath d='M58.0 56.1Q59.2 39.6 68.9 26.3' stroke='%23c2b396' stroke-opacity='0.35'/%3E%3Cpath d='M38.2 205.1Q47.1 213.6 57.1 220.6' stroke='%23c2b396' stroke-opacity='0.20'/%3E%3Cpath d='M62.8 75.3Q47.0 77.0 44.0 92.6' stroke='%23c2b396' stroke-opacity='0.28'/%3E%3Cpath d='M0.1 119.3Q-7.0 113.0 -16.5 114.3' stroke='%23c2b396' stroke-opacity='0.19'/%3E%3Cpath d='M79.6 197.7Q79.1 186.4 67.8 186.7' stroke='%23c2b396' stroke-opacity='0.21'/%3E%3Cpath d='M0.4 205.0Q4.7 197.5 13.2 199.3' stroke='%23c2b396' stroke-opacity='0.34'/%3E%3Cpath d='M66.0 101.2Q81.0 106.0 90.3 118.7' stroke='%23c2b396' stroke-opacity='0.30'/%3E%3Cpath d='M149.2 170.7Q138.7 172.5 133.2 163.3' stroke='%23c2b396' stroke-opacity='0.25'/%3E%3Cpath d='M138.8 217.8Q149.6 205.9 151.7 190.0' stroke='%23c2b396' stroke-opacity='0.29'/%3E%3Cpath d='M199.7 15.2Q213.9 15.3 222.4 26.8' stroke='%23c2b396' stroke-opacity='0.21'/%3E%3Cpath d='M103.0 111.5Q104.1 104.9 102.0 98.6' stroke='%23c2b396' stroke-opacity='0.25'/%3E%3Cpath d='M64.0 37.2Q79.6 44.9 77.4 62.1' stroke='%23c2b396' stroke-opacity='0.28'/%3E%3Cpath d='M72.5 31.5Q80.8 37.9 83.3 48.0' stroke='%23c2b396' stroke-opacity='0.18'/%3E%3Cpath d='M154.8 88.2Q148.7 72.7 152.6 56.5' stroke='%23c2b396' stroke-opacity='0.21'/%3E%3Cpath d='M142.1 112.7Q155.0 123.3 148.5 138.7' stroke='%23c2b396' stroke-opacity='0.19'/%3E%3Cpath d='M194.8 141.6Q195.6 132.8 195.6 124.0' stroke='%23c2b396' stroke-opacity='0.18'/%3E%3Cpath d='M67.3 57.1Q55.0 57.1 50.5 45.7' stroke='%23c2b396' stroke-opacity='0.18'/%3E%3Cpath d='M77.0 135.4Q85.7 122.5 93.8 109.2' stroke='%23c2b396' stroke-opacity='0.19'/%3E%3Cpath d='M12.5 101.2Q11.5 107.0 7.7 111.5' stroke='%23c2b396' stroke-opacity='0.18'/%3E%3C/svg%3E") 0 0 / calc(var(--pt) * 220) auto,
    linear-gradient(150deg, #f9f6ef, #f3eee3 55%, #ece5d6);
}
.paper-mark {
  position: absolute;
  top: -40%; left: -60%;
  width: 240%;
  height: 180%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pt) * 22);
  transform: rotate(-30deg);
  color: rgba(201, 169, 100, 0.2);
  font: 700 calc(var(--pt) * 10)/1 var(--f-display);
  letter-spacing: 0.26em;
  pointer-events: none;
}
.paper-mark > span { display: flex; gap: calc(var(--pt) * 58); white-space: nowrap; }
.paper-mark > span:nth-child(odd) { padding-left: calc(var(--pt) * 60); }
.back-mark { display: none; }
.letter {
  --hand-size: calc(var(--pt) * 14);
  --hand-lh: 2.05;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  padding: 10% 8.5% 12%;
  color: var(--pen);
  font-family: 'Homemade Apple', cursive;
  font-size: calc(var(--hand-size) * var(--fit, 1));
  line-height: var(--hand-lh);
  overflow-wrap: break-word;
}
.letter p { margin: 0 0 0.2em; }
.letter .sign { margin-top: 0.3em; text-align: right; }
.hand-apple { font-family: 'Homemade Apple', cursive; }
.hand-caveat { --hand-size: calc(var(--pt) * 24); --hand-lh: 1.4; font-family: 'Caveat', cursive; }
.hand-patrick { --hand-size: calc(var(--pt) * 19); --hand-lh: 1.55; font-family: 'Patrick Hand', cursive; }
.hand-shadows { --hand-size: calc(var(--pt) * 20); --hand-lh: 1.45; font-family: 'Shadows Into Light', cursive; }
.hand-reenie { --hand-size: calc(var(--pt) * 25); --hand-lh: 1.25; font-family: 'Reenie Beanie', cursive; }
.hand-elite { --hand-size: calc(var(--pt) * 16); --hand-lh: 1.6; font-family: 'Special Elite', monospace; }
.hand-courier { --hand-size: calc(var(--pt) * 16); --hand-lh: 1.6; font-family: 'Courier Prime', monospace; }
.back-stamps {
  float: right;
  display: flex;
  gap: 4px;
  margin: -2% -2% 4px 10px;
  transform: rotate(4deg);
}
.stamp { display: block; width: calc(var(--pt) * 40); height: calc(var(--pt) * 49); filter: drop-shadow(0 1px 1px rgba(22, 24, 29, 0.25)); }
/* Stamps the sender placed on the back: x and y are the stamp's centre (set by the script). */
.back-stamps.placed {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  float: none;
  display: block;
  margin: 0;
  transform: none;
  pointer-events: none;
}
.back-stamps.placed .stamp {
  position: absolute;
  width: calc(var(--pt) * 54);
  height: calc(var(--pt) * 64);
  transform: translate(-50%, -50%) rotate(var(--turn, 0deg)) scale(var(--size, 1));
}
/* Event and theme stamps are square: the picture fills them, with no name underneath. */
.stamp.stamp-square { height: calc(var(--pt) * 40); }
.back-stamps.placed .stamp.stamp-square { height: calc(var(--pt) * 54); }
.env-stamp .stamp.stamp-square { height: 2.9em; }
/* Text boxes the sender placed: --box is the width as a share of the back, --type the size. */
/* Postcard and letter layouts: the printed parts under the writing, drawn by the script in card
   points, as in the app (LayoutPlan). */
.back-layout { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.back-layout svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.back-layout .addr {
  position: absolute;
  margin: 0;
  overflow: hidden;
  font-size: calc(var(--pt) * var(--type));
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: clip;
}
.boxes, .places {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
}
.places { z-index: 1; }
.letter.boxed #message, .letter.boxed .sign { display: none; }
.tbox {
  position: absolute;
  width: calc(var(--pw) * var(--box));
  margin: 0;
  padding: calc(var(--pt) * 6);
  box-sizing: content-box;
  transform: translateX(-50%) rotate(var(--turn, 0deg));
  transform-origin: 50% 50%;
  font-size: calc(var(--pt) * var(--type));
  line-height: normal;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
/* Location stamps: a rubber-stamp impression in the card's ink, slightly see-through. */
.place {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--ink);
  opacity: 0.86;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(var(--turn, 0deg)) scale(var(--size, 1));
  text-align: center;
}
.place-round {
  width: calc(var(--pt) * 74);
  height: calc(var(--pt) * 74);
  gap: calc(var(--pt) * 2);
  border: calc(var(--pt) * 2.2) solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--pt) * 3.5) transparent, inset 0 0 0 calc(var(--pt) * 4.4) var(--ink);
}
.place-box {
  width: calc(var(--pt) * 82);
  height: calc(var(--pt) * 40);
  border: calc(var(--pt) * 1.8) solid var(--ink);
  border-radius: 2px;
  box-shadow: inset 0 0 0 calc(var(--pt) * 2.3) transparent, inset 0 0 0 calc(var(--pt) * 3) var(--ink);
}
.place-name {
  max-width: calc(var(--pt) * 52);
  font: 700 calc(var(--pt) * var(--name))/1.1 var(--f-mono);
  overflow-wrap: anywhere;
}
.place-triangle {
  width: calc(var(--pt) * 92);
  height: calc(var(--pt) * 82);
  padding-top: calc(var(--pt) * 26);
  gap: calc(var(--pt) * 1.5);
}
.place-oval {
  width: calc(var(--pt) * 100);
  height: calc(var(--pt) * 60);
  border: calc(var(--pt) * 1.8) solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--pt) * 3.3) transparent, inset 0 0 0 calc(var(--pt) * 4) var(--ink);
}
.place-hexagon { width: calc(var(--pt) * 80); height: calc(var(--pt) * 72); gap: calc(var(--pt) * 2); }
.place-outline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-linejoin: round; overflow: visible; }
.place-box .place-name,
.place-oval .place-name { max-width: none; font-family: var(--f-display); white-space: nowrap; }
.place-triangle .place-name { max-width: calc(var(--pt) * 44); }
.place-hexagon .place-name { max-width: calc(var(--pt) * 50); }
.place i { display: block; width: calc(var(--pt) * 34); height: calc(var(--pt) * 0.9); background: var(--ink); }
.place-date { font: 700 calc(var(--pt) * 7)/1 var(--f-mono); letter-spacing: 0.04em; }
/* The sender's ink drawing, over the back. */
.ink {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.back-mark {
  position: absolute;
  right: 5%;
  bottom: 3.5%;
  font: 400 calc(var(--pt) * 9)/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-dark);
}

/* The envelope. Sizes are in em so the whole envelope scales with its width. */

.envelope {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: var(--ew);
  height: calc(var(--ew) * 230 / 340);
  margin: 0 auto;
  font-size: calc(var(--ew) * 16 / 340);
}
/* The two halves fall separately so the photo stays between them while it comes out. */
.envelope.fall > .env-back,
.envelope.fall > .env-front,
.envelope.fall > .seal-side,
.envelope.fall > .aero-flap {
  transform: translateY(12em) rotate(5deg);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.55, 0, 0.85, 0.4), opacity 0.3s ease 0.4s;
}
.env-back {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  border-radius: 5px;
  background: linear-gradient(180deg, #0e1a3d, var(--blue) 18%, #c9d2e8 40%);
  box-shadow: 0 22px 44px rgba(22, 24, 29, 0.28);
}
.env-front {
  position: absolute;
  top: 1.5em; right: 0; bottom: 0; left: 0;
  z-index: 3;
  border-radius: 0 0 5px 5px;
  transform-origin: 50% calc(50% - 0.75em);
  background: repeating-linear-gradient(-45deg, var(--red) 0 12px, var(--white) 12px 18px, var(--blue) 18px 30px, var(--white) 30px 36px);
  clip-path: polygon(0 0.45em, 4% 0, 8% 0.45em, 12% 0, 16% 0.45em, 20% 0, 24% 0.45em, 28% 0, 32% 0.45em, 36% 0, 40% 0.45em, 44% 0, 48% 0.45em, 52% 0, 56% 0.45em, 60% 0, 64% 0.45em, 68% 0, 72% 0.45em, 76% 0, 80% 0.45em, 84% 0, 88% 0.45em, 92% 0, 96% 0.45em, 100% 0, 100% 100%, 0 100%);
}
.env-face {
  position: absolute;
  top: 0.45em; right: 0.45em; bottom: 0.45em; left: 0.45em;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--white), #f3f4f7);
}
.par-avion {
  position: absolute;
  left: 7%;
  top: 20%;
  padding: 0.2em 0.45em;
  border: 1.5px solid var(--red);
  border-radius: 2px;
  font: 700 0.625em/1.3 var(--f-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.env-stamp { position: absolute; right: 7%; top: 9%; transform: rotate(4deg); }
.env-stamp .stamp { width: 2.9em; height: 3.5em; }
.postmark {
  position: absolute;
  right: 6%;
  top: 14%;
  width: 7em;
  height: 4em;
  transform: rotate(-10deg);
  color: rgba(29, 60, 143, 0.75);
  overflow: visible;
}
.postmark text { fill: currentColor; font-family: var(--f-mono); font-weight: 700; }
.pm-city { font-size: 6.5px; letter-spacing: 1px; }
.pm-date { font-size: 8px; }
.pm-year { font-size: 7px; }
/* Their name, written on the envelope by hand. */
.env-to {
  position: absolute;
  left: 9%;
  top: 46%;
  max-width: 84%;
  margin: 0;
  font: 500 2.4em/1 'Caveat', cursive;
  overflow-wrap: anywhere;
  color: var(--blue);
}
.env-love { display: block; margin-top: 0.2em; font: italic 400 0.4375em/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* Kraft, Blush and Midnight, in the app's colours. Airmail is the look above. */
.env-kraft .env-back { background: linear-gradient(180deg, #473826, #5c4a33 40%); }
.env-kraft .env-front { background: repeating-linear-gradient(-45deg, #b8452f 0 12px, #cdb489 12px 18px, #31508f 18px 30px, #cdb489 30px 36px); }
.env-kraft .env-face { background: linear-gradient(135deg, #dbc499, #cdb489 55%, #b0956b); }
.env-kraft .par-avion { border-color: #31508f; color: #31508f; }
.env-kraft .postmark { color: rgba(0, 0, 0, 0.45); }
.env-kraft .env-to, .env-kraft .env-love { color: #403324; }
.env-kraft .strip { --strip-face: linear-gradient(180deg, #dbc499, #cdb489); --strip-back: #c6ab7e; }
.env-kraft .strip-rest span { color: #403324; }

.env-blush .env-back { background: linear-gradient(180deg, #8e3b48, #d98c95 40%); }
.env-blush .env-front { background: linear-gradient(135deg, #f9e3e2, #f1cdcd); }
.env-blush .env-face {
  background: linear-gradient(135deg, #f9e3e2, #f1cdcd);
  border: 1.4px solid rgba(215, 38, 46, 0.75);
  box-shadow: inset 0 0 0 0.25em #f5d8d7, inset 0 0 0 calc(0.25em + 0.8px) rgba(215, 38, 46, 0.35);
}
.env-blush .par-avion { border-color: var(--red); color: var(--red); }
.env-blush .postmark { color: rgba(181, 29, 36, 0.7); }
.env-blush .env-to, .env-blush .env-love { color: var(--red-dark); }
.env-blush .strip { --strip-face: linear-gradient(180deg, #f9e3e2, #f1cdcd); --strip-back: #ead0cf; }
.env-blush .strip-rest span { color: var(--red-dark); }

.env-midnight .env-back { background: linear-gradient(180deg, #0a0e1e, #3b2f12 40%); }
.env-midnight .env-front { background: linear-gradient(135deg, #24305a, #141b36); }
.env-midnight .env-face {
  background: linear-gradient(135deg, #24305a, #141b36);
  border: 1.2px solid rgba(232, 200, 119, 0.8);
  box-shadow: inset 0 0 0 0.25em #1c2647, inset 0 0 0 calc(0.25em + 0.6px) rgba(232, 200, 119, 0.3);
}
.env-midnight .par-avion { border-color: #e8c877; color: #e8c877; }
.env-midnight .postmark { color: rgba(232, 200, 119, 0.75); }
.env-midnight .env-to, .env-midnight .env-love { color: #e8c877; }
.env-midnight .strip { --strip-face: linear-gradient(180deg, #2a3767, #1c2647); --strip-back: #222b52; }
.env-midnight .strip-rest span { color: #e8c877; }
.env-midnight .strip-rest::after { background: radial-gradient(circle, rgba(205, 211, 230, 0.6) 1px, transparent 1.5px) 0 50% / 7px 3px repeat-x; }

/* The wax-seal envelope. It arrives address side up; tapped, it turns over to its back, where the
   flap is sealed with wax. Pressed and held, the seal cracks and breaks in two: the bottom half stays
   on the envelope and the flap lifts with the top half. The same envelope as the app's. */
.envelope { --env-face: linear-gradient(135deg, #ffffff, #f3f4f7); --env-inside: linear-gradient(0deg, #0e1a3d, #1d3c8f 70%); --wax: #d2453a; --wax-deep: #7a1512; --wax-mark: #fbf6ea; --twine: #c63b30; --twine-twist: #fff8f0; --button: #efe6d2; --rivet: #8a7a5c; }
.envelope.env-kraft { --env-face: linear-gradient(135deg, #dbc499, #cdb489 55%, #b0956b); --env-inside: linear-gradient(0deg, #473826, #5c4a33); --wax: #4f8160; --wax-deep: #1c3a27; --twine: #8f6e40; --twine-twist: #d9bf8e; --button: #a8865a; --rivet: #5e4426; }
.envelope.env-blush { --env-face: linear-gradient(135deg, #f9e3e2, #f1cdcd); --env-inside: linear-gradient(0deg, #8e3b48, #d98c95); --wax: #d9788a; --wax-deep: #8c2d45; --twine: #c9566a; --twine-twist: #fff1f1; --button: #f6e6df; }
.envelope.env-midnight { --env-face: linear-gradient(135deg, #24305a, #141b36); --env-inside: linear-gradient(0deg, #0a0e1e, #3b2f12); --wax: #f2d27e; --wax-deep: #8f6a1c; --wax-mark: #8f6a1c; --twine: #d8b45e; --twine-twist: #fff3cf; --button: #c9a964; --rivet: #6e5420; }
.seal-side { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; }
.kind-seal .seal-side { display: block; }
.kind-seal .strip,
.kind-seal .drag-hint { display: none; }
.kind-seal .env-front { top: 0; border-radius: 5px; clip-path: none; box-shadow: 0 22px 44px rgba(22, 24, 29, 0.28); }
.kind-seal:not(.turned) { cursor: pointer; }
.kind-seal:not(.turned) .seal-side { visibility: hidden; }
.kind-seal.turned .env-front { visibility: hidden; }
.kind-seal:not(.broken) .env-back { visibility: hidden; }
.seal-base {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;
  border-radius: 5px;
  background: var(--env-face);
  box-shadow: 0 22px 44px rgba(22, 24, 29, 0.28);
}
.broken .seal-base { visibility: hidden; }
.seal-pocket {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;
  border-radius: 0 0 5px 5px;
  background: var(--env-face);
  clip-path: polygon(0 1.4%, 50% 55%, 100% 1.4%, 100% 100%, 0 100%);
}
.seal-pocket svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.seal-pocket path { vector-effect: non-scaling-stroke; }
.seal-flap {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 4;
  transform-origin: 50% 0;
  transform: perspective(600px) rotateX(var(--fa, 0deg));
  pointer-events: none;
}
.seal-flap.open { z-index: 1; }
.flap-paper,
.flap-edge { position: absolute; top: 0; right: 0; bottom: 0; left: 0; clip-path: polygon(0% 0%, 100% 0%, 93.85% 6.85%, 88.06% 13.39%, 82.62% 19.62%, 77.56% 25.56%, 72.85% 31.18%, 68.5% 36.5%, 64.51% 41.51%, 60.89% 46.22%, 57.62% 50.62%, 54.72% 54.72%, 52.18% 58.51%, 50% 62%, 47.82% 58.51%, 45.28% 54.72%, 42.38% 50.62%, 39.11% 46.22%, 35.49% 41.51%, 31.5% 36.5%, 27.15% 31.18%, 22.44% 25.56%, 17.38% 19.62%, 11.94% 13.39%, 6.15% 6.85%); }
.flap-paper { background: var(--env-face); }
.flap-edge { background: rgba(22, 24, 29, 0.22); transform: translateY(1.5px); }
.seal-flap.open .flap-paper { background: var(--env-inside); }
.seal-flap.open .flap-edge,
.seal-flap.open .wax-top { display: none; }
.wax,
.wax-half {
  position: absolute;
  left: 50%;
  top: 58.2%;
  width: 3.5em;
  height: 3.5em;
  margin: -1.75em 0 0 -1.75em;
}
.wax {
  z-index: 5;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.wax::before { content: ""; position: absolute; top: -0.9em; right: -0.9em; bottom: -0.9em; left: -0.9em; border-radius: 50%; }
.wax svg,
.wax-half svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wax .crack { stroke-dasharray: 100; stroke-dashoffset: var(--crack, 100); transition: stroke-dashoffset 0.25s ease-out; }
.wax:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.broken .wax { display: none; }
.wax-half { display: none; pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(22, 24, 29, 0.18)); }
.broken .wax-half { display: block; }
.wax-bottom { z-index: 5; animation: wax-drop 0.3s cubic-bezier(0.3, 1.6, 0.5, 1) both; }

/* The string tie: two paper buttons riveted to the back, the twine wound round the rivets under
   them in a figure eight, so only the crossing strands and the free end show. Turned over, the
   person traces the eight to unwind it; the script draws the wound part and the free end as they
   change (tiePoint and friends, the same as the app's TieGeometry). Untied, the string falls loose
   from the bottom button and the flap lifts with the top one. */
.tie-art, .tie-loose, .tie-top {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  display: none;
}
.kind-tie .wax, .kind-tie .wax-half { display: none !important; }
.kind-tie:not(.broken) .tie-art { display: block; z-index: 5; }
.kind-tie.broken .tie-loose { display: block; z-index: 5; animation: twine-fall 0.4s ease-out both; }
.kind-tie .seal-flap:not(.open) .tie-top { display: block; }
@keyframes twine-fall { from { opacity: 0; transform: translateY(-4px); } }
.tie-art .twine, .tie-loose .twine { fill: none; stroke: var(--twine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0.8px 0.6px rgba(22, 24, 29, 0.22)); }
.tie-art .twine-twist, .tie-loose .twine-twist { fill: none; stroke: var(--twine-twist); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 2.2 3.4; }
.tie-guide { fill: none; stroke: var(--twine); stroke-opacity: 0.35; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 0.1 5; transition: opacity 0.3s ease; }
.tracing .tie-guide { opacity: 0; }
.tie-button .btn-face { fill: var(--button); stroke: rgba(22, 24, 29, 0.18); stroke-width: 0.8; filter: drop-shadow(0 1px 1.2px rgba(22, 24, 29, 0.22)); }
.tie-button .btn-dip { fill: rgba(0, 0, 0, 0.08); }
.tie-button .btn-rivet { fill: var(--rivet); }
.tie-hit {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 6;
  display: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.kind-tie.turned:not(.broken) .tie-hit { display: block; }
.tie-hit:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 5px; }
@keyframes wax-drop { to { transform: translateY(3px) rotate(7deg); } }

/* The tear strip. The script sets --tx (how far the tear has got), --len and --ang (the torn piece
   folded back at the tear, reaching towards the finger), --lift (how loosely it is held) and
   --curl (the radius of the fold), all from how real paper peels. */
.strip {
  --tx: 0px;
  --len: 0px;
  --ang: 0rad;
  --lift: 0;
  --curl: 6px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  perspective: 700px;
  height: 2em;
  padding: 0;
  border: 0;
  border-radius: 5px 5px 0 0;
  background: none;
  color: inherit;
  font-size: inherit;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.strip::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; bottom: -6px; }
.strip.dragging { cursor: grabbing; }
.strip-rest {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--strip-face, linear-gradient(180deg, var(--white), #eceef3));
}
/* The red pull tab: on the strip until it is pulled, then at the end of the torn piece. */
.strip-rest::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.4em;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
.strip.started .strip-rest::before { display: none; }
.strip-rest {
  left: var(--tx);
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0 5px 0 0;
}
.strip-rest::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: radial-gradient(circle, rgba(29, 60, 143, 0.6) 1px, transparent 1.5px) 0 50% / 7px 3px repeat-x;
}
.strip:not(.started) .strip-rest { border-radius: 5px 5px 0 0; }
/* Once torn, the strip's end is ragged where the paper parted. */
.strip.started .strip-rest {
  clip-path: polygon(3px 0, 100% 0, 100% 100%, 2px 100%, 0 86%, 4px 71%, 1px 57%, 3.5px 43%, 0.5px 29%, 4px 14%);
}
.strip-rest span {
  font: 500 0.75em/1 var(--f-ui);
  white-space: nowrap;
  color: var(--blue);
}
.strip-flap,
.strip-curl {
  position: absolute;
  top: 0;
  left: var(--tx);
  height: 100%;
  pointer-events: none;
}
/* The torn piece, folded back over the strip at the tear. It shows the back of the paper, its
   lower edge torn along the perforations, with the pull tab at its far end. The more loosely it
   is held, the higher it lifts: a softer, longer shadow and a touch larger. */
.strip-flap {
  z-index: 2;
  width: var(--len);
  transform-origin: 0 50%;
  transform: rotate(var(--ang)) scale(calc(1 + var(--lift) * 0.05));
  filter: drop-shadow(0 calc(2px + var(--lift) * 9px) calc(2px + var(--lift) * 12px) rgba(22, 24, 29, 0.34));
  will-change: transform;
}
.strip-paper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(22, 24, 29, 0.06)), var(--strip-back, #ece9e1);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 3px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='3'%3E%3Cpath d='M0 0h7v1.2L5.4 3 3.6 1.3 1.7 2.7 0 1.1z'/%3E%3C/svg%3E") bottom / 7px 3px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 3px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='3'%3E%3Cpath d='M0 0h7v1.2L5.4 3 3.6 1.3 1.7 2.7 0 1.1z'/%3E%3C/svg%3E") bottom / 7px 3px repeat-x;
}
.strip-paper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(2.4em, 100%);
  background: var(--red-dark);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
/* The fold: a small rounded curl of paper, lit along its outer edge. */
.strip-curl {
  z-index: 3;
  width: var(--curl);
  margin-left: calc(var(--curl) * -1);
  border-radius: 50% 0 0 50% / 50% 0 0 50%;
  transform-origin: 100% 50%;
  transform: rotate(var(--ang));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), var(--strip-back, #ece9e1) 55%, rgba(22, 24, 29, 0.25));
}
.strip:not(.started) .strip-flap,
.strip:not(.started) .strip-curl { visibility: hidden; }
.strip.gone { pointer-events: none; }
.strip.gone .strip-rest,
.strip.gone .strip-curl { visibility: hidden; }

/* The aerogramme: one pale blue sheet with a dashed red and blue border printed on it, opened by
   tearing off the perforated strips along its top and two sides (each tears as the strip above
   does, turned on its side), then folding its top back. The script cuts the sheet to inside its
   edges with a ragged line (aeroClip in pocard.js), as the app does. */
.strip-side, .aero-flap { display: none; }
.kind-aero .strip-side { display: block; }
.kind-aero .drag-hint { display: none; }
.kind-aero::before {
  content: "";
  position: absolute;
  top: 1em; right: 1em; bottom: 0; left: 1em;
  border-radius: 3px;
  box-shadow: 0 22px 44px rgba(22, 24, 29, 0.24);
}
.kind-aero.fall::before { opacity: 0; transition: opacity 0.3s ease 0.2s; }
.kind-aero .env-back { border-radius: 0; box-shadow: none; background: linear-gradient(180deg, #a7bcd8, #d6e2f0); }
.kind-aero .env-front { top: 0; border-radius: 0; background: linear-gradient(135deg, #dfe9f5, #ccdbee); }
.kind-aero .env-face {
  top: 1.44em; right: 1.44em; bottom: 0.44em; left: 1.44em;
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, rgba(215, 38, 46, 0.7) 0 7px, rgba(29, 60, 143, 0.6) 7px 14px) top / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, rgba(215, 38, 46, 0.7) 0 7px, rgba(29, 60, 143, 0.6) 7px 14px) bottom / 100% 1.5px no-repeat,
    repeating-linear-gradient(180deg, rgba(215, 38, 46, 0.7) 0 7px, rgba(29, 60, 143, 0.6) 7px 14px) left / 1.5px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(215, 38, 46, 0.7) 0 7px, rgba(29, 60, 143, 0.6) 7px 14px) right / 1.5px 100% no-repeat;
}
.kind-aero .strip { height: 1em; border-radius: 0; --strip-face: linear-gradient(180deg, #dfe9f5, #d3e1f1); --strip-back: #c4d4e9; }
.kind-aero .strip .strip-rest { border-radius: 0; }
.kind-aero .strip-rest::before { width: 1.4em; }
.kind-aero .strip-paper::after { width: min(1.4em, 100%); }
.kind-aero .strip-rest span { font-size: 0.55em; color: var(--red); }
.strip-l, .strip-r { right: auto; width: 13.375em; transform-origin: 0 0; }
.strip-l { top: 14.375em; left: 0; transform: rotate(-90deg); }
.strip-r { top: 1em; left: 21.25em; transform: rotate(90deg); }
.aero-flap {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  transform-origin: 50% 6.96%;
  pointer-events: none;
}
.kind-aero.unfolded .aero-flap { display: block; }
/* The script turns the top with an inline transform, so it falls with `translate` instead. */
.envelope.fall > .aero-flap { translate: 0 12em; transition: translate 0.7s cubic-bezier(0.55, 0, 0.85, 0.4), opacity 0.3s ease 0.4s; }
.aero-flap.over { z-index: 1; }
.aero-flap-front,
.aero-flap-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.aero-flap-back {
  display: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 1.6em, rgba(29, 60, 143, 0.12) 1.6em calc(1.6em + 1px)) 1.8em 2em / calc(100% - 3.6em) 100% no-repeat,
    linear-gradient(0deg, #a7bcd8, #d6e2f0);
}
.aero-flap.over .aero-flap-front { display: none; }
.aero-flap.over .aero-flap-back { display: block; }

.drag-hint {
  position: absolute;
  left: 40%;
  top: -2.9em;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: var(--blue);
  pointer-events: none;
  animation: nudge 2s ease-in-out infinite;
}
.hint-dot { width: 2.1em; height: 2.1em; border: 2px solid var(--blue); border-radius: 50%; background: rgba(29, 60, 143, 0.1); }
.drag-hint svg { width: 4.4em; height: 1em; }
.envelope.started .drag-hint { display: none; }
@keyframes nudge {
  0%, 15% { opacity: 0; transform: translateX(-0.5em); }
  30% { opacity: 1; }
  75% { opacity: 1; transform: translateX(2.5em); }
  100% { opacity: 0; transform: translateX(2.5em); }
}

/* Text and controls under the card */

.caption { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; }
.turn-hint { margin-top: 14px; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.page[data-state="out"] #voiceBtn { display: none; }
.pill .i-pause, .pill.playing .i-play { display: none; }
.pill.playing .i-pause { display: block; }
.voice-time { font-variant-numeric: tabular-nums; }
.voice-time:not(:empty)::before { content: "· "; }

.reading-extras { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 4px; }
.locked {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px dashed rgba(29, 60, 143, 0.5);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}
.locked:hover { color: var(--ink); background: rgba(29, 60, 143, 0.05); }
.locked svg { flex: none; }
.locked-text { flex: 1; font-size: 14px; line-height: 1.35; }
.locked-cta { font: 500 16px/1.1 var(--f-ui); color: var(--red-dark); }

/* Desktop panel: hidden on phones, where the bottom sheet and the get-the-app view do its job */

.keep-panel { display: none; }
.keep-panel h2,
.get-view h1,
.missing h1,
.sheet h2,
.report-dialog h2 {
  font-family: var(--f-ui);
  font-weight: 500;
}
.keep-panel h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.keep-panel p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.qr {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 150px;
  height: 150px;
  border: 2px dashed var(--line-strong);
  border-radius: 6px;
  font: 500 12px var(--f-mono);
  color: var(--muted);
}

/* Android waitlist */

.waitlist { display: flex; flex-direction: column; gap: 8px; }
.waitlist label { font-size: 14px; font-weight: 600; }
.waitlist .hint { margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.field-row { display: flex; gap: 8px; }
.field-row input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--field);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font: 400 16px var(--f-ui);
}
.field-row input::placeholder { color: var(--field); opacity: 1; }
.field-row input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.field-error { margin: 0; font-size: 13px; color: var(--error); }
.thanks { margin: 0; padding: 12px 14px; border-left: 4px solid var(--blue); border-radius: 4px; background: rgba(29, 60, 143, 0.07); font-size: 14px; line-height: 1.45; }

/* Get the app */

.get-view { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.back-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.brand { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wordmark-lg { font-size: 52px; line-height: 1; }
.get-view h1 { margin: 4px 0 0; font-size: 30px; line-height: 1.1; text-align: center; }
.checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  list-style: none;
}
.checks li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.checks svg { flex: none; color: var(--red); }
.waitlist-box { padding: 14px; border: 1.5px dashed rgba(29, 60, 143, 0.5); border-radius: 6px; background: var(--white); }

/* Card not found */

.missing { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 8px 24px; text-align: center; }
.missing h1 { margin: 8px 0 0; font-size: 30px; line-height: 1.1; }
.missing p { margin: 0; max-width: 320px; color: var(--muted); }
.missing-env {
  width: 180px;
  height: 122px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--white), #f3f4f7) padding-box,
    repeating-linear-gradient(-45deg, var(--red) 0 9px, var(--white) 9px 14px, var(--blue) 14px 23px, var(--white) 23px 28px) border-box;
  border: 7px solid transparent;
  box-shadow: 0 16px 32px rgba(22, 24, 29, 0.2);
  transform: rotate(-3deg);
}

/* Ad placeholder. On phones it stays at the bottom of the screen until the footer scrolls in. */

.ad {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  margin: 24px -16px 0;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
}
.ad-tag { padding: 2px 7px; border: 1px solid var(--muted); border-radius: 3px; font: 500 10px var(--f-mono); letter-spacing: 0.1em; color: var(--muted); }
.ad-text { font: 400 12px var(--f-mono); color: var(--muted); }
.ad-d { display: none; }

/* Trust and privacy footer, on every view */

.trust { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.promise { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 6px; background: var(--blue); color: var(--white); }
.promise svg { flex: none; }
.promise p { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; line-height: 1.45; color: #dde3f2; }
.promise strong { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--white); }
.trust-links { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--white); list-style: none; }
.trust-links li + li { border-top: 1px solid var(--line); }
.trust-links a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; color: var(--ink); font-size: 15px; text-decoration: none; }
.trust-links a:hover { background: rgba(29, 60, 143, 0.05); }
.trust-links svg { flex: none; color: var(--blue); }
.law { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.colophon { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.colophon .wordmark { font-size: 24px; }
.colophon .tagline { font-size: 14px; }
.biz { margin: 0; font-size: 12px; color: var(--muted); }
.legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; font-size: 13px; list-style: none; }
.legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

/* Bottom sheet after the reveal */

.sheet {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  margin: 0 auto;
  padding: 14px 24px calc(28px + env(safe-area-inset-bottom));
  overflow: auto;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 -12px 32px rgba(22, 24, 29, 0.2);
  transform: translateY(105%);
  transition: transform 0.45s var(--ease-out);
}
.sheet:not([open]) { display: none; }
.sheet[open] { display: flex; flex-direction: column; gap: 11px; }
.sheet.up { transform: none; }
.sheet::backdrop { background: rgba(22, 24, 29, 0.32); }
.grabber { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #c9ccd3; }
.sheet h2 { margin: 0; font-size: 28px; line-height: 1.1; }
.sheet p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.sheet .link-btn { align-self: center; }

/* Report this card */

.report-dialog {
  width: calc(100% - 32px);
  max-width: 440px;
  max-height: calc(100vh - 32px);
  padding: 22px 22px 20px;
  overflow: auto;
  border: 0;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 16px 40px rgba(22, 24, 29, 0.26);
}
.report-dialog::backdrop { background: rgba(22, 24, 29, 0.36); }
.report-dialog form,
.report-done { display: flex; flex-direction: column; gap: 12px; }
.report-dialog h2 { margin: 0; font-size: 28px; line-height: 1.1; }
.report-dialog p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.reasons { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; }
.reasons label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  cursor: pointer;
}
.reasons label:last-of-type { border-bottom: 0; }
.reasons input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--blue); }
.report-details-label { font-size: 14px; font-weight: 600; }
.report-dialog textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--field);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font: 400 16px var(--f-ui);
  resize: vertical;
}
.report-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.report-actions .btn { flex: 1; }
.report-done .btn { align-self: flex-start; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 40;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.noscript { margin: 0; padding: 16px; background: var(--white); text-align: center; }

/* Wide screens: front and back side by side, with the keep panel beside them */

@media (min-width: 900px) {
  .page { max-width: 1180px; padding: 28px 5% 0; }
  .top {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  .top .wordmark { font-size: 38px; }
  .top .tagline { display: block; }
  .top .from { margin-left: auto; font-size: 14px; }
  .from-date { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

  .layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; margin-top: 28px; }
  .card-col { flex: 999 1 660px; min-width: 0; }
  .stage { --pw: var(--card-max); --ew: 400px; margin-top: 0; }

  .page[data-state="reading"] .print { width: auto; height: auto; cursor: default; }
  .page[data-state="reading"] .print-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    transform: none;
    transition: none;
  }
  .page[data-state="reading"] .face {
    position: relative;
    width: var(--pw);
    height: calc(var(--pt) * var(--card-h));
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    animation: settle 0.7s var(--ease-out) both;
  }
  .page[data-state="reading"] .front { transform: rotate(-3deg); }
  .page[data-state="reading"] .back { transform: rotate(2deg); animation-delay: 0.15s; }
  @keyframes settle {
    from { opacity: 0; transform: translateY(18px); }
  }

  .turn-btn, .turn-hint, .locked { display: none !important; }
  .reading-extras { margin-top: 0; }

  .keep-panel:not([hidden]) {
    display: flex;
    flex: 1 1 300px;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 22px;
    border: 1px solid #e2e4e9;
    border-top: 6px solid transparent;
    border-radius: 6px;
    background: linear-gradient(var(--white), var(--white)) padding-box, var(--stripe) border-box;
    animation: settle 0.7s var(--ease-out) 0.3s both;
  }
  .keep-panel .btn-store { min-height: 48px; font-size: 15px; }
  .keep-panel .waitlist label { font-size: 13px; }

  .ad {
    position: static;
    min-height: 90px;
    margin: 32px 0 0;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
  }
  .ad-m { display: none; }
  .ad-d { display: inline; }

  .get-view { width: 100%; max-width: 440px; margin: 0 auto; }

  .trust {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px 32px;
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .law { grid-column: 1 / -1; }
  .colophon {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    text-align: left;
  }
  .colophon .legal { margin-left: auto; }

  .toast { bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* The letter is measured right after its size changes, so it must not transition. */
  .letter, .letter * { transition: none !important; }
}

/* Privacy notice and terms (web/privacy, web/terms) */

.page.doc-page { max-width: 720px; }
.doc-top { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 20px; }
.doc-top .wordmark { text-decoration: none; }
.doc-top .wordmark:hover { color: var(--blue-dark); }
.doc { flex: 1; padding-bottom: 32px; font-size: 16px; line-height: 1.6; }
.doc h1,
.doc h2 { font-family: var(--f-ui); font-weight: 500; }
.doc h1 { margin: 4px 0 2px; font-size: 40px; line-height: 1.05; }
.doc h2 { margin: 32px 0 8px; font-size: 25px; line-height: 1.15; color: var(--blue); }
.doc h3 { margin: 22px 0 4px; font-size: 16px; line-height: 1.4; font-weight: 600; }
.doc p, .doc ul { margin: 0 0 12px; }
.doc ul { padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc .updated { color: var(--muted); font-size: 14px; }
.doc .summary { margin-top: 20px; padding: 4px 20px 6px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 4px; background: var(--white); }
.doc .summary h2 { margin-top: 16px; }
.draft-note { padding: 12px 14px; border: 1px solid #e0b46a; border-radius: 10px; background: #fbe7c6; font-size: 14px; }
mark.fill { padding: 0 3px; border-radius: 3px; background: #fbe7c6; color: var(--ink); }
.doc-footer { padding: 12px 0 max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.home-footer { margin-top: auto; padding: 24px 0 max(16px, env(safe-area-inset-bottom)); }