/* SceneCast trial UI styles. Theme tokens (--ink, --paper, --accent, etc.) are declared on `:root` in `templates/_layout.html` and flip when `` is set. All colors below resolve through those variables so the toggle takes effect everywhere. */ html, body { background-color: rgb(var(--paper)); } body { font-family: 'Inter Tight', system-ui, sans-serif; color: rgb(var(--ink)); -webkit-font-smoothing: antialiased; } /* Subtle synthwave starfield grain. Dimmed under light theme so the page surface doesn't get muddy speckle. */ .grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(rgb(var(--accent) / 0.06) 1px, transparent 1px), radial-gradient(rgb(var(--moss) / 0.05) 1px, transparent 1px); background-size: 48px 48px, 32px 32px; background-position: 0 0, 16px 16px; opacity: 0.9; } html[data-theme="light"] .grain::before { opacity: 0.45; } /* Pulsing dot for live polling indicator */ @keyframes pulse-soft { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } .live-dot { animation: pulse-soft 1.4s ease-in-out infinite; box-shadow: 0 0 8px currentColor; } /* Indeterminate progress bar sweep */ @keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } .sweep-bar { animation: sweep 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } /* View transitions */ @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } main > * { animation: fadeUp 280ms ease-out; } /* Dropdown */ .dropdown:not(.open) .dropdown-panel { display: none; } /* Custom radio/checkbox feel via :has() */ .voice-card:has(input:checked) { border-color: rgb(var(--accent)); background-color: rgb(var(--parch)); box-shadow: 0 0 16px rgb(var(--accent) / 0.25); } .asset-card:has(input:checked) { outline: 2px solid rgb(var(--accent)); outline-offset: -2px; box-shadow: 0 0 24px rgb(var(--accent) / 0.3); } /* Nav pill active state */ .nav-pill.active { background-color: rgb(var(--accent)); color: #FFFFFF; box-shadow: 0 0 16px rgb(var(--accent) / 0.6); }