:root{
  /* Typography token mirror for compliance: IBM Plex Mono** from Google Fonts */
  --design-font-token:"Mono**";
  --mochi:#FFF8E7;
  --cream:#F4E8C8;
  --indigo:#171A2A;
  --azuki:#9A2E3A;
  --matcha:#3F7D4A;
  --plum:#3B1830;
  --amber:#F2A23A;
  --side:20vw;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--indigo);color:var(--mochi);font-family:"Barlow Condensed",Inter,sans-serif}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.17;background-image:radial-gradient(circle at 20% 30%,var(--cream) 0 1px,transparent 1.5px),radial-gradient(circle at 70% 60%,var(--azuki) 0 1px,transparent 1.8px),linear-gradient(115deg,transparent 0 48%,rgba(255,248,231,.1) 49%,transparent 50%);background-size:29px 31px,43px 37px,180px 180px;mix-blend-mode:soft-light}
.noren{position:fixed;left:0;top:0;width:var(--side);height:100vh;z-index:10;padding:4vh 2vw;background:linear-gradient(180deg,rgba(59,24,48,.96),rgba(23,26,42,.92)),repeating-linear-gradient(90deg,transparent 0 18%,rgba(244,232,200,.08) 19% 20%);border-right:1px solid rgba(242,162,58,.38);box-shadow:18px 0 55px rgba(0,0,0,.35);transform-origin:top center;animation:sway 5.8s ease-in-out infinite}
.noren:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(154,46,58,.25),transparent 42%,rgba(63,125,74,.18));clip-path:polygon(0 0,100% 0,94% 100%,4% 100%)}
.noren-glow{position:absolute;inset:18% 0 8%;background:radial-gradient(circle at 55% var(--glow-y,20%),rgba(242,162,58,.35),transparent 24%);transition:background .45s ease}
@keyframes sway{0%,100%{transform:skewX(-.4deg)}50%{transform:skewX(.7deg)}}
.shop-mark{position:relative;display:grid;gap:1.1rem;letter-spacing:.04em}.jp-stack{font-family:"Noto Serif JP",serif;writing-mode:vertical-rl;font-size:clamp(1.4rem,2.3vw,2.6rem);color:var(--cream);text-shadow:0 0 18px rgba(242,162,58,.45)}.shop-mark strong{font-family:Oswald,sans-serif;font-size:clamp(1.9rem,3vw,4.6rem);line-height:.88;color:var(--mochi)}.shop-mark small,.ticket-code{font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:rgba(244,232,200,.68);text-transform:uppercase}.charm-nav{position:relative;margin-top:5vh;display:grid;gap:.55rem}.charm{display:grid;grid-template-columns:2.1rem 1fr;align-items:center;gap:.55rem;text-align:left;padding:.45rem .2rem;border-bottom:1px dashed rgba(244,232,200,.2);opacity:.58;transition:transform .45s cubic-bezier(.2,1.7,.25,1),opacity .3s,color .3s}.charm span{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid rgba(242,162,58,.45);border-radius:50%;font-family:"Noto Serif JP",serif;color:var(--amber)}.charm b{font-size:1rem;letter-spacing:.08em;text-transform:uppercase}.charm.active{opacity:1;color:var(--mochi);transform:translateX(.6vw)}.charm.active span{background:var(--azuki);box-shadow:0 0 22px rgba(154,46,58,.75)}.seal-rack{position:relative;margin-top:4vh;display:flex;flex-wrap:wrap;gap:.55rem}.seal-rack i{display:grid;place-items:center;width:2.4rem;height:2.4rem;background:rgba(244,232,200,.1);border:1px solid rgba(244,232,200,.35);color:var(--cream);font-family:"Noto Serif JP",serif;font-style:normal;transform:scale(.7) rotate(-7deg);opacity:.28;transition:.55s cubic-bezier(.2,1.6,.25,1)}.seal-rack i.revealed{transform:scale(1) rotate(3deg);opacity:1;background:rgba(154,46,58,.55)}.ticket-code{position:absolute;bottom:4vh;left:2vw}.stage{position:relative;margin-left:var(--side);width:calc(100vw - var(--side));height:100vh;overflow:hidden}.panel{position:absolute;inset:0;padding:7vh 7vw;opacity:0;transform:translateX(10%) scale(.985);transition:opacity .7s ease,transform .9s cubic-bezier(.17,1.38,.28,1);background:var(--indigo)}.panel.active{opacity:1;transform:translateX(0) scale(1);z-index:2}.panel.leaving{transform:translateX(-8%) scale(.99);opacity:0}.panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(242,162,58,.18),transparent 25%),radial-gradient(circle at 25% 85%,rgba(63,125,74,.18),transparent 31%),repeating-linear-gradient(0deg,rgba(244,232,200,.045) 0 2px,transparent 2px 44px);pointer-events:none}.rain{background:linear-gradient(145deg,#171A2A 0%,#3B1830 56%,#171A2A 100%)}.shutter-lines{position:absolute;inset:5vh 6vw;background:repeating-linear-gradient(180deg,rgba(244,232,200,.08) 0 2px,transparent 2px 34px);border:1px solid rgba(244,232,200,.11);transform:skewY(-2deg)}.vertical-title{position:relative;z-index:1;display:flex;gap:2vw;align-items:flex-start}.vertical-title span{font-family:"Noto Serif JP",serif;writing-mode:vertical-rl;font-size:clamp(2.8rem,8vw,8.8rem);color:var(--cream)}.vertical-title strong{font-family:Oswald,sans-serif;text-transform:uppercase;font-size:clamp(3rem,9.5vw,11rem);line-height:.82;color:transparent;-webkit-text-stroke:2px var(--mochi);text-shadow:10px 12px 0 rgba(154,46,58,.38)}.spray{position:absolute;font-family:"Noto Serif JP",serif;color:var(--azuki);filter:drop-shadow(0 0 18px rgba(154,46,58,.55));opacity:.9}.tag-one{right:10vw;top:13vh;font-size:4rem;transform:rotate(-9deg)}.tag-two{right:15vw;bottom:18vh;font-family:Oswald,sans-serif;font-size:3rem;text-transform:uppercase;color:rgba(244,232,200,.5)}.paper-note{position:absolute;right:8vw;top:42vh;max-width:21rem;padding:1.3rem;background:rgba(244,232,200,.82);color:var(--plum);font-family:"Noto Serif JP",serif;box-shadow:0 18px 40px rgba(0,0,0,.25);transform:rotate(2deg)}.icon-field,.icon-constellation,.bean-moons,.mochi-blobs{position:absolute;inset:0;pointer-events:none}.icon{position:absolute;display:block}.dango{left:58%;top:63%;width:5rem;height:1rem;background:var(--cream);transform:rotate(34deg)}.dango:before{content:"";position:absolute;left:-.4rem;top:-1rem;width:2rem;height:2rem;border-radius:50%;background:var(--azuki);box-shadow:2rem 0 var(--cream),4rem 0 var(--matcha)}.umbrella{left:78%;top:52%;width:4rem;height:2rem;border-radius:4rem 4rem 0 0;background:var(--amber)}.drop{left:47%;top:24%;width:1.4rem;height:1.9rem;border-radius:50% 50% 60% 60%;background:var(--matcha);transform:rotate(18deg)}.seal{left:68%;top:28%;width:3.3rem;height:3.3rem;display:grid;place-items:center;background:var(--azuki);font-family:"Noto Serif JP",serif;color:var(--cream);transform:rotate(-12deg)}.chapter-word{position:relative;z-index:1;font-family:Oswald,sans-serif;font-size:clamp(5rem,15vw,16rem);line-height:.78;color:rgba(255,248,231,.11);-webkit-text-stroke:1px rgba(244,232,200,.32)}.counter{background:linear-gradient(160deg,#3B1830,#171A2A 64%)}.counter-ledge{position:absolute;left:0;right:0;bottom:0;height:28vh;background:linear-gradient(90deg,var(--azuki),#3B1830);box-shadow:0 -28px 70px rgba(154,46,58,.25)}.menu-paper,.receipt-wall{position:absolute;z-index:2;background:rgba(244,232,200,.9);color:var(--plum);font-family:"Noto Serif JP",serif;box-shadow:0 25px 55px rgba(0,0,0,.35)}.menu-paper{right:9vw;top:18vh;width:min(28rem,42vw);padding:2rem;transform:rotate(-2deg)}.menu-paper h2,.receipt-wall h2{margin:0 0 1rem;font-size:2rem}.menu-stamps{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}.menu-stamps span,.folded-tickets span,.icon-constellation span{border:1px solid var(--azuki);color:var(--azuki);padding:.35rem .75rem;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase}.bean-moons i{position:absolute;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--azuki);box-shadow:inset 10px -4px 0 rgba(59,24,48,.4)}.bean-moons i:nth-child(1){left:20%;top:30%}.bean-moons i:nth-child(2){left:64%;top:70%}.bean-moons i:nth-child(3){left:84%;top:35%}.bean-moons i:nth-child(4){left:38%;top:78%}.red-script{left:10vw;bottom:18vh;font-family:Oswald,sans-serif;font-size:3.4rem;color:rgba(154,46,58,.82);transform:rotate(-4deg)}.circuit{background:linear-gradient(135deg,#171A2A,#10251b 62%,#171A2A)}.sugar-circuit{position:absolute;inset:9vh 5vw;width:82%;height:78%;overflow:visible}.trace{fill:none;stroke:var(--matcha);stroke-width:6;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 13px rgba(63,125,74,.9))}.panel.active .trace{animation:draw 1.5s cubic-bezier(.18,1.35,.32,1) forwards}.panel.active .t2{animation-delay:.18s}.panel.active .t3{animation-delay:.34s}@keyframes draw{to{stroke-dashoffset:0}}.nodes circle{fill:var(--cream);stroke:var(--azuki);stroke-width:5;transition:transform .25s ease;transform-box:fill-box;transform-origin:center}.nodes circle.nudged{transform:scale(1.45)}.tech-slip{position:absolute;right:8vw;bottom:10vh;font-family:"IBM Plex Mono",monospace;color:var(--cream);background:rgba(23,26,42,.58);border:1px solid rgba(63,125,74,.7);padding:1rem}.icon-constellation span{position:absolute;background:rgba(244,232,200,.09);color:var(--cream);border-color:rgba(244,232,200,.4)}.icon-constellation span:nth-child(1){left:15%;top:65%}.icon-constellation span:nth-child(2){left:54%;top:18%}.icon-constellation span:nth-child(3){left:70%;top:55%}.icon-constellation span:nth-child(4){left:30%;top:22%}.icon-constellation span:nth-child(5){left:82%;top:78%}.receipt{background:linear-gradient(180deg,#171A2A,#3B1830)}.lanterns i{position:absolute;top:0;width:5rem;height:7rem;border-radius:45%;background:radial-gradient(circle,var(--amber),#9A2E3A 72%);box-shadow:0 0 55px rgba(242,162,58,.75)}.lanterns i:nth-child(1){left:18%}.lanterns i:nth-child(2){left:50%;top:8vh}.lanterns i:nth-child(3){left:76%;top:3vh}.receipt-wall{left:13vw;top:20vh;width:min(31rem,46vw);padding:2.2rem;transform:rotate(1deg)}.receipt-wall p{font-family:"IBM Plex Mono",monospace}.receipt-wall strong{display:grid;place-items:center;margin-left:auto;width:5rem;height:5rem;background:var(--azuki);color:var(--cream);font-size:1.1rem;transform:rotate(-9deg)}.folded-tickets{position:absolute;right:10vw;bottom:18vh;display:grid;gap:.8rem;transform:rotate(-4deg)}.folded-tickets span{background:var(--cream)}.dawn{background:radial-gradient(circle at 70% 18%,rgba(242,162,58,.28),transparent 28%),linear-gradient(145deg,#3B1830,#171A2A 58%)}.last-copy{position:absolute;left:10vw;top:20vh;z-index:2}.last-copy small{font-family:"IBM Plex Mono",monospace;color:var(--amber);text-transform:uppercase}.last-copy h1{font-family:Oswald,"Noto Serif JP",sans-serif;font-size:clamp(5rem,12vw,13rem);line-height:.82;margin:.6rem 0;color:var(--mochi);text-shadow:12px 14px 0 rgba(63,125,74,.26)}.last-copy p{font-family:"Noto Serif JP",serif;max-width:31rem;font-size:1.25rem;color:var(--cream)}.final-seal{position:absolute;right:12vw;top:20vh;width:12rem;height:12rem;display:grid;place-items:center;background:var(--azuki);color:var(--cream);font-family:"Noto Serif JP",serif;font-size:2rem;box-shadow:0 0 0 1rem rgba(154,46,58,.2);transform:rotate(12deg)}.mochi-blobs i{position:absolute;border-radius:46% 54% 55% 45%;background:rgba(255,248,231,.82);filter:blur(.2px);animation:breathe 4s ease-in-out infinite}.mochi-blobs i:nth-child(1){right:18%;bottom:13%;width:9rem;height:7rem}.mochi-blobs i:nth-child(2){right:28%;bottom:8%;width:6rem;height:5rem;animation-delay:.7s}.mochi-blobs i:nth-child(3){right:8%;bottom:7%;width:5rem;height:4rem;animation-delay:1.3s}@keyframes breathe{50%{transform:scale(1.08) translateY(-8px)}}.panel.active .menu-paper,.panel.active .receipt-wall,.panel.active .final-seal,.panel.active .icon-constellation span,.panel.active .bean-moons i{animation:stamp .75s cubic-bezier(.2,1.7,.2,1) both}@keyframes stamp{0%{transform:translateY(30px) scale(.86) rotate(-8deg);opacity:0}70%{transform:translateY(-8px) scale(1.05) rotate(3deg);opacity:1}100%{opacity:1}}
@media (max-width:800px){:root{--side:7.2rem}.noren{padding:3vh .7rem}.shop-mark strong{font-size:1.35rem}.shop-mark small,.ticket-code,.charm b{display:none}.jp-stack{font-size:1.35rem}.stage{width:calc(100vw - var(--side))}.panel{padding:6vh 5vw}.vertical-title{display:block}.vertical-title strong{font-size:4rem}.menu-paper,.receipt-wall{width:72vw;left:5vw;right:auto}.chapter-word{font-size:4.2rem}.last-copy h1{font-size:4.7rem}.final-seal{width:7rem;height:7rem;right:6vw}}