@layer tokens{:root{--clr-bg: oklch(0% 0 0);--clr-surface: oklch(12% .02 280);--clr-surface-glass: color-mix(in oklch, var(--clr-surface) 60%, transparent);--clr-surface-hover: oklch(18% .03 280);--clr-border: oklch(25% .02 280);--clr-border-light: oklch(35% .03 280);--clr-text: oklch(95% 0 0);--clr-text-muted: oklch(75% .02 280);--clr-accent: oklch(80% .25 140);--aether-shimmer: oklch(65% .2 295);--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);overflow-x:hidden}#root{width:100%;max-width:1440px;margin:0 auto;padding:var(--space-md);text-align:center}h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-weight:700}button{cursor:pointer;border-radius:var(--radius);border:1px solid var(--clr-border);padding:var(--space-xs) var(--space-md);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);background-color:var(--clr-surface);color:var(--clr-text);transition:all var(--transition)}button:hover:not(:disabled){border-color:var(--clr-accent);background-color:var(--clr-surface-hover);color:var(--clr-accent)}button:disabled{opacity:.4;cursor:not-allowed}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--clr-bg)}::-webkit-scrollbar-thumb{background:var(--clr-border);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--clr-border-light)}}@layer layout{.app-container{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}.mode-transition-enter{opacity:0;transform:translateY(10px)}.mode-transition-active{opacity:1;transform:translateY(0);transition:opacity .4s var(--transition),transform .4s var(--transition)}.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-md);width:100%;max-width:1440px;margin:0 auto;padding:var(--space-md);align-items:start;transition:all .4s var(--transition)}@media(max-width:1024px){.bento-grid{display:flex;flex-direction:column;gap:var(--space-lg)}}.zen-portal{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:800px;margin:0 auto;min-height:70vh;padding:var(--space-md);transition:all .4s var(--transition)}}@layer components{.catalyst-section,.crucible-section{contain:layout paint;width:100%;display:flex;flex-direction:column;gap:var(--space-md)}@media(min-width:1025px){.bento-grid .catalyst-section{grid-column:span 5}.bento-grid .crucible-section{grid-column:span 7}}.nebula-grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:var(--space-sm);padding:var(--space-sm);contain:layout style}.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);will-change:transform}.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)}@keyframes ignition-spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.catalyst-ignition-container{position:relative;border-radius:var(--radius);padding:2px;background:var(--clr-border);transition:background var(--transition);overflow:hidden}.catalyst-ignition-container.active{background:transparent}.catalyst-ignition-container.active:before{content:"";position:absolute;top:50%;left:50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent 0%,var(--clr-accent) 25%,transparent 50%,var(--aether-shimmer) 75%,transparent 100%);animation:ignition-spin 2s linear infinite;z-index:0}.catalyst-content{position:relative;z-index:1;background:var(--clr-bg);border-radius:calc(var(--radius) - 1px);width:100%;padding:var(--space-md)}}