.learn-toolbar,.learn-page-atom{max-width:1400px;margin:18px auto;padding:16px;background:var(--bg-panel,#0d1117);border:1px solid var(--border,#394657);border-radius:12px;color:var(--text,#e6edf3)}
.learn-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}.learn-controls label{display:flex;flex-direction:column;gap:4px;max-width:100%}
.learn-toolbar button,.learn-tray button,.learn-dialog button,.learn-atom button,#learning-guide button,.learn-toolbar select,.learn-dialog select{font:inherit;font-size:14px;min-height:44px;padding:8px 12px;border:1px solid #748499;border-radius:7px;color:#e6edf3;background:#17232f;cursor:pointer;max-width:100%}
.learn-dialog button:hover,.learn-toolbar button:hover,.learn-atom button:hover{background:#263e51}.learn-dialog button:disabled,.learn-tray button:disabled,.learn-atom button:disabled{opacity:.45;cursor:not-allowed}
[class*="learn"] button:focus-visible,[class*="learn"] a:focus-visible,[class*="learn"] select:focus-visible,.learn-scroll:focus-visible,.learn-graph g:focus-visible{outline:3px solid #ffcc66;outline-offset:3px}
[class*="learn"] [aria-pressed="true"]{border:2px solid #80e2ed;background:#234254}
.learn-tray{position:sticky;bottom:0;z-index:150;padding:12px 20px;background:#101d2bf5;color:#e6edf3;border-top:2px solid #80e2ed;box-shadow:0 -3px 20px #0005;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.learn-tray[hidden]{display:none}
.learn-selected{outline:3px solid #fff!important;outline-offset:-3px}.learn-selected::after{content:'✓ ' attr(data-selection);position:absolute;right:0;top:0;background:#102a3b;color:#fff;font-size:11px;font-weight:bold;padding:2px;z-index:2}
.learn-status{position:fixed;bottom:110px;left:12px;z-index:10000;background:#17232f;color:#fff;max-width:90vw;padding:8px;border-radius:8px}.learn-status:empty{display:none}
.learn-dialog{position:fixed;inset:0;margin:auto;width:min(1280px,96vw);max-width:96vw;height:90dvh;max-height:90dvh;padding:20px;background:var(--bg-panel,#0d1117);color:var(--text,#e6edf3);border:1px solid #748499;border-radius:14px;overflow:auto;line-height:1.7}.learn-dialog::backdrop{background:#000b}.learn-dialog-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:sticky;top:-20px;z-index:5;background:#0d1117;padding:12px 0}.learn-dialog-head h2{flex:1;min-width:130px;font-size:20px}
.learn-dialog p,.learn-atom p{margin:10px 0;overflow-wrap:anywhere}.learn-dialog a,.learn-atom a{color:#80e2ed;text-decoration:underline}.learn-scroll{overflow:auto;max-width:100%;margin:14px 0}.learn-table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px;line-height:1.6}.learn-table th,.learn-table td{padding:12px;border:1px solid #394657;min-width:160px;max-width:320px;vertical-align:top;overflow-wrap:anywhere}.learn-table th:first-child{position:sticky;left:0;background:#17232f;z-index:1;min-width:120px;max-width:180px}.learn-table caption{text-align:left;padding:8px}.learn-extreme{display:block;font-weight:bold;color:#ffcc66}
.learn-atoms{display:flex;gap:16px;overflow-x:auto}.learn-atoms>.learn-atom{flex:0 0 300px}.learn-atom{padding:16px;border:1px solid #526478;border-radius:10px;margin:16px 0;min-width:0;line-height:1.7}.learn-atom h3{font-size:18px}.learn-model{text-align:center}.learn-shell{width:100%;max-width:300px;height:auto;color:#b7c9db}.learn-shell text,.learn-graph text{fill:currentColor;font:12px sans-serif}.learn-shell text{font-size:17px;fill:#fff}.learn-orbitals{display:flex;flex-wrap:wrap;gap:12px}.learn-orbital>span{display:flex}.learn-orbital b{display:inline-block;border:1px solid #748499;min-width:25px;height:32px;text-align:center;color:#80e2ed}.learn-warning{border-left:4px solid #ffcc66;padding-left:12px}
.learn-lewis{position:relative;display:inline-block;margin:24px;font-size:24px;min-width:32px;text-align:center}.learn-lewis i{position:absolute;font-style:normal;left:50%;top:50%;transform:rotate(calc(var(--side)*90deg)) translate(var(--offset),-27px);font-size:21px;color:#ffcc66}
.learn-model.animate .learn-electron{animation:learn-appear .3s both;animation-delay:var(--delay)}.learn-model.paused .learn-electron{animation-play-state:paused}@keyframes learn-appear{from{opacity:0}to{opacity:1}}
.learn-gradient{height:16px;max-width:480px;background:linear-gradient(90deg,hsl(265 65% 27%),hsl(222 65% 43%),hsl(180 65% 59%));border:1px solid #fff}.learn-heat-scroll{overflow:auto}.learn-heat{display:grid;grid-template-columns:repeat(18,minmax(44px,1fr));gap:3px;min-width:900px;margin:16px 0}.learn-heat button{padding:3px;min-height:49px;font-size:12px;color:white;border-color:#b7c9db}.learn-heat small{display:block;font-size:10px}.learn-missing{background:repeating-linear-gradient(135deg,#253342 0,#253342 4px,#485464 4px,#485464 6px)!important}.learn-chosen{outline:3px solid #ffcc66;outline-offset:-3px}.learn-graph{width:100%;height:330px;min-width:600px;display:block;background:#101923;color:#e6edf3}#learn-graph{overflow:auto}.learn-graph g{cursor:pointer}.learn-sources{margin:20px 0}.learn-sources a{display:inline-block;padding:8px}.learn-toolbar summary,.learn-dialog summary{cursor:pointer;padding:8px;min-height:44px}
#infoPanel{overflow:auto;max-height:90dvh}#infoPanel>.learn-atom{margin:12px}
@media(max-width:600px){.learn-dialog{padding:12px;width:98vw;max-width:98vw}.learn-dialog-head{top:-12px}.learn-table th:first-child{min-width:100px;font-size:12px}.learn-table td{min-width:170px}.learn-toolbar{margin:12px 8px}.learn-tray{padding:8px;gap:4px}.learn-tray button{padding:6px 10px}.learn-dialog h2{font-size:17px}.learn-page-atom{margin:12px 0}.learn-atom{padding:10px}}
@media(prefers-reduced-motion:reduce){.learn-model.animate .learn-electron{animation:none!important}}
.learn-table a{display:inline-flex;min-height:44px;align-items:center}.learn-graph{min-width:800px}
.learn-citation{max-width:1400px;margin:16px auto;padding:12px 16px;border:1px solid #526478;border-radius:8px;background:var(--bg-panel,#0d1117);color:var(--text,#e6edf3);font-size:13px;line-height:1.7}.learn-citation p{margin:4px 0}.learn-citation a{color:#80e2ed;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}.learn-property-source{font-size:13px}.learn-citation a:focus-visible{outline:3px solid #ffcc66;outline-offset:3px}
/* Surface palette only. Preserve layout, interactions and scientific color scales. */
.learn-toolbar,.learn-page-atom,.learn-dialog{
 background:linear-gradient(125deg,#00d4ff09,#a855f708),var(--bg-panel,#0d1117);
 border-color:#00d4ff55;
 box-shadow:0 0 18px #00d4ff0a,inset 0 1px #00d4ff12;
}
.learn-controls button,.learn-dialog-head button,#learning-guide button,.learn-toolbar select,.learn-dialog select{
 background:linear-gradient(135deg,#00d4ff14,#a855f712),var(--bg-panel,#0d1117);
 color:var(--text,#e6edf3);border-color:#00d4ff80;
}
.learn-controls button:hover:not(:disabled),.learn-dialog-head button:hover:not(:disabled),#learning-guide button:hover:not(:disabled){
 background:linear-gradient(135deg,#00d4ff30,#a855f725),var(--bg-panel,#0d1117);
 border-color:var(--accent-cyan,#00d4ff);box-shadow:0 0 12px #00d4ff33;
}
[class*="learn"] button[aria-pressed="true"]{
 color:#9cffe0;border-color:var(--accent-green,#00ff88);
 background:linear-gradient(135deg,#00ff8825,#00d4ff20),var(--bg-panel,#0d1117);
 box-shadow:0 0 12px #00ff8820;
}
.learn-dialog-head{background:var(--bg-panel,#0d1117)}
.learn-dialog-head h2,.learn-atom h3,.learn-toolbar summary,.learn-dialog summary{color:var(--accent-cyan,#00d4ff)}
.learn-dialog select option{background:var(--bg-panel,#0d1117);color:var(--text,#e6edf3)}
.learn-tray{background:#0b171ff5;border-top-color:var(--accent-cyan,#00d4ff);box-shadow:0 -3px 20px #00d4ff18}
.learn-atom,.learn-citation{border-color:#00d4ff40}
.learn-table th,.learn-table td{border-color:#00d4ff30}
.learn-table th{color:#82eaff;background:#0d202b}
.learn-table th:first-child{background:#0d202b}
.learn-graph{background:#0b141e}
/* One navigation area: page views above, learning tools below. */
.view-switcher.learn-navigation{flex-wrap:wrap;width:390px;max-width:calc(100vw - 30px);border-radius:18px}
.learn-navigation>#learning-toolbar{flex-basis:100%;width:100%;max-width:none;margin:0;padding:5px 0 0;border:0;border-top:1px solid #00d4ff40;border-radius:0;background:none;box-shadow:none}
.learn-navigation #learning-toolbar>.learn-controls{margin:0;gap:5px}
.learn-navigation #learning-toolbar>.learn-controls button{flex:1;font-size:12px;padding:6px 10px;border-radius:20px}
.learn-navigation #learning-toolbar>details>summary{font-size:11px;min-height:28px;padding:4px 10px}
.learn-navigation #learning-toolbar>details[open]>.learn-controls{position:absolute;left:0;top:100%;width:min(440px,calc(100vw - 30px));max-height:50dvh;overflow:auto;padding:12px;background:var(--bg-panel,#0d1117);border:1px solid #00d4ff80;border-radius:12px;box-shadow:0 8px 24px #0008}
@media(min-width:769px){body:has(.learn-navigation) .container>header{padding-top:115px}}
@media(max-width:768px){.view-switcher.learn-navigation{position:relative;top:auto;left:auto;width:100%;max-width:100%;justify-content:center}.learn-navigation>.view-btn{flex:1;text-align:center;padding:8px 5px}.learn-navigation #learning-toolbar>.learn-controls button{padding:6px;font-size:11px}.learn-navigation #learning-toolbar>details[open]>.learn-controls{width:100%}}