*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.01em;line-height:1.6;background:#0d9488}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.min-h-screen{min-height:100vh}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from: #60a5fa;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(96, 165, 250, 0))}.via-purple-400{--tw-gradient-stops: var(--tw-gradient-from), #c084fc, var(--tw-gradient-to, rgba(192, 132, 252, 0))}.to-pink-400{--tw-gradient-to: #f472b6}.from-emerald-400{--tw-gradient-from: #34d399;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 211, 153, 0))}.via-teal-400{--tw-gradient-stops: var(--tw-gradient-from), #2dd4bf, var(--tw-gradient-to, rgba(45, 212, 191, 0))}.to-cyan-400{--tw-gradient-to: #22d3ee}.p-8{padding:2rem}.max-w-2xl{max-width:42rem}.mx-auto{margin-left:auto;margin-right:auto}.bg-white{background-color:#fff}.rounded-3xl{border-radius:2rem}.shadow-2xl{box-shadow:0 8px 30px -4px #0000001f,0 4px 12px -2px #0000000f}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-bold{font-weight:700}.text-center{text-align:center}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-2{margin-top:.5rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.text-purple-600,.text-emerald-600{color:#059669}.text-teal-500{color:#14b8a6}.text-teal-600{color:#0d9488}.text-teal-800{color:#115e59}.text-amber-500{color:#f59e0b}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-800{color:#1f2937}.text-white{color:#fff}.space-y-4>*+*{margin-top:1rem}.space-y-6>*+*{margin-top:1.5rem}.w-full{width:100%}.py-4{padding-top:1rem;padding-bottom:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from: #3b82f6;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0))}.to-blue-600{--tw-gradient-to: #2563eb}.from-purple-500{--tw-gradient-from: #14b8a6;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 184, 166, 0))}.to-purple-600{--tw-gradient-to: #0d9488}.from-green-500{--tw-gradient-from: #10b981;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0))}.to-green-600{--tw-gradient-to: #059669}.bg-emerald-500{background-color:#10b981}.bg-teal-500{background-color:#14b8a6}.bg-teal-100{background-color:#ccfbf1}.bg-teal-50{background-color:#f0fdfa}.bg-emerald-50{background-color:#ecfdf5}.bg-amber-500{background-color:#f59e0b}.hover\:bg-emerald-600:hover{background-color:#059669}.hover\:bg-teal-600:hover{background-color:#0d9488}.hover\:bg-teal-100:hover{background-color:#ccfbf1}.hover\:bg-teal-200:hover{background-color:#99f6e4}.hover\:bg-amber-600:hover{background-color:#d97706}.from-emerald-50{--tw-gradient-from: #ecfdf5;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 253, 245, 0))}.from-emerald-500{--tw-gradient-from: #10b981;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0))}.to-teal-50{--tw-gradient-to: #f0fdfa}.to-teal-500{--tw-gradient-to: #14b8a6}.rounded-xl{border-radius:1rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.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-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.shadow-lg{box-shadow:0 4px 12px -2px #00000014,0 2px 6px -1px #0000000a}.border-2{border-width:2px}.border-4{border-width:4px}.border-gray-300{border-color:#d1d5db}.border-purple-300{border-color:#5eead4}.border-purple-500{border-color:#14b8a6}.border-teal-300{border-color:#5eead4}.border-teal-400{border-color:#2dd4bf}.border-green-400{border-color:#4ade80}.border-red-400{border-color:#f87171}.border-yellow-200{border-color:#fef08a}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:border-purple-500:focus{border-color:#14b8a6}.disabled\:bg-gray-100:disabled{background-color:#f3f4f6}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.cursor-pointer{cursor:pointer}.block{display:block}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-semibold{font-weight:600}.ml-3{margin-left:.75rem}.ml-1{margin-left:.25rem}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-blue-100{background-color:#dbeafe}.bg-blue-500{background-color:#3b82f6}.bg-blue-600{background-color:#2563eb}.bg-purple-500{background-color:#14b8a6}.bg-purple-600{background-color:#0d9488}.bg-green-500{background-color:#10b981}.bg-yellow-50{background-color:#fffbeb}.bg-yellow-100{background-color:#fef3c7}.bg-yellow-200{background-color:#fde68a}.hover\:bg-gray-100:hover{background-color:#f3f4f6}.hover\:bg-gray-200:hover{background-color:#e5e7eb}.hover\:bg-gray-300:hover{background-color:#d1d5db}.hover\:bg-blue-200:hover{background-color:#bfdbfe}.hover\:bg-blue-600:hover{background-color:#2563eb}.hover\:bg-blue-700:hover{background-color:#1d4ed8}.hover\:bg-purple-600:hover{background-color:#0d9488}.hover\:bg-purple-700:hover{background-color:#0f766e}.hover\:from-blue-600:hover{--tw-gradient-from: #2563eb}.hover\:to-blue-700:hover{--tw-gradient-to: #1d4ed8}.hover\:from-purple-600:hover{--tw-gradient-from: #0d9488}.hover\:to-purple-700:hover{--tw-gradient-to: #0f766e}.hover\:from-green-600:hover{--tw-gradient-from: #059669}.hover\:to-green-700:hover{--tw-gradient-to: #047857}.disabled\:from-gray-300:disabled{--tw-gradient-from: #d1d5db}.disabled\:to-gray-400:disabled{--tw-gradient-to: #9ca3af}.text-blue-600{color:#2563eb}.text-blue-700{color:#1d4ed8}.text-green-500{color:#10b981}.text-red-100{color:#fee2e2}.text-red-200{color:#fecaca}.text-green-100{color:#dcfce7}.text-green-200{color:#bbf7d0}.from-green-100{--tw-gradient-from: #dcfce7;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 252, 231, 0))}.to-green-200{--tw-gradient-to: #bbf7d0}.from-red-100{--tw-gradient-from: #fee2e2;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254, 226, 226, 0))}.to-red-200{--tw-gradient-to: #fecaca}.from-blue-50{--tw-gradient-from: #ecfdf5;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 253, 245, 0))}.to-purple-50{--tw-gradient-to: #f0fdfa}.from-yellow-100{--tw-gradient-from: #fef3c7;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254, 243, 199, 0))}.to-yellow-200{--tw-gradient-to: #fde68a}.rounded-2xl{border-radius:1rem}.w-5{width:1.25rem}.h-5{height:1.25rem}.h-2{height:.5rem}.flex-1{flex:1 1 0%}.rounded{border-radius:.25rem}.gap-1{gap:.25rem}.italic{font-style:italic}.text-gray-500{color:#6b7280}.max-w-md{max-width:28rem}.ring-2{box-shadow:0 0 0 2px var(--tw-ring-color, #5eead4)}.ring-teal-300{--tw-ring-color: #5eead4}.active\:scale-98:active{transform:scale(.98)}.fixed{position:fixed}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.z-10{z-index:10}.z-50{z-index:1000}.overflow-y-auto{overflow-y:auto}.justify-end{justify-content:flex-end}.modal-backdrop{position:fixed;inset:0;z-index:1000;background:#00000080;display:flex;align-items:center;justify-content:center;padding:1rem}.modal-content{background:#fff;border-radius:1.5rem;padding:1.5rem;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative}@keyframes mode-pop{0%{transform:scale(1)}30%{transform:scale(1.08)}60%{transform:scale(.97)}to{transform:scale(1)}}@keyframes mode-flash{0%{background:#14b8a600}35%{background:#14b8a626}to{background:#14b8a600}}.mode-flash{animation:mode-pop .48s ease,mode-flash .7s ease;border-radius:1rem}.settings-bar{display:flex;align-items:flex-start;justify-content:flex-end;gap:.5rem;min-height:44px;padding:.75rem 1rem;background:#f0fdfa;border-radius:2rem 2rem 0 0}.flag-btn{font-size:1.5rem}@media(min-width:480px){.flag-btn{font-size:1.75rem}}.title-responsive{font-size:clamp(1.5rem,5vw,2rem);font-weight:700;padding:8px 16px;letter-spacing:.01em}.level-title{font-size:clamp(1rem,4vw,1.5rem);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}.problem-display{font-size:clamp(2rem,8vw,4rem);font-weight:700;line-height:1.2}.ios-input{width:100%;padding:clamp(.75rem,3vw,1.25rem);font-size:clamp(1.5rem,6vw,2rem);text-align:center;border:2px solid #5eead4;border-radius:1rem;background:#f0fdfa;color:#1f2937;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}.ios-input:focus{border-color:#14b8a6;box-shadow:0 0 0 4px #14b8a626}.ios-input:disabled{background:#f3f4f6;color:#9ca3af}.ios-btn{width:100%;min-height:50px;padding:clamp(.75rem,2.5vw,1rem) 1.5rem;border:none;border-radius:1rem;font-weight:700;font-size:clamp(1rem,3.5vw,1.25rem);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:filter .2s,transform .1s;-webkit-tap-highlight-color:transparent}.ios-btn:active{transform:scale(.98)}.ios-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.ios-btn-green{background:#10b981;box-shadow:0 2px 8px #10b98140}.ios-btn-green:hover{background:#059669}.ios-btn-purple{background:#14b8a6;box-shadow:0 2px 8px #14b8a640}.ios-btn-purple:hover{background:#0d9488}.ios-btn-gray{background:#e5e7eb;color:#374151}.ios-btn-gray:hover{background:#d1d5db}.feedback-card{padding:clamp(1rem,4vw,1.5rem);border-radius:1rem;text-align:center;border-width:2px;border-style:solid}.feedback-card .feedback-text{font-size:clamp(1.1rem,4vw,1.5rem);font-weight:700;margin-bottom:.25rem}.feedback-card .feedback-answer{font-size:clamp(1rem,3.5vw,1.25rem)}.practice-container{padding:clamp(1rem,4vw,2rem)}.problem-area{padding:clamp(1rem,4vw,1.5rem);background:linear-gradient(to right,#ecfdf5,#f0fdfa);border-radius:1rem;margin-bottom:clamp(1rem,3vw,1.5rem)}.score-bar{padding:clamp(.75rem,3vw,1rem);background:#f9fafb;border-radius:.75rem;margin-top:clamp(1rem,3vw,1.5rem)}@media(max-width:400px){.p-8{padding:.75rem}.level-title{font-size:clamp(.875rem,3.5vw,1.25rem)}.problem-display{font-size:clamp(1.75rem,7vw,3rem)}}@media(max-width:480px){.modal-content{margin:.5rem;padding:1rem}}.app-bg{background-color:#0d9488;background-image:radial-gradient(circle at 12% 8%,rgba(52,211,153,.6),transparent 42%),radial-gradient(circle at 92% 28%,rgba(6,182,212,.55),transparent 45%),radial-gradient(circle at 25% 96%,rgba(245,158,11,.3),transparent 40%),linear-gradient(rgba(255,255,255,.06) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.06) 2px,transparent 2px);background-size:auto,auto,auto,44px 44px,44px 44px}.app-card{background-color:#fbfefd;background-image:linear-gradient(90deg,#10b981 0 25%,#14b8a6 25% 50%,#06b6d4 50% 75%,#f59e0b 75% 100%);background-size:100% 6px;background-repeat:no-repeat;padding-top:6px}.app-card.shadow-2xl{box-shadow:0 8px #0f766e8c,0 18px 40px #0000002e}.menu-btn{border:none;cursor:pointer;font-family:inherit;box-shadow:0 5px #0000002e;transition:transform .1s,box-shadow .1s,background-color .2s;-webkit-tap-highlight-color:transparent}.menu-btn:active{transform:translateY(3px);box-shadow:0 2px #0000002e}.quick-pick{background:#ecfdf5;border:2px solid #d1fae5;border-radius:1.25rem;padding:clamp(.75rem,3vw,1.1rem)}.qp-label{margin:0 0 .6rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0f766e}.op-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,3vw,1rem);padding:.35rem .25rem .5rem}.op-tile{--r: 0deg;position:relative;aspect-ratio:1;min-height:56px;border:none;border-radius:16px;color:#fff;font-family:inherit;font-size:clamp(2rem,10vw,2.9rem);font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;background:linear-gradient(160deg,var(--c) 0%,var(--cd) 100%);box-shadow:0 5px 0 var(--cs),0 8px 14px #00000024;text-shadow:0 2px 0 rgba(0,0,0,.22);transform:rotate(var(--r));transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;-webkit-tap-highlight-color:transparent}.op-tile:active{transform:rotate(var(--r)) translateY(3px);box-shadow:0 2px 0 var(--cs)}.op-tile[aria-pressed=true]{transform:rotate(0) scale(1.08);box-shadow:0 5px 0 var(--cs),0 0 0 3px #fff,0 0 0 6px var(--cs),0 10px 18px #0003}.op-tile:focus-visible,.diff-tile:focus-visible{outline:3px solid #1f2937;outline-offset:4px}.tile-check{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;background:#fff;color:#0f766e;font-size:14px;font-weight:900;text-shadow:none;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #00000040}.diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.5rem,2.5vw,.9rem);padding-bottom:.35rem}.diff-tile{position:relative;min-height:68px;border:2px solid #99f6e4;border-radius:14px;background:#fff;color:#0f766e;font-family:inherit;font-size:.85rem;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:.4rem .25rem;cursor:pointer;box-shadow:0 4px #99f6e4;transition:transform .15s,box-shadow .15s,background .15s,color .15s;-webkit-tap-highlight-color:transparent}.diff-tile:active{transform:translateY(2px);box-shadow:0 2px #99f6e4}.diff-tile[aria-pressed=true]{background:#0d9488;border-color:#0f766e;color:#fff;box-shadow:0 4px #0f766e,0 0 0 3px #fff,0 0 0 5px #0f766e}.diff-tile .tile-check{top:-10px;right:-8px}.diff-blocks{display:flex;align-items:flex-end;gap:4px;height:22px}.diff-blocks span{width:11px;border-radius:3px;background:currentColor}.diff-blocks span:nth-child(1){height:10px}.diff-blocks span:nth-child(2){height:16px}.diff-blocks span:nth-child(3){height:22px}.diff-blocks span.off{opacity:.22}.problem-area{background:linear-gradient(160deg,#14b8a6,#0d9488);box-shadow:0 6px #0f766e;border-radius:1.25rem}.problem-area .problem-display{color:#fff;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 rgba(0,0,0,.15)}.problem-area .problem-display.italic{color:#ffffffeb}.problem-enter{animation:problem-in .22s ease-out}@keyframes problem-in{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}.ios-input{font-weight:700;font-size:clamp(1.75rem,7vw,2.5rem);border-width:3px;background:#fff;font-variant-numeric:tabular-nums}.ios-input.is-correct:disabled{border-color:#10b981;background:#ecfdf5;color:#065f46;animation:input-glow .7s ease-out}.ios-input.is-wrong:disabled{border-color:#ef4444;background:#fef2f2;color:#991b1b;text-decoration:line-through;animation:input-shake .4s ease-in-out}@keyframes input-glow{0%{box-shadow:0 0 #10b9818c}to{box-shadow:0 0 0 16px #10b98100}}@keyframes input-shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(3px)}}.feedback-card .feedback-text.is-symbol{font-size:clamp(2.5rem,11vw,3.5rem);line-height:1.1;margin:0}.fb-pop{animation:fb-pop .38s cubic-bezier(.34,1.56,.64,1)}@keyframes fb-pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.fb-reveal{animation:fb-reveal .3s ease-out .38s both}@keyframes fb-reveal{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.feedback-card.is-streak{animation:streak-glow 1.1s ease-out}@keyframes streak-glow{0%{box-shadow:0 0 #f59e0b99}to{box-shadow:0 0 0 18px #f59e0b00}}.streak-row{display:flex;justify-content:center;gap:6px;margin-top:.5rem}.streak-row span{width:16px;height:16px;border-radius:4px;background:var(--c);box-shadow:0 2px #0000002e;animation:fb-pop .38s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 70ms)}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}.confetti span{position:absolute;top:-16px;left:var(--x);width:10px;height:14px;border-radius:2px;background:var(--c);opacity:0;animation:confetti-fall var(--d) cubic-bezier(.25,.6,.4,1) var(--delay) forwards}@keyframes confetti-fall{0%{opacity:1;transform:translateZ(0) rotate(0)}85%{opacity:1}to{opacity:0;transform:translate3d(var(--dx),105vh,0) rotate(var(--rot))}}.trophy-pop{display:inline-block;animation:fb-pop .6s cubic-bezier(.34,1.56,.64,1)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.confetti{display:none}.op-tile,.op-tile[aria-pressed=true]{transition:none}}