:root{--bg:#faf8f5;--card:#fff;--fg:#363433;--mu:#a39e99;--ac:#d4a5a5;--ac2:#b98585;--ln:#efeae4;--sh:0 6px 30px rgba(60,40,30,.06)}
.dark{--bg:#17161a;--card:#222127;--fg:#ece8e4;--mu:#8a8580;--ac:#d9a9a9;--ac2:#e3b7b7;--ln:#2e2c33;--sh:0 6px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,"PingFang SC","Helvetica Neue","Noto Sans SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--fg);transition:background .5s,color .5s;letter-spacing:.02em}
h1,h2,h3{font-weight:400;letter-spacing:.06em}.muted{color:var(--mu)}.small{font-size:12px}.err{color:#d77;height:1em}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}}@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}.beat{display:inline-block;animation:beat 2.4s infinite}.pop{animation:pop .3s ease both}
#lock{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#fbe9e4,transparent 60%),radial-gradient(circle at 80% 90%,#e5efe8,transparent 55%),var(--bg);z-index:20;transition:opacity .6s}
#lock.out{opacity:0;pointer-events:none}
.lockbox{background:var(--card);padding:44px 32px;border-radius:28px;box-shadow:var(--sh);text-align:center;width:min(320px,88vw)}.heart{font-size:44px;color:var(--ac)}
input,textarea,select{width:100%;padding:12px 14px;border:1px solid var(--ln);border-radius:14px;margin:6px 0;font:inherit;background:var(--bg);color:var(--fg);outline:none;transition:border .2s}input:focus,textarea:focus{border-color:var(--ac)}textarea{min-height:90px;resize:vertical}
button,.btn{background:var(--card);color:var(--fg);border:1px solid var(--ln);border-radius:999px;padding:9px 18px;margin:6px 4px 0 0;font:inherit;font-size:14px;cursor:pointer;display:inline-block;transition:all .2s}
button:hover,.btn:hover{transform:translateY(-1px)}.pri{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.topbar{position:absolute;top:12px;right:12px;z-index:6;display:flex;gap:6px}.ic{width:38px;height:38px;padding:0;margin:0;border-radius:50%;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:0;color:#555}.dark .ic{background:rgba(40,40,45,.7);color:#ddd}.ic.on{color:var(--ac2)}
.hero{min-height:62vh;display:flex;align-items:flex-end;justify-content:center;text-align:center;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45)),var(--cover,linear-gradient(135deg,#e9c9c1,#c9d6cc 60%,#b7c4cf));background-size:cover;background-position:center;padding:60px 20px 40px;border-radius:0 0 32px 32px}
.hero h1{margin:6px 0;font-size:clamp(24px,7vw,40px);text-shadow:0 2px 20px rgba(0,0,0,.2)}.hero h1 span{color:#ffd9d9}.since{letter-spacing:.4em;font-size:11px;opacity:.85;margin:0}.cnt{font-size:15px;margin:8px 0}.cnt b{font-size:30px;font-weight:300;margin:0 4px}.sub{font-size:13px;opacity:.85;margin:0 0 14px}
.ghost{font-size:12px;border:1px solid rgba(255,255,255,.6);padding:6px 14px;border-radius:999px;cursor:pointer;opacity:.85}
nav{position:sticky;top:0;z-index:5;display:flex;gap:2px;overflow-x:auto;padding:10px 12px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px);scrollbar-width:none;justify-content:safe center}nav::-webkit-scrollbar{display:none}
nav button{border:0;background:none;color:var(--mu);white-space:nowrap;padding:8px 12px;margin:0;position:relative}nav button.on{color:var(--fg)}nav button.on:after{content:"";position:absolute;left:35%;right:35%;bottom:2px;height:2px;border-radius:2px;background:var(--ac)}
main{max-width:660px;margin:auto;padding:8px 16px 80px}.card{background:var(--card);border-radius:22px;padding:20px;margin:14px 0;box-shadow:var(--sh);animation:rise .5s both}
.sec-h{display:flex;justify-content:space-between;align-items:center;margin:18px 0 4px}.sec-h h2{font-size:18px;margin:0}.sec-h p{margin:2px 0 0;font-size:12px;color:var(--mu)}
.otd{background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 18%,var(--card)),var(--card))}.otd .lab{font-size:11px;letter-spacing:.3em;color:var(--ac2)}
.tl{position:relative;padding-left:22px}.tl:before{content:"";position:absolute;left:6px;top:20px;bottom:20px;width:1px;background:var(--ln)}.tl .card{position:relative}.tl .card:before{content:"";position:absolute;left:-20px;top:26px;width:9px;height:9px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 4px var(--bg)}
.d{color:var(--ac2);font-size:12px;letter-spacing:.1em}.mood{float:right;font-size:13px;color:var(--mu)}.card h3{margin:6px 0;font-size:17px}.card p{white-space:pre-wrap;line-height:1.8;margin:6px 0}
.ph{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}.ph img,#grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;cursor:zoom-in;transition:transform .3s}.ph img:hover,#grid img:hover{transform:scale(1.03)}
#grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.ops{margin-top:8px;text-align:right}.ops button{border:0;background:none;color:var(--mu);font-size:12px;padding:4px 8px}
.empty{text-align:center;padding:36px 20px;color:var(--mu)}.empty .e{font-size:38px;opacity:.6}
.chk{display:flex;align-items:center;gap:12px;padding:14px 18px}.chk .box{width:22px;height:22px;flex:none;border-radius:50%;border:1.5px solid var(--ac);display:grid;place-items:center;cursor:pointer;color:#fff;font-size:12px;transition:all .25s;margin:0;padding:0}.chk.done .box{background:var(--ac)}.chk.done .t{text-decoration:line-through;color:var(--mu)}.chk .t{flex:1}.chk .ops{margin:0}
.letter{font-family:"Songti SC","STSong","Noto Serif SC",serif;background:var(--card) repeating-linear-gradient(transparent 0 31px,var(--ln) 31px 32px);line-height:32px}.letter p{line-height:32px}.letter .to{color:var(--ac2)}
.anni{display:flex;justify-content:space-between;align-items:center}.anni b{color:var(--ac2);font-size:22px;font-weight:300}
.sample{font-size:10px;color:var(--ac2);border:1px solid var(--ac);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:30;animation:pop .25s}#lb img{max-width:94%;max-height:90%;border-radius:10px}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);z-index:25;display:flex;align-items:flex-end;justify-content:center}#modal .card{width:min(560px,100%);margin:0;border-radius:26px 26px 0 0;max-height:88vh;overflow:auto}
@media(min-width:600px){#modal{align-items:center}#modal .card{border-radius:26px}}
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(80px);background:var(--fg);color:var(--bg);padding:10px 20px;border-radius:999px;font-size:13px;transition:transform .35s;z-index:40}#toast.show{transform:translateX(-50%)}
.moods{display:flex;gap:6px;flex-wrap:wrap}.moods label{cursor:pointer}.moods input{display:none}.moods span{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--ln);font-size:13px}.moods input:checked+span{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 18%,transparent)}
[hidden]{display:none!important}
/* ===== refined polish ===== */
:root{--serif:"Cormorant Garamond","Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,serif;--ease:cubic-bezier(.22,.8,.24,1)}
body{font-family:"Inter","PingFang SC","Noto Sans SC","Hiragino Sans GB","Helvetica Neue",sans-serif;font-size:15px;line-height:1.75;font-weight:350;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dark body::before{mix-blend-mode:screen;opacity:.04}
body{background:radial-gradient(1200px 600px at 100% 0,color-mix(in srgb,var(--ac) 9%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
h1,h2,h3,.lockbox h2,.cnt b,.anni b{font-family:var(--serif);font-weight:500}
.sec-h{margin:34px 0 8px}.sec-h h2{font-size:22px;letter-spacing:.12em}.sec-h p{letter-spacing:.08em}
.card{padding:22px 22px 18px;margin:18px 0;border-radius:24px;border:1px solid color-mix(in srgb,var(--ln) 70%,transparent);transition:transform .4s var(--ease),box-shadow .4s}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(60,40,30,.09)}
.card h3{font-size:19px;letter-spacing:.06em}.d{font-family:var(--serif);font-size:13px;letter-spacing:.18em}
/* glass nav */
nav{margin:-26px auto 0;width:max-content;max-width:calc(100% - 24px);border-radius:999px;padding:6px;background:color-mix(in srgb,var(--card) 62%,transparent);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid color-mix(in srgb,#fff 50%,transparent);box-shadow:0 8px 30px rgba(60,40,30,.10);top:10px;justify-content:flex-start}
.dark nav{border-color:rgba(255,255,255,.08)}
nav button{border-radius:999px;font-size:13px;letter-spacing:.08em;padding:8px 14px;transition:color .3s,background .3s}
nav button.on{background:var(--fg);color:var(--bg)}nav button.on:after{display:none}
/* hero */
.hero{min-height:70vh;position:relative;overflow:hidden;border-radius:0 0 40px 40px}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 100%,rgba(0,0,0,.25),transparent)}
.heroin{position:relative;z-index:2}.hero h1{font-size:clamp(30px,8vw,48px);letter-spacing:.12em;margin:10px 0 4px}
.since{font-family:var(--serif);letter-spacing:.5em}.cnt b{font-size:44px;font-weight:400}
.petal{position:absolute;top:-20px;width:12px;height:12px;border-radius:12px 0;background:linear-gradient(135deg,#fff,#ffd6d6);opacity:.7;transform:scale(var(--s));animation:fall linear infinite;z-index:1;filter:blur(.3px)}
@keyframes fall{0%{transform:translate(0,-20px) rotate(0) scale(var(--s));opacity:0}10%{opacity:.75}100%{transform:translate(var(--x),75vh) rotate(540deg) scale(var(--s));opacity:0}}
.ghost{backdrop-filter:blur(8px);background:rgba(255,255,255,.12);letter-spacing:.15em;transition:background .3s}.ghost:hover{background:rgba(255,255,255,.25)}
/* polaroid */
.ph{gap:14px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:6px 2px}
.ph img{background:#fff;padding:7px 7px 24px;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.12);transform:rotate(-1.5deg)}
.ph img:nth-child(even){transform:rotate(1.8deg)}.ph img:hover{transform:rotate(0) scale(1.05)}
#grid{gap:10px}#grid img{border-radius:6px;filter:saturate(.92) contrast(1.02);box-shadow:0 2px 10px rgba(0,0,0,.06)}#grid img:hover{filter:none}
.dark .ph img{background:#efe9e2}
/* transitions */
#main.swap>*{animation:rise .6s var(--ease) both}#main.swap>*:nth-child(2){animation-delay:.05s}#main.swap>*:nth-child(3){animation-delay:.1s}#main.swap>*:nth-child(4){animation-delay:.15s}#main.swap>*:nth-child(n+5){animation-delay:.2s}
.tl .card{animation:rise .6s var(--ease) both}
/* buttons */
button,.btn{position:relative;overflow:hidden;transition:transform .25s var(--ease),background .3s,box-shadow .3s;letter-spacing:.06em}
button:active,.btn:active{transform:scale(.96)}.pri:hover{box-shadow:0 8px 20px rgba(0,0,0,.15)}
.rip{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:currentColor;opacity:.25;pointer-events:none;animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(30);opacity:0}}
.ic{display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.08)}.svg{display:block}
.empty .e,.empty>.svg{margin:0 auto 6px;color:var(--ac);opacity:.8}.empty p:first-of-type{font-family:var(--serif);font-size:17px;color:var(--fg)}
.chk .box{width:24px;height:24px}.chk.done .box{animation:pop .35s var(--ease)}
.letter{padding:28px 26px}.letter .to{font-family:var(--serif);font-size:18px;letter-spacing:.1em}
/* lock */
#lock{overflow:hidden}.blob{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.b1{background:#f6d4cf;top:-20vmax;left:-15vmax}.b2{background:#d4e4da;bottom:-25vmax;right:-15vmax;animation-delay:-9s}
.dark .b1{background:#4a3236}.dark .b2{background:#2c3b34}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}
.lockbox{position:relative;background:color-mix(in srgb,var(--card) 70%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.6);padding:48px 34px 36px;border-radius:32px}
.lockbox h2{font-size:26px;letter-spacing:.2em;margin:14px 0 2px}.tag{letter-spacing:.2em;font-size:12px;margin:0}.dt{font-family:var(--serif);letter-spacing:.4em;color:var(--ac2);font-size:12px;margin:4px 0 22px}
.ring{width:84px;height:84px;margin:auto;border-radius:50%;display:grid;place-items:center;position:relative}
.ring:before,.ring:after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--ac);animation:halo 3s ease-out infinite}.ring:after{animation-delay:1.5s}
@keyframes halo{from{transform:scale(.7);opacity:.8}to{transform:scale(1.5);opacity:0}}
.lockbox input{text-align:center;letter-spacing:.5em;font-size:18px;border-radius:999px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.lockbox .pri{width:100%;padding:12px;margin-top:10px}
.shake{animation:shake .45s}@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
#lock.out{transition:opacity .8s,transform .8s var(--ease);transform:scale(1.06)}
#modal .card{animation:rise .45s var(--ease) both}
nav button{flex:none}nav{overflow-x:auto}
.lockbox input::placeholder{letter-spacing:.15em;font-size:14px}
/* ===== interactive ===== */
:root{--w1:#f6e7e2;--w2:#e7efe9}.dark{--w1:#3a2f31;--w2:#2b3530}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
#who{position:fixed;inset:0;z-index:21;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#fbe9e4,transparent 60%),radial-gradient(circle at 80% 90%,#e5efe8,transparent 55%),var(--bg)}
.whos{display:flex;gap:14px;justify-content:center;margin-top:22px}.whos button{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 22px;border-radius:22px;background:var(--card)}
.av{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#f3d3cc,#e7b8b8);color:#fff;font-family:var(--serif);font-size:18px}
.whos button:nth-child(2) .av,.av.b{background:linear-gradient(135deg,#cfe0d6,#a9c4b5)}
.av.sm{width:22px;height:22px;font-size:11px;vertical-align:middle;margin-right:4px}
.avs{font-family:var(--serif);font-size:14px;color:var(--ac2)}
.soc{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--ln);font-size:12px;color:var(--mu)}.soc .by{flex:1}
.soc button{border:0;background:none;padding:4px 8px;margin:0;color:var(--mu);display:inline-flex;align-items:center;gap:4px;font-size:12px}
.like.on{color:#e07a7a}.like.on svg{fill:currentColor;animation:pop .35s}
.cms{margin-top:8px;background:var(--bg);border-radius:14px;padding:8px 12px;font-size:13px}.cmi{padding:3px 0}.cmi b{font-weight:500;margin-right:4px}
.by{font-size:12px;color:var(--mu);margin-top:6px}
.bigheart{position:absolute;transform:translate(-50%,-50%);color:#fff;pointer-events:none;animation:bh .9s var(--ease) forwards;filter:drop-shadow(0 4px 12px rgba(224,122,122,.6))}.bigheart svg{fill:#f08c8c;stroke:#fff}
@keyframes bh{0%{transform:translate(-50%,-50%) scale(0);opacity:0}30%{transform:translate(-50%,-50%) scale(1.2);opacity:1}60%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-80%) scale(.9);opacity:0}}
.poke{display:flex;justify-content:space-between;align-items:center;gap:12px}.poke h3{font-size:15px}
.pokeBtn{width:88px;height:88px;flex:none;border-radius:50%;border:0;margin:0;background:radial-gradient(circle at 35% 30%,#f7c9c4,#e39b9b);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;box-shadow:0 10px 30px rgba(227,155,155,.45)}
.pokeBtn svg{fill:#fff}.pokeBtn.pulse{animation:pk .45s var(--ease)}@keyframes pk{40%{transform:scale(.85)}70%{transform:scale(1.12)}}
.pokeBtn:before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid #e9b0b0;animation:halo 2.4s infinite}.pokeBtn{overflow:visible}
.moodrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.mcol{background:var(--bg);border-radius:16px;padding:12px;font-size:13px}.mval{margin-top:6px;font-family:var(--serif);font-size:17px}.mood-ic{color:var(--ac2);margin-right:6px}
.moodpick{display:flex;flex-wrap:wrap;gap:4px}.moodpick button{font-size:13px;padding:7px 13px}.moodpick button span{color:var(--ac2);margin-right:4px}.moodpick button.on{background:var(--fg);color:var(--bg)}
.qa h3{font-size:18px;line-height:1.6}.ans{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border-radius:16px;padding:10px 14px;margin:8px 0}.ans p{margin:0}.ans .av{flex:none}
.reveal{animation:rise .6s var(--ease)}.hidden-ans{filter:saturate(.5)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}.opts button{margin:0;border-radius:16px;padding:12px}
.score{display:flex;align-items:baseline;gap:6px;margin-top:14px}.score b{font-family:var(--serif);font-size:44px;font-weight:400;color:var(--ac2)}
.wheelwrap{position:relative;width:min(280px,76vw);aspect-ratio:1;margin:16px auto 8px}
.wheel{position:absolute;inset:0;border-radius:50%;transition:transform 4s cubic-bezier(.17,.67,.12,1);box-shadow:0 10px 40px rgba(60,40,30,.12),inset 0 0 0 6px var(--card)}
.wheel span{position:absolute;left:50%;top:0;height:50%;transform-origin:bottom center;width:0}.wheel i{position:absolute;top:14px;left:0;transform:translateX(-50%);font-style:normal;font-size:12px;writing-mode:vertical-rl;letter-spacing:.1em;color:var(--fg)}
.pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border:10px solid transparent;border-top:16px solid var(--ac2);z-index:2}
.hub{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--fg);color:var(--bg);font-family:var(--serif);font-size:20px;z-index:2;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.hub:hover{transform:scale(1.05)}.result{text-align:center;font-family:var(--serif);font-size:17px}.result b{color:var(--ac2);font-size:22px}
.env{text-align:center}.envelope{position:relative;width:180px;height:116px;margin:10px auto 16px;background:linear-gradient(160deg,#f7ece6,#efdcd4);border-radius:10px;box-shadow:0 10px 30px rgba(60,40,30,.12);cursor:pointer;perspective:600px}
.dark .envelope{background:linear-gradient(160deg,#3b3234,#33292b)}
.envelope:before{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(to top right,transparent 49.5%,rgba(0,0,0,.05) 50%,transparent 50.5%),linear-gradient(to top left,transparent 49.5%,rgba(0,0,0,.05) 50%,transparent 50.5%)}
.flap{position:absolute;left:0;right:0;top:0;height:60%;background:linear-gradient(180deg,#f2ddd5,#ead0c6);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s var(--ease);border-radius:10px 10px 0 0}
.dark .flap{background:#45383a}
.seal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8a8a8,#c57f7f);color:#fff;display:grid;place-items:center;box-shadow:0 3px 8px rgba(160,80,80,.4);transition:all .4s}
.envelope:hover{animation:wig .6s}@keyframes wig{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.opening .flap{transform:rotateX(180deg)}.opening .seal{transform:translate(-50%,-50%) scale(0);opacity:0}.opening{animation:lift .9s var(--ease) forwards}@keyframes lift{60%{transform:translateY(-8px)}100%{transform:translateY(-4px) scale(1.05);opacity:.3}}
.locked .envelope{cursor:not-allowed;filter:grayscale(.3)}
.stackBtn{width:100%;margin:6px 0 0;padding:12px;display:flex;justify-content:center;align-items:center;gap:8px;background:color-mix(in srgb,var(--ac) 12%,var(--card))}
#stack{position:fixed;inset:0;z-index:28;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:pop .3s}
#stack .close{position:absolute;top:16px;right:16px;font-size:22px}
.deck{position:relative;width:min(320px,82vw);height:440px}
.sc{position:absolute;inset:0;background:var(--card);border-radius:24px;padding:14px 14px 20px;box-shadow:0 20px 50px rgba(60,40,30,.15);transform:translateY(calc(var(--k)*14px)) scale(calc(1 - var(--k)*.05));transition:transform .35s var(--ease),opacity .3s;touch-action:none;user-select:none}
.sc.top{cursor:grab}.sc img,.sc .noimg{width:100%;height:250px;object-fit:cover;border-radius:16px;pointer-events:none}.sc .noimg{display:grid;place-items:center;background:var(--bg);color:var(--ac)}
.sc h3{margin:8px 0 2px}.sc p{font-size:14px;margin:2px 0}.sc .d{margin-top:12px}.hint{color:var(--mu);font-size:12px;letter-spacing:.1em;margin-top:24px}.end{text-align:center;font-family:var(--serif);font-size:20px;padding-top:150px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:10px 0 4px}.chip{flex:none;margin:0;padding:6px 14px;font-size:13px}.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.wheel i{writing-mode:vertical-rl;font-size:12.5px;top:16px;letter-spacing:.04em;line-height:1}
.fedit{margin-top:14px;padding-top:14px;border-top:1px dashed var(--ln)}.fadd{display:flex;gap:6px;align-items:center}.fadd input{flex:1}.fadd select{width:auto}.fadd button{margin:0;flex:none}
.ftags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;max-height:220px;overflow:auto}.ftag{font-size:13px;background:var(--bg);border:1px solid var(--ln);border-radius:999px;padding:4px 4px 4px 12px;display:inline-flex;align-items:center}.ftag button{border:0;background:none;padding:0 6px;margin:0;color:var(--mu)}
/* ===== polish 3 ===== */
.empty .cta{margin-top:14px}
.greet{margin:30px 4px 6px}.greet h2{margin:0;font-size:24px}.greet a{color:var(--ac2);cursor:pointer;border-bottom:1px solid}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.stat{margin:0;border-radius:20px;padding:14px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--card);box-shadow:var(--sh)}.stat b{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ac2)}.stat span{font-size:12px;color:var(--mu)}
.row2{display:flex;gap:6px}.row2 button{flex:1;margin:0;display:inline-flex;justify-content:center;align-items:center;gap:6px}.row2 .pri svg{fill:currentColor}
.mini{display:grid;grid-template-columns:1fr auto 64px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--ln)}.mini:last-child{border:0}.mini b{text-align:right;font-family:var(--serif);font-weight:400;color:var(--ac2)}
.strip{display:flex;gap:8px;overflow-x:auto;margin-top:10px;scrollbar-width:none}.strip img{width:88px;height:88px;flex:none;object-fit:cover;border-radius:14px;cursor:zoom-in}
.nextA{text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 20%,var(--card)),var(--card))}.nextA .big{font-family:var(--serif);font-size:18px}.nextA .big b{font-size:54px;font-weight:300;color:var(--ac2)}
.bar{height:4px;border-radius:4px;background:var(--ln);margin:12px auto 6px;max-width:260px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ac);border-radius:4px;transition:width 1s var(--ease)}
.arow{gap:12px;padding:14px 18px}.aic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ac2);flex:none}.ai{flex:1}.ai h3{margin:0;font-size:16px}.arow b{font-size:22px}.ops-x{border:0;background:none;color:var(--mu);margin:0;padding:4px}
.pastl{display:flex;flex-wrap:wrap;gap:6px}.pastl span{font-size:12px;color:var(--mu);border:1px solid var(--ln);border-radius:999px;padding:4px 12px;display:inline-flex;align-items:center;gap:4px}.pastl svg{color:var(--ac)}
.studio .paper{background:var(--card) repeating-linear-gradient(transparent 0 33px,var(--ln) 33px 34px);border-radius:16px;padding:6px 4px;font-family:"Songti SC","STSong","Noto Serif SC",serif}
.studio .ttl{border:0;background:none;font-size:20px;font-family:var(--serif);color:var(--ac2);padding:8px 0}
.studio textarea{border:0;background:transparent;min-height:220px;line-height:34px;padding:0;font-family:inherit;font-size:16px;resize:none}
.studio .sign{text-align:right;color:var(--mu);font-size:14px}.studio .sign input{width:auto;border:0;background:none;padding:0;color:var(--mu);font:inherit}
.prompts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:6px 0}.prompts .chip{font-size:12px;padding:5px 12px}.chip.on{background:var(--fg);color:var(--bg)}
.capt{display:flex;align-items:center;gap:8px;font-size:14px;margin:14px 0 4px;cursor:pointer}.capt input{width:auto;margin:0;accent-color:var(--ac2)}.cnt2{text-align:right;margin:0}
.wheel i{font-size:12px}
/* ===== features ===== */
.timer{font-size:12px;letter-spacing:.12em;opacity:.9;margin:0 0 8px;font-variant-numeric:tabular-nums}.timer b{font-family:var(--serif);font-weight:400;font-size:16px;margin:0 2px}
.mile{text-align:center;background:linear-gradient(150deg,#f8e1dc,#efe6d6 60%,#e0ebe4);color:#4a3b38}.mile h2{font-size:26px;margin:6px 0}.dark .mile{background:linear-gradient(150deg,#4a3236,#3b3528 60%,#2c3b34);color:#f0e6e2}
.hprog{display:flex;align-items:center;gap:18px}.ring2{--p:0;width:86px;height:86px;flex:none;border-radius:50%;background:conic-gradient(var(--ac) calc(var(--p)*1%),var(--ln) 0);display:grid;place-items:center;position:relative}.ring2:before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--card)}.ring2 b,.ring2 span{position:relative}.ring2 b{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1;margin-top:18px}.ring2 span{font-size:11px;color:var(--mu);margin-top:-22px}
.hlist{background:var(--card);border-radius:24px;box-shadow:var(--sh);padding:6px 16px;margin-top:12px}.hrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ln)}.hrow:last-child{border:0}
.hrow .no{font-family:var(--serif);color:var(--ac2);font-size:13px;width:22px}.hrow .t{flex:1;font-size:14px}.hrow small{display:block;color:var(--mu);font-size:11px}.hrow img{width:38px;height:38px;border-radius:8px;object-fit:cover}
.hrow .box{width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid var(--ac);background:none;margin:0;padding:0;color:#fff;font-size:12px}.hrow.done .box{background:var(--ac)}.hrow.done .t{color:var(--mu)}
.streak .sgrid{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;margin-top:8px}
.tree{width:120px;height:100px;display:block;margin:auto}.tree .soil{fill:color-mix(in srgb,var(--ac) 25%,var(--ln))}.tree .seed{fill:#c9a27e}.tree .trunk{stroke:#b89478;stroke-width:3;fill:none;stroke-linecap:round}.tree .leaf{fill:#a9c9b2;opacity:.9;animation:pop .6s var(--ease) both}.tree .fl{fill:#ec9d9d}.tname{text-align:center;margin:0;font-family:var(--serif);font-size:14px;color:var(--ac2)}
.mon{margin:0 0 4px;font-family:var(--serif);font-size:14px}.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}.cal em{font-style:normal;font-size:10px;color:var(--mu)}.cal i{font-style:normal;font-size:11px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:var(--mu)}
.cal i.a{background:color-mix(in srgb,var(--ac) 22%,transparent);color:var(--fg)}.cal i.b{background:var(--ac);color:#fff}.cal i.b svg{fill:#fff}.cal i.now{outline:1px solid var(--ac2)}.ckbtn{width:100%;margin-top:12px}
.chat{display:flex;flex-direction:column;gap:12px;margin:14px 0}.bub{display:flex;gap:8px;align-items:flex-end;max-width:85%;animation:rise .4s var(--ease) both}.bub>div{background:var(--card);box-shadow:var(--sh);border-radius:20px 20px 20px 6px;padding:10px 14px}.bub p{margin:2px 0;line-height:1.6}
.bub.me{align-self:flex-end;flex-direction:row-reverse}.bub.me>div{background:var(--fg);color:var(--bg);border-radius:20px 20px 6px 20px}.bub small{font-size:10px;opacity:.6}.kind{font-size:11px;color:var(--ac2)}.bub.me .kind{color:var(--ac)}
.compose{position:sticky;bottom:12px;padding:12px}.kinds{display:flex;gap:6px;margin-bottom:6px;overflow-x:auto}
.rep{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--card),color-mix(in srgb,#c9d6cc 25%,var(--card)))}
.report{text-align:center}.report .stats{grid-template-columns:repeat(4,1fr)}.report .stat b{font-size:20px}
.goal .bar{max-width:none}.typing:after{content:"|";animation:blink 1s infinite;color:var(--ac2)}@keyframes blink{50%{opacity:0}}
.ghost{background:rgba(255,255,255,.12);color:#fff;font-size:12px}
@media(max-width:380px){.streak .sgrid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
/* ===== craft details ===== */
/* paper texture on cards */
.card{background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fg) 4%,transparent) 1px,transparent 0);background-size:14px 14px;background-color:var(--card)}
/* washi tape on memory & letter cards */
.tl .card:after,.letter:after,.mile:after{content:"";position:absolute;top:-9px;left:50%;width:86px;height:20px;transform:translateX(-50%) rotate(-3deg);background:repeating-linear-gradient(45deg,rgba(232,170,170,.55) 0 6px,rgba(255,240,236,.55) 6px 12px);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tl .card:nth-child(even):after{background:repeating-linear-gradient(90deg,rgba(169,201,178,.55) 0 5px,rgba(240,248,242,.55) 5px 10px);transform:translateX(-30%) rotate(2deg)}
.letter,.mile{position:relative;overflow:visible}
/* corner decorations */
.card.otd:before,.nextA:before,.rep:before{content:"";position:absolute;top:10px;right:10px;width:26px;height:26px;border-top:1px solid var(--ac);border-right:1px solid var(--ac);border-radius:0 10px 0 0;opacity:.6}
.card.otd,.nextA,.rep{position:relative}
.card.otd:after{content:"";position:absolute;bottom:10px;left:10px;width:26px;height:26px;border-bottom:1px solid var(--ac);border-left:1px solid var(--ac);border-radius:0 0 0 10px;opacity:.6}
/* postage stamp on letters */
.letter .d:after{content:"♡";float:right;width:38px;height:46px;margin:-6px -4px 0 0;display:grid;place-items:center;color:var(--ac2);font-size:18px;background:color-mix(in srgb,var(--ac) 14%,var(--card));
 -webkit-mask:radial-gradient(circle 3px at 3px 3px,#0000 98%,#000) -3px -3px/7px 7px;mask:radial-gradient(circle 3px at 3px 3px,#0000 98%,#000) -3px -3px/7px 7px;transform:rotate(4deg)}
.letter .by{text-align:right;font-family:var(--serif)}
.letter{background-image:repeating-linear-gradient(transparent 0 31px,color-mix(in srgb,var(--ac) 22%,var(--ln)) 31px 32px),linear-gradient(90deg,transparent 30px,color-mix(in srgb,var(--ac) 35%,transparent) 30px 31px,transparent 31px)}
/* wax seal refinement */
.seal{background:radial-gradient(circle at 35% 30%,#eab0b0,#b86f6f 70%);box-shadow:0 3px 8px rgba(160,80,80,.4),inset 0 0 0 3px rgba(255,255,255,.18)}
/* polaroid captions */
.ph{counter-reset:pc}.ph img{counter-increment:pc}
.sc img{border:8px solid #fff;border-bottom-width:30px;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.strip img{border:4px solid #fff;border-bottom-width:14px;border-radius:3px;box-shadow:0 3px 8px rgba(0,0,0,.1);transform:rotate(-2deg)}.strip img:nth-child(even){transform:rotate(2deg)}
/* separators */
.sec-h{position:relative;padding-bottom:12px}.sec-h:after{content:"· ♡ ·";position:absolute;left:0;bottom:-6px;font-size:10px;letter-spacing:.4em;color:var(--ac)}
.mini{border-bottom:0;background:linear-gradient(90deg,var(--ln) 50%,transparent 0) bottom/8px 1px repeat-x}
/* refined form fields */
input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select{border-radius:14px;border:1px solid var(--ln);background:color-mix(in srgb,var(--bg) 70%,var(--card));box-shadow:inset 0 1px 2px rgba(0,0,0,.03);transition:border .25s,box-shadow .25s,background .25s}
input:focus,textarea:focus,select:focus{border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 18%,transparent);background:var(--card)}
input[type=file]{font-size:12px;color:var(--mu);border:1px dashed var(--ac);border-radius:14px;padding:12px;width:100%;background:color-mix(in srgb,var(--ac) 6%,transparent)}
input[type=file]::file-selector-button{border:0;border-radius:999px;background:var(--fg);color:var(--bg);padding:6px 14px;margin-right:10px;font:inherit}
/* cute empty illustrations */
.empty>.svg{width:64px;height:64px;padding:14px;border-radius:50%;background:color-mix(in srgb,var(--ac) 14%,var(--card));box-shadow:0 0 0 8px color-mix(in srgb,var(--ac) 7%,transparent);animation:floaty 3s ease-in-out infinite}
.empty{position:relative}.empty:before{content:"✦  ·  ✧";display:block;color:var(--ac);font-size:11px;letter-spacing:.5em;margin-bottom:8px;opacity:.7}
@keyframes floaty{50%{transform:translateY(-6px)}}
/* tab pills */
nav button{transition:color .3s,background .35s var(--ease),transform .2s}nav button:hover:not(.on){background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--fg)}
nav button.on{background:linear-gradient(135deg,var(--fg),color-mix(in srgb,var(--fg) 80%,var(--ac)));box-shadow:0 4px 12px rgba(0,0,0,.15)}
/* hover/press details */
.chip:hover{border-color:var(--ac)}.stat{transition:transform .25s var(--ease)}.stat:hover{transform:translateY(-3px)}.stat:active{transform:scale(.95)}
.card:active{transform:scale(.995)}.hrow{transition:background .2s}.hrow:hover{background:color-mix(in srgb,var(--ac) 5%,transparent)}
.av{box-shadow:0 0 0 2px var(--card),0 2px 6px rgba(0,0,0,.08)}
::selection{background:color-mix(in srgb,var(--ac) 40%,transparent)}
.dark .ph img,.dark .sc img,.dark .strip img{border-color:#efe9e2}
.studio .paper{background:var(--card)}
.studio .ttl,.studio textarea,.studio .sign input{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0}
.studio textarea{background:repeating-linear-gradient(transparent 0 33px,color-mix(in srgb,var(--ac) 25%,var(--ln)) 33px 34px)!important;background-attachment:local!important;padding-top:0}
.studio .ttl{border-bottom:1px solid var(--ac)!important}
button{white-space:nowrap}.studio .pri{display:inline-flex;align-items:center;gap:6px}
.tree{width:130px;height:110px}
.wheel i{font-size:11px!important;top:12px!important;letter-spacing:0!important;line-height:1.05!important}