:root{font-family:Trebuchet MS,Avenir Next,sans-serif;color:#2e3b58;background:radial-gradient(circle at top,rgba(255,255,255,.45),transparent 22%),linear-gradient(180deg,#d3ecee,#c7ece7 48%,#c7ece7);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}.close-button{position:absolute;top:2rem;left:1.4rem;z-index:2;border:0;background:transparent;color:#26196a;font-size:3.2rem;line-height:1}.tips-button{position:absolute;top:2.4rem;right:1.5rem;z-index:2;border:3px solid rgba(39,33,92,.16);background:#fff6;color:#4e4c84;border-radius:999px;padding:.65rem 1.2rem;font-size:1.15rem}.hint-bubble{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.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:#fff;border:3px solid #26196a}.nav-controls{position:absolute;right:1.5rem;top:50%;z-index:2;display:flex;flex-direction:column;gap:.75rem;transform:translateY(-50%)}.nav-button{width:4.5rem;height:4.5rem;border:0;border-radius:1.4rem;font-size:1.8rem;line-height:1}.nav-button.primary{background:linear-gradient(180deg,#16d4d1,#11bbb8);color:#fff}.nav-button.secondary{background:#fffffff2;color:#26196a}.nav-button:disabled{cursor:not-allowed;opacity:.35}.top-rule-selector{position:absolute;top:1.8rem;left:50%;z-index:2;display:flex;gap:.7rem;align-items:center;overflow-x:auto;padding-bottom:.2rem;width:max-content;max-width:min(100vw - 16rem,70rem);transform:translate(-50%)}.mode-card{border:0;border-radius:.95rem;min-height:3rem;padding:.7rem 1rem;background:#edf0f4;color:#26196a;font-size:.8rem;font-weight:700;flex:0 0 auto}.mode-card.active{background:linear-gradient(180deg,#c0f4a8,#9ce782)}.pages-window{min-height:100vh;overflow:hidden}.pages-track-single{min-height:100vh}.lesson-page{min-height:100vh;padding:8.5rem 6rem 7rem;display:flex;flex-direction:column;align-items:center;gap:2rem}.lesson-page-top{justify-content:flex-start;padding-top:10.75rem}.page-copy{text-align:center;max-width:52rem}.eyebrow{margin:0 0 .75rem;font-size:.85rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7a78b3}.page-copy h2,.panel-heading h1,.panel-heading h2,.equation-header h3{margin:0;color:#333e5a}.page-copy h2{font-size:clamp(1.8rem,4vw,3rem)}.bonding-copy{margin-top:1rem;padding:1rem 1.2rem;border-radius:.9rem;background:#ffffff7a}.bonding-title{margin:0 0 .45rem;font-size:1.35rem;font-weight:700;color:#2e3b58}.subcopy{margin:.3rem 0 0;font-size:1.15rem;color:#666391}.lesson-columns{width:min(78rem,100%);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:1.5rem;align-items:start}.compound-card,.periodic-card{border-radius:1.8rem;background:#fffffff2;padding:1.5rem 1.6rem}.panel-heading{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start}.panel-heading h1{font-size:clamp(2.5rem,5vw,4rem)}.ghost-button{border:0;border-radius:999px;background:#edf0f4;color:#26196a;font-weight:700;padding:.75rem 1rem}.compound-toolbar{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.compound-formula{margin:0;font-size:clamp(2.8rem,6vw,4.6rem);line-height:1;color:#333e5a}.compound-prompt,.periodic-instruction{margin:.9rem 0 1rem;color:#5f6487;font-size:1.02rem}.equation-board{display:grid;gap:.75rem}.equation-zone{border-radius:1.5rem;background:#ffffffeb;padding:.75rem .9rem}.equation-zone.correct{background:linear-gradient(180deg,#c0f4a8,#9ce782)}.equation-zone.incorrect{background:linear-gradient(180deg,#ffd2d8,#ffb1bc)}.equation-header{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start}.equation-label{margin:0 0 .3rem;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:#7a78b3}.equation-result{display:inline-flex;align-items:center;gap:.28rem}.equation-equals{font-size:1.8rem;font-weight:700;color:#4f4a86;line-height:1}.equation-result-label{opacity:0;color:#4f4a86;font-size:1.15rem;font-weight:700;transition:opacity .16s ease}.equation-result-label.revealed{opacity:1}.equation-drop-row{margin-top:.9rem;display:flex;align-items:center;gap:.75rem}.drop-slot{flex:0 0 4.15rem;min-height:4.15rem;border-radius:.9rem;background:#ffffffe6;border:2px dashed rgba(38,25,106,.16);display:grid;place-items:center;color:#26196a;font-size:.8rem;font-weight:700;text-transform:capitalize;overflow:hidden}.slot-placeholder{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;padding:.2rem}.dropped-element-tile{width:100%;height:100%;padding:.18rem .22rem;color:#263247;display:flex;flex-direction:column;justify-content:space-between;-webkit-user-select:none;user-select:none}.dropped-element-number{font-size:.4rem;opacity:.72;line-height:1}.dropped-element-tile strong{font-size:.8rem;line-height:1}.equation-operator{font-size:1.8rem;font-weight:700;color:#4f4a86}.equation-hint{margin:.8rem 0 0;color:#26196ab8}.periodic-legend{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.legend-pill{border-radius:999px;padding:.55rem .8rem;font-size:.82rem;font-weight:700;color:#263247}.legend-pill.metal{background:#f6d34a}.legend-pill.nonmetal{background:#16d4d1}.legend-pill.metalloid{background:#d9dde2}.periodic-grid{margin-top:1rem;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(9,2.1rem);gap:.25rem}.element-cell{border-radius:.7rem;padding:.2rem .25rem;color:#263247;display:flex;flex-direction:column;justify-content:space-between;min-width:0;width:100%;height:100%;-webkit-user-select:none;user-select:none;transition:transform .18s ease,opacity .18s ease}.element-cell.draggable{cursor:grab}.element-cell.draggable:active{cursor:grabbing}.element-cell.inactive{opacity:1}.element-number{font-size:.58rem;opacity:.72;pointer-events:none}.element-cell strong{font-size:.85rem;pointer-events:none}.bottom-progress{position:absolute;left:50%;bottom:1rem;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}.bond-liquid{position:absolute;inset:auto .08rem .08rem .08rem;height:0;border-radius:999px 999px .45rem .45rem;background:linear-gradient(180deg,#16d4d1,#f6d34a);transition:height .22s ease}.test-tube.filled .bond-liquid{height: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:.75rem;background:linear-gradient(180deg,#16d4d1f2,#0fb1aefa);color:#fff}.success-check{width:9rem;height:9rem;border-radius:999px;background:#fffffff5;color:#26196a;display:grid;place-items:center;font-size:2rem;font-weight:700}.success-overlay p{position:relative;z-index:1;margin:0;font-size:1.3rem}.particle-burst{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.particle{position:absolute;width:1rem;height:1rem;border-radius:999px;animation:float-particle 3s cubic-bezier(.16,.84,.18,1) infinite}.particle-0{background:#f6d34a}.particle-1{background:#fff}.particle-2{background:#d9dde2}@keyframes float-particle{0%{transform:translate(-50%,-50%) translate(0) scale(.5);opacity:0}18%{opacity:1}to{transform:translate(-50%,-50%) translate(var(--offset-x),var(--offset-y)) scale(1.15);opacity:0}}@media (max-width: 1100px){.lesson-columns{grid-template-columns:1fr}.periodic-grid{grid-template-rows:repeat(9,2.5rem)}}@media (max-width: 700px){.close-button{top:1rem;left:1rem;font-size:2.7rem}.tips-button{top:1.35rem;right:1rem;font-size:.8rem;padding:.55rem .95rem}.progress-dots{left:1rem;gap:.65rem}.nav-controls{right:1rem;gap:.7rem}.nav-button{width:3.8rem;height:3.8rem;border-radius:.9rem;font-size:1.55rem}.top-rule-selector{top:1.3rem;left:50%;width:calc(100vw - 1.6rem);max-width:calc(100vw - 1.6rem);transform:translate(-50%)}.lesson-page{padding:6.5rem 4.2rem 5.6rem}.lesson-page-top{padding-top:7.8rem}.panel-heading,.equation-header,.equation-drop-row{flex-direction:column;align-items:flex-start}.drop-slot{width:100%}.periodic-grid{grid-template-rows:repeat(9,2rem);gap:.18rem}.element-cell{padding:.12rem}.element-number{font-size:.45rem}.element-cell strong{font-size:.68rem}.bottom-progress{width:calc(100vw - 4.5rem);bottom:.7rem}}.printable-resources{padding:3.5rem 1.5rem 4.5rem;background:linear-gradient(180deg,#ebf9f9f5,#d9f3f3fa)}.printable-resources-copy{max-width:46rem;margin:0 auto 2rem;text-align:center}.printable-resources-copy h2{margin:0;color:#33405f;font-size:clamp(2rem,4vw,2.8rem)}.printable-resources-copy p{margin:.85rem 0 0;color:#7480a7;font-size:clamp(1rem,2vw,1.35rem)}.printable-resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,22rem));justify-content:center;gap:1.5rem}.printable-resource-card{display:block;border-radius:1.5rem;overflow:hidden;background:#ffffffb8;box-shadow:0 10px #2f23651f;transition:transform .18s ease,box-shadow .18s ease}.printable-resource-card:hover,.printable-resource-card:focus-visible{transform:translateY(-.2rem);box-shadow:0 14px #2f23651f}.printable-resource-card img{display:block;width:100%;height:auto}