:root{--paper:#eeeae3;--ink:#2c2925;--muted:#79736a;--serif:'Noto Serif SC',serif;--mono:'DM Mono',monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--serif)}button{font:inherit}#app{position:relative;min-height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 52% 42%,#fffdf9,#e8e4dc);isolation:isolate}.grain{position:fixed;inset:-50%;z-index:20;pointer-events:none;opacity:.075;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");transform:rotate(7deg)}.ambient{position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);opacity:.46}.ambient-a{width:48vw;height:24vw;left:23%;top:-13vw;background:#d7e6ec}.ambient-b{width:39vw;height:23vw;right:6%;bottom:-13vw;background:#e7d3c7}header{height:68px;position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;font:9px var(--mono);letter-spacing:.16em}.brand{font:500 13px var(--serif);letter-spacing:.12em}.tagline{opacity:.42}.home{position:relative;height:calc(100dvh - 68px)}aside{position:absolute;left:5vw;top:14vh;z-index:4}aside>span{font:8px var(--mono);letter-spacing:.18em;color:var(--muted)}aside h1{font-size:clamp(30px,4.4vw,58px);font-weight:500;line-height:1.22;letter-spacing:-.08em;margin:31px 0 17px}aside p{font-size:12px;line-height:1.85;color:var(--muted)}.stamp-field{position:absolute;inset:0}.preview{position:absolute;width:clamp(118px,13vw,188px);padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 24px 20px #5d554940);transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .65s;transform:rotate(var(--r))}.preview img{display:block;width:100%;height:auto}.preview:hover,.preview:focus-visible{transform:rotate(0deg) translateY(-13px) scale(1.045);filter:drop-shadow(0 35px 26px #5d55495c);outline:none}.stamp-1{left:21%;top:7%;--r:-9deg}.stamp-2{left:33%;top:53%;--r:7deg}.stamp-3{left:49%;top:3%;width:clamp(148px,16vw,225px);--r:3deg}.stamp-4{right:20%;top:50%;--r:-6deg}.stamp-5{right:5%;top:12%;--r:10deg}.instruction{position:absolute;right:5vw;bottom:6vh;font:9px var(--mono);letter-spacing:.12em;color:var(--muted)}.reader{position:fixed;inset:0;z-index:12;background:radial-gradient(ellipse at center,#fffdfa,#e7e3dc);opacity:0;pointer-events:none;transition:opacity .65s cubic-bezier(.2,.8,.2,1)}.reader.open{opacity:1;pointer-events:auto}.reader>button{position:absolute;top:24px;left:4vw;z-index:3;border:0;background:none;padding:8px;color:var(--ink);font:10px var(--mono);letter-spacing:.12em;cursor:pointer}.reader>button:focus-visible{outline:1px solid var(--ink);outline-offset:5px}.reader-canvas{height:100dvh;display:grid;place-items:center;cursor:pointer}.reader-canvas>img{width:min(520px,43vw);max-height:88dvh;object-fit:contain;filter:drop-shadow(0 42px 32px #554d4248);transition:opacity .3s,transform .65s cubic-bezier(.2,.8,.2,1)}.reader.open .reader-canvas>img{animation:arrive .8s cubic-bezier(.2,.8,.2,1)}.reader-canvas>img.changing{opacity:0;transform:translateY(10px) scale(.985)}.reader-index{position:absolute;right:4vw;bottom:28px;display:flex;gap:28px;color:var(--muted);font:9px var(--mono);letter-spacing:.1em}@keyframes arrive{from{opacity:0;transform:scale(.9) translateY(18px)}to{opacity:1;transform:none}}@media(max-width:720px){header{height:58px;padding:0 20px}.tagline{display:none}.home{height:calc(100dvh - 58px)}aside{left:8vw;top:6vh}aside h1{font-size:29px;margin:17px 0 10px}aside p{font-size:10px}.preview{width:103px}.stamp-1{left:-5%;top:30%;--r:-10deg}.stamp-2{left:8%;top:69%;--r:7deg}.stamp-3{left:36%;top:21%;width:132px;--r:2deg}.stamp-4{right:5%;top:65%;--r:-6deg}.stamp-5{right:-8%;top:29%;--r:9deg}.instruction{right:8vw;bottom:5vh}.reader-canvas>img{width:min(390px,88vw);max-height:85dvh}.reader-index{left:0;right:0;bottom:22px;justify-content:center}.reader-index span:last-child{display:none}.reader>button{left:15px;top:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}