:root{--yellow:#ffd400;--ink:#111;--paper:#fffdf5;--blue:#2460c7;--pink:#f18eb2;--font:Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:16px/1.7 var(--font);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent;color:inherit}button{font:inherit;cursor:pointer}a{text-underline-offset:4px}h1,h2,p{margin-top:0}button:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.site-header{display:flex;align-items:center;justify-content:space-between;min-height:55px;border-bottom:1.5px solid;background:var(--paper)}.brand{font-size:16px;font-weight:850;letter-spacing:-.035em;text-decoration:none;padding:9px 27px;white-space:nowrap}.site-header nav{display:flex;gap:28px;align-items:center;padding:0 28px}.site-header nav a{font-size:11px;font-weight:650;text-decoration:none;white-space:nowrap}.site-header nav a[aria-current]{box-shadow:0 3px var(--yellow)}
.site-navigation.nav-ready{position:fixed;top:0;left:0;right:0;z-index:100;pointer-events:none}.nav-ready .site-header{transform:translateY(-110%);visibility:hidden;pointer-events:none;transition:transform .22s ease,visibility .22s;box-shadow:0 5px 0 #1111110a}.nav-ready.is-open .site-header{transform:translateY(0);visibility:visible;pointer-events:auto}.nav-edge{display:none}.nav-ready .nav-edge{display:block;position:absolute;top:0;left:0;right:0;height:12px;pointer-events:auto}
.nav-handle{position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:30px;z-index:2;padding:0;display:grid;place-items:center;border:0;background:none;color:#1118;pointer-events:auto;transition:top .22s ease}.nav-handle[hidden]{display:none}.handle-dots{width:20px;height:8px;background:radial-gradient(circle at 2px 4px,currentColor 1.5px,transparent 1.7px),radial-gradient(circle at 10px 4px,currentColor 1.5px,transparent 1.7px),radial-gradient(circle at 18px 4px,currentColor 1.5px,transparent 1.7px)}.nav-handle:hover,.nav-handle:focus-visible{color:#111}.nav-ready.is-open .nav-handle{top:100%}.is-open .handle-dots{width:14px;height:14px;background:none;position:relative}.is-open .handle-dots:before,.is-open .handle-dots:after{content:"";position:absolute;top:6px;left:0;width:14px;height:1.5px;background:currentColor;transform:rotate(45deg)}.is-open .handle-dots:after{transform:rotate(-45deg)}
.department-header{background:var(--yellow);display:flex;align-items:center;gap:48px;padding:22px max(4vw,24px);min-height:158px;border-bottom:1.5px solid;overflow:hidden}.department-identity{flex-shrink:0}.department-header h1{font-size:53px;line-height:1.2;letter-spacing:-.055em;font-weight:950;margin:0}.department-count{display:flex;align-items:baseline;gap:5px;font-size:10px;margin:8px 0 0;line-height:1.5}.department-count strong{font:650 16px/1.3 ui-monospace,monospace}.department-intro p{font-size:13px;line-height:1.9;margin:0 0 7px}.department-intro small{display:block;font-size:11px;color:#5f5114}.department-doodle{display:block;width:190px;height:112px;object-fit:contain;margin-left:auto;margin-right:24px}.checker{height:12px;background:repeating-conic-gradient(var(--ink) 0% 25%,var(--paper) 0% 50%) 0 /24px 24px;border-bottom:1.5px solid}
.department{max-width:1190px;margin:0 auto;padding:29px 38px 38px;--object-height:230px;--pack-scale:.62;--column-count:4}.stock-grid{display:grid;grid-template-columns:repeat(var(--column-count),minmax(0,1fr));gap:26px 24px;padding:0 4px}.stock-slot{min-width:0;position:relative}.stock-item{display:block;position:relative;min-width:0;width:100%;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:center;pointer-events:none}.stock-object{display:block;height:var(--object-height);position:relative;isolation:isolate;pointer-events:none}.stock-object:before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:8px;border-bottom:1.5px solid;background:var(--yellow);box-shadow:0 2px 0 #dfd7c0;z-index:3;pointer-events:none}.stock-object:after{content:"";position:absolute;width:64%;height:10px;bottom:3px;left:18%;background:#11111115;border-radius:50%;filter:blur(4px);z-index:-1}
.stock-object .package{display:block;position:absolute;bottom:3px;left:50%;margin:0;transform:translateX(-50%) scale(var(--pack-scale)) rotate(-3deg);transform-origin:center bottom;filter:drop-shadow(7px 7px 1px #11111120);transition:transform .2s;pointer-events:auto}.stock-slot:nth-child(2n) .package{transform:translateX(-50%) scale(var(--pack-scale)) rotate(3deg)}.stock-item:hover .package,.stock-item:focus-visible .package{transform:translateX(-50%) scale(var(--pack-scale)) translateY(-9px) rotate(0)}.stock-item.is-grabbed .package,.stock-item.is-opening .package{transform:translateX(-50%) scale(calc(var(--pack-scale) * 1.07)) translateY(-16px) rotate(0)}.stock-object .packet{width:235px;height:325px}.stock-object .tin{width:223px;height:291px}.stock-object .pack-title{font-size:39px;line-height:1.15;margin:15px 0 8px}.stock-object .pack-kicker{font-size:10px;letter-spacing:.13em}.stock-object .packet .pack-face:before,.stock-object .packet .pack-face:after{background:repeating-linear-gradient(90deg,#11111135 0 2px,#ffffff35 2px 6px)}.stock-object .tin .landscape{display:block;margin-top:13px;height:104px}
.achievement-medal{position:absolute;bottom:42px;left:50%;width:90px;height:123px;transform:translateX(-50%)}.medal-ribbon{position:absolute;left:16px;right:16px;bottom:0;height:68px;background:var(--blue);clip-path:polygon(8% 0,92% 0,100% 100%,70% 86%,50% 100%,29% 85%,0 100%)}.achievement-medal .burst{width:90px;height:90px;margin:0;position:absolute;top:0;left:0;font-size:48px}.medal-center{width:59px;height:59px;border:1.5px solid;border-radius:50%;display:grid;place-items:center}
.shelf-caption{--label-pad:14px;position:relative;isolation:isolate;display:grid;align-content:start;gap:4px;width:calc(100% - 20px);margin:9px auto 0;padding:10px var(--label-pad) 12px;border:0;text-align:left;pointer-events:auto}.shelf-caption:before{content:"";position:absolute;inset:0;background:url('assets/label-order-paper.svg') center/100% 100% no-repeat;filter:drop-shadow(1px 2px 0 #e7e0d1);z-index:-1;pointer-events:none}.caption-title{display:block;margin:0;padding-left:34px;font:850 18px/1.4 var(--font);letter-spacing:-.04em}.caption-question{display:block;color:#59594f;font:400 12px/1.55 var(--font);text-wrap:pretty}.caption-number{position:absolute;display:grid;place-items:center;top:11px;left:var(--label-pad);width:26px;height:23px;border-radius:1px;color:var(--paper);background:var(--ink);font:500 13px/1 Menlo,monospace;letter-spacing:.015em}.stock-item:focus-visible{outline:0}.stock-item:focus-visible .shelf-caption{outline:2px solid var(--blue);outline-offset:4px}
.sample-dialog{width:calc(100% - 44px);max-width:410px;max-height:calc(100dvh - 44px);padding:38px 32px 30px;background:var(--paper);color:var(--ink);border:2px solid;box-shadow:7px 7px 0 var(--yellow)}.sample-dialog::backdrop{background:#1116}.sample-dialog .eyebrow{font-size:10px;letter-spacing:.14em;font-weight:750;margin-bottom:16px}.sample-dialog h2{font-size:29px;line-height:1.3;letter-spacing:-.025em;margin-bottom:19px}.sample-dialog p{font-size:13px;line-height:1.9}.dialog-close{position:absolute;right:9px;top:5px;background:none;border:0;font-size:25px;padding:5px 12px;line-height:1.3}.dialog-back{background:var(--yellow);border:1.5px solid;padding:8px 16px;font-size:12px;margin-top:6px}.dialog-back span{margin-left:3px}body:has(dialog[open]){overflow:hidden}
main{flex:1 0 auto}.department-closing{width:min(100%,1190px);margin:0 auto;padding:22px 38px 25px;color:#7b735e;font-size:11px;text-align:right}.department-closing p{margin:0;padding-top:17px;border-top:1px solid #ded7c6;line-height:1.8}.noscript-note{margin:0 auto;padding:20px;max-width:1190px;font-size:13px}
@media(hover:hover) and (pointer:fine){body,button,a,.shelf-caption{cursor:url('assets/cursor-star.png') 12 12,auto}.stock-object .package,.stock-object .package *{cursor:url('assets/cursor-glove-open.svg') 14 10,grab}.stock-item:active .package,.stock-item:active .package *,.stock-item.is-grabbed .package,.stock-item.is-grabbed .package *{cursor:url('assets/cursor-glove-closed.svg') 14 12,grabbing}}
@media(max-width:1100px) and (min-width:981px){.shelf-caption{--label-pad:12px;width:calc(100% - 10px)}.caption-title{font-size:17px}}
@media(max-width:980px){.department{--column-count:3;--object-height:223px;--pack-scale:.60;padding:25px 28px}.department-header{padding:25px 28px;gap:28px}.department-doodle{margin-right:0}}
@media(max-width:700px){.department{--column-count:2;--object-height:224px;--pack-scale:.60;padding:23px 25px 30px}.department-header{flex-wrap:wrap;gap:14px 24px;padding:20px 24px}.department-identity{flex:1}.department-header h1{font-size:44px}.department-intro{order:3;width:100%}.department-intro p{font-size:12px;line-height:1.7}.department-intro small{font-size:10px}.department-doodle{width:120px;height:84px;margin-left:0}.stock-grid{column-gap:20px}.shelf-caption{--label-pad:12px;width:calc(100% - 10px)}.site-header{flex-wrap:wrap}.brand{padding:9px 21px;font-size:15px}.site-header nav{flex:1;min-height:40px;gap:16px;padding:0 21px;justify-content:flex-end}.site-header nav a{font-size:10px}}
@media(max-width:480px){.department{--object-height:188px;--pack-scale:.51;padding:18px 20px 28px}.department-header{padding:20px;gap:10px}.department-header h1{font-size:39px}.department-intro p br{display:none}.department-intro p{font-size:11px;margin-bottom:4px}.department-doodle{width:91px;height:82px}.stock-grid{column-gap:16px;padding:0 2px}.shelf-caption{--label-pad:10px;width:calc(100% - 4px);padding-top:10px;padding-bottom:11px}.caption-title{font-size:16px;padding-left:30px}.caption-question{font-size:11px}.caption-number{width:23px;height:20px;font-size:12px}.department-closing{font-size:10px;text-align:left;padding:18px 20px 22px}.site-header{display:block}.brand{display:block;font-size:14px;padding:7px 19px 0}.site-header nav{min-height:35px;justify-content:space-between;padding:0 19px;gap:12px}}
@media(max-width:359px){.department{--object-height:171px;--pack-scale:.46;padding-left:14px;padding-right:14px}.department-header h1{font-size:35px}.department-doodle{width:75px}.sample-dialog{padding:35px 23px 26px}.sample-dialog .eyebrow{font-size:9px}}
@media(prefers-reduced-motion:reduce){.stock-object .package,.nav-ready .site-header,.nav-handle{transition:none}}
