(the page's primary heading); slides 2 + 3 use
so each page has exactly one h1 — required for SEO + WCAG heading
hierarchy. The font-size scale collapses h1 + h2 to identical values
in this slot. */
.hero h1,
.hero h2 {
margin-bottom: 1.2rem;
letter-spacing: -0.03em;
font-size: clamp(2rem, 5vw, 3.25rem);
}
.hero-lead {
font-size: 1.18rem;
max-width: 560px;
margin-bottom: 2rem;
color: var(--text-secondary);
}
.hero-actions {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.hero-meta {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--text-muted);
}
.hero-meta span {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.hero-meta svg { width: 14px; height: 14px; color: var(--success); }
/* Hero rotating slider (3 personas: engineer / beginner / compliance).
Mechanics: cross-fade transitions, auto-rotate (8s) with hover-pause,
keyboard ←/→, swipe on touch, and a reduced-motion fallback that
stacks all slides linearly. The badge + cross-cutting meta strip stay
visible across slides — only the title/lead/CTA pair rotates.
Layout note: ``.hero-personas`` becomes the grid item that replaces
the old left-column ````. The right-column ``.hero-terminal``
keeps its original placement; the grid template is unchanged. */
.hero-personas {
position: relative;
}
.hero-slides {
position: relative;
/* min-height ensures the layout doesn't collapse during fade
transitions when the active slide is positioned absolutely; the
value is a comfortable cap for the longest pitch (compliance
slide currently around 4 lines of body copy at desktop width). */
min-height: 320px;
}
@media (max-width: 980px) {
.hero-slides { min-height: 360px; }
}
@media (max-width: 600px) {
.hero-slides { min-height: 380px; }
}
.hero-slide {
position: absolute;
inset: 0 0 auto 0;
opacity: 0;
visibility: hidden;
transform: translateX(12px);
transition:
opacity 320ms ease-out,
transform 320ms ease-out,
visibility 0s linear 320ms;
pointer-events: none;
}
.hero-slide.is-active {
position: relative;
opacity: 1;
visibility: visible;
transform: translateX(0);
transition:
opacity 320ms ease-out,
transform 320ms ease-out,
visibility 0s linear 0s;
pointer-events: auto;
}
/* Slider pagination: 3 dots, the active dot expands and animates a
linear progress fill that mirrors the auto-rotate timer (8s). */
.hero-slider-controls {
display: flex;
gap: 0.6rem;
align-items: center;
margin-top: 1.4rem;
margin-bottom: 1.4rem;
}
.hero-slider-dot {
position: relative;
width: 24px;
height: 4px;
padding: 0;
border: none;
background: var(--border-strong);
border-radius: 999px;
cursor: pointer;
overflow: hidden;
transition: background 200ms ease, width 280ms ease;
}
.hero-slider-dot:hover { background: var(--text-muted); }
.hero-slider-dot:focus-visible {
outline: 2px solid var(--ember-bright);
outline-offset: 3px;
}
@media (hover: none) {
/* Touch viewports: expand the *tap target* without inflating the
visual pill. A transparent ``::after`` extends the click area to
~44×44 around the 24×4 dot so a thumb hits reliably; the
animated ``.dot-fill`` child is untouched so the auto-rotate
progress animation still draws over the original pill geometry.
``hero-slider-controls`` gets gap relaxation so the extended
hitboxes don't overlap. */
.hero-slider-dot::after {
content: '';
position: absolute;
inset: -20px -10px;
}
.hero-slider-controls { gap: 1rem; }
}
.hero-slider-dot.is-active {
width: 56px;
background: var(--border-strong);
}
.hero-slider-dot .dot-fill {
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--ember-bright), var(--steel-bright));
transform-origin: left center;
transform: scaleX(0);
border-radius: inherit;
}
.hero-slider-dot.is-active .dot-fill {
animation: hero-slider-fill 8s linear forwards;
}
.hero-personas[data-paused="true"] .hero-slider-dot.is-active .dot-fill {
animation-play-state: paused;
}
@keyframes hero-slider-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Prev / next chevrons. Ghost by default; reveal on hover or
keyboard focus inside the slider. Hidden on small screens — touch
users get the swipe gesture instead. */
.hero-slider-arrow {
position: absolute;
top: 35%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
/* Theme-aware: previously hardcoded a dark rgba background with
``color: var(--text)``. In light mode that resolved to dark text
on dark bg, so the chevron disappeared. Mirror the theme by
using the same elevated-surface tokens the rest of the chrome
uses. */
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: 50%;
color: var(--text);
cursor: pointer;
opacity: 0;
transition: opacity 200ms ease, background 200ms ease, border-color 200ms ease;
z-index: 2;
}
.hero-slider-arrow svg { width: 14px; height: 14px; }
.hero-slider-arrow.prev { left: -52px; }
.hero-slider-arrow.next { right: -52px; }
.hero-personas:hover .hero-slider-arrow,
.hero-personas:focus-within .hero-slider-arrow {
opacity: 0.9;
}
.hero-slider-arrow:hover {
opacity: 1;
background: var(--bg-elev);
border-color: var(--ember-bright);
}
.hero-slider-arrow:focus-visible {
opacity: 1;
outline: 2px solid var(--ember-bright);
outline-offset: 2px;
}
@media (max-width: 1100px) {
.hero-slider-arrow.prev { left: -16px; }
.hero-slider-arrow.next { right: -16px; }
}
@media (max-width: 720px) {
.hero-slider-arrow { display: none; }
}
/* Reduced-motion: stack all slides, hide pagination + arrows,
neutralise the timer animation. Each slide becomes its own block
the user can read linearly. */
@media (prefers-reduced-motion: reduce) {
.hero-slide {
position: relative !important;
inset: auto !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
margin-bottom: 1.6rem;
}
.hero-slide:not(:first-child) {
border-top: 1px dashed var(--border);
padding-top: 1.4rem;
}
.hero-slider-controls,
.hero-slider-arrow { display: none !important; }
.hero-slides { min-height: 0; }
.hero-slider-dot.is-active .dot-fill { animation: none; }
}
/* Hero terminal */
.hero-terminal {
background: var(--code-bg);
border: 1px solid var(--code-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
overflow: hidden;
position: relative;
}
.hero-terminal::before {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(135deg, rgba(249,115,22,.4), transparent 40%, rgba(14,165,233,.4));
border-radius: var(--radius);
z-index: -1;
filter: blur(8px);
opacity: 0.35;
}
.terminal-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1rem;
background: linear-gradient(180deg, #1a1f2c, #141823);
border-bottom: 1px solid var(--code-border);
font-family: var(--font-mono);
font-size: 0.78rem;
/* Theme-locked: this bar is a dark code surface in BOTH themes,
so the title text uses --code-comment (theme-locked grey) — not
--text-muted, which flips to a dim grey-on-white in light mode
and disappears against the dark gradient. */
color: var(--code-comment);
}
.terminal-bar .dots {
display: flex;
gap: 6px;
margin-right: 0.6rem;
}
.terminal-bar .dot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.terminal-bar .dot.r { background: var(--dot-red); }
.terminal-bar .dot.y { background: var(--dot-yellow); }
.terminal-bar .dot.g { background: var(--dot-green); }
.terminal-body {
padding: 1.2rem 1.3rem;
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.65;
color: var(--code-text);
overflow-x: auto;
}
.terminal-body .prompt { color: var(--ember-bright); }
/* The terminal background is theme-locked dark (--code-bg stays dark
in both themes), so token colors here MUST use theme-locked code-*
variables — never page text vars (--text / --text-secondary /
--text-muted) which flip to dark in light mode and become
invisible on the dark terminal. The ``forgelm`` command itself
was disappearing in light mode for exactly this reason. */
.terminal-body .cmd { color: var(--code-text); }
.terminal-body .flag { color: var(--steel-bright); }
.terminal-body .arg { color: #6ee7b7; }
.terminal-body .comment { color: var(--code-comment); font-style: italic; }
.terminal-body .ok { color: var(--success); }
.terminal-body .warn { color: var(--warn); }
.terminal-body .out { color: var(--code-text); opacity: 0.78; }
.terminal-body .blink {
display: inline-block;
width: 8px; height: 1.05em;
background: var(--ember-bright);
vertical-align: text-bottom;
margin-left: 2px;
animation: blink 1.1s step-end infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
/* ── Stats ───────────────────────────────────────────────── */
.stats {
padding: 3rem 0 4rem;
border-bottom: 1px solid var(--border);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
text-align: center;
}
@media (max-width: 720px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-value {
font-family: var(--font-sans);
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--ember), var(--steel));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
}
/* ── Pipeline (trainer flow) ─────────────────────────────── */
.pipeline {
background: var(--bg-alt);
position: relative;
}
.pipeline-flow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
margin-top: 2.5rem;
position: relative;
}
@media (max-width: 880px) {
.pipeline-flow { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
.pipeline-flow { grid-template-columns: repeat(2, 1fr); }
}
.pipeline-stage {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.2rem 1rem;
text-align: center;
position: relative;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
cursor: default;
}
.pipeline-stage:hover {
border-color: var(--ember);
transform: translateY(-3px);
box-shadow: var(--glow-ember);
}
.pipeline-stage .stage-num {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.pipeline-stage h3 {
font-size: 1.05rem;
margin-bottom: 0.35rem;
color: var(--ember-bright);
}
.pipeline-stage p {
font-size: 0.78rem;
line-height: 1.5;
color: var(--text-muted);
}
/* ── Features grid ───────────────────────────────────────── */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
}
@media (max-width: 980px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.features-grid { grid-template-columns: 1fr; }
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.6rem;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--ember), var(--steel));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-slow);
}
.feature-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: grid;
place-items: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(14,165,233,.14));
border: 1px solid var(--border);
color: var(--ember-bright);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 {
font-size: 1.05rem;
margin-bottom: 0.45rem;
}
.feature-card p {
font-size: 0.92rem;
line-height: 1.6;
}
.feature-card .feature-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.85rem;
}
.feature-tag {
font-family: var(--font-mono);
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
border-radius: 4px;
background: var(--bg-elev);
color: var(--text-muted);
border: 1px solid var(--border);
}
/* Group separator (features.html) */
.feature-group { padding: 4rem 0; }
.feature-group + .feature-group { border-top: 1px solid var(--border); }
.feature-group .group-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.feature-group .group-icon {
width: 56px;
height: 56px;
border-radius: 12px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--ember), var(--ember-deep));
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(249,115,22,.3);
}
.feature-group .group-icon svg { width: 28px; height: 28px; }
.feature-group h2 { margin-bottom: 0.2rem; }
.feature-group .group-header p {
font-size: 1rem;
color: var(--text-secondary);
}
/* ── Use cases ───────────────────────────────────────────── */
.use-cases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.4rem;
}
@media (max-width: 720px) {
.use-cases-grid { grid-template-columns: 1fr; }
}
.use-case {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
padding: 1.5rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color var(--transition);
}
.use-case:hover { border-color: var(--steel); }
.use-case-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: grid;
place-items: center;
background: rgba(14,165,233,.12);
color: var(--steel-bright);
flex-shrink: 0;
border: 1px solid rgba(14,165,233,.25);
}
.use-case h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.use-case p { font-size: 0.9rem; }
.use-case-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.72rem;
margin-top: 0.6rem;
padding: 0.15rem 0.55rem;
border-radius: 4px;
background: rgba(14,165,233,.1);
color: var(--steel-bright);
}
/* ── Code block (standalone) ─────────────────────────────── */
.code-block {
background: var(--code-bg);
border: 1px solid var(--code-border);
border-radius: var(--radius);
overflow: hidden;
margin: 1.5rem 0;
}
.code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 1rem;
border-bottom: 1px solid var(--code-border);
background: rgba(255,255,255,.03);
font-family: var(--font-mono);
font-size: 0.78rem;
/* Theme-locked: the parent .code-block uses --code-bg (always dark
in both themes), so the language tag must use a theme-locked grey
too — --text-muted resolves to dim grey on light theme and
disappears here. */
color: var(--code-comment);
}
.code-block-header .lang {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.code-block-header .lang::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: var(--steel-bright);
}
.code-block-body {
padding: 1rem 1.2rem;
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.65;
color: var(--code-text);
overflow-x: auto;
}
.code-block-body .keyword { color: var(--code-keyword); }
.code-block-body .string { color: var(--code-string); }
.code-block-body .number { color: var(--code-number); }
.code-block-body .comment { color: var(--code-comment); font-style: italic; }
.code-block-body .fn { color: var(--code-fn); }
.code-block-body .key { color: var(--steel-bright); }
.code-block-body .flag { color: var(--steel-bright); }
.code-block-body .prompt { color: var(--ember-bright); user-select: none; }
.copy-btn {
background: none;
border: 1px solid var(--code-border);
/* Theme-locked: lives on the dark .code-block-header bar in both
themes. --code-comment is the in-code default grey — readable
against the dark gradient in both light and dark page themes. */
color: var(--code-comment);
padding: 0.35rem 0.7rem;
border-radius: 4px;
cursor: pointer;
font: 500 0.72rem var(--font-mono);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
min-height: 32px;
}
.copy-btn:hover { color: var(--ember-bright); border-color: var(--ember); }
.copy-btn.copied { color: var(--success); border-color: var(--success); }
@media (max-width: 720px) {
/* iOS HIG 44×44 tap-target floor — the desktop 32px copy button
sits on top of horizontally-scrolling code; thumb-tapping a
32px target while scrolling is unreliable on phones. */
.copy-btn {
min-height: 44px;
padding: 0.5rem 0.95rem;
font-size: 0.78rem;
}
}
/* ── Compliance grid (Articles) ──────────────────────────── */
.articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
margin-top: 2rem;
}
@media (max-width: 880px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .articles-grid { grid-template-columns: 1fr; } }
.article-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.4rem;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
position: relative;
}
.article-card:hover {
border-color: var(--steel);
box-shadow: var(--glow-steel);
}
.article-num {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--steel-bright);
background: rgba(14,165,233,.12);
padding: 0.2rem 0.55rem;
border-radius: 4px;
margin-bottom: 0.7rem;
}
.article-card h3 {
font-size: 1rem;
margin-bottom: 0.35rem;
}
.article-card p {
font-size: 0.88rem;
line-height: 1.55;
}
.article-card .article-evidence {
margin-top: 0.8rem;
padding-top: 0.8rem;
border-top: 1px dashed var(--border);
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-muted);
}
.article-card .article-evidence b {
color: var(--ember-bright);
font-weight: 500;
}
/* ── Steps (quickstart) ──────────────────────────────────── */
.steps {
display: flex;
flex-direction: column;
gap: 2rem;
margin: 2.5rem auto 0;
max-width: 880px;
position: relative;
}
.steps::before {
content: '';
position: absolute;
top: 0;
left: 22px;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--ember), var(--steel));
opacity: 0.4;
}
.step {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
position: relative;
}
.step-num {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ember), var(--ember-deep));
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-family: var(--font-mono);
font-size: 1.1rem;
flex-shrink: 0;
position: relative;
z-index: 1;
box-shadow: 0 4px 12px rgba(249,115,22,.3);
}
.step-content {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.4rem 1.6rem;
}
.step-content h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.step-content p { font-size: 0.95rem; margin-bottom: 0.8rem; }
.step-content .code-block { margin: 0.6rem 0 0; }
/* ── CTA ─────────────────────────────────────────────────── */
.cta {
position: relative;
overflow: hidden;
}
.cta-card {
background: linear-gradient(135deg, var(--bg-card), var(--bg-elev));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 3.5rem 2.5rem;
text-align: center;
position: relative;
overflow: hidden;
max-width: 880px;
margin: 0 auto;
}
.cta-card::before {
content: '';
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 400px;
background:
radial-gradient(ellipse at 30% 50%, rgba(249,115,22,.2), transparent 60%),
radial-gradient(ellipse at 70% 50%, rgba(14,165,233,.18), transparent 60%);
filter: blur(24px);
pointer-events: none;
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 0.8rem; }
.cta-card p {
font-size: 1.05rem;
max-width: 540px;
margin: 0 auto 1.6rem;
}
.cta-actions {
display: flex;
justify-content: center;
gap: 0.8rem;
flex-wrap: wrap;
}
/* ── Page header (sub-pages) ─────────────────────────────── */
.page-header {
padding-top: 8rem;
padding-bottom: 3rem;
position: relative;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, var(--bg-alt), var(--bg));
}
.page-header .eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ember-bright);
margin-bottom: 0.7rem;
}
.page-header h1 {
margin-bottom: 0.8rem;
}
.page-header p {
max-width: 620px;
font-size: 1.08rem;
}
.page-header-aside {
margin-top: 1.4rem !important;
font-size: 0.95rem !important;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
/* Wizard spotlight — the prominent CTA banner that lands between the
quickstart page-header and the canonical 5-step content. Designed
to be impossible to miss without overshadowing the existing manual
reference flow underneath. Two-column layout on desktop: marketing
copy + primary CTA on the left, a small visual diagram on the right
that mimics the wizard's three-stage contract (form → YAML → run).
Mobile collapses to single column. */
.wizard-spotlight {
position: relative;
margin: -1rem 0 3rem;
padding: 2rem 2.2rem;
background:
radial-gradient(ellipse at 0% 0%, rgba(249, 115, 22, .14), transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(14, 165, 233, .12), transparent 55%),
linear-gradient(180deg, var(--bg-elev), var(--bg-card));
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 2.4rem;
align-items: center;
overflow: hidden;
}
.wizard-spotlight::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(249,115,22,.4), transparent 40%, rgba(14,165,233,.4));
opacity: 0.12;
pointer-events: none;
}
.wizard-spotlight > * {
position: relative;
z-index: 1;
}
.wizard-spotlight-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ember-bright);
margin-bottom: 0.7rem;
}
.wizard-spotlight-eyebrow::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 10px var(--ember);
animation: pulse 2s ease-in-out infinite;
}
.wizard-spotlight-title {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.6rem;
line-height: 1.25;
}
.wizard-spotlight-lead {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 1.4rem;
max-width: 540px;
}
.wizard-spotlight-actions {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
}
.wizard-spotlight-meta {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
margin-top: 1rem;
font-size: 0.82rem;
color: var(--text-muted);
}
.wizard-spotlight-meta span {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.wizard-spotlight-meta svg {
width: 14px;
height: 14px;
color: var(--success);
}
/* Visual: three-stage diagram. Each stage is a small card with an
icon + label + tiny snippet showing what the operator gives / gets
at that step. The arrows between cards reinforce the flow. Built
in pure SVG so the icons stay crisp at any zoom. */
.wizard-spotlight-visual {
display: flex;
flex-direction: column;
gap: 0.8rem;
align-items: stretch;
}
.wizard-spotlight-stage {
display: grid;
grid-template-columns: 36px 1fr;
gap: 0.8rem;
padding: 0.8rem 1rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
align-items: center;
font-size: 0.85rem;
}
.wizard-spotlight-stage-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: 8px;
color: var(--ember-bright);
}
.wizard-spotlight-stage-icon svg {
width: 18px;
height: 18px;
}
.wizard-spotlight-stage-label {
font-weight: 600;
color: var(--text);
display: block;
}
.wizard-spotlight-stage-snippet {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-muted);
margin-top: 0.15rem;
}
.wizard-spotlight-arrow {
margin: -0.4rem 0;
text-align: center;
color: var(--text-muted);
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.wizard-spotlight-arrow svg {
width: 14px;
height: 14px;
}
/* Five-step section heading — small introducing label that sits
between the spotlight and the existing ``.steps`` block. Helps the
reader understand they have two equally-valid paths (wizard above
OR manual below). */
.steps-intro {
margin-bottom: 1.6rem;
font-size: 0.86rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.steps-intro::before {
content: '';
display: block;
flex: 1;
height: 1px;
background: var(--border);
min-width: 30px;
}
.steps-intro::after {
content: '';
display: block;
flex: 1;
height: 1px;
background: var(--border);
min-width: 30px;
}
@media (max-width: 900px) {
.wizard-spotlight {
grid-template-columns: 1fr;
gap: 1.6rem;
padding: 1.6rem 1.4rem;
}
.wizard-spotlight-title {
font-size: 1.35rem;
}
}
/* Inline link-styled CTA used by the wizard trigger and similar
"secondary action" affordances inside copy-heavy paragraphs.
Renders like a link but keeps the button semantics so screen
readers announce it as actionable. */
.link-cta {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--ember-bright);
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(251, 146, 60, 0.4);
text-underline-offset: 3px;
transition: color var(--transition), text-decoration-color var(--transition);
}
.link-cta:hover,
.link-cta:focus-visible {
color: var(--ember);
text-decoration-color: var(--ember);
outline: none;
}
.link-cta:focus-visible {
outline: 2px solid var(--ember-bright);
outline-offset: 4px;
border-radius: 2px;
}
/* ── Wizard modal ────────────────────────────────────────── */
/* Modal-as-app dialog used by the quickstart.html in-browser YAML
wizard. Opens via [data-wizard-open] triggers or via the
?wizard=open URL parameter (used by the home-page Beginner-slide
CTA). The dialog stays in the DOM and is toggled visible — keeping
the rendered tree avoids re-mounting the YAML preview on every
open. ARIA: role=dialog + aria-modal=true on the inner container;
the outer wrapper carries [hidden] when closed so the modal is
removed from the accessibility tree entirely. */
.wizard-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
animation: wizard-modal-in 220ms ease-out;
}
.wizard-modal[hidden] { display: none; }
@keyframes wizard-modal-in {
from { opacity: 0; }
to { opacity: 1; }
}
.wizard-backdrop {
position: absolute;
inset: 0;
background: rgba(8, 10, 16, 0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.wizard-dialog {
position: relative;
width: min(1080px, 100%);
/* Use a *definite* height (not max-height) so the inner flex/grid
children get a resolvable frame to overflow against. With only
``max-height``, ``flex: 1`` on .wizard-body resolves its
``flex-basis: 0%`` against an indefinite parent, the body sizes
to content, and the step pane's ``overflow-y: auto`` never fires.
This was the root cause of the "use-case / model / dataset
screens won't scroll" bug — those steps have just enough content
to overflow on smaller laptops, but the dialog was free to grow
so nothing clipped. Fixing the dialog at 720px (or 100vh − 4rem
on small screens) gives the body + pane a definite frame and
scroll fires reliably. */
height: min(720px, calc(100vh - 4rem));
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
overflow: hidden;
animation: wizard-dialog-in 240ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes wizard-dialog-in {
from { opacity: 0; transform: translateY(12px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Header: progress + step counter + detail toggle + close */
.wizard-header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.4rem;
border-bottom: 1px solid var(--border);
background: var(--bg-elev);
}
.wizard-progress {
flex: 1;
display: flex;
align-items: center;
gap: 0.9rem;
}
.wizard-progress-track {
flex: 1;
height: 5px;
background: var(--border);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.wizard-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--ember-bright), var(--steel-bright));
border-radius: inherit;
transition: width 320ms cubic-bezier(.4, 0, .2, 1);
}
.wizard-progress-counter {
font-size: 0.78rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.wizard-header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.wizard-detail-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--text-secondary);
font-size: 0.78rem;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.wizard-detail-toggle:hover,
.wizard-detail-toggle.is-active {
background: var(--bg);
border-color: var(--ember-bright);
color: var(--ember-bright);
}
.wizard-detail-toggle[hidden] { display: none; }
.wizard-close {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
color: var(--text-muted);
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.wizard-close svg { width: 18px; height: 18px; }
.wizard-close:hover {
background: var(--bg);
color: var(--text);
border-color: var(--border-strong);
}
/* Body: 60/40 split — step pane + YAML preview.
Three things that all have to be true for the step pane to scroll:
1. .wizard-dialog has a *definite* height (set above as
``height: min(720px, calc(100vh - 4rem))``). Without that, the
flex chain has no frame to overflow against.
2. .wizard-body has ``min-height: 0`` so it can shrink under
``flex: 1`` instead of pinning to its grid content's intrinsic
height.
3. .wizard-body declares ``grid-template-rows: minmax(0, 1fr)``.
THIS is the one that bit us repeatedly: a grid container with
no explicit row sizing creates an implicit ``auto`` row, which
grows to max-content. So the grid row was sizing to the step
pane's content, the step pane was filling its track, and the
pane's ``overflow-y: auto`` had nothing to overflow against —
it scrolled relative to its own (content-sized) height, i.e.
not at all. ``minmax(0, 1fr)`` pins the row to the body's
definite height, the step pane fills 1fr, and scroll fires
whenever content exceeds the available row height.
*/
.wizard-body {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
gap: 0;
min-height: 0;
overflow: hidden;
}
.wizard-step-pane {
/* Padding is symmetric (2rem all around) so the LAST item in a
scrolled pane has the same breathing room as the FIRST.
Previously the bottom was 1.4rem and the final hint paragraph
hugged the bottom edge — readable but visually cramped, and on
touch devices the scrollbar overlapped the last word. */
padding: 2rem;
overflow-y: auto;
overflow-x: hidden;
/* ``min-height: 0`` plus the dialog's definite height (above)
makes ``overflow-y: auto`` fire on every step. */
min-height: 0;
/* ``scrollbar-gutter: stable`` reserves space for the scrollbar so
the layout doesn't reflow when content grows past the fold. */
scrollbar-gutter: stable;
}
.wizard-yaml-pane {
background: var(--code-bg);
border-left: 1px solid var(--code-border);
display: flex;
flex-direction: column;
min-width: 0;
}
.wizard-yaml-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8rem 1rem;
background: linear-gradient(180deg, #1a1f2c, #141823);
border-bottom: 1px solid var(--code-border);
font-family: var(--font-mono);
font-size: 0.78rem;
/* Theme-locked: dark gradient bar in BOTH themes — see .terminal-bar
above for the same constraint. --code-comment survives the light
toggle. */
color: var(--code-comment);
}
.wizard-yaml-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: transparent;
border: none;
padding: 0;
color: inherit;
font: inherit;
cursor: pointer;
}
.wizard-yaml-toggle svg {
width: 14px;
height: 14px;
transition: transform var(--transition);
}
@media (min-width: 901px) {
/* On desktop the YAML pane is always visible; the toggle chevron
sits silently and is keyboard-only useful for collapsing the
pane when the step pane needs more horizontal room. */
.wizard-yaml-toggle svg { transform: rotate(-90deg); }
}
.wizard-yaml-copy {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: transparent;
border: 1px solid var(--code-border);
border-radius: var(--radius-sm);
/* Theme-locked: lives on the dark .wizard-yaml-header in both
themes. Hover stays on the dark surface so the button doesn't
flash light-on-light when the page is in light mode. */
color: var(--code-comment);
font: inherit;
padding: 0.2rem 0.5rem;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.wizard-yaml-copy:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--code-text);
color: var(--code-text);
}
.wizard-yaml-copy.is-copied {
border-color: var(--success);
color: var(--success);
}
.wizard-yaml-output {
flex: 1;
margin: 0;
padding: 1.2rem 1.3rem;
overflow: auto;
font-family: var(--font-mono);
font-size: 0.8rem;
line-height: 1.65;
color: var(--code-text);
white-space: pre;
}
.wizard-yaml-output code {
font: inherit;
color: inherit;
background: none;
}
/* Inline syntax tinting for the YAML preview. */
.wizard-yaml-output .yaml-key { color: var(--ember-bright); }
.wizard-yaml-output .yaml-string { color: var(--code-string); }
.wizard-yaml-output .yaml-number { color: var(--code-number); }
.wizard-yaml-output .yaml-bool { color: var(--code-fn); }
.wizard-yaml-output .yaml-comment { color: var(--code-comment); font-style: italic; }
.wizard-yaml-output .yaml-null { color: var(--code-comment); font-style: italic; }
/* Footer: prev / step name / next */
.wizard-footer {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.4rem;
border-top: 1px solid var(--border);
background: var(--bg-elev);
}
.wizard-prev,
.wizard-next {
flex-shrink: 0;
}
.wizard-step-name {
flex: 1;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
}
.wizard-prev[disabled],
.wizard-next[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Step content building blocks. wizard.js renders these via DOM
construction; the classes here describe their visual shape. */
.wizard-step-title {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.wizard-step-desc {
color: var(--text-secondary);
margin-bottom: 1.2rem;
font-size: 0.96rem;
line-height: 1.55;
}
.wizard-step-tutorial {
margin: 0 0 1.5rem;
padding: 0.9rem 1rem;
background: var(--pill-note-bg);
border-radius: var(--radius-sm);
color: var(--pill-note-fg);
font-size: 0.88rem;
line-height: 1.55;
border-left: 3px solid var(--steel-bright);
}
.wizard-step-tutorial[hidden] { display: none; }
.wizard-step-tutorial::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-right: 0.5rem;
vertical-align: -2px;
background: currentcolor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0.85;
}
/* Card grid used by use-case + base-model selection steps. */
.wizard-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.8rem;
margin-bottom: 1rem;
}
.wizard-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
text-align: left;
transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.wizard-card:hover {
border-color: var(--border-strong);
background: var(--bg-elev);
}
.wizard-card.is-selected {
border-color: var(--ember-bright);
background: rgba(249, 115, 22, 0.06);
box-shadow: 0 0 0 1px var(--ember-bright);
}
.wizard-card-title {
font-weight: 600;
font-size: 0.95rem;
color: var(--text);
display: flex;
align-items: center;
gap: 0.4rem;
}
.wizard-card-title .badge {
font-size: 0.7rem;
font-weight: 500;
padding: 0.1rem 0.5rem;
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--text-muted);
}
.wizard-card-desc {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.4;
}
/* Form rows for parameter controls (Steps 4, 5, 6). */
.wizard-row {
display: grid;
grid-template-columns: 1fr;
gap: 0.4rem;
margin-bottom: 1rem;
}
.wizard-row-label {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 0.88rem;
font-weight: 500;
color: var(--text);
}
.wizard-row-label small {
font-weight: 400;
font-size: 0.78rem;
color: var(--text-muted);
}
.wizard-row-hint {
font-size: 0.78rem;
color: var(--text-muted);
}
.wizard-row-hint[hidden] { display: none; }
/* Per-field beginner-mode detail paragraph. Sits beneath the hint and
gives 2-3 sentences of plain-language explanation about WHAT the
field means (not just what range to pick). Visually distinct from
the row hint so the operator can pattern-match: hint = quick value
guidance, detail = conceptual primer. */
.wizard-row-detail {
margin-top: 0.5rem;
padding: 0.6rem 0.8rem;
background: var(--bg);
border-left: 2px solid var(--steel-bright);
border-radius: 4px;
font-size: 0.8rem;
line-height: 1.5;
color: var(--text-secondary);
}
.wizard-input,
.wizard-select {
display: block;
width: 100%;
padding: 0.55rem 0.8rem;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text);
font: inherit;
font-size: 0.92rem;
transition: border-color var(--transition);
}
.wizard-input:focus,
.wizard-select:focus {
outline: none;
border-color: var(--ember-bright);
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.wizard-input.is-invalid {
border-color: var(--danger);
}
/* Slider row (LoRA r / alpha, etc.). The numeric output sits to the
right of the slider so the user can see the value without polling
the preview pane. */
.wizard-slider-row {
display: grid;
grid-template-columns: 1fr 56px;
gap: 0.7rem;
align-items: center;
}
.wizard-slider {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 4px;
background: var(--border-strong);
border-radius: 999px;
outline: none;
}
.wizard-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
background: var(--ember-bright);
border-radius: 50%;
cursor: pointer;
transition: transform var(--transition);
}
.wizard-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.wizard-slider::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--ember-bright);
border-radius: 50%;
cursor: pointer;
border: none;
}
.wizard-slider-value {
font-family: var(--font-mono);
font-size: 0.88rem;
color: var(--ember-bright);
text-align: right;
font-variant-numeric: tabular-nums;
}
.wizard-toggle {
display: inline-flex;
align-items: center;
gap: 0.55rem;
cursor: pointer;
user-select: none;
}
.wizard-toggle input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 36px;
height: 20px;
background: var(--border-strong);
border-radius: 999px;
cursor: pointer;
position: relative;
transition: background var(--transition);
}
.wizard-toggle input[type="checkbox"]::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--text);
border-radius: 50%;
transition: transform var(--transition);
}
.wizard-toggle input[type="checkbox"]:checked {
background: var(--ember-bright);
}
.wizard-toggle input[type="checkbox"]:checked::after {
transform: translateX(16px);
}
.wizard-toggle input[type="checkbox"]:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.wizard-toggle-label {
font-size: 0.92rem;
color: var(--text);
}
/* High-risk callout banner shown on Step 6 when EU AI Act risk =
high-risk. Pinks the page so the user can't miss the obligation
shift. */
.wizard-callout {
margin-top: 1rem;
padding: 0.9rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.86rem;
line-height: 1.5;
background: var(--pill-danger-bg);
color: var(--pill-danger-fg);
border-left: 3px solid var(--danger);
}
.wizard-callout strong { color: inherit; }
/* Generated YAML actions on Step 7. */
.wizard-actions {
display: flex;
gap: 0.7rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.wizard-run-snippet {
margin-top: 1.4rem;
background: var(--code-bg);
border: 1px solid var(--code-border);
border-radius: var(--radius-sm);
padding: 0.8rem 1rem;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--code-text);
overflow-x: auto;
}
.wizard-run-snippet .prompt { color: var(--ember-bright); }
.wizard-run-snippet .flag { color: var(--steel-bright); }
.wizard-run-snippet .arg { color: var(--code-string); }
/* Resume banner — surfaces when wizard.js detects a previously-saved
session in localStorage and the user reopens the modal. */
.wizard-resume-banner {
margin-bottom: 1.4rem;
padding: 0.8rem 1rem;
background: var(--pill-tip-bg);
color: var(--pill-tip-fg);
border-left: 3px solid var(--success);
border-radius: var(--radius-sm);
font-size: 0.86rem;
line-height: 1.45;
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.wizard-resume-banner button {
background: transparent;
border: 1px solid currentcolor;
border-radius: 999px;
color: inherit;
padding: 0.25rem 0.7rem;
/* ``font: inherit`` would clobber the explicit font-size; pull the
family from the parent explicitly while keeping the size local. */
font-family: inherit;
font-size: 0.78rem;
cursor: pointer;
}
/* Collapsible accordion section inside a step pane. Used to group
advanced / optional fields (risk assessment, data governance,
webhooks, monitoring) without bloating the step counter. The header
is a button so keyboard users can Tab into it; aria-expanded reflects
the open/closed state for assistive tech.
Layout: header is a 3-column grid (icon | titles | chevron). Title
+ hint stack vertically inside the middle cell so a long hint wraps
cleanly without pushing the chevron off-axis. The body uses the
modern grid-template-rows 0fr→1fr trick so expand/collapse
animates smoothly without us manually measuring height. */
.wizard-accordion {
/* Override the global ``section { padding: 5rem 0 }`` rule (line 193).
Without this, every accordion grew 80px of top + bottom padding,
leaving a tall empty frame around the header. The wizard's
accordions are layout primitives, not page sections — they need
to fit their content tightly. */
padding: 0;
margin: 0.9rem 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.wizard-accordion:hover {
border-color: var(--border-strong);
}
.wizard-accordion.is-open {
border-color: rgba(249, 115, 22, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(249, 115, 22, 0.08);
}
.wizard-accordion-header {
width: 100%;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.05rem;
background: transparent;
border: none;
cursor: pointer;
font: inherit;
color: var(--text);
text-align: left;
transition: background var(--transition);
}
.wizard-accordion-header:hover {
background: var(--bg-elev);
}
.wizard-accordion-header:focus-visible {
outline: 2px solid var(--ember-bright);
outline-offset: -2px;
}
/* Leading icon — sits in a soft tinted square. Closed = neutral grey;
open = ember-tinted to mirror the active border. */
.wizard-accordion-icon {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background: var(--bg-elev);
color: var(--text-secondary);
flex-shrink: 0;
transition: background var(--transition), color var(--transition);
}
.wizard-accordion-icon svg {
width: 16px;
height: 16px;
}
.wizard-accordion.is-open .wizard-accordion-icon {
background: rgba(249, 115, 22, 0.12);
color: var(--ember-bright);
}
/* Title + hint stack — single column, tight gap so the two lines read
as one logical label. ``min-width: 0`` lets long hints truncate via
the wrapper rather than overflow the row. */
.wizard-accordion-titles {
display: flex;
flex-direction: column;
gap: 0.18rem;
min-width: 0;
}
.wizard-accordion-title {
font-weight: 600;
font-size: 0.95rem;
line-height: 1.3;
color: var(--text);
}
.wizard-accordion-hint {
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 400;
line-height: 1.45;
}
.wizard-accordion-chevron {
width: 20px;
height: 20px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: transform 240ms cubic-bezier(.4, 0, .2, 1), color var(--transition);
}
.wizard-accordion-chevron svg {
width: 16px;
height: 16px;
}
.wizard-accordion.is-open .wizard-accordion-chevron {
color: var(--ember-bright);
transform: rotate(180deg);
}
/* Closed accordion = header only. ``display: none`` is the bluntest
tool but the most reliable: it removes the body-wrap from layout
entirely, so a closed accordion is exactly the height of its
header button. The two prior attempts (grid-template-rows: 0fr;
max-height: 0) both failed in real browsers — content kept
reporting min-content height despite overflow:hidden, leaving
closed accordions as tall empty frames. We forfeit the slide
animation in exchange for visual correctness. The chevron rotation
+ open-state ember accent still telegraph state changes. */
.wizard-accordion-body-wrap {
display: none;
}
.wizard-accordion.is-open .wizard-accordion-body-wrap {
display: block;
}
.wizard-accordion-body {
border-top: 1px solid var(--border);
padding: 1rem 1.05rem 0.9rem;
}
/* Reduced-motion users get instant chevron / hover transitions. */
@media (prefers-reduced-motion: reduce) {
.wizard-accordion,
.wizard-accordion-icon,
.wizard-accordion-chevron {
transition: none !important;
}
}
.wizard-input[rows] { /* textareas styled the same as inputs */
font-family: var(--font-sans);
resize: vertical;
min-height: 60px;
}
/* Validation error pinned under an invalid input. */
.wizard-error {
margin-top: 0.4rem;
font-size: 0.78rem;
color: var(--danger);
}
.wizard-error[hidden] { display: none; }
/* ── Wizard responsive (mobile + reduced-motion) ─────────── */
/* On narrow viewports the dialog goes fullscreen and the YAML
preview collapses into an accordion under the step pane so the
user has full vertical room for the controls. */
@media (max-width: 900px) {
.wizard-modal { padding: 0; }
.wizard-dialog {
width: 100%;
height: 100vh;
max-height: 100vh;
border-radius: 0;
border: none;
}
.wizard-body {
grid-template-columns: 1fr;
/* ``minmax(0, 1fr)`` for the step-pane row — same reason as the
desktop rule above: without the ``min: 0`` floor a 1fr track
can refuse to shrink below its content. */
grid-template-rows: minmax(0, 1fr) auto;
}
.wizard-step-pane {
padding: 1.4rem;
}
.wizard-yaml-pane {
border-left: none;
border-top: 1px solid var(--code-border);
max-height: 45vh;
}
.wizard-yaml-pane:not(.is-expanded) .wizard-yaml-output {
display: none;
}
.wizard-yaml-pane:not(.is-expanded) {
max-height: 44px;
}
.wizard-yaml-pane.is-expanded .wizard-yaml-toggle svg {
transform: rotate(180deg);
}
/* C3 (review-cycle 3): when the operator expands the YAML accordion
on mobile, long configs (high-risk + every gate enabled) easily
run past 200 lines. Without an explicit ``overflow: auto`` floor
the pane consumed all remaining vertical space and pushed the
action footer (Copy / Download / Back / Next) off-screen, leaving
the operator unable to navigate. Clamp the body to a fraction of
the viewport so the footer always stays reachable. */
.wizard-yaml-pane.is-expanded .wizard-yaml-output {
max-height: 38vh;
overflow: auto;
}
.wizard-cards {
grid-template-columns: 1fr;
}
.wizard-footer {
padding: 0.8rem 1rem;
}
.wizard-step-name {
display: none;
}
}
/* The dialog reads as a flat block under reduced-motion: no enter
animation, no slide transitions on step changes, no progress
transition. The functionality still works, just without motion. */
@media (prefers-reduced-motion: reduce) {
.wizard-modal,
.wizard-dialog {
animation: none !important;
}
.wizard-progress-fill {
transition: none !important;
}
}
/* ── Contact ─────────────────────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
max-width: 980px;
margin: 0 auto;
}
@media (max-width: 880px) {
.contact-grid { grid-template-columns: 1fr; }
}
.contact-form-card,
.contact-channels {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.8rem;
}
.contact-form-card h2,
.contact-channels h2 {
font-size: 1.2rem;
margin-bottom: 1.2rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 1.1rem; }
.form-group label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.4rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.65rem 0.875rem;
/* iOS Safari auto-zooms when a form control's computed font-size is
below 16px, kicking the layout sideways on every focus. Pin the
base size to 16px on touch viewports; desktop keeps the slightly
smaller (~14.7px) text via the @media-min override below. */
font: 400 16px var(--font-sans);
color: var(--text);
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
outline: none;
/* 44px minimum tap height — touch-target floor for iOS HIG. */
min-height: 44px;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
@media (min-width: 720px) {
.form-group input,
.form-group textarea,
.form-group select {
/* Desktop pointers don't trigger zoom-on-focus, so the slightly
smaller body-text size is fine and matches the visual rhythm of
the rest of the form. */
font-size: 0.92rem;
}
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--ember);
box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.form-group textarea { resize: vertical; min-height: 130px; font-family: var(--font-sans); }
.form-submit { width: 100%; }
.form-status {
margin-top: 1rem;
padding: 0.7rem 0.95rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
display: none;
}
/* Status colors are theme-split: the lighter shades (#4ade80 / #f87171)
meet WCAG AA on the dark theme but fail on the light theme's white
background (~3.5:1 and ~3.6:1). Define the dark-friendly defaults here;
the [data-theme="light"] block overrides them with darker shades. */
.form-status.success {
display: block;
background: rgba(34,197,94,.08);
border: 1px solid rgba(34,197,94,.3);
color: #4ade80;
}
.form-status.error {
display: block;
background: rgba(239,68,68,.08);
border: 1px solid rgba(239,68,68,.3);
color: #f87171;
}
[data-theme="light"] .form-status.success { color: #15803d; } /* green-700 */
[data-theme="light"] .form-status.error { color: #b91c1c; } /* red-700 */
.channel-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.channel-item {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.channel-item:hover {
background: var(--bg-elev);
border-color: var(--border-strong);
}
.channel-icon {
width: 38px;
height: 38px;
border-radius: 8px;
display: grid;
place-items: center;
background: rgba(249,115,22,.12);
color: var(--ember-bright);
flex-shrink: 0;
border: 1px solid rgba(249,115,22,.22);
}
.channel-icon svg { width: 18px; height: 18px; }
.channel-text h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.channel-text p { font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.4rem; }
.channel-text a {
font-size: 0.85rem;
font-weight: 500;
}
/* ── Legal ───────────────────────────────────────────────── */
.legal {
padding-top: 3rem;
padding-bottom: 5rem;
}
.legal-content {
max-width: var(--max-width-narrow);
margin: 0 auto;
}
.legal-content h2 {
font-size: 1.3rem;
margin-top: 2.5rem;
margin-bottom: 0.8rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--border);
}
.legal-content h3 {
font-size: 1.05rem;
margin-top: 1.6rem;
margin-bottom: 0.5rem;
}
.legal-content p { margin-bottom: 0.95rem; }
.legal-content ul, .legal-content ol {
margin: 0 0 1.1rem 1.4rem;
color: var(--text-secondary);
}
.legal-content li { margin-bottom: 0.35rem; line-height: 1.7; }
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-meta {
font-size: 0.85rem;
color: var(--text-muted);
padding: 0.6rem 0.95rem;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 2rem;
}
/* ── Footer ──────────────────────────────────────────────── */
.footer {
padding: 3rem 0 1.6rem;
border-top: 1px solid var(--border);
background: var(--bg-alt);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 2rem;
margin-bottom: 2.5rem;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand {
display: flex;
align-items: center;
gap: 0.55rem;
font-weight: 700;
font-size: 1.05rem;
color: var(--text);
margin-bottom: 0.8rem;
}
.footer-brand-mark {
width: 28px;
height: 28px;
border-radius: 6px;
}
.footer-brand-icon {
width: 14px;
height: 14px;
}
.footer-desc {
font-size: 0.88rem;
color: var(--text-muted);
max-width: 320px;
line-height: 1.65;
}
.footer-col h4 {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 0.85rem;
font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a {
font-size: 0.88rem;
color: var(--text-secondary);
}
.footer-col a:hover { color: var(--ember-bright); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
font-size: 0.82rem;
color: var(--text-muted);
flex-wrap: wrap;
gap: 0.6rem;
}
/* ── i18n ────────────────────────────────────────────────── */
/* Translations are applied at runtime by js/i18n.js. To prevent a flash
of English defaults for users on other languages, the body stays
visually muted until i18n.js applies the table and adds the
`i18n-ready` class. Falls back gracefully if JS is disabled
(after 800ms the body is forced visible). */
body:not(.i18n-ready) [data-i18n],
body:not(.i18n-ready) [data-i18n-html] { visibility: hidden; }
body:not(.i18n-ready) { animation: i18n-failsafe 0.8s linear forwards; }
@keyframes i18n-failsafe { to { visibility: visible; } }
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
/* ── Print ──────────────────────────────────────────────── */
/* ── Print stylesheet ────────────────────────────────────────
``!important`` is industry-standard for print resets: the cascade
has already applied dark-theme tokens, animation surfaces, and
chrome backdrops, all of which need to be force-overridden for
paper output. A scoped-reset alternative would require either
sweeping selector duplication or a body[data-printing] hook —
both worse for maintenance than the explicit !important here. */
@media print {
.navbar, .nav-hamburger, .theme-toggle, .lang-toggle,
.hero-terminal, .copy-btn, footer { display: none !important; }
body {
background: #fff !important;
color: #000 !important;
font-size: 12pt;
}
a { color: #000 !important; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
section { padding: 1rem 0 !important; }
.container { max-width: 100% !important; padding: 0 !important; }
.code-block, pre {
background: #f5f5f5 !important;
border: 1px solid #ccc !important;
color: #000 !important;
page-break-inside: avoid;
}
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
/* `clip` is deprecated but kept as a legacy fallback for older browsers
that don't yet honour `clip-path`. New code should rely on the
`clip-path` declaration below. */
clip: rect(0,0,0,0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ── Webkit scrollbar (subtle) ───────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* ===============================================================
USER GUIDE — sidebar + content + on-this-page TOC layout.
The shell lives in site/guide.html; content is loaded at runtime
from site/js/usermanuals/.js (built from docs/usermanuals/).
=============================================================== */
/* Reading-progress bar at the top of the viewport.
Native
``. The right-column ``.hero-terminal``
keeps its original placement; the grid template is unchanged. */
.hero-personas {
position: relative;
}
.hero-slides {
position: relative;
/* min-height ensures the layout doesn't collapse during fade
transitions when the active slide is positioned absolutely; the
value is a comfortable cap for the longest pitch (compliance
slide currently around 4 lines of body copy at desktop width). */
min-height: 320px;
}
@media (max-width: 980px) {
.hero-slides { min-height: 360px; }
}
@media (max-width: 600px) {
.hero-slides { min-height: 380px; }
}
.hero-slide {
position: absolute;
inset: 0 0 auto 0;
opacity: 0;
visibility: hidden;
transform: translateX(12px);
transition:
opacity 320ms ease-out,
transform 320ms ease-out,
visibility 0s linear 320ms;
pointer-events: none;
}
.hero-slide.is-active {
position: relative;
opacity: 1;
visibility: visible;
transform: translateX(0);
transition:
opacity 320ms ease-out,
transform 320ms ease-out,
visibility 0s linear 0s;
pointer-events: auto;
}
/* Slider pagination: 3 dots, the active dot expands and animates a
linear progress fill that mirrors the auto-rotate timer (8s). */
.hero-slider-controls {
display: flex;
gap: 0.6rem;
align-items: center;
margin-top: 1.4rem;
margin-bottom: 1.4rem;
}
.hero-slider-dot {
position: relative;
width: 24px;
height: 4px;
padding: 0;
border: none;
background: var(--border-strong);
border-radius: 999px;
cursor: pointer;
overflow: hidden;
transition: background 200ms ease, width 280ms ease;
}
.hero-slider-dot:hover { background: var(--text-muted); }
.hero-slider-dot:focus-visible {
outline: 2px solid var(--ember-bright);
outline-offset: 3px;
}
@media (hover: none) {
/* Touch viewports: expand the *tap target* without inflating the
visual pill. A transparent ``::after`` extends the click area to
~44×44 around the 24×4 dot so a thumb hits reliably; the
animated ``.dot-fill`` child is untouched so the auto-rotate
progress animation still draws over the original pill geometry.
``hero-slider-controls`` gets gap relaxation so the extended
hitboxes don't overlap. */
.hero-slider-dot::after {
content: '';
position: absolute;
inset: -20px -10px;
}
.hero-slider-controls { gap: 1rem; }
}
.hero-slider-dot.is-active {
width: 56px;
background: var(--border-strong);
}
.hero-slider-dot .dot-fill {
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--ember-bright), var(--steel-bright));
transform-origin: left center;
transform: scaleX(0);
border-radius: inherit;
}
.hero-slider-dot.is-active .dot-fill {
animation: hero-slider-fill 8s linear forwards;
}
.hero-personas[data-paused="true"] .hero-slider-dot.is-active .dot-fill {
animation-play-state: paused;
}
@keyframes hero-slider-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Prev / next chevrons. Ghost by default; reveal on hover or
keyboard focus inside the slider. Hidden on small screens — touch
users get the swipe gesture instead. */
.hero-slider-arrow {
position: absolute;
top: 35%;
transform: translateY(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
/* Theme-aware: previously hardcoded a dark rgba background with
``color: var(--text)``. In light mode that resolved to dark text
on dark bg, so the chevron disappeared. Mirror the theme by
using the same elevated-surface tokens the rest of the chrome
uses. */
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: 50%;
color: var(--text);
cursor: pointer;
opacity: 0;
transition: opacity 200ms ease, background 200ms ease, border-color 200ms ease;
z-index: 2;
}
.hero-slider-arrow svg { width: 14px; height: 14px; }
.hero-slider-arrow.prev { left: -52px; }
.hero-slider-arrow.next { right: -52px; }
.hero-personas:hover .hero-slider-arrow,
.hero-personas:focus-within .hero-slider-arrow {
opacity: 0.9;
}
.hero-slider-arrow:hover {
opacity: 1;
background: var(--bg-elev);
border-color: var(--ember-bright);
}
.hero-slider-arrow:focus-visible {
opacity: 1;
outline: 2px solid var(--ember-bright);
outline-offset: 2px;
}
@media (max-width: 1100px) {
.hero-slider-arrow.prev { left: -16px; }
.hero-slider-arrow.next { right: -16px; }
}
@media (max-width: 720px) {
.hero-slider-arrow { display: none; }
}
/* Reduced-motion: stack all slides, hide pagination + arrows,
neutralise the timer animation. Each slide becomes its own block
the user can read linearly. */
@media (prefers-reduced-motion: reduce) {
.hero-slide {
position: relative !important;
inset: auto !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
margin-bottom: 1.6rem;
}
.hero-slide:not(:first-child) {
border-top: 1px dashed var(--border);
padding-top: 1.4rem;
}
.hero-slider-controls,
.hero-slider-arrow { display: none !important; }
.hero-slides { min-height: 0; }
.hero-slider-dot.is-active .dot-fill { animation: none; }
}
/* Hero terminal */
.hero-terminal {
background: var(--code-bg);
border: 1px solid var(--code-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
overflow: hidden;
position: relative;
}
.hero-terminal::before {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(135deg, rgba(249,115,22,.4), transparent 40%, rgba(14,165,233,.4));
border-radius: var(--radius);
z-index: -1;
filter: blur(8px);
opacity: 0.35;
}
.terminal-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1rem;
background: linear-gradient(180deg, #1a1f2c, #141823);
border-bottom: 1px solid var(--code-border);
font-family: var(--font-mono);
font-size: 0.78rem;
/* Theme-locked: this bar is a dark code surface in BOTH themes,
so the title text uses --code-comment (theme-locked grey) — not
--text-muted, which flips to a dim grey-on-white in light mode
and disappears against the dark gradient. */
color: var(--code-comment);
}
.terminal-bar .dots {
display: flex;
gap: 6px;
margin-right: 0.6rem;
}
.terminal-bar .dot {
width: 11px;
height: 11px;
border-radius: 50%;
}
.terminal-bar .dot.r { background: var(--dot-red); }
.terminal-bar .dot.y { background: var(--dot-yellow); }
.terminal-bar .dot.g { background: var(--dot-green); }
.terminal-body {
padding: 1.2rem 1.3rem;
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.65;
color: var(--code-text);
overflow-x: auto;
}
.terminal-body .prompt { color: var(--ember-bright); }
/* The terminal background is theme-locked dark (--code-bg stays dark
in both themes), so token colors here MUST use theme-locked code-*
variables — never page text vars (--text / --text-secondary /
--text-muted) which flip to dark in light mode and become
invisible on the dark terminal. The ``forgelm`` command itself
was disappearing in light mode for exactly this reason. */
.terminal-body .cmd { color: var(--code-text); }
.terminal-body .flag { color: var(--steel-bright); }
.terminal-body .arg { color: #6ee7b7; }
.terminal-body .comment { color: var(--code-comment); font-style: italic; }
.terminal-body .ok { color: var(--success); }
.terminal-body .warn { color: var(--warn); }
.terminal-body .out { color: var(--code-text); opacity: 0.78; }
.terminal-body .blink {
display: inline-block;
width: 8px; height: 1.05em;
background: var(--ember-bright);
vertical-align: text-bottom;
margin-left: 2px;
animation: blink 1.1s step-end infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
/* ── Stats ───────────────────────────────────────────────── */
.stats {
padding: 3rem 0 4rem;
border-bottom: 1px solid var(--border);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
text-align: center;
}
@media (max-width: 720px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-value {
font-family: var(--font-sans);
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--ember), var(--steel));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
}
/* ── Pipeline (trainer flow) ─────────────────────────────── */
.pipeline {
background: var(--bg-alt);
position: relative;
}
.pipeline-flow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
margin-top: 2.5rem;
position: relative;
}
@media (max-width: 880px) {
.pipeline-flow { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
.pipeline-flow { grid-template-columns: repeat(2, 1fr); }
}
.pipeline-stage {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.2rem 1rem;
text-align: center;
position: relative;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
cursor: default;
}
.pipeline-stage:hover {
border-color: var(--ember);
transform: translateY(-3px);
box-shadow: var(--glow-ember);
}
.pipeline-stage .stage-num {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.pipeline-stage h3 {
font-size: 1.05rem;
margin-bottom: 0.35rem;
color: var(--ember-bright);
}
.pipeline-stage p {
font-size: 0.78rem;
line-height: 1.5;
color: var(--text-muted);
}
/* ── Features grid ───────────────────────────────────────── */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
}
@media (max-width: 980px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.features-grid { grid-template-columns: 1fr; }
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.6rem;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--ember), var(--steel));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-slow);
}
.feature-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: grid;
place-items: center;
margin-bottom: 1rem;
background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(14,165,233,.14));
border: 1px solid var(--border);
color: var(--ember-bright);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 {
font-size: 1.05rem;
margin-bottom: 0.45rem;
}
.feature-card p {
font-size: 0.92rem;
line-height: 1.6;
}
.feature-card .feature-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.85rem;
}
.feature-tag {
font-family: var(--font-mono);
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
border-radius: 4px;
background: var(--bg-elev);
color: var(--text-muted);
border: 1px solid var(--border);
}
/* Group separator (features.html) */
.feature-group { padding: 4rem 0; }
.feature-group + .feature-group { border-top: 1px solid var(--border); }
.feature-group .group-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.feature-group .group-icon {
width: 56px;
height: 56px;
border-radius: 12px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--ember), var(--ember-deep));
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(249,115,22,.3);
}
.feature-group .group-icon svg { width: 28px; height: 28px; }
.feature-group h2 { margin-bottom: 0.2rem; }
.feature-group .group-header p {
font-size: 1rem;
color: var(--text-secondary);
}
/* ── Use cases ───────────────────────────────────────────── */
.use-cases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.4rem;
}
@media (max-width: 720px) {
.use-cases-grid { grid-template-columns: 1fr; }
}
.use-case {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
padding: 1.5rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color var(--transition);
}
.use-case:hover { border-color: var(--steel); }
.use-case-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: grid;
place-items: center;
background: rgba(14,165,233,.12);
color: var(--steel-bright);
flex-shrink: 0;
border: 1px solid rgba(14,165,233,.25);
}
.use-case h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.use-case p { font-size: 0.9rem; }
.use-case-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.72rem;
margin-top: 0.6rem;
padding: 0.15rem 0.55rem;
border-radius: 4px;
background: rgba(14,165,233,.1);
color: var(--steel-bright);
}
/* ── Code block (standalone) ─────────────────────────────── */
.code-block {
background: var(--code-bg);
border: 1px solid var(--code-border);
border-radius: var(--radius);
overflow: hidden;
margin: 1.5rem 0;
}
.code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 1rem;
border-bottom: 1px solid var(--code-border);
background: rgba(255,255,255,.03);
font-family: var(--font-mono);
font-size: 0.78rem;
/* Theme-locked: the parent .code-block uses --code-bg (always dark
in both themes), so the language tag must use a theme-locked grey
too — --text-muted resolves to dim grey on light theme and
disappears here. */
color: var(--code-comment);
}
.code-block-header .lang {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.code-block-header .lang::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: var(--steel-bright);
}
.code-block-body {
padding: 1rem 1.2rem;
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.65;
color: var(--code-text);
overflow-x: auto;
}
.code-block-body .keyword { color: var(--code-keyword); }
.code-block-body .string { color: var(--code-string); }
.code-block-body .number { color: var(--code-number); }
.code-block-body .comment { color: var(--code-comment); font-style: italic; }
.code-block-body .fn { color: var(--code-fn); }
.code-block-body .key { color: var(--steel-bright); }
.code-block-body .flag { color: var(--steel-bright); }
.code-block-body .prompt { color: var(--ember-bright); user-select: none; }
.copy-btn {
background: none;
border: 1px solid var(--code-border);
/* Theme-locked: lives on the dark .code-block-header bar in both
themes. --code-comment is the in-code default grey — readable
against the dark gradient in both light and dark page themes. */
color: var(--code-comment);
padding: 0.35rem 0.7rem;
border-radius: 4px;
cursor: pointer;
font: 500 0.72rem var(--font-mono);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
min-height: 32px;
}
.copy-btn:hover { color: var(--ember-bright); border-color: var(--ember); }
.copy-btn.copied { color: var(--success); border-color: var(--success); }
@media (max-width: 720px) {
/* iOS HIG 44×44 tap-target floor — the desktop 32px copy button
sits on top of horizontally-scrolling code; thumb-tapping a
32px target while scrolling is unreliable on phones. */
.copy-btn {
min-height: 44px;
padding: 0.5rem 0.95rem;
font-size: 0.78rem;
}
}
/* ── Compliance grid (Articles) ──────────────────────────── */
.articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
margin-top: 2rem;
}
@media (max-width: 880px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .articles-grid { grid-template-columns: 1fr; } }
.article-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.4rem;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
position: relative;
}
.article-card:hover {
border-color: var(--steel);
box-shadow: var(--glow-steel);
}
.article-num {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--steel-bright);
background: rgba(14,165,233,.12);
padding: 0.2rem 0.55rem;
border-radius: 4px;
margin-bottom: 0.7rem;
}
.article-card h3 {
font-size: 1rem;
margin-bottom: 0.35rem;
}
.article-card p {
font-size: 0.88rem;
line-height: 1.55;
}
.article-card .article-evidence {
margin-top: 0.8rem;
padding-top: 0.8rem;
border-top: 1px dashed var(--border);
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-muted);
}
.article-card .article-evidence b {
color: var(--ember-bright);
font-weight: 500;
}
/* ── Steps (quickstart) ──────────────────────────────────── */
.steps {
display: flex;
flex-direction: column;
gap: 2rem;
margin: 2.5rem auto 0;
max-width: 880px;
position: relative;
}
.steps::before {
content: '';
position: absolute;
top: 0;
left: 22px;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--ember), var(--steel));
opacity: 0.4;
}
.step {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
position: relative;
}
.step-num {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ember), var(--ember-deep));
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-family: var(--font-mono);
font-size: 1.1rem;
flex-shrink: 0;
position: relative;
z-index: 1;
box-shadow: 0 4px 12px rgba(249,115,22,.3);
}
.step-content {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.4rem 1.6rem;
}
.step-content h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.step-content p { font-size: 0.95rem; margin-bottom: 0.8rem; }
.step-content .code-block { margin: 0.6rem 0 0; }
/* ── CTA ─────────────────────────────────────────────────── */
.cta {
position: relative;
overflow: hidden;
}
.cta-card {
background: linear-gradient(135deg, var(--bg-card), var(--bg-elev));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 3.5rem 2.5rem;
text-align: center;
position: relative;
overflow: hidden;
max-width: 880px;
margin: 0 auto;
}
.cta-card::before {
content: '';
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 400px;
background:
radial-gradient(ellipse at 30% 50%, rgba(249,115,22,.2), transparent 60%),
radial-gradient(ellipse at 70% 50%, rgba(14,165,233,.18), transparent 60%);
filter: blur(24px);
pointer-events: none;
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 0.8rem; }
.cta-card p {
font-size: 1.05rem;
max-width: 540px;
margin: 0 auto 1.6rem;
}
.cta-actions {
display: flex;
justify-content: center;
gap: 0.8rem;
flex-wrap: wrap;
}
/* ── Page header (sub-pages) ─────────────────────────────── */
.page-header {
padding-top: 8rem;
padding-bottom: 3rem;
position: relative;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, var(--bg-alt), var(--bg));
}
.page-header .eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ember-bright);
margin-bottom: 0.7rem;
}
.page-header h1 {
margin-bottom: 0.8rem;
}
.page-header p {
max-width: 620px;
font-size: 1.08rem;
}
.page-header-aside {
margin-top: 1.4rem !important;
font-size: 0.95rem !important;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
/* Wizard spotlight — the prominent CTA banner that lands between the
quickstart page-header and the canonical 5-step content. Designed
to be impossible to miss without overshadowing the existing manual
reference flow underneath. Two-column layout on desktop: marketing
copy + primary CTA on the left, a small visual diagram on the right
that mimics the wizard's three-stage contract (form → YAML → run).
Mobile collapses to single column. */
.wizard-spotlight {
position: relative;
margin: -1rem 0 3rem;
padding: 2rem 2.2rem;
background:
radial-gradient(ellipse at 0% 0%, rgba(249, 115, 22, .14), transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(14, 165, 233, .12), transparent 55%),
linear-gradient(180deg, var(--bg-elev), var(--bg-card));
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 2.4rem;
align-items: center;
overflow: hidden;
}
.wizard-spotlight::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(249,115,22,.4), transparent 40%, rgba(14,165,233,.4));
opacity: 0.12;
pointer-events: none;
}
.wizard-spotlight > * {
position: relative;
z-index: 1;
}
.wizard-spotlight-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ember-bright);
margin-bottom: 0.7rem;
}
.wizard-spotlight-eyebrow::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 10px var(--ember);
animation: pulse 2s ease-in-out infinite;
}
.wizard-spotlight-title {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.6rem;
line-height: 1.25;
}
.wizard-spotlight-lead {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: 1.4rem;
max-width: 540px;
}
.wizard-spotlight-actions {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
}
.wizard-spotlight-meta {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
margin-top: 1rem;
font-size: 0.82rem;
color: var(--text-muted);
}
.wizard-spotlight-meta span {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.wizard-spotlight-meta svg {
width: 14px;
height: 14px;
color: var(--success);
}
/* Visual: three-stage diagram. Each stage is a small card with an
icon + label + tiny snippet showing what the operator gives / gets
at that step. The arrows between cards reinforce the flow. Built
in pure SVG so the icons stay crisp at any zoom. */
.wizard-spotlight-visual {
display: flex;
flex-direction: column;
gap: 0.8rem;
align-items: stretch;
}
.wizard-spotlight-stage {
display: grid;
grid-template-columns: 36px 1fr;
gap: 0.8rem;
padding: 0.8rem 1rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
align-items: center;
font-size: 0.85rem;
}
.wizard-spotlight-stage-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: 8px;
color: var(--ember-bright);
}
.wizard-spotlight-stage-icon svg {
width: 18px;
height: 18px;
}
.wizard-spotlight-stage-label {
font-weight: 600;
color: var(--text);
display: block;
}
.wizard-spotlight-stage-snippet {
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--text-muted);
margin-top: 0.15rem;
}
.wizard-spotlight-arrow {
margin: -0.4rem 0;
text-align: center;
color: var(--text-muted);
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.wizard-spotlight-arrow svg {
width: 14px;
height: 14px;
}
/* Five-step section heading — small introducing label that sits
between the spotlight and the existing ``.steps`` block. Helps the
reader understand they have two equally-valid paths (wizard above
OR manual below). */
.steps-intro {
margin-bottom: 1.6rem;
font-size: 0.86rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.steps-intro::before {
content: '';
display: block;
flex: 1;
height: 1px;
background: var(--border);
min-width: 30px;
}
.steps-intro::after {
content: '';
display: block;
flex: 1;
height: 1px;
background: var(--border);
min-width: 30px;
}
@media (max-width: 900px) {
.wizard-spotlight {
grid-template-columns: 1fr;
gap: 1.6rem;
padding: 1.6rem 1.4rem;
}
.wizard-spotlight-title {
font-size: 1.35rem;
}
}
/* Inline link-styled CTA used by the wizard trigger and similar
"secondary action" affordances inside copy-heavy paragraphs.
Renders like a link but keeps the button semantics so screen
readers announce it as actionable. */
.link-cta {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--ember-bright);
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(251, 146, 60, 0.4);
text-underline-offset: 3px;
transition: color var(--transition), text-decoration-color var(--transition);
}
.link-cta:hover,
.link-cta:focus-visible {
color: var(--ember);
text-decoration-color: var(--ember);
outline: none;
}
.link-cta:focus-visible {
outline: 2px solid var(--ember-bright);
outline-offset: 4px;
border-radius: 2px;
}
/* ── Wizard modal ────────────────────────────────────────── */
/* Modal-as-app dialog used by the quickstart.html in-browser YAML
wizard. Opens via [data-wizard-open] triggers or via the
?wizard=open URL parameter (used by the home-page Beginner-slide
CTA). The dialog stays in the DOM and is toggled visible — keeping
the rendered tree avoids re-mounting the YAML preview on every
open. ARIA: role=dialog + aria-modal=true on the inner container;
the outer wrapper carries [hidden] when closed so the modal is
removed from the accessibility tree entirely. */
.wizard-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
animation: wizard-modal-in 220ms ease-out;
}
.wizard-modal[hidden] { display: none; }
@keyframes wizard-modal-in {
from { opacity: 0; }
to { opacity: 1; }
}
.wizard-backdrop {
position: absolute;
inset: 0;
background: rgba(8, 10, 16, 0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.wizard-dialog {
position: relative;
width: min(1080px, 100%);
/* Use a *definite* height (not max-height) so the inner flex/grid
children get a resolvable frame to overflow against. With only
``max-height``, ``flex: 1`` on .wizard-body resolves its
``flex-basis: 0%`` against an indefinite parent, the body sizes
to content, and the step pane's ``overflow-y: auto`` never fires.
This was the root cause of the "use-case / model / dataset
screens won't scroll" bug — those steps have just enough content
to overflow on smaller laptops, but the dialog was free to grow
so nothing clipped. Fixing the dialog at 720px (or 100vh − 4rem
on small screens) gives the body + pane a definite frame and
scroll fires reliably. */
height: min(720px, calc(100vh - 4rem));
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
overflow: hidden;
animation: wizard-dialog-in 240ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes wizard-dialog-in {
from { opacity: 0; transform: translateY(12px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Header: progress + step counter + detail toggle + close */
.wizard-header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.4rem;
border-bottom: 1px solid var(--border);
background: var(--bg-elev);
}
.wizard-progress {
flex: 1;
display: flex;
align-items: center;
gap: 0.9rem;
}
.wizard-progress-track {
flex: 1;
height: 5px;
background: var(--border);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.wizard-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--ember-bright), var(--steel-bright));
border-radius: inherit;
transition: width 320ms cubic-bezier(.4, 0, .2, 1);
}
.wizard-progress-counter {
font-size: 0.78rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.wizard-header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.wizard-detail-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--text-secondary);
font-size: 0.78rem;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.wizard-detail-toggle:hover,
.wizard-detail-toggle.is-active {
background: var(--bg);
border-color: var(--ember-bright);
color: var(--ember-bright);
}
.wizard-detail-toggle[hidden] { display: none; }
.wizard-close {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
color: var(--text-muted);
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.wizard-close svg { width: 18px; height: 18px; }
.wizard-close:hover {
background: var(--bg);
color: var(--text);
border-color: var(--border-strong);
}
/* Body: 60/40 split — step pane + YAML preview.
Three things that all have to be true for the step pane to scroll:
1. .wizard-dialog has a *definite* height (set above as
``height: min(720px, calc(100vh - 4rem))``). Without that, the
flex chain has no frame to overflow against.
2. .wizard-body has ``min-height: 0`` so it can shrink under
``flex: 1`` instead of pinning to its grid content's intrinsic
height.
3. .wizard-body declares ``grid-template-rows: minmax(0, 1fr)``.
THIS is the one that bit us repeatedly: a grid container with
no explicit row sizing creates an implicit ``auto`` row, which
grows to max-content. So the grid row was sizing to the step
pane's content, the step pane was filling its track, and the
pane's ``overflow-y: auto`` had nothing to overflow against —
it scrolled relative to its own (content-sized) height, i.e.
not at all. ``minmax(0, 1fr)`` pins the row to the body's
definite height, the step pane fills 1fr, and scroll fires
whenever content exceeds the available row height.
*/
.wizard-body {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
gap: 0;
min-height: 0;
overflow: hidden;
}
.wizard-step-pane {
/* Padding is symmetric (2rem all around) so the LAST item in a
scrolled pane has the same breathing room as the FIRST.
Previously the bottom was 1.4rem and the final hint paragraph
hugged the bottom edge — readable but visually cramped, and on
touch devices the scrollbar overlapped the last word. */
padding: 2rem;
overflow-y: auto;
overflow-x: hidden;
/* ``min-height: 0`` plus the dialog's definite height (above)
makes ``overflow-y: auto`` fire on every step. */
min-height: 0;
/* ``scrollbar-gutter: stable`` reserves space for the scrollbar so
the layout doesn't reflow when content grows past the fold. */
scrollbar-gutter: stable;
}
.wizard-yaml-pane {
background: var(--code-bg);
border-left: 1px solid var(--code-border);
display: flex;
flex-direction: column;
min-width: 0;
}
.wizard-yaml-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8rem 1rem;
background: linear-gradient(180deg, #1a1f2c, #141823);
border-bottom: 1px solid var(--code-border);
font-family: var(--font-mono);
font-size: 0.78rem;
/* Theme-locked: dark gradient bar in BOTH themes — see .terminal-bar
above for the same constraint. --code-comment survives the light
toggle. */
color: var(--code-comment);
}
.wizard-yaml-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: transparent;
border: none;
padding: 0;
color: inherit;
font: inherit;
cursor: pointer;
}
.wizard-yaml-toggle svg {
width: 14px;
height: 14px;
transition: transform var(--transition);
}
@media (min-width: 901px) {
/* On desktop the YAML pane is always visible; the toggle chevron
sits silently and is keyboard-only useful for collapsing the
pane when the step pane needs more horizontal room. */
.wizard-yaml-toggle svg { transform: rotate(-90deg); }
}
.wizard-yaml-copy {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: transparent;
border: 1px solid var(--code-border);
border-radius: var(--radius-sm);
/* Theme-locked: lives on the dark .wizard-yaml-header in both
themes. Hover stays on the dark surface so the button doesn't
flash light-on-light when the page is in light mode. */
color: var(--code-comment);
font: inherit;
padding: 0.2rem 0.5rem;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.wizard-yaml-copy:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--code-text);
color: var(--code-text);
}
.wizard-yaml-copy.is-copied {
border-color: var(--success);
color: var(--success);
}
.wizard-yaml-output {
flex: 1;
margin: 0;
padding: 1.2rem 1.3rem;
overflow: auto;
font-family: var(--font-mono);
font-size: 0.8rem;
line-height: 1.65;
color: var(--code-text);
white-space: pre;
}
.wizard-yaml-output code {
font: inherit;
color: inherit;
background: none;
}
/* Inline syntax tinting for the YAML preview. */
.wizard-yaml-output .yaml-key { color: var(--ember-bright); }
.wizard-yaml-output .yaml-string { color: var(--code-string); }
.wizard-yaml-output .yaml-number { color: var(--code-number); }
.wizard-yaml-output .yaml-bool { color: var(--code-fn); }
.wizard-yaml-output .yaml-comment { color: var(--code-comment); font-style: italic; }
.wizard-yaml-output .yaml-null { color: var(--code-comment); font-style: italic; }
/* Footer: prev / step name / next */
.wizard-footer {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.4rem;
border-top: 1px solid var(--border);
background: var(--bg-elev);
}
.wizard-prev,
.wizard-next {
flex-shrink: 0;
}
.wizard-step-name {
flex: 1;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
}
.wizard-prev[disabled],
.wizard-next[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Step content building blocks. wizard.js renders these via DOM
construction; the classes here describe their visual shape. */
.wizard-step-title {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.wizard-step-desc {
color: var(--text-secondary);
margin-bottom: 1.2rem;
font-size: 0.96rem;
line-height: 1.55;
}
.wizard-step-tutorial {
margin: 0 0 1.5rem;
padding: 0.9rem 1rem;
background: var(--pill-note-bg);
border-radius: var(--radius-sm);
color: var(--pill-note-fg);
font-size: 0.88rem;
line-height: 1.55;
border-left: 3px solid var(--steel-bright);
}
.wizard-step-tutorial[hidden] { display: none; }
.wizard-step-tutorial::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-right: 0.5rem;
vertical-align: -2px;
background: currentcolor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0.85;
}
/* Card grid used by use-case + base-model selection steps. */
.wizard-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.8rem;
margin-bottom: 1rem;
}
.wizard-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
text-align: left;
transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.wizard-card:hover {
border-color: var(--border-strong);
background: var(--bg-elev);
}
.wizard-card.is-selected {
border-color: var(--ember-bright);
background: rgba(249, 115, 22, 0.06);
box-shadow: 0 0 0 1px var(--ember-bright);
}
.wizard-card-title {
font-weight: 600;
font-size: 0.95rem;
color: var(--text);
display: flex;
align-items: center;
gap: 0.4rem;
}
.wizard-card-title .badge {
font-size: 0.7rem;
font-weight: 500;
padding: 0.1rem 0.5rem;
background: var(--bg-elev);
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--text-muted);
}
.wizard-card-desc {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.4;
}
/* Form rows for parameter controls (Steps 4, 5, 6). */
.wizard-row {
display: grid;
grid-template-columns: 1fr;
gap: 0.4rem;
margin-bottom: 1rem;
}
.wizard-row-label {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 0.88rem;
font-weight: 500;
color: var(--text);
}
.wizard-row-label small {
font-weight: 400;
font-size: 0.78rem;
color: var(--text-muted);
}
.wizard-row-hint {
font-size: 0.78rem;
color: var(--text-muted);
}
.wizard-row-hint[hidden] { display: none; }
/* Per-field beginner-mode detail paragraph. Sits beneath the hint and
gives 2-3 sentences of plain-language explanation about WHAT the
field means (not just what range to pick). Visually distinct from
the row hint so the operator can pattern-match: hint = quick value
guidance, detail = conceptual primer. */
.wizard-row-detail {
margin-top: 0.5rem;
padding: 0.6rem 0.8rem;
background: var(--bg);
border-left: 2px solid var(--steel-bright);
border-radius: 4px;
font-size: 0.8rem;
line-height: 1.5;
color: var(--text-secondary);
}
.wizard-input,
.wizard-select {
display: block;
width: 100%;
padding: 0.55rem 0.8rem;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text);
font: inherit;
font-size: 0.92rem;
transition: border-color var(--transition);
}
.wizard-input:focus,
.wizard-select:focus {
outline: none;
border-color: var(--ember-bright);
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.wizard-input.is-invalid {
border-color: var(--danger);
}
/* Slider row (LoRA r / alpha, etc.). The numeric output sits to the
right of the slider so the user can see the value without polling
the preview pane. */
.wizard-slider-row {
display: grid;
grid-template-columns: 1fr 56px;
gap: 0.7rem;
align-items: center;
}
.wizard-slider {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 4px;
background: var(--border-strong);
border-radius: 999px;
outline: none;
}
.wizard-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
background: var(--ember-bright);
border-radius: 50%;
cursor: pointer;
transition: transform var(--transition);
}
.wizard-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.wizard-slider::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--ember-bright);
border-radius: 50%;
cursor: pointer;
border: none;
}
.wizard-slider-value {
font-family: var(--font-mono);
font-size: 0.88rem;
color: var(--ember-bright);
text-align: right;
font-variant-numeric: tabular-nums;
}
.wizard-toggle {
display: inline-flex;
align-items: center;
gap: 0.55rem;
cursor: pointer;
user-select: none;
}
.wizard-toggle input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 36px;
height: 20px;
background: var(--border-strong);
border-radius: 999px;
cursor: pointer;
position: relative;
transition: background var(--transition);
}
.wizard-toggle input[type="checkbox"]::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--text);
border-radius: 50%;
transition: transform var(--transition);
}
.wizard-toggle input[type="checkbox"]:checked {
background: var(--ember-bright);
}
.wizard-toggle input[type="checkbox"]:checked::after {
transform: translateX(16px);
}
.wizard-toggle input[type="checkbox"]:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.wizard-toggle-label {
font-size: 0.92rem;
color: var(--text);
}
/* High-risk callout banner shown on Step 6 when EU AI Act risk =
high-risk. Pinks the page so the user can't miss the obligation
shift. */
.wizard-callout {
margin-top: 1rem;
padding: 0.9rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.86rem;
line-height: 1.5;
background: var(--pill-danger-bg);
color: var(--pill-danger-fg);
border-left: 3px solid var(--danger);
}
.wizard-callout strong { color: inherit; }
/* Generated YAML actions on Step 7. */
.wizard-actions {
display: flex;
gap: 0.7rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.wizard-run-snippet {
margin-top: 1.4rem;
background: var(--code-bg);
border: 1px solid var(--code-border);
border-radius: var(--radius-sm);
padding: 0.8rem 1rem;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--code-text);
overflow-x: auto;
}
.wizard-run-snippet .prompt { color: var(--ember-bright); }
.wizard-run-snippet .flag { color: var(--steel-bright); }
.wizard-run-snippet .arg { color: var(--code-string); }
/* Resume banner — surfaces when wizard.js detects a previously-saved
session in localStorage and the user reopens the modal. */
.wizard-resume-banner {
margin-bottom: 1.4rem;
padding: 0.8rem 1rem;
background: var(--pill-tip-bg);
color: var(--pill-tip-fg);
border-left: 3px solid var(--success);
border-radius: var(--radius-sm);
font-size: 0.86rem;
line-height: 1.45;
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.wizard-resume-banner button {
background: transparent;
border: 1px solid currentcolor;
border-radius: 999px;
color: inherit;
padding: 0.25rem 0.7rem;
/* ``font: inherit`` would clobber the explicit font-size; pull the
family from the parent explicitly while keeping the size local. */
font-family: inherit;
font-size: 0.78rem;
cursor: pointer;
}
/* Collapsible accordion section inside a step pane. Used to group
advanced / optional fields (risk assessment, data governance,
webhooks, monitoring) without bloating the step counter. The header
is a button so keyboard users can Tab into it; aria-expanded reflects
the open/closed state for assistive tech.
Layout: header is a 3-column grid (icon | titles | chevron). Title
+ hint stack vertically inside the middle cell so a long hint wraps
cleanly without pushing the chevron off-axis. The body uses the
modern grid-template-rows 0fr→1fr trick so expand/collapse
animates smoothly without us manually measuring height. */
.wizard-accordion {
/* Override the global ``section { padding: 5rem 0 }`` rule (line 193).
Without this, every accordion grew 80px of top + bottom padding,
leaving a tall empty frame around the header. The wizard's
accordions are layout primitives, not page sections — they need
to fit their content tightly. */
padding: 0;
margin: 0.9rem 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.wizard-accordion:hover {
border-color: var(--border-strong);
}
.wizard-accordion.is-open {
border-color: rgba(249, 115, 22, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(249, 115, 22, 0.08);
}
.wizard-accordion-header {
width: 100%;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.05rem;
background: transparent;
border: none;
cursor: pointer;
font: inherit;
color: var(--text);
text-align: left;
transition: background var(--transition);
}
.wizard-accordion-header:hover {
background: var(--bg-elev);
}
.wizard-accordion-header:focus-visible {
outline: 2px solid var(--ember-bright);
outline-offset: -2px;
}
/* Leading icon — sits in a soft tinted square. Closed = neutral grey;
open = ember-tinted to mirror the active border. */
.wizard-accordion-icon {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background: var(--bg-elev);
color: var(--text-secondary);
flex-shrink: 0;
transition: background var(--transition), color var(--transition);
}
.wizard-accordion-icon svg {
width: 16px;
height: 16px;
}
.wizard-accordion.is-open .wizard-accordion-icon {
background: rgba(249, 115, 22, 0.12);
color: var(--ember-bright);
}
/* Title + hint stack — single column, tight gap so the two lines read
as one logical label. ``min-width: 0`` lets long hints truncate via
the wrapper rather than overflow the row. */
.wizard-accordion-titles {
display: flex;
flex-direction: column;
gap: 0.18rem;
min-width: 0;
}
.wizard-accordion-title {
font-weight: 600;
font-size: 0.95rem;
line-height: 1.3;
color: var(--text);
}
.wizard-accordion-hint {
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 400;
line-height: 1.45;
}
.wizard-accordion-chevron {
width: 20px;
height: 20px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: transform 240ms cubic-bezier(.4, 0, .2, 1), color var(--transition);
}
.wizard-accordion-chevron svg {
width: 16px;
height: 16px;
}
.wizard-accordion.is-open .wizard-accordion-chevron {
color: var(--ember-bright);
transform: rotate(180deg);
}
/* Closed accordion = header only. ``display: none`` is the bluntest
tool but the most reliable: it removes the body-wrap from layout
entirely, so a closed accordion is exactly the height of its
header button. The two prior attempts (grid-template-rows: 0fr;
max-height: 0) both failed in real browsers — content kept
reporting min-content height despite overflow:hidden, leaving
closed accordions as tall empty frames. We forfeit the slide
animation in exchange for visual correctness. The chevron rotation
+ open-state ember accent still telegraph state changes. */
.wizard-accordion-body-wrap {
display: none;
}
.wizard-accordion.is-open .wizard-accordion-body-wrap {
display: block;
}
.wizard-accordion-body {
border-top: 1px solid var(--border);
padding: 1rem 1.05rem 0.9rem;
}
/* Reduced-motion users get instant chevron / hover transitions. */
@media (prefers-reduced-motion: reduce) {
.wizard-accordion,
.wizard-accordion-icon,
.wizard-accordion-chevron {
transition: none !important;
}
}
.wizard-input[rows] { /* textareas styled the same as inputs */
font-family: var(--font-sans);
resize: vertical;
min-height: 60px;
}
/* Validation error pinned under an invalid input. */
.wizard-error {
margin-top: 0.4rem;
font-size: 0.78rem;
color: var(--danger);
}
.wizard-error[hidden] { display: none; }
/* ── Wizard responsive (mobile + reduced-motion) ─────────── */
/* On narrow viewports the dialog goes fullscreen and the YAML
preview collapses into an accordion under the step pane so the
user has full vertical room for the controls. */
@media (max-width: 900px) {
.wizard-modal { padding: 0; }
.wizard-dialog {
width: 100%;
height: 100vh;
max-height: 100vh;
border-radius: 0;
border: none;
}
.wizard-body {
grid-template-columns: 1fr;
/* ``minmax(0, 1fr)`` for the step-pane row — same reason as the
desktop rule above: without the ``min: 0`` floor a 1fr track
can refuse to shrink below its content. */
grid-template-rows: minmax(0, 1fr) auto;
}
.wizard-step-pane {
padding: 1.4rem;
}
.wizard-yaml-pane {
border-left: none;
border-top: 1px solid var(--code-border);
max-height: 45vh;
}
.wizard-yaml-pane:not(.is-expanded) .wizard-yaml-output {
display: none;
}
.wizard-yaml-pane:not(.is-expanded) {
max-height: 44px;
}
.wizard-yaml-pane.is-expanded .wizard-yaml-toggle svg {
transform: rotate(180deg);
}
/* C3 (review-cycle 3): when the operator expands the YAML accordion
on mobile, long configs (high-risk + every gate enabled) easily
run past 200 lines. Without an explicit ``overflow: auto`` floor
the pane consumed all remaining vertical space and pushed the
action footer (Copy / Download / Back / Next) off-screen, leaving
the operator unable to navigate. Clamp the body to a fraction of
the viewport so the footer always stays reachable. */
.wizard-yaml-pane.is-expanded .wizard-yaml-output {
max-height: 38vh;
overflow: auto;
}
.wizard-cards {
grid-template-columns: 1fr;
}
.wizard-footer {
padding: 0.8rem 1rem;
}
.wizard-step-name {
display: none;
}
}
/* The dialog reads as a flat block under reduced-motion: no enter
animation, no slide transitions on step changes, no progress
transition. The functionality still works, just without motion. */
@media (prefers-reduced-motion: reduce) {
.wizard-modal,
.wizard-dialog {
animation: none !important;
}
.wizard-progress-fill {
transition: none !important;
}
}
/* ── Contact ─────────────────────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
max-width: 980px;
margin: 0 auto;
}
@media (max-width: 880px) {
.contact-grid { grid-template-columns: 1fr; }
}
.contact-form-card,
.contact-channels {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.8rem;
}
.contact-form-card h2,
.contact-channels h2 {
font-size: 1.2rem;
margin-bottom: 1.2rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 1.1rem; }
.form-group label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.4rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.65rem 0.875rem;
/* iOS Safari auto-zooms when a form control's computed font-size is
below 16px, kicking the layout sideways on every focus. Pin the
base size to 16px on touch viewports; desktop keeps the slightly
smaller (~14.7px) text via the @media-min override below. */
font: 400 16px var(--font-sans);
color: var(--text);
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
outline: none;
/* 44px minimum tap height — touch-target floor for iOS HIG. */
min-height: 44px;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
@media (min-width: 720px) {
.form-group input,
.form-group textarea,
.form-group select {
/* Desktop pointers don't trigger zoom-on-focus, so the slightly
smaller body-text size is fine and matches the visual rhythm of
the rest of the form. */
font-size: 0.92rem;
}
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--ember);
box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.form-group textarea { resize: vertical; min-height: 130px; font-family: var(--font-sans); }
.form-submit { width: 100%; }
.form-status {
margin-top: 1rem;
padding: 0.7rem 0.95rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
display: none;
}
/* Status colors are theme-split: the lighter shades (#4ade80 / #f87171)
meet WCAG AA on the dark theme but fail on the light theme's white
background (~3.5:1 and ~3.6:1). Define the dark-friendly defaults here;
the [data-theme="light"] block overrides them with darker shades. */
.form-status.success {
display: block;
background: rgba(34,197,94,.08);
border: 1px solid rgba(34,197,94,.3);
color: #4ade80;
}
.form-status.error {
display: block;
background: rgba(239,68,68,.08);
border: 1px solid rgba(239,68,68,.3);
color: #f87171;
}
[data-theme="light"] .form-status.success { color: #15803d; } /* green-700 */
[data-theme="light"] .form-status.error { color: #b91c1c; } /* red-700 */
.channel-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.channel-item {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.channel-item:hover {
background: var(--bg-elev);
border-color: var(--border-strong);
}
.channel-icon {
width: 38px;
height: 38px;
border-radius: 8px;
display: grid;
place-items: center;
background: rgba(249,115,22,.12);
color: var(--ember-bright);
flex-shrink: 0;
border: 1px solid rgba(249,115,22,.22);
}
.channel-icon svg { width: 18px; height: 18px; }
.channel-text h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.channel-text p { font-size: 0.85rem; line-height: 1.5; margin-bottom: 0.4rem; }
.channel-text a {
font-size: 0.85rem;
font-weight: 500;
}
/* ── Legal ───────────────────────────────────────────────── */
.legal {
padding-top: 3rem;
padding-bottom: 5rem;
}
.legal-content {
max-width: var(--max-width-narrow);
margin: 0 auto;
}
.legal-content h2 {
font-size: 1.3rem;
margin-top: 2.5rem;
margin-bottom: 0.8rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--border);
}
.legal-content h3 {
font-size: 1.05rem;
margin-top: 1.6rem;
margin-bottom: 0.5rem;
}
.legal-content p { margin-bottom: 0.95rem; }
.legal-content ul, .legal-content ol {
margin: 0 0 1.1rem 1.4rem;
color: var(--text-secondary);
}
.legal-content li { margin-bottom: 0.35rem; line-height: 1.7; }
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-meta {
font-size: 0.85rem;
color: var(--text-muted);
padding: 0.6rem 0.95rem;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 2rem;
}
/* ── Footer ──────────────────────────────────────────────── */
.footer {
padding: 3rem 0 1.6rem;
border-top: 1px solid var(--border);
background: var(--bg-alt);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 2rem;
margin-bottom: 2.5rem;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand {
display: flex;
align-items: center;
gap: 0.55rem;
font-weight: 700;
font-size: 1.05rem;
color: var(--text);
margin-bottom: 0.8rem;
}
.footer-brand-mark {
width: 28px;
height: 28px;
border-radius: 6px;
}
.footer-brand-icon {
width: 14px;
height: 14px;
}
.footer-desc {
font-size: 0.88rem;
color: var(--text-muted);
max-width: 320px;
line-height: 1.65;
}
.footer-col h4 {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 0.85rem;
font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a {
font-size: 0.88rem;
color: var(--text-secondary);
}
.footer-col a:hover { color: var(--ember-bright); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
font-size: 0.82rem;
color: var(--text-muted);
flex-wrap: wrap;
gap: 0.6rem;
}
/* ── i18n ────────────────────────────────────────────────── */
/* Translations are applied at runtime by js/i18n.js. To prevent a flash
of English defaults for users on other languages, the body stays
visually muted until i18n.js applies the table and adds the
`i18n-ready` class. Falls back gracefully if JS is disabled
(after 800ms the body is forced visible). */
body:not(.i18n-ready) [data-i18n],
body:not(.i18n-ready) [data-i18n-html] { visibility: hidden; }
body:not(.i18n-ready) { animation: i18n-failsafe 0.8s linear forwards; }
@keyframes i18n-failsafe { to { visibility: visible; } }
/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
/* ── Print ──────────────────────────────────────────────── */
/* ── Print stylesheet ────────────────────────────────────────
``!important`` is industry-standard for print resets: the cascade
has already applied dark-theme tokens, animation surfaces, and
chrome backdrops, all of which need to be force-overridden for
paper output. A scoped-reset alternative would require either
sweeping selector duplication or a body[data-printing] hook —
both worse for maintenance than the explicit !important here. */
@media print {
.navbar, .nav-hamburger, .theme-toggle, .lang-toggle,
.hero-terminal, .copy-btn, footer { display: none !important; }
body {
background: #fff !important;
color: #000 !important;
font-size: 12pt;
}
a { color: #000 !important; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
section { padding: 1rem 0 !important; }
.container { max-width: 100% !important; padding: 0 !important; }
.code-block, pre {
background: #f5f5f5 !important;
border: 1px solid #ccc !important;
color: #000 !important;
page-break-inside: avoid;
}
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
/* `clip` is deprecated but kept as a legacy fallback for older browsers
that don't yet honour `clip-path`. New code should rely on the
`clip-path` declaration below. */
clip: rect(0,0,0,0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ── Webkit scrollbar (subtle) ───────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* ===============================================================
USER GUIDE — sidebar + content + on-this-page TOC layout.
The shell lives in site/guide.html; content is loaded at runtime
from site/js/usermanuals/.js (built from docs/usermanuals/).
=============================================================== */
/* Reading-progress bar at the top of the viewport.
Native