*,*:before,*:after{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;color:#fff;background:#3a0c12;font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif}button,h1,h2,h3,p{font:inherit}button{color:inherit}h1,h2,h3,p{margin:0}.page{height:100dvh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(900px 180px at 15% 0%,rgba(255,196,120,.14),transparent 60%),#4c1219}.header{flex:0 0 auto;min-height:clamp(78px,12vh,104px);display:flex;align-items:center;gap:clamp(8px,2vw,24px);padding:max(8px,env(safe-area-inset-top)) clamp(12px,2vw,28px) 8px;background:radial-gradient(900px 90px at 12% 0%,rgba(255,210,140,.16),transparent 55%),linear-gradient(180deg,#7c242c,#5a141b);border-bottom:1px solid rgba(236,196,122,.38);box-shadow:0 10px 24px #2800062e;z-index:5}.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:max-content}.mark{width:clamp(46px,5vw,64px);height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}.brand h1{font-family:Ma Shan Zheng,STKaiti,KaiTi,cursive;font-size:clamp(34px,4vw,52px);font-weight:400;letter-spacing:.08em;color:#f6e0a8;line-height:1;text-shadow:0 2px 0 rgba(90,30,10,.25)}.stamp{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:0;color:#fff6ea;background:radial-gradient(circle at 38% 32%,#e25a52,#8d1c22 72%);border:1px solid rgba(255,226,190,.8);box-shadow:inset 0 0 0 3px #78101459,0 6px 12px #0003;transform:rotate(-8deg);font-family:"Noto Serif SC",serif;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.15}.cats{flex:1;min-width:0;display:flex;justify-content:safe center;align-items:center;gap:clamp(6px,1.2vw,16px);overflow-x:auto;padding:6px 4px 8px;scrollbar-width:none}.cats::-webkit-scrollbar{display:none}.cat{border:0;background:transparent;padding:0;cursor:pointer;flex:0 0 auto}.cat-ring{min-width:clamp(60px,6.2vw,78px);height:clamp(60px,6.2vw,78px);padding:0 16px;border-radius:999px;display:flex;align-items:center;justify-content:center;white-space:nowrap;color:#fff8ef;background:radial-gradient(circle at 50% 40%,#b0303459,#5c0e14b8 72%),#7a1d26;box-shadow:inset 0 0 0 1.5px #ffe2b0eb,inset 0 0 0 5px #6e141cf2,inset 0 0 0 6px #e2b05cc7;transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease}.cat-name{font-family:"Noto Serif SC",serif;font-weight:700;font-size:clamp(12px,1.15vw,15px);letter-spacing:.08em;line-height:1.15;white-space:nowrap}.cat:hover .cat-ring,.cat:focus-visible .cat-ring{transform:translateY(-2px)}.cat.active .cat-ring{color:#6d2214;background:radial-gradient(circle at 38% 32%,#fff6d8,#f3d48a 46%,#d7a44a);box-shadow:inset 0 0 0 2px #fff8e8,inset 0 0 0 5px #d6a44af2,0 8px 16px #00000038;transform:translateY(-2px) scale(1.06)}.stage{position:relative;flex:1;min-height:0;overflow:hidden;cursor:grab;touch-action:pan-y;background:#3a100f}.stage:active{cursor:grabbing}.slides,.slide,.shade,.info{position:absolute;top:0;right:0;bottom:0;left:0}.slides{z-index:0}.slide{opacity:0;transition:opacity .7s ease}.slide.active{opacity:1;z-index:1}.slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}.slide.active img{animation:ken 8s ease-out forwards}@keyframes ken{0%{transform:scale(1.08)}to{transform:scale(1)}}.shade{z-index:1;pointer-events:none;background:linear-gradient(90deg,#24080ac7,#24080a57 34%,#24080a05 60%,#24080a47),linear-gradient(180deg,#24080a1f,#24080a00 24%,#24080a14 58%,#3a0e08b8)}.art{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 72%,rgba(255,170,70,.28),transparent 36%),linear-gradient(180deg,#0000000a,#0000002e)}.steam{position:absolute;top:18%;display:flex;gap:18px;z-index:1}.steam i{display:block;width:8px;height:72px;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);filter:blur(.4px);animation:steam 2.6s ease-in-out infinite}.steam i:nth-child(2){height:96px;animation-delay:.35s}.steam i:nth-child(3){animation-delay:.7s}@keyframes steam{50%{transform:translateY(-14px);opacity:.35}}.bowl{width:min(68vw,680px);height:min(34vw,280px);min-height:180px;border-radius:0 0 50% 50%;background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.45),transparent 28%),linear-gradient(180deg,#f7f3ec,#ddd4c8 32%,#cfc5b8);box-shadow:0 30px 50px #00000047,inset 0 -18px 30px #7832141f;display:grid;place-items:center;position:relative}.bowl:before{content:"";position:absolute;left:8%;right:8%;top:16%;bottom:14%;border-radius:50%;background:radial-gradient(circle at 42% 38%,rgba(255,220,160,.45),transparent 24%),radial-gradient(circle at 50% 45%,#ffb15a,#d2451e 58%,#8e2414)}.bowl span{position:relative;z-index:1;padding-top:24px;font-family:"Noto Serif SC",serif;font-size:clamp(22px,3vw,40px);font-weight:700;letter-spacing:.08em;color:#fff8ef;text-shadow:0 6px 16px rgba(80,10,0,.35)}.info{z-index:2;pointer-events:none}.info-top{position:absolute;left:clamp(18px,4vw,68px);top:clamp(18px,5vh,64px);max-width:min(680px,calc(100% - 150px))}.info h2{font-family:"Noto Serif SC",Songti SC,serif;font-weight:900;font-size:clamp(30px,4.5vw,62px);letter-spacing:.04em;line-height:1.08;color:#fff;text-shadow:0 8px 24px rgba(0,0,0,.4)}.en{margin-top:6px;font-family:Cormorant Garamond,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(16px,1.8vw,28px);color:#fffffff0;text-shadow:0 3px 12px rgba(0,0,0,.35)}.origin,.sale{display:flex;align-items:baseline;gap:8px}.origin{margin-top:16px;color:#ffffffd1;font-size:clamp(15px,1.4vw,20px);letter-spacing:.04em}.origin s{font-size:1.15em;text-decoration-thickness:1px}.sale{margin-top:2px}.sale span,.sale strong{color:#ff342c;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.28)}.sale span{font-size:clamp(18px,1.7vw,24px)}.sale strong{font-family:"Noto Serif SC",serif;font-size:clamp(32px,3.5vw,50px);line-height:.95;letter-spacing:.02em}.origin em,.sale em{font-style:normal;color:#ffffffd6;font-size:clamp(14px,1.2vw,18px)}.info-bottom{position:absolute;left:clamp(18px,4vw,68px);bottom:clamp(58px,9vh,104px);max-width:min(520px,52vw)}.info h3{font-family:"Noto Serif SC",serif;font-weight:700;font-size:clamp(20px,2.2vw,34px);letter-spacing:.04em;text-shadow:0 4px 16px rgba(0,0,0,.4)}.info h3 i{margin:0 8px;font-style:normal;opacity:.8}.info-bottom p{margin-top:8px;max-width:24em;font-size:clamp(14px,1.25vw,18px);line-height:1.7;color:#fffffff0;text-shadow:0 2px 10px rgba(0,0,0,.45)}.medal{position:absolute;top:clamp(12px,6vh,58px);right:clamp(16px,4.5vw,64px);width:clamp(104px,12vw,146px);aspect-ratio:1}.burst{position:absolute;top:-9%;right:-9%;bottom:-9%;left:-9%;background:repeating-conic-gradient(from 0deg,rgba(255,226,156,.95) 0 7deg,transparent 7deg 45deg);-webkit-mask:radial-gradient(circle,transparent 61%,#000 62% 74%,transparent 75%);mask:radial-gradient(circle,transparent 61%,#000 62% 74%,transparent 75%)}.medal-ring{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#7a4a12;background:radial-gradient(circle at 35% 30%,#fff8df,#f4d48a 34%,#e0b45a 62%,#b8862e);box-shadow:0 14px 28px #00000052,inset 0 0 0 4px #fff8dce6,inset 0 0 0 8px #96621e61}.medal-ring:after{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:50%;border:1px dashed rgba(122,74,18,.5)}.medal-ring small,.medal-ring strong{position:relative;z-index:1;font-family:"Noto Serif SC",serif;text-align:center}.medal-ring small{font-size:clamp(12px,1.15vw,16px);font-weight:700;letter-spacing:.14em}.medal-ring strong{font-size:clamp(20px,2vw,30px);line-height:1;letter-spacing:.04em}.arrow,.controls,.legal{z-index:3}.arrow{position:absolute;top:54%;transform:translateY(-50%);width:clamp(40px,4vw,50px);height:clamp(40px,4vw,50px);border-radius:50%;border:1px solid rgba(255,255,255,.48);background:#18060852;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;display:grid;place-items:center;font-size:34px;line-height:0;padding:0 0 4px;transition:background .2s ease,transform .2s ease}.arrow span{display:block;margin-top:-2px}.arrow.prev{left:max(12px,env(safe-area-inset-left))}.arrow.next{right:max(12px,env(safe-area-inset-right))}.arrow:hover{background:#1806088c;transform:translateY(-50%) scale(1.05)}.controls{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:6px 10px 6px 12px;border-radius:999px;background:#16060861;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ghost,.dot{border:0;cursor:pointer}.ghost{background:transparent;color:#fff;font-size:13px;letter-spacing:.08em;padding:4px 2px}.dots{display:flex;align-items:center;gap:7px}.dot{width:8px;height:8px;padding:0;border-radius:99px;background:#ffffff7a;transition:width .25s ease,background .25s ease}.dot.on{width:22px;background:#f0d090}.count{min-width:54px;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#ffffffe6}.legal{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));font-size:12px;color:#ffffffc7;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none}.auto-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;height:3px;background:#ffffff29}.auto-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#e7c27a,#fff6dd)}.auto-bar.paused span{background:#ffffff73}.rise-enter-active,.rise-leave-active{transition:opacity .35s ease,transform .35s ease}.rise-enter-from,.rise-leave-to{opacity:0;transform:translateY(10px)}.status-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;text-align:center;padding:24px}.status-panel p{font-family:"Noto Serif SC",serif;font-size:clamp(20px,2.4vw,32px);letter-spacing:.14em;text-shadow:0 6px 18px rgba(0,0,0,.35)}.retry{margin-top:18px;border:1px solid rgba(240,208,144,.85);background:#18060847;color:#f6e0a8;border-radius:999px;padding:8px 20px;cursor:pointer;letter-spacing:.14em}.retry:hover{background:#18060880}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button:focus-visible,.cat:focus-visible .cat-ring{outline:2px solid #f6e0a8;outline-offset:3px}@media(max-width:860px){.header{flex-wrap:wrap;padding-bottom:4px}.brand{width:100%}.cats{justify-content:flex-start;padding-bottom:10px}.info-bottom{max-width:calc(100% - 36px)}.legal{display:none}}@media(max-width:640px){.stamp{width:44px;height:44px;font-size:10px}.info-top{top:14px;max-width:calc(100% - 120px)}.origin{margin-top:8px}.info-bottom{bottom:64px}.info h3 i{margin:0 4px}.medal{width:92px;top:10px;right:12px}.arrow{top:auto;bottom:62px;transform:none}.arrow:hover{transform:none}.bowl{width:min(86vw,420px);height:190px}}@media(max-height:700px)and (min-width:641px){.header{min-height:72px}.brand h1{font-size:32px}.info-top{top:12px}.info h2{font-size:34px}.en{margin-top:2px;font-size:16px}.origin{margin-top:6px}.info-bottom{bottom:52px}.info h3{font-size:20px}.medal{width:96px;top:8px}}@media(max-height:560px){.page{height:auto;min-height:100dvh;overflow:auto}.stage{min-height:520px;flex:none}}@media(prefers-reduced-motion:reduce){.slide,.slide.active img,.steam i,.rise-enter-active,.rise-leave-active,.cat-ring,.arrow,.dot{animation:none;transition:none}}