.supermarket-page{min-width:0}.supermarket-page [hidden]{display:none!important}
.supermarket-layout .workspace{max-width:none;width:100%;margin:0}.supermarket-layout .guide{gap:16px}
.supermarket-layout .guide-portrait{width:100%;height:290px;object-fit:contain}.supermarket-layout .guide-bubble{margin:0;text-align:center;font-size:20px;padding:16px}
.progression-topics{width:100%;display:grid;gap:8px}.progression-topics button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:#f8fcff;color:var(--blue);font-weight:850;font-size:17px;min-height:52px;padding:10px;border:1.5px solid var(--line);border-radius:12px;line-height:1.25}.progression-topics .icon{width:28px;height:28px;flex-shrink:0}.progression-topics button[aria-current=page]{background:#e2f0ff;border-color:var(--blue)}.mobile-topic{display:none}
.supermarket-page .lesson-heading{gap:14px;margin-bottom:12px}.supermarket-page h1{font-size:clamp(28px,2.4vw,38px)}.supermarket-page #intro{font-size:22px;margin:6px 0 0}.supermarket-page .mode-tabs{min-width:290px;flex:0 0 290px}.mode-tabs button{min-height:48px;flex:1;border:0;border-radius:999px;background:transparent;color:var(--blue);font-size:16px;font-weight:900;white-space:nowrap;padding:8px 12px}.mode-tabs button:first-child{flex:1.5}.mode-tabs button[aria-pressed=true]{background:var(--blue);color:white}
.attempt-label{font-size:15px;color:#496183;margin:8px 0 12px}.checkout-panel{background:white;border:1.5px solid var(--line);border-radius:20px;padding:22px;min-width:0}
.step-trail{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:0;margin:0 0 20px}.step-trail li{border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;font-size:17px;font-weight:850;background:#f4f9ff}.step-trail .icon{width:26px;height:26px}.step-trail li.current{border-color:var(--blue);background:#e1f0ff;color:var(--blue)}.step-trail li.prepared{color:#526989}.step-trail li.done{background:#e6f7f2}.step-trail li.current.is-guided{outline:2px solid #916609;outline-offset:2px}
.checkout-panel h2{font-size:30px;margin:0 0 8px;line-height:1.25}.instruction{font-size:22px;margin:0 0 20px;line-height:1.35}.pretend-workspace{display:grid;grid-template-columns:minmax(160px,29%) minmax(0,1fr);gap:22px;min-height:285px}.lesson-wallet{border-right:1px solid var(--line);padding-right:18px}.lesson-wallet h3{font-size:26px;margin:0 0 18px}.lesson-wallet #cash{display:grid;justify-items:center;gap:12px;min-height:110px;align-content:center}.lesson-wallet #cash img{width:100%;max-width:210px;height:auto}.lesson-wallet #wallet-note{font-size:17px;text-align:center;color:#496183}.empty-wallet{padding:25px 12px;text-align:center;border:2px dashed #92b5d6;border-radius:14px;width:100%;font-size:20px}.empty-wallet .icon{display:block;width:48px;height:48px;margin:0 auto 10px}
.checkout-scene{position:relative;width:100%;max-width:650px;margin:0 auto;aspect-ratio:2/1;align-self:center}.cashier-art{width:100%;height:100%;object-fit:contain}.total-sign{position:absolute;top:6%;left:4%;font-size:26px;font-weight:900;background:#edf6ff;border:1.5px solid var(--line);padding:12px;border-radius:12px;margin:0;white-space:pre-line;text-align:center;line-height:1.3}.counter-goods{position:absolute;bottom:22%;left:5%;width:48%;display:flex;align-items:flex-end;justify-content:center;gap:8px}.counter-good{display:grid;justify-items:center;min-width:0;background:#ffffffe8;padding:4px;border-radius:12px;font-size:17px;font-weight:850}.counter-good img{width:100%;max-width:115px;height:112px;object-fit:contain}.counter-good span{white-space:nowrap}.checkout-scene.reposition .counter-goods{left:23%;width:28%}
#goods-workspace{min-width:0;align-self:center}.simple-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.product-choice{display:grid;justify-items:center;gap:8px;min-height:230px;border:1.5px solid var(--line);border-radius:16px;padding:14px;background:#f8fcff;font-size:21px;color:var(--navy)}.product-choice img{width:100%;height:125px;object-fit:contain}.product-choice .choice-label{font-weight:850;color:var(--blue);font-size:18px}.product-choice:disabled{opacity:1;color:#496183;background-color:#e6f7f2}
.selected-card{display:grid;justify-items:center;gap:10px;border:1.5px solid var(--line);border-radius:16px;padding:18px;background:#f4faff;text-align:center;position:relative}.selected-card>img{height:145px;width:100%;object-fit:contain}.selected-card strong{font-size:27px}.selected-card .basket-tag{display:flex;align-items:center;gap:8px;font-size:18px}.basket-tag .icon{width:26px;height:26px}
.owned-view{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}.owned-bag,.unowned-good{flex:1;min-width:150px;border:2px solid #2d9784;border-radius:16px;padding:14px;text-align:center;background:#edfaf6}.owned-bag>p,.unowned-good>p{font-weight:900;font-size:20px;margin:4px 0 10px}.owned-bag>.icon{width:42px;height:42px}.bag-items{display:flex;justify-content:center;gap:10px}.bag-items .counter-good{background:transparent}.unowned-good{border:1px solid var(--line);background:#f8fcff}.unowned-good>img{width:100%;height:100px;object-fit:contain}.unowned-good strong{display:block;font-size:20px}
.receipt{border:1px dashed #587999;border-radius:10px;padding:12px;text-align:center;font-weight:900;font-size:23px;margin:18px 0}
.picture-list{margin:0 0 18px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#f6faff}.picture-list h3{font-size:20px;margin:0 0 10px}.picture-list ul{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0;list-style:none}.picture-list li{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:0 8px;flex:1 1 220px;min-width:0;font-size:18px}.picture-list li>img{grid-row:1/3;width:42px;height:48px;object-fit:contain}.picture-list li>span{grid-column:2;font-size:15px;color:#496183;line-height:1.35}.picture-list li.found>span{color:#087761;font-weight:850}
.shopping-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 14px}.shopping-actions button{min-height:52px;padding:10px 18px;background:white;border:1.5px solid var(--line);border-radius:12px;font-size:20px;line-height:1.25;font-weight:850;color:var(--blue);flex:1;display:flex;align-items:center;justify-content:center;gap:8px}.shopping-actions .primary{background:var(--blue);border-color:var(--blue);color:white}.shopping-actions .primary>.icon{filter:invert(1)}.shopping-actions button>.icon{width:25px;height:25px}.shopping-actions .primary.is-guided:not(:disabled){outline:2px solid #916609;outline-offset:3px}.supermarket-page button:disabled{opacity:.48;cursor:default}.supermarket-page .product-choice:disabled{opacity:1}.ask-helper{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;background:transparent;color:var(--blue);font-size:19px;font-weight:850;margin:auto}.ask-helper .icon{width:26px;height:26px}.lesson-note{font-size:15px;text-align:center;color:#496183;margin:10px 0 0;line-height:1.4}.supermarket-layout .lesson-footer{margin-top:18px}.supermarket-layout .action-rail{padding:20px}.supermarket-layout .action-rail button{font-size:23px;padding:26px 0}.supermarket-layout .action-rail button>span{width:80px;height:80px}
.helper-workspace{display:grid;grid-template-columns:minmax(220px,39%) minmax(0,1fr);gap:20px}.helper-checklist{padding:0;margin:0;list-style:none;display:grid;gap:8px}.helper-checklist li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:20px;min-height:60px;font-weight:850;background:#f5faff}.helper-checklist .icon{width:32px;height:32px;flex-shrink:0}.helper-checklist li.current{border:2px solid var(--blue);background:#e4f1ff}.helper-checklist li.reported{background:#e9f8f2;color:#176a54}.helper-checklist li.reported:after{content:'✓ Reported';font-size:13px;margin-left:auto}.helper-scene{align-self:center}.helper-scene>img{width:100%;height:auto;border-radius:14px}.helper-scene>p{font-size:21px;text-align:center}.helper-scene .helper-notice{font-size:16px;line-height:1.4;color:#496183}.help-icon{width:65px;height:65px;display:block;margin:auto}.supermarket-page dialog button{width:100%;min-height:48px}.supermarket-page dialog p{line-height:1.5}
.demonstration{border:2px solid #8f670e;border-radius:14px;background:#fff9e9;padding:14px;margin-top:18px}.demonstration>strong{font-size:18px}.demonstration p{font-size:20px;margin:10px 0 0}.demonstration #demo-pictures{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px}.demo-note{width:125px;height:auto}.demo-product{height:72px;width:72px;object-fit:contain}.demo-arrow{width:32px;height:32px}.demo-recipient{display:grid;gap:8px;text-align:center;font-size:17px}.demo-recipient>.icon{width:48px;height:48px;margin:auto}.demonstration.animate .demo-note{animation:give-note 1.5s ease-out 1 forwards}@keyframes give-note{from{transform:translateX(0);opacity:1}to{transform:translateX(90px);opacity:0}}
@media(prefers-reduced-motion:reduce){.demonstration.animate .demo-note{animation:none}}
@media(max-width:1199px){.supermarket-layout .guide-portrait{height:215px}.supermarket-layout .guide-bubble{font-size:18px;padding:12px}.progression-topics button{font-size:15px}.supermarket-page .lesson-heading{flex-wrap:wrap}.supermarket-page .mode-tabs{flex-basis:290px}.checkout-panel{padding:16px}.pretend-workspace{grid-template-columns:1fr;gap:14px}.lesson-wallet{border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lesson-wallet h3{font-size:24px;margin:0}.lesson-wallet #cash{display:flex;gap:8px;min-height:0;flex:1}.lesson-wallet #cash img{width:min(140px,45%)}.lesson-wallet #wallet-note{margin:0;font-size:15px;width:100%}.empty-wallet{padding:10px;font-size:17px}.empty-wallet .icon{display:none}.counter-good img{height:90px}.checkout-panel h2{font-size:26px}.instruction{font-size:20px}.helper-workspace{grid-template-columns:1fr}.step-trail li{font-size:15px;padding:8px 3px}.total-sign{font-size:22px;padding:8px}.helper-scene>img{max-height:260px;object-fit:contain}}
@media(max-width:900px){.supermarket-layout .action-rail{padding:12px 8px;gap:4px}.supermarket-layout .action-rail button{font-size:17px;padding:6px;flex-direction:column;gap:4px}.supermarket-layout .action-rail button>span{height:48px;width:48px}.supermarket-layout .guide-portrait{height:180px}.step-trail{gap:5px}.step-trail li{font-size:13px}.step-trail .icon{width:22px;height:22px}.shopping-actions button{font-size:18px}.simple-shelf{gap:10px}.product-choice{font-size:19px;min-height:205px;padding:10px}.product-choice img{height:110px}.counter-good img{height:76px}.counter-good{font-size:15px}.total-sign{font-size:20px}.counter-goods{left:2%;width:49%}}
@media(max-width:640px){html:has(>body.supermarket-page){scroll-padding-bottom:120px}.supermarket-layout{padding-bottom:120px}.supermarket-layout .guide{padding:10px 16px;gap:12px}.supermarket-layout .guide-portrait{height:90px;width:70px;order:-1}.supermarket-layout .guide-bubble{min-width:0;width:auto;flex:1 1 200px;font-size:17px}.progression-topics{display:none}.mobile-topic{display:flex;gap:10px;align-items:center;width:100%;font-size:16px;font-weight:850}.mobile-topic select{min-width:0;flex:1;min-height:44px;color:var(--blue);background:white;border:1px solid var(--line);border-radius:10px;font-size:16px;padding:8px}.supermarket-page .mode-tabs{min-width:0;width:100%;max-width:none;flex-basis:100%}.supermarket-page .lesson-heading>div{width:100%}.supermarket-page #intro{font-size:20px}.checkout-panel{padding:14px;border-radius:16px}.step-trail{grid-template-columns:1fr;gap:8px;margin-bottom:18px}.step-trail li:not(.current){display:none}.step-trail li.current::before{content:attr(data-position);font-size:14px}.step-trail li{flex-direction:row;justify-content:center;font-size:15px}.checkout-panel h2{font-size:25px}.instruction{font-size:19px}.lesson-wallet{display:block}.lesson-wallet h3{font-size:23px}.lesson-wallet #cash{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0;min-height:82px}.lesson-wallet #cash img{width:calc(50% - 5px);max-width:170px}.lesson-wallet #cash img:only-child{width:190px}.total-sign{font-size:20px;padding:6px}.counter-good img{height:70px}.counter-good span{white-space:normal}.counter-good{font-size:14px}.product-choice img{height:100px}.product-choice{min-height:195px;font-size:19px}.shopping-actions .primary{flex:1 1 100%}.shopping-actions button{flex:1 1 45%;font-size:18px}.shopping-actions #helper-undo{font-size:16px}.helper-checklist li{font-size:18px}.helper-checklist .icon{width:28px;height:28px}.supermarket-layout .action-rail button{font-size:14px;flex:1}.supermarket-layout .action-rail button>span{width:42px;height:42px}.supermarket-layout .lesson-footer{margin-top:18px}.attempt-label{font-size:14px}.checkout-scene{display:grid;aspect-ratio:auto}.cashier-art{grid-row:2;grid-column:1;height:auto}.total-sign{position:static;grid-row:1;grid-column:1;white-space:normal;text-align:left;width:100%;margin-bottom:10px}.counter-goods{bottom:16%;left:2%;width:58%}.checkout-scene.reposition .counter-goods{left:28%;width:40%}.owned-view{gap:10px}.owned-bag,.unowned-good{padding:10px;min-width:120px}.bag-items .counter-good img{height:85px}.helper-scene .helper-notice{font-size:16px}}

@media(max-width:360px){.supermarket-page .mode-tabs button{font-size:14px;padding:8px}.supermarket-layout .guide-bubble{flex-basis:160px;font-size:16px}.total-sign{margin-bottom:36px}}
/* Goods stay visible while choosing; transitions use source artwork, not drawn substitutes. */
.product-choice{background:#f8fcff url('assets/shelf.webp') center 54px/95% 130px no-repeat;min-height:220px}
.product-choice.selected{border:2px solid #087761;background-color:#eaf8f2}.product-choice:disabled:not(.selected){background-color:#f8fcff;color:var(--navy)}
.product-choice .choice-label{min-height:26px}.selected-card{margin-top:14px;padding:12px}.selected-card .basket-tag{margin:4px 0}
.basket-display{position:relative;width:220px;max-width:100%;aspect-ratio:4/3}.basket-art{width:100%;height:100%;object-fit:contain}.basket-items{position:absolute;display:flex;justify-content:center;gap:8px;bottom:37%;left:15%;width:70%}.basket-items img{width:65px;height:68px;object-fit:contain}
.lesson-wallet #cash .wallet-picture{width:100%;max-width:145px;height:130px;object-fit:contain;display:block;margin:0 auto 8px}.empty-wallet{padding:12px}
.checkout-scene{display:grid;aspect-ratio:auto;gap:12px}.counter-stage{position:relative;width:100%;aspect-ratio:2/1}.cashier-art{display:block;width:100%;height:auto}.total-sign{position:static;grid-row:auto;grid-column:auto;width:100%;white-space:normal;text-align:left;font-size:22px;margin:0;padding:8px 12px}
.counter-goods,.checkout-scene.reposition .counter-goods{bottom:25%;left:34%;width:31%;gap:5px}.checkout-scene.reposition .counter-goods{left:39%;width:22%}
.counter-good{padding:3px;font-size:16px}.counter-good img{height:80px;max-width:95px}.counter-good span{white-space:normal;text-align:center}
.counter-choice{display:grid;gap:3px;min-width:0;width:50%;padding:3px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--navy)}.counter-choice[aria-pressed=true]{border:2px solid var(--blue);background:#e5f1ff}.counter-choice .choice-label{font-size:13px;font-weight:850;color:var(--blue)}.counter-choice .counter-good{background:transparent;font-size:15px}.counter-choice .counter-good img{height:65px}
.cashier-payment{position:absolute;left:54%;top:48%;width:13%;display:grid;gap:2px}.cashier-payment img{width:100%;height:auto}.received-goods{position:absolute;left:5%;bottom:20%;width:13%;display:flex;justify-content:center;gap:2px}.received-goods img{width:100%;min-width:0;height:48px;object-fit:contain}
.owned-view{margin-top:12px}.owned-bag{min-width:120px}.owned-bag p:last-child{text-transform:capitalize;font-size:17px}.shop-shelf{position:relative;width:190px;max-width:100%;aspect-ratio:2/1;margin:0 auto 5px}.shelf-art{width:100%;height:100%;object-fit:contain}.shelf-good{position:absolute;bottom:32%;left:32%;width:36%;height:75px;object-fit:contain}.unowned-good>p{font-size:18px}
.transfer-picture{position:absolute;z-index:1000;pointer-events:none;object-fit:contain;transform-origin:top left}.quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.practice-choice{display:grid;justify-items:center;align-content:center;gap:12px;min-height:210px;padding:16px;border:1.5px solid var(--line);border-radius:16px;background:#f7fbff;color:var(--navy);font-size:21px}.practice-choice img{width:100%;height:130px;object-fit:contain}.practice-choice.is-guided{outline:2px solid #916609;outline-offset:2px}.quiz-feedback{padding:12px;border-radius:12px;background:#fff8e9;font-size:20px}.helper-practice .helper-notice{font-size:17px;color:#496183;line-height:1.4}.helper-practice #quiz-progress{font-size:18px;font-weight:850}
@media(max-width:1199px){.lesson-wallet #cash .wallet-picture{width:95px;height:75px;margin:0 auto 5px}.counter-good img{height:80px}}
@media(max-width:640px){.counter-good{font-size:13px}.counter-good img{height:46px}.counter-choice .counter-good img{height:40px}.counter-choice .counter-good{font-size:12px}.counter-choice .choice-label{font-size:11px}.counter-goods,.checkout-scene.reposition .counter-goods{left:33%;width:34%;bottom:23%}.checkout-scene.reposition .counter-goods{left:39%;width:23%}.cashier-payment{top:47%;width:13%}.received-goods img{height:32px}.received-goods{bottom:18%}.total-sign{font-size:20px;margin:0}.product-choice{min-height:190px;background-position:center 45px;background-size:95% 108px}.basket-display{width:190px}.basket-items img{height:57px;width:55px}.practice-choice{font-size:18px;min-height:170px;padding:10px}.practice-choice img{height:90px}.quiz-choices{gap:10px}.shelf-good{height:65px}.quiz-feedback{font-size:18px}}
.owned-bag p:last-child{text-transform:none}.counter-choice{padding:2px}.counter-choice .counter-good{font-size:14px;padding:0}.counter-choice .counter-good img{height:52px}.counter-choice .counter-good span{white-space:nowrap}.counter-goods:has(.counter-choice){left:29%;width:39%}
@media(max-width:640px){.counter-choice .counter-good{font-size:11px}.counter-choice .counter-good img{height:38px}.counter-choice .choice-label{font-size:10px}}
.received-goods{bottom:14%}@media(max-width:640px){.received-goods{bottom:14%}}
.choice-label{display:flex;gap:4px;align-items:center;justify-content:center}.product-choice .choice-label .icon{width:20px;height:20px}.counter-choice .choice-label .icon{width:14px;height:14px}.counter-choice .choice-label{min-height:18px}.checkout-scene.reposition .counter-goods{left:27%;width:23%}
@media(max-width:640px){.counter-choice[aria-pressed=true] .choice-label>span{display:none}.checkout-scene.reposition .counter-goods{left:27%;width:23%}}
@media(max-width:640px){.counter-goods:has(.counter-choice){left:27%;width:45%}}
.counter-choice,.counter-choice[aria-pressed=true]{background:transparent}.counter-choice .counter-good>span{background:#fffffff0;border-radius:4px;padding:0 2px}
@media(max-width:360px){.counter-goods:has(.counter-choice){left:24%;width:52%}}
.cashier-payment{left:83%;top:67%;width:13%}@media(max-width:640px){.cashier-payment{left:83%;top:67%;width:13%}}
.progression-topics .topic-picture{width:52px;height:46px;flex-shrink:0;object-fit:contain}.step-trail .helper-picture{width:64px;height:52px;max-width:100%}
@media(min-width:641px) and (max-width:900px){.progression-topics button{flex-direction:column;text-align:center;gap:4px;padding:8px 6px;min-width:0}.progression-topics button>span:last-child{min-width:0;width:100%}}
.owned-bag{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;align-self:flex-start;text-align:left;padding:10px 12px}.owned-bag>p{grid-column:1;margin:3px 0;font-size:18px}.owned-bag>p:nth-child(2){font-size:16px}.owned-bag>.bag-items{grid-column:2;grid-row:1/3;align-items:center;gap:6px}.owned-bag .counter-good{font-size:13px;padding:0}.owned-bag .counter-good img{width:54px;height:54px}
.helper-checklist li{position:relative;min-height:86px;padding:8px;gap:10px;font-size:18px}.helper-checklist li.reported{padding-bottom:23px}.helper-checklist li.reported:after{position:absolute;right:8px;bottom:4px}.helper-picture{position:relative;display:block;width:88px;height:70px;flex-shrink:0}.helper-picture .helper-base{width:100%;height:100%;object-fit:contain}.helper-picture .helper-good{position:absolute;width:42%;height:62%;left:29%;bottom:24%;object-fit:contain}.helper-picture>.icon{position:absolute;width:27%;height:27%;right:3%;top:8%}.helper-basket .helper-base,.helper-take .helper-base{position:absolute;bottom:0;left:0;height:75%}.helper-basket .helper-good{width:35%;height:40%;top:0;left:7%;bottom:auto}.helper-basket>.icon{transform:rotate(90deg);right:16%;top:12%}.helper-take .helper-good{width:30%;height:36%;bottom:33%;left:35%}.helper-take>.icon{filter:invert(30%) sepia(70%) saturate(800%) hue-rotate(110deg);right:0;top:3%}.helper-pay .helper-bill{position:absolute;width:60%;height:40%;object-fit:contain;left:19%;top:24%}
.practice-choice{grid-template-columns:minmax(0,1fr)}.practice-choice .helper-picture{width:180px;height:140px;max-width:100%}
.instruction{display:block;width:100%;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;text-align:left;font-weight:400;cursor:url('/icons/volume-2.svg') 12 12,pointer}.instruction:hover{background-color:transparent;filter:none;transform:none}
@media(max-width:640px){.helper-checklist li{min-height:80px}.helper-picture{width:80px;height:64px}.owned-bag{column-gap:8px}.owned-bag>p{font-size:16px;line-height:1.3}.owned-bag>p:first-child{grid-column:1/-1}.owned-bag>p:nth-child(2){font-size:14px;grid-row:2}.owned-bag>.bag-items{grid-row:2}.owned-bag .counter-good img{width:44px;height:44px}.owned-bag .counter-good{font-size:12px}.practice-choice .helper-picture{height:110px;width:145px}}