Repository Public
1@import "tailwindcss";23@theme {4 /* Light theme. Text tokens are checked for WCAG AA on bg, surface and surface-2. */5 --color-bg: #f6f7f9;6 --color-surface: #ffffff;7 --color-surface-2: #eef1f5;8 --color-line: rgb(15 23 42 / 0.09);9 --color-line-strong: rgb(15 23 42 / 0.18);10 --color-accent: #1d5fd1;11 --color-accent-soft: #e8f0fd;12 --color-body: #3d4757;13 --color-fg: #0c1322;14 --color-mute: #5b6676;15 --color-ok: #076a40;16 --color-warn: #8a4b00;17 --color-danger: #b42318;18 /* Data marks (chart series and meters); never used for text. */19 --color-viz-cpu: #2a78d6;20 --color-viz-mem: #eb6834;21 --color-viz-gpu: #1baf7a;22 --color-viz-track: #dbe8fa;23 --color-viz-warn: #d98a00;24 --color-viz-warn-track: #fbe9c8;25 --color-viz-danger: #d93a3a;26 --color-viz-danger-track: #f9d6d6;27 --color-viz-grid: #e6e9ee;28 --font-sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif;29 --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;30 --font-display: var(--font-display), "Iowan Old Style", Georgia, serif;31 --shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 16px -6px rgb(15 23 42 / 0.08);32 --shadow-lift: 0 2px 4px rgb(15 23 42 / 0.05), 0 14px 32px -12px rgb(15 23 42 / 0.18);33}3435html { background: var(--color-bg); color-scheme: light; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }36body { background: var(--color-bg); color: var(--color-fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }37::selection { background: rgb(29 95 209 / 0.18); }38:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }3940@layer components {41 .shell { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: 1.125rem; }42 @media (min-width: 768px) { .shell { padding-inline: 2.25rem; } }43 @media (min-width: 1280px) { .shell { padding-inline: 3rem; } }44 .eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }45 .label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-mute); }46 .display { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }47 .display em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--color-accent); }48 .h2 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.75rem); text-wrap: balance; }49 .prose-tech { color: var(--color-body); font-size: 1.0625rem; line-height: 1.7; max-width: 62ch; }50 .rule { border-top: 1px solid var(--color-line); }51 .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }52 .card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 1rem; box-shadow: var(--shadow-card); }53 .card-hover { transition: box-shadow .2s, transform .2s, border-color .2s; }54 .card-hover:hover { box-shadow: var(--shadow-lift); border-color: var(--color-line-strong); transform: translateY(-2px); }55 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.7rem 1.25rem; border-radius: 999px; font-size: 0.9375rem; font-weight: 500; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }56 .btn-primary { background: var(--color-fg); color: #fff; box-shadow: var(--shadow-card); }57 .btn-primary:hover { background: var(--color-accent); }58 .btn-ghost { border: 1px solid var(--color-line-strong); color: var(--color-fg); background: var(--color-surface); }59 .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }60 .link { color: var(--color-fg); text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 0.3em; transition: text-decoration-color .2s, color .2s; }61 .link:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }62 .field { width: 100%; background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: 0.625rem; padding: 0.7rem 0.85rem; color: var(--color-fg); font-size: 1rem; }63 .field:hover { border-color: rgb(15 23 42 / 0.4); }64 .field[aria-invalid="true"] { border-color: var(--color-danger); }65 select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-mute) 50%), linear-gradient(135deg, var(--color-mute) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }66 .photo-frame { position: relative; overflow: hidden; background: var(--color-surface-2); border: 1px solid var(--color-line); border-radius: 1.25rem; box-shadow: var(--shadow-card); }67 .tick::before { content: ""; display: inline-block; width: 1.25rem; height: 1px; background: var(--color-accent); margin-right: 0.75rem; vertical-align: middle; }68 .chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-body); font-size: 0.8125rem; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }69 .chip:hover { border-color: var(--color-accent); }70 .chip[aria-pressed="true"] { background: var(--color-fg); border-color: var(--color-fg); color: #fff; }71 .live-dot { position: relative; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--color-ok); flex: none; }72 .live-dot[data-state="off"] { background: var(--color-mute); }73 .live-dot[data-state="warn"] { background: var(--color-viz-warn); }74}7576/* Motion: scroll-driven reveals without JavaScript; fully disabled for reduced motion. */77@media (prefers-reduced-motion: no-preference) {78 @supports (animation-timeline: view()) {79 .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }80 .parallax { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }81 }82 .trace { stroke-dasharray: 4 7; animation: trace 2.4s linear infinite; }83 .hero-in { animation: heroin .8s cubic-bezier(.2,.7,.2,1) both; }84 .hero-in-2 { animation: heroin .8s .1s cubic-bezier(.2,.7,.2,1) both; }85 .hero-in-3 { animation: heroin .8s .2s cubic-bezier(.2,.7,.2,1) both; }86 .live-dot[data-state="on"]::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid var(--color-ok); opacity: 0; animation: ping 2.2s cubic-bezier(0,0,.2,1) infinite; }87 .meter-fill { transition: width .6s cubic-bezier(.2,.7,.2,1); }88}89@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }90@keyframes drift { from { transform: translateY(-3%) scale(1.06); } to { transform: translateY(3%) scale(1.06); } }91@keyframes trace { to { stroke-dashoffset: -22; } }92@keyframes heroin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }93@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.5); opacity: 0; } }94@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }9596dialog::backdrop { background: rgb(246 247 249 / 0.97); }97