:root{--bg: #05060a;--bg-panel: rgba(13, 17, 27, .72);--bg-panel-solid: #0c1019;--stroke: rgba(120, 160, 220, .16);--stroke-strong: rgba(120, 200, 255, .4);--txt: #dbe4f4;--txt-dim: #8a96ad;--cyan: #00e5ff;--amber: #ffb000;--pink: #ff4d6d;--radius: 14px;--shadow: 0 18px 50px -12px rgba(0, 0, 0, .7);--font-display: "Chakra Petch", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--font-display);-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.mono{font-family:var(--font-mono)}.app{position:fixed;inset:0}.canvas-wrap{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,rgba(0,90,140,.18),transparent 60%),radial-gradient(ellipse at 85% 90%,rgba(120,40,160,.12),transparent 55%),var(--bg)}.canvas-wrap canvas{display:block;touch-action:none}.app:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:50}.topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:linear-gradient(to bottom,rgba(5,6,10,.85),transparent);pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:13px}.brand__logo{position:relative;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--cyan);box-shadow:0 0 18px #00e5ff80}.brand__logo:before,.brand__logo:after{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px solid var(--amber);transform:rotate(60deg) scaleY(.4)}.brand__logo:after{border-color:var(--pink);transform:rotate(-60deg) scaleY(.4)}.brand__core{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}.brand__txt h1{margin:0;font-size:19px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(90deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.brand__txt p{margin:1px 0 0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim)}.topbar__actions{display:flex;align-items:center;gap:10px}.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;background:var(--bg-panel);border:1px solid var(--stroke);border-radius:10px;color:var(--txt);font-size:12px;letter-spacing:.04em;backdrop-filter:blur(12px);transition:all .18s ease}.btn:hover{border-color:var(--stroke-strong);box-shadow:0 0 16px #00e5ff26;transform:translateY(-1px)}.btn--on{border-color:var(--cyan);color:#eafdff;box-shadow:inset 0 0 14px #00e5ff33,0 0 14px #00e5ff33}.btn__icon{font-size:15px;line-height:1}.lang{display:flex;gap:2px;padding:3px;background:var(--bg-panel);border:1px solid var(--stroke);border-radius:10px;backdrop-filter:blur(12px)}.lang__btn{border:none;background:transparent;font-size:17px;padding:4px 8px;border-radius:7px;filter:grayscale(.7) opacity(.6);transition:all .16s ease}.lang__btn:hover{filter:grayscale(0) opacity(1)}.lang__btn.is-active{filter:grayscale(0) opacity(1);background:#00e5ff24;box-shadow:inset 0 0 0 1px var(--stroke-strong)}.panel{background:var(--bg-panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:15px;backdrop-filter:blur(16px);box-shadow:var(--shadow)}.left-stack{position:absolute;top:78px;left:18px;z-index:15;width:256px;max-height:calc(100vh - 150px);overflow-y:auto;display:flex;flex-direction:column;gap:12px;transition:transform .3s ease,opacity .3s ease;scrollbar-width:thin}.left-stack.is-hidden{transform:translate(-110%);opacity:0;pointer-events:none}.panel-toggle{position:absolute;top:50%;left:0;z-index:16;transform:translateY(-50%);width:22px;height:54px;border:1px solid var(--stroke);border-left:none;border-radius:0 8px 8px 0;background:var(--bg-panel);color:var(--cyan);backdrop-filter:blur(10px);font-size:11px;transition:left .3s ease}.panel-toggle.is-open{left:286px;border:1px solid var(--stroke);border-radius:8px}.controls__title{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-dim)}.controls__section+.controls__section{margin-top:16px;padding-top:16px;border-top:1px solid var(--stroke)}.chiprow{display:flex;flex-wrap:wrap;gap:6px}.chip{padding:6px 10px;font-size:11.5px;letter-spacing:.02em;background:#ffffff08;border:1px solid var(--stroke);border-radius:8px;color:var(--txt-dim);transition:all .16s ease}.chip:hover{color:var(--txt);border-color:var(--stroke-strong)}.chip.is-active{color:#06121a;background:var(--cyan);border-color:var(--cyan);font-weight:600;box-shadow:0 0 14px #00e5ff66}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}.field>span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}.field select{appearance:none;width:100%;padding:7px 10px;background:var(--bg-panel-solid);border:1px solid var(--stroke);border-radius:8px;color:var(--txt);font-family:var(--font-mono);font-size:12px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px;background-repeat:no-repeat}.field select:focus{outline:none;border-color:var(--stroke-strong)}.field-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.field-grid .field{margin-bottom:0}.legend__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.legend__item{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--txt)}.legend__swatch{width:13px;height:13px;border-radius:4px;box-shadow:0 0 8px currentColor;flex:none}.legend__unit{color:var(--txt-dim);font-family:var(--font-mono);font-size:10px}.legend__bar{height:14px;border-radius:7px;border:1px solid var(--stroke)}.legend__scale{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--txt-dim)}.legend__mid{letter-spacing:.05em}.legend__hint{margin-top:8px;font-size:10px;color:var(--txt-dim);font-style:italic}.tooltip{position:fixed;z-index:40;width:244px;padding:12px 13px;background:#080b12eb;border:1px solid var(--cyan);border-radius:12px;backdrop-filter:blur(14px);box-shadow:var(--shadow),0 0 22px #00e5ff2e;pointer-events:none;animation:tipIn .14s ease}@keyframes tipIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.tooltip__head{display:flex;align-items:baseline;gap:8px}.tooltip__num{font-family:var(--font-mono);font-size:11px;color:var(--txt-dim)}.tooltip__sym{font-size:22px;font-weight:700}.tooltip__name{font-size:14px;color:var(--txt)}.tooltip__cat{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font-size:11px;letter-spacing:.04em}.tooltip__radio{color:var(--amber);font-size:10px}.tooltip__grid{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-size:11.5px}.tooltip__grid dt{color:var(--txt-dim)}.tooltip__grid dd{margin:0;text-align:right;color:var(--txt)}.inspector{position:absolute;right:18px;bottom:52px;z-index:16;width:230px;padding:10px;background:#000;border:1px solid var(--stroke-strong);border-radius:14px;box-shadow:var(--shadow),0 0 26px #00e5ff1f;animation:tipIn .18s ease}.inspector__label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:4px}.inspector__stage{position:relative;width:100%;height:180px;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#141e328c,#000 70%)}.inspector__meta{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}.inspector__sym{font-size:26px;font-weight:700;line-height:1}.inspector__name{font-size:13px;color:var(--txt)}.inspector__shells{font-size:11px;color:var(--txt-dim)}.detail__atom{position:relative;width:100%;height:190px;margin:0 0 16px;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#141e3280,#000 72%);border:1px solid rgba(255,255,255,.07)}.detail__atomlabel{position:absolute;top:8px;left:10px;z-index:2;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim)}.detail__atomhint{position:absolute;bottom:7px;left:0;right:0;z-index:2;text-align:center;font-size:9.5px;letter-spacing:.05em;color:var(--txt-dim);pointer-events:none;opacity:.7}.detail{position:absolute;top:78px;right:18px;bottom:64px;z-index:18;width:320px;overflow-y:auto;padding:20px;background:var(--bg-panel);border:1px solid var(--stroke);border-top:2px solid var(--accent, var(--cyan));border-radius:var(--radius);backdrop-filter:blur(18px);box-shadow:var(--shadow);animation:slideIn .26s cubic-bezier(.2,.8,.2,1)}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.detail__close{position:absolute;top:12px;right:12px;width:28px;height:28px;border:1px solid var(--stroke);border-radius:8px;background:#ffffff0a;color:var(--txt-dim);font-size:13px}.detail__close:hover{color:var(--txt);border-color:var(--stroke-strong)}.detail__hero{display:flex;gap:16px;align-items:center;margin-bottom:18px}.detail__symbol{width:84px;height:84px;flex:none;display:grid;place-items:center;font-size:42px;font-weight:700;color:var(--accent, var(--cyan));border:1.5px solid var(--accent, var(--cyan));border-radius:14px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.06),transparent);box-shadow:inset 0 0 24px #00e5ff1f,0 0 22px #0006}.detail__num{font-family:var(--font-mono);font-size:12px;color:var(--txt-dim)}.detail__name{margin:2px 0;font-size:22px;letter-spacing:.02em}.detail__nameen{font-size:12px;color:var(--txt-dim)}.detail__cat{margin-top:6px;font-size:11px;letter-spacing:.05em;color:var(--accent, var(--cyan))}.detail__table{margin:0;display:flex;flex-direction:column}.detail__row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px}.detail__row dt{color:var(--txt-dim)}.detail__row dd{margin:0;text-align:right;color:var(--txt)}.navpad{position:absolute;left:18px;bottom:70px;z-index:19;display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(4,42px);gap:7px;grid-template-areas:".       up      ." "left    center  right" ".       down    ." "zoomout .       zoomin";animation:navpadIn .2s ease}@keyframes navpadIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.navpad__up{grid-area:up}.navpad__down{grid-area:down}.navpad__left{grid-area:left}.navpad__right{grid-area:right}.navpad__center{grid-area:center}.navpad__zoomout{grid-area:zoomout}.navpad__zoomin{grid-area:zoomin}.navpad__btn{display:grid;place-items:center;border:1px solid var(--stroke-strong);border-radius:8px;background:#00e5ff0f;color:var(--cyan);font-size:18px;line-height:1;backdrop-filter:blur(8px);transition:background .14s ease,transform .1s ease;touch-action:none;user-select:none}.navpad__btn:hover{background:#00e5ff29}.navpad__btn:active{background:#00e5ff4d;transform:scale(.93)}.navpad__btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.navpad__center{font-size:12px;font-weight:700;letter-spacing:.04em;background:#00e5ff1f}.navpad[data-mode=pan] .navpad__center{background:var(--cyan);color:#06121a;border-color:var(--cyan)}.detail__isotopes{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}.iso-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}.iso-chip{padding:5px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#ffffff0a;color:var(--txt);font-size:13px;letter-spacing:.02em;transition:all .14s ease}.iso-chip:hover{border-color:var(--accent, var(--cyan))}.iso-chip.is-active{background:var(--accent, var(--cyan));border-color:var(--accent, var(--cyan));color:#06121a;font-weight:600}.iso-name{margin:4px 0 2px;font-size:12px;color:var(--txt-dim);font-style:italic}.iso-legend{display:flex;gap:14px;margin:6px 0 2px;font-size:11.5px;color:var(--txt-dim)}.iso-legend span{display:inline-flex;align-items:center;gap:6px}.iso-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.detail__compare{margin-top:16px;width:100%;padding:11px;border:1px solid var(--accent, var(--cyan));border-radius:10px;background:#00e5ff14;color:var(--txt);font-size:12.5px;letter-spacing:.04em;transition:all .16s ease}.detail__compare:hover{background:#00e5ff29}.detail__compare.is-active{background:var(--accent, var(--cyan));color:#06121a;font-weight:600}.compare{position:absolute;left:50%;bottom:56px;transform:translate(-50%);z-index:17;width:min(520px,92vw)}.compare__head{display:flex;justify-content:space-between;align-items:center}.compare__clear{background:none;border:none;color:var(--txt-dim);font-size:11px}.compare__clear:hover{color:var(--txt)}.compare__cards{display:flex;gap:12px;justify-content:center}.compare__card{position:relative;flex:1;max-width:150px;padding:12px;text-align:center;border:1px solid var(--stroke);border-radius:10px;background:#ffffff05}.compare__remove{position:absolute;top:5px;right:6px;border:none;background:none;color:var(--txt-dim);font-size:11px}.compare__sym{font-size:30px;font-weight:700}.compare__name{font-size:12px}.compare__num{font-family:var(--font-mono);font-size:10px;color:var(--txt-dim)}.compare__table{width:100%;margin-top:12px;border-collapse:collapse;font-size:12px}.compare__table th{color:var(--txt-dim);font-weight:500;font-size:10.5px;letter-spacing:.04em;text-align:center;padding:5px;white-space:nowrap}.compare__table td{font-family:var(--font-mono);padding:5px 8px;border-top:1px solid rgba(255,255,255,.05)}.compare__a{text-align:right;color:var(--cyan)}.compare__b{text-align:left;color:var(--amber)}.compare__hint{margin:10px 0 0;text-align:center;font-size:11px;color:var(--txt-dim)}.footer{position:absolute;bottom:0;left:0;right:0;z-index:12;display:flex;justify-content:space-between;align-items:center;padding:11px 20px;font-size:11px;color:var(--txt-dim);background:linear-gradient(to top,rgba(5,6,10,.8),transparent);pointer-events:none}.footer__hint{letter-spacing:.04em}.footer__credits{pointer-events:auto;background:none;border:none;color:var(--cyan);font-size:11px;letter-spacing:.05em;text-decoration:underline;text-underline-offset:3px}.modal-backdrop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:#030408b3;backdrop-filter:blur(6px);animation:tipIn .2s ease}.modal{position:relative;width:min(560px,100%);max-height:86vh;overflow-y:auto;padding:28px;background:var(--bg-panel-solid);border:1px solid var(--stroke-strong);border-radius:16px;box-shadow:var(--shadow)}.modal__title{margin:0 0 12px;font-size:22px;letter-spacing:.03em}.modal__intro{color:var(--txt-dim);font-size:13px;line-height:1.6}.modal__h3{margin:20px 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}.modal p{font-size:13px;line-height:1.6;color:var(--txt)}.modal__list{margin:0;padding-left:18px;font-size:13px;line-height:1.9}.modal__list a{color:var(--txt);text-decoration:none;border-bottom:1px solid var(--stroke-strong)}.modal__list a:hover{color:var(--cyan)}.modal__disclaimer{margin-top:20px;padding-top:14px;border-top:1px solid var(--stroke);font-size:11.5px;font-style:italic;color:var(--txt-dim)}@media (max-width: 760px){.brand__txt p,.btn__label{display:none}.topbar{padding:12px}.topbar__actions{gap:6px}.btn{padding:7px 9px}.btn__icon{font-size:14px}.brand{gap:9px}.brand__logo{width:32px;height:32px}.brand__txt h1{font-size:15px}.lang{padding:2px}.lang__btn{font-size:14px;padding:3px 6px}.navpad{left:12px;bottom:58px;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(4,38px);gap:6px}.navpad__btn{font-size:16px}.left-stack{width:calc(100vw - 36px);max-width:300px;top:70px}.panel-toggle.is-open{left:calc(30px + min(100vw - 36px,300px))}.detail{inset:auto 0 0;width:100%;max-height:62vh;border-radius:16px 16px 0 0}.compare{width:96vw;bottom:64px}.footer__hint{display:none}}