:root{color-scheme:light;--ink:#163d3c;--muted:#526b68;--paper:#f6f5f0;--line:#dce4db;--green:#176653;--blue:#337bbc;--coral:#b84f3c;--gold:#e8b74e;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #c3851f;outline-offset:4px}button{transition:background .15s,transform .15s}button:not(:disabled):active{transform:translateY(1px)}[hidden]{display:none!important}.app{max-width:1160px;padding:28px 40px 14px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:750;font-size:19px;text-decoration:none;letter-spacing:-.6px}.brand small{display:block;font-size:9px;letter-spacing:1.7px;margin-top:4px;font-weight:600}.brand-icon{display:grid;place-content:center;background:var(--ink);color:white;border-radius:13px;width:45px;height:45px;font-size:33px;font-family:Georgia,serif;font-style:italic;position:relative}.brand-icon span{position:absolute;font:16px system-ui;right:6px;top:2px}.quiet{background:transparent;color:var(--muted);padding:10px 12px;border-radius:9px;font-size:13px}.quiet:hover{background:#e7ece4}.progress-row{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--muted)}progress{display:block;width:100%;height:4px;border:0;margin:12px 0 25px;border-radius:9px;background:var(--line)}progress::-webkit-progress-bar{background:var(--line);border-radius:9px}progress::-webkit-progress-value{background:var(--green);border-radius:9px}progress::-moz-progress-bar{background:var(--green)}.lesson{display:grid;grid-template-columns:1.08fr 1fr;gap:50px;align-items:center;min-height:480px}.visual-panel{background:#eaf0e7;border:1px solid #e0e7dc;border-radius:26px;padding:22px 22px 15px;min-width:0;position:relative;text-align:center;overflow:hidden}.visual-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.8px;font-weight:750;text-transform:uppercase}.live-dot{width:7px;height:7px;border-radius:50%;background:#73a184}#visual{display:grid;place-items:center;min-height:325px}.caption{font-size:11px;color:#536963;line-height:1.5;max-width:390px;margin:5px auto 0}.visual-panel #replay{font-size:11px;padding:8px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750;color:var(--green);margin:0 0 18px}h1{font-size:clamp(30px,3.6vw,44px);line-height:1.13;letter-spacing:-1.8px;margin:0 0 20px;font-weight:650;max-width:450px}h1:focus,h2:focus{outline:none}.copy{font-size:17px;line-height:1.7;color:#46615b;margin:0 0 16px;max-width:440px}nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;align-items:center}.primary{background:var(--ink);color:white;border-radius:12px;padding:14px 22px;font-size:14px;font-weight:600}.primary:hover{background:#215a51}.choices{display:grid;gap:9px;margin:20px 0 0}.choice{background:white;border:1px solid #cbd7ca;text-align:left;border-radius:11px;padding:13px 16px;color:var(--ink);line-height:1.4;font-size:14px}.choice:hover{border-color:var(--green);background:#f6faf4}.choice.selected{border-color:var(--green);background:#dcebdc;box-shadow:inset 3px 0 var(--green)}.choice.wrong{border-color:#c38965;background:#fff0e5}.feedback{font-size:14px;line-height:1.6;color:var(--green);margin:12px 0}.feedback:empty{display:none}aside{border-left:3px solid #d6ae55;background:#f1eadb;padding:12px 15px;margin-top:20px;border-radius:0 10px 10px 0}aside h2{font-size:10px;letter-spacing:1px;text-transform:uppercase;margin:0 0 7px;color:#795e2c}aside p{font-size:13px;line-height:1.55;margin:0;color:#605337}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:30px;padding-top:16px;font-size:11px;color:var(--muted)}footer details{max-width:560px;text-align:right}footer details p{text-align:left;line-height:1.7}summary{cursor:pointer}.atom-svg{width:100%;max-width:410px;overflow:visible}.shell{fill:none;stroke:#bdcdbc;stroke-width:1.4}.outer{stroke:#ba9851;stroke-width:2;stroke-dasharray:5 6}.electron circle{fill:var(--blue);stroke:#fff;stroke-width:2}.electron text{fill:white;text-anchor:middle;dominant-baseline:central;font-size:15px;font-family:system-ui}.core{fill:var(--ink)}.core-label{fill:white;font-size:30px;text-anchor:middle;font-weight:650}.core-count{fill:#c9ded6;font-size:11px;text-anchor:middle}.atom-tally{display:flex;gap:9px;justify-content:center;margin-top:-8px;flex-wrap:wrap}.pill{padding:7px 12px;border-radius:30px;background:#fff9;font-size:12px;white-space:nowrap}.pill strong{font-size:15px}.positive{color:var(--coral)}.negative{color:#205a91}.shell-counts{font-size:12px;letter-spacing:2px;margin-top:14px;color:var(--muted)}.sample-photo{width:100%;height:315px;object-fit:cover;border-radius:16px;margin:15px 0 6px}.visual-panel:has(.sample-photo){background:#eaece1}.particle-pair{display:flex;gap:35px;align-items:center;justify-content:center;width:100%;padding:60px 0}.particle{display:grid;place-items:center;width:102px;height:102px;border-radius:50%;color:white;font-size:60px;box-shadow:inset -7px -8px 0 #0001}.particle.plus{background:var(--coral)}.particle.minus{background:var(--blue)}.particle-pair p{font-size:13px;text-align:center;margin-top:20px}.energy-svg{width:100%;max-width:400px}.energy-svg text{font:13px system-ui;fill:var(--ink)}.energy-svg .small{font-size:10px;fill:var(--muted)}.energy-ball{fill:var(--gold);stroke:white;stroke-width:3}.motion-on .energy-ball{animation:energy-slide 2.5s ease-in-out both}.motion-on .arrival{animation:arrive 1.8s ease-out both}.motion-on .leaving{animation:leave 1.8s ease-in both}.motion-on .halo{animation:halo 1.3s ease-out 2}.motion-on .sample-photo{animation:photo-in 1s ease-out both}.motion-on .particle{animation:pop .8s ease-out both}.motion-off .leaving{opacity:0}.leaving{pointer-events:none}.summary-cards{display:grid;gap:14px;width:100%;padding:28px 10px}.summary-card{background:#fff9;padding:18px;border-radius:14px;text-align:left;display:flex;align-items:center;gap:18px}.summary-card strong{font-size:26px;min-width:64px}.summary-card span{font-size:13px;line-height:1.6}.badge{width:180px;height:180px;border-radius:50%;background:var(--ink);color:#f3d798;display:grid;place-content:center;border:9px double #f3d798;box-shadow:0 0 0 14px #dce5d7;font-size:68px}.badge small{font-size:10px;letter-spacing:3px}.finish-actions{display:grid;gap:9px}.restart-warning{font-size:11px;color:var(--muted);line-height:1.5}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;flex-wrap:wrap}dialog{border:1px solid #d1dace;border-radius:24px;padding:32px;max-width:620px;width:calc(100% - 32px);color:var(--ink);background:var(--paper);box-shadow:0 25px 100px #15382f33;max-height:90vh;overflow:auto}dialog::backdrop{background:#143d3b80;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top .eyebrow{margin:0}dialog h2{font-size:27px;line-height:1.25;letter-spacing:-.7px;margin:15px 0}dialog p{line-height:1.7;color:var(--muted)}.exam-progress{font-size:12px;color:var(--muted)}.score{font-size:60px;font-weight:700;color:var(--green)}input{display:block;width:100%;padding:14px;border:1px solid #b6c8bb;border-radius:10px;margin-top:9px;background:white;color:var(--ink)}label{font-size:14px}fieldset{border:0;margin:0;padding:0}legend{font-size:19px;line-height:1.5;margin-bottom:12px;font-weight:600}.certificate{text-align:center;border:4px double #acbfa8;padding:30px 20px;background:#fffef9;margin:20px 0}.certificate .cert-brand{font-size:10px;letter-spacing:3px}.certificate h3{font-family:Georgia,serif;font-size:31px;font-weight:normal;margin:12px 0}.certificate .student{font-family:Georgia,serif;font-size:32px;color:var(--ink);overflow-wrap:anywhere;margin:16px 0}.certificate p{font-size:13px}.certificate .cert-icon{font-size:40px;color:#9c7526}.print-help{font-size:12px}.mini-review{text-align:left;font-size:14px;line-height:1.7}
@keyframes arrive{from{transform:translate(120px,-35px);opacity:0}to{transform:translate(0,0);opacity:1}}@keyframes leave{from{transform:translate(0,0);opacity:1}to{transform:translate(130px,-45px);opacity:0}}@keyframes halo{0%{stroke-opacity:1;stroke-width:2}100%{stroke-opacity:.2;stroke-width:6}}@keyframes energy-slide{from{transform:translate(-215px,-108px)}to{transform:translate(0,0)}}@keyframes pop{from{transform:scale(.7);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes photo-in{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.leaving{opacity:0}}
@media(max-width:760px){.app{padding:20px}.lesson{gap:26px;grid-template-columns:1fr;min-height:0}.visual-panel{max-width:520px;width:100%;margin:auto;padding:16px}.visual-top{font-size:9px}#visual{min-height:220px}.atom-svg{max-width:290px}.sample-photo{height:240px}.particle-pair{padding:30px 0}.energy-svg{max-width:300px}.summary-cards{padding:15px 0;gap:8px}.summary-card{padding:12px}header{margin-bottom:25px}.brand{font-size:17px}.brand small{font-size:7px}.brand-icon{width:38px;height:38px}.teaching{max-width:520px;width:100%;margin:auto}h1{font-size:34px;max-width:none}.copy{font-size:16px;max-width:none}.eyebrow{margin-bottom:10px}nav{margin-top:20px}footer{margin-top:26px}footer details{max-width:65%}.badge{width:140px;height:140px;font-size:50px;margin:35px}.caption{font-size:10px}dialog{padding:23px}.certificate{padding:20px 12px}}
@media print{@page{size:landscape;margin:12mm}body{background:white}.app,noscript{display:none!important}dialog{display:none!important}dialog#exam:has(.certificate){display:block!important;position:static!important;max-height:none;max-width:none;width:100%;padding:0;margin:0;border:0;box-shadow:none;overflow:visible;background:white}#exam>*:not(#exam-body),#exam-body>*:not(.certificate){display:none!important}.certificate{margin:0;padding:12mm;border:5px double #8f9d84;break-inside:avoid;print-color-adjust:exact}.certificate h3{font-size:36px}.certificate .student{font-size:40px}.certificate p{font-size:15px}dialog::backdrop{display:none}}