:root{--bg-0:#0c0e11;--bg-1:#101418;--bg-2:#151a20;--bg-3:#1b2129;--text-1:#eef1f4;--text-2:#b9c1cb;--text-3:#7d8694;--accent:#7dd3fc;--accent-dim:#3d6a84;--accent-ink:#0a1218;--proton:#e0655a;--neutron:#9aa4b2;--electron:#7dd3fc;--border-1:#232b34;--border-2:#2e3742;--radius-s:8px;--radius-m:12px;--font-sans:"Manrope", "Inter", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--header-h:56px;--max-w:1440px}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg-0);color:var(--text-1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0;font-size:15px;line-height:1.6}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,p{margin:0}button{font:inherit;color:inherit}input{font:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.skip-link{z-index:50;background:var(--bg-3);color:var(--text-1);border:1px solid var(--border-2);border-radius:var(--radius-s);padding:8px 14px;text-decoration:none;transition:top .15s;position:absolute;top:-48px;left:12px}.skip-link:focus{top:8px}.site-header{height:var(--header-h);border-bottom:1px solid var(--border-1);background:var(--bg-1);z-index:20;position:sticky;top:0}.site-header-inner{max-width:var(--max-w);align-items:center;gap:24px;height:100%;margin:0 auto;padding:0 20px;display:flex}.brand{letter-spacing:.01em;color:var(--text-1);white-space:nowrap;align-items:center;gap:10px;font-size:16px;font-weight:700;text-decoration:none;display:flex}.brand-mark{flex:none;width:26px;height:26px}.brand-text{flex-direction:column;line-height:1.25;display:flex}.brand-text small{letter-spacing:.04em;color:var(--text-3);white-space:nowrap;font-size:11px;font-weight:600}.site-nav{gap:4px;margin-left:auto;display:flex}.site-nav a{color:var(--text-2);border-radius:var(--radius-s);padding:7px 12px;font-size:14px;text-decoration:none}.site-nav a:hover{color:var(--text-1);background:var(--bg-2)}.page{width:100%;max-width:var(--max-w);flex-direction:column;flex:1;gap:28px;margin:0 auto;padding:28px 20px 40px;display:flex}.hero-line h1{letter-spacing:-.01em;font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.2}.hero-line p{color:var(--text-2);max-width:62ch;margin-top:6px}.lab-grid{grid-template-columns:290px minmax(0,1fr) 290px;align-items:stretch;gap:20px;display:grid}.column{flex-direction:column;gap:16px;min-width:0;display:flex}.panel{border:1px solid var(--border-1);border-radius:var(--radius-m);background:var(--bg-1);padding:16px}.panel-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;font-size:12px;font-weight:700}.element-symbol{border:1px solid var(--border-2);border-radius:var(--radius-m);background:var(--bg-2);width:64px;height:64px;color:var(--accent);justify-content:center;align-items:center;font-size:28px;font-weight:700;display:flex}.element-name{margin-top:12px;font-size:26px;font-weight:700;line-height:1.25}.element-name-vi{color:var(--text-2);font-size:15px}.atomic-number{border-top:1px solid var(--border-1);align-items:baseline;gap:10px;margin-top:12px;padding-top:12px;display:flex}.atomic-number .value{font-family:var(--font-mono);color:var(--text-1);font-size:22px}.atomic-number .label{color:var(--text-3);font-size:13px}.element-desc{color:var(--text-2);margin-top:10px;font-size:14px}.isotope-note{color:var(--text-3);border-left:2px solid var(--border-2);margin-top:12px;padding-left:10px;font-size:12.5px}.viewer{border:1px solid var(--border-1);border-radius:var(--radius-m);background:var(--bg-1);flex-direction:column;flex:1;min-height:520px;display:flex;position:relative;overflow:hidden}.viewer-canvas{flex:1;min-height:440px;position:relative}.viewer-canvas canvas{touch-action:none;display:block}.viewer-bar{border-top:1px solid var(--border-1);background:var(--bg-1);flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;display:flex}.viewer-status{color:var(--text-3);margin-right:auto;font-size:13px}.btn{border:1px solid var(--border-2);background:var(--bg-2);border-radius:var(--radius-s);cursor:pointer;min-height:40px;padding:7px 14px;font-size:13.5px;font-weight:600}.btn:hover{border-color:var(--accent-dim);color:var(--accent)}.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-accent:hover{color:var(--accent-ink);filter:brightness(1.08)}.particle-tip{background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--radius-s);pointer-events:none;max-width:min(280px,100% - 24px);padding:8px 12px;font-size:13px;position:absolute;top:12px;left:12px}.particle-tip strong{letter-spacing:.08em;color:var(--accent);font-size:12px;display:block}.viewer-loading,.viewer-fallback{color:var(--text-2);background:var(--bg-1);flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:14px;display:flex;position:absolute;inset:0}.viewer-loading strong{letter-spacing:.12em;color:var(--text-3);font-size:12px}.stat-row{border-bottom:1px solid var(--border-1);justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:14px;display:flex}.stat-row:last-child{border-bottom:none}.stat-row .k{color:var(--text-2);align-items:center;gap:8px;display:flex}.stat-row .v{font-family:var(--font-mono);font-size:16px}.dot{border-radius:50%;flex:none;width:9px;height:9px}.dot-proton{background:var(--proton)}.dot-neutron{background:var(--neutron)}.dot-electron{background:var(--electron)}.shell-line{font-family:var(--font-mono);color:var(--text-1);padding:10px 0 2px;font-size:15px}.particle-list{flex-direction:column;gap:8px;display:flex}.particle-btn{text-align:left;background:var(--bg-2);border:1px solid var(--border-1);border-radius:var(--radius-s);cursor:pointer;align-items:center;gap:10px;width:100%;min-height:44px;padding:9px 12px;font-size:13.5px;display:flex}.particle-btn small{color:var(--text-3);font-size:12px;display:block}.particle-btn[aria-pressed=true]{border-color:var(--accent-dim)}.selector-search{background:var(--bg-2);border:1px solid var(--border-1);border-radius:var(--radius-s);width:100%;color:var(--text-1);min-height:42px;padding:9px 12px}.selector-search::placeholder{color:var(--text-3)}.selector-grid{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px;display:grid}.element-btn{aspect-ratio:1;border:1px solid var(--border-1);background:var(--bg-2);border-radius:var(--radius-s);cursor:pointer;justify-content:center;align-items:center;min-height:44px;font-size:14px;font-weight:700;display:flex}.element-btn:hover{border-color:var(--accent-dim);color:var(--accent)}.element-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.selector-list{flex-direction:column;gap:4px;max-height:220px;margin-top:12px;display:flex;overflow:auto}.selector-item{text-align:left;border-radius:var(--radius-s);cursor:pointer;background:0 0;border:1px solid #0000;align-items:baseline;gap:10px;width:100%;min-height:44px;padding:8px 10px;font-size:14px;display:flex}.selector-item:hover{background:var(--bg-2)}.selector-item[aria-current=true]{border-color:var(--accent-dim);background:var(--bg-2)}.selector-item .sym{font-family:var(--font-mono);color:var(--accent);min-width:34px;font-weight:700}.selector-item .num{font-family:var(--font-mono);color:var(--text-3);margin-left:auto;font-size:12.5px}.knowledge{border-top:1px solid var(--border-1);padding-top:20px}.knowledge h2{margin-bottom:4px;font-size:17px}.knowledge>p{color:var(--text-2);max-width:78ch;font-size:14px}.knowledge-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px;display:grid}.knowledge-item{border-left:2px solid var(--border-2);padding-left:14px}.knowledge-item h3{margin-bottom:4px;font-size:14px}.knowledge-item p{color:var(--text-2);font-size:13.5px}.model-note{color:var(--text-3);max-width:90ch;margin-top:14px;font-size:13px}.site-footer{border-top:1px solid var(--border-1);background:var(--bg-1)}.site-footer-inner{max-width:var(--max-w);color:var(--text-3);flex-wrap:wrap;align-items:center;gap:12px;margin:0 auto;padding:16px 20px;font-size:13px;display:flex}@media (width<=1080px){.lab-grid{grid-template-columns:1fr 1fr}.viewer-column{order:-1;grid-column:1/-1}.viewer{min-height:460px}.knowledge-grid{grid-template-columns:1fr}}@media (width<=680px){.page{padding:20px 14px 32px}.lab-grid{grid-template-columns:1fr}.site-nav{display:none}.viewer{min-height:380px}.viewer-canvas{min-height:320px}.selector-grid{grid-template-columns:repeat(5,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}