@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;600&display=swap');
:root{--ink:#163d38;--muted:#74847a;--paper:#f7f4ea;--gold:#b78040;--line:#d9dfd1}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'Noto Sans SC',sans-serif;background:radial-gradient(ellipse at 12% 40%,#e5eddf 0,transparent 48%),radial-gradient(ellipse at 92% 72%,#f4e5ce 0,transparent 45%),var(--paper)}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.25' filter='url(%23n)'/%3E%3C/svg%3E")}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}header{max-width:1300px;margin:auto;padding:28px 48px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:16px;align-items:center}.brand i{font:italic 42px Georgia,serif;letter-spacing:-4px}.brand>span{font:600 12px 'Noto Sans SC',sans-serif;letter-spacing:3px;border-left:1px solid #a9bbb0;padding-left:17px}.brand small{display:block;font-size:8px;letter-spacing:1.7px;margin-top:6px;color:var(--muted)}.preview{font-size:11px;color:#788675;display:flex;gap:8px;align-items:center}.preview b,.tiny-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#a3ad77}.demo{display:flex;justify-content:center;align-items:center;gap:4px;margin:4px auto 0;flex-wrap:wrap}.demo>span{font-size:10px;letter-spacing:1px;color:#929b8c;margin-right:10px}.demo button{font-size:11px;color:#5f756a;border:1px solid transparent;border-radius:20px;background:transparent;padding:7px 12px}.demo button[aria-pressed=true]{border-color:#b7c4b2;background:#e7ebdf}main#entry{max-width:1200px;margin:44px auto 40px;padding:0 48px;display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;min-height:650px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:600;color:#8a916e;margin-bottom:22px}h1{font:600 clamp(34px,3.5vw,48px)/1.55 'Noto Serif SC',serif;letter-spacing:1px;margin:0 0 20px}h1 em{font-style:normal;color:#61795c}.lede{font-size:13px;line-height:2.1;color:#6d7e70}.scene{height:300px;position:relative;margin:28px 0 5px;isolation:isolate}.halo{position:absolute;width:300px;height:210px;left:65px;top:35px;border-radius:50%;background:radial-gradient(ellipse,#f8f0d8,transparent 70%)}.book{position:absolute;left:36px;right:24px;height:155px;bottom:28px;display:flex;transform:perspective(700px) rotateX(29deg) rotate(-5deg);filter:drop-shadow(0 18px 15px #4d65422b)}.page{width:50%;padding:32px 20px;background:linear-gradient(90deg,#e5dfc9,#fffdf1 85%,#d8cfb5);box-shadow:0 3px #f3ead4,0 6px #ccc5ac,0 9px #f4ebd9,0 12px #8b9b75;border:1px solid #d3cdb4}.page.left{border-radius:10px 0 0 4px;transform:skewY(-7deg)}.page.right{background:linear-gradient(90deg,#d7cfb9,#fffdf1 18%,#f3ecd7);border-radius:0 10px 4px 0;transform:skewY(7deg)}.page span{font-size:9px;letter-spacing:2px;color:#b5a785;line-height:2.2}.capy{position:absolute;width:168px;left:48%;bottom:79px;filter:drop-shadow(4px 8px 2px #57663f19);transform:rotate(6deg)}.penguin{position:absolute;width:140px;left:10%;bottom:91px;filter:drop-shadow(4px 8px 2px #57663f19);transform:rotate(-5deg)}.spark{position:absolute;font:35px Georgia;color:#d3aa63}.s1{left:35%;top:8px}.s2{left:86%;top:95px;font-size:25px;color:#9abfa7}.planet{position:absolute;width:34px;height:34px;background:radial-gradient(circle at 30% 30%,#e8caa9,#cba375);border-radius:50%;left:77%;top:29px;box-shadow:inset -5px -6px 7px #96734e33;transform:rotate(-25deg)}.planet:after{content:'';position:absolute;left:-14px;top:13px;width:59px;height:9px;border:2px solid #8caaa1;border-radius:50%}.float-note{position:absolute;left:0;top:56px;transform:rotate(-10deg);background:#fffaf0;padding:12px 17px;font-size:8px;letter-spacing:2px;box-shadow:4px 7px 0 #dee4d2,7px 15px 25px #4c66421a;border:1px solid #d7dbc8;border-radius:5px;color:#a69169}.float-note b{font:27px Georgia;display:block;color:#769285}.bookmark{position:absolute;font-size:7px;letter-spacing:2px;right:15px;bottom:9px;background:#b67d56;color:#fff6e5;padding:7px 12px;transform:rotate(-5deg)}.story-footer{display:flex;gap:22px;font-size:9px;color:#98a08c;letter-spacing:.6px}.form-area{padding-top:10px}.card{position:relative;background:linear-gradient(135deg,#fffef8,#f7f7ee);border:1px solid #fff;border-radius:26px;padding:30px 34px;box-shadow:0 1px 0 1px #ced5bd,0 8px 0 -2px #e1e5d3,0 9px 0 -1px #c6cfb7,0 26px 50px -18px #40583835;transform:rotate(.4deg)}.card-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e3e5d7;padding-bottom:16px;margin-bottom:22px}.card-label{font-size:9px;letter-spacing:2px;color:#9aa184}.mini-star{color:#b4945a}.tabs{display:flex;background:#e9eddf;border:1px solid #e0e5d5;padding:4px;border-radius:11px;gap:4px}.tabs button{width:50%;border:0;background:none;color:#8b957e;font-size:12px;padding:11px;border-radius:8px}.tabs button[aria-pressed=true]{background:#fffef7;box-shadow:0 2px 5px #344a2f12;color:#345744}h2{font:600 24px 'Noto Serif SC',serif;margin:25px 0 9px}.muted{font-size:11px;color:#899480;margin:0 0 24px;line-height:1.8}label{display:block;font-size:11px;font-weight:500;margin-top:17px;color:#546b59}input{width:100%;padding:14px 15px;margin-top:8px;background:#f4f5ec;border:1px solid #d8dfcb;border-radius:10px;font-size:12px;color:var(--ink);box-shadow:inset 0 2px 3px #526a3d06;outline:none;transition:.2s}input:focus{border-color:#b89b65;box-shadow:0 0 0 3px #d8ba7b22;background:#fffef6}input::placeholder{color:#a3aa97}.password-wrap{position:relative;display:block}.password-wrap input{padding-right:42px}.password-wrap button{position:absolute;right:9px;top:15px;background:none;border:0;color:#99a58b;font-size:16px;padding:5px}.label-row{display:flex;justify-content:space-between;align-items:center}.text-button{border:0;background:none;font-size:10px;color:#9a8059;padding:0}.field-note{font-size:9px;color:#9aa18e;line-height:1.8;margin:10px 0 23px}.primary{display:flex;align-items:center;justify-content:space-between;border:1px solid #234c3f;border-radius:11px;background:linear-gradient(145deg,#4e7057,#2c5141);color:#fff9e9;padding:16px 20px;box-shadow:0 4px 0 #233d31,0 8px 15px #253d2922;width:100%;font-size:12px;letter-spacing:.8px;transition:transform .18s,box-shadow .18s}.primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 #233d31,0 10px 20px #253d2922}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #233d31}.privacy{text-align:center;font-size:9px;color:#959e88;margin:20px 0}.privacy span{color:#9eae7d;margin-right:5px}.card-bottom{display:flex;align-items:center;justify-content:center;gap:7px;border-top:1px dashed #dfe3d4;padding-top:17px;font-size:9px;color:#a2a98d}.under-card{font-size:10px;color:#929c87;text-align:center;margin-top:25px}.under-card a{color:#647b59;border-bottom:1px solid #bdc7af;padding-bottom:3px}footer{max-width:1200px;margin:0 auto;padding:24px 48px;border-top:1px solid #dce1d2;display:flex;justify-content:space-between;gap:16px;font-size:9px;color:#9da58e;letter-spacing:1px}.state-page{max-width:650px;text-align:center;margin:42px auto;padding:0 28px;min-height:650px}.state-page h1{font-size:38px;line-height:1.5}.state-page .primary{max-width:360px;margin:25px auto 16px}.passport{margin:30px auto;max-width:410px;text-align:left;padding:22px;border-radius:20px;border:1px solid #c0cbaa;background:linear-gradient(130deg,#f7f1d9,#e1e8cf 52%,#eee6d1);box-shadow:0 2px #fdf8e4,0 7px #c7cfb7,0 30px 50px -24px #384c3344;transform:rotate(-3deg);position:relative;overflow:hidden}.passport:before{content:'';position:absolute;inset:7px;border:1px solid #c5c9ab88;border-radius:15px;pointer-events:none}.passport-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.3px;color:#7a8c66}.passport-body{display:flex;justify-content:space-around;align-items:center;padding:18px 0 5px}.passport-body img{width:126px;transform:rotate(5deg)}.seal{font:italic 55px Georgia,serif;letter-spacing:-4px;text-shadow:0 2px #ffffe5,0 -1px #859673;color:#4f6e50}.seal small{display:block;font:6px 'Noto Sans SC',sans-serif;letter-spacing:2px;text-align:center;margin-top:8px}.passport-bottom{display:flex;justify-content:space-between;align-items:end;border-top:1px dashed #bac5a3;padding-top:17px;font-size:13px;letter-spacing:1px}.passport-bottom small{display:block;font-size:8px;margin-top:6px;color:#8a9878;letter-spacing:1px}.verified{font-size:8px;color:#7b8d66}.celebrate{background:none;border:1px solid #d4d8c5;border-radius:20px;padding:8px 16px;color:#927a53;font-size:11px}.small-actions{display:flex;justify-content:center;gap:20px;align-items:center;margin:22px 0;color:#98a188;font-size:10px}.small-actions button{font-size:10px;background:none;border:0;color:#7d8b71;text-decoration:underline;text-underline-offset:4px}.notice{font-size:10px;color:#9da68e;line-height:1.8}.mail-art{width:190px;height:140px;margin:15px auto 28px;position:relative}.letter{position:absolute;top:0;left:35px;background:#fffaf0;width:120px;height:100px;padding:14px;font:italic 25px Georgia;text-align:left;transform:rotate(-7deg);box-shadow:0 2px 5px #4853331c;color:#697c54}.letter small{font:6px sans-serif;letter-spacing:1px}.envelope{position:absolute;bottom:0;left:10px;width:170px;height:95px;background:linear-gradient(150deg,#d5dfc2,#b0c39c);border:1px solid #a7b88f;border-radius:4px 4px 10px 10px;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);box-shadow:0 10px 20px #48533333}.mail-art>span{position:absolute;right:0;top:10px;color:#d1a15c;font-size:28px}.state-page>.eyebrow{margin-top:25px}#fireworks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}[hidden]{display:none!important}:focus-visible{outline:3px solid #c6a467;outline-offset:4px}@media(max-width:800px){header{padding:22px 24px}.brand i{font-size:34px}.brand small{display:none}.preview{font-size:9px}.brand>span{font-size:9px}main#entry{grid-template-columns:1fr;padding:0 24px;gap:22px;margin:25px auto;max-width:520px;min-height:0}.story{padding:10px 8px}.story h1{font-size:30px;line-height:1.5;margin-bottom:10px}.story .eyebrow{font-size:8px;margin-bottom:12px}.story .lede{font-size:11px}.scene{height:170px;margin:0 0 -8px;width:230px;position:absolute;top:160px;right:7%;opacity:.25;z-index:-1}.story-footer{display:none}.scene .capy{width:100px;bottom:30px}.scene .penguin{width:85px;bottom:40px}.book{height:85px;bottom:2px;left:0;right:0}.page{padding:10px}.page span{font-size:5px}.float-note,.bookmark,.halo,.planet{display:none}.s1{top:0}.card{padding:24px;transform:none}.card-top{margin-bottom:17px}.muted{margin-bottom:18px}.story .lede br{display:none}.form-area{padding-top:0}.under-card{margin:22px 0}footer{padding:20px 24px;flex-wrap:wrap;font-size:8px}footer span:last-child{display:none}.state-page{margin-top:30px;min-height:620px}.state-page h1{font-size:30px}.passport{max-width:350px}.passport-top{font-size:6px}.passport-body img{width:105px}.seal{font-size:45px}.passport-bottom{font-size:11px}.demo>span{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#status{font-size:11px;line-height:1.8;color:#6c805d;margin:12px 0}#status.error{color:#a14f45}button:disabled{opacity:.55;cursor:wait}#entry{margin-top:28px!important}.passport-top{gap:10px}.state-page{min-height:0;padding-bottom:26px}
