:root{--bg:#f7e9d1;--ink:#16372d;--muted:#756d5d;--green:#203e32;--paper:#fff8e9;--gold:#c89a55;--safe-top:0px;--safe-bottom:0px;--safe-left:0px;--safe-right:0px;--view-height:100svh;--ease:cubic-bezier(.2,.7,.2,1);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #6a8060;outline-offset:5px}[hidden]{display:none!important}
.app{position:relative;isolation:isolate;width:min(100%,480px);margin:0 auto;min-height:var(--view-height);padding:calc(12px + var(--safe-top)) calc(28px + var(--safe-right)) calc(34px + var(--safe-bottom)) calc(28px + var(--safe-left));overflow:hidden;background:#f7e9d1 url('/morning.png') center top/100% 100% no-repeat}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:36px}.brand{font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,5.1vw,25px);font-weight:400;letter-spacing:-.7px;text-decoration:none;color:var(--ink);white-space:nowrap}.sound{display:grid;place-items:center;flex:none;background:none;border:0;color:var(--ink);width:44px;height:44px;padding:8px;margin-right:-8px}.sound svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.sound .sound-off{display:none}.sound.is-muted .sound-waves{display:none}.sound.is-muted .sound-off{display:block}
.ornament{display:flex;align-items:center;gap:9px;margin:0;color:var(--gold)}.ornament:before,.ornament:after{content:'';height:1px;background:currentColor;opacity:.6;flex:1}.ornament svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.25;fill:none}
.ritual{text-align:center;padding-top:18px}.day-label{font-size:10px;letter-spacing:1.1px;line-height:1.5;color:#716c5e;text-transform:uppercase}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,8.15vw,39px);font-weight:400;line-height:1.02;letter-spacing:-1.15px;margin:20px -5px 16px;text-wrap:balance}h1 em{font:inherit;color:inherit}.intro{color:#293b31;font-size:clamp(12px,3.25vw,15.5px);line-height:1.35;margin:0 -5px}
.scene{position:relative;height:clamp(228px,69vw,332px);margin:20px -9px 18px;isolation:isolate;display:grid;place-items:center}.cookie-button{position:absolute;inset:0;width:100%;height:100%;padding:0;background:none;border:0;z-index:2;touch-action:manipulation;transition:transform .18s var(--ease)}.cookie-button:active:not(:disabled){transform:scale(.97)}.cookie-art{display:block;position:absolute;inset:-6px -5px;filter:drop-shadow(7px 13px 5px #80532126)}.half{display:block;position:absolute;inset:0;transform-origin:50% 55%;transition:transform .8s var(--ease),opacity .65s var(--ease)}.half img{display:block;width:100%;height:100%;object-fit:contain}.half-left img{clip-path:polygon(0 0,50% 0,50% 29%,49.3% 37%,50.6% 43%,49.7% 49%,50% 56%,50% 100%,0 100%)}.half-right img{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,50% 56%,49.7% 49%,50.6% 43%,49.3% 37%,50% 29%)}.cookie-shadow{position:absolute;bottom:10px;left:19%;width:67%;height:19px;border-radius:50%;background:#6c401829;filter:blur(9px);transform:rotate(8deg);transition:opacity .4s}
.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:54px;padding:13px 16px;border-radius:30px;text-decoration:none;transition:transform .15s,box-shadow .15s}.primary{position:relative;border:1.3px solid #c99950;background:linear-gradient(125deg,#354e3f 0%,#203d30 62%,#152f25 100%);color:#fff8e8;box-shadow:0 5px 6px #69451c24,inset 0 1px 0 #ffffff12;font:400 clamp(17px,4.6vw,22px)/1.15 Georgia,'Times New Roman',serif}.primary>span:last-child{position:absolute;right:21px;font:400 26px/1 system-ui}.primary #open-label{padding-right:16px}.primary:active,.secondary:active{transform:scale(.98)}.primary:hover{box-shadow:0 6px 12px #69451c33,inset 0 1px 0 #ffffff18}.primary:disabled{opacity:.7}.hint{font-size:10px;line-height:1.5;color:#756d5d;margin:13px 0 0}.actions{margin:0}
.fortune{position:relative;z-index:3;width:calc(100% - 14px);border:1px solid #d7b681;border-radius:3px;padding:23px 24px 18px;background:linear-gradient(145deg,#fffbed,#f6e8cc);box-shadow:0 15px 35px #71491525,0 2px 3px #765a3015;transform:rotate(-1.5deg);outline:none}.fortune:before{content:'';position:absolute;left:0;right:0;top:-4px;height:4px;background:linear-gradient(135deg,transparent 50%,#fffbed 51%) 0 0/8px 8px repeat-x}.fortune-label{font-size:9px;letter-spacing:1.5px;line-height:1.5;color:#887044;margin:0 0 19px}.fortune-text{font:400 clamp(21px,5.7vw,27px)/1.38 Georgia,'Times New Roman',serif;margin:0;overflow-wrap:anywhere;color:var(--ink)}.paper-footer{margin-top:22px;border-top:1px solid #d8c39c;padding-top:12px;font-size:10px;color:#897955;display:flex;justify-content:space-between;gap:12px}.paper-footer>span:last-child{font-size:15px}.scene.opened{height:auto;min-height:290px;padding:14px 0 94px;margin-top:23px;margin-bottom:14px}.opened .cookie-button{pointer-events:none}.opened .cookie-art{inset:auto 0 0;height:210px;filter:drop-shadow(4px 9px 5px #80532122)}.opened .half-left{transform:translate(-65px,12px) rotate(-25deg) scale(.8)}.opened .half-right{transform:translate(65px,12px) rotate(25deg) scale(.8)}.opened .cookie-shadow{opacity:0}.opened.reveal .fortune{animation:paper-in .8s var(--ease) both}.scene.cracking .cookie-button{animation:crack .3s ease-in-out 2}.result-actions{position:relative;z-index:4}.result-actions .primary{font-size:clamp(16px,4.15vw,20px);padding-right:40px}.text-button{border:0;background:none;padding:13px 9px;font-size:11px;color:var(--green);text-decoration:underline;text-underline-offset:3px;min-height:44px}.tomorrow{font-size:11px;line-height:1.6;color:#625b4c;margin:5px 0 0}.tomorrow span{display:block;font-size:10px;color:#796f5d}.gate h2{font:400 26px/1.2 Georgia,serif}.gate p{font-size:13px;line-height:1.6;color:#5d5e4e}.gate .primary{font-size:19px}.secondary{margin-top:12px;border:1px solid #b9a17b;background:#fff6e2b3;color:var(--green);font-size:12px}.gated .scene{height:190px;margin:14px 0}.gated h1{font-size:34px}.error{border:1px solid #c8956c;border-radius:10px;padding:10px 16px;margin-top:16px;background:#fff7e8;color:#764522;font-size:12px;line-height:1.5}
#toast{position:fixed;z-index:10;bottom:calc(24px + var(--safe-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 36px);padding:14px 18px;border-radius:12px;background:var(--green);color:#fff8e9;font-size:12px;line-height:1.5;box-shadow:0 6px 30px #162d2522}
@keyframes crack{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}@keyframes paper-in{from{opacity:0;transform:translateY(32px) rotate(4deg) scale(.83)}to{opacity:1;transform:translateY(0) rotate(-1.5deg) scale(1)}}
@media(min-width:700px){body{background:#e8d7b9}.app{margin:24px auto;border-radius:24px;min-height:854px;box-shadow:0 20px 65px #50381c1c}}@media(max-width:350px){.app{padding-left:20px;padding-right:20px}.brand{font-size:18px}.scene{margin-left:-8px;margin-right:-8px}h1{letter-spacing:-1px}.hint{font-size:9px}.primary>span:last-child{right:14px}.primary{font-size:17px}}
@media(max-height:700px) and (max-width:699px){.app{padding-top:calc(10px + var(--safe-top));padding-bottom:calc(20px + var(--safe-bottom))}.ritual{padding-top:18px}h1{margin-top:17px;margin-bottom:12px}.scene:not(.opened){height:clamp(210px,61vw,280px);margin-top:18px;margin-bottom:15px}.gated .scene:not(.opened){height:145px}.scene.opened{min-height:245px;padding-bottom:75px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.fortune{transform:none}}