:root{color-scheme:dark;font-family:Segoe UI,system-ui,sans-serif;color:#dce7ef;background:#0c121a}*{box-sizing:border-box}body{margin:0}header{padding:24px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #28323e}.eyebrow{font-size:10px;letter-spacing:2px;color:#75d9cd}h1{font-size:25px;margin:5px 0}h1 span{font-weight:400;color:#8092a6;font-size:17px}h2{font-size:17px;margin:0 0 14px}p{font-size:13px;line-height:1.65;color:#acbecd}main{display:grid;grid-template-columns:260px 1fr}aside{padding:25px;border-right:1px solid #28323e}label{display:block;font-size:12px;color:#afbfce;margin-bottom:17px}select{display:block;width:100%;margin-top:7px;padding:9px;background:#18232f;color:#edf4fb;border:1px solid #334455;border-radius:6px}button{background:#1c2c39;color:#ddf6f1;border:1px solid #385162;padding:9px 13px;border-radius:6px;cursor:pointer}button:hover{background:#2e4857}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #6ce0ce;outline-offset:3px}hr{border:0;border-top:1px solid #28323e;margin:24px 0}.muted{font-size:11px;color:#8699ac}.check{display:flex;align-items:center;gap:7px}.presets{display:flex;flex-wrap:wrap;gap:7px}.presets button{font-size:11px}input[type=range]{width:100%;accent-color:#65dccc}.workspace{padding:20px 26px;min-width:0}.stage{height:550px;position:relative;background:radial-gradient(ellipse at center,#142a3b,#0d1723 65%);border:1px solid #2b3d4c;border-radius:12px;overflow:hidden}#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.stage-title{position:absolute;left:22px;top:20px;pointer-events:none}.stage-title h2{font-size:29px;margin:7px 0}.stage-title p{margin:0;font-size:11px}.legend{position:absolute;bottom:43px;left:22px;display:flex;gap:16px;font-size:11px;color:#8d9daf;pointer-events:none}.positive{color:#59e0cf}.negative{color:#b08aff}.hint{position:absolute;bottom:15px;left:22px;color:#8d9daf;font-size:11px;pointer-events:none}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 23px}.stat{border:1px solid #283947;border-radius:8px;padding:14px;font-size:11px;color:#96aaba}.stat b{display:block;font-size:21px;color:#e5f0f7;margin-bottom:4px}.details{display:grid;grid-template-columns:1fr 1fr;gap:30px}#plot{width:100%;height:180px}.occupancy{border-top:1px solid #283947;margin-top:20px;padding-top:23px}#boxes{display:flex;gap:18px;flex-wrap:wrap}.boxgroup{display:flex;gap:5px;align-items:center}.boxgroup button{font-size:24px;min-width:44px;padding:2px 8px}.boxgroup span{font-size:12px;margin-right:4px}details{padding:20px 0;color:#a2b5c5;font-size:12px}summary{cursor:pointer}a{color:#69dacc}@media(max-width:850px){main{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0}aside hr,aside .muted{display:none}aside h2{grid-column:1/-1}label{margin:0}.details{grid-template-columns:1fr}.stage{height:460px}h1 span{display:none}.stats{grid-template-columns:1fr 1fr}.workspace{padding:12px}}
.element-picker{padding:24px 32px;border-bottom:1px solid #283947}.picker-heading,.element-preview{display:flex;justify-content:space-between;align-items:center;gap:20px}.picker-heading input{display:block;margin-top:5px;background:#18232f;border:1px solid #40576a;color:#eef6ff;padding:9px;border-radius:5px}.table-scroll{overflow:auto;padding:8px 0}#periodic-table{display:grid;grid-template-columns:repeat(18,minmax(36px,1fr));gap:4px;min-width:780px}.element{padding:5px 2px;min-height:49px;text-align:center;border-color:#375d66;background:#15323a}.element small{display:block;font-size:9px;color:#9fb6ca}.element b{font-size:16px}.element.block-p{background:#26304a}.element.block-d{background:#352b45}.element.block-f{background:#393321}.element.selected{outline:2px solid #7aefcf;background:#33615b}.element.filtered{opacity:.15}.element-preview{margin-top:15px}.element-preview h2{margin:0}.element-preview p{margin:5px 0;max-width:900px}#explore-element{background:#226359;white-space:nowrap;padding:13px 20px}.resampling{margin-top:18px}[hidden]{display:none!important}.boxgroup button.active{outline:2px solid #72dfc8}.boxgroup button.empty{opacity:.5}.boxgroup{margin:6px 0}.sublevel-key{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.sublevel-key button{padding:4px 7px;font-size:11px;border-left:4px solid var(--key)}.legend{flex-wrap:wrap;right:15px;max-height:65px;overflow:auto}.legend span{white-space:nowrap}.stage-title h2{font-size:25px}.stage-title{max-width:85%}.element-preview button:disabled{opacity:.5}#atom-controls select{margin-bottom:12px}
.group-number{text-align:center;font-size:10px;color:#829aac;padding-bottom:3px}.series-label{display:flex;align-items:center;justify-content:center;color:#a99b78;font-size:10px}#periodic-table{grid-template-rows:18px repeat(7,49px) 10px repeat(2,49px)}.element:disabled{cursor:default}.boxgroup .sublevel-button{font-size:13px;min-width:38px;padding:9px 5px;color:#74dfcd;border-color:transparent;background:transparent}.boxgroup .sublevel-button:hover{background:#243c48}.boxgroup{border:1px solid #283947;border-radius:7px;padding:7px;gap:4px}.boxgroup button{min-width:36px;font-size:22px;padding:2px 5px}#search-status{display:block;min-height:15px;margin-top:4px;color:#80d7c9;font-size:11px}.element-picker{max-width:1600px;margin:auto}.stage-title{max-width:90%}.stage-title h2{font-size:clamp(18px,2vw,25px)}.legend{pointer-events:auto;background:#0d1723c9;border-radius:5px;padding:5px}.boxgroup button.empty{opacity:.65}#atom-controls{min-width:0}#free-controls{min-width:0}select:disabled{opacity:.5}button{transition:background .15s} .element.selected{outline-offset:0}
@media(max-width:850px){header{padding:18px}.element-picker{padding:18px}.picker-heading{align-items:flex-start}.element-preview{align-items:flex-start}aside{padding:18px}aside>div{grid-column:1/-1}aside label{margin-bottom:12px}.element-preview p{overflow-wrap:anywhere}.stage-title{left:15px;top:15px}.legend{left:15px;gap:10px}.hint{left:15px;font-size:10px}.boxgroup{max-width:100%;flex-wrap:wrap}}
@media(max-width:480px){.picker-heading,.element-preview{flex-direction:column;gap:10px}.picker-heading input{width:100%}.picker-heading label{width:100%}#explore-element{width:100%}header h1{font-size:22px}header button{font-size:11px}.stats{gap:8px}.stat{padding:10px}.stage{height:430px}.stage-title p{max-width:260px}.boxgroup button{min-width:30px}.details{gap:14px}}
/* The sublevel button covers its card; individual orbitals sit above it. */
#atom-controls .occupancy{border:0;margin:0 0 20px;padding:0}#atom-controls .occupancy h2{margin:8px 0;font-size:16px}#occupancy-config{overflow-wrap:anywhere}.sublevel-action{display:block;width:100%;min-height:38px;margin:4px 0 10px;padding:9px 13px;border:1px solid #72dfc8;border-radius:6px;background:#25574e;color:#ddf6f1;font:inherit;font-size:13px;text-align:center}.sublevel-action:hover{background:#306d61}.sublevel-action[aria-pressed=true]{box-shadow:inset 0 0 0 1px #72dfc8}#boxes{display:grid;grid-template-columns:1fr;gap:8px;max-height:460px;overflow-y:auto;padding:3px}.boxgroup{position:relative;display:block;padding:35px 7px 9px;margin:0;border:0;isolation:isolate}.boxgroup .sublevel-button{position:absolute;inset:0;width:100%;height:100%;border:1px solid #385162;background:#15232e;border-radius:7px;text-align:left;display:flex;align-items:flex-start;padding:9px;font-size:12px;color:#9fe6d9}.boxgroup .sublevel-button:hover{background:#243c48}.boxgroup .sublevel-button[aria-pressed=true]{border:2px solid #72dfc8;background:#203e3d}.orbital-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;pointer-events:none}.orbital-row button{pointer-events:auto;min-width:0;padding:3px 0;font-size:18px;border-radius:3px;line-height:25px}.orbital-row button.active{background:#39615a;outline-offset:0}.filling-help{font-size:11px;color:#acbecd}#legend:empty{display:none}
@media(max-width:850px){#boxes{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-height:340px}#atom-controls .occupancy>.muted{display:block}}

.single-control{padding:12px 0 0}.single-control label{color:#ddf6f1;margin-bottom:8px}.single-control .muted{display:block;font-size:11px}
/* Periodic table: the same bounded dimension controls both tile axes. */
.element-picker{max-width:1500px;padding:28px 30px}.table-scroll{overflow-x:auto;padding:10px 4px 14px;scrollbar-color:#385162 #101923}
#periodic-table{--tile:clamp(58px,calc((100vw - 160px)/18),74px);--tile-height:calc(var(--tile)*1.15);grid-template-columns:20px repeat(18,var(--tile));grid-template-rows:20px repeat(7,var(--tile-height)) 18px repeat(2,var(--tile-height));gap:4px;width:max-content;min-width:0;margin-inline:auto}
#periodic-table .element{position:relative;width:var(--tile);height:var(--tile-height);min-height:0;padding:5px 2px 5px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1px;border:1px solid var(--tile-edge);border-top:3px solid var(--tile-accent);border-radius:4px;background:var(--tile-bg);color:#e6f1f5;box-shadow:inset 0 1px 0 #ffffff05;transition:background .15s,border-color .15s,box-shadow .15s}
#periodic-table .block-s{--tile-bg:#132e33;--tile-edge:#2b535b;--tile-accent:#6bd6c4}#periodic-table .block-p{--tile-bg:#1d2940;--tile-edge:#394c6c;--tile-accent:#8caef2}#periodic-table .block-d{--tile-bg:#30243c;--tile-edge:#594267;--tile-accent:#c29be3}#periodic-table .block-f{--tile-bg:#332c1e;--tile-edge:#5d5034;--tile-accent:#d8bc77}
#periodic-table .element-number{font-size:9px;line-height:10px;width:100%;text-align:left;padding-left:3px;color:#acbfcc;font-variant-numeric:tabular-nums}
#periodic-table .element-symbol{font-size:clamp(21px,1.8vw,28px);line-height:1;font-weight:650;color:var(--tile-accent)}
#periodic-table .element-name{font-size:8px;line-height:10px;white-space:nowrap;letter-spacing:-.15px;color:#c7d5df}
#periodic-table .element-weight{font-size:10px;line-height:12px;font-variant-numeric:tabular-nums;color:#e1e9ef}
#periodic-table .element:hover:not(:disabled){background:color-mix(in srgb,var(--tile-bg) 75%,var(--tile-accent));border-color:var(--tile-accent)}
#periodic-table .element.selected{outline:2px solid #a3ffdf;outline-offset:0;background:color-mix(in srgb,var(--tile-bg) 70%,#72dfc8);box-shadow:0 0 12px #72dfc82b}
#periodic-table .group-number,#periodic-table .period-number{display:flex;align-items:center;justify-content:center;font-size:10px;color:#879bae;padding:0}
#periodic-table .series-placeholder{border:1px dashed #665c40;border-radius:4px;color:#cfbc8c;font-size:10px}
#periodic-table .series-label:not(.series-placeholder){justify-content:flex-end;padding-right:14px;font-size:11px;letter-spacing:.4px;color:#c4b58d}
.table-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:6px}.table-caption p{margin:0;max-width:610px;font-size:10px;color:#8ca0b2}.block-key{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;white-space:nowrap}.block-key span::before{content:'';display:inline-block;width:7px;height:7px;background:currentColor;border-radius:2px;margin-right:6px}.key-s{color:#6bd6c4}.key-p{color:#8caef2}.key-d{color:#c29be3}.key-f{color:#d8bc77}.element-preview{border-top:1px solid #283947;padding-top:18px;margin-top:18px}.element-preview .selected-weight{color:#d1dfeb;font-size:12px}
@media(max-width:850px){.element-picker{padding:18px}.table-caption{flex-direction:column;gap:10px}}

/* Independent viewport-height panes; scroll never chains between them. */
html{height:100%;overflow:hidden}
body{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body>header{flex:0 0 auto}
#app-layout{flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#controls-panel,#content-panel{min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:#40586b #0c121a}
#controls-panel{display:block;padding:22px;overflow-x:hidden;border-right:1px solid #28323e}
#content-panel{position:relative;overflow-x:hidden;container-type:inline-size}
#controls-panel:focus-visible,#content-panel:focus-visible{outline:2px solid #6ce0ce;outline-offset:-3px}
#controls-panel #boxes{max-height:none;overflow:visible;grid-template-columns:1fr}
#controls-panel label{margin-bottom:17px}
#controls-panel hr{display:block}
#controls-panel .muted{display:block}
#content-panel .element-picker{width:100%}
#content-panel .workspace{max-width:1500px;margin-inline:auto}
#content-panel .table-scroll{overscroll-behavior-x:contain}
@supports(width:1cqw){#content-panel #periodic-table{--tile:clamp(58px,calc((100cqw - 160px)/18),74px)}}
@media(max-width:700px){
  #app-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(120px,35%) minmax(0,1fr)}
  #controls-panel{border-right:0;border-bottom:1px solid #28323e;padding:16px}
  #controls-panel #boxes{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  body>header{padding:12px 16px}
}
.boxgroup.sublevel-off .sublevel-button{border-style:dashed;color:#8495a5;background:#111b25}.boxgroup.sublevel-off .orbital-row button.active{background:#29443f;outline-color:#72dfc8}.boxgroup .orbital-row button:not(.active){background:#101b25;color:#8696a6}