:root {
  --paper: #f4efe6;
  --paper-deep: #ebe1d2;
  --ink: #172827;
  --ink-soft: #53655f;
  --muted: #8b958b;
  --line: rgba(23, 40, 39, 0.14);
  --coral: #e8734c;
  --coral-deep: #be533a;
  --sun: #e9bb55;
  --mint: #b6d3bf;
  --blue: #a8c8ca;
  --serif: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

.memoir-app {
  width: 100%;
  height: 100svh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  transition: background .9s ease, color .9s ease;
}

.memoir-app[data-scene="4"] {
  --paper: #182b2b;
  --paper-deep: #203837;
  --ink: #f2eadc;
  --ink-soft: #bdc7bb;
  --muted: #81918a;
  --line: rgba(242, 234, 220, .16);
}

.memoir-app[data-scene="5"], .memoir-app[data-scene="6"] {
  --coral: #d96343;
  --coral-deep: #b94b35;
}

.ambient { position: absolute; z-index: -3; pointer-events: none; border-radius: 50%; filter: blur(2px); transition: transform 1.3s cubic-bezier(.2,.8,.2,1), opacity 1.3s ease; }
.ambient-a { width: min(65vw, 720px); height: min(65vw, 720px); top: -30%; right: -18%; background: rgba(232, 115, 76, .16); }
.ambient-b { width: min(45vw, 520px); height: min(45vw, 520px); bottom: -25%; left: -18%; background: rgba(182, 211, 191, .35); }
.memoir-app[data-scene="4"] .ambient-a { opacity: .1; transform: scale(.55); }
.memoir-app[data-scene="4"] .ambient-b { opacity: .08; transform: scale(.7); }
.memoir-app[data-scene="6"] .ambient-a { opacity: .9; transform: scale(1.25); }
.memoir-app[data-scene="6"] .ambient-b { opacity: .7; transform: scale(1.18); }

.paper-noise { position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: .12; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }

/* letter gate */
.letter-gate { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 96px 7vw 82px; background: var(--paper); opacity: 1; transition: opacity .9s cubic-bezier(.2,.8,.2,1); }
.letter-gate::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; border: 1px solid rgba(23, 40, 39, .08); }
.letter-gate.is-opening .gate-copy, .letter-gate.is-open .gate-copy { opacity: 0; transform: translateY(-7px); }
.letter-gate.is-open { opacity: 0; pointer-events: none; }
.gate-ambient { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.gate-ambient-one { width: min(58vw, 700px); height: min(58vw, 700px); top: -30%; right: -16%; background: rgba(232, 115, 76, .17); }
.gate-ambient-two { width: min(42vw, 520px); height: min(42vw, 520px); bottom: -25%; left: -16%; background: rgba(182, 211, 191, .33); }
.gate-copy { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font: 9px var(--mono); letter-spacing: .12em; transition: opacity .45s ease, transform .45s ease; }
.gate-copy span, .gate-copy b { display: block; }
.gate-copy b { color: var(--coral); font-weight: 700; }
.gate-copy-top { width: min(100% - 56px, 1180px); top: 36px; left: 50%; transform: translateX(-50%); }
.gate-copy-bottom { bottom: 34px; left: 50%; flex-direction: column; gap: 9px; transform: translateX(-50%); text-align: center; }
.gate-copy-bottom span { color: var(--muted); letter-spacing: .08em; }
.gate-copy-bottom b { padding: 8px 11px; border: 1px solid rgba(232, 115, 76, .35); border-radius: 999px; font-size: 9px; letter-spacing: .08em; }
.envelope-stage { width: min(78vw, 640px); aspect-ratio: 1.55; position: relative; z-index: 3; perspective: 1200px; animation: envelope-float 5s ease-in-out 1.35s infinite; }
.envelope-shadow { width: 74%; height: 14%; position: absolute; z-index: 0; left: 13%; bottom: -8%; border-radius: 50%; background: rgba(23, 40, 39, .16); filter: blur(16px); transform: rotate(-4deg); animation: shadow-breathe 5s ease-in-out 1.35s infinite; }
.envelope { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; filter: drop-shadow(18px 24px 0 rgba(23, 40, 39, .08)); animation: envelope-arrive 1.35s cubic-bezier(.16,.82,.27,1) both; }
.envelope-back, .envelope-paper, .envelope-front, .envelope-flap { position: absolute; inset: 0; border-radius: 3px; }
.envelope-back { z-index: 1; overflow: hidden; border: 1px solid rgba(190, 83, 58, .34); background: #df8e6c; }
.envelope-back::before, .envelope-back::after { content: ""; width: 1px; height: 142%; position: absolute; top: -20%; background: rgba(112, 58, 47, .28); transform-origin: center; }
.envelope-back::before { left: 50%; transform: rotate(57deg); }
.envelope-back::after { left: 50%; transform: rotate(-57deg); }
.envelope-paper { z-index: 2; inset: 6% 8% 5%; display: flex; flex-direction: column; justify-content: center; padding: 8% 10%; color: var(--ink); background: #fff8ec; box-shadow: 0 7px 18px rgba(23, 40, 39, .12); transform: translateY(5%); transition: transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .8s ease; }
.envelope-paper span { color: var(--coral); font: 700 clamp(8px, 1vw, 11px) var(--mono); letter-spacing: .11em; }
.envelope-paper b { margin-top: 15px; font: 500 clamp(28px, 4vw, 56px)/1.05 var(--serif); letter-spacing: -.08em; }
.envelope-paper small { margin-top: auto; color: var(--muted); font: 8px var(--mono); letter-spacing: .1em; }
.envelope-front { z-index: 4; background: #d47758; clip-path: polygon(0 0, 50% 57%, 100% 0, 100% 100%, 0 100%); }
.envelope-front::after { content: ""; position: absolute; inset: 1px; background: rgba(255, 226, 199, .12); clip-path: polygon(0 0, 50% 57%, 100% 0, 100% 100%, 0 100%); }
.envelope-flap { z-index: 5; transform-origin: 50% 0; background: #e7a07f; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; transition: transform .85s cubic-bezier(.2,.8,.2,1), filter .85s ease; }
.envelope-seal-ring { width: 21%; aspect-ratio: 1; position: absolute; z-index: 6; left: 39.5%; top: 47%; border: 1px dashed rgba(255, 244, 223, .7); border-radius: 50%; transform: rotate(-18deg); animation: seal-ring-pulse 2.2s ease-in-out infinite; }
.seal-button { width: 23%; aspect-ratio: 1; position: absolute; z-index: 8; left: 38.5%; top: 46%; display: grid; place-items: center; overflow: visible; border: 1px solid rgba(255, 224, 183, .38); border-radius: 49% 55% 45% 53% / 53% 47% 54% 48%; color: #fff4dc; background: radial-gradient(circle at 32% 23%, #d7765c, #a84438 72%); box-shadow: inset 0 0 0 3px rgba(255, 224, 183, .2), inset 0 -8px 12px rgba(91, 35, 33, .18), 0 8px 16px rgba(125, 56, 44, .22); cursor: pointer; transform: rotate(-9deg); transition: transform .25s ease, box-shadow .25s ease, opacity .35s ease; }
.seal-button::before { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(255, 226, 183, .42); border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%; transform: rotate(17deg); }
.seal-button::after { content: ""; position: absolute; inset: 4%; border-radius: inherit; opacity: .42; background: repeating-radial-gradient(circle at 42% 35%, rgba(255, 232, 194, .16) 0 1px, transparent 1px 4px); mix-blend-mode: screen; pointer-events: none; }
.seal-button:hover { transform: rotate(-6deg) translateY(-2px); box-shadow: inset 0 0 0 3px rgba(255, 224, 183, .26), inset 0 -8px 12px rgba(91, 35, 33, .18), 0 11px 20px rgba(125, 56, 44, .28); }
.seal-button:active { transform: rotate(-7deg) scale(.95); }
.seal-button:focus-visible { outline: 3px solid var(--sun); outline-offset: 5px; }
.seal-mark { position: relative; z-index: 1; margin-top: -8%; color: #f9dbab; font: 700 clamp(15px, 2vw, 25px) var(--mono); letter-spacing: -.12em; text-shadow: 1px 2px 0 rgba(105, 39, 35, .42), -1px -1px 0 rgba(255, 224, 183, .22); }
.seal-serial { position: absolute; z-index: 1; bottom: 22%; color: rgba(255, 232, 194, .68); font: 6px var(--mono); letter-spacing: .08em; white-space: nowrap; }
.seal-caption { position: absolute; z-index: 1; bottom: 8%; padding-top: 4px; border-top: 1px solid rgba(255, 232, 194, .35); color: #fff5e2; font: 700 clamp(7px, .9vw, 10px) var(--sans); letter-spacing: .12em; white-space: nowrap; text-shadow: 0 1px 3px rgba(73, 36, 28, .32); }
.letter-gate.is-opening .envelope-flap { transform: rotateX(180deg); filter: brightness(1.07); }
.letter-gate.is-opening .envelope-paper { transform: translateY(-20%); box-shadow: 0 18px 28px rgba(23, 40, 39, .14); }
.letter-gate.is-opening .seal-button { opacity: 0; transform: rotate(18deg) scale(.72); }
.letter-gate.is-opening .envelope-seal-ring { opacity: 0; transform: rotate(25deg) scale(1.35); }
.letter-gate.is-opening .envelope { animation: envelope-release .95s cubic-bezier(.2,.8,.2,1) .12s both; }

@keyframes envelope-arrive { 0% { opacity: 0; transform: translate3d(72vw, -42vh, 0) rotate(28deg) scale(.38); } 60% { opacity: 1; transform: translate3d(-4vw, 2vh, 0) rotate(-8deg) scale(1.03); } 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); } }
@keyframes envelope-release { 0% { transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); } 100% { transform: translate3d(-12vw, -10vh, 0) rotate(-12deg) scale(1.08); opacity: .15; } }
@keyframes envelope-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-11px) rotate(1deg); } }
@keyframes shadow-breathe { 0%, 100% { opacity: .55; transform: scaleX(1) rotate(-4deg); } 50% { opacity: .35; transform: scaleX(.85) rotate(-4deg); } }
@keyframes seal-ring-pulse { 0%, 100% { opacity: .7; transform: rotate(-18deg) scale(1); } 50% { opacity: 1; transform: rotate(-18deg) scale(1.08); } }

.topbar { width: min(100% - 56px, 1180px); height: 78px; position: fixed; z-index: 20; top: 0; left: 50%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); transform: translateX(-50%); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--coral); border-radius: 50% 50% 50% 3px; color: var(--coral); font: 700 9px/1 var(--mono); transform: rotate(-8deg); }
.brand-copy b, .brand-copy small { display: block; }
.brand-copy b { font: 700 10px/1 var(--mono); letter-spacing: .1em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.topbar-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--coral); }
.season-label { color: var(--ink-soft); }

