/* Design tokens. * * Light is the base definition; dark overrides only the values. Themes are * selected by data-theme on , which common.js resolves from localStorage * or the system preference before first paint - so "system" is a stored choice, * never an unresolved state, and nothing in the markup needs a theme variant. */ :root { --bg: 248 250 252; --surface: 255 255 255; --surface2: 241 245 249; --fg: 15 23 42; --fg2: 100 116 139; --fg3: 148 163 184; --edge: 226 232 240; --accent: 99 102 241; --accent-hover: 79 70 229; --success: 16 185 129; --warning: 245 158 11; --danger: 239 68 68; --code: 15 23 42; --shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 12px rgb(15 23 42 / 0.04); --shadow-raised: 0 2px 4px rgb(15 23 42 / 0.06), 0 12px 28px rgb(15 23 42 / 0.08); } [data-theme="dark"] { --bg: 9 9 11; --surface: 17 17 19; --surface2: 24 24 27; --fg: 250 250 250; --fg2: 161 161 170; --fg3: 113 113 122; --edge: 39 39 42; --accent: 129 140 248; --accent-hover: 99 102 241; --success: 52 211 153; --warning: 251 191 36; --danger: 248 113 113; --code: 5 5 5; /* Shadows read as grime on near-black; borders carry the elevation instead. */ --shadow-card: none; --shadow-raised: none; } * { border-color: rgb(var(--edge)); } html { scroll-behavior: smooth; } body { background: rgb(var(--bg)); color: rgb(var(--fg)); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; } /* Theme changes animate, but only the properties that actually differ - a blanket transition makes every hover feel laggy. */ body, .card, .nav, .surface-panel { transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- surfaces ---------- */ .card { background: rgb(var(--surface)); border: 1px solid rgb(var(--edge)); border-radius: 16px; box-shadow: var(--shadow-card); } .card-raised { box-shadow: var(--shadow-raised); } .nav { background: rgb(var(--bg) / 0.82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid rgb(var(--edge)); } /* ---------- controls ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 10px; font-size: 0.875rem; font-weight: 500; padding: 0.625rem 1.125rem; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; white-space: nowrap; cursor: pointer; } .btn-primary { background: rgb(var(--accent)); color: #fff; } .btn-primary:hover:not(:disabled) { background: rgb(var(--accent-hover)); } .btn-secondary { background: rgb(var(--surface)); color: rgb(var(--fg)); border: 1px solid rgb(var(--edge)); } .btn-secondary:hover:not(:disabled) { background: rgb(var(--surface2)); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .field { background: rgb(var(--surface)); border: 1px solid rgb(var(--edge)); border-radius: 12px; color: rgb(var(--fg)); transition: border-color 160ms ease, box-shadow 160ms ease; } .field:focus-within, .field:focus { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.16); } .field::placeholder { color: rgb(var(--fg3)); } :focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; } /* ---------- status semantics ---------- * Indigo means Zeroth is doing something; green means Zeroth proved something. * Green is deliberately absent from the brand surface so it only ever appears * as evidence. */ .pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .pill-verified { background: rgb(var(--success) / 0.12); color: rgb(var(--success)); } .pill-running { background: rgb(var(--accent) / 0.12); color: rgb(var(--accent)); } .pill-warning { background: rgb(var(--warning) / 0.14); color: rgb(var(--warning)); } .pill-failed { background: rgb(var(--danger) / 0.12); color: rgb(var(--danger)); } .pill-idle { background: rgb(var(--surface2)); color: rgb(var(--fg3)); } .dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: none; } .pulse { animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---------- code + terminal ---------- * Code keeps a dark ground in both themes: it reads as a distinct artifact * surface rather than page furniture, and it matches where the YAML will live. */ .code-surface { background: rgb(var(--code)); color: #e4e4e7; border: 1px solid rgb(var(--edge)); } [data-theme="dark"] .code-surface { border-color: rgb(var(--edge)); } .code-surface pre, .code-surface code { color: #e4e4e7; } .scroll-thin::-webkit-scrollbar { width: 10px; height: 10px; } .scroll-thin::-webkit-scrollbar-track { background: transparent; } .scroll-thin::-webkit-scrollbar-thumb { background: rgb(var(--fg3) / 0.35); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } .scroll-thin::-webkit-scrollbar-thumb:hover { background: rgb(var(--fg3) / 0.6); background-clip: content-box; } /* ---------- workflow rail ---------- */ .step-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.08em; color: rgb(var(--fg3)); } .step-icon { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgb(var(--surface2)); color: rgb(var(--fg2)); border: 1px solid rgb(var(--edge)); flex: none; } /* is-core marks a step that always runs; is-active marks one running now. Both are indigo, because both are Zeroth doing something. is-done is green and is therefore only ever correct once a step has actually completed on a real run - never as decoration on a static page, where nothing has been proved yet. */ .step.is-core .step-icon { background: rgb(var(--accent) / 0.12); color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.35); } .step.is-active .step-icon { background: rgb(var(--accent) / 0.12); color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.35); } .step.is-done .step-icon { background: rgb(var(--success) / 0.12); color: rgb(var(--success)); border-color: rgb(var(--success) / 0.3); } /* ---------- checklist ---------- */ .check { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.3125rem 0; } .check-mark { width: 1.125rem; flex: none; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; line-height: 1.5rem; } .check.pending .check-mark { color: rgb(var(--fg3)); } .check.active .check-mark { color: rgb(var(--accent)); } .check.done .check-mark { color: rgb(var(--success)); } .check.failed .check-mark { color: rgb(var(--danger)); } .check.pending .check-text { color: rgb(var(--fg3)); } /* Radio cards: the input stays focusable and screen-reader visible, the card is the affordance. */ .choice input { position: absolute; opacity: 0; width: 0; height: 0; } .choice-body { border: 1px solid rgb(var(--edge)); border-radius: 14px; background: rgb(var(--surface)); padding: 1rem; height: 100%; transition: border-color 160ms ease, background-color 160ms ease; } .choice:hover .choice-body { border-color: rgb(var(--fg3)); } .choice input:checked + .choice-body { border-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.06); } .choice input:focus-visible + .choice-body { box-shadow: 0 0 0 3px rgb(var(--accent) / 0.2); } /* Utility classes set display:flex here, so the hidden state needs to win. */ #tryout-verdict.hidden { display: none; }