:root{--paper:#f7f6f1;--ink:#173e3b;--muted:#60756e;--line:#d7e1d6;--green:#196751;--gold:#deb14e;--blue:#347fb4;--purple:#8456b3;--orange:#bb6924;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #bd8823;outline-offset:4px}button,input{border:1px solid var(--line);border-radius:11px}button{transition:background .15s}button:not(:disabled):hover{filter:brightness(.97)}.app{max-width:1250px;margin:auto;padding:30px 38px 16px}header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:36px}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-weight:750;font-size:20px;letter-spacing:-.6px}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:4px;font-weight:500}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--ink);color:white;font:italic 35px Georgia;position:relative}.brand-mark sup{position:absolute;right:7px;top:3px;font:16px system-ui}.preferences{display:flex;gap:5px}.quiet{background:transparent;border:0;padding:9px 10px;font-size:12px;color:var(--muted)}.progress-line{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.7px;color:var(--muted)}progress{display:block;width:100%;height:4px;border:0;margin:13px 0 28px;background:var(--line)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--green)}progress::-moz-progress-bar{background:var(--green)}main:focus{outline:none}.layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;min-height:530px}.visual-card{background:#eaf0e5;border:1px solid #dfe7dc;border-radius:25px;padding:22px;min-width:0;text-align:center}.visual-kicker{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}.visual-kicker:after{content:'●';color:#72a083}.visual-wrap{min-height:315px;display:grid;place-items:center}.visual-wrap svg{width:100%;max-height:385px;overflow:visible}.caption{font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0 0}.eyebrow{color:var(--green);font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 13px}h1{font-size:clamp(28px,3.3vw,42px);line-height:1.15;font-weight:650;letter-spacing:-1.5px;margin:0 0 19px}h2{font-size:24px;letter-spacing:-.5px}p{line-height:1.7}.prompt{font-size:17px;line-height:1.7;color:#46645d;margin:0 0 15px}.audio-row{display:flex;align-items:center;gap:9px;margin-bottom:15px;min-height:32px}.audio-row button{font-size:12px;padding:8px 11px;background:#e8ede4}.audio-status{font-size:10px;line-height:1.5;color:var(--muted)}.choices{display:grid;gap:9px}.choice{display:flex;gap:12px;align-items:center;padding:14px 16px;background:#fff;text-align:left;line-height:1.45;font-size:14px;min-height:50px}.choice .letter{font-size:11px;color:var(--muted);background:#f0f3ed;border-radius:6px;padding:3px 6px}.choice.selected{border-color:var(--green);box-shadow:inset 3px 0 var(--green);background:#e8f1e6}.choice.wrong{border-color:#b57448;background:#fff3e7}.primary,.secondary{padding:13px 20px;font-size:14px;font-weight:600}.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.secondary{background:white}.actions{display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:23px}.practice-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px}.feedback{border-left:3px solid var(--gold);background:#f2ecdc;padding:13px 16px;border-radius:0 12px 12px 0;margin-top:18px;font-size:14px;line-height:1.65}.feedback.correct{background:#e5efdf;border-color:var(--green)}.feedback strong{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}.feedback p{margin:0}.feedback .quiet{padding:6px 0}.word-current{background:#f5d77b;border-radius:3px;color:#163d3c}.shell-legend{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:11px}.shell-legend span:before{content:'●';margin-right:4px;color:var(--dot)}.counts{display:flex;justify-content:center;gap:14px;margin:10px 0}.count-pill{padding:8px 13px;background:#fff9;border-radius:25px;font-size:13px}.charge-meter{margin:16px auto 0;padding:12px 20px;max-width:280px;border-radius:13px;background:#d7e6cc}.charge-meter strong{font-size:30px;margin-right:8px}.electron-controls{display:flex;gap:10px;flex-wrap:wrap}.electron-controls button{flex:1;min-width:120px;padding:13px;background:white}.model-note{font-size:10px;line-height:1.5;color:var(--muted);margin-top:12px}.table-scroll{overflow:auto;width:100%;padding:5px}.periodic-table{display:grid;grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(10,29px);gap:3px;min-width:520px;width:100%}.element{padding:0;border:1px solid #bbccbd;border-radius:4px;background:#fbfcf7;color:var(--ink);font-size:10px;position:relative;min-height:29px}.element small{font-size:6px;position:absolute;left:2px;top:1px;opacity:.6}.element .symbol{display:block;margin-top:5px}.element.target{border:2px solid #bd8823;background:#fff3d2;box-shadow:0 0 0 2px #e1ba6250}.element.selected{border:2px solid var(--ink)}.element.metal.revealed{background:#cadfc9}.element.nonmetal.revealed{background:#f3d9b7}.element.metalloid.revealed{background:#d8cbe9}.table-key{font-size:10px;display:flex;justify-content:center;gap:12px;margin-top:10px}.selection-label{min-height:25px;font-size:13px;margin:12px 0 0}.photo{width:100%;max-height:330px;object-fit:cover;border-radius:14px}.home{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:60px;min-height:535px}.home h1{font-size:clamp(40px,5vw,62px);max-width:600px}.home .prompt{max-width:420px}.home-art{position:relative;padding:35px;border:1px solid var(--line);border-radius:28px;background:#eaf0e5}.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-4deg)}.hero-tile{aspect-ratio:1;border:1px solid #bbd0b8;border-radius:15px;background:#fbfcf7;display:grid;place-content:center;text-align:center}.hero-tile b{font-size:42px;font-weight:600}.hero-tile small{font-size:10px;letter-spacing:1px}.hero-tile:nth-child(2){background:#dfd2ed;transform:translateY(-12px)}.hero-tile:nth-child(3){background:#efdabb}.hero-charge{background:var(--ink);color:#fff;border-radius:18px;padding:20px;text-align:center;margin-top:30px;font-size:24px;letter-spacing:4px}.hero-caption{text-align:center;font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:22px}.overview{max-width:790px;margin:40px auto 55px}.overview h1{max-width:670px}.skill-list{display:grid;gap:9px;margin:26px 0}.skill-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 18px;background:white;border:1px solid var(--line);border-radius:12px;font-size:14px}.skill-row span{font-size:12px;color:var(--muted)}.score{font-size:65px;font-weight:650;letter-spacing:-3px}.review-list{display:grid;gap:12px}.review-item{background:white;border:1px solid var(--line);border-radius:12px;padding:15px 18px}.review-item p{margin:7px 0;font-size:14px}.text-muted{font-size:12px;color:var(--muted)}.cert-form{max-width:520px}.cert-form label{display:block;margin:20px 0 8px;font-size:14px}input{padding:13px;background:white;width:100%}.certificate{border:5px double #829b79;background:#fffef8;text-align:center;padding:40px 25px;max-width:790px;margin:auto}.certificate h2{font:38px Georgia,serif}.certificate .student{font:34px Georgia,serif;overflow-wrap:anywhere}.certificate .stamp{font-size:13px;letter-spacing:3px;color:var(--green)}.certificate p{font-size:14px}.notebook-list{line-height:1.8}footer{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:18px;margin-top:35px;font-size:11px;color:var(--muted)}footer details{max-width:520px;margin-left:auto}footer p{font-size:12px}summary{cursor:pointer}dialog{max-width:480px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:22px;padding:28px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#173e3b88}
.animate .stretch{transform-box:fill-box;transform-origin:center;animation:stretch 2.5s ease-in-out both}.animate .fracture{animation:fracture 2.5s ease-in-out both}.animate .shine{animation:shine 2.5s ease-in-out both}.animate .current{animation:current 2.5s linear both}.animate .heat-flow{animation:heat 3s ease-in-out both}.animate .electron-new{animation:electron-in 1.3s ease-out both}.animate .press{animation:press 2.5s ease-in-out both}.animate .chip-glow{animation:shine 2.5s ease-in-out both}@keyframes stretch{from{transform:scaleX(.6) scaleY(1.6)}to{transform:scaleX(1.1) scaleY(.7)}}@keyframes fracture{from{transform:translate(0,0)}to{transform:translate(18px,18px) rotate(5deg)}}@keyframes shine{0%{opacity:.2}60%{opacity:1}100%{opacity:.8}}@keyframes current{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}@keyframes heat{from{opacity:.05}to{opacity:1}}@keyframes electron-in{from{opacity:0;transform:translate(65px,-25px)}to{opacity:1;transform:translate(0,0)}}@keyframes press{from{transform:translateY(-30px)}to{transform:translateY(0)}}.motion-off *{animation:none!important}.teacher-paused .visual-wrap *{animation-play-state:paused!important}
@media(max-width:900px){.app{padding:22px}.layout{grid-template-columns:1fr;gap:26px;min-height:0}.visual-card{max-width:650px;width:100%;margin:auto}.teaching{max-width:650px;width:100%;margin:auto}.visual-wrap{min-height:240px}.visual-wrap svg{max-height:300px}.home{gap:25px;grid-template-columns:1fr;max-width:650px;margin:auto}.home-art{order:2;max-width:460px;width:100%;margin:10px auto}.home h1{font-size:44px}.overview{margin:28px auto}header{margin-bottom:25px}.preferences{flex-direction:column;gap:0}.brand{font-size:17px}.quiet{font-size:11px}footer{flex-wrap:wrap}footer details{max-width:100%;margin:0}.skill-row{align-items:flex-start}.photo{max-height:260px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{@page{size:landscape;margin:15mm}body{background:white}.app{max-width:none;padding:0}.app>header,.app>.progress-line,.app>progress,footer,dialog,noscript{display:none!important}#stage>*:not(.certificate){display:none!important}.certificate{display:block!important;max-width:none;border:5px double #829b79;break-inside:avoid;padding:18mm;print-color-adjust:exact}}
.electron-leaving{opacity:0;pointer-events:none}.animate .electron-leaving{animation:electron-out 1.3s ease-in both}@keyframes electron-out{from{opacity:1;transform:translate(0,0)}to{opacity:0;transform:translate(65px,-25px)}}
@media(max-width:1100px){.layout:has(.periodic-table){grid-template-columns:1fr;gap:26px;min-height:0}.layout:has(.periodic-table) .visual-card,.layout:has(.periodic-table) .teaching{max-width:650px;width:100%;margin:auto}.table-scroll{max-width:100%}}