@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Instrument+Sans:wght@500;600;700&display=swap";:root{color-scheme:dark;--font-body: "DM Sans", system-ui, sans-serif;--font-display: "Instrument Sans", "DM Sans", system-ui, sans-serif;--bg-deep: #04060d;--bg-mid: #0a1020;--surface: rgba(14, 20, 36, .78);--surface-strong: rgba(18, 26, 46, .92);--surface-hover: rgba(24, 34, 58, .9);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--accent: #818cf8;--accent-soft: rgba(129, 140, 248, .14);--accent-glow: rgba(99, 102, 241, .45);--border-subtle: rgba(148, 163, 184, .1);--border-default: rgba(148, 163, 184, .16);--border-strong: rgba(148, 163, 184, .28);--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1.125rem;--radius-xl: 1.5rem;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);--shadow-md: 0 12px 40px rgba(0, 0, 0, .35);--shadow-glow: 0 0 48px rgba(99, 102, 241, .12);font-family:var(--font-body);line-height:1.5;font-weight:400;color:var(--text-primary);background-color:var(--bg-deep);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}html{width:100%}body{margin:0;min-width:320px;min-height:100vh;width:100%;background:radial-gradient(ellipse 120% 80% at 0% -20%,rgba(99,102,241,.18),transparent 50%),radial-gradient(ellipse 90% 60% at 100% 0%,rgba(56,189,248,.1),transparent 45%),radial-gradient(ellipse 70% 50% at 50% 100%,rgba(167,139,250,.08),transparent 50%),linear-gradient(180deg,var(--bg-mid) 0%,var(--bg-deep) 100%);background-attachment:fixed}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,black,transparent);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,black,transparent)}button{font:inherit}#root{width:100%;min-height:100vh;position:relative;z-index:1}.app-error{max-width:36rem;margin:4rem auto;padding:1.5rem;border-radius:var(--radius-lg);background:var(--surface-strong);border:1px solid rgba(248,113,113,.35);box-shadow:var(--shadow-md)}.app-error h1{margin:0 0 .75rem;font-family:var(--font-display)}.app-error p{margin:0 0 1rem;color:#fca5a5}.app-error button{padding:.55rem .9rem;border:0;border-radius:var(--radius-md);background:var(--text-primary);color:var(--bg-deep);cursor:pointer;font-weight:600}.app{width:100%;max-width:100%;margin:0;padding:clamp(1.25rem,2.5vw,2.5rem) clamp(1rem,2.5vw,3rem) 3rem}.app__hero{margin-bottom:clamp(1.5rem,3vw,2.25rem);padding-bottom:1.75rem;border-bottom:1px solid var(--border-subtle)}.app__eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .85rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--border-default);background:var(--accent-soft);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.app__eyebrow:before{content:"";width:.4rem;height:.4rem;border-radius:999px;background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.app__hero h1{margin:0;font-family:var(--font-display);font-size:clamp(2.1rem,4.5vw,3.25rem);font-weight:700;line-height:1.08;letter-spacing:-.03em;background:linear-gradient(120deg,#f8fafc,#cbd5e1 45%,#a5b4fc);-webkit-background-clip:text;background-clip:text;color:transparent}.app__lede{max-width:40rem;margin:.85rem 0 0;font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.6;color:var(--text-secondary)}.app__layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:clamp(1rem,1.75vw,1.75rem);align-items:start;width:100%}.panel{width:100%;min-width:0;border-radius:var(--radius-xl);border:1px solid var(--border-default);background:var(--surface);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);box-shadow:var(--shadow-md),var(--shadow-glow)}.panel__header{display:flex;flex-direction:column;gap:.3rem}.panel__title{margin:0;font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary)}.panel__subtitle{margin:0;font-size:.88rem;line-height:1.45;color:var(--text-secondary)}.atom-viewer--loading{display:grid;place-items:center;gap:1rem;min-height:28rem;color:var(--text-secondary)}.atom-viewer--loading:before{content:"";width:2.5rem;height:2.5rem;border-radius:999px;border:2px solid var(--border-default);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.periodic-table{padding:clamp(1.1rem,1.5vw,1.5rem)}.periodic-table__grid{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));gap:clamp(.25rem,.45vw,.4rem);margin-top:1.15rem;padding:.65rem;border-radius:var(--radius-lg);background:#00000038;border:1px solid var(--border-subtle)}.element-tile{position:relative;display:grid;align-content:center;justify-items:center;gap:.05rem;min-height:clamp(2.6rem,4vw,3.85rem);padding:clamp(.2rem,.35vw,.45rem);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:linear-gradient(165deg,rgba(255,255,255,.07) 0%,transparent 55%),color-mix(in srgb,var(--element-color) 22%,#0c1222);color:inherit;cursor:pointer;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,border-color .18s ease,background .18s ease}.element-tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:0;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--element-color) 40%,transparent),transparent 70%);transition:opacity .18s ease;pointer-events:none}.element-tile:hover{transform:translateY(-2px) scale(1.02);border-color:color-mix(in srgb,var(--element-color) 55%,white);box-shadow:var(--shadow-sm),0 0 20px color-mix(in srgb,var(--element-color) 25%,transparent)}.element-tile:hover:after{opacity:1}.element-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.element-tile--selected{border-color:var(--element-color);background:linear-gradient(165deg,rgba(255,255,255,.12) 0%,transparent 50%),color-mix(in srgb,var(--element-color) 32%,#0c1222);box-shadow:0 0 0 1px color-mix(in srgb,var(--element-color) 80%,white),0 8px 28px color-mix(in srgb,var(--element-color) 35%,transparent),inset 0 1px #ffffff14;transform:translateY(-1px)}.element-tile--selected:after{opacity:1}.element-tile__number{font-size:clamp(.55rem,.65vw,.64rem);font-weight:500;color:var(--text-muted)}.element-tile__symbol{font-family:var(--font-display);font-size:clamp(.85rem,1.15vw,1.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}.element-tile__name{overflow:hidden;max-width:100%;font-size:clamp(.48rem,.62vw,.66rem);text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}.periodic-table__legend-wrap{margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--border-subtle)}.periodic-table__legend-title{margin:0 0 .65rem;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.periodic-table__legend{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}.periodic-table__legend li{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem .3rem .45rem;border-radius:999px;border:1px solid var(--border-subtle);background:#0003;font-size:.72rem;color:var(--text-secondary);transition:background .15s ease,border-color .15s ease}.periodic-table__legend li:hover{background:var(--surface-hover);border-color:var(--border-default);color:var(--text-primary)}.periodic-table__legend-swatch{width:.55rem;height:.55rem;border-radius:999px;box-shadow:0 0 8px color-mix(in srgb,currentColor 50%,transparent)}.atom-viewer{position:sticky;top:1.25rem;padding:0;overflow:hidden}.atom-viewer:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--category-color, var(--accent)) 20%,var(--category-color, var(--accent)) 80%,transparent);opacity:.85}.atom-viewer__body{padding:clamp(1.1rem,1.5vw,1.5rem)}.atom-viewer__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.atom-viewer__title-block{display:flex;gap:1rem;align-items:flex-start}.atom-viewer__atomic-number{display:grid;flex-shrink:0;place-items:center;width:3rem;height:3rem;margin:0;border-radius:var(--radius-md);border:1px solid var(--border-default);background:linear-gradient(145deg,#ffffff14,#ffffff05);font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary);box-shadow:inset 0 1px #ffffff0f}.atom-viewer__title{margin:0;font-family:var(--font-display);font-size:clamp(1.35rem,2vw,1.65rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}.atom-viewer__symbol{margin-left:.35rem;font-size:.95em;font-weight:600;color:var(--text-muted)}.atom-viewer__subtitle{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:.45rem 0 0;font-size:.88rem;color:var(--text-secondary)}.atom-viewer__category-pill{padding:.15rem .5rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--category-color, var(--accent)) 35%,transparent);background:color-mix(in srgb,var(--category-color, var(--accent)) 12%,transparent);font-size:.78rem;font-weight:500;color:var(--category-color, var(--accent))}.atom-viewer__badge{flex-shrink:0;padding:.5rem .9rem;border-radius:var(--radius-md);border:1px solid color-mix(in srgb,var(--category-color, var(--accent)) 40%,transparent);font-family:var(--font-display);font-size:1.25rem;font-weight:700;letter-spacing:.02em;box-shadow:0 0 24px color-mix(in srgb,var(--category-color, var(--accent)) 25%,transparent)}.atom-viewer__canvas-wrap{position:relative;overflow:hidden;height:min(48vh,400px);margin-top:1.15rem;border-radius:var(--radius-lg);border:1px solid var(--border-default);background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(99,102,241,.08),transparent),#030508;box-shadow:inset 0 0 60px #00000080}.atom-viewer__canvas-wrap:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px #ffffff0f;z-index:1}.atom-viewer__canvas-wrap canvas{display:block;width:100%!important;height:100%!important}.atom-viewer__hint{position:absolute;right:.85rem;bottom:.75rem;z-index:2;display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border-radius:999px;border:1px solid var(--border-subtle);background:#04060dd1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.7rem;color:var(--text-muted)}.atom-viewer__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin:1.15rem 0 0}.atom-viewer__stats div{padding:.8rem .75rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:#0003;border-left:3px solid color-mix(in srgb,var(--category-color, var(--accent)) 70%,transparent);transition:background .15s ease}.atom-viewer__stats div:hover{background:#00000052}.atom-viewer__stats dt{margin:0;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted)}.atom-viewer__stats dd{margin:.3rem 0 0;font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary)}.element-facts{margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--border-subtle)}.element-facts__title{margin:0 0 .85rem;font-family:var(--font-display);font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}.element-facts__list{display:grid;gap:.6rem;margin:0}.element-facts__list div{padding:.8rem .95rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:#0000002e;transition:border-color .15s ease,background .15s ease}.element-facts__list div:hover{border-color:var(--border-default);background:#00000047}.element-facts__list dt{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.element-facts__list dt:before{content:"";width:.35rem;height:.35rem;border-radius:2px;background:var(--accent);opacity:.7}.element-facts__list dd{margin:.4rem 0 0;font-size:.86rem;line-height:1.55;color:var(--text-secondary)}@media(min-width:900px){.element-facts__list{grid-template-columns:repeat(2,minmax(0,1fr))}.element-facts__list div:last-child:nth-child(odd){grid-column:1 / -1}}@media(max-width:1100px){.app__layout{grid-template-columns:1fr}.atom-viewer{position:static}}@media(max-width:720px){.periodic-table__grid{gap:.2rem;padding:.4rem}.element-tile{min-height:2.55rem;padding:.18rem}.element-tile__name{display:none}.atom-viewer__stats{grid-template-columns:repeat(2,minmax(0,1fr))}.periodic-table__legend li{font-size:.68rem;padding:.25rem .5rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.element-tile:hover{transform:none}}