.story-progress { width: min(100% - 56px, 1180px); height: 3px; position: fixed; z-index: 21; top: 88px; left: 50%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; transform: translateX(-50%); }
.progress-segment { height: 100%; overflow: hidden; border-radius: 8px; background: var(--line); }
.progress-segment span { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--coral); transition: width .2s linear; }

.stage { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 1; touch-action: none; user-select: none; }
.scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 110px 7vw 72px; opacity: 0; pointer-events: none; transform: translate3d(0, 7vh, 0) scale(.97); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.8,.2,1); }
.scene.is-active { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); }
.scene.is-before { opacity: 0; transform: translate3d(0, -8vh, 0) scale(1.02); }
.scene.is-after { opacity: 0; transform: translate3d(0, 8vh, 0) scale(.97); }
.scene-inner { width: min(100%, 1080px); position: relative; }
.scene-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--coral); font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.scene-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 15%, transparent); }
.scene h1, .scene h2, .scene p { margin-top: 0; }
.scene h1, .scene h2 { letter-spacing: -.08em; line-break: strict; text-wrap: balance; }
.scene h1 { max-width: 860px; margin-bottom: 20px; font-size: clamp(52px, 9vw, 118px); font-weight: 500; line-height: .96; }
.scene h2 { margin-bottom: 16px; font-size: clamp(35px, 5vw, 67px); font-weight: 500; line-height: 1.03; }
.scene em { color: var(--coral); font-family: var(--serif); font-style: italic; font-weight: 500; }
.scene-lede { max-width: 440px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.mono-label { color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; }

/* opening */
.opening .scene-inner { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.opening h1 { max-width: 820px; }
.opening h1 em { display: inline-block; padding-left: .04em; }
.opening .scene-lede { margin-bottom: 0; }
.orbit { width: 220px; height: 220px; position: absolute; right: 7%; top: 50%; display: grid; place-items: center; border: 1px solid rgba(232, 115, 76, .36); border-radius: 50%; transform: translateY(-50%) rotate(-10deg); animation: drift 8s ease-in-out infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; border: 1px solid rgba(232, 115, 76, .22); border-radius: 50%; }
.orbit::before { width: 148%; height: 43%; transform: rotate(42deg); }
.orbit::after { width: 43%; height: 148%; transform: rotate(42deg); }
.orbit-core { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--coral); font: 700 14px var(--mono); box-shadow: 0 14px 24px rgba(190, 83, 58, .2); }
.orbit-note { position: absolute; right: -15px; bottom: 24px; padding: 7px 9px; color: var(--ink); background: var(--sun); font: 700 9px var(--mono); transform: rotate(8deg); }

/* first move */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr); gap: 7vw; align-items: center; }
.date-stamp { width: fit-content; padding: 8px 10px; margin-bottom: 28px; border: 1px dashed var(--coral); color: var(--coral); font: 700 11px var(--mono); letter-spacing: .06em; transform: rotate(-2deg); }
.amount { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 23px; }
.amount strong { font: 500 clamp(52px, 8vw, 100px)/.9 var(--mono); letter-spacing: -.1em; }
.amount span { color: var(--ink-soft); font-size: 11px; }
.split h2 em, .proof-copy h2 em, .return h2 em { display: inline-block; white-space: nowrap; }
.scribble { width: fit-content; margin: 29px 0 0 12%; color: var(--coral); font-family: var(--serif); font-size: 17px; font-style: italic; transform: rotate(-5deg); }
.receipt { min-height: 310px; position: relative; padding: 24px 24px 21px; color: #f4efe6; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 96%, 96% 100%, 91% 96%, 86% 100%, 81% 96%, 76% 100%, 71% 96%, 66% 100%, 61% 96%, 56% 100%, 51% 96%, 46% 100%, 41% 96%, 36% 100%, 31% 96%, 26% 100%, 21% 96%, 16% 100%, 11% 96%, 6% 100%, 0 96%); box-shadow: 16px 20px 0 rgba(23, 40, 39, .06); }
.receipt::before { content: ""; width: 95px; height: 95px; position: absolute; right: -18px; top: 56px; border: 1px solid rgba(244, 239, 230, .18); border-radius: 50%; box-shadow: 0 0 0 16px rgba(244, 239, 230, .04), 0 0 0 32px rgba(244, 239, 230, .03); }
.receipt-head, .receipt-line { display: flex; align-items: center; justify-content: space-between; }
.receipt-head { padding-bottom: 17px; border-bottom: 1px solid rgba(244, 239, 230, .18); color: #c8d7c6; font: 9px var(--mono); letter-spacing: .09em; }
.receipt-body { padding: 47px 0 38px; }
.receipt-body small, .receipt-body strong, .receipt-body span { display: block; }
.receipt-body small { color: #a9bbb0; font-size: 10px; }
.receipt-body strong { margin-top: 9px; font: 500 42px/.95 var(--mono); letter-spacing: -.08em; }
.receipt-body span { margin-top: 13px; color: #d7e2d3; font-size: 11px; }
.receipt-line { padding-top: 14px; border-top: 1px solid rgba(244, 239, 230, .18); color: #a9bbb0; font: 10px var(--mono); }
.receipt-line b { color: #f4efe6; font-weight: 500; }

/* flow */
.flow-scene .scene-inner { max-width: 900px; }
.flow-scene h2 { max-width: 690px; }
.flow-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(240px, .75fr); gap: 6vw; align-items: end; margin-top: 34px; }
.flow-rail { position: relative; padding: 12px 0 13px; }
.flow-rail::before { content: ""; position: absolute; left: 16px; top: 17px; bottom: 16px; width: 1px; background: var(--line); }
.flow-step { display: grid; grid-template-columns: 33px 1fr; gap: 14px; align-items: center; position: relative; min-height: 70px; }
.flow-step + .flow-step { margin-top: 9px; }
.flow-step-dot { width: 33px; height: 33px; display: grid; place-items: center; z-index: 1; border: 1px solid var(--coral); border-radius: 50%; color: var(--coral); background: var(--paper); font: 700 10px var(--mono); }
.flow-step b, .flow-step small { display: block; }
.flow-step b { font-size: 14px; font-weight: 600; }
.flow-step small { margin-top: 5px; color: var(--ink-soft); font-size: 10px; }
.flow-total { padding: 23px; border: 1px solid var(--line); border-radius: 2px; background: rgba(255, 255, 255, .22); }
.flow-total .mono-label { display: block; margin-bottom: 27px; }
.flow-total strong { display: block; font: 500 clamp(37px, 5vw, 58px)/1 var(--mono); letter-spacing: -.1em; }
.flow-total p { margin: 11px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.flow-total i { display: block; width: 100%; height: 1px; margin-top: 27px; background: var(--line); }

/* proof */
.proof-scene .scene-inner { display: grid; grid-template-columns: minmax(330px, .82fr) minmax(430px, 1.18fr); gap: 5vw; align-items: center; }
.score-wrap { min-height: 300px; position: relative; display: grid; place-items: center; }
.score-ring { width: min(27vw, 310px); aspect-ratio: 1; position: relative; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transform: rotate(-16deg); }
.score-ring::before, .score-ring::after { content: ""; position: absolute; border-radius: 50%; }
.score-ring::before { inset: 14px; border: 1px dashed var(--coral); border-right-color: transparent; animation: spin 18s linear infinite; }
.score-ring::after { inset: 27px; border: 1px solid rgba(232, 115, 76, .18); border-left-color: transparent; transform: rotate(22deg); }
.score-value { position: relative; z-index: 1; transform: rotate(16deg); text-align: center; }
.score-value strong { display: block; font: 500 clamp(60px, 8vw, 95px)/.8 var(--mono); letter-spacing: -.12em; }
.score-value span { display: block; margin-top: 12px; color: var(--ink-soft); font: 10px var(--mono); letter-spacing: .1em; }
.proof-copy h2 { max-width: 620px; font-size: clamp(34px, 4.6vw, 60px); }
.stat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.stat-pill { padding: 10px 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, .2); }
.stat-pill b, .stat-pill small { display: block; }
.stat-pill b { color: var(--coral); font: 700 18px var(--mono); }
.stat-pill small { margin-top: 5px; color: var(--ink-soft); font-size: 9px; }

/* quiet */
.quiet-scene { color: #f2eadc; }
.quiet-scene .scene-inner { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.quiet-scene .scene-kicker { color: #c9a56e; }
.quiet-scene .scene-kicker::before { background: currentColor; }
.quiet-scene h2 { max-width: 720px; }
.quiet-scene h2 em { color: #e6bb72; }
.quiet-line { width: min(330px, 50vw); height: 1px; position: relative; margin: 22px 0 26px; background: rgba(242, 234, 220, .22); }
.quiet-line::after { content: ""; width: 5px; height: 5px; position: absolute; left: 50%; top: 50%; border-radius: 50%; background: #e6bb72; box-shadow: 0 0 0 8px rgba(230, 187, 114, .1); transform: translate(-50%, -50%); }
.quiet-copy { color: #bdc7bb; font-size: 12px; line-height: 1.8; }
.quiet-copy strong { color: #f2eadc; font-weight: 500; }
.quiet-dial { width: 140px; height: 140px; position: absolute; right: 7%; bottom: 11%; display: grid; place-items: center; border: 1px solid rgba(242, 234, 220, .2); border-radius: 50%; transform: rotate(9deg); }
.quiet-dial::before, .quiet-dial::after { content: ""; position: absolute; inset: 11px; border: 1px dashed rgba(230, 187, 114, .4); border-radius: 50%; }
.quiet-dial::after { inset: 24px; border: 1px solid rgba(242, 234, 220, .14); }
.quiet-dial b { position: relative; z-index: 1; font: 500 30px var(--mono); }
.quiet-dial small { position: absolute; bottom: 23px; color: #8d9c93; font: 7px var(--mono); letter-spacing: .1em; }

/* identity */
.identity .scene-inner { max-width: 1000px; }
.identity h2 { max-width: 700px; }
.identity h2 em { display: inline-block; padding: 0 .08em; color: var(--ink); background: var(--sun); transform: rotate(-2deg); }
.identity-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: end; margin-top: 35px; }
.identity-note { max-width: 350px; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag-cloud span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; }
.percentile-card { min-width: 240px; padding: 25px; background: var(--ink); color: #f4efe6; transform: rotate(2deg); box-shadow: 13px 14px 0 rgba(23, 40, 39, .08); }
.percentile-card .mono-label { color: #a8baaa; }
.percentile-card strong { display: block; margin: 25px 0 8px; color: var(--sun); font: 500 clamp(57px, 8vw, 93px)/.85 var(--mono); letter-spacing: -.12em; }
.percentile-card p { margin: 0; color: #b8c8ba; font-size: 11px; line-height: 1.6; }

/* return */
.return .scene-inner { max-width: 900px; }
.return h2 { max-width: 720px; }
.return h2 em { color: var(--coral); }
.return-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); gap: 7vw; align-items: end; margin-top: 29px; }
.gift-card { position: relative; padding: 22px; border: 1px solid var(--ink); background: var(--sun); transform: rotate(-2deg); box-shadow: 12px 12px 0 rgba(23, 40, 39, .08); }
.gift-card::after { content: "老友专属"; position: absolute; right: 16px; top: 16px; color: rgba(23, 40, 39, .55); font: 700 9px var(--mono); letter-spacing: .1em; }
.gift-card small, .gift-card strong, .gift-card span { display: block; }
.gift-card small { font: 700 10px var(--mono); letter-spacing: .1em; }
.gift-card strong { margin: 26px 0 8px; font: 500 31px/.95 var(--serif); letter-spacing: -.06em; }
.gift-card span { color: rgba(23, 40, 39, .7); font-size: 10px; }
.hold-cta { min-height: 116px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--coral); color: var(--ink); background: transparent; cursor: pointer; text-align: center; transition: color .25s ease, background .25s ease, transform .25s ease; }
.hold-cta::before { content: ""; width: var(--hold-progress, 0%); height: 100%; position: absolute; left: 0; top: 0; background: var(--coral); transition: width .08s linear; }
.hold-cta-content { position: relative; z-index: 1; display: grid; gap: 7px; place-items: center; }
.hold-cta b { font-size: 14px; font-weight: 650; }
.hold-cta small { color: var(--ink-soft); font-size: 9px; }
.hold-cta.is-holding { color: #fff5e6; transform: scale(.98); }
.hold-cta.is-holding small { color: rgba(255, 245, 230, .82); }
.hold-cta.is-complete { border-color: var(--mint); background: var(--mint); color: var(--ink); cursor: default; }
.hold-cta.is-complete::before { width: 100%; background: var(--mint); }
.hold-cta.is-complete small { color: var(--ink-soft); }
.fineprint { margin: 22px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

.gesture-hint { position: fixed; z-index: 22; left: 50%; bottom: 23px; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 10px; transform: translateX(-50%); transition: opacity .4s ease, transform .4s ease; white-space: nowrap; }
.gesture-hint.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 7px); }
.gesture-arrow { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--coral); font-size: 14px; animation: hint-pulse 1.6s ease-in-out infinite; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; padding: 12px 16px; border: 1px solid rgba(23, 40, 39, .12); color: var(--ink); background: var(--mint); font-size: 11px; box-shadow: 8px 9px 0 rgba(23, 40, 39, .07); transform: translateX(-50%); animation: toast-in .3s ease-out; }
.toast[hidden] { display: none; }
.spark-field { position: fixed; z-index: 28; inset: 0; pointer-events: none; overflow: hidden; }
.spark { width: 6px; height: 6px; position: absolute; left: 50%; top: 58%; background: var(--coral); animation: spark-fly 1.1s cubic-bezier(.2,.8,.2,1) forwards; }

@keyframes drift { 0%, 100% { transform: translateY(-50%) rotate(-10deg); } 50% { transform: translateY(calc(-50% - 10px)) rotate(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hint-pulse { 0%, 100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes spark-fly { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(240deg) scale(.15); } }

@media (max-width: 760px) {
  .topbar, .story-progress { width: calc(100% - 32px); }
  .topbar { height: 64px; }
  .story-progress { top: 74px; gap: 3px; }
  .topbar-meta { gap: 7px; font-size: 8px; }
  .season-label { display: none; }
  .letter-gate { padding: 84px 16px 76px; }
  .gate-copy-top { width: calc(100% - 32px); top: 23px; font-size: 8px; }
  .gate-copy-top b { display: none; }
  .gate-copy-bottom { bottom: 23px; font-size: 8px; }
  .gate-copy-bottom b { padding: 7px 9px; font-size: 8px; }
  .envelope-stage { width: min(88vw, 520px); }
  .envelope-paper b { margin-top: 11px; font-size: clamp(28px, 8vw, 42px); }
  .scene { padding: 96px 24px 62px; }
  .scene-kicker { margin-bottom: 17px; font-size: 9px; }
  .scene h1 { font-size: clamp(48px, 15vw, 80px); }
  .scene h2 { font-size: clamp(34px, 10vw, 54px); }
  .scene-lede { font-size: 12px; }
  .orbit { width: 134px; height: 134px; top: 17%; right: 4%; opacity: .75; }
  .orbit-core { width: 52px; height: 52px; font-size: 11px; }
  .orbit-note { right: -10px; bottom: 8px; font-size: 8px; }
  .opening .scene-inner { min-height: 70vh; justify-content: center; }
  .opening h1 { padding-top: 8vh; }
  .split, .flow-layout, .proof-scene .scene-inner, .identity-grid, .return-layout { display: block; }
  .receipt { min-height: 245px; margin-top: 28px; padding: 18px; }
  .receipt-body { padding: 33px 0 27px; }
  .receipt-body strong { font-size: 34px; }
  .scribble { margin-top: 21px; font-size: 14px; }
  .flow-layout { margin-top: 23px; }
  .flow-step { min-height: 56px; }
  .flow-step + .flow-step { margin-top: 5px; }
  .flow-step-dot { width: 28px; height: 28px; }
  .flow-rail::before { left: 14px; }
  .flow-step b { font-size: 12px; }
  .flow-step small { font-size: 9px; }
  .flow-total { margin-top: 22px; padding: 18px; }
  .flow-total .mono-label { margin-bottom: 18px; }
  .score-wrap { min-height: 190px; margin-bottom: 9px; }
  .score-ring { width: min(58vw, 240px); }
  .score-value strong { font-size: 64px; }
  .proof-copy h2 { margin-bottom: 9px; }
  .stat-row { margin-top: 18px; }
  .stat-pill { padding: 8px 9px; }
  .stat-pill b { font-size: 15px; }
  .quiet-scene .scene-inner { min-height: 63vh; }
  .quiet-dial { width: 100px; height: 100px; right: 8%; bottom: 15%; }
  .quiet-dial b { font-size: 21px; }
  .quiet-dial small { bottom: 17px; font-size: 6px; }
  .identity-grid { margin-top: 24px; }
  .identity-note { font-size: 11px; }
  .percentile-card { margin: 28px 9% 0 0; padding: 18px; }
  .percentile-card strong { margin: 19px 0 7px; font-size: 64px; }
  .return-layout { margin-top: 22px; }
  .gift-card { margin: 0 10% 26px 0; padding: 18px; }
  .gift-card strong { margin: 21px 0 8px; font-size: 25px; }
  .hold-cta { min-height: 98px; }
  .gesture-hint { bottom: 15px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}