@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap";:root{color:#17211d;background:#fff7d6;font-family:Noto Sans Thai,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--text-font: "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--display-font: "Fredoka", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;--ink: #17211d;--green: #157347;--green-dark: #0f4b36;--yellow: #ffd95a;--orange: #ff914d;--pink: #ff7aa8;--blue: #74c7ff;--mint: #a8efbf;--purple: #8b6dff;--cream: #fff7d6;--paper: #fffdf4;--line: #17211d;--radius: 22px;--cartoon-shadow: 0 10px 0 rgba(23, 33, 29, .16), 0 16px 34px rgba(54, 41, 21, .16);--focus-ring: rgba(255, 145, 77, .42)}*{box-sizing:border-box}html{overscroll-behavior:contain}body{margin:0;min-width:320px;min-height:100dvh;background:linear-gradient(90deg,rgba(255,217,90,.32) 0 14px,transparent 14px 34px),linear-gradient(180deg,#fff7d6,#dcf8e7)}body:before,body:after{content:"";position:fixed;z-index:-1;pointer-events:none}body:before{width:170px;height:170px;right:-58px;top:46px;background:var(--pink);clip-path:polygon(50% 0,61% 33%,98% 35%,68% 56%,79% 92%,50% 70%,21% 92%,32% 56%,2% 35%,39% 33%);opacity:.36;transform:rotate(14deg)}body:after{width:210px;height:90px;left:-46px;bottom:42px;background:var(--blue);clip-path:polygon(0 38%,8% 11%,18% 39%,28% 14%,38% 42%,48% 12%,58% 40%,68% 15%,78% 42%,88% 14%,100% 39%,100% 100%,0 100%);opacity:.32}button,input{font:inherit}button,a,input,[role=button]{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.58}a{display:inline-flex;min-height:44px;align-items:center;color:var(--green-dark);font-weight:900;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,p{margin:0}.page-shell{width:100%;min-height:100dvh;padding:14px}.app-frame{width:min(100%,620px);margin:0 auto;padding-bottom:24px}h1,h2{font-family:var(--text-font)}h1{max-width:440px;color:var(--ink);font-size:30px;line-height:1.05;letter-spacing:0}h2{color:var(--ink);font-size:26px;line-height:1.12;letter-spacing:0}.state-panel{border:3px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--paper);box-shadow:var(--cartoon-shadow);color:#304139;font-weight:800}.loading-shell{display:grid;min-height:100dvh;place-items:center;padding:0}.loading-spinner{display:grid;width:96px;height:96px;place-items:center}.loading-ring{width:54px;height:54px;border:6px solid rgba(23,33,29,.16);border-top-color:var(--green);border-right-color:var(--orange);border-radius:999px;animation:loading-spin .8s linear infinite}@keyframes loading-spin{to{transform:rotate(360deg)}}.quiz-shell{display:grid;gap:12px}.progress-dots{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:4px 0 2px}.progress-dots span{height:8px;border:2px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 2px #17211d24}.progress-dots span.filled{background:var(--green)}.question-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center;min-height:150px}.mascot{width:132px;min-width:132px;height:auto;filter:drop-shadow(0 8px 0 rgba(23,33,29,.14))}.blob-one{fill:#fff0a8}.blob-two{fill:#bdf1d0}.uncle,.prop,.spark-lines{transform-origin:center}.speech-card,.answer-panel,.result-panel,.success-panel,.error-box,.warning-box{border:3px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--cartoon-shadow)}.speech-card{position:relative;padding:17px}.speech-card:before{content:"";position:absolute;left:-17px;top:54px;width:24px;height:24px;border-left:3px solid var(--line);border-bottom:3px solid var(--line);background:var(--paper);transform:rotate(45deg)}.step-label{margin-bottom:7px;color:var(--green-dark);font-size:13px;font-weight:900}.speech-card p:not(.step-label){margin-top:8px;color:#526057;font-size:15px;font-weight:800;line-height:1.4}.answer-panel,.result-panel,.success-panel{display:grid;gap:14px;padding:18px}.big-input{display:grid;gap:10px;color:var(--ink);font-size:15px;font-weight:900}.big-input>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.big-input input{width:100%;min-height:72px;border:3px solid var(--line);border-radius:18px;padding:10px 14px;background:#fff;color:var(--ink);font-family:var(--text-font);font-size:30px;font-weight:800;box-shadow:inset 0 -5px #17211d14}.big-input strong{display:grid;min-width:64px;min-height:64px;place-items:center;border:3px solid var(--line);border-radius:18px;background:var(--yellow);color:var(--ink);font-size:19px;box-shadow:0 5px #17211d24}.choice-field{display:grid;gap:10px;border:0;margin:0;padding:0}.choice-field legend{padding:0;color:var(--ink);font-size:15px;font-weight:900}.choice-grid{display:grid;gap:10px}.choice-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-card,.target-option,.primary-action,.text-action,.file-action,.stepper-action{border:3px solid var(--line);border-radius:18px;color:var(--ink);transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,transform .12s ease}.choice-card,.target-option{display:grid;gap:5px;min-height:80px;padding:13px;background:#fff;text-align:left;box-shadow:0 5px #17211d24}.sex-card{min-height:92px;place-items:center;text-align:center}.choice-card span,.target-option span{font-size:20px;font-weight:900}.choice-card small,.target-option small,.fine-print,.success-panel small{color:#526057;font-size:14px;font-weight:800;line-height:1.38}.activity-card{min-height:94px}.activity-card strong{color:#c54d19;font-size:15px;font-weight:900}.selected{background:#dff9e8!important;border-color:var(--green-dark)!important;box-shadow:0 5px #0f4b364d,inset 0 0 0 3px #fff9!important}.primary-action{min-height:58px;padding:0 18px;background:var(--green);color:#fff;font-size:17px;font-weight:900;box-shadow:0 7px 0 var(--green-dark)}.primary-action:not(:disabled):hover,.choice-card:hover,.target-option:hover,.text-action:hover,.file-action:hover,.stepper-action:hover{transform:translateY(-1px)}.primary-action:not(:disabled):active,.choice-card:active,.target-option:active,.text-action:active,.file-action:active,.stepper-action:active{transform:translateY(3px);box-shadow:0 3px #17211d33}button:focus-visible,a:focus-visible,input:focus-visible,[role=button]:focus-visible,.file-action:focus-visible{outline:4px solid var(--focus-ring);outline-offset:3px}.error-box,.warning-box{padding:13px 15px;font-weight:900;line-height:1.45}.error-box{background:#ffe5e5;color:#852e2a}.warning-box{background:#fff0a8;color:#6b420e}.maintenance-block{display:grid;gap:3px;border:3px solid var(--line);border-radius:20px;padding:16px;background:var(--green-dark);color:#fff;box-shadow:0 7px #17211d33}.maintenance-block span{color:#d9fbe5;font-size:14px;font-weight:900}.maintenance-block strong{font-family:var(--display-font);font-size:46px;line-height:1}.maintenance-block small{color:#d9fbe5;font-weight:900}.target-list{display:grid;gap:10px}.target-option{grid-template-columns:1fr auto;align-items:center}.target-option strong{color:var(--green-dark);font-family:var(--display-font);font-size:21px}.target-option small{grid-column:1 / -1}.target-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:16px;background:#17211d7a}.target-dialog{display:grid;width:min(100%,460px);gap:10px;border:3px solid var(--line);border-radius:var(--radius);padding:18px;background:var(--paper);box-shadow:0 10px #17211d33,0 20px 44px #17211d42}.target-dialog span{color:#6b420e;font-size:14px;font-weight:900}.target-dialog h3{color:var(--ink);font-family:var(--text-font);font-size:26px;line-height:1.12;letter-spacing:0}.target-dialog p{color:#526057;font-size:14px;font-weight:800;line-height:1.38}.confirmation-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.fine-print{border-top:2px dashed rgba(23,33,29,.22);padding-top:12px}.success-panel{background:#dff9e8}.success-panel span{color:var(--green-dark);font-weight:900}.success-panel strong{color:var(--ink);font-family:var(--display-font);font-size:42px;line-height:1.05}.return-note{display:grid;gap:4px;border-top:2px dashed rgba(23,33,29,.22);padding-top:2px}.success-panel .return-note strong{color:var(--green-dark);font-size:15px;font-weight:900;line-height:1.25}.return-note span{color:#526057;font-size:14px;font-weight:800;line-height:1.38}.quiz-nav{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:44px;padding:2px 4px;color:var(--green-dark);font-size:14px}.quiz-nav a{padding:0 8px}.text-action{display:inline-grid;min-height:44px;padding:0 14px;place-items:center;background:#fff;color:var(--green-dark);font-weight:900;box-shadow:0 4px #17211d1f}.barcode-frame{display:grid;gap:12px;min-height:calc(100dvh - 28px);align-content:center}.barcode-header,.scanner-panel,.product-panel,.scan-status,.file-action{border:3px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--cartoon-shadow)}.barcode-header{display:grid;gap:7px;padding:18px}.barcode-header p{color:#526057;font-weight:900}.barcode-action-slot{display:grid;align-items:center}.scanner-panel{display:grid;gap:14px;padding:16px}.scanner-window{position:relative;display:grid;place-items:center;overflow:hidden;min-height:clamp(184px,28dvh,230px);border:3px solid var(--line);border-radius:18px;background:#17211d}.scanner-window-ready{cursor:pointer}.scanner-window-ready:hover{outline:4px solid rgba(255,217,90,.38);outline-offset:3px}.scanner-video{width:100%;height:100%;min-height:clamp(184px,28dvh,230px);object-fit:cover}.scanner-idle{position:absolute;z-index:2;color:#fff;font-size:18px;font-weight:900;pointer-events:none}.scanner-target{position:absolute;z-index:1;width:min(76%,360px);height:38%;border:4px solid var(--yellow);border-radius:16px;box-shadow:0 0 0 999px #17211d57}.scanner-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:stretch}.scanner-toggle-action.is-scanning{background:var(--orange);box-shadow:0 7px #c54d19}.file-action{display:inline-grid;place-items:center;min-height:44px;padding:0 14px;color:var(--green-dark);font-weight:900;box-shadow:0 4px #17211d1f;cursor:pointer}.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;opacity:0;pointer-events:none}.manual-barcode-form{display:grid;gap:8px;font-weight:900}.manual-barcode-form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.manual-barcode-form input,.serving-stepper output{min-height:44px;min-width:0;border:3px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font-weight:900;outline:none}.manual-barcode-form input{min-height:46px;padding:0 12px}.manual-barcode-form input:focus-visible{outline:4px solid var(--focus-ring);outline-offset:3px;box-shadow:inset 0 -4px #17211d14}.scan-status{padding:12px 15px;color:var(--green-dark);font-weight:900}.product-panel{display:grid;gap:12px;padding:16px}.product-main{display:grid;gap:11px;min-width:0}.product-code,.product-meta,.source-note{color:#526057;font-size:13px;font-weight:900}.source-note{border-top:2px dashed rgba(23,33,29,.16);padding-top:8px;font-size:12px;line-height:1.35}.product-main h2{overflow-wrap:anywhere}.nutrition-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-top:2px dashed rgba(23,33,29,.22);border-bottom:2px dashed rgba(23,33,29,.22);padding:12px 0}.nutrition-grid div{display:grid;gap:2px}.nutrition-grid span,.nutrition-grid small{color:#526057;font-size:13px;font-weight:900}.nutrition-grid strong{color:var(--green-dark);font-family:var(--display-font);font-size:34px;line-height:1}.macro-row{display:flex;flex-wrap:wrap;gap:8px}.macro-row span{border:2px solid rgba(23,33,29,.24);border-radius:999px;padding:6px 10px;background:#fff;color:var(--green-dark);font-size:13px;font-weight:900}.save-row{display:grid;grid-template-columns:minmax(196px,.84fr) minmax(0,1fr);gap:10px;align-items:end}.serving-stepper{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:8px;align-items:stretch}.serving-stepper output{display:grid;place-items:center;gap:2px;min-height:58px;padding:6px 8px;background:#fff;box-shadow:inset 0 -5px #17211d14}.serving-stepper output span{color:#526057;font-size:12px;font-weight:900;line-height:1.1}.serving-stepper output strong{color:var(--ink);font-family:var(--display-font);font-size:26px;line-height:1}.stepper-action{display:grid;min-height:58px;place-items:center;background:var(--yellow);color:var(--ink);font-size:28px;font-weight:900;line-height:1;box-shadow:0 5px #17211d24}.barcode-success{border-radius:18px;box-shadow:none}.barcode-success-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch}.scan-again-action{justify-self:start}.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}@media(min-width:760px){.page-shell{padding:24px 18px}.app-frame{max-width:760px}h1{font-size:36px}.question-card{grid-template-columns:170px minmax(0,1fr)}.mascot{width:170px;min-width:170px}.speech-card,.answer-panel,.result-panel,.success-panel{padding:22px}.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.barcode-frame{max-width:720px;min-height:calc(100dvh - 48px)}}@media(max-width:560px){.page-shell{padding:12px}h1{font-size:29px}.barcode-frame{min-height:calc(100dvh - 24px);align-content:start;gap:10px}.barcode-page{padding:10px}.barcode-header,.scanner-panel,.product-panel{padding:14px}.barcode-header{gap:5px}.barcode-header p{font-size:14px;line-height:1.35}.scanner-panel{gap:12px}.question-card{grid-template-columns:108px minmax(0,1fr);gap:8px}.mascot{width:108px;min-width:108px}.speech-card{padding:14px}.speech-card:before{left:-13px;width:19px;height:19px}h2{font-size:23px}.choice-grid.two,.target-option{grid-template-columns:1fr}.big-input input{min-height:66px;font-size:28px}.target-option strong{font-size:22px}.scanner-actions,.barcode-success-actions,.confirmation-actions,.manual-barcode-form>div,.product-panel,.save-row{grid-template-columns:1fr}}@media(max-width:390px){.question-card{grid-template-columns:1fr}.speech-card:before{left:34px;top:-13px;transform:rotate(135deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}