/* Studio tab — faithful implementation of the Generations design. Styling is applied inline by js/studio.js (copied verbatim from the design) so this file only carries what inline styles can't express: scrollbars, keyframes, placeholders, and the font baseline. Hover states are driven in JS (see the `hover:` option in the el() helper), mirroring the design's `style-hover` attribute. */ #home-tab-studio { padding: 0; height: 100%; min-height: 0; font-family: 'Onest', system-ui, -apple-system, sans-serif; color: oklch(0.93 0.002 250); background: oklch(0.15 0.003 250); } #home-tab-studio .studio-root { width: 100%; height: 100%; } #home-tab-studio ::-webkit-scrollbar { width: 8px; height: 8px; } #home-tab-studio ::-webkit-scrollbar-thumb { background: oklch(0.32 0.008 250); border-radius: 4px; } #home-tab-studio ::-webkit-scrollbar-track { background: transparent; } #home-tab-studio textarea::placeholder, #home-tab-studio input::placeholder { color: oklch(0.5 0.005 250); } /* Overlays (lightbox, scene full, node graph) mount on , so scope by class. */ .studio-overlay ::-webkit-scrollbar { width: 8px; height: 8px; } .studio-overlay ::-webkit-scrollbar-thumb { background: oklch(0.32 0.008 250); border-radius: 4px; } .studio-overlay { font-family: 'Onest', system-ui, -apple-system, sans-serif; } @keyframes studio-genpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes studio-genspin { to { transform: rotate(360deg); } } .studio-spin { animation: studio-genspin 1s linear infinite; } .studio-pulse { animation: studio-genpulse 2s ease infinite; }