@layer tokens{:root{--clr-bg: oklch(0% 0 0);--clr-surface: oklch(12% 0 0);--clr-surface-hover: oklch(18% 0 0);--clr-border: oklch(25% 0 0);--clr-border-light: oklch(35% 0 0);--clr-text: oklch(95% 0 0);--clr-text-muted: oklch(65% 0 0);--clr-accent: oklch(80% .25 140);--clr-danger: oklch(60% .25 25);--clr-info: oklch(70% .15 250);--bg-color: var(--clr-bg);--text-primary: var(--clr-text);--text-secondary: var(--clr-text-muted);--accent-primary: var(--clr-accent);--accent-secondary: var(--clr-border-light);--glass-border: var(--clr-border);--font-display: "Archivo", system-ui, sans-serif;--font-mono: "Space Grotesk", ui-monospace, monospace;--space-xs: clamp(.25rem, .5vw, .5rem);--space-sm: clamp(.5rem, 1vw, .75rem);--space-md: clamp(1rem, 2vw, 1.5rem);--space-lg: clamp(1.5rem, 3vw, 2rem);--space-xl: clamp(2rem, 4vw, 3rem);--radius: 8px;--radius-sm: var(--radius);--radius-md: var(--radius);--radius-lg: var(--radius);--transition: .15s cubic-bezier(.4, 0, .2, 1)}}@layer utilities{.surface-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);transition:border-color var(--transition),background-color var(--transition)}.glass-panel{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);transition:border-color var(--transition)}.glitch-text{font-weight:700;letter-spacing:-.02em;color:var(--clr-text)}.neon-text{color:var(--clr-accent);font-weight:600}}@layer base{*,*:before,*:after{box-sizing:border-box}:root{font-family:var(--font-mono);line-height:1.5;font-weight:400;color:var(--clr-text);background-color:var(--clr-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--clr-bg)}#root{width:100%;max-width:1280px;margin:0 auto;padding:var(--space-xl);text-align:center}h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.02em;font-weight:700}button{cursor:pointer;border-radius:var(--radius);border:1px solid var(--clr-border);padding:var(--space-xs) var(--space-sm);font-size:.9rem;font-weight:500;font-family:var(--font-mono);background-color:var(--clr-surface);color:var(--clr-text);transition:background-color var(--transition),border-color var(--transition)}button:hover{border-color:var(--clr-border-light);background-color:var(--clr-surface-hover)}button:focus,button:focus-visible{outline:2px solid var(--clr-accent);outline-offset:2px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--clr-bg)}::-webkit-scrollbar-thumb{background:var(--clr-border);border-radius:var(--radius)}::-webkit-scrollbar-thumb:hover{background:var(--clr-border-light)}}@layer layout{.app-container{position:relative;min-height:100vh}.main-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg);align-items:start}@media(min-width:768px){.main-grid{grid-template-columns:1fr 1fr}}.left-col,.right-col{display:flex;flex-direction:column;gap:var(--space-md)}}@layer components{.nebula-grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:var(--space-sm);padding:var(--space-sm)}.element-tile{position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-xs);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);cursor:pointer;transition:border-color var(--transition),background-color var(--transition)}.element-tile:hover{border-color:var(--clr-border-light);background-color:var(--clr-surface-hover)}.element-tile-selected{border:1px solid var(--clr-accent)!important;background-color:color-mix(in srgb,var(--clr-accent) 15%,transparent)!important}.element-symbol{font-family:var(--font-display);font-weight:700;font-size:1.4rem;align-self:center;margin-top:-5px}.element-name{font-size:.55rem;line-height:1;text-align:center;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;color:var(--clr-text-muted)}.element-atomic{font-size:.6rem;color:var(--clr-text-muted)}}