:root{--ink: #2a211c;--paper: #f6eee4;--font-body: "Iowan Old Style", Palatino, serif;--muted: #7a6a62;--accent: #a74b47;--on-accent: #fff6f2;--card: #fffaf4;--line: #eadfd4;--shadow: rgb(42 33 28 / 12%);--mute-border: rgb(42 33 28 / 18%);--mute-fill: rgb(246 238 228 / 94%);--ribbon: #c46a62;--ribbon-highlight: rgb(255 246 242 / 35%);--letter: #f7f1e8;--letter-rule: #eadfce;--knot: #9d453f;--flap: #d7c4b0;--shimmer: linear-gradient(90deg, #eadfd4 0%, #f7f1e8 48%, #eadfd4 100%);--letter-paper: linear-gradient(#f7f1e8, #f7f1e8) 0 0 / 100% 28px, repeating-linear-gradient(#fffaf4, #fffaf4 27px, #eadfce 28px);--disabled: #e4d5cc}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;height:100dvh;height:100svh;height:var(--app-height, 100svh);overflow:clip;position:fixed;top:0;right:0;bottom:0;left:0}#app{position:relative}body{font-family:var(--font-body);background:var(--paper);color:var(--ink)}.missing,.gate{min-height:100%;display:grid;place-content:center;place-items:center;padding:32px 24px;text-align:center;margin:0 auto;max-width:390px;width:100%}.gate-kicker{margin:0 0 12px;color:var(--muted);font-size:15px}.gate-title{margin:0 0 28px;font-size:28px;line-height:1.35;overflow-wrap:break-word;min-width:0;max-width:100%}iframe.story-play{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;display:block;border:0;width:100%;height:100%;min-height:0}.play-frame{position:absolute;top:0;right:0;bottom:0;left:0}audio.story-bgm{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.play-frame .story-mute{position:absolute;z-index:2;top:12px;right:12px;width:40px;height:40px;border:1px solid var(--mute-border);border-radius:20px;background:var(--mute-fill);padding:0;color:var(--ink)}.play-frame .story-mute:not([hidden]){display:grid;place-items:center}.play-frame .story-mute[hidden]{display:none}.play-frame .story-mute-icon{width:20px;height:20px;display:block}.play-frame .story-mute-speaker{fill:currentColor}.play-frame .story-mute-wave,.play-frame .story-mute-off{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.play-frame .story-mute-off,.play-frame .story-mute.is-muted .story-mute-wave,.play-frame .story-mute.needs-tap .story-mute-wave{display:none}.play-frame .story-mute.is-muted .story-mute-off,.play-frame .story-mute.needs-tap .story-mute-off{display:inline}.play-frame .story-mute-hint{display:none}.play-frame .story-mute.needs-tap:not([hidden]){display:flex;align-items:center;gap:8px;width:auto;padding:0 12px 0 8px;font:600 13px/20px var(--font-body);white-space:nowrap}.play-frame .story-mute.needs-tap .story-mute-hint{display:inline}.gate-stage{overflow:visible;height:100%}.gate-stage.is-opening{perspective:900px}.gate.is-fade.is-opening{opacity:0;transition:opacity .42s ease}.gate.is-lift.is-opening{transform:translateY(-110%);transition:transform .42s ease}.gate.is-flip.is-opening{transform:rotateY(-78deg);transform-origin:left center;transition:transform .52s ease}.gate button{font:inherit;border:0;background:var(--accent);color:var(--on-accent);padding:12px 24px;border-radius:999px;cursor:pointer;font-size:16px}#app:has(.gate.is-gift){display:grid;place-items:center;padding:24px}.gate.is-gift .gate-title{margin:0 0 12px}.gate.is-gift .gate-kicker{margin:0 0 28px}.gate.is-gift{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 36px var(--shadow);min-height:420px;width:min(100%,360px);margin:0;padding:32px 24px 80px}.gate.is-letter{background:var(--letter-paper)}.gift-lid{position:absolute;left:0;right:0;top:0;height:72px;background:var(--ribbon);border-radius:18px 18px 4px 4px;transform:translateY(0);transition:transform .42s ease}.gate.is-box.is-opening .gift-lid{transform:translateY(-130%)}.gate.is-ribbon{overflow:hidden}.gift-ribbon{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.gate.is-ribbon .gate-kicker,.gate.is-ribbon .gate-title,.gate.is-ribbon .gift-cover-image,.gate.is-ribbon button{position:relative;z-index:2}.gift-ribbon-vertical,.gift-ribbon-horizontal{position:absolute;background:var(--ribbon);box-shadow:inset 0 1px 0 var(--ribbon-highlight)}.gift-ribbon-vertical{top:0;bottom:0;left:calc(50% - 11px);width:22px;transition:transform .28s ease .16s}.gift-ribbon-horizontal{left:0;right:0;top:52px;height:22px;z-index:1;transition:transform .28s ease .24s}.gift-ribbon-tail,.gift-ribbon-loop,.gift-ribbon-knot{position:absolute;transition:transform .18s ease,opacity .18s ease}.gift-ribbon-tail{top:34px;width:16px;height:42px;background:var(--ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 58%,0 100%);z-index:2}.gift-ribbon-tail-left{left:calc(50% - 24px);transform:rotate(-14deg)}.gift-ribbon-tail-right{left:calc(50% + 8px);transform:rotate(14deg)}.gift-ribbon-loop{top:4px;width:36px;height:28px;border:7px solid var(--ribbon);border-radius:50%;z-index:3}.gift-ribbon-loop-left{left:calc(50% - 34px);transform:rotate(-22deg)}.gift-ribbon-loop-right{left:calc(50% - 2px);transform:rotate(22deg)}.gift-ribbon-knot{top:16px;left:calc(50% - 8px);width:16px;height:16px;border-radius:4px;background:var(--knot);z-index:4}.gate.is-ribbon.is-opening .gift-ribbon-knot{opacity:0;transform:scale(.4)}.gate.is-ribbon.is-opening .gift-ribbon-loop-left{opacity:0;transform:translate(-16px,-6px) rotate(-22deg) scale(.7)}.gate.is-ribbon.is-opening .gift-ribbon-loop-right{opacity:0;transform:translate(16px,-6px) rotate(22deg) scale(.7)}.gate.is-ribbon.is-opening .gift-ribbon-tail-left,.gate.is-ribbon.is-opening .gift-ribbon-tail-right{opacity:0}.gate.is-ribbon.is-opening .gift-ribbon-vertical{transform:translate(220px)}.gate.is-ribbon.is-opening .gift-ribbon-horizontal{transform:translateY(-90px)}@media(prefers-reduced-motion:reduce){.gate.is-ribbon.is-opening .gift-ribbon-knot,.gate.is-ribbon.is-opening .gift-ribbon-loop,.gate.is-ribbon.is-opening .gift-ribbon-tail,.gate.is-ribbon.is-opening .gift-ribbon-vertical,.gate.is-ribbon.is-opening .gift-ribbon-horizontal{transition:none;opacity:0;transform:none}}.gift-flap{position:absolute;left:0;right:0;top:0;height:84px;background:var(--flap);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .42s ease}.gate.is-envelope{perspective:800px}.gate.is-envelope.is-opening .gift-flap{transform:rotateX(72deg)}.gate.is-loading .cover-bar{background:var(--shimmer);background-size:200% 100%;animation:cover-shimmer 1.2s ease-in-out infinite;border-radius:8px}.cover-bar-title{width:68%;height:28px;margin:0 auto 28px}.cover-bar-image{width:min(100%,220px);height:148px;margin:0 auto 16px}.gate.is-loading button[disabled]{background:var(--disabled);color:transparent}@keyframes cover-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.gate.is-loading .cover-bar{animation:none}}.gift-cover-image{display:block;width:min(100%,220px);height:auto;margin:0 auto 16px;border-radius:12px}.gift-inscription{position:absolute;right:16px;bottom:16px;z-index:2;max-width:68%;text-align:right}.gift-signoff,.gift-date{margin:0;color:var(--muted)}.gift-inscription .gift-date{margin-top:4px}.gift-swipe-hint{margin:12px 0 0;color:var(--muted);font-size:13px}.gate.is-swipe{touch-action:none}.gate.is-swipe.is-dragging{transition:none}.gate.is-swipe.is-returning{transition:transform .22s ease}.gate button:focus-visible,.play-frame .story-mute:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.gate button:active,.play-frame .story-mute:active{opacity:.84}@media(prefers-reduced-motion:reduce){.gate.is-fade.is-opening,.gate.is-lift.is-opening,.gate.is-flip.is-opening,.gift-flap,.gate.is-envelope.is-opening .gift-flap,.gate.is-swipe.is-returning{transition:none}}