:root{--teal: #16d4d1;--teal-dark: #0caeac;--teal-pale: #e9fbfb;--navy: #353e5b;--navy-soft: #59627d;--white: #ffffff;--coral: #f16d76;--yellow: #ffd166;--shadow: 0 22px 60px rgba(53, 62, 91, .2)}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:radial-gradient(circle at 14% 15%,rgba(255,255,255,.38) 0 5rem,transparent 5.1rem),radial-gradient(circle at 88% 82%,rgba(255,255,255,.22) 0 7rem,transparent 7.1rem),linear-gradient(145deg,var(--teal) 0%,#37ddd2 52%,#7ae4d0 100%);color:var(--navy);font-family:Trebuchet MS,Segoe UI,Arial,sans-serif}button{font:inherit}button:focus-visible,[tabindex]:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}.app-shell{min-height:100vh;display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem)}.game-card{position:relative;width:min(72rem,100%);min-height:min(48rem,calc(100vh - 3rem));display:flex;flex-direction:column;overflow:hidden;border:3px solid var(--navy);border-radius:2rem;background:#fffffff7;box-shadow:var(--shadow)}.game-header{padding:clamp(1.4rem,3vw,2.3rem) clamp(1.25rem,4vw,3.3rem) 1.2rem;text-align:center}.eyebrow{display:inline-flex;margin-bottom:.55rem;padding:.38rem .85rem;border-radius:999px;background:var(--teal-pale);font-size:clamp(.76rem,1.8vw,.92rem);font-weight:800;letter-spacing:.09em;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:.55rem;color:var(--navy);font-size:clamp(1.85rem,5vw,3.15rem);line-height:1.05;letter-spacing:-.035em}.game-header p{max-width:43rem;margin:0 auto;color:var(--navy-soft);font-size:clamp(.96rem,2vw,1.12rem);line-height:1.5}.progress-rack{width:min(34rem,calc(100% - 2rem));min-height:5rem;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.22rem,1vw,.55rem);margin:0 auto 1rem;padding:.6rem clamp(.45rem,2vw,1rem) .75rem;border:2px solid rgba(53,62,91,.18);border-radius:1.2rem;background:linear-gradient(180deg,#f8ffff,#e8f8f8);box-shadow:inset 0 -.45rem #353e5b14}.test-tube{position:relative;width:clamp(1.25rem,4vw,2rem);height:clamp(2.7rem,7vw,3.8rem);display:flex;align-items:flex-end;justify-content:center}.test-tube-rim{position:absolute;z-index:2;top:0;width:86%;height:.48rem;border:2px solid var(--navy);border-radius:999px;background:var(--white)}.test-tube-glass{position:relative;width:68%;height:calc(100% - .2rem);overflow:hidden;border:2px solid var(--navy);border-top:0;border-radius:0 0 .8rem .8rem;background:#ffffffad;box-shadow:inset .2rem 0 #fffc}.test-tube.filled .test-tube-glass{background:linear-gradient(180deg,#ffffffd1,#16d4d133)}.tube-confetti{position:absolute;top:35%;right:.08rem;bottom:.12rem;left:.08rem}.tube-piece{position:absolute;width:.35rem;height:.48rem;border-radius:.1rem;transform:rotate(18deg);animation:tube-pop .48s ease-out both}.tube-piece:nth-child(1){left:8%;bottom:7%}.tube-piece:nth-child(2){left:42%;bottom:3%;transform:rotate(-20deg)}.tube-piece:nth-child(3){right:8%;bottom:10%;transform:rotate(35deg)}.tube-piece:nth-child(4){left:22%;bottom:34%;transform:rotate(50deg)}.tube-piece:nth-child(5){right:18%;bottom:38%;transform:rotate(-38deg)}.tube-piece:nth-child(6){left:48%;bottom:52%;transform:rotate(12deg)}.tube-piece:nth-child(7){left:5%;bottom:62%;transform:rotate(-14deg)}.tube-piece:nth-child(8){right:3%;bottom:68%;transform:rotate(27deg)}.tube-piece:nth-child(9){left:31%;bottom:77%;transform:rotate(-31deg)}.piece-0,.confetti-0{background:#f16d76}.piece-1,.confetti-1{background:#ffd166}.piece-2,.confetti-2{background:#16d4d1}.piece-3,.confetti-3{background:#353e5b}.piece-4,.confetti-4{background:#7cc576}.confetti-5{background:#fff}.activity-area{flex:1;display:flex;flex-direction:column;gap:1.05rem;padding:0 clamp(1rem,4vw,3.3rem) clamp(1.25rem,3vw,2.4rem)}.comparison-activity{justify-content:center;padding-bottom:clamp(2rem,5vw,4rem)}.comparison-section{width:min(48rem,100%);margin:0 auto;padding:clamp(1rem,3vw,2rem);border:2px solid rgba(53,62,91,.14);border-radius:1.35rem;background:linear-gradient(180deg,#f8ffff,#edfafa)}.comparison-section h2{margin-bottom:.45rem;color:var(--navy);font-size:clamp(1.35rem,4vw,2rem);text-align:center}.comparison-section>p{margin-bottom:1.2rem;color:var(--navy-soft);font-weight:700;text-align:center}.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,3vw,1.6rem)}.comparison-card{min-height:clamp(6.5rem,17vw,9rem)}.comparison-card.incorrect{border-color:var(--coral);background:#fff1f2;box-shadow:0 .35rem #bd424c,0 .65rem 1rem #bd424c24;animation:gentle-shake .35s ease-in-out}.comparison-card:disabled{cursor:default}.comparison-feedback{min-height:1.5rem;text-align:center}.comparison-feedback .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.section-heading-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.55rem}.section-heading-row h2{margin-bottom:0;color:var(--navy);font-size:clamp(1rem,2.5vw,1.25rem)}.section-heading-row span{color:var(--navy-soft);font-size:.88rem;font-weight:700}.order-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.5rem,2vw,1.15rem)}.slot-column{min-width:0}.slot-label{display:block;margin:0 0 .32rem .35rem;font-size:.82rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.order-slot{min-height:clamp(5.2rem,13vw,7rem);display:grid;place-items:center;padding:.45rem;border:2px dashed rgba(53,62,91,.38);border-radius:1rem;background:#f6fbfb;transition:border-color .16s ease,background .16s ease,transform .16s ease}.order-slot.occupied{border-style:solid;border-color:var(--teal-dark);background:var(--teal-pale)}.order-slot.incorrect{border-color:var(--coral);background:#fff1f2;animation:gentle-shake .35s ease-in-out}.empty-slot-copy{color:#7b8398;font-size:clamp(.78rem,2vw,.95rem);font-weight:800}.number-bank{min-height:7.1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));place-items:center;gap:clamp(.6rem,2vw,1.2rem);padding:clamp(.7rem,2vw,1.1rem);border:2px solid rgba(53,62,91,.16);border-radius:1.2rem;background:#353e5b0b}.number-card{width:100%;min-height:clamp(4.5rem,10vw,5.7rem);display:grid;place-items:center;border:2px solid var(--navy);border-radius:1rem;background:var(--white);color:var(--navy);box-shadow:0 .35rem 0 var(--navy),0 .65rem 1rem #353e5b1c;cursor:grab;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.number-card:hover{transform:translateY(-.15rem);background:#f8ffff;box-shadow:0 .48rem 0 var(--navy),0 .8rem 1.2rem #353e5b24}.number-card:active{cursor:grabbing;transform:translateY(.2rem);box-shadow:0 .12rem 0 var(--navy)}.placed-card{min-height:100%;box-shadow:0 .22rem 0 var(--teal-dark)}.scientific-number{white-space:nowrap;font-size:clamp(1.18rem,4vw,2rem);font-weight:900;letter-spacing:-.025em}.scientific-number .multiplication{color:inherit}.scientific-number sup{position:relative;top:-.28em;margin-left:.05em;font-size:.62em;line-height:0}.bank-empty{grid-column:1 / -1;color:var(--navy-soft);font-weight:800;text-align:center}.feedback-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto}.feedback{margin:0;color:var(--navy-soft);font-size:.95rem;font-weight:700;line-height:1.4}.feedback.incorrect{color:#bd424c}.feedback.correct{color:#15886f}.primary-button{min-width:10rem;min-height:3.2rem;padding:.75rem 1.35rem;border:2px solid var(--navy);border-radius:999px;background:var(--navy);color:var(--white);font-weight:900;box-shadow:0 .3rem #20263b;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease}.primary-button:hover:not(:disabled){transform:translateY(-.1rem);box-shadow:0 .4rem #20263b}.primary-button:active:not(:disabled){transform:translateY(.2rem);box-shadow:0 .1rem #20263b}.primary-button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.celebration{position:absolute;z-index:10;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,#16d4d1f2,#0caeacf7);color:var(--white)}.celebration-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}.celebration-copy strong{font-size:clamp(2rem,7vw,4rem);line-height:1;text-shadow:0 .2rem 0 rgba(53,62,91,.3)}.celebration-copy span{font-size:clamp(1rem,3vw,1.35rem);font-weight:800}.success-check,.completion-mark{width:clamp(6rem,18vw,10rem);aspect-ratio:1;display:grid;place-items:center;border:4px solid var(--navy);border-radius:50%;background:var(--white);color:var(--navy);font-size:clamp(3.2rem,10vw,6rem);font-weight:900;box-shadow:0 .55rem #353e5b6b}.confetti-burst{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.confetti-piece{position:absolute;width:.85rem;height:1.45rem;border:1px solid rgba(53,62,91,.15);border-radius:.16rem;opacity:0;animation:confetti-fly 2.8s cubic-bezier(.16,.84,.18,1) infinite;will-change:transform,opacity}.confetti-2,.confetti-5{border-radius:999px}.completion-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.2rem 1.5rem 3rem;text-align:center}.completion-mark{width:clamp(5.5rem,16vw,8rem);margin-bottom:1.2rem;border-color:var(--teal-dark);color:var(--teal-dark);font-size:clamp(3rem,8vw,4.8rem);box-shadow:0 .4rem #0caeac59}.completion-panel h2{margin-bottom:.55rem;font-size:clamp(1.8rem,5vw,3rem)}.completion-panel p{margin-bottom:1.6rem;color:var(--navy-soft);font-size:1.08rem}.replay-button{min-width:12rem}@keyframes confetti-fly{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}10%,80%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--offset-x)),calc(-50% + var(--offset-y))) scale(var(--piece-scale)) rotate(var(--piece-rotation))}}@keyframes tube-pop{0%{opacity:0;transform:translateY(-1rem) rotate(0) scale(.6)}to{opacity:1}}@keyframes gentle-shake{0%,to{transform:translate(0)}30%{transform:translate(-.28rem)}70%{transform:translate(.28rem)}}@media (max-width: 700px){.app-shell{align-items:start;padding:0}.game-card{min-height:100vh;border-width:0;border-radius:0}.game-header{padding-top:1.25rem}.progress-rack{margin-bottom:.8rem}.order-slots,.number-bank{gap:.42rem}.order-slot{padding:.3rem}.number-card{border-radius:.8rem}.comparison-section{padding:1rem .75rem 1.25rem}.comparison-card{min-height:6rem}.feedback-row{flex-direction:column;align-items:stretch}.feedback{min-height:2.7rem;text-align:center}.primary-button{width:100%}}@media (max-width: 420px){.game-header p{display:none}.progress-rack{min-height:4.1rem}.section-heading-row span{font-size:.73rem}.slot-label{margin-left:0;font-size:.68rem;text-align:center}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.confetti-piece:nth-child(n+31){display:none}}:root{--teal: #43c6c5;--teal-dark: #2ab2b4;--teal-pale: #e4f8f9;--navy: #353e5b;--navy-soft: #6975a0;--panel-line: #e0e7ec;--panel-shadow: #c9dce4;--shadow: 0 8px 0 rgba(159, 187, 201, .35)}body{background:#dceff1;color:var(--navy)}.app-shell{place-items:start center;padding:clamp(2rem,5vw,5rem) clamp(1rem,4vw,3rem)}.game-card{width:min(80rem,100%);min-height:auto;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}.game-header{padding:0 1rem clamp(1.2rem,2.5vw,1.8rem)}.eyebrow{margin-bottom:.6rem;padding:0;background:transparent;color:var(--navy-soft);font-size:.85rem;letter-spacing:.06em}h1{margin-bottom:.65rem;font-size:clamp(2.1rem,5vw,3.45rem);letter-spacing:-.025em}.game-header p{color:var(--navy-soft);font-size:clamp(.95rem,2vw,1.08rem)}.activity-area,.completion-panel{min-height:clamp(25rem,54vh,34rem);margin-bottom:1.5rem;padding:clamp(1.25rem,3vw,2rem) clamp(1.1rem,4vw,2.6rem) clamp(1.8rem,4vw,2.7rem);border:1px solid rgba(255,255,255,.95);border-radius:1.65rem;background:#fffffff5;box-shadow:0 8px 0 var(--panel-shadow)}.comparison-activity{justify-content:center}.comparison-section{width:min(52rem,100%);padding:clamp(1rem,3vw,2rem);border:0;background:transparent}.comparison-section h2{font-size:clamp(1.5rem,4vw,2.2rem)}.comparison-section>p,.section-heading-row span,.feedback,.completion-panel p{color:var(--navy-soft)}.order-section{padding:clamp(.8rem,2vw,1.15rem);border-radius:1.15rem;background:var(--teal-pale)}.bank-section{padding:clamp(.8rem,2vw,1.15rem)}.order-slot{border:1px dashed #aeb8ce;background:#ffffffe0}.order-slot.occupied{border-color:#9ddfe0;background:#fff}.number-bank{border:1px solid #dce7eb;background:#f1f9fa}.number-card{border:1px solid var(--panel-line);border-radius:1.15rem;background:#fff;color:var(--navy);box-shadow:0 7px #e1e6ec}.number-card:hover{background:#fff;box-shadow:0 9px #d9e0e7}.number-card:active{box-shadow:0 3px #d9e0e7}.placed-card{box-shadow:0 5px #d9e8e9}.comparison-card.incorrect{box-shadow:0 7px #edc9ce}.primary-button{border:0;border-radius:1rem;background:var(--teal);color:#fff;box-shadow:0 5px 0 var(--teal-dark)}.primary-button:hover:not(:disabled){box-shadow:0 7px 0 var(--teal-dark)}.primary-button:active:not(:disabled){box-shadow:0 2px 0 var(--teal-dark)}.progress-rack{width:min(48rem,calc(100% - 2rem));min-height:4.4rem;margin:0 auto;border:1px solid rgba(255,255,255,.92);border-radius:1.55rem;background:#ffffff6b;box-shadow:0 7px 0 var(--panel-shadow)}.test-tube-rim,.test-tube-glass{border-color:#8f9abb}.celebration{border-radius:1.65rem;background:#43c6c5f7}.success-check,.completion-mark{border-color:var(--navy);box-shadow:0 6px #353e5b2e}@media (max-width: 700px){.app-shell{padding:1.25rem .8rem 2rem}.game-card{min-height:auto;background:transparent}.activity-area,.completion-panel{min-height:31rem;border-radius:1.35rem}.progress-rack{width:calc(100% - 1rem)}}.test-tube-molecules{position:absolute;inset:auto .08rem .08rem;height:68%}.mini-molecule{position:absolute;width:.82rem;height:.82rem;animation:tube-pop .48s ease-out both}.mini-molecule .cluster{width:.32rem;height:.32rem;box-shadow:inset -.08rem -.08rem .14rem #0000001f,inset .08rem .08rem .12rem #ffffff73}.mini-molecule .cluster-a{left:.05rem;top:.3rem}.mini-molecule .cluster-b{left:.24rem;top:.1rem}.mini-molecule .cluster-c{left:.43rem;top:.31rem}.mini-molecule:nth-child(1){left:2%;bottom:2%}.mini-molecule:nth-child(2){left:22%;bottom:30%}.mini-molecule:nth-child(3){left:4%;bottom:58%}.cluster{position:absolute;width:.95rem;height:.95rem;border-radius:999px;box-shadow:inset -.18rem -.18rem .28rem #0000001f,inset .16rem .16rem .26rem #ffffff73}.cluster-a{left:.45rem;top:1.15rem}.cluster-b{left:1.15rem;top:.55rem}.cluster-c{left:1.7rem;top:1.2rem}.molecule-0 .cluster-a{background:#f3d20d}.molecule-0 .cluster-b,.molecule-0 .cluster-c{background:#f3f7ff}.molecule-1 .cluster-a,.molecule-1 .cluster-c{background:#f3d20d}.molecule-1 .cluster-b{background:#f0fffa}.molecule-2 .cluster-a{background:#5e7be8}.molecule-2 .cluster-b,.molecule-2 .cluster-c{background:#7fa2ff}.molecule-3 .cluster-a,.molecule-3 .cluster-c{background:#a7c900}.molecule-3 .cluster-b{background:#6d85f2}.molecule-burst{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.molecule{position:absolute;width:3.1rem;height:3.1rem;animation:float-molecule 3.4s cubic-bezier(.16,.84,.18,1) infinite;pointer-events:none;will-change:transform,opacity}@keyframes float-molecule{0%{opacity:0;transform:translate(-50%,-50%) translate(0) rotate(0) scale(.55)}15%,70%{opacity:1}to{opacity:.98;transform:translate(-50%,-50%) translate(var(--offset-x),var(--offset-y)) rotate(var(--rotation)) scale(calc(var(--scale) * 1.18))}}@media (prefers-reduced-motion: reduce){.molecule:nth-child(n+31){display:none}}