:root{
  --bg:#f5f2ea; --panel:#fffdf8; --panel2:#f0ece2; --line:#ddd5c5;
  --ink:#1c2331; --dim:#5b6376; --accent:#2f66d6; --accentInk:#fff;
  --e:#2f66d6; --val:#e07a1f; --nuc:#d4543a; --ring:#b9b09c;
  --ok:#23804f; --okbg:#e3f3e9; --bad:#b83a26; --badbg:#fbe6e1; --info:#2f66d6; --infobg:#e6eefc;
  --s:#f6d7d2; --p:#f7ebc4; --d:#d6e3f7; --f:#d8eed8;
  --font:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#12151c; --panel:#1a1e28; --panel2:#232837; --line:#2f3546;
    --ink:#e9ecf2; --dim:#9aa3b5; --accent:#6f9cff; --accentInk:#0b1020;
    --e:#6f9cff; --val:#ffa04d; --nuc:#ff7a5c; --ring:#4b5266;
    --ok:#5fd494; --okbg:#173325; --bad:#ff8a73; --badbg:#3a1d18; --info:#8fb2ff; --infobg:#1b2640;
    --s:#4a2c2a; --p:#473f22; --d:#233450; --f:#243e2a;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45}
button,input,select{font:inherit;color:inherit}
h1,h2{margin:0;line-height:1.15}
.wrap{max-width:1240px;margin:0 auto;padding:18px 16px 40px}
.top{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.top h1{font-size:32px;font-weight:700}
.top p{margin:4px 0 0;color:var(--dim);max-width:620px}
.tabs{display:flex;gap:6px;background:var(--panel2);padding:4px;border-radius:12px}
.tab{border:0;background:none;padding:8px 14px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--dim)}
.tab.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;grid-template-areas:"stage side" "pt pt";gap:16px;align-items:start}
.stagewrap{grid-area:stage;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
#stage{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.hint{margin:0;padding:8px 14px 12px;color:var(--dim);font-size:14px;text-align:center}
.side{grid-area:side;display:flex;flex-direction:column;gap:14px;min-width:0}
.ptable{grid-area:pt}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.card h2{font-size:15px;color:var(--dim);font-weight:600;margin-bottom:10px}
.lite{color:var(--dim)}
.note{margin:8px 0 0;color:var(--dim);font-size:14px}

.elhead{display:flex;align-items:center;gap:12px}
.sym{width:64px;height:64px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:28px;font-weight:700;flex:none}
.elinfo{flex:1;min-width:0}
.elname{font-size:22px;font-weight:700}
.btn.nav{width:36px;height:36px;padding:0;font-size:22px;line-height:1;flex:none}
.count{margin-top:12px;font-weight:600}
.bar{height:8px;border-radius:5px;background:var(--panel2);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:0;background:var(--e);transition:width .25s}
.config{margin-top:10px;font-size:20px}

.shells{width:100%;border-collapse:collapse;font-size:15px}
.shells th{font-weight:600;color:var(--dim);text-align:left;padding:3px 4px;font-size:13px}
.shells td{padding:4px;border-top:1px solid var(--line)}
.shells tr.full td.here{color:var(--ok);font-weight:700}
.shells tr.dimrow{opacity:.5}
.shells td.pm{text-align:right;white-space:nowrap}
.pm button{width:30px;height:30px;padding:0;border-radius:8px;margin-left:4px}

.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:8px 13px;cursor:pointer;font-weight:600}
.btn:hover:not(:disabled){border-color:var(--dim)}
.btn.primary{background:var(--accent);color:var(--accentInk);border-color:var(--accent)}
.btn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}
select{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:7px 10px}
label.chk{display:flex;gap:9px;align-items:center;cursor:pointer;margin-top:12px;font-size:15px}
label.chk input{width:18px;height:18px;accent-color:var(--accent)}
.streak{margin-left:auto}

