:root{font-family:Trebuchet MS,Avenir Next,sans-serif;color:#333e5a;background:radial-gradient(circle at top,rgba(255,255,255,.5),transparent 26%),linear-gradient(180deg,#d3ecee,#d3ecee 48%,#d3ecee);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{cursor:pointer}#root{min-height:100vh}.app-shell{min-height:100vh;padding:0}.lesson-stage{position:relative;min-height:100vh;overflow:hidden;background:#d3ecee}.chrome-icon,.tips-button,.nav-button,.hint-bubble,.lesson-row,.equation-preview,.periodic-tile,.success-check{box-shadow:0 6px #2f23651f}.close-button{position:absolute;top:2rem;left:1.4rem;z-index:2;border:0;background:transparent;color:#26196a;font-size:4rem;line-height:1}.tips-button{position:absolute;top:2.6rem;right:1.5rem;z-index:2;border:3px solid rgba(39,33,92,.18);background:#ffffff59;color:#5b5b8b;border-radius:999px;padding:.65rem 1.35rem;font-size:1.35rem}.hint-bubble{position:absolute;top:2.2rem;left:50%;transform:translate(-50%);z-index:2;width:min(28rem,calc(100vw - 9rem));border-radius:1.15rem;background:#fffffff0;padding:1rem 1.4rem;text-align:center;font-size:1.15rem;color:#2f2769}.progress-dots{position:absolute;left:1.8rem;top:50%;z-index:2;display:flex;flex-direction:column;gap:.9rem;transform:translateY(-50%)}.progress-dot{width:1.2rem;height:1.2rem;border-radius:999px;background:#43397c24;border:3px solid transparent}.progress-dot.active{background:#fff;border-color:#26196a}.progress-dot.complete{background:#26196a}.nav-controls{position:absolute;right:1.5rem;top:50%;z-index:2;display:flex;flex-direction:column;gap:1rem;transform:translateY(-50%)}.nav-button{width:4.6rem;height:4.6rem;border:0;border-radius:1.5rem;font-size:2rem;line-height:1}.nav-button.primary{background:linear-gradient(180deg,#16d4d1,#12bebc);color:#fff}.nav-button.secondary{background:#fffffff2;color:#26196a}.nav-button:disabled{cursor:not-allowed;opacity:.35}.pages-window{height:100vh;overflow:hidden}.pages-track{height:300vh;transition:transform .42s cubic-bezier(.2,.9,.2,1)}.lesson-page{min-height:100vh;height:100vh;padding:8.25rem 6rem 7rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;overflow:hidden}.lesson-page-top{justify-content:flex-start;padding-top:7.8rem}.page-copy{text-align:center}.eyebrow{margin:0 0 .75rem;font-size:.85rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7a78b3}.page-copy h1,.page-copy h2{margin:0;color:#333e5a}.page-copy h1{font-size:clamp(3rem,8vw,5rem);letter-spacing:.06em}.formula-display,.inline-formula{display:inline-flex;align-items:flex-start}.formula-subscript{font-size:.42em;line-height:1;vertical-align:sub;transform:translateY(1.45em)}.page-copy h2{font-size:clamp(1.8rem,5vw,3rem);max-width:38rem}.subcopy{margin:.75rem 0 0;font-size:1.25rem;color:#7471a3}.periodic-table-grid{width:min(64rem,100%);max-height:none;padding:.35rem;overflow:hidden;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:.28rem;align-items:stretch;border-radius:1.2rem;background:transparent}.lesson-page-top .periodic-table-grid{width:min(64rem,calc(100vw - 18rem))}.periodic-tile{border:0;border-radius:.72rem;min-height:3.85rem;padding:.28rem .08rem;background:#ffffffeb;color:#26196a;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.06rem}.periodic-tile.correct,.lesson-row.correct{background:linear-gradient(180deg,#c0f4a8,#9ce782)}.periodic-tile.incorrect,.lesson-row.incorrect{background:linear-gradient(180deg,#ffd2d8,#ffb1bc)}.periodic-symbol,.row-symbol{font-size:2rem;font-weight:700}.periodic-symbol{font-size:clamp(.66rem,.96vw,1rem)}.periodic-mass{font-size:clamp(.46rem,.76vw,.68rem);color:#26196abd}.row-label{color:#26196ab8}.input-stack{width:min(34rem,100%);display:flex;flex-direction:column;gap:1rem}.count-stack{width:min(30rem,100%)}.mass-stack{width:100%;max-width:18.75rem}.count-stack .lesson-row{min-height:6.75rem}.mass-workspace{width:min(72rem,calc(100vw - 11rem));display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,20rem);gap:.45rem;align-items:start}.mass-table-panel,.mass-answer-panel{width:100%}.mass-table-panel{display:flex;justify-content:flex-end;padding-left:.75rem}.mass-table-panel .periodic-table-grid{width:100%;max-width:43rem;gap:.2rem;padding:.22rem}.mass-table-panel .periodic-tile{padding-inline:.02rem}.mass-table-panel .periodic-mass{font-size:clamp(.46rem,.76vw,.68rem)}.mass-answer-panel{display:flex;flex-direction:column;gap:1rem;max-width:18.75rem}.reference-tile{cursor:default}.lesson-row{display:flex;align-items:center;justify-content:space-between;gap:.55rem;border-radius:1.5rem;background:#ffffffeb;padding:1rem 1.1rem}.mass-stack .lesson-row{display:grid;grid-template-columns:minmax(2.2rem,2.9rem) minmax(0,1fr);align-items:center}.mass-stack .row-copy{align-items:center;text-align:center}.row-copy{display:flex;flex-direction:column;gap:.2rem}.mass-math{display:grid;grid-template-columns:7rem auto 2.45rem;align-items:center;gap:.3rem;justify-content:start}.answer-box-group{display:flex;flex-direction:column;align-items:center;gap:.35rem}.atom-count-group{width:2.45rem;flex:0 0 2.45rem}.answer-box-label{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#333e5ab8}.atom-count-group .answer-box-label{max-width:2.45rem;line-height:1.05;text-align:center;font-size:.58rem;letter-spacing:.03em}.lesson-row input{width:7rem;border:3px solid rgba(38,25,106,.16);border-radius:1.15rem;background:#fff;padding:.95rem .8rem;text-align:center;color:#26196a;font-size:1.5rem;font-weight:700}.lesson-row input.atom-count-input{width:2.45rem;min-width:2.45rem;max-width:2.45rem;padding-inline:.1rem;flex:0 0 2.45rem}.multiply-sign{font-size:1.7rem;font-weight:700;color:#333e5a}.lesson-row input:focus{outline:3px solid rgba(103,63,255,.2)}.equation-preview{width:min(34rem,100%);border-radius:1.75rem;background:#fffffff5;padding:1.2rem 1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:1.1rem;color:#2c2666}.equation-preview strong{font-size:1.45rem}.success-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:linear-gradient(180deg,#16d4d1f2,#12bebcfa);color:#fff}.success-check{width:10rem;height:10rem;border-radius:999px;background:#fffffff5;color:#26196a;display:grid;place-items:center;font-size:5rem;font-weight:700}.success-overlay p{position:relative;z-index:1;margin:0;font-size:1.3rem}.bottom-progress{position:absolute;left:50%;bottom:5.2rem;z-index:2;transform:translate(-50%);width:min(28rem,calc(100vw - 6rem));pointer-events:none}.progress-rack{display:flex;justify-content:center;gap:.35rem;padding:.45rem .75rem;border-radius:999px;background:#fff6;box-shadow:inset 0 0 0 1px #333e5a14}.test-tube{width:1.45rem;height:2.6rem;display:flex;align-items:flex-end;justify-content:center}.test-tube-glass{position:relative;width:1.05rem;height:2.2rem;border:2px solid rgba(51,62,90,.34);border-top-width:.28rem;border-radius:.4rem .4rem .7rem .7rem;background:#ffffff59;overflow:hidden}.test-tube.filled .test-tube-glass{background:linear-gradient(180deg,#ffffff8c,#e3f9f9eb)}.test-tube-molecules{position:absolute;inset:auto .08rem .08rem .08rem;height:1.35rem}.mini-molecule{position:absolute;width:.82rem;height:.82rem}.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:.02rem;bottom:.06rem}.mini-molecule:nth-child(2){left:.18rem;bottom:.48rem}.mini-molecule:nth-child(3){left:.05rem;bottom:.86rem}.preview-shell{min-height:100vh;padding:3rem 3.5rem 4rem;display:flex;align-items:center;justify-content:center}.preview-dots{position:absolute;left:1.8rem;top:50%;z-index:1;display:flex;flex-direction:column;gap:.75rem;transform:translateY(-50%)}.preview-content{display:flex;flex-direction:column;align-items:center;gap:2.6rem;text-align:center}.preview-content h2{margin:0;max-width:36rem;font-size:clamp(2.25rem,5vw,3.4rem);font-weight:500;line-height:1.15;color:#333e5a}.preview-formula{font-size:clamp(3rem,8vw,5rem);color:#333e5a}.preview-nav{position:absolute;left:50%;bottom:8.2rem;transform:translate(-50%);width:min(28rem,calc(100vw - 4rem));display:flex;justify-content:space-between;align-items:center}.preview-nav-center{justify-content:center}.preview-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.preview-button{min-width:10.5rem;border:0;border-radius:999px;padding:.95rem 1.5rem;font-size:1.05rem;font-weight:700;box-shadow:0 6px #2f23651f}.preview-button.primary{background:linear-gradient(180deg,#16d4d1,#12bebc);color:#fff}.preview-button.secondary,.preview-button.ghost{background:#fffffff0;color:#333e5a}.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}.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}@keyframes float-molecule{0%{transform:translate(-50%,-50%) translate(0) rotate(0) scale(.55);opacity:0}15%{opacity:1}70%{opacity:1}to{transform:translate(-50%,-50%) translate(var(--offset-x),var(--offset-y)) rotate(var(--rotation)) scale(calc(var(--scale) * 1.18));opacity:.98}}@media (max-height: 980px) and (min-width: 701px){.hint-bubble{top:1.35rem;padding:.85rem 1.2rem}.close-button{top:1.05rem}.tips-button{top:1.55rem}.lesson-page{padding:6rem 5.4rem 5.8rem;gap:1.25rem}.lesson-page-top{padding-top:6rem}.subcopy{margin-top:.45rem;font-size:1.05rem}.lesson-page-top .periodic-table-grid{width:min(62rem,calc(100vw - 18rem));gap:.26rem;padding:.3rem}.periodic-tile{min-height:3.2rem;border-radius:.6rem}.periodic-symbol{font-size:clamp(.6rem,.84vw,.94rem)}.periodic-mass{font-size:clamp(.46rem,.76vw,.68rem)}.bottom-progress{bottom:4rem;width:min(24rem,calc(100vw - 7rem))}.progress-rack{gap:.2rem;padding:.35rem .55rem}.test-tube{width:1.08rem;height:2rem}.test-tube-glass{width:.78rem;height:1.68rem}}@media (max-height: 880px) and (min-width: 701px){.lesson-page{padding:5.35rem 5rem 5rem;gap:1rem}.lesson-page-top{padding-top:5.4rem}.hint-bubble{top:1rem;padding:.75rem 1.05rem}.close-button{top:.8rem;font-size:3.4rem}.tips-button{top:1.1rem;padding:.55rem 1.1rem;font-size:1.15rem}.subcopy{margin-top:.3rem;font-size:.95rem}.lesson-page-top .periodic-table-grid{width:min(60rem,calc(100vw - 18rem));gap:.24rem;padding:.26rem}.periodic-tile{min-height:2.9rem;border-radius:.5rem;padding:.22rem .14rem}.periodic-symbol{font-size:clamp(.56rem,.78vw,.86rem)}.periodic-mass{font-size:clamp(.46rem,.76vw,.68rem)}.bottom-progress{bottom:3.4rem;width:min(22rem,calc(100vw - 8rem))}.test-tube{width:.98rem;height:1.8rem}.test-tube-glass{width:.7rem;height:1.48rem}}@media (max-width: 700px){.hint-bubble{width:min(18rem,calc(100vw - 7rem));top:1.4rem;font-size:1rem;padding:.9rem 1rem}.close-button{top:1rem;left:1rem;font-size:3rem}.tips-button{top:1.35rem;right:1rem;font-size:1rem;padding:.55rem 1rem}.progress-dots{left:1rem;gap:.65rem}.progress-dot{width:1rem;height:1rem}.nav-controls{right:1rem;gap:.7rem}.nav-button{width:3.8rem;height:3.8rem;border-radius:1.2rem;font-size:1.7rem}.lesson-page{padding:6.5rem 4.3rem 6.1rem}.page-copy h1{font-size:3rem}.page-copy h2{font-size:1.55rem}.periodic-table-grid{width:min(100%,20rem);grid-template-columns:repeat(9,minmax(0,1fr));gap:.24rem}.periodic-tile{min-height:3.5rem;border-radius:.55rem;padding-inline:.06rem}.periodic-symbol{font-size:.64rem}.periodic-mass{font-size:.46rem}.lesson-row{padding:.9rem 1rem;gap:.45rem}.lesson-row input{width:5.6rem;font-size:1.35rem}.lesson-row input.atom-count-input{width:2.3rem;min-width:2.3rem;max-width:2.3rem;padding-inline:.08rem;flex-basis:2.3rem}.mass-math{grid-template-columns:5.6rem auto 2.3rem;gap:.22rem}.answer-box-label{font-size:.62rem}.mass-workspace{grid-template-columns:1fr}.mass-table-panel .periodic-table-grid{width:min(100%,20rem)}.equation-preview{flex-direction:column;align-items:flex-start}.success-check{width:7.5rem;height:7.5rem;font-size:3.8rem}.preview-shell{padding:2.5rem 1.4rem 6rem 3.4rem}.preview-content{gap:2rem}.preview-content h2{font-size:2rem}.preview-nav{width:calc(100vw - 3rem);bottom:7.2rem}.preview-actions{flex-direction:column;width:min(19rem,100%)}.preview-button{width:100%}.bottom-progress{width:calc(100vw - 4.5rem);bottom:2rem}.progress-rack{gap:.22rem;padding-inline:.45rem}.test-tube{width:1.18rem;height:2.15rem}.test-tube-glass{width:.84rem;height:1.82rem}}