@import "https://fonts.cdnfonts.com/css/minecraft-4";:root{--font-pixel:"Minecraft", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;--color-primary:#f2d9f0;--color-secondary:#260d24;--color-tertiary:#5c110a;--color-accent:#110a5c;font-family:var(--font-pixel);color:var(--color-secondary);background:var(--color-primary);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale}:root.dark{--color-primary:#260d24;--color-secondary:#f2d9f0;--color-tertiary:#f5aaa3;--color-accent:#aaa3f5}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}button,input{font:inherit}.landing-page,.second-page{isolation:isolate;background:linear-gradient(color-mix(in srgb, var(--color-accent) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 1px, transparent 1px), var(--color-primary);background-size:12px 12px;place-items:center;min-height:100svh;padding:24px;display:grid;position:relative;overflow:hidden}.landing-content{z-index:1;place-items:center;gap:28px;width:100%;display:grid;position:relative}.second-page-content{z-index:1;width:100%;position:relative}.second-page--revealing{opacity:0;animation:3.1s ease-in .85s forwards page-reveal}@keyframes page-reveal{to{opacity:1}}@media (width<=480px){.landing-page,.second-page{padding:16px}.second-page{padding-inline:42px}.landing-content{gap:20px}}.answer-input-shell{border:2px solid var(--color-secondary);background:var(--color-primary);width:min(100%,480px);box-shadow:6px 6px 0 var(--color-accent);border-radius:0;padding:5px;transition:transform .12s steps(2,end),box-shadow .12s steps(2,end)}.answer-input-shell:focus-within{box-shadow:8px 8px 0 var(--color-tertiary);transform:translate(-2px,-2px)}.answer-input-frame{border:2px solid color-mix(in srgb, var(--color-secondary) 40%, transparent);background:color-mix(in srgb, var(--color-primary) 84%, white);border-radius:0;align-items:center;transition:border-color .12s steps(2,end),background .12s steps(2,end);display:flex;position:relative;overflow:hidden}.answer-input-shell:focus-within .answer-input-frame{border-color:var(--color-accent);background:color-mix(in hsl, var(--color-primary) 94%, white);box-shadow:inset 0 0 0 2px var(--color-accent)}.answer-input{min-width:0;color:var(--color-secondary);font:inherit;letter-spacing:.04em;background:0 0;border:0;outline:0;flex:1;padding:14px 18px;font-size:.95rem}.answer-input::selection{background:var(--color-tertiary);color:var(--color-primary)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.answer-input-shell,.answer-input-frame{transition:none}}@media (width<=480px){.answer-input-shell{padding:4px}.answer-input{padding:12px 14px}}.gif-background{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.gif-background-stage{position:absolute;inset:0}.gif-background-item{top:var(--gif-y);left:var(--gif-x);width:var(--gif-size);opacity:0;transform:translate(-50%, -50%) rotate(var(--gif-tilt));animation:gif-appear 13s steps(6, end) var(--gif-delay) infinite;object-fit:contain;image-rendering:pixelated;will-change:opacity;position:absolute}@keyframes gif-appear{0%{opacity:0}8%,38%{opacity:var(--gif-opacity)}46%,to{opacity:0}}@media (width<=600px){.gif-background-item{width:calc(var(--gif-size) * .72)}}@media (prefers-reduced-motion:reduce){.gif-background-item{animation-play-state:paused}}.image-preview{border:3px solid var(--color-secondary);background:color-mix(in srgb, var(--color-primary) 80%, white);width:min(100%,600px);box-shadow:8px 8px 0 var(--color-accent);cursor:zoom-in;border-radius:0;display:block;overflow:hidden}.image-preview img{object-fit:cover;width:100%;max-height:min(54svh,600px);image-rendering:pixelated;transition:transform .12s steps(2,end),filter .12s steps(2,end);display:block}.image-preview:hover img{filter:contrast(1.1)saturate(1.12)}.image-preview:focus-visible{outline:3px solid var(--color-tertiary);outline-offset:5px}@media (prefers-reduced-motion:reduce){.image-preview img{transition:none}}@media (width<=480px){.image-preview{box-shadow:5px 5px 0 var(--color-accent)}}.letter{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;width:min(100%,620px);margin:0 auto}.letter__scene{perspective:1500px}.letter__paper{border:3px solid var(--color-secondary);background:radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--color-tertiary) 9%, transparent) 1px, transparent 1.5px), linear-gradient(92deg, color-mix(in srgb, var(--color-primary) 68%, white), color-mix(in srgb, var(--color-primary) 88%, white) 48%, color-mix(in srgb, var(--color-primary) 67%, white)), color-mix(in srgb, var(--color-primary) 72%, white);min-height:240px;box-shadow:9px 9px 0 var(--color-accent), inset 0 0 0 3px color-mix(in srgb, var(--color-primary) 54%, white);clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));transform-style:preserve-3d;background-size:9px 9px,auto,auto;border-radius:0;transition:min-height .65s steps(8,end),box-shadow .18s steps(2,end),transform .65s steps(8,end);position:relative;overflow:hidden;transform:rotateX(7deg)rotate(-.4deg)}.letter__paper:before{content:"";pointer-events:none;background:linear-gradient(to right, transparent 0 16%, color-mix(in srgb, var(--color-tertiary) 13%, transparent) 16.2% 16.5%, transparent 16.7%), repeating-linear-gradient(0deg, transparent 0 29px, color-mix(in srgb, var(--color-accent) 9%, transparent) 30px);opacity:0;transition:opacity .44s .16s;position:absolute;inset:0}.letter__paper:after{content:"";z-index:1;pointer-events:none;border:2px dashed color-mix(in srgb, var(--color-tertiary) 32%, transparent);opacity:.56;position:absolute;inset:10px}.letter__top-fold,.letter__bottom-fold{z-index:3;backface-visibility:hidden;background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 54%, white), color-mix(in srgb, var(--color-primary) 78%, white));box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--color-tertiary) 24%, transparent);transition:transform .76s steps(9,end),opacity .24s steps(2,end) .21s;position:absolute;left:0;right:0}.letter__top-fold{clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;height:54%;top:0}.letter__bottom-fold{background:linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 71%, white), color-mix(in srgb, var(--color-primary) 53%, white));clip-path:polygon(0 0,50% 38%,100% 0,100% 100%,0 100%);transform-origin:bottom;height:72%;bottom:0}.letter__seal{z-index:4;aspect-ratio:1;width:46px;color:var(--color-tertiary);text-shadow:3px 3px 0 color-mix(in srgb, var(--color-secondary) 70%, transparent);font-size:2.35rem;line-height:1;font-family:var(--font-pixel);background:0 0;border:0;border-radius:0;place-items:center;transition:transform .5s steps(5,end),opacity .18s steps(2,end);display:grid;position:absolute;top:calc(53% - 23px);left:calc(50% - 19px)}.letter__recipient{z-index:4;color:var(--color-secondary);font-family:var(--font-pixel);letter-spacing:.16em;text-shadow:1px 1px 0 color-mix(in srgb, var(--color-primary) 65%, white);font-size:.68rem;font-weight:600;transition:transform .5s steps(5,end),opacity .18s steps(2,end);position:absolute;top:calc(53% + 28px);left:50%;transform:translate(-50%)}.letter__content{z-index:2;color:var(--color-secondary);font-family:var(--font-pixel);letter-spacing:.025em;padding:56px clamp(32px,9vw,74px);font-size:clamp(.72rem,1.7vw,.87rem);font-weight:500;line-height:1.8;position:relative}.letter__paragraph{opacity:0;clip-path:inset(0 0 100%);transform-origin:top;max-height:0;margin:0;transition:max-height .76s steps(8,end),margin .3s steps(3,end),opacity .24s steps(2,end) .16s,clip-path .62s steps(7,end),transform .62s steps(7,end);overflow:hidden;transform:translateY(16px)scaleY(.82)}.letter__paragraph.is-revealed{opacity:1;clip-path:inset(0);max-height:900px;margin:0 0 1.45rem;transform:translateY(0)scaleY(1)}.letter__paragraph.is-revealed:last-child{margin-bottom:0}.letter__paragraph.is-typing:after{content:"";vertical-align:-.15em;background:currentColor;width:2px;height:1em;margin-left:2px;animation:.7s step-end infinite letter-caret;display:inline-block}.letter__ellipsis{z-index:4;color:var(--color-tertiary);font-family:var(--font-pixel);letter-spacing:.22em;text-shadow:2px 2px 0 color-mix(in srgb, var(--color-primary) 65%, white);font-size:1.45rem;font-weight:600;line-height:1;animation:1.1s steps(2,end) infinite letter-ellipsis;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.letter--open .letter__paper{min-height:330px;box-shadow:7px 7px 0 var(--color-accent), inset 0 0 0 3px color-mix(in srgb, var(--color-primary) 54%, white);transform:rotateX(0)rotate(0)}.letter--open .letter__paper:before{opacity:1}.letter--open .letter__top-fold{opacity:0;transform:rotateX(-180deg)}.letter--open .letter__bottom-fold{opacity:0;transform:rotateX(180deg)}.letter--open .letter__seal{opacity:0;transform:scale(.4)rotate(115deg)}.letter--open .letter__recipient{opacity:0;transform:translate(-50%,8px)}@keyframes letter-caret{50%{opacity:0}}@keyframes letter-ellipsis{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.letter__paper,.letter__paper:before,.letter__top-fold,.letter__bottom-fold,.letter__seal,.letter__recipient,.letter__paragraph{transition:none}.letter__paragraph.is-typing:after,.letter__ellipsis{animation:none}}@media (width<=480px){.letter__content{padding:46px 26px}}.celebration-transition{z-index:10;pointer-events:auto;background:color-mix(in srgb, var(--color-primary) 82%, transparent);place-items:center;animation:4.2s ease-in-out forwards celebration-fade;display:grid;position:fixed;inset:0;overflow:hidden}.celebration-transition__message{z-index:2;color:#e170df;font-family:var(--font-pixel);letter-spacing:.08em;text-align:center;text-shadow:5px 5px 0 color-mix(in srgb, var(--color-primary) 82%, white);margin:0;font-size:clamp(2.4rem,11vw,6rem);font-weight:600;line-height:1;animation:1.2s steps(7,end) .18s both celebration-message;position:relative}.celebration-transition__burst{position:absolute;inset:0}.celebration-transition__gif,.celebration-transition__emoji{width:var(--burst-size);opacity:0;transform-origin:50%;animation:celebration-burst 2.6s cubic-bezier(.18, .78, .26, 1) calc(var(--burst-delay) + .42s) both;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.celebration-transition__gif{aspect-ratio:1;object-fit:contain;image-rendering:pixelated}.celebration-transition__emoji{aspect-ratio:1;font-size:var(--burst-size);place-items:center;display:grid}@keyframes celebration-message{0%{opacity:0;transform:scale(.15)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes celebration-burst{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}18%{opacity:1}74%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) rotate(var(--burst-rotate)) scale(.82)}}@keyframes celebration-fade{0%{opacity:0}12%,76%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.celebration-transition,.celebration-transition__message,.celebration-transition__gif,.celebration-transition__emoji{animation-duration:1ms}}