: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{font:inherit;cursor:pointer}#root,.app-shell{min-height:100vh}.lesson-stage{position:relative;min-height:100vh;overflow:visible;background:#d8ecee;padding-bottom:3rem}.workspace-card,.periodic-card,.atom-token,.primary-action,.secondary-action,.feedback-banner,.round-badge,.success-check,.molecule-group,.legend-pill{box-shadow:0 6px #2f23651f}.hint-bubble{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lesson-header{position:absolute;top:1.5rem;right:1.5rem;z-index:2;width:auto;display:flex;justify-content:flex-end;align-items:flex-start;gap:1rem}.eyebrow{margin:0 0 .75rem;font-size:.85rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7a78b3}.page-copy h2,.panel-heading h2,.workspace-header h3,.atom-bank-header h4,.group-copy h4{margin:0;color:#333e5a}.subcopy,.atom-bank-header p,.group-copy p{margin:.6rem 0 0;color:#666391}.round-badge{border-radius:999px;padding:.8rem 1rem;background:#fffffff5;color:#26196a;font-weight:700;white-space:nowrap}.pages-window,.pages-track-single{min-height:100vh}.lesson-page{min-height:auto;padding:11rem 4rem 2rem;display:flex;flex-direction:column;align-items:center;gap:2rem}.page-copy{text-align:center;max-width:56rem}.headline-title{margin:0;font-size:clamp(1.96rem,4.2vw,3.22rem);line-height:.95;color:#3b4784;font-weight:800}.page-subcopy{max-width:38rem;margin:.9rem auto 0;font-weight:700;color:#7081b1}.hero-formula{display:inline-flex;align-items:baseline;gap:.08em;font-weight:700;color:#26196a}.formula-coefficient{margin-right:.06em}.formula-subscript{font-size:.55em;line-height:0;vertical-align:sub}.inline-formula{display:inline-flex;align-items:baseline;gap:.08em}.studio-layout{width:min(76rem,100%);display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}.builder-column{display:grid;gap:1rem;justify-items:center}.workspace-card,.periodic-card,.tray-card{border-radius:1.8rem;background:#ffffffe6;padding:1rem 1.15rem;border:1px solid rgba(185,203,225,.7);width:50%}.workspace-card{display:grid;gap:.8rem;min-height:9rem;width:50%}.workspace-header,.group-toolbar,.panel-heading{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.workspace-actions{display:flex;gap:.6rem}.screenshot-style{align-items:center}.builder-label,.tray-label{margin:0;color:#3b4784;font-weight:700}.builder-canvas{min-height:7.25rem;width:72%;margin:0 auto;border-radius:1.35rem;background:#fff;box-shadow:none;padding:.85rem;display:grid;grid-template-columns:1fr;justify-items:stretch;gap:1rem}.molecule-island{display:grid;gap:0;align-content:start;width:100%}.tray-header{margin-bottom:.7rem}.tray-header h4{font-size:1.55rem;color:#34427d}.atom-bank-grid{display:flex;flex-wrap:wrap;gap:.9rem}.atom-token,.primary-action,.secondary-action,.remove-link{border:0}.atom-token{-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:999px;width:3.43rem;height:3.43rem;padding:0;background:var(--atom-fill, #9ee3ea);background-clip:padding-box;color:var(--atom-text, #163247);font-size:1rem;font-weight:700;display:grid;place-items:center;box-shadow:inset -.65rem -.85rem 1rem #0000001f,inset .55rem .65rem 1rem #ffffff57,0 .9rem 1.4rem var(--atom-shadow, rgba(33, 56, 98, .16));position:relative}.tray-token{width:3.43rem;height:3.43rem;font-size:1rem;font-weight:800}.tray-token:after{content:"";position:absolute;top:.68rem;right:.8rem;width:.88rem;height:.88rem;border-radius:999px;background:#ffffff57;filter:blur(.08rem)}.molecule-dropzone{min-height:3.5rem;border:0;border-radius:1.25rem;background:#fff;padding:1rem;position:relative;overflow:visible}.builder-dropzone{min-height:5.4rem}.dropzone-placeholder{color:#7f84a7;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.placed-atom{-moz-appearance:none;appearance:none;-webkit-appearance:none;position:absolute;transform:translate(-50%,-50%);width:2.9rem;height:2.9rem;padding:0;border:0;border-radius:999px;background:var(--atom-fill, #ffffff);background-clip:padding-box;color:var(--atom-text, #445280);font-weight:700;font-size:.84rem;display:grid;place-items:center;box-shadow:inset -.65rem -.85rem 1rem #0000001f,inset .55rem .65rem 1rem #ffffff57,0 .55rem .9rem var(--atom-shadow, rgba(33, 56, 98, .14))}.placed-atom:after{content:"";position:absolute;top:.58rem;right:.7rem;width:.72rem;height:.72rem;border-radius:999px;background:#ffffff57;filter:blur(.08rem);pointer-events:none}.primary-action,.secondary-action,.remove-link{border-radius:999px;padding:.68rem 1rem;font-weight:700}.primary-action{background:linear-gradient(180deg,#16d4d1,#11bbb8);color:#fff}.secondary-action,.remove-link{background:#edf0f4eb;color:#26196a}.primary-action:disabled,.secondary-action:disabled{cursor:not-allowed;opacity:.45}.feedback-banner{border-radius:1.25rem;padding:1rem 1.1rem;font-weight:700}.feedback-banner.idle,.feedback-banner.incomplete{background:#eef6ff;color:#35527c}.feedback-banner.wrong_atom_mix{background:#ffe4c8;color:#8a4a06}.feedback-banner.wrong_molecule_count{background:#ffe2d9;color:#8b3d35}.feedback-banner.correct{background:#daf7d0;color:#2a6331}.periodic-legend{display:none}.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:.75rem;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(4,1.8rem);gap:.12rem}.element-cell{border-radius:.7rem;padding:.1rem .12rem;color:#263247;display:flex;flex-direction:column;justify-content:space-between;min-width:0;box-shadow:inset 0 0 0 1px #333e5a14}.element-cell.metal{background:#f6d34a}.element-cell.nonmetal{background:#16d4d1}.element-cell.metalloid{background:#d9dde2}.element-number{font-size:.34rem;opacity:.72}.element-cell strong{font-size:.48rem}.element-charge{font-size:.34rem;font-weight:700}.bottom-progress{position:relative;display:flex;justify-content:center;padding:0 1.5rem 2rem}.printable-section{width:min(58rem,calc(100% - 3rem));margin:0 auto;padding:1.25rem 0 3.5rem;text-align:center}.printable-title{margin:0;color:#3b4784;font-size:clamp(2rem,4vw,3.5rem);line-height:1.05}.printable-copy{max-width:46rem;margin:.85rem auto 2rem;color:#7081b1;font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.25}.printable-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;justify-content:center}.printable-card{display:block;width:50%;justify-self:center;overflow:hidden;border-radius:1.75rem;background:#5ad3d1;box-shadow:0 .65rem #2f236524;transition:transform .16s ease,box-shadow .16s ease}.printable-card:hover,.printable-card:focus-visible{transform:translateY(-.22rem);box-shadow:0 .9rem #2f236524}.printable-card:focus-visible{outline:.22rem solid #3b4784;outline-offset:.25rem}.printable-card img{display:block;width:100%;aspect-ratio:1 / 1;object-fit:cover}@media (max-width: 42rem){.printable-grid{grid-template-columns:minmax(0,23rem)}.printable-section{padding-bottom:2.5rem}}
