*{box-sizing:border-box}body{color:#191919;background:#fafaf7;margin:0;font-family:Arial,Malgun Gothic,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline-offset:4px;outline:3px solid #427562}button:disabled{cursor:default}.app{max-width:480px;min-height:100svh;padding:30px 24px max(20px,env(safe-area-inset-bottom));flex-direction:column;margin:auto;display:flex;position:relative}header{align-items:center;gap:24px;display:flex}h1{letter-spacing:-3px;flex:1;margin:0;font-size:36px}h1 span{color:#427562}.stat{flex-direction:column;gap:6px;display:flex}.stat small,.section-label,.meta,.eyebrow{letter-spacing:1.8px;color:#777;font-size:10px;font-weight:700}.stat strong{font-variant-numeric:tabular-nums;letter-spacing:-1px;font-size:24px}.stat em{margin-left:4px;font-size:12px;font-style:normal}.urgent{color:#b34a39}.time-track{background:#e6e6e0;height:3px;margin-top:22px}.time-track div{background:#191919;height:100%;transition:width .1s linear}.meta{justify-content:space-between;margin:15px 0 32px;font-size:9px;display:flex}.section-label{justify-content:space-between;align-items:center;display:flex}.target{background:#fff;border:1px solid #e5e5df;padding:22px 18px 16px}.target .section-label{color:#191919}.barcode{justify-content:center;align-items:stretch;gap:clamp(3px,1.4vw,7px);height:104px;margin:27px 0;display:flex}.bar-slot{flex-shrink:1;justify-content:center;width:24px;display:flex}.bar-slot i,.piece i{background:#191919;max-width:100%;height:100%;display:block}.target p{color:#888;text-align:center;margin:0;font-size:11px}.build{padding:30px 0 0}.input-area{position:relative}.input-area .barcode{height:75px;margin:24px 0}.empty{background:linear-gradient(0deg,#deded6 2px,#0000 2px);width:24px}.response{justify-content:space-between;align-items:center;min-height:32px;display:flex}.feedback{color:#999;font-size:12px}.feedback.success{color:#427562;font-size:16px;font-weight:700}.feedback.error{color:#b34a39;font-weight:700}.combo{font-variant-numeric:tabular-nums;font-size:24px;font-weight:700}.combo small{letter-spacing:1px;color:#888;font-size:9px}.controls{margin-top:auto;padding-top:32px}.undo{color:#555;background:0 0;border:0;padding:8px 0 8px 14px;font-size:12px}.undo:disabled{opacity:.3}.pieces{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;display:grid}.piece{-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #e3e3db;border-radius:3px;justify-content:center;height:112px;padding:20px 0;display:flex}.piece:active:not(:disabled){background:#e7ece7;transform:translateY(2px)}.piece:disabled{opacity:.5}.hint{text-align:center;letter-spacing:2px;color:#999;margin:22px 0 0;font-size:9px}.overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:3;background:#fafaf7ef;align-items:center;padding:30px 28px;display:flex;position:absolute;inset:0}.dialog{width:100%}.eyebrow{color:#427562;font-size:9px}h2{letter-spacing:-2px;margin:25px 0;font-size:44px;line-height:1.2}.dialog p{color:#777;margin-bottom:36px;font-size:12px;line-height:1.9}.primary{color:#fff;letter-spacing:2px;background:#191919;border:0;justify-content:space-between;align-items:center;width:100%;padding:21px 24px;font-size:14px;font-weight:700;display:flex}.primary:hover{background:#333}.primary span{font-size:22px}.count{text-align:center;letter-spacing:-5px;font-size:76px;font-weight:800;animation:.2s ease-out pop}.final-score{letter-spacing:-4px;margin:16px 0 30px;font-size:72px;font-weight:700}.dialog:has(.final-score) h2{letter-spacing:1px;margin-bottom:0;font-size:18px}.results{gap:44px;margin-bottom:40px;display:flex}.results span{letter-spacing:1px;color:#777;flex-direction:column;gap:10px;font-size:10px;display:flex}.results strong{color:#191919;letter-spacing:0;font-size:24px}.scan{pointer-events:none;background:#427562;height:2px;animation:.22s linear forwards scan;position:absolute;top:0;left:0;right:0;box-shadow:0 0 10px #427562}.scan.error{background:#b34a39;box-shadow:0 0 10px #b34a39}@keyframes scan{0%{opacity:1;top:0}to{opacity:0;top:100%}}@keyframes pop{0%{opacity:.5;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@media (width>=600px){.app{border:1px solid #e5e5df;min-height:760px;max-height:900px;margin:30px auto}}@media (height<=700px){.app{padding-top:18px}.meta{margin-bottom:18px}.target .barcode{height:80px;margin:18px 0}.build{padding-top:22px}.input-area .barcode{height:58px;margin:18px 0}.controls{padding-top:18px}.piece{height:90px}.hint{margin-top:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.scan{display:none}}.sound-toggle{z-index:4;background:0 0;border:0;border-radius:50%;width:40px;height:40px;padding:8px;font-size:17px;position:absolute;top:105px;right:20px}.meta{padding-right:42px}.scanned-pattern{pointer-events:none;animation:.18s ease-out forwards scanned-fade;position:absolute;inset:0}.scanned-pattern .barcode{height:100%;margin:0}.scanned-pattern.success i{background:#427562}.scanned-pattern.error i{background:#b34a39}.feedback.success{animation:.3s ease-out both success-mark}.price{white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:8px;font-size:12px;font-weight:400}.receipt{border-top:1px dashed #c9c9be;border-bottom:1px dashed #c9c9be;margin-bottom:25px;padding:24px 0 18px}.items-scanned{letter-spacing:1.2px;margin-top:18px;font-size:13px}.receipt .results{margin-bottom:24px}.receipt-footer{letter-spacing:1px;color:#999;font-size:9px}.scan.success{height:2px;box-shadow:0 0 12px #427562,0 -5px 12px #42756233}@keyframes scanned-fade{0%,25%{opacity:.65}to{opacity:0}}@keyframes success-mark{0%{opacity:0;transform:translateY(2px)}15%{opacity:0}35%,to{opacity:1;transform:translateY(0)}}@media (height<=700px){.sound-toggle{top:93px}.receipt{margin-bottom:18px;padding-top:18px}.receipt .final-score{margin:10px 0 20px}.receipt .results{margin-bottom:18px}}@media (prefers-reduced-motion:reduce){.scanned-pattern{display:none}}.result-overlay{overscroll-behavior:contain;-webkit-backdrop-filter:none;backdrop-filter:none;background:#f0f0ea;align-items:flex-start;height:100dvh;padding:28px 24px 32px;position:fixed;inset:0;overflow-y:auto}.result-overlay .dialog{max-width:360px;margin:auto}.receipt-paper{clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),98% 100%,96% calc(100% - 6px),94% 100%,92% calc(100% - 6px),90% 100%,88% calc(100% - 6px),86% 100%,84% calc(100% - 6px),82% 100%,80% calc(100% - 6px),78% 100%,76% calc(100% - 6px),74% 100%,72% calc(100% - 6px),70% 100%,68% calc(100% - 6px),66% 100%,64% calc(100% - 6px),62% 100%,60% calc(100% - 6px),58% 100%,56% calc(100% - 6px),54% 100%,52% calc(100% - 6px),50% 100%,48% calc(100% - 6px),46% 100%,44% calc(100% - 6px),42% 100%,40% calc(100% - 6px),38% 100%,36% calc(100% - 6px),34% 100%,32% calc(100% - 6px),30% 100%,28% calc(100% - 6px),26% 100%,24% calc(100% - 6px),22% 100%,20% calc(100% - 6px),18% 100%,16% calc(100% - 6px),14% 100%,12% calc(100% - 6px),10% 100%,8% calc(100% - 6px),6% 100%,4% calc(100% - 6px),2% 100%,0 calc(100% - 6px));background:#fff;padding:28px 22px 24px;font-family:Courier New,Malgun Gothic,monospace;position:relative;box-shadow:0 5px 20px #0000000b}.receipt-brand{letter-spacing:-2px;text-align:center;font-family:Arial,sans-serif;font-size:32px;font-weight:700}.receipt-brand span{color:#427562}.receipt-subtitle{text-align:center;letter-spacing:1.4px;color:#777;margin-top:8px;font-size:10px}.receipt-rule{border-top:1px dashed #bcbcb2;margin:20px 0}.receipt-shift{text-align:center;color:#427562;margin-bottom:22px}.receipt-items{flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;display:flex}.receipt-items li{grid-template-columns:24px minmax(0,1fr) 38px;align-items:center;gap:10px;font-size:12px;display:grid}.receipt-index{color:#999;font-size:10px}.receipt-points{text-align:right;font-variant-numeric:tabular-nums}.receipt-items .barcode{justify-content:flex-start;gap:3px;height:23px;margin:0}.receipt-items .bar-slot{flex-shrink:1;width:auto}.receipt-items .bar-slot i{width:calc(var(--bar-width) * 1.7px)!important}.receipt-summary{letter-spacing:.4px;grid-template-columns:1fr auto;gap:11px;font-size:11px;display:grid}.receipt-summary strong{font-weight:400}.receipt-total{justify-content:space-between;align-items:center;gap:10px;display:flex}.receipt-total span{letter-spacing:1px;font-size:11px;font-weight:700}.receipt-total strong{letter-spacing:-2px;font-variant-numeric:tabular-nums;font-size:40px}.receipt-high{color:#888;justify-content:space-between;margin-top:12px;font-size:10px;display:flex}.high-stamp{color:#427562;letter-spacing:1px;border:1px solid #427562;width:fit-content;margin:0 auto 20px;padding:9px 10px;font-size:12px;font-weight:700;transform:rotate(-2deg)}.receipt-thanks{text-align:center;letter-spacing:1.3px;font-size:11px;line-height:1.7}.receipt-details{color:#999;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:24px;font-size:9px;display:flex}.receipt-retry{max-width:220px;margin:22px auto 0;padding:14px 20px;font-size:12px}.receipt-retry span{font-size:18px}.dialog .empty-receipt{text-align:center;color:#999;margin:22px 0;font-size:10px}.result-overlay~.sound-toggle{z-index:5}.undo{min-width:44px;min-height:44px;padding:8px 0 8px 14px;font-size:12px;line-height:1.2}.delete-icon{vertical-align:-1px;color:#b34a39;margin-right:3px;font-size:18px}.restart-toggle{color:#777;z-index:4;background:0 0;border:0;border-radius:50%;width:40px;height:40px;padding:8px;font-size:22px;position:absolute;top:105px;right:60px}.restart-overlay{z-index:10;background:#fafaf7b8;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.restart-dialog{background:#fff;border:1px solid #e5e5df;width:280px;padding:26px 22px;box-shadow:0 8px 30px #00000008}.restart-dialog h2{letter-spacing:1px;text-align:center;margin:0 0 24px;font-size:18px}.restart-actions{gap:12px;display:flex}.restart-actions button{color:#777;letter-spacing:1px;background:0 0;border:1px solid #e5e5df;flex:1;min-height:44px;font-size:11px}.restart-actions button:last-child{color:#191919;border-color:#bcbcb2}.restart-actions button:active{background:#f4f4ef}@media (height<=700px){.restart-toggle{top:93px}}.app:has(.restart-toggle) .meta{padding-right:82px}