@font-face{font-family:'LongCang';src:url('fonts/longcang.woff2') format('woff2');font-display:swap}
@font-face{font-family:'WenKai';src:url('fonts/wenkai.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Typewriter';src:url('fonts/specialelite.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Caveat';src:url('fonts/caveat.woff2') format('woff2');font-display:swap}
:root{--cream:#f3ede1;--card:#f8f3ea;--ink:#2b2926;--soft:#5b5650;--faint:#8a847c;--sage:#7f8d72;--terra:#b0705a;--must:#b8923f;
 --sage-w:rgba(127,141,114,.18);--terra-w:rgba(176,112,90,.16);--rad:255px 14px 225px 14px/14px 225px 14px 255px;--rad2:14px 225px 14px 255px/255px 14px 225px 14px;
 --tab:64px;--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--cream);color:var(--ink);font-family:'WenKai','LXGW WenKai','Songti SC','STSong',serif;font-size:16px;line-height:1.7}
body{min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.paper-bg{position:fixed;inset:0;z-index:-1;background:#f3ede1 url('paper.webp') center/cover no-repeat}
.hand{font-family:'LongCang','WenKai',serif;font-weight:normal;line-height:1.1;letter-spacing:.02em}
.tw{font-family:'Typewriter','WenKai',monospace;letter-spacing:.18em}
.cav{font-family:'Caveat','WenKai',cursive}
.soft{color:var(--soft)} .faint{color:var(--faint)}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:10px 18px 6px;
 background:rgba(243,237,225,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 1px 0 rgba(43,41,38,.06)}
.topbar .issue{font-size:10px;color:var(--soft)}
.sound{font-size:12px;color:var(--soft);padding:4px 10px;border:1px solid rgba(43,41,38,.35);border-radius:var(--rad)}
.sound[aria-pressed="true"]{background:var(--sage-w);color:var(--ink)}
main{max-width:560px;margin:0 auto;padding:0 20px calc(var(--tab) + var(--safe-b) + 28px)}
.view{display:none}
.view.on{display:block}
.view.enter{animation:pageIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateX(22px) rotate(.6deg);transform-origin:left top}to{opacity:1;transform:none}}
.rule{height:9px;margin:4px 0 14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 9' preserveAspectRatio='none'><path d='M2 5 C 60 2, 120 7, 200 4 S 330 6, 398 3' fill='none' stroke='%232b2926' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat;background-size:100% 100%}
.kicker{font-size:10px;color:var(--terra);margin-top:4px}
h2.hand{font-size:44px;margin-top:18px}
h3.hand{font-size:27px;margin:22px 0 6px}
p{margin:6px 0}
.box{border:1.4px solid #3a3632;border-radius:var(--rad);padding:16px 18px;margin:18px 0}
.box.sage{background:var(--sage-w)} .box.terra{background:var(--terra-w)}
.note{font-family:'Caveat','WenKai',cursive;font-size:21px;color:var(--soft);line-height:1.1}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:14px;padding:5px 14px;border:1.2px solid rgba(43,41,38,.55);border-radius:var(--rad);background:rgba(255,255,255,.25);white-space:nowrap;transition:background .2s,transform .15s}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip.sage.on{background:var(--sage);border-color:var(--sage);color:#fff}
.chip.terra.on{background:var(--terra);border-color:var(--terra);color:#fff}
.btn{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:6px;font-size:16px;padding:9px 20px;border:1.5px solid var(--ink);border-radius:var(--rad);background:rgba(255,255,255,.3);transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.ink{background:var(--ink);color:var(--cream)}
.btn.small{font-size:13px;padding:5px 12px}
/* tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;align-items:stretch;
 height:calc(var(--tab) + var(--safe-b));padding:4px 6px var(--safe-b);background:rgba(243,237,225,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 border-top:1px solid rgba(43,41,38,.18)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11.5px;color:var(--soft);position:relative}
.tabbar svg{width:26px;height:26px}
.tabbar button.on{color:var(--ink)}
.tabbar button.on::after{content:"";position:absolute;bottom:5px;width:22px;height:6px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'><path d='M2 5 Q 12 1 20 4 T 38 3' fill='none' stroke='%23b0705a' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat center/contain}
@media (min-width:700px){.tabbar{left:50%;right:auto;transform:translateX(-50%);width:560px;border:1px solid rgba(43,41,38,.18);border-bottom:0;border-radius:18px 18px 0 0}}
/* cover */
.cover-hero{position:relative;padding-top:20px;min-height:calc(100vh - 140px)}
.cover-hero .sub-issue{font-size:10px;color:var(--soft)}
.cover-title{font-size:min(23vw,120px);line-height:1.02;margin-top:9vh}
.cover-title .l2{display:block;margin-left:.5em}
.cover-title .ch{display:inline-block;opacity:0;transform:translateY(8px) rotate(-3deg);animation:ink .7s cubic-bezier(.2,.7,.2,1) forwards;clip-path:inset(0 100% 0 0)}
@keyframes ink{60%{clip-path:inset(0 0 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.cover-sub{font-size:16px;margin:16px 0 0 1.6em;max-width:15em;text-wrap:balance;opacity:0;animation:fade .8s 1.2s forwards}
@keyframes fade{to{opacity:1}}
.cluster{position:relative;height:300px;margin-top:16px;animation:settle 1.1s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes settle{from{opacity:0;transform:translateY(-26px) rotate(-5deg)}to{opacity:1;transform:rotate(-1deg)}}
.cluster .d{position:absolute}
.draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:drawp 1.6s ease forwards}
.draw path[fill]:not([fill="none"]){stroke-dasharray:none;opacity:0;animation:fade .8s 1.4s forwards}
@keyframes drawp{to{stroke-dashoffset:0}}
.cover-note{position:absolute;left:0;top:28px;transform:rotate(-5deg);font-size:24px;opacity:0;animation:fade 1s 1.8s forwards}
.scroll-hint{text-align:center;font-size:12px;color:var(--faint);margin-top:4px;animation:bob 2s 2.4s infinite both}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(5px);opacity:.4}}
.principle{display:flex;gap:12px;margin:16px 0}
.principle .num{font-family:'Typewriter',monospace;font-size:24px;color:var(--terra);line-height:1}
.principle .hand{font-size:24px}
.principle p{font-size:14.5px;margin-top:2px}
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.entry{padding:14px;border:1.3px solid rgba(43,41,38,.6);border-radius:var(--rad);text-align:left;background:rgba(255,255,255,.22)}
.entry:nth-child(2){margin-top:22px;border-radius:var(--rad2)} .entry:nth-child(4){margin-top:-8px}
.entry .hand{font-size:23px;display:block} .entry small{font-size:12px;color:var(--soft);display:block;margin-top:2px}
.entry svg{width:44px;height:44px;float:right;margin:-4px -4px 0 4px}
/* food grid */
.count{font-size:12px;color:var(--faint)}
.tagdesc{font-size:13.5px;color:var(--soft);min-height:1.6em;margin:-2px 0 6px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;margin-top:8px}
.fcard{position:relative;background:var(--card);border-radius:6px 10px 7px 12px;padding:12px 10px 10px;text-align:center;
 box-shadow:0 1px 0 rgba(0,0,0,.04),0 6px 14px -8px rgba(60,45,30,.35);transition:transform .25s}
.fcard:nth-child(4n+1){transform:rotate(-1.2deg)} .fcard:nth-child(4n+2){transform:rotate(1deg);margin-top:14px} .fcard:nth-child(4n+3){transform:rotate(.6deg)} .fcard:nth-child(4n){transform:rotate(-.8deg);margin-top:14px}
.fcard:active{transform:scale(.97)}
.fcard svg{width:84px;height:84px;display:block;margin:0 auto}
.fcard .hand{font-size:24px;display:block;margin-top:2px}
.fcard .tw{font-size:8.5px;color:var(--terra);display:block}
.fcard .dots{margin-top:6px;display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.tagdot{font-size:10.5px;padding:0 6px;border-radius:var(--rad);background:var(--sage-w);color:#4f5c45}
.fcard.hide{display:none}
.empty{text-align:center;color:var(--faint);padding:30px 0}
/* modal flip */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(43,41,38,.38);animation:fade .25s forwards;opacity:0}
.flip-scene{position:relative;width:min(88vw,420px);height:min(76vh,640px);perspective:1400px}
.flip-card{position:absolute;inset:0;animation:popIn .35s both}
.flip-card.t1{animation:half1 .26s ease-in forwards}.flip-card.t2{animation:half2 .34s cubic-bezier(.2,.8,.3,1)}
@keyframes half1{to{transform:rotateY(90deg) scale(.97)}}@keyframes half2{from{transform:rotateY(-90deg) scale(.97)}}
@keyframes popIn{from{opacity:0;transform:translateY(30px) scale(.94) rotate(-2deg)}}
.flip-card .back,.flip-card.flipped .front{display:none}.flip-card.flipped .back{display:flex}
.face{position:absolute;inset:0;border-radius:8px 14px 9px 16px;overflow:hidden;
 background:#f6f0e5 url('paper.webp') center/cover;box-shadow:0 20px 40px -18px rgba(30,20,10,.55);padding:22px 22px 18px;display:flex;flex-direction:column}

.face .x{position:absolute;right:10px;top:8px;font-size:22px;width:38px;height:38px;color:var(--soft)}
.front-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.front-body svg{width:min(52vw,230px);height:min(52vw,230px)}
.front-body .hand{font-size:46px;margin-top:6px}
.front-body .tw{font-size:10px;color:var(--terra)}
.flip-hint{font-size:13px;color:var(--faint);text-align:center}
.back-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:4px}
.back-body .hand.nm{font-size:32px}
.field{margin:9px 0}
.field b{font-weight:normal;color:var(--sage);font-size:13px;letter-spacing:.1em;display:block}
.field.care{border-left:2.5px solid var(--terra);padding:4px 0 4px 10px;background:var(--terra-w)}
.field.care b{color:var(--terra)}
.face-nav{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
/* picker */
.bag-wrap{display:flex;flex-direction:column;align-items:center;margin:8px 0 4px}
.bag{width:190px;height:190px;position:relative}
.bag svg{width:100%;height:100%}
.bag.shake{animation:shake .7s ease-in-out}
@keyframes shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-9deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-7deg) translateY(-6px)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
.slip{position:relative;background:var(--card);border-radius:4px 10px 6px 12px;padding:18px 18px 16px;margin-top:6px;box-shadow:0 10px 24px -14px rgba(50,35,20,.5)}
.slip.out{animation:slip .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes slip{from{opacity:0;transform:translateY(-40px) rotate(-3deg) scale(.96)}to{opacity:1;transform:rotate(-.6deg)}}
.slip .when{font-size:10px;color:var(--terra)}
.slip .hand.mn{font-size:30px;margin:4px 0 10px}
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.part{text-align:center;padding:8px 4px;border:1px dashed rgba(43,41,38,.4);border-radius:var(--rad)}
.part small{display:block;font-size:11px;color:var(--sage);letter-spacing:.15em}
.part span{font-size:13.5px;line-height:1.4;display:block}
.steps{counter-reset:s;list-style:none}
.steps li{counter-increment:s;position:relative;padding-left:30px;margin:7px 0;font-size:15px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;font-family:'Caveat',cursive;font-size:24px;color:var(--terra)}
.usechips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.usechips button{font-size:12.5px;padding:2px 10px;border-radius:var(--rad);border:1px solid rgba(43,41,38,.4)}
/* calc */
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:36px;height:36px;border:1.3px solid var(--ink);border-radius:50% 46% 52% 48%;font-size:20px;line-height:1}
.stepper output{min-width:2.2em;text-align:center;font-family:'LongCang','WenKai';font-size:28px}
.result{text-align:left;margin:14px 0 6px}
.big{font-family:'LongCang','WenKai';font-size:46px;line-height:1.05;color:var(--ink)}
.big small{font-size:20px}
.mline{display:flex;justify-content:space-between;font-size:14.5px;border-bottom:1px dotted var(--faint);padding:5px 0}
.mline .k{color:var(--soft)}
.override{display:none;margin-top:8px}
.override.on{display:block}
.override label{display:flex;align-items:center;gap:6px;font-size:14px;margin:6px 0;flex-wrap:wrap}
.override input{width:70px;font:inherit;font-size:16px;padding:3px 6px;background:rgba(255,255,255,.5);border:1px solid rgba(43,41,38,.5);border-radius:6px}
.pricetag{font-family:'Typewriter','WenKai';font-size:10px;color:var(--terra);letter-spacing:.1em}
.dotrow{display:grid;grid-template-columns:5.2em 1fr 1fr;align-items:center;gap:6px;font-size:13.5px;padding:4px 0;border-bottom:1px dotted rgba(138,132,124,.6)}
.dotrow .h{font-size:11px;color:var(--soft)}
.dot{display:inline-block;width:11px;height:11px;border:1.1px solid var(--ink);border-radius:52% 48% 55% 45%/48% 55% 45% 52%;margin-right:3px;vertical-align:middle}
details{margin:14px 0}
details summary{cursor:pointer;font-size:14px;color:var(--soft);list-style:none}
details summary::before{content:"＋ ";color:var(--terra)}
details[open] summary::before{content:"－ "}
details ol{font-size:12.5px;line-height:1.55;color:var(--soft);padding-left:1.3em;margin-top:6px}
/* shop */
.progress{height:14px;position:relative;margin:6px 0 4px}
.progress svg{width:100%;height:14px}
.sgroup{margin:16px 0}
.sgroup:nth-child(even){margin-left:18px}
.item{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:16px;border-bottom:1px dotted rgba(138,132,124,.55);width:100%;text-align:left}
.item svg{width:26px;height:26px;flex:none}
.item .tick{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s ease}
.item.done .tick{stroke-dashoffset:0}
.item.done .t{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(176,112,90,.7);text-decoration-thickness:1.5px}
.item .del{margin-left:auto;font-size:13px;color:var(--faint);padding:0 4px}
.addrow{display:flex;gap:8px;margin-top:10px}
.addrow input{flex:1;min-width:0;font:inherit;font-size:16px;padding:6px 10px;background:rgba(255,255,255,.45);border:1px solid rgba(43,41,38,.45);border-radius:var(--rad)}
/* end */
.cheat{display:grid;grid-template-columns:1fr;gap:0}
.cheat div{display:flex;align-items:baseline;gap:6px;font-size:15px;padding:5px 0}
.cheat .k{flex:none}
.cheat .l{flex:1;border-bottom:1px dotted var(--faint);transform:translateY(-4px)}
.cheat .v{flex:none;color:var(--soft)}
.frieze{display:flex;justify-content:space-between;margin:26px 0 10px}
.frieze svg{width:44px;height:44px}
.signoff{font-size:38px;text-align:right;margin-top:20px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + var(--safe-b) + 16px);transform:translateX(-50%);background:var(--ink);color:var(--cream);font-size:13px;padding:6px 14px;border-radius:var(--rad);z-index:60;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.on{opacity:.92}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
 .cover-title .ch{clip-path:none}
 .draw path{stroke-dasharray:none}
}
.ovname{font-size:14px;margin-top:10px}
.dotrow .h{line-height:1.4}
#cOut,#cHome{flex-wrap:wrap;overflow:visible}
@media (min-width:700px){.chips{flex-wrap:wrap;overflow:visible}}
@media (max-width:420px){h2.hand{font-size:37px}}