@font-face{font-family:KG The Fighter;src:url(/fonts/KGTheFighter.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{font-family:Trebuchet MS,Avenir Next,sans-serif;color:#334265;background:#d5ecef;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #334265;--ink-soft: #6e7796;--accent: #2b3468;--teal: #15c8c5;--shadow: 0 8px 0 rgba(43, 52, 104, .1)}*{box-sizing:border-box}html,body,#root{width:100%;max-width:100%;overflow-x:hidden}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit}button:not(:disabled){cursor:pointer}#root,.app-shell,.lesson-stage{width:100%;max-width:100%;min-height:100vh}.lesson-stage{position:relative;overflow-x:hidden;padding:1.4rem clamp(1rem,3vw,3rem) 2rem;background:radial-gradient(circle at 12% 10%,rgba(255,255,255,.7),transparent 18rem),radial-gradient(circle at 88% 82%,rgba(255,255,255,.35),transparent 22rem),#d5ecef}.app-header{width:min(74rem,100%);margin:0 auto 1rem;position:relative;display:grid;place-items:center;align-items:center;min-height:3.25rem;padding:0 5.5rem}.app-header h1{margin:0;color:var(--accent);font-size:clamp(1.45rem,3vw,2.15rem);line-height:1.05;text-align:center;overflow-wrap:anywhere}.tips-button{position:absolute;right:0;top:50%;transform:translateY(-50%);border:3px solid rgba(43,52,104,.14);border-radius:999px;padding:.65rem 1.3rem;background:#ffffffa8;box-shadow:0 5px #2b346817;color:#5b6288;font-weight:800}.tips-button.active{background:#fff;border-color:#15c8c58c}.mode-selector{width:min(56rem,100%);margin:0 auto 1rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.mode-card{position:relative;min-width:0;min-height:3.2rem;border:0;border-radius:.8rem;padding:.4rem .7rem;display:flex;align-items:baseline;justify-content:center;gap:.4rem;background:#ffffffd6;box-shadow:var(--shadow);color:var(--accent);text-align:left;transition:transform .15s ease,background .15s ease}.mode-card:hover{transform:translateY(-2px)}.mode-card.active{background:linear-gradient(180deg,#c0f4a8,#9ce782)}.mode-symbol{flex:0 0 auto;display:inline-flex;align-items:baseline;font-size:1.45rem;font-weight:900;line-height:1}.fighter-glyph{font-family:KG The Fighter,cursive;font-weight:400}.quantum-subscript{margin-left:.04em;font-size:.7em;transform:translateY(.24em)}.mode-symbol-n,.mode-symbol-ml>span:first-child,.mode-symbol-ms>span:first-child{font-family:Lato,sans-serif;font-weight:400}.mode-symbol-ml .quantum-subscript,.mode-symbol-ms .quantum-subscript{-webkit-text-stroke:.55px currentColor;paint-order:stroke fill}.mode-label{min-width:0;font-size:.94rem;font-weight:800;line-height:1.05;overflow-wrap:anywhere}.tip-bubble{width:min(46rem,100%);margin:0 auto 1rem;border-radius:1.1rem;padding:.8rem 1rem;display:flex;justify-content:center;gap:.55rem;background:#fffffff0;box-shadow:var(--shadow);color:var(--ink-soft)}.tip-bubble strong{color:var(--accent)}.activity-panel{width:min(74rem,100%);min-width:0;margin:0 auto;padding:clamp(1.15rem,2.5vw,2rem)}.activity-heading{text-align:center}.activity-heading h2{margin:0;color:var(--ink);font-size:clamp(1.75rem,4vw,2.85rem);overflow-wrap:anywhere}.activity-instruction{margin:.45rem 0 0;color:var(--ink-soft);font-size:1.05rem}.matching-workspace{min-width:0;margin-top:1.25rem;display:grid;gap:1rem}.principal-workspace{min-width:0;margin-top:1.15rem;display:grid;gap:1rem}.periodic-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch;padding:.2rem .15rem .55rem;scrollbar-color:rgba(43,52,104,.28) transparent}.periodic-table{width:100%;min-width:60rem;display:grid;gap:.28rem}.period-row{width:100%;min-width:0;border:0;border-radius:.7rem;padding:.18rem;display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:.38rem;background:transparent;color:var(--accent);transition:background .15s ease,transform .15s ease}.period-row:not(:disabled):hover,.period-row.ready{background:#ffffff80;transform:translateY(-1px)}.period-row.incorrect{animation:incorrect-shake .36s ease;background:#ffd0d8d1}.period-number{position:sticky;left:.18rem;z-index:2;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 3px #2b34681a;font-size:1rem;font-weight:900}.period-cells{display:grid;grid-template-columns:repeat(32,minmax(0,1fr));gap:.13rem}.period-tile,.period-gap{aspect-ratio:1 / 1;min-width:0;display:grid;place-items:center}.period-tile{border:2px solid rgba(43,52,104,.18);border-radius:.22rem;background:#ffffffeb;box-shadow:0 2px #2b346814}.distributed-sphere{width:var(--sphere-size);height:var(--sphere-size);max-width:82%;max-height:82%;object-fit:contain}.principal-sphere-tray{min-height:5.7rem;padding:.65rem;gap:.45rem}.principal-sphere-tray .piece-chip.visual-piece{width:6.1rem;height:4.35rem}.principal-sphere-tray .sphere-visual{height:4rem}.target-grid{min-width:0;display:grid;grid-template-columns:repeat(var(--target-columns),minmax(0,1fr));gap:.75rem}.target-card{position:relative;min-width:0;min-height:10.6rem;border:3px solid rgba(43,52,104,.08);border-radius:1.45rem;padding:.7rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;background:#ffffffe6;box-shadow:0 6px #2b346814;color:var(--accent);transition:transform .15s ease,background .15s ease,border-color .15s ease}.target-card:not(:disabled):hover,.target-card.ready{border-color:#15c8c58f;transform:translateY(-2px)}.target-card.correct{border-color:#54a74747;background:linear-gradient(180deg,#d4f8bf,#b7ef92)}.target-card.incorrect{animation:incorrect-shake .36s ease;background:linear-gradient(180deg,#ffe5ea,#ffd0d8);border-color:#ae4d5f3d}.target-label{font-size:1.35rem;font-weight:900}.target-label sub{position:relative;bottom:-.18em;font-size:.7em;line-height:0}.target-helper{color:var(--ink-soft);font-size:.86rem;font-weight:700}.placed-answer{min-width:2.5rem;border-radius:999px;padding:.4rem .7rem;background:#ffffffe0;color:var(--accent);font-size:1.15rem;font-weight:900;box-shadow:0 4px #2b346814}.placed-answer.visual-answer{width:6rem;height:5rem;padding:.15rem}.piece-tray{min-width:0;min-height:6.7rem;border-radius:1.45rem;padding:.9rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.65rem;background:#ffffffe6;box-shadow:0 6px #2b346814}.tray-label{flex-basis:100%;margin:0;text-align:center;color:var(--ink-soft);font-size:.83rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.piece-chip{min-width:4.25rem;min-height:3.5rem;border:3px solid transparent;border-radius:1rem;padding:.65rem 1rem;background:linear-gradient(180deg,#fff,#edf2ff);box-shadow:0 5px #2b34681f;color:var(--accent);font-size:1.15rem;font-weight:900;transition:transform .15s ease,border-color .15s ease}.piece-chip:hover{transform:translateY(-2px)}.piece-chip.selected{border-color:#15c8c5b8;background:#efffff}.piece-chip.visual-piece{width:8.4rem;height:5.2rem;padding:.1rem .35rem}.tray-complete{margin:0;color:#397545;font-weight:900}.feedback-line{min-height:1.4rem;margin:0;text-align:center;color:var(--ink-soft);font-weight:800}.feedback-line.error{color:#a34f5e}.visual{width:min(100%,7.5rem);height:6rem;overflow:visible}.sphere-visual{height:7.1rem}.supplied-sphere{display:grid;place-items:center}.supplied-sphere img{width:var(--sphere-scale);height:var(--sphere-scale);object-fit:contain}.principal-sphere-tray .sphere-level-7 img{transform:translateY(-.35rem)}.orbital-image{width:min(100%,8.2rem);height:7.2rem;object-fit:contain}.p-orientation-image{object-fit:contain;transform-origin:center}.p-orientation-horizontal{transform:rotate(90deg)}.p-orientation-depth{transform:rotate(-45deg)}.spin-image{object-fit:contain;transform-origin:center}.spin-down{transform:rotate(180deg)}.piece-chip .visual,.placed-answer .visual{width:100%;height:100%}.progress-wrap{margin:1rem auto 0;display:grid;justify-items:center;gap:.45rem}.progress-label{margin:0;color:var(--ink-soft);font-size:.88rem;font-weight:800}.progress-rack{min-width:8rem;border-radius:999px;padding:.48rem .8rem;display:flex;justify-content:center;gap:.38rem;background:#ffffffad;box-shadow:inset 0 0 0 1px #333e5a14}.test-tube{width:1.45rem;height:2.65rem;display:flex;align-items:flex-end;justify-content:center}.test-tube-glass{position:relative;width:1.08rem;height:2.25rem;border:2px solid rgba(51,62,90,.34);border-top-width:.28rem;border-radius:.4rem .4rem .7rem .7rem;background:#ffffff75;overflow:hidden}.tube-liquid{position:absolute;inset:auto .08rem .08rem;height:0;border-radius:.16rem .16rem .5rem .5rem;background:linear-gradient(180deg,#93ece9,#34cfca);transition:height .24s ease}.test-tube.filled .tube-liquid{height:67%}.tube-bubble{position:absolute;border-radius:50%;background:#ffffffbf}.tube-bubble.one{width:.22rem;height:.22rem;left:.18rem;bottom:.3rem}.tube-bubble.two{width:.16rem;height:.16rem;right:.16rem;bottom:.68rem}.tube-bubble.three{width:.2rem;height:.2rem;left:.36rem;bottom:1rem}.success-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;overflow:hidden;padding:1rem;background:linear-gradient(180deg,#16d4d1f0,#12bebcfa)}.success-copy{position:relative;z-index:2;width:min(28rem,100%);border-radius:2rem;padding:2rem;display:grid;justify-items:center;gap:.75rem;background:#fffffff5;box-shadow:0 12px #2b346824;text-align:center}.success-check{width:7rem;height:7rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#d4f8bf,#b7ef92);color:var(--accent);font-size:3.8rem;font-weight:900}.success-copy h2{margin:0;color:var(--accent);font-size:2rem}.success-copy p{margin:0;color:var(--ink-soft);font-size:1.05rem}.molecule-burst{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.molecule{position:absolute;left:50%;top:50%;width:2.9rem;height:2.9rem;animation:float-molecule var(--duration) cubic-bezier(.16,.84,.18,1) infinite;animation-delay:var(--delay)}.molecule .cluster{position:absolute;width:.9rem;height:.9rem;border-radius:50%;box-shadow:inset -.16rem -.16rem .24rem #0000001f,inset .14rem .14rem .22rem #ffffff73}.cluster-a{left:.4rem;top:1.1rem;background:#f3d20d}.cluster-b{left:1.1rem;top:.5rem;background:#f3f7ff}.cluster-c{left:1.65rem;top:1.15rem;background:#6d85f2}@keyframes incorrect-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes float-molecule{0%{transform:translate(-50%,-50%) scale(.55);opacity:0}16%{opacity:1}to{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--rotation)) scale(var(--scale));opacity:.94}}@media (max-width: 960px){.mode-selector{grid-template-columns:repeat(2,minmax(0,1fr))}.target-grid{grid-template-columns:repeat(min(var(--target-columns),4),minmax(0,1fr))}}@media (max-width: 620px){.lesson-stage{padding:.9rem .72rem 1.5rem}.app-header{min-height:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}.app-header h1{width:100%;font-size:1.16rem;line-height:1.15}.tips-button{position:static;transform:none;padding:.45rem .85rem}.mode-selector{gap:.55rem}.mode-card{min-height:2.85rem;border-radius:.75rem;padding:.35rem .55rem}.mode-label{font-size:.8rem}.mode-symbol{font-size:1.3rem}.activity-panel{padding:.9rem .35rem 1rem}.activity-heading h2{font-size:clamp(1.45rem,7vw,1.75rem);line-height:1.08}.activity-instruction{margin-top:.38rem;font-size:.94rem;line-height:1.3}.principal-workspace,.matching-workspace{margin-top:.9rem;gap:.75rem}.periodic-table{min-width:50rem}.period-row{grid-template-columns:1.8rem minmax(0,1fr);gap:.28rem}.period-number{width:1.8rem;height:1.8rem;font-size:.9rem}.principal-sphere-tray{padding:.6rem .45rem;gap:.4rem}.principal-sphere-tray .piece-chip.visual-piece{width:5rem;height:3.9rem}.target-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.target-card{min-height:8.75rem;border-radius:1.1rem;padding:.55rem}.piece-tray{min-height:5.8rem;border-radius:1.1rem;padding:.7rem .5rem;gap:.5rem}.piece-chip{min-height:3.1rem;padding:.55rem .75rem}.piece-chip.visual-piece{width:7.2rem;height:4.7rem}.placed-answer.visual-answer{width:5rem;height:4.2rem}.sphere-visual{height:6rem}.progress-wrap{margin-top:.7rem}.tip-bubble{flex-direction:column;align-items:center;gap:.25rem;padding:.7rem .8rem;font-size:.93rem;text-align:center}.success-copy{padding:1.5rem 1rem;border-radius:1.5rem}.success-check{width:5.5rem;height:5.5rem;font-size:3rem}}@media (max-width: 380px){.lesson-stage{padding-inline:.55rem}.mode-selector{gap:.45rem}.mode-card{padding-inline:.4rem;gap:.25rem}.mode-label{font-size:.75rem}.mode-symbol{font-size:1.22rem}.activity-panel{padding-inline:.2rem}.target-grid{gap:.5rem}.target-card{min-height:8.25rem;padding-inline:.4rem}.target-helper{font-size:.8rem}.piece-chip.visual-piece{width:6.5rem;height:4.4rem}.principal-sphere-tray .piece-chip.visual-piece{width:4.6rem;height:3.7rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}