:root {
            --pop-yellow: #FFD166;
            --pop-red: #EF476F;
            --pop-blue: #118AB2;
            --pop-green: #06D6A0;
            --pop-orange: #F77F00;
            --pop-purple: #9D4EDD;
            --pop-dark: #073B4C;
            --bg-color: #f8f9fa;
        }

        body {
            font-family: 'Fredoka', 'Noto Sans SC', sans-serif;
            background-color: var(--bg-color);
            color: var(--pop-dark);
            background-image: 
                radial-gradient(var(--pop-yellow) 2px, transparent 2px),
                radial-gradient(var(--pop-blue) 2px, transparent 2px);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
            overflow-x: hidden;
            user-select: none;
            touch-action: manipulation;
        }

        .pop-card {
            background: white;
            border: 4px solid var(--pop-dark);
            box-shadow: 6px 6px 0px var(--pop-dark);
            border-radius: 20px;
            transition: all 0.1s ease-out;
        }

        .pop-btn { cursor: pointer; }
        .pop-btn:active {
            transform: translate(4px, 4px) !important;
            box-shadow: 2px 2px 0px var(--pop-dark) !important;
        }

        .view { display: none; }
        .view.active { display: flex; }

        .progress-track {
            height: 18px;
            border: 4px solid var(--pop-dark);
            background: white;
            border-radius: 20px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background: var(--pop-green);
            width: 0%;
            transition: width 0.3s ease-out;
        }

        #combo-badge {
            position: absolute;
            top: 10%;
            right: 5%;
            transform: rotate(15deg) scale(0);
            pointer-events: none;
            text-shadow: 3px 3px 0px var(--pop-dark);
        }

        .math-box {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 70px;
            height: 80px;
            font-size: 3rem;
            font-weight: 900;
            background: white;
            border: 4px solid var(--pop-dark);
            border-radius: 16px;
            box-shadow: 4px 4px 0px var(--pop-dark);
            transition: all 0.2s ease;
        }
        
        .math-op {
            font-size: 3rem;
            font-weight: 900;
            color: var(--pop-dark);
            transition: all 0.2s ease;
        }

        .input-box {
            background: var(--pop-yellow);
            color: var(--pop-dark);
            min-width: 90px;
        }
        .input-box.empty { background: #eee; color: #aaa; }

        .math-box.small { width: 50px; height: 60px; font-size: 2rem; border-width: 3px; box-shadow: 3px 3px 0px var(--pop-dark); min-width: 50px;}
        .math-op.small { font-size: 2rem; }
        .input-box.small { min-width: 70px; }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        .toggle-checkbox:checked { right: 0; border-color: #06D6A0; }
        .toggle-checkbox:checked + .toggle-label { background-color: #06D6A0; }

        .qc-btn.active { background-color: var(--pop-blue); color: white; border-color: var(--pop-dark); box-shadow: 2px 2px 0px var(--pop-dark); transform: translate(-2px, -2px); }
    

*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0;line-height:inherit}button,input{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button{text-transform:none;background-color:transparent;background-image:none}button,[type=button]{-webkit-appearance:button}h1,h2,h3,p{margin:0}hr{height:0;color:inherit;border-top-width:1px}svg{display:block;vertical-align:middle}#app{display:contents}.min-h-screen{min-height:100vh}.h-full{height:100%}.w-full{width:100%}.w-12{width:3rem}.w-16{width:4rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-\[70px\]{width:70px}.h-12{height:3rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-1{height:.25rem}.h-\[95vh\]{height:95vh}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-h-\[85\%\]{max-height:85%}.min-w-\[50px\]{min-width:50px}.flex{display:flex}.inline-flex{display:inline-flex}.inline-block{display:inline-block}.block{display:block}.grid{display:grid}.hidden{display:none}.relative{position:relative}.absolute{position:absolute}.inset-0{inset:0}.top-\[2px\]{top:2px}.left-\[2px\]{left:2px}.left-0{left:0}.left-1\/2{left:50%}.right-5{right:1.25rem}.-top-10{top:-2.5rem}.-top-12{top:-3rem}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-y-2{row-gap:.5rem}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.space-y-6>*+*{margin-top:1.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.text-left{text-align:left}.text-center{text-align:center}.uppercase{text-transform:uppercase}.italic{font-style:italic}.appearance-none{appearance:none}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.align-middle{vertical-align:middle}.pointer-events-none{pointer-events:none}
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}.pl-4{padding-left:1rem}.m-0{margin:0}.mx-4{margin-left:1rem;margin-right:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mt-auto{margin-top:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-20{margin-top:5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-2{margin-right:.5rem}
.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-\[24px\]{border-radius:24px}.border-2{border-width:2px}.border-4{border-width:4px}.border-l-4{border-left-width:4px}.border-b-2{border-bottom-width:2px}.border-t-4{border-top-width:4px}.border-dashed{border-style:dashed}.border-pop-dark{border-color:var(--pop-dark)}.border-transparent{border-color:transparent}.border-gray-100{border-color:#f3f4f6}.border-gray-200{border-color:#e5e7eb}.border-gray-300{border-color:#d1d5db}.border-\[\#9D4EDD\]{border-color:#9D4EDD}
.bg-transparent{background-color:transparent}.bg-white{background-color:#fff}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-300{background-color:#d1d5db}.bg-pop-dark\/95{background-color:rgba(7,59,76,.95)}.bg-var\(--bg-color\),.bg-var\(\--bg-color\){background-color:var(--bg-color)}.bg-\[\#EF476F\]{background-color:#EF476F}.bg-\[\#118AB2\]{background-color:#118AB2}.bg-\[\#FFD166\]{background-color:#FFD166}.bg-\[\#06D6A0\]{background-color:#06D6A0}.bg-\[\#F77F00\]{background-color:#F77F00}.bg-\[\#073B4C\]{background-color:#073B4C}.bg-\[\#9D4EDD\]{background-color:#9D4EDD}.bg-\[\#f8f9fa\]{background-color:#f8f9fa}
.text-white{color:#fff}.text-pop-dark{color:var(--pop-dark)}.text-gray-200{color:#e5e7eb}.text-gray-300{color:#d1d5db}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-\[\#EF476F\]{color:#EF476F}.text-\[\#118AB2\]{color:#118AB2}.text-\[\#FFD166\]{color:#FFD166}.text-\[\#06D6A0\]{color:#06D6A0}.text-\[\#F77F00\]{color:#F77F00}.text-\[\#073B4C\]{color:#073B4C}.text-\[\#9D4EDD\]{color:#9D4EDD}
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.font-bold{font-weight:700}.font-black{font-weight:900}.leading-relaxed{line-height:1.625}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.tracking-tighter{letter-spacing:-.05em}.line-through{text-decoration:line-through}
.shadow-\[2px_2px_0px_\#073B4C\]{box-shadow:2px 2px 0 #073B4C}.shadow-\[4px_4px_0px_\#073B4C\]{box-shadow:4px 4px 0 #073B4C}.shadow-\[6px_6px_0px_\#073B4C\]{box-shadow:6px 6px 0 #073B4C}.shadow-\[6px_6px_0px_\#9D4EDD\]{box-shadow:6px 6px 0 #9D4EDD}.drop-shadow-md{filter:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}.drop-shadow-\[0_10px_10px_rgba\(0\,0\,0\,0\.2\)\]{filter:drop-shadow(0 10px 10px rgba(0,0,0,.2))}.backdrop-blur-sm{backdrop-filter:blur(4px)}
.transform{transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}.-translate-x-1\/2{--tw-translate-x:-50%}.-rotate-1{--tw-rotate:-1deg}.-rotate-2{--tw-rotate:-2deg}.rotate-15{--tw-rotate:15deg}.transition-all{transition-property:all;transition-duration:.15s}.duration-300{transition-duration:.3s}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:bg-white:focus{background:#fff}.focus\:ring-2:focus{box-shadow:0 0 0 2px #118AB2}.hover\:bg-gray-50:hover{background:#f9fafb}
@media (min-width:768px){.md\:h-\[800px\]{height:800px}.md\:gap-2{gap:.5rem}.md\:flex-nowrap{flex-wrap:nowrap}}
.translate-x-5{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}.toggle-checkbox:checked{right:auto;transform:translateX(1.25rem)}.toggle-checkbox.translate-x-5{transform:translateX(1.25rem)}#explanation-modal.flex{display:flex}#explanation-modal.hidden{display:none}