@font-face{font-family:'Caveat';src:url('assets/Caveat.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:'Dreena Chalk Chinese';src:url('assets/DreenaChalkCN.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{--ink:#e7e8e5;--muted:#949997;--gold:#ffe28b;--line:#303436;--pink:#ff9cce;--cyan:#7fe7ef;--yellow:#ffe28b;--green:#b9ef9a;--serif:Georgia,'Times New Roman',serif;--hand:'Caveat','Segoe Print','Bradley Hand',cursive;--chinese:'Dreena Chalk Chinese','Kaiti SC','KaiTi','STKaiti',serif;--sans:Arial,'Noto Sans',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:dark}body{margin:0;background:#101112;color:var(--ink);font-family:var(--sans);font-size:14px}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid #ffffff12;background:#111315}.brand{font-family:var(--serif);font-size:31px;letter-spacing:3px;line-height:1;color:#f3efe5}.brand span{font-family:var(--sans);display:block;font-size:8px;letter-spacing:4px;text-align:center;margin-top:9px;color:#b4b1a6}.edition{font-size:9px;letter-spacing:2.3px;color:#929795}.text-button{display:inline-flex;align-items:center;gap:14px;background:none;font-size:12px;padding:12px 0}.text-button:hover{color:var(--cyan)}.text-button span{font-size:18px}.introduction{max-width:1520px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;align-items:center;gap:42px;padding:48px 5% 43px}.eyebrow{font-size:9px;letter-spacing:2.1px;line-height:1.6;color:#d7d0b8}.diamond{font-size:19px;vertical-align:middle;margin-right:8px;color:var(--yellow);text-shadow:0 0 13px #ffe28b42}h1{font:400 clamp(33px,3.3vw,53px)/1.09 var(--serif);letter-spacing:-1.6px;margin:19px 0 20px}h1 em{font:500 1.15em/.9 var(--hand);letter-spacing:-.6px;color:var(--pink);text-shadow:0 0 1px #ff9cce,0 0 15px #ff82c036}h2 em{font:500 1.2em/1 var(--hand);color:var(--pink)}.intro-copy p{font-size:12px;line-height:1.75;color:var(--muted);margin:0}.anniversary{position:relative;width:236px;height:236px;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto}.orbit{position:absolute;inset:0;border:1px solid #e9d39580;border-radius:47% 51% 48% 49%;pointer-events:none;box-shadow:0 0 7px #ffe28b15}.orbit-one{inset:8px;transform:rotate(-25deg) scaleX(.9)}.orbit-two{inset:10px;transform:rotate(25deg) scaleX(1.04);border-color:#e5ca7e30;border-style:dashed}.years-label{font-size:8px;letter-spacing:3px;color:#d1c18e;margin-top:7px}.forty{font:500 123px/.8 var(--hand);letter-spacing:-9px;color:var(--yellow);position:relative;margin:12px 0 11px;text-shadow:0 0 2px #fff4bf99,0 0 18px #ffdc6840,0 0 40px #ffdc6814}.sparkle{position:absolute;right:-34px;top:-8px;font-size:37px;letter-spacing:0;color:var(--pink);text-shadow:0 0 12px #ff9cce55}.years{font-size:9px;letter-spacing:6px;color:#d2c498;margin-left:7px}.motto{font:500 23px var(--hand);margin-top:13px;color:var(--cyan);text-shadow:0 0 9px #7fe7ef38}.intro-action{justify-self:end}.small-label{font-size:8px;letter-spacing:1.6px;color:var(--muted)}.intro-action>p{font:500 31px/1.1 var(--hand);margin:16px 0 23px;color:#dedcd4}.primary{display:inline-flex;justify-content:center;align-items:center;gap:14px;background:#e4b8d2;color:#241923;padding:16px 23px;border:1px solid #f0bfdc;border-radius:4px;font-size:12px;letter-spacing:.2px;transition:background .2s,transform .2s}.primary:hover{background:#facfe7;transform:translateY(-1px);box-shadow:0 0 22px #ff8ccb17}.primary span{font-size:18px}.form-disclaimer{display:block;margin-top:12px;color:#919591;font-size:9px}.wall-section{max-width:1520px;margin:auto;padding:0 5%}.wall-toolbar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:21px 0 19px;gap:16px}.wall-heading{display:flex;align-items:center;gap:10px}.wall-heading h2{font-size:12px;font-weight:500;margin:0;color:#cdd2cc}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 9px #b9ef9a66}.sample-pill{font-size:7px;letter-spacing:1px;border:1px solid #3a403c;padding:5px 7px;margin-left:7px;border-radius:3px;color:#9aab9a}.wall-controls{display:flex;gap:17px;align-items:center}.control{display:flex;align-items:center;gap:6px;background:none;padding:4px 0;color:#a6aea7;font-size:10px}.control svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.control:hover{color:var(--cyan)}.wall-frame{position:relative;border:1px solid #3a3a36;border-radius:5px;padding:36px 24px;background-color:#151718;background-image:radial-gradient(ellipse at 30% 20%,#ffffff04,transparent 62%),radial-gradient(ellipse at 75% 75%,#6a6a6508,transparent 55%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.07' filter='url(%23n)'/%3E%3C/svg%3E");box-shadow:inset 0 0 55px #0009,0 0 0 5px #1e2021,0 0 0 6px #31322f;overflow:hidden}.wall-watermark{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%) rotate(-7deg);font:500 480px/.8 var(--hand);letter-spacing:-30px;color:#9fb6b808;pointer-events:none}.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 19px;position:relative;isolation:isolate}.slot{min-height:226px;position:relative;display:flex;align-items:stretch}.greeting-card{--neon:var(--yellow);--bloom:#ffe28b35;position:relative;width:100%;min-height:226px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;padding:12px 15px 14px;background:transparent;border:1px solid transparent;box-shadow:none;border-radius:9px;transform:rotate(var(--tilt,0deg));transition:border-color .2s,background .2s;will-change:transform;color:var(--neon)}.greeting-card:hover{border-color:#ffffff12;background:#ffffff03;z-index:5}.greeting-card.pink,.message-dialog.pink{--neon:var(--pink);--bloom:#ff9cce35}.greeting-card.green,.message-dialog.green{--neon:var(--green);--bloom:#b9ef9a35}.greeting-card.cyan,.message-dialog.cyan{--neon:var(--cyan);--bloom:#7fe7ef35}.greeting-card.yellow,.message-dialog.yellow{--neon:var(--yellow);--bloom:#ffe28b35}.card-top{display:flex;justify-content:center;align-items:center;color:var(--neon);line-height:1;opacity:.85;min-height:21px}.card-top .card-flower{font:24px var(--hand);text-shadow:0 0 12px var(--bloom)}.card-message{font:600 29px/1.04 var(--hand);letter-spacing:0;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;overflow-wrap:anywhere;text-shadow:0 0 1px var(--neon),0 0 9px var(--bloom),0 0 20px var(--bloom);padding:2px 3px 7px}.greeting-card[lang="zh"] .card-message{font:400 27px/1.38 var(--chinese);letter-spacing:1px}.card-bottom{padding-top:7px;display:flex;justify-content:center;align-items:center;gap:9px;color:#9daba4;position:relative}.card-bottom::before{content:'';position:absolute;top:0;left:13%;right:13%;border-top:1px solid var(--neon);opacity:.5;transform:rotate(-3deg);box-shadow:0 0 5px var(--bloom)}.sample-name{font-size:7px;text-transform:uppercase;letter-spacing:1.15px;line-height:1.5;text-shadow:none}.card-arrow{font-size:13px;color:#9faaa3}.slot:nth-child(3n+1) .greeting-card{padding-top:26px}.slot:nth-child(3n+2) .card-message{font-weight:500}.wall-bottom{display:flex;justify-content:space-between;align-items:center;padding:17px 0 23px;font-size:10px;color:#969e95}.wall-bottom .text-button{font-size:11px}.tiny-star{color:var(--pink);font-size:16px;margin-right:5px}footer{max-width:1520px;padding:23px 5% 28px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);font-size:9px;color:#8f958f}footer>span:first-child{font:15px var(--serif);letter-spacing:1px;color:#d4d3c9}.footer-light{font:7px var(--sans);margin-left:6px;letter-spacing:1px;color:#91978f}.prototype-tag{font-size:7px;letter-spacing:1.2px}dialog{color:var(--ink);background:#1b1e1f;border:1px solid #454a46;border-radius:8px;padding:42px;width:min(560px,calc(100vw - 32px));max-height:90dvh;box-shadow:0 25px 100px #0009;overflow:auto}dialog::backdrop{background:#030607bb;backdrop-filter:blur(7px)}.close-button{position:absolute;top:14px;right:17px;width:30px;height:30px;border-radius:50%;background:#2a2f2d;font-size:23px;font-weight:300;line-height:1;color:#c7d0c6}.close-button:hover{background:#3d4440}dialog h2{font:400 35px/1.12 var(--serif);letter-spacing:-.9px;margin:20px 0}.modal-intro{font-size:12px;line-height:1.7;color:#a2aba0;margin:0 0 27px}.message-dialog{--neon:var(--yellow);--bloom:#ffe28b35;padding:46px;background:#151819}.dialog-quote{display:block;font:70px/.8 var(--hand);color:var(--neon);margin:30px 0 4px;opacity:.7}.message-dialog #fullGreeting{font:500 42px/1.2 var(--hand);overflow-wrap:anywhere;margin:0 0 32px;color:var(--neon);text-shadow:0 0 1px var(--neon),0 0 12px var(--bloom)}.message-dialog #fullGreeting[lang="zh"]{font:400 34px/1.5 var(--chinese)}.message-signature{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:#a2ad9d}.small-diamond{font-size:25px;color:var(--neon)}.dialog-note{font-size:10px;color:#98a08f;margin:24px 0 0;border-top:1px solid #394035;padding-top:16px}form label,legend{display:block;font-size:11px;margin-bottom:10px;color:#c3ccbe}textarea{width:100%;background:#111516;border:1px solid #41483f;border-radius:4px;resize:vertical;padding:14px;font:500 24px/1.15 var(--hand);color:#f3dc9d;min-height:140px}textarea::placeholder{color:#8c9182}.field-note{display:flex;justify-content:space-between;gap:20px;margin-top:8px;font-size:8px;color:#a3ac9a;line-height:1.5}.field-note>span:last-child{white-space:nowrap}fieldset{border:0;padding:0;margin:24px 0}.color-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.color-option{--choice:var(--yellow);display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border:1px solid #464d40;border-radius:4px;margin:0;cursor:pointer;color:var(--choice);background:#131817}.color-option.pink{--choice:var(--pink)}.color-option.cyan{--choice:var(--cyan)}.color-option.green{--choice:var(--green)}.color-option:has(input:checked){border-color:var(--choice);box-shadow:0 0 9px #ffffff06}input[type=radio]{accent-color:var(--choice);margin:0}.privacy-note{display:flex;align-items:flex-start;gap:11px;padding:14px;background:#252d27;border:1px solid #364236;border-radius:3px;margin:0 0 24px;font-size:10px;line-height:1.65;color:#b2c2ad}.privacy-note>span{font-size:20px;line-height:1.3;color:#b9d2a7}.privacy-note p{margin:0}.full-width{width:100%}.journey{list-style:none;margin:0 0 28px;padding:0}.journey li{display:flex;gap:21px;padding:18px 0;border-top:1px solid #343c32}.journey li>span{font:30px var(--hand);color:var(--cyan)}.journey h3{font-size:12px;font-weight:500;margin:0 0 7px}.journey p{font-size:11px;line-height:1.6;color:#a1ae9c;margin:0}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,15px);opacity:0;background:#2e3830;color:#d4ebcf;border:1px solid #4d624c;padding:13px 20px;border-radius:5px;font-size:12px;box-shadow:0 5px 20px #0008;z-index:100;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.exit-display{display:none}.display-mode .topbar,.display-mode .intro-action,.display-mode .intro-copy p,.display-mode .wall-bottom,.display-mode footer,.display-mode .wall-controls,.display-mode .sample-pill{display:none}.display-mode .introduction{padding:24px 5%;grid-template-columns:1fr 1fr;gap:20px}.display-mode h1{font-size:clamp(32px,3.1vw,64px);margin:12px 0}.display-mode .anniversary{width:190px;height:190px;justify-self:end;margin:0}.display-mode .forty{font-size:96px}.display-mode .motto{font-size:19px;margin-top:11px}.display-mode .wall-toolbar{padding:15px 0}.display-mode .wall-section{max-width:1900px}.display-mode .wall-frame{padding:25px 28px}.display-mode .wall{gap:25px}.display-mode .slot,.display-mode .greeting-card{min-height:200px}.display-mode .exit-display{display:flex;gap:12px;align-items:center;position:fixed;bottom:16px;right:20px;background:#222b27ef;color:#d9e2d6;border:1px solid #465141;padding:11px 15px;border-radius:5px;font-size:11px;z-index:12}.display-mode .introduction{max-width:1900px}.display-mode .wall-heading h2::after{content:' · Sample writing';color:#98a18e;font-size:10px}.display-mode{min-height:100vh}
@media(min-width:1600px){.wall .greeting-card{min-height:260px}.card-message{font-size:36px}.greeting-card[lang="zh"] .card-message{font-size:32px}.wall{gap:35px}.display-mode .greeting-card{min-height:235px}}
@media(max-width:1050px){.introduction{gap:30px;grid-template-columns:1.2fr 1fr;padding:35px 5%}.intro-action{grid-column:1/-1;display:flex;align-items:center;gap:20px;justify-self:stretch;border-top:1px solid var(--line);padding-top:22px}.intro-action>.small-label,.intro-action>p{display:none}.intro-action .form-disclaimer{margin:0;font-size:10px}.wall{gap:23px;grid-template-columns:repeat(3,minmax(0,1fr))}.wall-frame{padding:28px 20px}.slot,.greeting-card{min-height:226px}.card-message{font-size:30px}.greeting-card{padding:20px 13px 17px}.display-mode .wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.display-mode .greeting-card{padding:20px 10px 14px}.display-mode .card-message{font-size:26px}.display-mode .slot,.display-mode .greeting-card{min-height:205px}}
@media(max-width:700px){.topbar{height:79px;padding:0 6%}.brand{font-size:26px}.brand span{font-size:6px;letter-spacing:3.2px}.edition{display:none}.topbar .text-button{font-size:10px;gap:7px}.introduction{padding:32px 6% 28px;grid-template-columns:1.3fr 1fr;gap:20px 5px}.eyebrow{font-size:8px;letter-spacing:1.25px}.diamond{margin-right:3px;font-size:14px}h1{font-size:31px;letter-spacing:-.7px;line-height:1.1;margin:16px 0}h1 em{font-size:1.2em;line-height:.85}.intro-copy p{font-size:10px;line-height:1.65}.anniversary{width:144px;height:144px;margin:0;justify-self:end}.orbit-one{inset:3px}.orbit-two{inset:8px}.years-label{font-size:5px;letter-spacing:2px}.forty{font-size:77px;letter-spacing:-5px;margin:8px 0}.sparkle{font-size:24px;right:-20px;top:-5px}.years{font-size:7px;letter-spacing:3px}.motto{font-size:14px;margin-top:9px}.intro-action{padding-top:20px;margin-top:4px;gap:13px}.intro-action .primary{padding:13px 17px;font-size:11px;white-space:nowrap}.intro-action .form-disclaimer{font-size:8px;line-height:1.5;max-width:130px}.wall-section{padding:0 5%}.wall-toolbar{align-items:flex-start;flex-direction:column;gap:16px;padding:17px 0}.wall-heading{gap:9px}.wall-heading h2{font-size:11px}.sample-pill{font-size:6px;padding:4px 6px}.wall-controls{width:100%;justify-content:flex-end;gap:21px}.control{font-size:10px}.wall-frame{padding:22px 9px}.wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 9px}.slot,.greeting-card{min-height:235px}.greeting-card{padding:12px 7px 14px;gap:8px}.card-message{font-size:27px;line-height:1.03;letter-spacing:0;-webkit-line-clamp:6;text-shadow:0 0 1px var(--neon),0 0 8px var(--bloom)}.greeting-card[lang="zh"] .card-message{font-size:24px;line-height:1.36;letter-spacing:.4px}.sample-name{font-size:6px;letter-spacing:.65px}.card-top .card-flower{font-size:21px}.card-arrow{font-size:11px}.card-bottom{gap:5px}.wall-bottom{align-items:flex-start;gap:8px;flex-direction:column;padding:18px 3px}.wall-bottom>span{font-size:9px}.wall-bottom .text-button{font-size:11px;align-self:flex-end;padding:3px 0}.wall-watermark{font-size:340px;letter-spacing:-25px}footer{padding:22px 6%;flex-wrap:wrap;gap:13px;font-size:8px}footer>span:nth-child(2){display:none}.prototype-tag{font-size:6px;letter-spacing:.7px}dialog{padding:35px 25px}dialog h2{font-size:32px}.message-dialog{padding:40px 28px}.message-dialog #fullGreeting{font-size:36px}.message-dialog #fullGreeting[lang="zh"]{font-size:29px}.color-options{gap:7px;grid-template-columns:repeat(2,1fr)}.color-option{padding:12px 10px;font-size:11px}.display-mode .introduction{padding:25px 6%;grid-template-columns:1.3fr 1fr;gap:10px}.display-mode h1{font-size:28px}.display-mode .anniversary{width:130px;height:130px}.display-mode .forty{font-size:69px}.display-mode .years-label{font-size:5px}.display-mode .motto{font-size:13px}.display-mode .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}.display-mode .wall-frame{padding:23px 10px}.display-mode .greeting-card{padding:12px 7px}.display-mode .card-message{font-size:27px}.display-mode .exit-display{font-size:10px;bottom:13px;right:13px}}
@media(max-width:370px){h1{font-size:27px}.anniversary{width:123px;height:123px}.forty{font-size:66px}.intro-copy p{font-size:9px}.card-message{font-size:25px}.greeting-card[lang="zh"] .card-message{font-size:22px}.greeting-card{padding:12px 5px}.wall{gap:18px 6px}.wall-frame{padding:20px 7px}.sample-pill{margin-left:0}.wall-heading h2{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.greeting-card{will-change:auto}}