.feedback{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:15px}
.feedback p{margin:0 0 6px}.feedback p:last-child{margin:0}
.feedback.ok{background:var(--okbg);color:var(--ink);border-left:4px solid var(--ok)}
.feedback.bad{background:var(--badbg);color:var(--ink);border-left:4px solid var(--bad)}
.feedback.info{background:var(--infobg);color:var(--ink);border-left:4px solid var(--info)}
.feedback a{color:var(--accent);font-weight:600}

.whytext{margin-top:12px}
.whytext p{margin:0 0 8px}
.whytext .eq{font-size:24px;font-weight:700}

/* periodic table */
.pthead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.pthead h2{margin:0}
.ptscroll{overflow-x:auto}
.pt{display:grid;grid-template-columns:repeat(18,minmax(40px,1fr));grid-template-rows:repeat(7,auto) 10px auto auto;gap:3px;min-width:760px}
.pc{border:1px solid transparent;border-radius:7px;padding:3px 2px 4px;text-align:center;cursor:pointer;line-height:1.05;position:relative;background:var(--panel2)}
.pc b{display:block;font-size:16px}
.pc span{font-size:11px;color:var(--dim)}
.pc.s{background:var(--s)}.pc.p{background:var(--p)}.pc.d{background:var(--d)}.pc.f{background:var(--f)}
.pc:hover{border-color:var(--dim)}
.pc.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pc.done::after{content:"";position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pc.gap{background:none;cursor:default;font-size:10px;color:var(--dim);display:grid;place-items:center}
.pt.locked .pc:not(.gap){cursor:not-allowed;opacity:.55}
.pt.locked .pc.on{opacity:1}

/* stage svg */
.ringline{fill:none;stroke:var(--ring);stroke-width:1.5}
.ringline.faint{stroke-dasharray:3 5;opacity:.6}
.ringline.full{stroke:var(--ok);stroke-width:2.5}
.ringline.hover{stroke:var(--accent);stroke-width:3}
.hit{fill:none;stroke:transparent;stroke-width:34;cursor:pointer;pointer-events:stroke}
.cap{font-size:13px;fill:var(--dim);font-family:var(--font);text-anchor:middle;pointer-events:none}
.cap.full{fill:var(--ok);font-weight:700}
.nucleus{fill:var(--nuc)}
.nucsym{fill:#fff;font-weight:700;font-size:22px;font-family:var(--font);text-anchor:middle;pointer-events:none}
.nucp{fill:#fff;font-size:12px;font-family:var(--font);text-anchor:middle;pointer-events:none}
.e{transform-box:view-box;transform-origin:320px 320px;transition:transform .35s ease;cursor:grab}
.e circle{fill:var(--e);stroke:var(--panel);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pop .25s ease-out}
.e.val circle{fill:var(--val)}
.e.drag{opacity:.25}
.e.out circle{animation:out .2s ease-in forwards}
.ghost{fill:var(--e);opacity:.9;pointer-events:none}
@keyframes pop{from{transform:scale(0)}60%{transform:scale(1.3)}to{transform:scale(1)}}
@keyframes out{to{transform:scale(0)}}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.photon{fill:none;stroke-width:3;stroke-linecap:round;animation:fly 1.3s ease-out forwards}
@keyframes fly{from{stroke-dashoffset:var(--len);opacity:1}70%{opacity:1}to{stroke-dashoffset:0;opacity:0}}

/* why view */
.box{fill:var(--panel);stroke:var(--ring);stroke-width:1.5}
.arrow{stroke:var(--e);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.whyrow{animation:fadein .35s ease-out both}
.whyrow.unused .box{stroke-dasharray:3 3}
.whyrow.unused .arrow{opacity:.35}
.wlab{font-family:var(--font);font-size:16px;fill:var(--ink);font-weight:600}
.wsub{font-family:var(--font);font-size:12px;fill:var(--dim)}
.wbig{font-family:var(--font);font-size:30px;font-weight:700;fill:var(--ink);text-anchor:middle}
.wmid{font-family:var(--font);font-size:16px;fill:var(--dim);text-anchor:middle}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;grid-template-areas:"stage" "side" "pt"}
  .top h1{font-size:27px}
}