.atomic-intro { padding-bottom:28px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.atomic-intro .section-heading { max-width:900px; }
.atomic-intro h1 { margin-bottom:18px; }
.atomic-controls { display:flex; gap:24px; flex-wrap:wrap; margin:24px 0 18px; }
.atomic-controls label { display:grid; gap:6px; font-size:14px; font-weight:600; }
.atomic-controls select { background:white; color:var(--ink); border:1px solid #aebfbb; border-radius:3px; padding:9px 36px 9px 12px; font:inherit; min-width:125px; }
.atomic-controls select:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.voltage-controls { margin:24px 0 0; padding:16px 20px; border:1px solid var(--line); border-radius:4px; background:var(--soft); }
.voltage-controls legend { font-size:13px; font-weight:600; padding-inline:6px; }
.voltage-toggle { display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer; }
.voltage-toggle input { width:17px; height:17px; accent-color:var(--teal); flex:none; }
.voltage-options { display:flex; align-items:center; flex-wrap:wrap; gap:16px 28px; margin-top:14px; }
.voltage-options label[for="accelerating-voltage"] { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14px; }
#accelerating-voltage { width:100px; padding:7px 10px; border:1px solid #aebfbb; border-radius:3px; font:inherit; background:white; color:var(--ink); }
#accelerating-voltage:disabled { background:#edf0ef; }
#accelerating-voltage:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
#accelerating-voltage[aria-invalid="true"] { border-color:#a33a27; }
#voltage-note,#voltage-validation { font-size:12px; margin-top:12px; }
#voltage-validation { color:#8e3021; }
.level-below-threshold { opacity:.48; }
.level-below-threshold .shell-level { stroke-dasharray:5 4; }
.line-below-threshold th,.line-below-threshold td:nth-child(2),.line-below-threshold td:nth-child(3) { opacity:.55; }
.overvoltage-cell { font-variant-numeric:tabular-nums; }
.overvoltage-cell span { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.periodic-scroll { overflow-x:auto; padding:5px 5px 12px; margin-inline:-5px; }
.periodic-table { display:grid; grid-template-columns:repeat(18,minmax(43px,1fr)); grid-template-rows:repeat(7,61px) 12px repeat(2,61px); gap:4px; min-width:842px; }
.element-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; border:1px solid #ccdad6; border-radius:3px; color:var(--ink); cursor:pointer; padding:4px; line-height:1.2; transition:background .12s; }
.element-cell strong { font-size:20px; font-weight:600; }
.element-cell .atomic-number { font-size:10px; align-self:flex-start; }
.block-s { background:#edf5f3; }.block-p { background:#f3f6fa; }.block-d { background:#f8f3e9; }.block-f { background:#f1eef6; }
.element-cell:hover { border-color:var(--teal); background:#d9ebe6; }
.element-cell[aria-pressed="true"] { background:var(--teal); color:white; border-color:var(--teal); }
.element-cell.data-unavailable { border-style:dashed; }
.periodic-key { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; margin-top:8px; }
.periodic-key span::before { content:''; display:inline-block; width:11px; height:11px; margin-right:6px; border:1px solid #ccdad6; }
.periodic-key .key-s::before { background:#edf5f3; }.periodic-key .key-p::before { background:#f3f6fa; }.periodic-key .key-d::before { background:#f8f3e9; }.periodic-key .key-f::before { background:#f1eef6; }
.atomic-hint { font-size:13px; margin-top:12px; }
.element-summary { display:flex; gap:20px; align-items:center; border-top:1px solid var(--line); margin-top:32px; padding-top:28px; }
.element-monogram { display:grid; place-items:center; border:1px solid var(--line); width:80px; height:80px; flex:none; font:42px var(--serif); background:var(--soft); }
.element-summary h2 { font:32px/1.2 var(--serif); margin:3px 0 8px; }
.element-summary #element-number { font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--teal); }
.element-summary #configuration { font-size:15px; }
.atomic-workbench { display:grid; grid-template-columns:1.18fr 1fr; gap:28px; margin-top:24px; align-items:start; }
.atomic-panel { border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.atomic-panel-heading { padding:18px 20px; background:var(--soft); border-bottom:1px solid var(--line); }
.atomic-panel-heading h3 { font:23px/1.3 var(--serif); margin-bottom:5px; }
.atomic-panel-heading p { font-size:13px; }
.diagram-scroll { overflow:auto; max-height:720px; }
#shell-diagram { display:block; width:100%; min-width:505px; height:auto; font:14px 'Segoe UI',Arial,sans-serif; }
.diagram-column { font-size:12px; fill:var(--muted); }.shell-name { fill:var(--ink); font-weight:700; }.quantum-name { fill:var(--muted); font-size:13px; }
.shell-level { stroke:#6b8f88; stroke-width:2; }.electron-count,.edge-energy { fill:var(--ink); font-size:13px; }.shared-label,.edge-missing { fill:var(--muted); font-size:11px; }
.shared-bracket { stroke:#6b8f88; fill:none; }.is-highlighted .shell-level { stroke:var(--gold); stroke-width:3; }.is-highlighted .shell-name { fill:#8b6011; }
.transition-line { stroke:var(--gold); stroke-width:3; }
.diagram-caption { padding:12px 18px; border-top:1px solid var(--line); font-size:12px; }
.transition-status { background:#faf6ed; border-left:3px solid var(--gold); padding:12px 16px; min-height:72px; font-size:14px; color:var(--ink); }
.line-scroll { overflow:auto; max-height:600px; }
#line-table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.4; }
#line-table thead { position:sticky; top:0; background:white; z-index:1; }
#line-table td,#line-table th { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
#line-table td:nth-child(3) { font-variant-numeric:tabular-nums; text-align:right; }
#line-table thead th { font-weight:600; font-size:12px; color:var(--muted); }
#line-table td:last-child { font-size:11px; color:var(--muted); }
#line-table button { background:none; border:0; padding:3px; color:var(--teal); font:inherit; font-weight:600; cursor:pointer; }
#line-table tr.is-selected,#line-table tr.is-preview { background:#faf6ed; }
#line-table tbody tr { cursor:pointer; }
.atomic-empty { padding:22px; font-size:15px; }
.line-references { padding:18px 20px; border-top:1px solid var(--line); }
.line-references h4 { margin:0 0 12px; font-size:14px; font-weight:600; }
.line-references ol { margin:0; padding-left:23px; font-size:12px; line-height:1.6; color:var(--muted); }
.line-references li { padding-left:4px; margin-bottom:12px; scroll-margin-top:110px; }
.line-references li:target { background:#faf6ed; outline:2px solid var(--gold); outline-offset:4px; }
.line-references p { margin-top:16px; font-size:11px; }
.atomic-sources { margin-top:32px; padding:22px 26px; border:1px solid var(--line); background:var(--soft); }
.atomic-sources summary { cursor:pointer; font-weight:600; }
.atomic-sources p { font-size:14px; margin-top:12px; }
@media(max-width:1050px) { .atomic-workbench { grid-template-columns:1fr; } }
@media(max-width:600px) { .atomic-controls { gap:16px; } .atomic-controls label:first-child { flex:1; } .atomic-controls select { max-width:100%; } .element-summary { gap:12px; } .element-summary h2 { font-size:26px; } .element-monogram { width:62px;height:62px;font-size:32px; } .atomic-sources { padding:18px; } }