:root{--ink: #7c4332;--ink-soft: #a56b52;--blush: #f29b8c;--honey: #f0b45a;--paper: #fffdf8;--split: 0;color-scheme:light}app-root{display:block;min-height:100dvh}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#fbf6ee}body{min-height:100dvh;overflow-x:hidden;color:var(--ink);font-family:PingFang TC,Heiti TC,Noto Sans TC,sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse 80% 50% at 8% -10%,#ffd9c8 0%,transparent 58%),radial-gradient(ellipse 70% 46% at 110% 0%,#ffe6a8 0%,transparent 52%),radial-gradient(ellipse 80% 40% at 50% 110%,#f6d7ba 0%,transparent 55%),#fbf6ee}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(rgba(176,122,78,.16) 1px,transparent 1px);background-size:18px 18px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45),transparent 80%);mask-image:linear-gradient(180deg,rgba(0,0,0,.45),transparent 80%)}button,p{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}::selection{background:#ffd7a8;color:#6b3a28}.motes{position:fixed;inset:0;margin:0;padding:0;list-style:none;pointer-events:none;z-index:0}.motes li{position:absolute;width:7px;height:7px;border-radius:50%;background:#ffffffd9;box-shadow:0 0 12px #ffce8ce6;animation:mote 6.5s ease-in-out infinite}.motes li:nth-child(1){top:18%;left:12%}.motes li:nth-child(2){top:28%;right:16%;width:5px;height:5px;animation-delay:-1.4s}.motes li:nth-child(3){top:64%;left:18%;animation-delay:-2.2s}.motes li:nth-child(4){top:72%;right:12%;width:4px;height:4px;animation-delay:-3s}.motes li:nth-child(5){top:12%;left:46%;width:4px;height:4px;animation-delay:-4s}.motes li:nth-child(6){top:48%;right:28%;width:6px;height:6px;animation-delay:-2.8s}@keyframes mote{0%,to{transform:translateY(0);opacity:.35}50%{transform:translateY(-10px);opacity:.9}}.app{position:relative;z-index:1;width:min(100%,480px);min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom))}.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.eyebrow{margin:0;color:#c4846a;font-size:13px;letter-spacing:.14em}h1{margin:2px 0 0;font-size:clamp(30px,8vw,40px);font-weight:700;letter-spacing:.08em;line-height:1.15}.top-tools{display:flex;align-items:center;gap:8px;padding-top:4px}.count{margin:0;padding:6px 10px;border-radius:999px;background:#ffffffb8;color:#a15a38;font-size:12px;font-weight:650;letter-spacing:.04em;white-space:nowrap}.icon-btn{width:42px;height:42px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;color:var(--ink);background:#ffffffbd;box-shadow:0 6px 16px #96603a14}.icon-btn svg{width:22px;height:22px}.icon-off,.app.is-muted .icon-on{display:none}.app.is-muted .icon-off{display:block}.stage{position:relative;flex:1;min-height:420px;display:grid;place-items:center}.halo{position:absolute;width:min(92vw,380px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffd696d9,#ffd69600 68%);z-index:0}.plate{position:absolute;left:50%;top:62%;z-index:1;width:min(72vw,280px);height:32px;border-radius:50%;transform:translate(-50%);background:radial-gradient(ellipse,#a8704647,#a8704600 70%);transition:transform .6s ease,width .6s ease}.app.is-open .plate{width:min(84vw,340px);transform:translate(-50%,108px)}.paper{position:absolute;left:50%;top:46%;z-index:2;width:min(70vw,262px);padding:22px 22px 48px;border-radius:14px 14px 12px 12px;background:linear-gradient(#e25b4a,#e25b4a) top / 100% 7px no-repeat,repeating-linear-gradient(90deg,#e25b4a 0 8px,#fffdf8 8px 14px) top / 100% 7px no-repeat,var(--paper);color:#5c3a2e;box-shadow:0 16px 30px #7848281a,0 0 0 1px #d6b08473;opacity:0;pointer-events:none;transform:translate(-50%,18%) scale(.86);transform-origin:center bottom;transition:transform .7s cubic-bezier(.18,.86,.22,1),opacity .35s ease}.app.is-open .paper{opacity:1;transform:translate(-50%,-58%) rotate(-1.5deg)}.paper-head{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;margin-top:8px}.paper-date{grid-column:2;margin:0;color:var(--ink-soft);font-size:12px;letter-spacing:.16em;text-align:center}.fortune-text{min-height:4.8em;margin:18px 0 0;font-family:Songti TC,STSongti-TC,PMingLiU,"Noto Serif TC",serif;font-size:22px;font-weight:650;line-height:1.65;letter-spacing:.04em;text-align:center;-webkit-user-select:text;user-select:text}.seal{grid-column:3;justify-self:end;width:46px;height:46px;display:grid;place-items:center;border:2px solid rgba(226,91,74,.85);border-radius:50%;color:#e25b4a;background:#fffdf88c;box-shadow:inset 0 0 0 3px #e25b4a2e;opacity:0;transform:rotate(-14deg) scale(1.35);transition:opacity .25s ease,transform .45s cubic-bezier(.2,1.4,.3,1)}.app.is-open .seal{opacity:1;transform:rotate(-12deg) scale(1);transition-delay:.42s}.seal span{font-family:Songti TC,STSongti-TC,serif;font-size:22px;font-weight:700}.cookie-btn{position:relative;z-index:3;width:min(76vw,300px);aspect-ratio:360 / 280;padding:0;border:0;background:transparent;transform:translateY(0) scale(1);transition:transform .6s cubic-bezier(.2,.8,.2,1);touch-action:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 16px 10px rgba(150,86,36,.18))}.cookie-btn:focus{outline:none}.cookie-btn:focus-visible{outline:3px solid rgba(226,140,90,.9);outline-offset:8px;border-radius:48px}.cookie-btn.idle-float{animation:floaty 3.4s ease-in-out infinite}.app.is-open .cookie-btn{transform:translateY(118px) scale(.82);filter:none}.app.is-squish .cookie-btn{animation:squish .2s ease both}.app.tremble .cookie-btn{animation:tremble .16s linear 2}@keyframes floaty{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1)}}@keyframes squish{0%{transform:scale(1) translateY(0)}45%{transform:scale(1.07,.9) translateY(7px)}to{transform:scale(.98,1.05) translateY(-8px)}}@keyframes tremble{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-3px) rotate(-1deg)}75%{transform:translate(3px) rotate(1deg)}}.half,.face-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.half{transition:transform .45s cubic-bezier(.18,1.15,.32,1)}.half svg,.face-layer{display:block;width:100%;height:100%;overflow:visible}.half-left{transform-origin:34% 58%;transform:translate(calc(var(--split) * -.62px)) rotate(calc(var(--split) * -.08deg))}.half-right{transform-origin:66% 58%;transform:translate(calc(var(--split) * .62px)) rotate(calc(var(--split) * .08deg))}.app.is-open .half{transition-duration:.72s;transition-timing-function:cubic-bezier(.16,.9,.2,1.08)}.app.is-open .half-left{transform:translate(-58px,4px) rotate(-15deg)}.app.is-open .half-right{transform:translate(58px,4px) rotate(15deg)}.app.is-open .half svg{filter:drop-shadow(0 12px 8px rgba(150,86,36,.16))}.interior,.happy{opacity:0}.app.is-open .interior{opacity:1;transition:opacity .3s ease .12s}.app.is-open .happy{opacity:1;transition:opacity .35s ease .28s}.crease{opacity:.45}.crack-line{opacity:0;stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset .4s ease,opacity .2s ease}.app.crack .crack-line{opacity:1;stroke-dashoffset:0}.app.is-open .face-layer{opacity:0;transition:opacity .16s ease}.eyes-shut path,.mouth-smile{fill:none;stroke:#6b3a28;stroke-width:4;stroke-linecap:round}.pupil{fill:#4e2c22}.eyes-awake,.eyes-wide,.mouth-o{opacity:0}.mouth-o{fill:#6b3a28}.app.awake .eyes-shut,.app.crack .eyes-shut{opacity:0}.app.awake .eyes-awake{opacity:1}.app.crack .eyes-awake{opacity:0}.app.crack .eyes-wide{opacity:1}.app.crack .mouth-smile{opacity:0}.app.crack .mouth-o{opacity:1}.pupil,.pupil-catch{transform-box:fill-box;transform-origin:center;transform:translate(var(--look-x, 0px),var(--look-y, 0px));transition:transform .12s linear}.zzz{position:absolute;inset:0;z-index:4;pointer-events:none}.zzz b{position:absolute;color:#d39274;font-weight:700;font-style:italic;animation:zzz 2.4s ease-in-out infinite}.zzz b:nth-child(1){top:8%;right:16%;font-size:12px}.zzz b:nth-child(2){top:-2%;right:10%;font-size:15px;animation-delay:.35s}.zzz b:nth-child(3){top:-14%;right:3%;font-size:18px;animation-delay:.7s}.app.awake .zzz,.app.crack .zzz,.app.is-open .zzz{display:none}@keyframes zzz{0%,to{opacity:.15;transform:translateY(3px)}50%{opacity:.9;transform:translateY(-5px)}}.cookie-btn.idle-float:after{content:"";position:absolute;inset:24% 22%;border:2px solid rgba(255,255,255,.75);border-radius:50%;animation:ping 1.8s ease-out infinite;pointer-events:none}@keyframes ping{0%{transform:scale(.86);opacity:.7}to{transform:scale(1.16);opacity:0}}.burst{position:absolute;inset:0;z-index:4;pointer-events:none}.spark{position:absolute;left:50%;top:48%;font-size:var(--size, 14px);line-height:1;animation:fly .85s ease-out forwards;animation-delay:var(--delay, 0s)}.spark.crumb{width:7px;height:6px;margin-left:-3px;border-radius:40% 60% 50% 50%;background:#e09a42;box-shadow:0 1px #c47d32}.spark.crumb.alt{background:#f2c56a;width:5px;height:5px}@keyframes fly{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1)}}.bubble{position:absolute;left:50%;bottom:11%;z-index:5;margin:0;padding:8px 14px;border-radius:999px;background:#fffdf8f2;color:#8a4e32;font-size:14px;font-weight:650;letter-spacing:.04em;box-shadow:0 8px 20px #7848281f;opacity:0;pointer-events:none;transform:translate(-50%) translateY(6px)}.bubble.show{animation:bubble 1.15s ease both}@keyframes bubble{0%{opacity:0;transform:translate(-50%) translateY(8px) scale(.92)}16%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}72%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-6px) scale(.98)}}.pips{position:absolute;left:50%;bottom:6%;z-index:5;display:flex;gap:8px;transform:translate(-50%);transition:opacity .3s ease}.pips span{width:8px;height:8px;border-radius:50%;background:#b0785247;transition:background .2s ease,transform .2s ease}.app[data-taps="1"] .pips span:nth-child(1),.app[data-taps="2"] .pips span:nth-child(-n+2),.app[data-taps="3"] .pips span{background:#e39a45;transform:scale(1.2)}.app.is-open .pips{opacity:0}.dock{min-height:118px;text-align:center}.hint{min-height:1.5em;margin:0;color:var(--ink-soft);font-size:15px;letter-spacing:.04em}.actions{display:grid;grid-template-columns:1.4fr .8fr;gap:10px;max-height:0;margin-top:0;opacity:0;overflow:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .35s ease,transform .35s ease,max-height .35s ease,margin-top .35s ease}.app.is-open .actions{max-height:72px;margin-top:14px;opacity:1;transform:none;pointer-events:auto}.primary,.ghost{min-height:52px;border-radius:999px;font-size:16px;font-weight:700;letter-spacing:.06em}.primary{border:0;color:#7a4324;background:linear-gradient(180deg,#ffd78a,#f0b45a);box-shadow:0 8px 16px #d6964659,inset 0 1px #ffffffbf}.ghost{border:0;color:#8a4e32;background:#ffffffb3;box-shadow:inset 0 0 0 1.5px #c48c6466}.primary:active,.ghost:active{transform:scale(.98)}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:6;margin:0;padding:10px 16px;border-radius:999px;background:#5a3424eb;color:#fffaf4;font-size:14px;letter-spacing:.04em;opacity:0;pointer-events:none;transform:translate(-50%) translateY(10px);transition:opacity .25s ease,transform .25s ease}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(max-height:740px){.stage{min-height:360px}.fortune-text{font-size:20px;min-height:4.4em}.app.is-open .paper{transform:translate(-50%,-46%) rotate(-1.5deg)}.app.is-open .cookie-btn{transform:translateY(78px) scale(.74)}.app.is-open .plate{transform:translate(-50%,72px)}}@media(max-width:340px){.fortune-text{font-size:18px}.actions{grid-template-columns:1fr}.app.is-open .actions{max-height:120px}}.loading,.load-error{min-height:100dvh;display:grid;place-items:center;margin:0;padding:24px;color:var(--ink-soft);letter-spacing:.08em;text-align:center}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
