/* Fonts are linked from each document's , not @import-ed here: an @import inside a stylesheet cannot start downloading until this file has itself been fetched and parsed, which serialises two round trips. */ /* ========================================================================== Design tokens — from design-system/winregistry-org/MASTER.md Three deliberate deviations from the generated palette, all contrast-driven: 1. --color-destructive was #22C55E (green). Green for "destructive" is semantically wrong, so destructive is red and success is a separate token. 2. Card background was #020617, identical to the page background — cards would have been invisible. Surfaces use --color-muted instead. 3. Accent #A16207 on #020617 measures 4.32:1 — under the 4.5:1 floor for text. It is kept for solid fills (white on it is 4.67:1) and a lighter --color-accent-text (#F0B429, 10.8:1) carries accent-coloured text. ========================================================================== */ :root { color-scheme: dark; --color-primary: #0f172a; --color-on-primary: #ffffff; --color-secondary: #1e293b; --color-accent: #a16207; --color-accent-hover: #b8730a; --color-accent-text: #f0b429; --color-background: #020617; --color-foreground: #f8fafc; --color-muted: #1a1e2f; --color-muted-foreground: #94a3b8; --color-border: #334155; --color-destructive: #f87171; --color-success: #4ade80; --color-ring: #f0b429; --surface: rgba(26, 30, 47, 0.72); --surface-solid: #131728; --glass-border: rgba(248, 250, 252, 0.09); --glass-blur: 14px; --hero-glow-a: rgba(161, 98, 7, 0.20); --hero-glow-b: rgba(51, 65, 85, 0.28); --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.34); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.48); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; --duration: 200ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --content: 1120px; } /* Light theme. The generated system is dark-only, but the pre-delivery checklist requires light-mode contrast to be verified, so both exist. */ :root[data-theme='light'] { color-scheme: light; --color-on-primary: #ffffff; --color-accent: #8a5406; --color-accent-hover: #6f4305; --color-accent-text: #7a4a05; --color-background: #f8fafc; --color-foreground: #0f172a; --color-muted: #eef2f7; --color-muted-foreground: #4a5568; --color-border: #cbd5e1; --color-destructive: #b91c1c; /* #15803d measured 4.46:1 on the light card surface — just under the floor. */ --color-success: #166534; --color-ring: #8a5406; --surface: rgba(255, 255, 255, 0.78); --surface-solid: #ffffff; --glass-border: rgba(15, 23, 42, 0.10); --hero-glow-a: rgba(161, 98, 7, 0.12); --hero-glow-b: rgba(148, 163, 184, 0.22); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.10); --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.14); } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Anchors must not land under the fixed header. */ scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-background); color: var(--color-foreground); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; font-weight: 400; /* Guards the "no horizontal scroll on mobile" rule against any one overflowing child taking the whole page with it. */ overflow-x: hidden; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); } h1, h2, h3, h4 { font-family: var(--font-mono); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--space-md); text-wrap: balance; } h1 { font-size: clamp(2rem, 5.2vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 3.4vw, 2.125rem); } h3 { font-size: clamp(1.125rem, 2vw, 1.3125rem); } p { margin: 0 0 var(--space-md); } p:last-child { margin-bottom: 0; } a { color: var(--color-accent-text); text-decoration-color: color-mix(in srgb, var(--color-accent-text) 45%, transparent); text-underline-offset: 3px; transition: color var(--duration) var(--ease); } a:hover { color: var(--color-foreground); } img, svg { max-width: 100%; } code, kbd, pre { font-family: var(--font-mono); } :focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; border-radius: var(--radius-sm); } .skip-link { position: absolute; left: var(--space-md); top: -100%; z-index: 100; padding: var(--space-sm) var(--space-md); background: var(--color-accent); color: #fff; border-radius: var(--radius-md); font-weight: 600; transition: top var(--duration) var(--ease); } .skip-link:focus { top: var(--space-md); color: #fff; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--space-lg); } section { padding-block: var(--space-3xl); } .section-head { max-width: 46rem; margin-bottom: var(--space-2xl); } .section-head p { color: var(--color-muted-foreground); font-size: 1.0625rem; margin-bottom: 0; } /* Small utilities that exist so no element needs a style="" attribute. The Content-Security-Policy sent by Vercel omits 'unsafe-inline' for styles, so an inline style attribute would simply not apply. */ .mt-lg { margin-top: var(--space-lg); } .ml-auto { margin-left: auto; } .lead { font-size: 1.0625rem; } .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-sm); } /* ========================================================================== Header — restrained glassmorphism: frosted, not decorative ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* backdrop-filter over a transparent background is unreadable where it is unsupported, so fall back to a solid surface. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--surface-solid); } } .site-header .wrap { display: flex; align-items: center; gap: var(--space-lg); min-height: 4rem; } .brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-mono); font-weight: 700; font-size: 1.0625rem; color: var(--color-foreground); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; } .brand:hover { color: var(--color-accent-text); } .brand svg { flex: none; color: var(--color-accent-text); } .brand .brand-tld { color: var(--color-muted-foreground); font-weight: 400; } .nav { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; } .nav a { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); color: var(--color-muted-foreground); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); } .nav a:hover, .nav a[aria-current='page'] { color: var(--color-foreground); background: color-mix(in srgb, var(--color-foreground) 8%, transparent); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; /* 44x44 minimum touch target. */ width: 2.75rem; height: 2.75rem; flex: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-muted-foreground); cursor: pointer; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); } .icon-btn:hover { color: var(--color-foreground); border-color: var(--color-accent-text); background: color-mix(in srgb, var(--color-foreground) 6%, transparent); } .nav-toggle { display: none; } .theme-toggle .icon-moon { display: none; } :root[data-theme='light'] .theme-toggle .icon-sun { display: none; } :root[data-theme='light'] .theme-toggle .icon-moon { display: block; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 2.75rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .btn-primary { background: var(--color-accent); color: #ffffff; box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--color-accent-hover); color: #ffffff; /* translateY only — no scale, which would shift neighbouring layout. */ transform: translateY(-1px); box-shadow: var(--shadow-lg); } .btn-secondary { background: transparent; color: var(--color-foreground); border-color: var(--color-border); } .btn-secondary:hover { color: var(--color-foreground); border-color: var(--color-accent-text); background: color-mix(in srgb, var(--color-foreground) 7%, transparent); transform: translateY(-1px); } .btn svg { flex: none; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem) var(--space-3xl); overflow: hidden; } /* The "light source / depth" the glassmorphism spec calls for, kept to two soft radial washes so body text never loses contrast. */ .hero::before { content: ''; position: absolute; inset: -30% -10% auto; height: 70vh; background: radial-gradient(58% 52% at 22% 32%, var(--hero-glow-a), transparent 68%), radial-gradient(50% 48% at 78% 12%, var(--hero-glow-b), transparent 70%); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } .hero-inner { max-width: 50rem; } .badge { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0.375rem 0.875rem; margin-bottom: var(--space-lg); border: 1px solid var(--glass-border); border-radius: 999px; background: var(--surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-muted-foreground); } .badge .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-success); flex: none; } .hero p.lede { font-size: clamp(1.0625rem, 2vw, 1.1875rem); color: var(--color-muted-foreground); max-width: 42rem; margin-bottom: var(--space-xl); } .hero strong { color: var(--color-foreground); font-weight: 600; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xl); } .hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); list-style: none; margin: 0; padding-left: 0; } .hero-facts dt { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700; color: var(--color-accent-text); } .hero-facts dd { margin: var(--space-xs) 0 0; font-size: 0.875rem; color: var(--color-muted-foreground); } /* ========================================================================== Terminal / code blocks ========================================================================== */ .terminal { border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-lg); overflow: hidden; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .terminal, .badge { background: var(--surface-solid); } } .terminal-bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--glass-border); background: color-mix(in srgb, var(--color-foreground) 4%, transparent); } .terminal-bar .title { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-muted-foreground); } .terminal-bar .copy { margin-left: auto; } .copy-btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2rem; padding: 0.25rem 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-muted-foreground); font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease); } .copy-btn:hover { color: var(--color-foreground); border-color: var(--color-accent-text); } .copy-btn[data-state='done'] { color: var(--color-success); border-color: var(--color-success); } /* Wide content scrolls inside its own container, never the page. */ pre { margin: 0; padding: var(--space-md); overflow-x: auto; font-size: 0.875rem; line-height: 1.7; tab-size: 2; } pre code { color: var(--color-foreground); } .tok-prompt { color: var(--color-accent-text); user-select: none; } .tok-cmd { color: var(--color-foreground); font-weight: 600; } .tok-flag { color: #7dd3fc; } .tok-str { color: var(--color-success); } .tok-dim { color: var(--color-muted-foreground); } :root[data-theme='light'] .tok-flag { color: #0369a1; } p code, li code, td code, dd code { padding: 0.125rem 0.375rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-muted); font-size: 0.875em; color: var(--color-foreground); word-break: break-word; } /* ========================================================================== Cards / grids ========================================================================== */ .grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .card { padding: var(--space-lg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); /* MASTER.md set this to the page background, which made cards invisible. */ background: var(--color-muted); box-shadow: var(--shadow-md); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); } .card:hover { border-color: color-mix(in srgb, var(--color-accent-text) 40%, transparent); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card h3 { margin-bottom: var(--space-sm); } .card p { color: var(--color-muted-foreground); font-size: 0.9375rem; margin-bottom: 0; } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-md); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-accent-text); } /* ========================================================================== Confidence table ========================================================================== */ .table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-muted); } table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.9375rem; } th, td { padding: var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; } thead th { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-foreground); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } td .muted { color: var(--color-muted-foreground); } /* Confidence is never signalled by colour alone — each pill carries its label, and the icon shape differs per level. */ .pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border-radius: 999px; border: 1px solid currentColor; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .pill-high { color: var(--color-success); } .pill-medium { color: var(--color-accent-text); } .pill-low { color: #fb923c; } .pill-refuse { color: var(--color-destructive); } :root[data-theme='light'] .pill-low { color: #c2410c; } /* ========================================================================== Steps ========================================================================== */ .steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); } .steps li { position: relative; padding-left: 3.25rem; counter-increment: step; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-muted); font-family: var(--font-mono); font-weight: 700; color: var(--color-accent-text); } .steps h3 { margin-bottom: var(--space-xs); } .steps p { color: var(--color-muted-foreground); font-size: 0.9375rem; } /* ========================================================================== Callout ========================================================================== */ .callout { display: flex; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent-text); border-radius: var(--radius-md); background: var(--color-muted); } .callout svg { flex: none; color: var(--color-accent-text); margin-top: 0.125rem; } .callout p { font-size: 0.9375rem; color: var(--color-muted-foreground); } .callout strong { color: var(--color-foreground); } /* ========================================================================== CTA ========================================================================== */ .cta { padding: var(--space-2xl); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: radial-gradient(70% 140% at 50% 0%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 72%), var(--color-muted); text-align: center; } .cta p { max-width: 38rem; margin-inline: auto; color: var(--color-muted-foreground); } .cta .hero-actions { justify-content: center; margin-bottom: 0; } /* ========================================================================== Docs layout ========================================================================== */ .docs { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; padding-block: var(--space-2xl); } .toc { position: sticky; top: 5rem; max-height: calc(100vh - 7rem); overflow-y: auto; padding-right: var(--space-sm); } .toc h2 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: var(--space-sm); } .toc ul { list-style: none; margin: 0 0 var(--space-lg); padding: 0; } .toc a { display: block; padding: 0.375rem var(--space-sm); border-left: 2px solid var(--color-border); color: var(--color-muted-foreground); font-size: 0.875rem; text-decoration: none; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease); } .toc a:hover, .toc a.is-active { color: var(--color-foreground); border-left-color: var(--color-accent-text); } .docs-body { min-width: 0; } .docs-body section { padding-block: 0 var(--space-2xl); } .docs-body h2 { scroll-margin-top: 5.5rem; } .docs-body h3 { margin-top: var(--space-xl); scroll-margin-top: 5.5rem; } .docs-body p, .docs-body li { color: var(--color-muted-foreground); } .docs-body strong { color: var(--color-foreground); } .docs-body ul { padding-left: 1.125rem; } .docs-body li { margin-bottom: var(--space-xs); } .docs-body .terminal, .docs-body .table-scroll { margin-bottom: var(--space-lg); } /* ========================================================================== Footer ========================================================================== */ .site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-xl); margin-top: var(--space-2xl); } .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); } .site-footer p { margin: 0; font-size: 0.875rem; color: var(--color-muted-foreground); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-left: auto; list-style: none; padding: 0; } .footer-links a { font-size: 0.875rem; color: var(--color-muted-foreground); text-decoration: none; } .footer-links a:hover { color: var(--color-foreground); } /* ========================================================================== Scroll reveal Only armed when JS is running (html.js), so the no-JS and crawler view keeps every section visible — the motion spec's explicit warning. ========================================================================== */ .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js .reveal { opacity: 1; transform: none; } } /* ========================================================================== Responsive — 1024 / 768 / 375 ========================================================================== */ @media (max-width: 1024px) { .docs { grid-template-columns: 1fr; } .toc { position: static; max-height: none; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-muted); } .toc ul { margin-bottom: var(--space-md); } .toc ul:last-child { margin-bottom: 0; } } @media (max-width: 768px) { section { padding-block: var(--space-2xl); } .nav-toggle { display: inline-flex; order: 3; } .nav { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; gap: var(--space-xs); padding-bottom: var(--space-md); margin-left: 0; } .nav.is-open { display: flex; } .nav a { padding: 0.75rem var(--space-md); } .site-header .wrap { flex-wrap: wrap; gap: var(--space-sm); } .theme-toggle { margin-left: auto; order: 2; } .hero-actions .btn { flex: 1 1 100%; } .hero-facts { gap: var(--space-lg); } .cta { padding: var(--space-xl) var(--space-lg); } .site-footer .wrap { flex-direction: column; align-items: flex-start; } .footer-links { margin-left: 0; gap: var(--space-md); } } @media (max-width: 380px) { .wrap { padding-inline: var(--space-md); } .hero-facts { flex-direction: column; gap: var(--space-md); } } @media print { .site-header, .toc, .hero::before, .copy-btn { display: none !important; } body { background: #fff; color: #000; } }