:root {
  --pink: #f7b6cc;
  --pink-hot: #ff5b9c;
  --ink: #2b1823;
  --cream: #fff6df;
  --paper: #fff9e8;
  --green: #56835b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--pink); color: var(--ink); font-family: ui-monospace, "Cascadia Mono", monospace; }
button { font: inherit; }
main { overflow: hidden; }

.scene { min-height: 100svh; position: relative; }
.scene-intro {
  display: grid; place-items: center; align-content: center; gap: .45rem;
  background: radial-gradient(circle at 18% 12%, #ffe8f1 0 5%, transparent 5.2%), radial-gradient(circle at 88% 75%, #e891b6 0 9%, transparent 9.2%), var(--pink);
}
.scene-intro::after { content: "♡  ☆  ♡  ☆  ♡"; position: absolute; bottom: 2rem; color: #a34e74; font-size: .8rem; letter-spacing: .3rem; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .65rem; font-weight: 500; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; line-height: .96; letter-spacing: -.045em; }
.scene-intro h1 { margin: .2rem 0; text-align: center; font-size: clamp(3.3rem, 16vw, 5.7rem); color: #9a315f; text-shadow: 2px 3px 0 #ffe6f0; }
.intro-instruction { position: absolute; z-index: 4; bottom: 5.1rem; margin: 0; padding: .35rem .65rem; border: 1px dashed #9a315f; border-radius: 99rem; color: #6e2947; background: #ffe7f1; font-size: .72rem; animation: nudge 1.3s infinite alternate; }
.ymir-button { position: absolute; border: 0; background: transparent; padding: 0; width: min(65vw, 18rem); cursor: pointer; transition: left .32s cubic-bezier(.2,.9,.2,1.35), top .32s cubic-bezier(.2,.9,.2,1.35), transform .18s; z-index: 3; }
.ymir-button:active { transform: scale(.86); }
.ymir-button img { display: block; width: 100%; height: auto; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 .3rem .7rem #9a315f88); }
.ymir-glow { position: absolute; inset: 18%; background: #fff9; filter: blur(1.8rem); z-index: -1; }
.sparkles { position: absolute; top: 15%; color: #fff7fb; font-size: 1.4rem; transform: rotate(-12deg); }
.envelope-wrap { position: absolute; width: min(76vw, 24rem); height: 12rem; opacity: 0; transform: translateY(4rem) scale(.7); transition: opacity .45s, transform .65s cubic-bezier(.2,.9,.2,1.25); }
.envelope-wrap.visible { opacity: 1; transform: translateY(2.5rem) scale(1); }
.envelope { position: absolute; inset: 0; overflow: hidden; background: #fff5df; border: 3px solid #a55070; box-shadow: 7px 9px 0 #b24c7780; }
.envelope::after, .envelope::before { content:""; position:absolute; top: -2rem; width: 70%; height: 14rem; background:#ffe5d1; border: 3px solid #a55070; }
.envelope::before { left: -3rem; transform: rotate(33deg); }.envelope::after { right: -3rem; transform: rotate(-33deg); }
.envelope-flap { position:absolute; top:-8rem; left: 15%; width:70%; height: 14rem; background:#ffd3c2; border:3px solid #a55070; transform: rotate(45deg); z-index: 3; }
.seal { position:absolute; z-index:5; left:calc(50% - 1.5rem); top: 6.4rem; display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:#e65387; border: 2px dashed #fff1f5; color:#fff; font-family: "Permanent Marker", cursive; font-size:1.45rem; }
.envelope-shadow { position:absolute; inset:auto 8% -1.7rem; height:2rem; border-radius:50%; background:#9d3c6133; filter:blur(.8rem); }

.letter-section { display: none; position: relative; min-height: 100svh; padding: 4rem 1rem; background: #c96891; }
.letter-section.open { display: flex; justify-content: center; animation: reveal .75s ease both; }
.letter { position: relative; width: min(100%, 34rem); min-height: 42rem; padding: 2.1rem 1.3rem 3.2rem; overflow: hidden; background: var(--paper); box-shadow: 8px 10px 0 #733a5266; }
.letter::before { content:""; position:absolute; inset: .65rem; border: 2px dashed #e9b4a2; pointer-events:none; }
.letter > * { position: relative; z-index: 1; }
.letter-kicker { margin-bottom: 1.5rem; color:#a7506f; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }
.letter h2 { margin-bottom: 1rem; font-size: 3.4rem; color:#b04870; }
.polaroid { width: 86%; margin: .2rem auto 1.75rem; padding: .55rem .55rem .8rem; background:#fff; box-shadow: .35rem .5rem 0 #d8a0a34d; transform: rotate(-2.5deg); }
.polaroid img { display:block; width:100%; height:17rem; object-fit:cover; object-position:50% 30%; filter: saturate(1.04) contrast(1.03); }
.polaroid figcaption { padding-top:.65rem; color:#75405c; font-family:"Permanent Marker", cursive; font-size:.85rem; line-height:1.25; }
.letter-copy { max-width: 27ch; margin: 0 auto 1.2rem; font-size:.84rem; line-height:1.65; }
.machina-sticker { display:block; width: 8rem; aspect-ratio:1; object-fit:cover; object-position:50% 0%; margin: .2rem 0 -1.7rem auto; border: 5px solid #fff; border-radius:50%; transform:rotate(8deg); filter:drop-shadow(2px 4px 0 #e8b4a5); }
.tiny-note { margin: 0 0 2.5rem; font-size:.62rem; color:#855165; transform:rotate(-3deg); }
.horizon-card { display:grid; grid-template-columns:1fr; overflow:hidden; border: 3px solid var(--ink); background:#333; box-shadow: .35rem .35rem 0 #f19ab7; }
.horizon-card img { display:block; width:100%; height:12.5rem; object-fit:cover; filter:saturate(.82) contrast(1.07); }
.horizon-copy { min-height:6.8rem; padding:1rem; color:#331623; background:#ffc4d7; border-top:3px solid var(--ink); }
.horizon-copy span { display:block; margin-bottom:.35rem; color:#8b3458; font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; }.horizon-copy strong { display:block; font-family:Georgia, "Times New Roman", serif; font-size:1.55rem; line-height:.95; }
.scroll-cue { display:block; margin-top:2rem; color:#a14467; font-size:.72rem; text-align:center; }
.letter-edge { position:absolute; top: 2rem; color:#ffdded; font-size: 4rem; opacity:.7; }.edge-left{left:.4rem}.edge-right{right:.4rem;top:auto;bottom:2rem}

.choices-section { min-height:100svh; padding: 5rem 1.2rem 4rem; background:#ffc2d6; text-align:center; }
.choices-section h2 { margin:.8rem 0 .3rem; color:#802d52; font-size:clamp(2.65rem, 13vw, 4rem); }.subline { font-family:"Permanent Marker", cursive; color:#ac456d; font-size:.9rem; transform:rotate(-2deg); }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; width:min(100%, 32rem); margin:2.3rem auto 1.4rem; text-align:left; }
.choice-card { min-height:8rem; position:relative; padding:1rem .7rem; border:2px solid #6c2947; border-radius:.4rem; color:#55233a; background:#fff4f4; box-shadow: .22rem .25rem 0 #6c2947; text-align:left; font-family:Georgia, "Times New Roman", serif; font-size:1.25rem; line-height:.94; cursor:pointer; transition:transform .15s,background .2s; }.choice-card:hover,.choice-card:focus-visible { transform:translate(-.12rem,-.12rem); }.choice-card span { display:block; margin-bottom:1.7rem; color:#c9537c; font-family:ui-monospace, "Cascadia Mono", monospace; font-size:.6rem; }.choice-card.selected { color:#fff; background:#b72d62; box-shadow:.22rem .25rem 0 #6c2947, inset 0 0 0 3px #ffbdd6; transform:rotate(-2deg); }.choice-nope { background:#dad1cb; color:#4f4545; }.choice-nope.nope { animation: no-no .7s ease; background:#6d6b69; color:#fff; }
.both-stamp { display:none; width:14rem; margin:1.5rem auto 0; padding:.7rem; border:4px solid #e52f72; color:#e52f72; background:#fff2f6; transform:rotate(-4deg); }.both-stamp.show{display:block;animation:stamp .35s cubic-bezier(.2,.9,.2,1.45) both}.both-stamp img{width:4rem;image-rendering:auto}.both-stamp p{margin:0;font-family:"Permanent Marker",cursive;font-size:2rem;line-height:1}.both-stamp small{font-size:.62rem}.button-next{display:none;margin-top:2rem;padding:.9rem 1.2rem;border:2px solid var(--ink);border-radius:99rem;color:var(--ink);background:#ffe7af;box-shadow:.2rem .24rem 0 var(--ink);text-decoration:none;font-size:.75rem}.button-next.show{display:inline-block}

.final-section { display:grid; gap: 1.1rem; min-height:100svh; padding: 4rem 1.2rem; background:linear-gradient(#ffe9f1,#f4a3c2); align-content:center; }.ticket { position:relative; overflow:hidden; width:min(100%, 28rem); margin:auto; padding:1rem; background:#fffbe9; border:2px solid var(--ink); box-shadow:.45rem .55rem 0 #8f365b; transform:rotate(-1deg); }.ticket::after{content:"✦ ✦ ✦";position:absolute;right:.6rem;bottom:.7rem;color:#e35385;font-size:.65rem}.ticket-top,.ticket-label{font-size:.59rem;letter-spacing:.12em}.ticket-photo-wrap{position:relative;height:13rem;overflow:hidden;background:#9bd0e7}.ticket-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:50% 37%}.image-disclaimer{position:absolute;right:.35rem;bottom:.35rem;padding:.27rem .4rem;color:#fff;background:#222c;font-size:.55rem;transform:rotate(-2deg)}.ticket-line{border-top:1px dashed #b36478;margin:1rem 0}.ticket h2{margin:.35rem 0;color:#8e2e56;font-size:3.2rem}.ticket-small{margin-bottom:0;max-width:29ch;font-size:.65rem;line-height:1.45}.question-card{width:min(100%,28rem);margin:auto;padding:2rem 1.1rem;text-align:center}.question-card>p{margin-bottom:.45rem;color:#9c3d63;font-family:"Permanent Marker",cursive}.question-card h2{margin-bottom:1.5rem;font-size:clamp(2.25rem,11vw,3.5rem);color:#79284c}.yes-button{width:100%;padding:1rem;border:0;border-radius:99rem;color:#fff;background:#d83e78;box-shadow:.25rem .3rem 0 #862244;font-family:Fraunces,serif;font-size:1.25rem;cursor:pointer}.yes-button:active{transform:translate(.15rem,.15rem);box-shadow:.1rem .1rem 0 #862244}.no-link{display:block;margin:1.3rem auto 0;border:0;color:#7e5263;background:transparent;font-size:.61rem;text-decoration:underline;opacity:.72;cursor:pointer}

.no-easter-egg { width: 10.6rem; height: 3.3rem; margin: .6rem auto -.85rem; color: #74334e; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: .68rem; font-weight: 700; line-height: 1; text-align: left; transform: translateX(4.1rem) rotate(-6deg); pointer-events: none; }.no-easter-egg span { border-bottom: 1.5px solid currentColor; }.no-easter-egg svg { display: block; width: 4rem; height: 2rem; margin: .05rem 0 0 .65rem; overflow: visible; }.no-easter-egg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }.answer-section { display:none; min-height:100svh; padding:3rem 1.2rem; background:#cf4e80; place-items:center; text-align:center; }.answer-section.show{display:grid;animation:reveal .5s ease both}.answer-card{position:relative;width:min(100%,27rem);padding:2.4rem 1.3rem;background:#fff8e5;box-shadow:.5rem .55rem 0 #792547}.ymir-avatar{width:8rem;height:8rem;position:relative;overflow:hidden;margin:auto;border:5px solid #fff;border-radius:50%;filter:drop-shadow(2px 3px 0 #d46a92)}.ymir-avatar img{position:absolute;top:-20%;left:9%;width:auto;height:140%;max-width:none}.answer-card h2{margin:.8rem 0;color:#9d315b;font-size:3.2rem}.answer-card p{font-size:.73rem;line-height:1.55}.final-whisper{color:#916174;font-size:.61rem!important}

.eren-overlay { display:none; position:fixed; z-index:10; inset:0; place-items:center; overflow:hidden; color:#e9e7de; background:#08070b; }.eren-overlay.show{display:grid;animation:reveal .15s linear}.eren-content{position:relative;z-index:2;width:min(88%,30rem);padding:1rem;text-align:center}.eren-content img{width:100%;max-height:45svh;object-fit:cover;filter:contrast(1.25) saturate(.55);border:2px solid #c9c1aa}.eren-content p{margin:1.5rem 0 .4rem;color:#f7c93c;font-size:.65rem;letter-spacing:.1em}.eren-content h2{margin:0 0 1.8rem;font-size:clamp(2.8rem,14vw,4.5rem);text-shadow:3px 3px 0 #4b1212}.eren-content button{padding:.75rem 1rem;border:1px solid #e4d1a1;color:#e4d1a1;background:transparent;font-size:.61rem;cursor:pointer}.flash{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none}.flash-one{background:#fff;animation:flash 2.1s infinite}.flash-two{background:#c31d1d;animation:flash 2.1s .42s infinite}
@keyframes nudge { to { transform:translateY(.3rem); } } @keyframes reveal{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}} @keyframes stamp{from{transform:rotate(-4deg) scale(1.8);opacity:0}to{transform:rotate(-4deg) scale(1);opacity:1}} @keyframes no-no{0%,100%{transform:none}25%{transform:translateX(.55rem) rotate(2deg)}75%{transform:translateX(-.55rem) rotate(-2deg)}} @keyframes flash{0%,15%,100%{opacity:0}16%,21%{opacity:.68}22%,27%{opacity:0}28%{opacity:.35}29%,99%{opacity:0}}
@media (min-width: 900px) { .letter{padding:3rem 4rem}.letter-section{padding:5rem 2rem}.polaroid{width:60%}.choice-grid{grid-template-columns:repeat(3,1fr)}.final-section{grid-template-columns:1fr 1fr;gap:2rem;padding:5rem 8vw}.ticket,.question-card{margin:auto}.horizon-card{grid-template-columns:1fr 1fr}.horizon-card img{height:14rem}.horizon-copy{min-height:auto;display:grid;align-content:end;border-top:0;border-left:3px solid var(--ink)}.ymir-button{width:min(35vw,22rem)}}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important} }