:root{--night: #0d1017;--night-2: #12161f;--panel: #171c27;--line: rgba(203, 208, 220, .12);--paper: #ece3d0;--paper-2: #f4ecdb;--ink: #2c2620;--ink-soft: #6a6152;--wax: #8a2b23;--gold: #e6c270;--gold-soft: #ccae6a;--text: #cdd2de;--muted: #828a9c;--font-display: "Fraunces", Georgia, serif;--font-hand: "Caveat", "Segoe Script", cursive;--font-ui: "Inter", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--night);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}.stage{position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;padding:48px 20px 72px;overflow:hidden;background:radial-gradient(1100px 620px at 50% -8%,#1a2130 0%,var(--night-2) 42%,var(--night) 78%)}.stage__glow{position:absolute;top:-14%;left:50%;width:720px;height:720px;transform:translate(-50%);background:radial-gradient(circle,#e6c2701a,#e6c27000 62%);pointer-events:none}.wrap{position:relative;width:100%;max-width:640px;text-align:center}.wrap--narrow{max-width:540px}.wrap--read{max-width:680px}.wrap--envelope{max-width:560px}.eyebrow{margin:0 0 14px;font-family:var(--font-ui);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft)}.display{margin:0 0 22px;font-family:var(--font-display);font-weight:500;font-optical-sizing:auto;font-size:clamp(2.1rem,6vw,3.1rem);line-height:1.06;letter-spacing:-.01em;color:#f2eee6}.lede{margin:-6px auto 26px;max-width:44ch;color:var(--muted);font-size:1rem;line-height:1.6}.paper{position:relative;margin:0 auto;background:linear-gradient(180deg,var(--paper-2),var(--paper));border-radius:6px;box-shadow:0 1px #fff6 inset,0 26px 60px -24px #000000bf,0 2px 8px #00000059;text-align:left}.paper:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px;background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.35),transparent 60%);pointer-events:none}.paper--write{max-width:560px;padding:34px 34px 22px}.paper__text{width:100%;min-height:300px;border:0;outline:none;resize:vertical;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(2.15rem - 1px),rgba(44,38,32,.1) calc(2.15rem - 1px),rgba(44,38,32,.1) 2.15rem);color:var(--ink);font-family:var(--font-hand);font-size:1.5rem;line-height:2.15rem;letter-spacing:.2px}.paper__text::placeholder{color:#6a61528c}.paper__sign{display:block;width:100%;margin-top:6px;border:0;outline:none;background:transparent;text-align:right;color:var(--ink-soft);font-family:var(--font-hand);font-size:1.35rem}.paper__sign::placeholder{color:#6a615280}.paper--read{max-width:620px;padding:46px 46px 40px}.paper__line{margin:0;color:var(--ink);font-family:var(--font-hand);font-size:1.6rem;line-height:2.25rem;letter-spacing:.2px}.paper__from{margin-top:26px;text-align:right;color:var(--ink-soft);font-family:var(--font-hand);font-size:1.5rem}.reveal-in{animation:reveal-in .9s cubic-bezier(.2,.7,.2,1) both}@keyframes reveal-in{0%{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.seal-row{display:flex;gap:14px;align-items:flex-end;margin-top:22px;text-align:left;flex-wrap:wrap}.seal-row__field{flex:1 1 240px}.field-label{display:block;margin-bottom:8px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.field-label--spaced{margin-top:22px}.input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:#ffffff08;color:var(--text);font-family:var(--font-ui);font-size:.98rem;transition:border-color .2s,box-shadow .2s}.input:focus{outline:none;border-color:var(--gold-soft);box-shadow:0 0 0 3px #e6c27026}.input--center{text-align:center;letter-spacing:.08em}.btn{font-family:var(--font-ui);font-size:.9rem;font-weight:500;letter-spacing:.02em;padding:13px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .2s,opacity .2s}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default}.btn--gold{background:linear-gradient(180deg,#eccd80,var(--gold));color:#2a2313;box-shadow:0 8px 20px -8px #e6c27099}.btn--gold:hover:not(:disabled){background:linear-gradient(180deg,#f0d489,#e9c874)}.btn--seal{flex:0 0 auto}.btn--ghost{margin-top:26px;background:transparent;border-color:var(--line);color:var(--muted)}.btn--ghost:hover{color:var(--text);border-color:#cdd2dc47}.panel{margin:4px auto 0;padding:26px 24px 28px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:16px}.linkrow{display:flex;gap:10px}.linkrow__input{flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#00000040;color:var(--text);font-size:.86rem;font-family:var(--font-ui)}.linkrow__input:focus{outline:none;border-color:var(--gold-soft)}.wordreveal{padding:14px 16px;border-radius:10px;background:#e6c27014;border:1px dashed rgba(230,194,112,.35);color:var(--gold);font-family:var(--font-display);font-size:1.35rem;letter-spacing:.02em}.hint{margin:10px 0 0;font-size:.82rem;color:var(--muted)}.envelope{position:relative;width:min(80vw,380px);aspect-ratio:3 / 2;margin:6px auto 30px;perspective:1300px}.envelope__shadow{position:absolute;left:8%;right:8%;bottom:-7%;height:20px;background:radial-gradient(50% 100% at 50% 0%,rgba(0,0,0,.5),transparent 70%);filter:blur(3px)}.envelope__back{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9px;background:linear-gradient(160deg,#e7ddc7,#d6c9ae)}.envelope__letter{position:absolute;left:7%;right:7%;top:9%;height:88%;padding:16px 16px 0;border-radius:5px;background:linear-gradient(180deg,#f8f2e5,#efe6d3);box-shadow:0 8px 20px #00000038;transform:translateY(0) scale(.98);transition:transform 1.05s cubic-bezier(.2,.7,.2,1);z-index:1}.envelope__letter-line{display:block;height:6px;margin-bottom:12px;border-radius:3px;background:#2c262029}.envelope__letter-line.short{width:55%}.envelope__front{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9px;background:linear-gradient(160deg,#ddd0b5,#cbbb9b);clip-path:polygon(0 34%,50% 70%,100% 34%,100% 100%,0 100%);box-shadow:inset 0 -3px 10px #0000001f;z-index:2}.envelope__flap{position:absolute;top:0;left:0;right:0;height:62%;background:linear-gradient(160deg,#e3d8c0,#d2c3a4);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transform:rotateX(0);transition:transform .95s cubic-bezier(.5,0,.4,1);transform-style:preserve-3d;z-index:4}.wax{position:absolute;left:50%;bottom:4%;width:54px;height:54px;transform:translate(-50%,50%);border-radius:50%;background:radial-gradient(circle at 34% 30%,#a5362b,var(--wax) 58%,#571a15);box-shadow:0 5px 12px #00000073,inset 0 2px 3px #ffffff2e;display:grid;place-items:center;transition:opacity .5s ease,transform .6s ease;z-index:5}.wax:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;border:1px solid rgba(255,220,200,.25)}.wax__mark{font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:#ffe2d08c}.envelope--opening .envelope__flap{transform:rotateX(-172deg)}.envelope--opening .wax{opacity:0;transform:translate(-50%,90%) scale(.55) rotate(-8deg)}.envelope--opening .envelope__letter{transform:translateY(-56%) scale(1.05)}.unlock{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:320px;margin:0 auto}.unlock .input{max-width:260px}.unlock__error{margin:0;min-height:1.1em;font-size:.86rem;color:#d98b7f;opacity:0;transition:opacity .2s}.unlock__error.is-shown{opacity:1}@media (max-width: 560px){.paper--write{padding:26px 22px 18px}.paper--read{padding:34px 26px 30px}.btn--seal{width:100%}}@media (prefers-reduced-motion: reduce){.envelope__flap,.envelope__letter,.wax{transition:none}.reveal-in{animation-duration:.2s}}