/* ============================================================
BOMB VISION - product page stylesheet
Design bones: the app's dark "field" theme (src/index.css).
Motion rules: transform/opacity only · 90–250ms feel · decel
cubic-bezier(.16,1,.3,1) · everything dies under reduced motion.
============================================================ */
/* self-hosted font kit (was: Google Fonts @import) - latin + latin-ext
woff2 subsets under assets/fonts/ so the page is genuinely offline-clean:
zero third-party requests, zero console noise on an air-gapped machine.
Inter ships as ONE variable file covering weights 400-600. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/barlow-condensed-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/barlow-condensed-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/barlow-condensed-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/barlow-condensed-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/barlow-condensed-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/barlow-condensed-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/barlow-condensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/barlow-condensed-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/inter-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/inter-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
/* surfaces - warm charcoal, olive-tinted */
--s900: #15160f;
--s800: #1c1d15;
--s700: #23241b;
--s600: #2b2c21;
--s500: #353629;
--s400: #454637;
/* khaki / olive accent */
--a300: #d6cf9f;
--a400: #b5ac72;
--a500: #8c8657;
--a600: #6e6943;
/* semantic */
--danger-400: #c97a5a;
--danger-500: #a4543a;
--ok-400: #9db87a;
--ok-500: #7a9a55;
--info-400: #8fa6b5;
--warn-400: #cfa84f;
--warn-500: #b08c33;
/* bone text */
--t1: #e6e2cf;
--t2: #a6a28b;
--t3: #75725e;
--b1: #3b3c2e;
--b2: #2a2b20;
--raised: #23241b;
--on-accent: #15160f;
--tint-accent: rgba(140, 134, 87, 0.18);
--tint-ok: rgba(157, 184, 122, 0.15);
--tint-warn: rgba(207, 168, 79, 0.15);
--tint-danger: rgba(201, 122, 90, 0.15);
--shadow-field: rgba(0, 0, 0, 0.45);
--key-shadow: rgba(0, 0, 0, 0.45);
--key-shadow-soft: rgba(0, 0, 0, 0.35);
/* luminous accents - "lit screens in a dark room" (contrast/lightness pass) */
--a200: #ece7c6;
--glow-a: rgba(214, 207, 159, 0.42);
--glow-green: rgba(125, 255, 140, 0.35);
--crt-green: #7dff8c;
/* raised / lighter surfaces for section rhythm */
--raised-1: #2a2b20;
--raised-2: #232419;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Barlow Condensed', 'Arial Narrow', 'Inter', sans-serif;
--font-mono: 'IBM Plex Mono', 'Cascadia Mono', 'SF Mono', Consolas, monospace;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--topbar-h: 34px;
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter:stable - the gutter is reserved while body.locked hides
overflow, so the hero lands with ZERO horizontal layout shift */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 12px); scrollbar-gutter: stable; }
body {
margin: 0;
background: var(--s900);
color: var(--t1);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.locked { overflow: hidden; }
/* every ![]()
carries explicit width/height attributes so layout is
reserved before lazy loads land; height:auto keeps the attribute pair
as an aspect-ratio hint only */
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 0.6em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--a500); color: var(--on-accent); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--s800); }
::-webkit-scrollbar-thumb { background: var(--s500); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--s400); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.mono-label {
font-family: var(--font-mono);
/* a11y pass 2026-07-11: mono metadata floor lifted 11 → 12px */
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.kicker { color: var(--a400); margin-bottom: 10px; }
.h2 {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
/* round 8: down from 30-44px - the owner's "giant headline" note */
font-size: clamp(27px, 2.9vw, 38px);
line-height: 1.04;
margin: 0 0 10px;
}
.h3 {
font-family: var(--font-display);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 24px;
line-height: 1.1;
margin: 0 0 8px;
}
.h3-sm {
font-size: 12px;
font-weight: 600;
color: var(--a300);
margin: 0 0 8px;
}
.section-lede { color: var(--t2); max-width: 46ch; margin: 0; }
/* round 8: 52px → 36px - the old rhythm opened every section on a
band of dead top-pad */
section { padding: 32px 0; }
.split-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 26px;
}
.split-head .h2 { margin-bottom: 0; }
/* links - underline sweep on hover */
a { color: var(--a300); text-decoration: none; }
p a, .foot-contact a, .gate-foot a {
background-image: linear-gradient(var(--a400), var(--a400));
background-repeat: no-repeat;
background-size: 0% 1px;
background-position: 0 100%;
transition: background-size 200ms var(--ease);
padding-bottom: 1px;
}
p a:hover, .foot-contact a:hover, .gate-foot a:hover { background-size: 100% 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
outline: 2px solid var(--a400);
outline-offset: 0px;
transition: outline-offset 120ms var(--ease);
}
a:focus-visible, button:focus-visible { outline-offset: 2px; }
/* ---------- hard-key buttons (from the app, + hover rise) ---------- */
.btn-key, .btn-key-outline {
display: inline-block;
font-family: var(--font-mono);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
padding: 12px 22px;
white-space: nowrap;
transition: background-color 90ms ease, border-color 90ms ease, color 90ms ease,
transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.btn-key {
background: var(--a500);
color: var(--on-accent);
border: none;
box-shadow: 0 3px 0 var(--key-shadow);
}
.btn-key:hover { background: var(--a400); transform: translateY(-1px); box-shadow: 0 4px 0 var(--key-shadow), 0 0 24px rgba(181, 172, 114, 0.4); }
.btn-key:active { transform: translateY(3px); box-shadow: 0 0 0 var(--key-shadow); }
.btn-key-outline {
background: var(--raised);
color: var(--a300);
border: 1px solid var(--b1);
box-shadow: 0 3px 0 var(--key-shadow-soft);
}
.btn-key-outline:hover { border-color: var(--a500); transform: translateY(-1px); box-shadow: 0 4px 0 var(--key-shadow-soft); }
.btn-key-outline:active { transform: translateY(3px); box-shadow: 0 0 0 var(--key-shadow-soft); }
/* ---------- confidence chips (words locked: HIGH / MED / LOW / UNSURE) ---------- */
.chip {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
padding: 5px 10px;
border-radius: 2px;
border: 1px solid;
}
.chip-high { color: var(--ok-400); border-color: var(--ok-500); background: var(--tint-ok); }
.chip-med { color: var(--warn-400); border-color: var(--warn-500); background: var(--tint-warn); }
.chip-low { color: var(--danger-400); border-color: var(--danger-500); background: var(--tint-danger); }
.chip-unsure { color: var(--info-400); border-color: var(--info-400); background: rgba(143, 166, 181, 0.12); border-style: dashed; }
.chip.dim { opacity: 0.3; }
.chip-meter { display: inline-flex; gap: 2px; }
.chip-meter i {
width: 8px; height: 8px;
background: currentColor;
opacity: 0.25;
transform: scale(0.6);
transition: opacity 60ms ease, transform 120ms var(--ease);
}
.chip.pop { animation: chipPop 120ms var(--ease); }
.chip.pop .chip-meter i { opacity: 1; transform: scale(1); }
.chip.pop .chip-meter i:nth-child(1) { transition-delay: 0ms; }
.chip.pop .chip-meter i:nth-child(2) { transition-delay: 60ms; }
.chip.pop .chip-meter i:nth-child(3) { transition-delay: 120ms; }
@keyframes chipPop { from { transform: scale(0.92); } to { transform: scale(1); } }
/* one-shot dashed shimmer for UNSURE - never loops */
@keyframes unsureShimmer {
0% { box-shadow: 0 0 0 0 rgba(143, 166, 181, 0.0); }
40% { box-shadow: 0 0 0 5px rgba(143, 166, 181, 0.18); }
100% { box-shadow: 0 0 0 0 rgba(143, 166, 181, 0.0); }
}
.chip-unsure.shimmer { animation: chipPop 120ms var(--ease), unsureShimmer 700ms var(--ease) 120ms 1; }
/* ============================================================
ACCESS GATE - OLD-SCHOOL GREEN PHOSPHOR TERMINAL (round 9,
owner items 19-20): the whole sequence (gate → boot → off →
hero) sits on the SAME page base (--s900) - no black frames
anywhere. The tube screen itself is a LIT deep khaki-green -
visible scanlines, screen-wide green luminance, glowing
phosphor text, header flicker, blinking block cursor, curved
glass sheen. The real is invisible over the prompt
line; js/main.js echoes it as asterisks.
============================================================ */
#gate {
position: fixed;
inset: 0;
z-index: 1000;
background: var(--s900); /* monitor bezel = the page base - uniform sequence */
opacity: 1;
transition: opacity 150ms ease;
}
#gate.gate-out { opacity: 0; pointer-events: none; }
#gate[hidden] { display: none; }
/* round 14 (owner item 6a): the gate phosphor is pulled OFF neon green onto
the page's olive-drab axis. --crt-green / --glow-green are overridden in
GATE SCOPE ONLY, so the demo SAM-3 flag and the AI mark keep their bright
phosphor while the terminal harmonizes with the landing page. */
#gate { --crt-green: #bcc07e; --glow-green: rgba(190, 184, 120, 0.30); }
/* the tube - a LIT green screen. Round 10 (owner item 2): several steps
DARKER than the round-9 #223420→#101809 radial, and re-hued onto the
landing page's own olive-green axis (--s900 #15160f ≈ hue 68°) so the
gate and the hero read as one palette - gate darker, same hue family. */
.gate-tube {
position: absolute;
inset: clamp(8px, 1.6vw, 22px);
border-radius: 22px / 30px;
overflow: hidden;
background: radial-gradient(ellipse at 50% 42%, #1b1d10 0%, #14160b 46%, #0e1007 78%, #090b04 100%);
box-shadow:
inset 0 0 150px rgba(10, 11, 5, 0.8),
inset 0 0 60px rgba(208, 202, 146, 0.10),
inset 0 0 18px rgba(208, 202, 146, 0.12),
0 0 0 1px rgba(214, 207, 159, 0.10),
0 0 44px rgba(208, 202, 146, 0.07);
}
/* screen-wide phosphor luminance - the tube reads as SWITCHED ON */
.gate-tube::before {
content: '';
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
radial-gradient(ellipse 74% 58% at 50% 40%, rgba(208, 202, 146, 0.10), transparent 72%),
radial-gradient(ellipse 110% 90% at 50% 108%, rgba(208, 202, 146, 0.05), transparent 60%);
animation: gateHum 4.6s ease-in-out infinite;
}
@keyframes gateHum { 0%, 100% { opacity: 0.92; } 50% { opacity: 1; } }
.gate-scanlines {
position: absolute; inset: 0; pointer-events: none; z-index: 3;
background:
repeating-linear-gradient(0deg, rgba(208, 202, 146, 0.085) 0 1px, transparent 1px 3px),
repeating-linear-gradient(0deg, transparent 0 90px, rgba(208, 202, 146, 0.04) 90px 94px);
mix-blend-mode: screen;
}
.gate-vignette {
position: absolute; inset: 0; pointer-events: none; z-index: 4;
background: radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(9, 10, 4, 0.62) 100%);
}
/* curved-glass sheen: a faint bulge highlight up top */
.gate-glass {
position: absolute; inset: 0; pointer-events: none; z-index: 5;
background:
radial-gradient(ellipse 62% 30% at 50% 7%, rgba(214, 231, 198, 0.075), transparent 70%),
linear-gradient(112deg, transparent 42%, rgba(230, 246, 220, 0.028) 47%, transparent 55%);
}
.gate-screen {
position: absolute; inset: 0; z-index: 2;
display: flex;
flex-direction: column;
padding: clamp(22px, 5.5vh, 58px) clamp(18px, 6vw, 92px);
font-family: var(--font-mono);
font-size: clamp(12.5px, 1.15vw, 15px);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--crt-green);
text-shadow: 0 0 9px rgba(208, 202, 146, 0.65), 0 0 26px rgba(208, 202, 146, 0.22);
cursor: text;
}
/* visually-hidden (screen-reader) heading + label */
.gate-vh {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
.gate-sysline { margin: 0 0 6px; opacity: 0; animation: gateLineIn 60ms steps(1) forwards; }
/* header line: bright phosphor + a brief tube flicker on entrance (item 19) */
.gate-sysline.gl-head {
color: #dfe0b0;
text-shadow: 0 0 12px rgba(226, 224, 168, 0.75), 0 0 34px rgba(208, 202, 146, 0.3);
animation: gateLineIn 60ms steps(1) 120ms forwards, gateFlick 420ms steps(1) 180ms;
}
.gate-sysline.gl-head b { color: rgba(208, 202, 146, 0.55); font-weight: 500; }
.gate-sysline.gl-rule {
color: rgba(208, 202, 146, 0.4); overflow: hidden; white-space: nowrap;
animation: gateLineIn 60ms steps(1) 220ms forwards, gateFlick 420ms steps(1) 260ms;
}
@keyframes gateFlick {
0% { opacity: 1; } 12% { opacity: 0.35; } 22% { opacity: 1; }
38% { opacity: 0.6; } 52%, 100% { opacity: 1; }
}
.gate-sysline.gl-dim { color: rgba(196, 194, 140, 0.62); text-shadow: 0 0 6px rgba(208, 202, 146, 0.2); font-size: 0.86em; }
.gate-io .gate-sysline.gl-dim:nth-of-type(1) { animation-delay: 320ms; }
.gate-io .gate-sysline.gl-dim:nth-of-type(2) { animation-delay: 420ms; }
.gate-io .gate-sysline.gl-dim:nth-of-type(3) { animation-delay: 520ms; }
.gate-sysline.gl-last { margin-bottom: 8px; }
@keyframes gateLineIn { to { opacity: 1; } }
/* ---- centered interactive block (round 10, owner item 1): ASCII title +
SYS lines + prompt + AUTHENTICATE key sit as ONE horizontally-centered
block, vertically centered-ish between the header bar and the footer. */
.gate-core {
margin: auto 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 10px 0;
}
/* the gate wears the boot screen's ASCII title (owner item 3) - same
markup + phosphor treatment; it flickers in with the other syslines */
#gate .boot-title { opacity: 0; animation: phosFlicker 340ms steps(1) 200ms forwards; }
#gate .boot-title.bt-2 { animation-delay: 320ms; }
/* EOD DECISION SUPPORT descriptor (round 14, owner item 6c): a prominent
subtitle directly under the ASCII BOMB VISION title - sized well above the
SYS metadata lines, phosphor-glowing in the gate's olive palette. */
.gate-subtitle {
margin: clamp(10px, 1.8vh, 20px) 0 0;
font-family: var(--font-mono);
font-size: clamp(14px, 2vw, 24px);
font-weight: 500;
letter-spacing: 0.36em;
text-indent: 0.36em;
text-transform: uppercase;
text-align: center;
color: #dfe0b0;
text-shadow: 0 0 14px rgba(208, 202, 146, 0.5), 0 0 34px rgba(208, 202, 146, 0.24);
opacity: 0;
animation: gateLineIn 60ms steps(1) 480ms forwards, gateFlick 440ms steps(1) 520ms;
}
/* the IO block and the boot log share one grid cell: when the IO block
dissolves (opacity only - layout is preserved, the title NEVER moves)
the boot log types out in the same space under the title */
.gate-stack {
display: grid;
/* centre the single max-content track itself - the boot log then
stretches only to the IO block's width and types out under the
title, not from the tube's far-left edge */
justify-content: center;
width: 100%;
margin-top: clamp(16px, 3vh, 30px);
}
.gate-io {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
align-items: flex-start;
width: max-content;
max-width: 100%;
transition: opacity 300ms ease;
}
#gate.gate-boot .gate-io { opacity: 0; pointer-events: none; }
#gate-form { display: flex; flex-direction: column; align-self: stretch; }
/* scrollback (attempts + verdicts) - a FIXED two-line TTY window: newest
lines pin to the bottom, older ones scroll out of view. Constant height,
so the block never re-centres - the ASCII title must not move through
deny / accept / boot. */
.gate-hist {
margin: 0 0 2px;
height: calc(3.1em + 12px);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.gate-line { margin: 0 0 6px; color: rgba(196, 194, 140, 0.55); text-shadow: none; }
.gate-line-err { color: var(--danger-400); text-shadow: 0 0 8px rgba(201, 122, 90, 0.35); }
.gate-line-ok { color: #dfe0b0; text-shadow: 0 0 10px rgba(226, 224, 168, 0.6); }
#gate.gate-deny .gate-screen { animation: denyFlick 260ms steps(2) 1; }
@keyframes denyFlick { 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; } }
/* the live prompt line - the real input sits invisible on top.
Deliberately NOT entrance-animated: the prompt is the critical
control and must never be hostage to an animation edge case. */
.gate-promptline {
position: relative;
margin: 0 0 18px;
}
.gp-echo { letter-spacing: 0.18em; }
.gp-cursor {
display: inline-block;
width: 0.62em; height: 1.24em;
background: var(--crt-green);
box-shadow: 0 0 9px rgba(208, 202, 146, 0.75);
vertical-align: -0.22em;
animation: caretBlink 900ms steps(2, start) infinite;
}
#gate-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
background: none;
border: none;
color: transparent;
font-size: 16px; /* ≥16px: no mobile zoom-on-focus */
cursor: text;
}
#gate-input:focus { outline: none; }
/* the AUTHENTICATE hard-key, restyled as a phosphor terminal key -
keeps .btn-key so the cursor swarm (§1b) still targets it */
#gate .btn-key-term {
align-self: center; /* round 10: the key sits centered in the block - "the password button in the middle" */
background: rgba(208, 202, 146, 0.07);
color: var(--crt-green);
border: 1px solid rgba(208, 202, 146, 0.45);
border-radius: 2px;
box-shadow: 0 0 14px rgba(208, 202, 146, 0.12);
text-shadow: 0 0 8px rgba(208, 202, 146, 0.5);
padding: 10px 16px;
opacity: 0;
animation: gateLineIn 60ms steps(1) 760ms forwards;
}
#gate .btn-key-term:hover {
background: rgba(208, 202, 146, 0.14);
border-color: rgba(208, 202, 146, 0.75);
transform: translateY(-1px);
box-shadow: 0 0 22px rgba(208, 202, 146, 0.22);
}
#gate .btn-key-term:active { transform: translateY(1px); box-shadow: 0 0 8px rgba(208, 202, 146, 0.14); }
.gate-foot {
margin-top: auto;
padding-top: 20px;
color: rgba(196, 194, 140, 0.5);
text-shadow: none;
font-size: 0.82em;
line-height: 2.1;
letter-spacing: 0.14em;
}
.gate-foot a { color: #c1c090; }
/* ============================================================
BOOT-IN-PLACE (round 10, owner item 4) - the gate terminal IS
the boot surface. States, classes added by main.js:
.gate-boot prompt / key / SYS lines dissolve (opacity only -
layout preserved, the ASCII title never moves)
.gate-typing the boot log types out under the title
.gate-off old-monitor power-off: the lit tube collapses to a
bright horizontal phosphor line → dot → hero
The old standalone #boot overlay is deleted.
============================================================ */
/* BIG 1980s terminal title - blocky ASCII, phosphor green (shared
markup/treatment with the retired boot screen, scaled the same) */
.boot-title {
margin: 0;
color: var(--crt-green);
font-family: var(--font-mono);
font-size: min(2.9vw, 19px);
line-height: 1.05;
text-shadow: 0 0 10px rgba(208, 202, 146,0.75), 0 0 34px rgba(208, 202, 146,0.3);
white-space: pre;
}
.boot-title.bt-2 { margin-top: 0.4em; color: #dfe0b0; }
@keyframes phosFlicker {
0% { opacity: 0; }
18% { opacity: 1; }
30% { opacity: 0.25; }
46% { opacity: 1; }
58% { opacity: 0.55; }
72%, 100% { opacity: 1; }
}
/* the boot log - occupies the IO block's grid cell, under the title */
.boot-log {
grid-area: 1 / 1;
justify-self: stretch;
margin: 0;
min-height: 132px;
color: var(--crt-green);
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.7;
letter-spacing: 0.06em;
text-transform: none;
text-align: left;
text-shadow: 0 0 8px rgba(208, 202, 146,0.55);
white-space: pre-wrap;
opacity: 0;
transition: opacity 180ms ease;
pointer-events: none;
}
#gate.gate-typing .boot-log { opacity: 1; }
.boot-log .ok { color: #dfe0b0; }
.boot-log .cur { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: var(--crt-green); box-shadow: 0 0 8px var(--crt-green); animation: caretBlink 800ms steps(2, start) infinite; }
.gate-skip {
position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
z-index: 6; margin: 0; pointer-events: none;
color: rgba(208, 202, 146,0.5); letter-spacing: 0.22em;
opacity: 0; transition: opacity 200ms ease 300ms;
}
#gate.gate-boot .gate-skip { opacity: 1; }
#gate.gate-off .gate-skip { opacity: 0 !important; transition: opacity 120ms ease 0ms; }
/* ---- OLD-MONITOR POWER-OFF: the whole lit tube collapses vertically
into a bright horizontal phosphor line on the bezel, the line shrinks
to a dot, the dot dies → the hero fades in beneath. ---- */
.gate-offline {
position: absolute; left: 4%; right: 4%; top: 50%; height: 3px; margin-top: -1.5px;
z-index: 6; pointer-events: none;
background: #f3f2e6;
box-shadow: 0 0 18px 4px rgba(208, 202, 146, 0.85), 0 0 70px 16px rgba(208, 202, 146, 0.35);
opacity: 0;
transform: scaleX(1);
}
.gate-offdot {
position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
z-index: 7; pointer-events: none;
border-radius: 50%;
background: #f3f2e6;
box-shadow: 0 0 16px 6px rgba(226, 224, 168, 0.9);
opacity: 0;
}
#gate.gate-off .gate-tube { animation: crtCollapseY 220ms ease-in forwards; }
@keyframes crtCollapseY {
0% { transform: scaleY(1); filter: brightness(1); }
100% { transform: scaleY(0.004); filter: brightness(2.6); }
}
#gate.gate-off .gate-offline { animation: crtOffLine 460ms cubic-bezier(0.5, 0, 0.75, 0.4) 100ms forwards; }
@keyframes crtOffLine {
0% { opacity: 1; transform: scaleX(1); }
34% { opacity: 1; transform: scaleX(1); } /* holds bright while the tube collapses into it */
100% { opacity: 1; transform: scaleX(0.006); } /* collapses to the centre dot */
}
#gate.gate-off .gate-offdot { animation: crtOffDot 210ms ease-out 540ms forwards; }
@keyframes crtOffDot {
0% { opacity: 1; transform: scale(1.4); }
60% { opacity: 0.85; transform: scale(0.8); }
100% { opacity: 0; transform: scale(0.15); }
}
@media (max-width: 640px) {
.gate-screen { font-size: 11.5px; letter-spacing: 0.06em; }
.gate-sysline.gl-dim { font-size: 0.9em; }
.boot-title { font-size: 2.15vw; }
.boot-log { font-size: 11.5px; min-height: 120px; }
}
/* ============================================================
TOP BAR
============================================================ */
.topbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--topbar-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
background: color-mix(in srgb, var(--s900) 88%, transparent);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--b2);
color: var(--t2);
}
.topbar .topbar-right { color: var(--a400); }
/* ============================================================
REVEAL SYSTEM - staggered 12px rise, 50ms per card
============================================================ */
.reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity 380ms var(--ease), transform 380ms var(--ease);
transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: translateY(0); }
/* anchor target flash - brief left-rule accent */
@keyframes anchorFlash {
0% { box-shadow: inset 3px 0 0 var(--a400); }
100% { box-shadow: inset 0 0 0 transparent; }
}
.anchor-flash { animation: anchorFlash 300ms ease-out 1; }
/* ============================================================
HERO (round 13, owner items 1-3). Full-bleed 100vh. Layers,
bottom-up: olive base (never black) - founder's slow-motion
demolition video, heavily darkened (opacity over the olive base
+ a slight desaturate, reading ~30% brightness) - khaki field
glow - grid/scanline texture ON TOP of the video - shade floor
+ edge vignette - content: single filled CTA top-right, the
giant two-tone wordmark LIFTED to the vertical center with the
plain-language description under it, and the tiny mono
annotation columns keeping the floor.
============================================================ */
.hero {
position: relative;
height: 100vh;
height: 100svh; /* mobile URL-bar honest; falls back to 100vh above */
min-height: 540px;
display: flex;
flex-direction: column;
padding: calc(var(--topbar-h) + 16px) 0 0;
overflow: hidden;
background: var(--s900); /* deep olive base - never black */
}
/* video backdrop - full-bleed behind everything, heavily darkened so
the wordmark and annotations always read. Reduced motion: main.js
never starts playback, so the poster frame stands in as a still. */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-bg video {
display: block;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.46; /* over the olive base ≈ 30% brightness */
/* olive tint: sepia + a small hue swing pulls the blue sky onto the
page's khaki/olive axis, like the drum backdrop read */
filter: sepia(0.3) hue-rotate(24deg) saturate(0.85) brightness(0.78);
}
/* soft khaki field glow above the drum */
.hero::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse 920px 640px at 50% 40%, rgba(140, 134, 87, 0.10), transparent 70%);
}
/* grid + drifting scanline texture (ambient, 60s) - stays on top of the drum */
.hero-texture {
position: absolute;
inset: -100% 0 0 0;
z-index: 1;
pointer-events: none;
background-image:
repeating-linear-gradient(0deg, rgba(230, 226, 207, 0.025) 0 1px, transparent 1px 3px),
linear-gradient(to right, rgba(230, 226, 207, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(230, 226, 207, 0.03) 1px, transparent 1px);
background-size: 100% 100%, 56px 56px, 56px 56px;
animation: textureDrift 60s linear infinite;
}
@keyframes textureDrift { from { transform: translateY(0); } to { transform: translateY(50%); } }
/* shade floor - biases the darkening toward the annotation/wordmark zone */
.hero-shade {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom,
rgba(21, 22, 15, 0.44) 0%,
rgba(21, 22, 15, 0.10) 30%,
rgba(21, 22, 15, 0.18) 56%,
rgba(21, 22, 15, 0.68) 82%,
rgba(21, 22, 15, 0.88) 100%);
}
/* edge vignette */
.hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse at 50% 38%, transparent 42%, rgba(21, 22, 15, 0.72) 100%);
}
/* --- chrome: the single filled CTA rides top-right under the topbar;
SEE IT WORK demoted to a small mono link beside it --- */
.hero-cta-row {
position: absolute;
top: calc(var(--topbar-h) + 16px);
right: clamp(16px, 3vw, 40px);
z-index: 2;
display: flex;
align-items: center;
gap: 18px;
opacity: 0;
}
body.booted .hero-cta-row { animation: riseIn 400ms var(--ease) 220ms forwards; }
.hero-see { color: var(--t2); letter-spacing: 0.18em; padding: 6px 0; }
.hero-see::after { content: ' ↗'; color: var(--a600); }
.hero-see:hover { color: var(--a300); }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* --- center block: wordmark lifted up + description under it (items 2-3) --- */
.hero-center {
position: relative;
z-index: 2;
margin: auto 0; /* vertically centers between the topbar row and the annotation floor */
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 3vh, 30px);
padding: 0 3vw;
}
.hero-desc {
margin: 6px 0 0;
max-width: 44ch;
font-family: var(--font-sans);
font-size: clamp(18px, 1.7vw, 24px);
line-height: 1.5;
letter-spacing: 0.01em;
font-weight: 400;
color: #f2f1ea; /* white, modern, always readable over the darkened video */
text-align: center;
text-wrap: balance;
text-shadow: 0 1px 18px rgba(10, 11, 6, 0.8);
opacity: 0;
}
body.booted .hero-desc { animation: riseIn 500ms var(--ease) 340ms forwards; }
.hero-desc b { font-weight: 500; color: var(--a300); text-shadow: 0 0 26px rgba(214, 207, 159, 0.28); }
/* --- foot: annotation columns keep the floor --- */
.hero-foot { position: relative; z-index: 2; width: 100%; }
.hero-annot {
display: flex;
align-items: flex-start;
gap: clamp(16px, 2.4vw, 38px);
width: 94vw;
margin: 0 auto 20px;
}
.hero-an {
margin: 0;
border-left: 1px solid var(--b1);
padding-left: 10px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.15em;
line-height: 1.8;
color: var(--t3);
max-width: 40ch;
opacity: 0;
}
.hero-an b { color: var(--t2); font-weight: 500; }
.hero-an em { font-style: normal; color: var(--a500); }
.hero-an-scroll { margin-left: auto; text-align: left; flex-shrink: 0; }
.hero-an-scroll b { color: var(--a300); transition: color 140ms ease; }
.hero-an-scroll b em { color: var(--crt-green); }
.hero-an-scroll:hover b { color: var(--a200); }
/* annotation cascade once the gate clears */
body.booted .hero-an { animation: riseIn 400ms var(--ease) forwards; }
body.booted .hero-an:nth-child(1) { animation-delay: 240ms; }
body.booted .hero-an:nth-child(2) { animation-delay: 300ms; }
body.booted .hero-an:nth-child(3) { animation-delay: 360ms; }
body.booted .hero-an:nth-child(4) { animation-delay: 420ms; }
body.booted .hero-an:nth-child(5) { animation-delay: 480ms; }
/* --- the wordmark: giant, lifted to the viewport center (round 13,
owner item 2), spanning ~93vw and NEVER clipped. Round-13 bug A
root cause: the old 20.1vw factor was measured against Barlow
Condensed (width/font-size ratio 4.68) but the fallback fonts are
far wider (Arial Narrow 5.62, Inter 6.81) - before/without the
webfont the run hit up to ~136vw and the mark cut off at the
viewport edge. Fix: the CSS base size below is safe for the WIDEST
fallback (13.4vw x 6.81 ≈ 91vw), and main.js §2b re-fits the run
to 93vw of the real rendered font once document.fonts is ready
(and on resize). --- */
.hero-mark {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: baseline;
column-gap: 0.14em;
margin: 0 auto;
font-size: clamp(48px, 13.4vw, 470px); /* clip-safe base; JS fits to 93vw */
font-family: var(--font-display);
font-weight: 700;
line-height: 0.82;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
}
.hero-mark .hm-1 { color: var(--t1); }
.hero-mark .hm-2 { color: var(--a300); text-shadow: 0 0 clamp(18px, 3vw, 64px) rgba(214, 207, 159, 0.22); }
body.booted .hero-mark { animation: markIn 700ms var(--ease) 100ms forwards; }
@keyframes markIn { from { opacity: 0; transform: translateY(0.05em); } to { opacity: 1; transform: translateY(0); } }
/* keep chip keyframes - the guided-ID demo (gs10) reuses them */
@keyframes chipIn { from { opacity: 0; transform: scale(0.92) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes meterOn { to { opacity: 1; transform: scale(1); } }
/* feature-card strip - its own band directly below the hero (2026-07-11:
moved out of the 100vh hero; owner item 2 wording unchanged) */
.featband { padding: 22px 0 26px; background: var(--s900); border-bottom: 1px solid var(--b2); }
.feat-strip {
position: relative;
z-index: 1;
}
.feat-cards {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
/* feature chips -> section shortcuts (jump-nav). The whole chip is the
click target (the anchor fills it); brackets ride on the anchor, and a
fade-in arrow cue signals it scrolls. Reserved right padding keeps the
arrow from reflowing the centered row. */
.feat-card {
position: relative;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--t2);
border: 1px solid var(--b1);
background: rgba(35, 36, 27, 0.6);
border-radius: 2px;
cursor: pointer;
transition: border-color 140ms var(--ease), color 140ms var(--ease),
transform 140ms var(--ease), box-shadow 140ms var(--ease), background-color 140ms var(--ease);
}
.feat-card > a {
display: block; color: inherit; text-decoration: none;
padding: 10px 26px 10px 14px;
white-space: nowrap;
}
.feat-card > a::before { content: '[ '; color: var(--a600); }
.feat-card > a::after { content: ' ]'; color: var(--a600); }
/* arrow cue, parked in the reserved right padding, fades in on hover */
.feat-card::after {
content: '\2197'; position: absolute; right: 11px; top: 50%;
transform: translateY(-50%) translateX(-2px);
color: var(--a300); font-size: 12px; opacity: 0;
transition: opacity 140ms var(--ease), transform 140ms var(--ease);
pointer-events: none;
}
.feat-card:hover {
border-color: var(--a400); color: var(--a300); transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 22px rgba(181,172,114,.20);
}
.feat-card:hover > a::before, .feat-card:hover > a::after { color: var(--a300); }
.feat-card:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.feat-card:focus-within { border-color: var(--a400); }
.feat-card:focus-within::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.feat-card:active { transform: translateY(0); box-shadow: none; }
.feat-card.feat-free {
color: var(--on-accent);
background: var(--a400);
border-color: var(--a300);
box-shadow: 0 0 22px rgba(214, 207, 159, 0.35), 0 3px 0 var(--key-shadow);
}
.feat-card.feat-free > a::before, .feat-card.feat-free > a::after { color: rgba(21, 22, 15, 0.55); }
.feat-card.feat-free::after { color: rgba(21, 22, 15, 0.75); }
.feat-card.feat-free:hover { color: var(--on-accent); border-color: var(--a200); transform: translateY(-2px); }
.feat-card.feat-free:hover > a::before, .feat-card.feat-free:hover > a::after { color: rgba(21, 22, 15, 0.55); }
/* ============================================================
(STATS BAND: deleted round 13, owner item 3 - the trio + support
rows are gone; the advisory banner below moved to the FAQ.)
============================================================ */
/* honesty banner - advisory treatment, centered (round 5; relocated
to the FAQ section round 13) */
.advisory {
margin: 16px auto 0;
max-width: 880px;
text-align: center;
border: 1px solid rgba(207, 168, 79, 0.35);
border-left: 3px solid var(--warn-400);
border-right: 3px solid var(--warn-400);
background: var(--tint-warn);
padding: 10px 18px;
}
.advisory .mono-label { color: var(--warn-400); line-height: 1.9; }
.advisory-line {
background-image: linear-gradient(var(--warn-500), var(--warn-500));
background-repeat: no-repeat;
background-size: 0% 1px;
background-position: 0 100%;
transition: background-size 250ms var(--ease) 250ms;
}
.advisory.in .advisory-line { background-size: 100% 1px; }
/* the FAQ placement: small + visible above the question list */
.advisory-faq { margin: 4px 0 20px; max-width: none; }
/* guarantees strip - hard rules, not certifications (centered, round 5) */
.guarantees {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
max-width: 940px;
margin: 28px auto 0;
}
.g-chip {
border: 1px solid var(--b1);
background: var(--s700);
color: var(--t2);
padding: 8px 14px;
border-radius: 2px;
transition: border-color 140ms var(--ease), color 140ms var(--ease), transform 140ms var(--ease);
}
.g-chip::before { content: '✓ '; color: var(--ok-400); }
.g-chip:hover { border-color: var(--a500); color: var(--t1); transform: translateY(-1px); }
.g-note { color: var(--t3); margin-top: 12px; text-align: center; }
/* ============================================================
PIPELINE - numbered stepper, one viewport
============================================================ */
/* the stepper reads as a continuation of the CV flagship above it -
open on a shallower pad than the standard section rhythm */
.pipeline { background: var(--s900); padding-top: 22px; }
.pipeline-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}
.step-controls { display: flex; align-items: center; gap: 18px; }
.step-counter { color: var(--t2); font-variant-numeric: tabular-nums; }
.step-counter span { color: var(--a300); }
.step-btns { display: flex; gap: 8px; }
.step-btn {
width: 38px; height: 38px;
background: var(--raised);
color: var(--a300);
border: 1px solid var(--b1);
border-radius: 2px;
font-family: var(--font-mono);
font-size: 15px;
cursor: pointer;
box-shadow: 0 3px 0 var(--key-shadow-soft);
transition: border-color 90ms ease, transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.step-btn:hover { border-color: var(--a500); transform: translateY(-1px); box-shadow: 0 4px 0 var(--key-shadow-soft); }
.step-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--key-shadow-soft); }
/* rail - doubles as navigation */
.rail {
list-style: none;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
padding: 0;
margin: 0 0 26px;
}
.rail-tick {
width: 100%;
background: none;
border: none;
padding: 0 0 10px;
color: var(--t3);
cursor: pointer;
text-align: left;
letter-spacing: 0.14em;
transition: color 140ms ease;
}
.rail-tick:hover { color: var(--t2); }
.rail-tick i {
display: block;
height: 2px;
background: var(--b1);
margin-bottom: 8px;
position: relative;
overflow: hidden;
}
.rail-tick i::after {
content: '';
position: absolute;
inset: 0;
background: var(--a400);
transform: scaleX(0);
transform-origin: left;
transition: transform 150ms var(--ease);
}
.rail-tick.done i::after { transform: scaleX(1); background: var(--a600); }
.rail-tick.on { color: var(--a300); }
.rail-tick.on i::after { transform: scaleX(1); }
/* acts - grid-stacked crossfade. main.js sizes the container to the ACTIVE
act (smoke fix: the shared stage no longer strands ~250px of dark under
shorter acts); the height animates between steps. */
.acts { display: grid; position: relative; transition: height 350ms var(--ease); overflow: visible; }
.act {
grid-area: 1 / 1;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 44px;
align-items: center;
opacity: 0;
transform: translateY(8px);
transition: opacity 350ms var(--ease), transform 350ms var(--ease);
pointer-events: none;
visibility: hidden;
}
.act.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
visibility: visible;
}
/* 8px parallax between frame and annotation on transition */
.act .act-note { transform: translateY(16px); transition: opacity 350ms var(--ease), transform 420ms var(--ease) 40ms; opacity: 0; }
.act.is-active .act-note { transform: translateY(0); opacity: 1; }
.act-note .h3 { margin-bottom: 10px; }
.act-note p { color: var(--t2); }
.act-index { color: var(--a400); margin-bottom: 10px; }
.act-tag { color: var(--t3); margin-top: 14px; }
/* act frame visuals */
.photo-frame {
position: relative;
border: 1px solid var(--b1);
background: var(--s800);
overflow: hidden;
}
.photo-frame svg { width: 100%; height: auto; display: block; }
.photo-frame > img { width: 100%; height: auto; display: block; }
/* act 2 draws its mask over the real recon photo */
.act2-overlay { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.pf-corner { position: absolute; width: 18px; height: 18px; border: 1px solid var(--t3); }
.pf-corner.c1 { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.pf-corner.c2 { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.pf-corner.c3 { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.pf-corner.c4 { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.pf-meta {
position: absolute;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 8px 14px;
color: var(--t2);
background: linear-gradient(transparent, rgba(21, 22, 15, 0.92));
}
.pf-meta em { font-style: normal; color: var(--warn-400); }
/* act 2 - SAM3-style segmentation: the tight contour draws on around
the full silhouette (solid stroke, pathLength trick), the translucent
phosphor mask washes in, feature callouts land, THEN the crop brackets
tighten as the hand-off-to-recognizers beat */
.mask-path { stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 4px rgba(125, 255, 140, 0.55)); }
.act.is-active .mask-path { animation: maskDraw 1100ms var(--ease) 250ms forwards; }
@keyframes maskDraw { from { stroke-dashoffset: 1; opacity: 0; } 30% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
.mask-fill { opacity: 0; }
.act.is-active .mask-fill { animation: maskFillIn 500ms ease 1200ms forwards; }
@keyframes maskFillIn { to { opacity: 1; } }
/* key-ID-feature callouts on the segmented object (pgx label language) */
.act2-lbl {
position: absolute;
left: var(--x);
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(-50%);
opacity: 0;
z-index: 3;
pointer-events: none;
}
.act2-lbl.a2-top { top: 6%; height: calc(var(--py) - 6%); }
.act2-lbl.a2-bot { top: var(--py); height: calc(88% - var(--py)); }
.act.is-active .act2-lbl { animation: pgxIn 380ms var(--ease) forwards; }
.act.is-active .act2-lbl:nth-of-type(1) { animation-delay: 1500ms; }
.act.is-active .act2-lbl:nth-of-type(2) { animation-delay: 1650ms; }
.act.is-active .act2-lbl:nth-of-type(3) { animation-delay: 1800ms; }
@media (max-width: 600px) { .act2-lbl { display: none; } }
.scanline-sweep { transform: translateX(-10px); opacity: 0; will-change: transform; }
.act.is-active .scanline-sweep { animation: scanSweep 1000ms var(--ease) 150ms forwards; }
@keyframes scanSweep { 0% { transform: translateX(0); opacity: 0.8; } 100% { transform: translateX(640px); opacity: 0; } }
/* the act-2 overlay viewBox is 960 wide - sweep the full frame */
.act2-overlay .scanline-sweep { animation-name: none; }
.act.is-active .act2-overlay .scanline-sweep { animation: scanSweep960 1000ms var(--ease) 150ms forwards; }
@keyframes scanSweep960 { 0% { transform: translateX(0); opacity: 0.8; } 100% { transform: translateX(970px); opacity: 0; } }
.crop-bracket { position: absolute; width: 22px; height: 22px; border: 1.5px solid var(--a300); opacity: 0; will-change: transform; }
/* brackets hug the mortar in the founder act-2 photo */
.cb-tl { top: 30%; left: 31%; border-right: none; border-bottom: none; }
.cb-tr { top: 30%; right: 9.5%; border-left: none; border-bottom: none; }
.cb-bl { bottom: 10%; left: 31%; border-right: none; border-top: none; }
.cb-br { bottom: 10%; right: 9.5%; border-left: none; border-top: none; }
.act.is-active .crop-bracket { animation: cropIn 350ms var(--ease) 2100ms forwards; }
@keyframes cropIn { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: scale(1); } }
/* act 3 - recognizer lanes */
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; }
.lane {
border: 1px solid var(--b1);
background: var(--s800);
padding: 18px;
}
.lane-title { color: var(--a300); margin-bottom: 14px; }
.lane-foot { color: var(--t3); margin-top: 14px; }
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar { display: grid; grid-template-columns: 86px 1fr 36px; align-items: center; gap: 8px; }
.bar span { color: var(--t2); font-size: 10px; }
.bar b { color: var(--t3); font-weight: 500; font-size: 10px; text-align: right; }
.bar i {
display: block;
height: 10px;
background: var(--a500);
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms var(--ease);
}
.bar:nth-child(1) i { background: var(--a400); }
.act.is-active .bar i { transform: scaleX(var(--w)); }
.act.is-active .bar:nth-child(1) i { transition-delay: 150ms; }
.act.is-active .bar:nth-child(2) i { transition-delay: 230ms; }
.act.is-active .bar:nth-child(3) i { transition-delay: 310ms; }
.act.is-active .bar:nth-child(4) i { transition-delay: 390ms; }
.neighbors { display: flex; flex-direction: column; gap: 8px; }
.nb {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--b2);
background: var(--s700);
padding: 6px 10px;
color: var(--t2);
opacity: 0;
transform: translateY(6px);
transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.nb svg { width: 30px; height: 30px; color: var(--a400); flex-shrink: 0; }
.nb span { font-size: 10px; }
.act.is-active .nb { opacity: 1; transform: translateY(0); }
.act.is-active .nb:nth-child(1) { transition-delay: 200ms; }
.act.is-active .nb:nth-child(2) { transition-delay: 280ms; }
.act.is-active .nb:nth-child(3) { transition-delay: 360ms; }
/* act 4 - doctrine terminal */
.terminal {
border: 1px solid var(--b1);
background: var(--s800);
padding: 20px 22px;
min-height: 170px;
}
.term-head { color: var(--t3); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.term-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-400); display: inline-block; }
.term-line { color: var(--a300); font-size: 13px; line-height: 1.9; letter-spacing: 0.06em; text-transform: none; min-height: 75px; }
.term-src { color: var(--t3); margin-top: 14px; }
.caret {
display: inline-block;
width: 8px; height: 14px;
background: var(--a300);
vertical-align: -2px;
margin-left: 2px;
animation: caretBlink 900ms steps(2, start) infinite;
transition: opacity 800ms ease;
}
.caret.off { opacity: 0; }
@keyframes caretBlink { 50% { opacity: 0; } }
/* act 5 - the confidence gate */
.gatebox { border: 1px solid var(--b1); background: var(--s800); padding: 22px 24px; }
.evidence { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.ev { color: var(--t2); opacity: 0; transform: translateY(5px); transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.act.is-active .ev { opacity: 1; transform: translateY(0); }
.act.is-active .ev:nth-child(1) { transition-delay: 150ms; }
.act.is-active .ev:nth-child(2) { transition-delay: 300ms; }
.act.is-active .ev:nth-child(3) { transition-delay: 450ms; }
.ev-ok { color: var(--ok-400); }
.ev-no { color: var(--danger-400); }
.chips-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.gate-quote { font-size: 17px; color: var(--t1); margin: 0; }
.gate-quote em { font-style: normal; color: var(--a300); }
/* ============================================================
TRAINED-TO-SEE DEMO (2026-07-11) - evaluator-controlled, two
acts, real assets. State is #demo[data-act][data-step]; every
reveal is a CSS attribute rule so the JS controller stays tiny.
Motion tokens: press 120ms · transitions 200-240ms · panels
280ms · entry 8px. Touch targets ≥44px. Reduced motion: the
global block zeroes durations; JS parks on ACT A · VERDICT.
============================================================ */
/* --- act switcher tabs --- */
.demo-tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.demo-tab {
flex: 1 1 0;
min-height: 48px;
display: flex; flex-direction: column; justify-content: center; gap: 2px;
padding: 8px 16px;
background: var(--raised);
border: 1px solid var(--b1);
border-radius: 2px;
color: var(--t2);
text-align: left;
cursor: pointer;
transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 140ms var(--ease);
}
.demo-tab:hover { border-color: var(--a500); color: var(--t1); }
.demo-tab .demo-tab-k { color: var(--t3); font-size: 12px; }
.demo-tab .demo-tab-t { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 18px; line-height: 1; }
.demo-tab.on { background: var(--tint-accent); border-color: var(--a500); color: var(--t1); }
.demo-tab.on .demo-tab-k { color: var(--a400); }
.demo-tab.on .demo-tab-t { color: var(--a300); }
/* --- transport + step dots --- */
.demo-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.demo-transport { display: flex; gap: 10px; }
.demo-ctl {
min-height: 44px;
display: inline-flex; align-items: center; gap: 8px;
padding: 0 16px;
background: var(--a500);
color: var(--on-accent);
border: none;
border-radius: 2px;
cursor: pointer;
box-shadow: 0 3px 0 var(--key-shadow);
transition: background-color 120ms ease, transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.demo-ctl#demo-restart { background: var(--raised); color: var(--a300); border: 1px solid var(--b1); box-shadow: 0 3px 0 var(--key-shadow-soft); }
.demo-ctl:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--key-shadow); }
.demo-ctl#demo-restart:hover { border-color: var(--a500); box-shadow: 0 4px 0 var(--key-shadow-soft); }
.demo-ctl:active { transform: translateY(3px); box-shadow: 0 0 0 var(--key-shadow); }
.demo-ctl[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.demo-ctl-ic { font-size: 13px; line-height: 1; letter-spacing: -1px; }
.demo-ctl-t { font-size: 12px; }
.demo-dots { display: flex; gap: 2px; }
.demo-dot { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: none; cursor: pointer; padding: 0; }
.demo-dot i { display: block; width: 26px; height: 4px; border-radius: 2px; background: var(--b1); transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.demo-dot:hover i { background: var(--a600); }
.demo-dot.on i { background: var(--a400); transform: scaleY(1.4); }
.demo-stepline { color: var(--t2); margin-left: auto; font-variant-numeric: tabular-nums; }
.demo-stepline span { color: var(--a300); }
/* --- stage: two-column pane, image + note --- */
.demo-stage { position: relative; }
.demo-pane { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.demo-pane[hidden] { display: none; }
.demo-frame { position: relative; aspect-ratio: 7 / 5; }
.demo-imgwrap { position: absolute; inset: 0; transform-origin: 26% 58%; transform: scale(1); transition: transform 300ms var(--ease); }
.demo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-img-mask { opacity: 0; transition: opacity 240ms var(--ease); }
.demo[data-step="1"] [data-pane="a"] .demo-img-mask { opacity: 1; }
/* Act B spotter beat (round 13, owner item 8): the REAL SAM 3 mask on the
rusty round fades in on the same step */
.demo[data-step="1"] [data-pane="b"] .demo-img-mask { opacity: 1; }
.demo[data-step="2"] [data-pane="a"] .demo-imgwrap { transform: scale(1.55); }
/* status flags (b0 / b1) */
.demo-flag {
position: absolute; top: 10px; left: 10px; z-index: 4;
display: none; align-items: center; gap: 7px;
max-width: calc(100% - 20px);
margin: 0; padding: 5px 10px;
color: var(--t2);
background: rgba(18, 19, 12, 0.86);
border: 1px solid var(--b1);
border-radius: 2px;
}
.demo-flag em { font-style: normal; }
.demo-flag-sam em { color: var(--crt-green); }
.demo-flag-warn em { color: var(--warn-400); }
.demo-flag-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.demo-flag-sam .demo-flag-dot { background: var(--crt-green); box-shadow: 0 0 6px var(--glow-green); }
.demo-flag-warn .demo-flag-dot { background: var(--warn-400); }
.demo[data-step="0"] .demo-flag[data-b="0"] { display: inline-flex; }
.demo[data-step="1"] .demo-flag[data-b="1"] { display: inline-flex; }
/* crop brackets (act A read beat) + act B visible-extent bbox */
.cbk { position: absolute; width: 20px; height: 20px; }
.cbk.t { top: 0; } .cbk.b { bottom: 0; } .cbk.l { left: 0; } .cbk.r { right: 0; }
.demo-crop, .demo-bbox { position: absolute; z-index: 3; opacity: 0; transition: opacity 220ms var(--ease); pointer-events: none; }
.demo-crop { inset: 16% 22%; }
.demo-crop .cbk { border: 1.5px solid var(--a200); }
.demo-crop .cbk.t.l { border-right: none; border-bottom: none; } .demo-crop .cbk.t.r { border-left: none; border-bottom: none; }
.demo-crop .cbk.b.l { border-right: none; border-top: none; } .demo-crop .cbk.b.r { border-left: none; border-top: none; }
.demo[data-step="2"] [data-pane="a"] .demo-crop { opacity: 1; }
.demo-bbox { top: 30%; right: 5%; bottom: 8%; left: 34%; border: 1.5px dashed rgba(207, 168, 79, 0.75); }
.demo-bbox .cbk { border: 2px solid var(--warn-400); }
.demo-bbox .cbk.t.l { border-right: none; border-bottom: none; } .demo-bbox .cbk.t.r { border-left: none; border-bottom: none; }
.demo-bbox .cbk.b.l { border-right: none; border-top: none; } .demo-bbox .cbk.b.r { border-left: none; border-top: none; }
.demo-buried {
position: absolute; z-index: 3; left: 30%; bottom: 4%; width: 27%; height: 24%;
opacity: 0; transition: opacity 240ms var(--ease); pointer-events: none;
background: repeating-linear-gradient(-45deg, rgba(207,168,79,0.28) 0 4px, transparent 4px 9px);
border: 1px solid rgba(207, 168, 79, 0.4);
}
/* round 13: the extent bbox + buried band now enter at step 2 - step 1 is
the clean REAL SAM 3 mask beat */
.demo[data-step="2"] [data-pane="b"] .demo-bbox,
.demo[data-step="3"] [data-pane="b"] .demo-bbox, .demo[data-step="4"] [data-pane="b"] .demo-bbox { opacity: 1; }
.demo[data-step="2"] [data-pane="b"] .demo-buried,
.demo[data-step="3"] [data-pane="b"] .demo-buried, .demo[data-step="4"] [data-pane="b"] .demo-buried { opacity: 1; }
/* overlay cards - one per beat, bottom-anchored, animate in */
.demo-card {
position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5;
display: none; flex-direction: column; gap: 8px;
max-height: calc(100% - 20px); overflow: auto;
padding: 13px 16px;
background: rgba(16, 17, 11, 0.94);
border: 1px solid var(--b1);
border-radius: 2px;
box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.4);
}
.demo[data-step="2"] .demo-card[data-b="2"],
.demo[data-step="3"] .demo-card[data-b="3"],
.demo[data-step="4"] .demo-card[data-b="4"] { display: flex; animation: demoCardIn 280ms var(--ease); }
@keyframes demoCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo-card-h { color: var(--a300); }
/* b2 A - OCR tokens */
.demo-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-tokens span { padding: 4px 9px; border: 1px solid var(--a600); color: var(--a300); background: var(--tint-accent); border-radius: 2px; }
/* b3 A - RAG record */
.demo-rag-body { display: flex; flex-direction: column; gap: 8px; }
.demo-rag-desig { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 22px; line-height: 1; color: var(--t1); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.demo-rag-desig span { color: var(--t2); }
.demo-rag-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--t2); }
.demo-rag-fields b { color: var(--t1); }
.demo-rag-src { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--t3); }
/* b4 A - verdict */
.demo-card-verdict { gap: 10px; }
.demo-verdict-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.demo-verdict-id { color: var(--t1); font-size: 13px; letter-spacing: 0.08em; margin: 0; }
.demo-verdict-foot { color: var(--t3); margin: 0; }
/* b2 B - recognizers split */
.demo-recog { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.demo-recog-t { color: var(--a300); margin-bottom: 8px; }
.demo-rrow { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 8px; color: var(--t2); margin-bottom: 6px; }
.demo-rrow i { display: block; height: 8px; width: calc(var(--w, 0) * 100%); background: var(--a500); }
.demo-rrow b { color: var(--t3); text-align: right; }
.demo-rrow em { grid-column: 2 / 4; text-align: right; font-style: normal; color: var(--t3); }
.demo-recog-foot { color: var(--danger-400); margin: 8px 0 0; }
.demo-recog-foot .ev-no { margin-right: 4px; }
/* b3 B - gate */
.demo-gate-line { color: var(--t1); font-size: 15px; margin: 4px 0 0; }
.demo-gate-line em { font-style: normal; color: var(--info-400); }
/* final-step summary boxes (round 14, owner item 1): the Act A VERDICT card
and the Act B ASKS-FOR card are relocated OUT of the photo frame into the
note column, under the step-05 text, so NEITHER act covers the photo at its
final step. Static, full-width; the note column top-aligns so the note text
+ box sit high in the column instead of floating centered. */
.demo-card-side {
position: static;
margin-top: 16px;
max-height: none;
overflow: visible;
box-shadow: none;
}
.demo-note { align-self: start; }
.demo-needs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; color: var(--t2); }
.demo-needs li { position: relative; padding-left: 16px; }
.demo-needs li::before { content: '\25B8'; position: absolute; left: 0; color: var(--a400); }
/* note column */
.demo-note-item { display: none; }
.demo[data-step="0"] .demo-note-item[data-b="0"],
.demo[data-step="1"] .demo-note-item[data-b="1"],
.demo[data-step="2"] .demo-note-item[data-b="2"],
.demo[data-step="3"] .demo-note-item[data-b="3"],
.demo[data-step="4"] .demo-note-item[data-b="4"] { display: block; }
.demo-note-i { color: var(--a400); margin-bottom: 10px; }
.demo-note .h3 { margin-bottom: 10px; }
.demo-note p { color: var(--t2); }
.demo-note em { font-style: normal; color: var(--a300); }
.demo-note-tag { color: var(--t3); margin-top: 14px; }
.demo-foot { color: var(--t3); margin-top: 22px; border-top: 1px solid var(--b2); padding-top: 14px; }
/* --- demo responsive --- */
@media (max-width: 900px) {
.demo-pane { grid-template-columns: 1fr; gap: 22px; align-items: start; }
.demo-stepline { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
.demo-tabs { gap: 8px; }
.demo-tab .demo-tab-t { font-size: 16px; }
.demo-recog, .demo-needs { grid-template-columns: 1fr; }
.demo-controls { gap: 12px; }
/* taller frame + tighter card rows so the stacked recognizer/needs
cards fit inside the frame without clipping */
.demo-frame { aspect-ratio: 5 / 5; }
.demo-card { padding: 11px 13px; gap: 6px; }
.demo-recog { gap: 6px; }
.demo-rrow { margin-bottom: 3px; }
}
/* ============================================================
QUICK ID MINI-DEMO
============================================================ */
.quickid { background: var(--s800); border-top: 1px solid var(--b2); border-bottom: 1px solid var(--b2); position: relative; }
.qi-banner {
display: inline-block;
margin: 0 0 16px;
color: var(--warn-400);
border: 1px solid rgba(207, 168, 79, 0.35);
background: var(--tint-warn);
padding: 7px 14px;
border-radius: 2px;
}
/* ---------- shared audit-check chips (used by the guided walkthrough
and the abstain pillars) ---------- */
.qk { color: var(--t2); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.qk-mark {
font-style: normal;
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px; height: 14px;
font-size: 10px;
border-radius: 1px;
transform: scale(0);
}
.qk-mark.ok { color: var(--ok-400); background: var(--tint-ok); }
.qk-mark.no { color: var(--danger-400); background: var(--tint-danger); }
.qk-mark.neutral { color: var(--t3); background: var(--s600); }
@keyframes stampIn { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.excl {
color: var(--danger-400);
border: 1px dashed var(--danger-500);
padding: 2px 7px;
font-size: 9px;
letter-spacing: 0.12em;
opacity: 0;
transition: opacity 250ms ease 550ms;
}
/* ---------- GUIDED-ID WALKTHROUGH (locked, auto-playing) ----------
Recreates the app's Guided ID panel: header, warning band, progress
bar, question panes, footer buttons. States gs1..gs7 from main.js. */
.gid {
display: grid;
/* demo is a compact phone/tablet-sized device (~half its old footprint),
narration sits beside it (owner: "make it a quarter of the size, phone style") */
grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
gap: 44px;
align-items: start;
}
.gid-app {
border: 1px solid var(--b1);
background: var(--s900);
border-radius: 16px; /* device rounding */
overflow: hidden;
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 5px rgba(255, 255, 255, 0.02);
pointer-events: none; /* locked - the whole panel is display-only */
user-select: none;
}
.gid-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid var(--b2);
}
.gid-title { font-size: 14px; font-weight: 500; color: var(--t1); }
.gid-step { color: var(--t3); }
.gid-warnband {
background: var(--tint-warn);
color: var(--warn-400);
padding: 6px 16px;
font-size: 9.5px;
letter-spacing: 0.12em;
}
.gid-prog { height: 3px; background: var(--s700); }
.gid-prog i { display: block; height: 100%; width: 28%; background: var(--a500); transition: width 400ms var(--ease); }
/* round 13 (bug C): 544px fits the tallest pane (the 504px result stage at
the 400px device column) plus the 36px insets - measured headless. The
single-column layouts below relax it (wider panes run shorter). */
.gid-body { position: relative; padding: 18px 16px; min-height: 544px; }
.gid-q { font-size: 15px; font-weight: 500; color: var(--t1); margin: 0 0 4px; }
.gid-q-sm { font-size: 13px; }
.gid-sub { font-size: 11px; color: var(--t3); margin: 0 0 12px; }
/* panes crossfade in place. Round 13 (owner bug C): justify-content was
`center`, so any pane taller than the stage overflowed EQUALLY out the
top and bottom - the top overflow ran the question text up over the
MODEL-STILL-IN-TRAINING warnband. Panes now anchor to the top (like
the real app's screens) and can never climb above the stage. */
.gid-pane {
position: absolute; inset: 18px 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
opacity: 0;
transform: translateY(8px);
transition: opacity 300ms var(--ease), transform 300ms var(--ease);
pointer-events: none;
visibility: hidden;
}
.gid-pane.is-active { opacity: 1; transform: translateY(0); visibility: visible; }
/* family tiles - the app's 3-col silhouette grid */
.gid-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gid-tile {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 4px;
border: 1px solid var(--b2);
border-radius: 4px;
padding: 12px 6px 9px;
color: var(--t2);
transition: border-color 220ms var(--ease), color 220ms var(--ease), background-color 220ms ease, transform 220ms var(--ease);
}
.gid-tile svg { width: 32px; height: 32px; }
.gid-tile > span { font-size: 11px; font-weight: 500; color: var(--t1); }
.gid-tile .gid-size { font-style: normal; font-size: 9px; color: var(--t3); text-align: center; line-height: 1.3; }
.gid-tile .gid-check {
position: absolute; top: 5px; right: 8px;
font-style: normal; font-family: var(--font-mono);
font-size: 10px; font-weight: 600; color: var(--a300);
opacity: 0; transition: opacity 200ms ease;
}
.gid.gs1 #gid-tile-mine {
border: 2px solid var(--a400);
background: var(--tint-accent);
color: var(--a300);
transform: translateY(-1px);
box-shadow: 0 6px 16px var(--shadow-field);
padding: 11px 5px 8px; /* compensate the 2px border */
}
.gid.gs1 #gid-tile-mine .gid-check { opacity: 1; }
/* discriminator question */
.gid-disc { margin-top: 14px; opacity: 0; transform: translateY(6px); transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.gid.gs2 .gid-disc { opacity: 1; transform: translateY(0); }
.gid-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.gid-opt {
padding: 8px 12px;
border: 1px solid var(--b2);
border-radius: 4px;
font-size: 12.5px;
color: var(--t2);
transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease;
}
.gid-opt-dim { color: var(--t3); }
.gid.gs2 #gid-opt-apers { border-color: var(--a500); background: var(--tint-accent); color: var(--a300); }
/* diameter pane */
.gid-picks { display: flex; gap: 8px; margin: 4px 0 16px; }
.gid-picks span { border: 1px solid var(--b2); border-radius: 999px; padding: 6px 12px; font-size: 10px; color: var(--t2); }
.gid-slider { position: relative; height: 4px; background: var(--s600); border-radius: 2px; margin: 8px 2px 18px; }
.gid-slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--a500); border-radius: 2px; transition: width 900ms var(--ease) 200ms; }
.gid-slider b { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--a300); box-shadow: 0 0 10px rgba(214,207,159,0.5); transition: left 900ms var(--ease) 200ms; }
.gid.gs3 #gid-slider-fill { width: 19%; } /* 120 of 10–600 mm */
.gid.gs3 #gid-slider-knob { left: 19%; }
.gid.gs4 #gid-len-fill { width: 2%; } /* 50 of 10–2500 mm */
.gid.gs4 #gid-len-knob { left: 2%; }
.gid-dimval { font-size: 13px; color: var(--t2); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.gid-dim-box {
display: inline-flex; align-items: center;
min-width: 64px; min-height: 30px;
border: 1px solid var(--b1); border-radius: 2px;
background: var(--s800);
padding: 3px 9px;
font-size: 14px; color: var(--t1);
}
.gid-dimval em { font-style: normal; font-size: 11px; color: var(--t3); }
.gid-caret { height: 13px; }
/* diameter caret lives on gs3 only; length caret on gs4 only (states are cumulative) */
.gid:not(.gs3) .gid-caret, .gid.gs4 .gid-caret:not(.gid-caret-len) { opacity: 0; animation: none; }
.gid:not(.gs4) .gid-caret-len, .gid.gs5 .gid-caret-len { opacity: 0; animation: none; }
/* color pane */
.gid-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gid-color {
display: flex; align-items: center; gap: 8px;
border: 1px solid var(--b2); border-radius: 4px;
padding: 8px 10px;
font-size: 12px; color: var(--t1);
transition: border-color 220ms ease, background-color 220ms ease;
}
.gid-color i { width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--b1); flex-shrink: 0; }
.gid.gs5 #gid-color-green { border: 2px solid var(--a400); background: var(--tint-accent); padding: 7px 9px; }
/* markings pane - "No" is the demo's pick; the note is the app's real caption */
.gid.gs6 #gid-mark-no { border-color: var(--a500); background: var(--tint-accent); color: var(--a300); }
.gid-mark-note { margin-top: 12px; opacity: 0; transform: translateY(4px); transition: opacity 260ms var(--ease) 350ms, transform 260ms var(--ease) 350ms; }
.gid.gs6 .gid-mark-note { opacity: 1; transform: translateY(0); }
/* observed-features checklist - the mine family's real feature list */
.gid-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gid-feat {
display: flex; align-items: center; gap: 9px;
border: 1px solid var(--b2); border-radius: 4px;
padding: 8px 10px;
font-size: 12px; color: var(--t1);
transition: border-color 220ms ease, background-color 220ms ease;
}
.gid-box {
width: 15px; height: 15px; flex-shrink: 0;
border: 1px solid var(--b1); border-radius: 2px;
background: var(--s800);
display: inline-flex; align-items: center; justify-content: center;
font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
color: transparent;
transition: color 200ms ease, border-color 200ms ease;
}
.gid-box::after { content: '✓'; }
.gid.gs7 #gid-feat-pp { border: 2px solid var(--a400); background: var(--tint-accent); padding: 7px 9px; }
.gid.gs7 #gid-feat-pp .gid-box { color: var(--a300); border-color: var(--a500); }
/* result pane - ranked, audited shortlist */
.gid-theater {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--b2); background: var(--s800);
border-radius: 2px; padding: 8px 10px; margin-bottom: 10px;
color: var(--t3); font-size: 9px;
}
.gid-theater b { color: var(--t2); font-weight: 500; }
.gid-cards { display: flex; flex-direction: column; gap: 10px; }
.gid-card {
position: relative;
border: 1px solid var(--b1);
background: var(--s800);
border-radius: 3px;
padding: 12px 14px;
opacity: 0;
transform: translateY(12px);
transition: opacity 300ms var(--ease), transform 300ms var(--ease), border-color 300ms ease;
}
.gid.gs8 .gid-card { opacity: 1; transform: translateY(0); }
.gid.gs8 .gid-card[data-slot="a"] { transition-delay: 0ms; }
.gid.gs8 .gid-card[data-slot="b"] { transition-delay: 100ms; }
.gid.gs8 .gid-card[data-slot="c"] { transition-delay: 200ms; }
.gid.gs10 .gid-card[data-slot="a"] { border-color: var(--ok-500); }
.gid.gs10 .gid-card[data-slot="b"], .gid.gs10 .gid-card[data-slot="c"] { opacity: 0.45; }
.gid-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* rank-1 card: reserve room so the RANK tag never sits under the HIGH chip */
.gid-card[data-slot="a"] .gid-card-head { padding-right: 96px; }
.gid-card-head svg { width: 28px; height: 28px; color: var(--a400); flex-shrink: 0; }
.gid-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--t1); }
.gid-rank { margin-left: auto; color: var(--a300); font-size: 9px; border: 1px solid var(--a600); background: var(--tint-accent); padding: 2px 6px; border-radius: 2px; opacity: 0; transition: opacity 250ms ease; }
.gid.gs10 .gid-rank { opacity: 1; }
.gid-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.gid.gs9 .qk-mark { animation: stampIn 160ms var(--ease) forwards; }
.gid.gs9 .gid-card[data-slot="a"] .qk:nth-child(1) .qk-mark { animation-delay: 0ms; }
.gid.gs9 .gid-card[data-slot="a"] .qk:nth-child(2) .qk-mark { animation-delay: 80ms; }
.gid.gs9 .gid-card[data-slot="a"] .qk:nth-child(3) .qk-mark { animation-delay: 160ms; }
.gid.gs9 .gid-card[data-slot="a"] .qk:nth-child(4) .qk-mark { animation-delay: 240ms; }
.gid.gs9 .gid-card[data-slot="a"] .qk:nth-child(5) .qk-mark { animation-delay: 320ms; }
.gid.gs9 .gid-card[data-slot="b"] .qk:nth-child(1) .qk-mark { animation-delay: 440ms; }
.gid.gs9 .gid-card[data-slot="b"] .qk:nth-child(2) .qk-mark { animation-delay: 520ms; }
.gid.gs9 .gid-card[data-slot="b"] .qk:nth-child(3) .qk-mark { animation-delay: 600ms; }
.gid.gs9 .gid-card[data-slot="c"] .qk:nth-child(1) .qk-mark { animation-delay: 700ms; }
.gid.gs9 .gid-card[data-slot="c"] .qk:nth-child(2) .qk-mark { animation-delay: 780ms; }
.gid.gs9 .gid-card[data-slot="c"] .qk:nth-child(3) .qk-mark { animation-delay: 860ms; }
.gid.gs9 .excl { opacity: 1; }
.gid-result { position: absolute; right: 12px; top: 10px; opacity: 0; }
.gid.gs10 .gid-result { animation: chipIn 200ms var(--ease) 150ms forwards; }
.gid.gs10 .gid-result .chip-meter i { animation: meterOn 60ms ease forwards; opacity: 0.25; transform: scale(0.6); }
.gid.gs10 .gid-result .chip-meter i:nth-child(1) { animation-delay: 320ms; }
.gid.gs10 .gid-result .chip-meter i:nth-child(2) { animation-delay: 380ms; }
.gid.gs10 .gid-result .chip-meter i:nth-child(3) { animation-delay: 440ms; }
/* the PMN-2 record card unfolds under the rank-1 candidate */
.gid-record {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 420ms var(--ease) 200ms, opacity 300ms ease 300ms;
border-top: 1px solid transparent;
}
.gid.gs10 .gid-record { max-height: 240px; opacity: 1; border-top-color: var(--b2); margin-top: 10px; padding-top: 10px; }
.gid-rec-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gid-rec-grid span { border: 1px solid var(--b1); background: var(--s900); color: var(--t2); padding: 4px 8px; border-radius: 2px; font-size: 9.5px; letter-spacing: 0.08em; }
.gid-rec-grid b { color: var(--t1); font-weight: 600; }
.gid-rec-line { font-size: 12px; color: var(--t2); margin: 0 0 8px; line-height: 1.5; }
.gid-rec-tags { display: flex; align-items: center; gap: 6px; }
.gid-rec-tags .haz { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; padding: 3px 8px; border-radius: 2px; border: 1px solid; }
.gid-open { margin-left: auto; color: var(--a300); font-size: 9px; letter-spacing: 0.1em; }
/* footer buttons - display-only */
.gid-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--b2); }
.gid-btn { padding: 8px 12px; border: 1px solid var(--b2); border-radius: 4px; font-size: 12.5px; color: var(--t3); }
.gid-btn-r { margin-left: auto; }
.gid-btn-accent { border-color: rgba(140, 134, 87, 0.55); color: var(--a300); }
/* the narration column */
.gid-note { min-width: 0; }
.gid-note-h { color: var(--a300); margin: 4px 0 14px; letter-spacing: 0.18em; }
/* narration column reworked as a numbered checkpoint STEPPER (design v15
split-stage). Boxed rows with CSS-counter badges; the active row lights
khaki. The active row is driven by the SAME cumulative gs-state mapping the
walkthrough already sets (below) - not a duplicated JS class. */
.gid-note-list { counter-reset: step; list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gid-note-list li {
counter-increment: step; position: relative; list-style: none;
border: 1px solid var(--b1); background: var(--s800); border-radius: 5px;
padding: 12px 14px 12px 42px; font-size: 13px; color: var(--t2);
transition: border-color 240ms var(--ease), color 240ms var(--ease), background-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
.gid-note-list li::before {
content: counter(step, decimal-leading-zero); position: absolute; left: 15px; top: 13px;
font-family: var(--font-mono); font-size: 11px; color: var(--t3); transition: color 240ms var(--ease);
}
.gid-note-list li b { color: var(--t2); transition: color 240ms var(--ease); }
/* active checkpoint - ONE lit khaki box at a time (the CURRENT step), matching
the design's single-active stepper. gs classes are cumulative, so "current
step N" = has gsN but not gs(N+1). Driven by the existing walkthrough states
(no duplicated JS class). noteMap: gs6/markings keeps note 5 (color) lit. */
.gid.gs1:not(.gs2) .gid-note-list li[data-note="1"],
.gid.gs2:not(.gs3) .gid-note-list li[data-note="2"],
.gid.gs3:not(.gs4) .gid-note-list li[data-note="3"],
.gid.gs4:not(.gs5) .gid-note-list li[data-note="4"],
.gid.gs5:not(.gs6) .gid-note-list li[data-note="5"],
.gid.gs6:not(.gs7) .gid-note-list li[data-note="5"],
.gid.gs7:not(.gs8) .gid-note-list li[data-note="6"],
.gid.gs8 .gid-note-list li[data-note="7"] {
border-color: var(--a400); color: var(--t1); background: var(--tint-accent);
box-shadow: 0 0 0 1px rgba(181, 172, 114, .25), 0 0 22px rgba(140, 134, 87, .12);
transform: translateX(3px);
}
.gid.gs1:not(.gs2) .gid-note-list li[data-note="1"] b,
.gid.gs2:not(.gs3) .gid-note-list li[data-note="2"] b,
.gid.gs3:not(.gs4) .gid-note-list li[data-note="3"] b,
.gid.gs4:not(.gs5) .gid-note-list li[data-note="4"] b,
.gid.gs5:not(.gs6) .gid-note-list li[data-note="5"] b,
.gid.gs6:not(.gs7) .gid-note-list li[data-note="5"] b,
.gid.gs7:not(.gs8) .gid-note-list li[data-note="6"] b,
.gid.gs8 .gid-note-list li[data-note="7"] b { color: var(--a300); }
.gid.gs1:not(.gs2) .gid-note-list li[data-note="1"]::before,
.gid.gs2:not(.gs3) .gid-note-list li[data-note="2"]::before,
.gid.gs3:not(.gs4) .gid-note-list li[data-note="3"]::before,
.gid.gs4:not(.gs5) .gid-note-list li[data-note="4"]::before,
.gid.gs5:not(.gs6) .gid-note-list li[data-note="5"]::before,
.gid.gs6:not(.gs7) .gid-note-list li[data-note="5"]::before,
.gid.gs7:not(.gs8) .gid-note-list li[data-note="6"]::before,
.gid.gs8 .gid-note-list li[data-note="7"]::before { color: var(--a300); }
.gid-note-foot { color: var(--t3); line-height: 1.8; border-top: 1px solid var(--b2); padding-top: 12px; }
/* pane switching by state - gs classes are CUMULATIVE (gs1..gsN all set),
so "hidden at ≥gsN" rules persist through later states */
.gid-pane[data-pane="family"] { opacity: 1; transform: none; visibility: visible; }
.gid.gs3 .gid-pane[data-pane="family"] { opacity: 0; visibility: hidden; }
.gid.gs3 .gid-pane[data-pane="diameter"] { opacity: 1; transform: none; visibility: visible; }
.gid.gs4 .gid-pane[data-pane="diameter"] { opacity: 0; visibility: hidden; }
.gid.gs4 .gid-pane[data-pane="length"] { opacity: 1; transform: none; visibility: visible; }
.gid.gs5 .gid-pane[data-pane="length"] { opacity: 0; visibility: hidden; }
.gid.gs5 .gid-pane[data-pane="color"] { opacity: 1; transform: none; visibility: visible; }
.gid.gs6 .gid-pane[data-pane="color"] { opacity: 0; visibility: hidden; }
.gid.gs6 .gid-pane[data-pane="markings"] { opacity: 1; transform: none; visibility: visible; }
.gid.gs7 .gid-pane[data-pane="markings"] { opacity: 0; visibility: hidden; }
.gid.gs7 .gid-pane[data-pane="features"] { opacity: 1; transform: none; visibility: visible; }
.gid.gs8 .gid-pane[data-pane="features"] { opacity: 0; visibility: hidden; }
.gid.gs8 .gid-pane[data-pane="result"] { opacity: 1; transform: none; visibility: visible; }
/* ============================================================
BUILT TO ABSTAIN + MATRIX
============================================================ */
.pillars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.pillars-3 { grid-template-columns: repeat(3, 1fr); }
.pillar {
border: 1px solid var(--b1);
background: var(--s800);
padding: 16px;
display: flex;
flex-direction: column;
transition: transform 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.pillar:hover { transform: translateY(-2px); border-color: var(--s400); box-shadow: 0 8px 20px var(--shadow-field); }
.pillar > p { color: var(--t2); font-size: 13px; flex: 1; }
.mini {
margin-top: 10px;
border: 1px solid var(--b2);
background: var(--s900);
padding: 8px 10px;
font-size: 10px;
}
/* decision log mini */
.log-mini .log-row { display: flex; gap: 10px; color: var(--t2); margin: 0 0 6px; letter-spacing: 0.08em; }
.log-mini .log-row span { color: var(--t3); }
.log-mini .struck { text-decoration: line-through; text-decoration-color: var(--danger-400); color: var(--t3); margin-bottom: 2px; }
.log-strike { color: var(--danger-400); font-size: 9px; margin: 0 0 8px; letter-spacing: 0.12em; }
/* verbatim doc mini */
.doc-bar { display: block; height: 5px; background: var(--s500); margin-bottom: 6px; border-radius: 1px; }
.doc-bar.w80 { width: 80%; } .doc-bar.w95 { width: 95%; } .doc-bar.w70 { width: 70%; } .doc-bar.w88 { width: 88%; }
.doc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.doc-tags span { padding: 3px 7px; font-size: 9px; letter-spacing: 0.1em; }
.tag-src { color: var(--ok-400); border: 1px solid var(--ok-500); background: var(--tint-ok); }
.tag-no { color: var(--danger-400); border: 1px dashed var(--danger-500); background: var(--tint-danger); }
/* blast math mini */
.math-mini { color: var(--t2); }
.math-formula { font-size: 17px; color: var(--a300); letter-spacing: 0.1em; margin: 0 0 8px; }
.math-formula sup { font-size: 11px; }
.math-row { margin: 0 0 8px; letter-spacing: 0.08em; }
.math-row b { color: var(--t1); }
.math-up { color: var(--warn-400); letter-spacing: 0.18em; font-size: 9px; margin: 0; }
/* audit mini */
.audit-mini p { display: flex; align-items: center; gap: 7px; color: var(--t2); margin: 0 0 7px; letter-spacing: 0.08em; }
.audit-mini .qk-mark, .mini .qk-mark { transform: scale(1); }
/* confidence-chips mini (safety card b) */
.chips-mini { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 10px; }
/* human-confirm mini (safety card d) */
.confirm-mini .confirm-row {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
border: 1px solid var(--b2); background: var(--s800);
padding: 8px 10px; margin: 0 0 8px; color: var(--t2); letter-spacing: 0.08em;
}
.confirm-mini .confirm-row > span { white-space: nowrap; }
.confirm-key {
color: var(--on-accent); background: var(--a500);
border-radius: 2px; padding: 4px 9px; font-weight: 600; letter-spacing: 0.1em;
box-shadow: 0 2px 0 var(--key-shadow);
white-space: nowrap;
}
/* (FRONTIER AI COMPARISON matrix: deleted round 13, owner item 5.) */
/* ============================================================
DATABASE - provenance merge
============================================================ */
.database { background: var(--s800); border-top: 1px solid var(--b2); border-bottom: 1px solid var(--b2); }
.prov {
display: grid;
grid-template-columns: 230px minmax(60px, 1fr) 360px;
gap: 0;
align-items: center;
}
.prov-sources { display: flex; flex-direction: column; gap: 18px; }
.src {
display: flex;
align-items: center;
gap: 9px;
border: 1px solid var(--b1);
background: var(--s900);
color: var(--t2);
padding: 10px 13px;
opacity: 0;
transform: translateY(8px);
transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.prov.in .src { opacity: 1; transform: translateY(0); }
.prov.in .src:nth-child(1) { transition-delay: 0ms; }
.prov.in .src:nth-child(2) { transition-delay: 90ms; }
.prov.in .src:nth-child(3) { transition-delay: 180ms; }
.prov.in .src:nth-child(4) { transition-delay: 270ms; }
.src-dot { width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }
.src[data-src="a"] .src-dot { background: var(--a400); }
.src[data-src="b"] .src-dot { background: var(--info-400); }
.src[data-src="c"] .src-dot { background: var(--warn-400); }
.src[data-src="d"] .src-dot { background: var(--ok-400); }
.prov-lines { width: 100%; height: 216px; }
.prov-lines .pl {
fill: none;
stroke: var(--a600);
stroke-width: 0.55; /* stretched by preserveAspectRatio:none - reads ~1.5px */
stroke-dasharray: 1 1;
stroke-dashoffset: 1;
}
.prov.in .pl { animation: streamDraw 700ms var(--ease) forwards; }
.prov.in .pl:nth-child(1) { animation-delay: 150ms; }
.prov.in .pl:nth-child(2) { animation-delay: 300ms; }
.prov.in .pl:nth-child(3) { animation-delay: 450ms; }
.prov.in .pl:nth-child(4) { animation-delay: 600ms; }
@keyframes streamDraw { to { stroke-dashoffset: 0; } }
.prov-card {
border: 1px solid var(--b1);
background: var(--s900);
padding: 18px 20px;
opacity: 0;
transform: translateY(10px);
transition: opacity 350ms var(--ease) 700ms, transform 350ms var(--ease) 700ms;
}
.prov.in .prov-card { opacity: 1; transform: translateY(0); }
.prov-title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
letter-spacing: 0.05em;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
}
.prov-title .mono-label { color: var(--t3); font-size: 9px; }
.prov-field {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--b2);
color: var(--t2);
flex-wrap: wrap;
}
.prov-field span { color: var(--t3); width: 76px; flex-shrink: 0; }
.prov-field b { color: var(--t1); font-weight: 500; }
.ptag {
font-style: normal;
font-size: 9px;
padding: 1px 5px;
border-radius: 1px;
border: 1px solid var(--b1);
color: var(--t2);
}
.ptag[data-src="a"] { color: var(--a300); border-color: var(--a600); }
.ptag[data-src="b"] { color: var(--info-400); border-color: var(--info-400); }
.ptag[data-src="c"] { color: var(--warn-400); border-color: var(--warn-500); }
.ptag[data-src="d"] { color: var(--ok-400); border-color: var(--ok-500); }
.prov-field.conflict { background: var(--tint-danger); margin: 0 -8px; padding: 8px; border-top-color: transparent; }
.conflict-flag {
font-style: normal;
color: var(--danger-400);
border: 1px dashed var(--danger-500);
font-size: 9px;
padding: 2px 7px;
letter-spacing: 0.12em;
}
/* conflict pulses once when it enters view, then stays static */
@keyframes conflictPulse { 0% { opacity: 0.6; } 55% { opacity: 1; } 100% { opacity: 1; } }
.prov.in .conflict-flag { animation: conflictPulse 600ms ease 1300ms 1 backwards; }
/* ============================================================
FEATURE GRID
============================================================ */
.fgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.fcard {
border: 1px solid var(--b1);
background: var(--s800);
padding: 14px;
transition: transform 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.fcard:hover { transform: translateY(-2px); border-color: var(--s400); box-shadow: 0 8px 20px var(--shadow-field); }
.fmedia {
aspect-ratio: 2 / 1;
overflow: hidden;
border: 1px solid var(--b2);
background: var(--s900);
margin-bottom: 12px;
}
.fmedia img { width: 100%; height: 100%; object-fit: cover; }
.fcard > p { color: var(--t2); font-size: 12.5px; margin: 0; }
.fmedia-mock { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 14px; }
.mock-select {
display: flex; justify-content: space-between; align-items: center;
border: 1px solid var(--b1); background: var(--s800); padding: 8px 10px; font-size: 9px;
}
.mock-select span { color: var(--t3); } .mock-select b { color: var(--t1); font-weight: 500; }
.mock-chiprow { display: flex; gap: 5px; flex-wrap: wrap; }
.mock-chiprow span { border: 1px solid var(--b1); color: var(--t3); padding: 4px 8px; font-size: 8.5px; }
.mock-chiprow .on { color: var(--a300); border-color: var(--a500); background: var(--tint-accent); }
.mock-pack {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
border: 1px solid var(--b1); background: var(--s800); padding: 8px 10px; font-size: 9px; margin: 0;
}
.mock-pack span { color: var(--t2); }
.mock-pack b { color: var(--t3); font-weight: 500; white-space: nowrap; }
.ok-text { color: var(--ok-400) !important; }
.mock-rank {
display: flex; justify-content: space-between; align-items: center;
border: 1px solid var(--b1); background: var(--s800); padding: 7px 10px; font-size: 9px; margin: 0;
}
.mock-rank span { color: var(--t2); } .mock-rank b { color: var(--t3); font-weight: 500; }
.mock-rank.dim { opacity: 0.55; }
.mock-note { color: var(--a400); font-size: 8.5px; letter-spacing: 0.16em; margin: 2px 0 0; text-align: center; }
/* ============================================================
MAKE IT YOURS
============================================================ */
.brain-mini p, .packs-mini p { margin: 0 0 7px; }
.brain-row {
display: flex; align-items: center; gap: 9px;
border: 1px solid var(--b1); background: var(--s800);
padding: 8px 10px; color: var(--t2); font-size: 10px;
}
.brain-row b { margin-left: auto; color: var(--t3); font-weight: 500; }
.brain-row .src-dot { background: var(--t3); }
.brain-row.on { border-color: var(--a500); background: var(--tint-accent); color: var(--a300); }
.brain-row.on b { color: var(--ok-400); }
.brain-row.on .src-dot { background: var(--ok-400); }
.brain-row.add { border-style: dashed; color: var(--t3); }
.brain-row.add i { font-style: normal; }
.brain-foot { color: var(--t3); font-size: 8.5px; letter-spacing: 0.16em; margin-top: 10px !important; }
.team-row {
display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
border: 1px solid var(--b1); background: var(--s800);
padding: 8px 10px; color: var(--t2); font-size: 10px; margin: 0 0 10px;
}
.team-row b { color: var(--t3); font-weight: 500; }
.swatches { display: flex; align-items: center; gap: 7px; }
.sw { width: 26px; height: 26px; border-radius: 2px; border: 1px solid var(--b1); }
.sw-dark { background: linear-gradient(135deg, #15160f 55%, #8c8657 55%); }
.sw-day { background: linear-gradient(135deg, #f4f1e6 55%, #6e6943 55%); }
.sw-crt { background: linear-gradient(135deg, #0a0f0a 55%, #36b94a 55%); }
.sw-hc { background: linear-gradient(135deg, #000 55%, #f5c400 55%); }
.fontsteps { margin-left: auto; color: var(--t2); font-size: 10px; }
/* ============================================================
ROADMAP
============================================================ */
.road-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* v15: vertical cards - 1:1 media box on top, title below (per-card
IN DEVELOPMENT badges + descriptions deleted in the markup). */
.road-card {
position: relative;
border: 1px solid var(--b1);
background: var(--s800);
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.road-card:hover { transform: translateY(-2px); border-color: var(--s400); box-shadow: 0 8px 20px var(--shadow-field); }
.badge-dev {
display: inline-block;
align-self: flex-start;
white-space: nowrap;
color: var(--warn-400);
border: 1px solid rgba(207, 168, 79, 0.4);
background: var(--tint-warn);
padding: 4px 9px;
font-size: 9px;
margin-bottom: 0;
}
.road-art { border: 1px solid var(--b2); background: var(--s900); width: 100%; }
.road-art svg { width: 100%; height: auto; display: block; }
/* the owner approved SQUARE media boxes in the design; the live cards carry
REAL founder imagery (portrait tablet splash, x-ray panel, Valmara scan
video), so each 1:1 box CENTERS its item and scales it DOWN to fit - the
founder art / scan video is never cropped or upscaled. */
.road-art-photo { display: grid; place-items: center; padding: 0; aspect-ratio: 1 / 1; overflow: hidden; }
.road-art-photo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.road-art-video { padding: 0; overflow: hidden; }
.road-art-video video { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.road-card .h3-sm { align-self: flex-start; margin: 0; font-size: 13px; }
.road-card > p { color: var(--t2); font-size: 13px; margin: 0; }
.road-also { color: var(--t3); margin-top: 14px; line-height: 1.9; }
/* ============================================================
FAQ
============================================================ */
.faq { background: var(--s800); border-top: 1px solid var(--b2); }
.faq-list { border-top: 1px solid var(--b1); }
.faq-item { border-bottom: 1px solid var(--b1); }
.faq-item summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 44px;
padding: 10px 4px;
cursor: pointer;
color: var(--t1);
transition: color 140ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--a300); }
.faq-item summary .mono-label { letter-spacing: 0.16em; font-size: 12px; }
.faq-item summary i {
font-style: normal;
font-family: var(--font-mono);
color: var(--t3);
transition: transform 200ms var(--ease);
}
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--a300); }
.faq-item > p {
color: var(--t2);
max-width: 70ch;
margin: 0;
padding: 0 4px 14px;
animation: faqIn 220ms var(--ease);
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* ============================================================
FOOTER
============================================================ */
.footer { background: var(--s900); border-top: 1px solid var(--b2); padding: 56px 0 28px; }
.foot-grid { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.foot-mark {
font-family: var(--font-display);
font-weight: 700;
font-size: 26px;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0 0 6px;
}
.foot-line { color: var(--t2); margin: 0; }
.foot-contact { display: flex; flex-direction: column; gap: 10px; text-align: right; }
.foot-attrib { color: var(--t3); font-size: 12.5px; max-width: 78ch; margin: 30px 0 26px; }
.foot-band {
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
border-top: 1px solid var(--b2);
padding-top: 18px;
color: var(--t3);
}
.foot-band span:nth-child(2) { color: var(--a400); }
/* ============================================================
(BOOT SEQUENCE - retired round 10. The boot now runs IN PLACE on
the access gate's terminal surface; all of its styles live in the
ACCESS GATE / BOOT-IN-PLACE section above.)
============================================================ */
/* ============================================================
SPEC-SHEET SECTION HEADERS (engineering spec-sheet motif)
Owner IA 2026-07: the spec-idx numeral column is deleted page-wide;
the three STAGE kickers below are the wayfinding device instead.
============================================================ */
.spec-head {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: start;
padding-bottom: 10px;
margin-bottom: 14px;
border-bottom: 1px solid var(--b1);
}
.spec-head-body { min-width: 0; }
/* round 8: sections keep headline + ONE of (mono subhead | lede) -
this is the lede variant, living inside the spec head */
.spec-lede { margin: 6px 0 0; max-width: 62ch; }
/* ---------- STAGE KICKERS - mono wayfinding labels ---------- */
.stage-kicker {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
margin: 0 0 14px;
text-align: center;
}
.stage-kicker::before, .stage-kicker::after {
content: '';
height: 1px;
background: linear-gradient(90deg, transparent, var(--a600));
}
.stage-kicker::after { background: linear-gradient(90deg, var(--a600), transparent); }
.stage-kicker::before { grid-column: 1; grid-row: 1; }
.stage-kicker::after { grid-column: 3; grid-row: 1; }
.sk-label {
grid-column: 2;
grid-row: 1;
margin: 0;
color: var(--a200);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.42em;
text-indent: 0.42em; /* optically recenter the tracked text */
text-shadow: 0 0 18px var(--glow-a);
white-space: nowrap;
}
.sk-sub {
grid-column: 1 / -1;
grid-row: 2;
margin: 5px 0 0;
color: var(--t3);
font-size: 12px;
letter-spacing: 0.22em;
text-indent: 0.22em;
}
.spec-head-body .h2 { margin: 0 0 8px; }
.spec-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.btag {
color: var(--t2);
border: 1px solid var(--b1);
background: var(--s700);
padding: 3px 8px 3px 6px;
border-radius: 2px;
font-size: 9.5px;
}
.btag::before { content: '[ '; color: var(--a500); }
.btag::after { content: ' ]'; color: var(--a500); }
.btag-flag { color: var(--a200); border-color: var(--a600); background: var(--tint-accent); box-shadow: 0 0 14px rgba(181,172,114,0.22); }
.btag-flag::before, .btag-flag::after { color: var(--a300); }
.spec-desc { color: var(--t3); line-height: 1.7; margin: 0; max-width: 118ch; text-wrap: balance; }
.nowrap { white-space: nowrap; }
/* spec-head that also holds the pipeline step controls on the right */
.pipeline-spec { grid-template-columns: 1fr auto; align-items: end; }
.pipeline-spec .step-controls { align-self: end; padding-bottom: 2px; }
/* ============================================================
RAISED / LIGHTER SURFACES - deliberate contrast relief
============================================================ */
.section-raised {
background: linear-gradient(180deg, var(--raised-1) 0%, var(--raised-2) 100%);
border-top: 1px solid rgba(230, 226, 207, 0.07);
border-bottom: 1px solid var(--b2);
position: relative;
}
.section-raised::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--glow-a), transparent);
opacity: 0.7;
}
/* ============================================================
FLAGSHIP SECTIONS - screenshot + copy + capability bullets
============================================================ */
.flag-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 44px;
align-items: center;
}
.flag-intro-rev .flag-copy { order: 2; }
.flag-lede { font-size: clamp(16px, 1.5vw, 19px); color: var(--t1); margin: 0 0 14px; max-width: 52ch; }
.flag-lede em { font-style: normal; color: var(--a300); }
.cap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cap-list li { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: baseline; padding-left: 14px; border-left: 2px solid var(--a600); }
.cap-k { color: var(--a300); }
.cap-v { color: var(--t2); font-size: 14px; }
.cap-caption { color: var(--t3); margin: 0 0 12px; }
.phase-rail { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.phase-chip {
color: var(--t2); border: 1px solid var(--b1); background: var(--s800);
padding: 5px 9px; border-radius: 2px; font-size: 9px;
transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.phase-chip:hover { border-color: var(--a500); color: var(--a300); }
/* screenshot frames + annotated specimen labels */
.shot { margin: 0; }
.shot-label {
color: var(--t3); margin: 0 0 8px; letter-spacing: 0.14em;
padding-left: 12px; border-left: 2px solid var(--a500);
}
.shot-frame {
position: relative;
border: 1px solid var(--b1);
background: var(--s900);
overflow: hidden;
box-shadow: 0 20px 50px -20px rgba(0,0,0,0.7);
}
.shot-frame img { width: 100%; height: auto; display: block; }
.shot-frame .pf-corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--a500); z-index: 2; }
.shot-frame .c1 { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.shot-frame .c2 { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.shot-frame .c3 { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.shot-frame .c4 { bottom: 8px; right: 8px; border-left: none; border-top: none; }
/* safety net if a screenshot is ever missing */
.shot-missing .shot-frame { min-height: 220px; display: flex; align-items: center; justify-content: center; }
.shot-missing .shot-frame img { display: none; }
.shot-missing .shot-frame::after {
content: 'SCREEN CAPTURE UNAVAILABLE'; color: var(--t3);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
}
/* ============================================================
CV - "THINKS LIKE A TECH" · real PG-7 scan, name-labeled features
(round 4: numbered circles removed page-wide; labels by NAME only)
============================================================ */
.cvthink { background: var(--s900); }
/* round 5: the annotated figure runs full content width; the legend
sits below it. Render aspect is 1763:405 - the stage adds label
bands above/below and the image spans the full width. */
.pgx {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
align-items: start;
}
.cv-figcap { color: var(--t3); margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--a500); }
.pgx-figure { margin: 0; min-width: 0; }
.pgx-stage {
position: relative;
aspect-ratio: 16 / 5;
border: 1px solid var(--b1);
background: radial-gradient(ellipse at 46% 52%, #1e1f16, var(--s900) 82%);
overflow: hidden;
}
.pgx-stage > img {
position: absolute;
left: 0; right: 0; top: 15%;
width: 100%; height: 73.5%;
object-fit: contain;
filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
}
/* name labels - top row hangs above the item, bottom row sits below.
Generous spacing; whole overlay swaps to the legend list <720px. */
.pgx-lbl {
position: absolute;
left: var(--x);
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(-50%);
opacity: 0;
}
.pgx-top { top: 4%; bottom: auto; }
.pgx-bot { bottom: 4%; top: auto; }
.pgx-tag {
color: var(--t1);
background: rgba(21, 22, 15, 0.85);
border: 1px solid var(--a600);
border-radius: 2px;
padding: 4px 8px;
font-size: 9.5px;
letter-spacing: 0.12em;
white-space: nowrap;
}
.pgx-neg .pgx-tag { color: var(--danger-400); border-color: var(--danger-500); border-style: dashed; }
/* round 9 (owner item 8): the nose label is a SIDE label - anchored at the
feature point, horizontal leader, tag extending right. It occupies no
vertical run, so it cannot clip the stage's bottom edge at any width. */
.pgx-lbl.pgx-side {
flex-direction: row;
align-items: center;
top: var(--py);
bottom: auto;
height: auto;
transform: translate(0, -50%);
}
.pgx-side .pgx-line {
width: 22px; height: 1px; min-height: 0; flex: none;
background: linear-gradient(90deg, var(--a500), rgba(140, 134, 87, 0.15));
}
.pgx-lbl.pgx-side .pgx-tag { white-space: nowrap; max-width: none; text-align: left; }
.pgx-line { width: 1px; flex: 1; min-height: 10px; background: linear-gradient(var(--a500), rgba(140, 134, 87, 0.15)); }
.pgx-bot .pgx-line { background: linear-gradient(rgba(140, 134, 87, 0.15), var(--a500)); }
.pgx-neg .pgx-line { background: linear-gradient(rgba(164, 84, 58, 0.15), var(--danger-500)); }
.pgx-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--a300);
box-shadow: 0 0 8px 1px var(--glow-a);
flex-shrink: 0;
}
.pgx-neg .pgx-dot { background: var(--danger-400); box-shadow: 0 0 8px 1px rgba(201, 122, 90, 0.5); }
/* label geometry: the leader spans from the tag row down (or up) to the
feature point at --py of the stage height - the dot sits ON the feature */
.pgx-top { height: calc(var(--py) - 4%); }
.pgx-bot { height: calc(96% - var(--py)); }
/* staggered entrance once the section reveals */
.pgx.in .pgx-lbl { animation: pgxIn 420ms var(--ease) forwards; }
.pgx.in .pgx-lbl.pgx-side { animation-name: pgxInSide; }
.pgx.in .pgx-lbl[data-i="1"] { animation-delay: 500ms; }
.pgx.in .pgx-lbl[data-i="2"] { animation-delay: 700ms; }
.pgx.in .pgx-lbl[data-i="3"] { animation-delay: 900ms; }
.pgx.in .pgx-lbl[data-i="4"] { animation-delay: 1100ms; }
.pgx.in .pgx-lbl[data-i="5"] { animation-delay: 1300ms; }
@keyframes pgxIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes pgxInSide { from { opacity: 0; transform: translate(4px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
/* legend below the full-width figure (round 5): lede + verdict left,
feature key right */
.cv-legend {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 14px 48px;
align-items: start;
}
.cv-lede { font-size: clamp(16px, 1.4vw, 18px); color: var(--t1); margin: 0; max-width: 48ch; grid-column: 1; }
.cv-lede em { font-style: normal; color: var(--a300); }
.pgx-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; grid-column: 2; grid-row: 1 / span 2; }
.pgx-key li { padding-left: 14px; border-left: 2px solid var(--a600); }
.pgx-key li b { display: block; color: var(--a300); font-weight: 600; margin-bottom: 2px; }
.pgx-key li span { color: var(--t2); font-size: 12.5px; line-height: 1.5; }
.pgx-key .pgx-key-neg { border-left-color: var(--danger-500); }
.pgx-key .pgx-key-neg b { color: var(--danger-400); }
.cv-verdict { color: var(--t2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--b1); grid-column: 1; align-self: end; }
.cv-verdict .chip-high { box-shadow: 0 0 20px rgba(122,154,85,0.35); }
/* ============================================================
BVAI IDENTITY ORB
============================================================ */
.ai-mark { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.bvai-orb { width: 96px; height: 96px; flex-shrink: 0; filter: drop-shadow(0 0 22px rgba(181,172,114,0.4)); }
.ai-mark-name { color: var(--a200); font-size: 14px; letter-spacing: 0.16em; margin: 0 0 3px; text-shadow: 0 0 16px var(--glow-a); }
.ai-mark-sub { color: var(--t3); font-size: 9.5px; margin: 0; }
/* ============================================================
SUPPORTING CAPABILITIES STRIP (demoted, kept)
============================================================ */
.support-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.support-card {
position: relative; /* anchors the card-system corner ticks */
border: 1px solid var(--b1); background: var(--s900); padding: 16px;
transition: transform 140ms var(--ease), border-color 140ms var(--ease),
box-shadow 140ms var(--ease), opacity 240ms var(--ease);
}
.support-card:hover { transform: translateY(-2px); border-color: var(--s400); box-shadow: 0 8px 20px var(--shadow-field); }
.support-card p { color: var(--t2); font-size: 13px; margin: 0; }
.support-card .bvcard-ic { margin-bottom: 10px; }
/* ============================================================
3D SCAN VIEWER MOUNTS - shared base for the hero stage and the
library record's 1:1 card (the standalone widescreen section is
gone; the scan lives where it earns its place)
============================================================ */
.scan-viewer { position: relative; width: 100%; height: min(58vh, 560px); min-height: 360px; display: block; }
.scan-viewer canvas { display: block; width: 100% !important; height: 100% !important; }
.scan-status {
position: absolute; inset: 0; margin: auto; height: fit-content; width: fit-content;
color: var(--t2); letter-spacing: 0.2em;
}
/* roadmap 3-up */
.road-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
.pillars { grid-template-columns: repeat(2, 1fr); }
.fgrid { grid-template-columns: repeat(3, 1fr); }
.road-grid-3 { grid-template-columns: 1fr 1fr; }
.cap-list li { grid-template-columns: 170px 1fr; }
.gid { grid-template-columns: 1fr; }
.gid-note { max-width: 62ch; }
/* single-column gid: panes run wider and shorter (tallest ≈ 430px) */
.gid-body { min-height: 466px; }
}
@media (max-width: 900px) {
section { padding: 32px 0; }
.road-card { grid-template-columns: 1fr; }
/* stacked cards: cap the concept line art so it stays a thumbnail-scale
figure instead of inflating the low-priority roadmap section */
.road-art { grid-row: auto; margin: 0 auto 10px; width: 100%; max-width: 420px; }
.wrap { padding: 0 24px; }
.split-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; }
/* hero (Gotham comp): annotation columns wrap 2×2; the scroll cue joins
the flow; the wordmark keeps its single ~94vw line (pure-vw sizing) */
.hero-annot { flex-wrap: wrap; row-gap: 14px; margin-bottom: 16px; }
.hero-an { flex: 0 1 calc(50% - 24px); max-width: none; }
.hero-an-scroll { margin-left: 0; flex: 0 1 calc(50% - 24px); }
/* align-content:start packs each act to the top of the shared stage -
the height reserved for taller acts sits below the note as breathing
room instead of opening a hole between frame and note */
.act { grid-template-columns: 1fr; gap: 20px; align-items: start; align-content: start; }
.fgrid { grid-template-columns: repeat(2, 1fr); }
.pillars-3 { grid-template-columns: 1fr; }
.road-grid { grid-template-columns: 1fr; }
.prov { grid-template-columns: 1fr; gap: 14px; }
.prov-lines { display: none; }
.prov-sources { flex-direction: row; flex-wrap: wrap; }
.qi-banner { position: static; display: inline-block; margin-bottom: 18px; }
.lanes { grid-template-columns: 1fr; }
/* flagship + new components stack */
.flag-intro { grid-template-columns: 1fr; gap: 28px; }
.flag-intro-rev .flag-copy { order: 0; }
.pgx { grid-template-columns: 1fr; gap: 26px; }
.support-strip { grid-template-columns: 1fr; }
.road-grid-3 { grid-template-columns: 1fr; }
.spec-head { grid-template-columns: 1fr; gap: 6px; }
.pipeline-spec { grid-template-columns: 1fr; }
.pipeline-spec .step-controls { padding-bottom: 0; margin-top: 6px; }
.cap-list li { grid-template-columns: 1fr; gap: 3px; padding-left: 12px; }
.inc-below { grid-template-columns: 1fr; }
.ai-showcase { padding: 26px 0 0; }
}
@media (max-width: 560px) {
.topbar { gap: 12px; }
.topbar .mono-label { font-size: 9px; letter-spacing: 0.08em; }
.fgrid { grid-template-columns: 1fr; }
.pillars { grid-template-columns: 1fr; }
.rail-tick span { font-size: 8px; letter-spacing: 0.06em; }
/* hero (Gotham comp) at phone width: tighter annotations, CTA row intact */
.hero-an { font-size: 9px; letter-spacing: 0.12em; }
.hero-cta-row { gap: 12px; }
.gate-row { flex-direction: column; }
.foot-contact { text-align: left; }
.scan-viewer { height: 52vh; min-height: 300px; }
/* keep the 3-col tile grid: 9 tiles = 3 exact rows (2-col orphaned the
ninth tile alone in the last row) */
.gid-colors { grid-template-columns: repeat(2, 1fr); }
.gid-feats { grid-template-columns: 1fr; }
.gid-body { min-height: 680px; }
}
/* ============================================================
REDUCED MOTION - kill pins, loops, sweeps; show final frames
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
animation-delay: 0ms !important;
}
.reveal { opacity: 1; transform: none; }
/* hero: final frame - the video never plays under reduced motion
(main.js pauses it; the webp poster stands in as a still); content
lands fully visible */
.hero-mark, .hero-desc, .hero-an, .hero-cta-row { opacity: 1; animation: none !important; }
.chip-meter i { opacity: 1; transform: scale(1); }
.hero-texture { animation: none !important; }
/* storyboard visuals: final states */
.mask-path { stroke-dashoffset: 0; opacity: 1; }
.mask-fill { opacity: 1; }
.act2-lbl { opacity: 1; animation: none !important; }
.scanline-sweep { display: none; }
.crop-bracket { opacity: 1; }
.act .bar i { transform: scaleX(var(--w)); }
.nb, .ev { opacity: 1; transform: none; }
.caret { display: none; }
/* locked demos: JS parks them on their final states; force everything visible */
.gid-card, .gid-disc, .gid-record { opacity: 1 !important; transform: none !important; max-height: none !important; }
.qk-mark { transform: scale(1); }
.excl { opacity: 1; }
.gid-caret { display: none; }
/* PG-7 feature labels: shown, no stagger */
.pgx .pgx-lbl { opacity: 1; animation: none !important; }
/* provenance: final state */
.src, .prov-card { opacity: 1; transform: none; }
.prov-lines .pl { stroke-dashoffset: 0; animation: none !important; }
.advisory-line { background-size: 100% 1px; }
/* boot-in-place: never animates under reduced motion (JS goes straight to hero) */
.gate-offline, .gate-offdot, .boot-log, .gate-tube { animation: none !important; }
.gp-cursor { animation: none !important; }
.gate-sysline, .gate-promptline, #gate .btn-key-term, #gate .boot-title, .gate-subtitle { opacity: 1; animation: none !important; }
}
/* ============================================================
ROUND 3 - additions
(E) hero typography · (A) live PROM-1 record · (C) publications
(D) kinetic cylinder tour · (B) not-for-sale band
All motion transform/opacity only; reduced-motion block at the end.
============================================================ */
/* ---------- (E) HERO TYPOGRAPHY - RETIRED 2026-07-11 ----------
The two-column hero (hh-1/hh-2 title, side rails, orbit rings, PROM-1
stage, hairline scroll cue) is superseded by the Palantir-Gotham
composition in the HERO block above: ambient drum background, giant
bottom wordmark (.hero-mark), annotation row (.hero-annot). The scan
viewer keeps its single mount on the library record card. */
/* ---------- (A) LIVE PROM-1 LIBRARY RECORD ---------- */
.lib-record {
border: 1px solid var(--b1);
background: var(--s900);
box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.72);
position: relative;
}
.lr-demoband {
color: var(--warn-400);
border-bottom: 1px solid rgba(207, 168, 79, 0.35);
background: var(--tint-warn);
padding: 7px 14px;
letter-spacing: 0.16em;
font-size: 9.5px;
}
.lr-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 16px 18px 14px;
border-bottom: 1px solid var(--b2);
}
.lr-desig {
font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
font-size: 30px; line-height: 0.95; letter-spacing: 0.04em; color: var(--t1); margin: 0 0 4px;
}
.lr-name { color: var(--t2); font-size: 13px; margin: 0 0 9px; }
.lr-meta { display: flex; gap: 7px; flex-wrap: wrap; }
.lr-meta span { border: 1px solid var(--b1); background: var(--s700); color: var(--t2); padding: 3px 8px; border-radius: 2px; font-size: 9px; }
.lr-meta .lr-cat { color: var(--a300); border-color: var(--a600); background: var(--tint-accent); }
.lr-conf { flex-shrink: 0; box-shadow: 0 0 20px rgba(122, 154, 85, 0.28); }
.lr-conf .chip-meter i { opacity: 1; transform: scale(1); }
.lr-body { display: grid; grid-template-columns: 264px 1fr; gap: 20px; padding: 16px 18px; border-bottom: 1px solid var(--b2); }
.lr-visual { margin: 0; position: relative; border: 1px solid var(--b1); background: #eef0f0; overflow: hidden; aspect-ratio: 1 / 1; }
.lr-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the record's 1:1 scan card - small, interactive, drag to rotate */
.lr-visual-scan { background: radial-gradient(ellipse at 50% 34%, #1c1d15 0%, #101109 84%); }
.lr-scan { position: absolute; inset: 0; height: 100% !important; min-height: 0; cursor: grab; }
.lr-scan:active { cursor: grabbing; }
.lr-k { color: var(--t3); font-size: 9px; letter-spacing: 0.14em; margin: 0 0 6px; }
.lr-visual figcaption {
position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--t2);
/* 24px side insets clear the bottom corner brackets (left:6px + 13px wide) */
background: linear-gradient(transparent, rgba(21, 22, 15, 0.92)); padding: 12px 24px 5px;
}
.lr-visual .pf-corner { position: absolute; width: 13px; height: 13px; border: 1px solid var(--a400); z-index: 2; }
.lr-visual .c1 { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.lr-visual .c2 { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.lr-visual .c3 { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.lr-visual .c4 { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.lr-specs { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lr-specrow { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-specrow span {
border: 1px solid var(--b1); background: var(--s800); color: var(--t2);
padding: 6px 9px; border-radius: 2px; font-size: 10px; letter-spacing: 0.1em;
}
.lr-specrow b { color: var(--t1); font-weight: 600; font-size: 12px; }
.lr-haz { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-haz .haz { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; padding: 3px 8px; border-radius: 2px; border: 1px solid; }
.lr-haz .haz-d { color: var(--danger-400); background: var(--tint-danger); border-color: var(--danger-500); }
.lr-haz .haz-w { color: var(--warn-400); background: var(--tint-warn); border-color: var(--warn-500); }
.lr-haz-note { color: var(--t3); font-size: 8.5px; letter-spacing: 0.12em; margin: 2px 0 0; }
.lr-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lr-feats li { position: relative; padding-left: 16px; color: var(--t2); font-size: 12.5px; line-height: 1.5; }
.lr-feats li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--a400); border-radius: 1px; }
.lr-warnlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lr-warnlist li { position: relative; padding-left: 18px; color: var(--t1); font-size: 12.5px; line-height: 1.5; }
.lr-warnlist li::before { content: '\25B2'; position: absolute; left: 0; top: 1px; color: var(--danger-400); font-size: 9px; }
.lr-rsp-disc {
color: var(--warn-400); border: 1px solid rgba(207, 168, 79, 0.35); background: var(--tint-warn);
padding: 6px 10px; margin: 0 0 10px; font-size: 9px; letter-spacing: 0.12em; line-height: 1.7;
}
.lr-rsp-steps { margin: 0; padding-left: 20px; color: var(--t2); display: flex; flex-direction: column; gap: 7px; }
.lr-rsp-steps li { font-size: 12.5px; line-height: 1.5; }
.lr-rsp-src { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.lr-rsp-src .tag-src { color: var(--ok-400); border: 1px solid var(--ok-500); background: var(--tint-ok); padding: 3px 8px; font-size: 8.5px; letter-spacing: 0.12em; white-space: nowrap; }
.lr-verify {
color: var(--a300); border: 1px solid rgba(140, 134, 87, 0.55); border-radius: 2px;
padding: 4px 9px; font-size: 8.5px; letter-spacing: 0.12em;
transition: background-color 140ms ease, border-color 140ms ease;
}
.lr-verify:hover { background: var(--tint-accent); border-color: var(--a500); }
/* ---------- library record ACCORDIONS - the app's Collapsible ---------- */
.lr-accs { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }
.lr-acc { border: 1px solid var(--b2); border-radius: 3px; background: var(--s800); }
.lr-acc-danger { border-color: rgba(164, 84, 58, 0.5); background: rgba(201, 122, 90, 0.05); }
.lr-acc-h {
display: flex; align-items: center; gap: 12px;
width: 100%;
background: none; border: none;
padding: 11px 16px;
cursor: pointer;
text-align: left;
color: var(--t2);
border-bottom: 1px solid transparent;
transition: background-color 140ms ease, color 140ms ease;
}
.lr-acc-h .mono-label { letter-spacing: 0.15em; font-size: 11px; }
.lr-acc-h:hover { background: rgba(53, 54, 41, 0.5); color: var(--t1); }
.lr-acc-danger .lr-acc-h { color: var(--danger-400); font-weight: 600; }
.lr-acc-danger .lr-acc-h:hover { background: rgba(201, 122, 90, 0.1); }
.lr-acc-h i {
font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--t3);
transition: transform 200ms var(--ease);
}
.lr-acc.open .lr-acc-h i { transform: rotate(90deg); }
.lr-acc.open .lr-acc-h { border-bottom-color: var(--b2); }
.lr-acc-danger.open .lr-acc-h { border-bottom-color: rgba(164, 84, 58, 0.3); }
.lr-acc-b { padding: 13px 16px; animation: faqIn 200ms var(--ease); }
.lr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lr-grid p { margin: 0; font-size: 12px; color: var(--t1); line-height: 1.45; }
.lr-grid .lr-k { margin-bottom: 3px; }
.lr-grid .lr-span { grid-column: 1 / -1; }
.lr-foot { color: var(--t3); font-size: 8.5px; letter-spacing: 0.1em; line-height: 1.9; padding: 0 18px 16px; margin: 0; }
/* ---------- lede reused by the imagery rotor section ---------- */
.pubs-lede { font-size: clamp(15px, 1.4vw, 18px); color: var(--t1); max-width: 62ch; margin: 0 0 26px; }
.pubs-lede em { font-style: normal; color: var(--a300); }
/* ---------- (J) IMAGERY DRUM - real three.js kinetic cylinder (js/drum.js),
ported from the owner's reference KineticScene/DisplayCylinder/MarqueeStrip.
The .rotor strips below the canvas are BOTH the drum's texture manifest and
the reduced-motion / file:// / no-WebGL fallback (round 6: the CSS-3D rings
are superseded; these strips are their static form). ---------- */
/* overflow: clip (NOT hidden) - hidden makes this section the sticky
containing scrollport and silently kills the duo columns' position:sticky;
clip clips identically without creating a scroll container */
.tour { background: var(--s800); border-top: 1px solid var(--b2); border-bottom: 1px solid var(--b2); overflow: clip; }
/* ---------- TRAINED-TO-SEE band (owner item 2, 2026-07) ----------
Two-column band: LEFT carries the CV-reasoning story (lede, PG-7
figure, feature legend), RIGHT is the kinetic drum HALF-CROPPED off
the right page edge - the reference layout is designed to be cut by
the frame. .tour{overflow:clip} does the cropping without creating
a scroll container. */
.t2s {
display: grid;
grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
gap: clamp(24px, 3vw, 48px);
align-items: center;
/* left edge tracks the .wrap gutter; the right column runs to the page edge */
margin-left: max(24px, calc((100% - 1240px) / 2 + 40px));
}
.t2s-copy { min-width: 0; }
.t2s-copy .cv-lede { margin-bottom: 18px; max-width: 56ch; }
.t2s-drum { min-width: 0; }
/* the live canvas bleeds past the right page edge (~40-45% cropped);
the static fallback strips stay column-width so their own scrollbars
never hide under the page edge */
.tour.drum-live .t2s-drum .drum {
width: 212%; /* bigger + pushed right - the cylinder's left rim sits outside the fade */
/* no hard edge anywhere: the left side dissolves in instead of cutting at the rim */
mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%);
}
/* round 8: taller canvas - the drum column now fills to ≈ the copy
column's height instead of stranding dead space beneath the hint
(62vh keeps the live-swap layout delta vs the static strips small) */
.t2s-drum .drum-canvas { height: clamp(520px, 62vh, 650px); }
/* hint + disclaimer live under the VISIBLE part of the drum */
.t2s-drum .rotor-note { max-width: 56%; margin-left: 0; text-align: left; padding: 0; }
/* the PG-7 figure adapts to the narrower copy column: single-column
legend, wrap-enabled label tags */
.t2s .cv-legend { grid-template-columns: 1fr; gap: 14px; }
.t2s .cv-lede { grid-column: auto; }
.t2s .pgx-key { grid-column: auto; grid-row: auto; }
.t2s .cv-verdict { grid-column: auto; align-self: auto; }
.t2s .pgx { gap: 16px; }
.t2s .pgx-key { gap: 9px; }
.t2s .cv-verdict { padding-top: 10px; }
.t2s .pgx-tag { white-space: normal; max-width: 128px; text-align: center; line-height: 1.45; }
/* the paper pub, extracted to STAGE - VERIFY, centers as a document */
.pub-wrap { max-width: 880px; margin: 0 auto; }
.pub-lede { max-width: 62ch; margin-bottom: 26px; }
/* the drum canvas - created by js/drum.js, shown once the scene boots */
.drum { position: relative; }
.drum-canvas { display: none; width: 100%; height: clamp(420px, 62vh, 680px); pointer-events: none; }
.tour.drum-live .drum-canvas { display: block; }
.tour.drum-live .rotor { display: none; }
/* static reference strips (fallback + manifest) */
.rotor {
display: flex;
flex-direction: column;
gap: 22px;
padding: 4px 0;
-webkit-user-select: none; user-select: none;
}
.rotor-stage { overflow-x: auto; overflow-y: hidden; padding: 0 24px 10px; }
.rotor-ring { display: flex; gap: 12px; width: max-content; }
.rt {
position: relative;
flex: 0 0 auto;
margin: 0; /* kill the UA default */
width: 220px; height: 150px;
border: 1px solid var(--b1);
background: var(--s900);
overflow: hidden;
box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8);
}
.rt img { width: 100%; height: calc(100% - 26px); object-fit: cover; display: block; background: #10110b; }
/* turntable renders are transparent webp - let them float on the dark card */
.rt img[src*="renders/"] { object-fit: contain; padding: 4px; }
.rt.is-plate img { background: #eef0f0; object-fit: cover; }
.rt.is-sil { display: flex; flex-direction: column; }
.rt.is-sil svg { flex: 1; width: 46%; margin: 6px auto 0; color: var(--a400); opacity: 0.9; }
.rt figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--t3);
padding: 6px 8px; border-top: 1px solid var(--b2); background: var(--s900);
text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* owner-directed provenance disclaimer under the drum - PLAIN small mono
(owner item 4: the marquee ring carries marketing copy; the disclaimer
is quiet body text, not a warning treatment) */
.rotor-note {
color: var(--t3); text-align: center; margin: 10px auto 0;
letter-spacing: 0.12em; padding: 0 24px; max-width: 88ch; font-size: 9px; line-height: 1.9;
}
.foot-attrib-imagery { letter-spacing: 0.12em; font-size: 9px; }
/* ---------- (B) NOT FOR SALE / PUBLIC GOOD BAND ---------- */
.publicgood { padding: 40px 0; }
.pg-inner { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.pg-kicker { color: var(--a300); margin: 0 0 10px; letter-spacing: 0.22em; }
.pg-statement { font-size: clamp(16px, 1.55vw, 20px); color: var(--t2); margin: 0; max-width: 72ch; line-height: 1.55; }
.pg-statement b { color: var(--t1); font-weight: 600; }
.pg-cta { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.pg-cta .btn-key, .pg-cta .btn-key-outline { text-align: center; }
.foot-mission { color: var(--a400); margin: 10px 0 0; letter-spacing: 0.16em; font-size: 10px; }
/* ---------- responsive (round-3/4/5 components) ----------
the drum canvas is fluid (100% × clamp height); the static strips
keep one uniform 220×150 tile at every breakpoint */
@media (max-width: 900px) {
.lr-body { grid-template-columns: 220px 1fr; }
.lr-grid { grid-template-columns: repeat(2, 1fr); }
.pg-inner { grid-template-columns: 1fr; gap: 22px; }
.pg-cta { min-width: 0; }
}
@media (max-width: 900px) {
/* trained-to-see band stacks: copy, then the drum full-width (the
half-crop is a desktop gesture; stacked it reads edge-to-edge) */
.t2s { grid-template-columns: 1fr; gap: 34px; margin: 0 24px; }
.tour.drum-live .t2s-drum .drum { width: 100%; }
.t2s-drum .drum-canvas { height: clamp(380px, 52vh, 560px); }
.t2s-drum .rotor-note { max-width: none; text-align: center; }
}
@media (max-width: 560px) {
.lr-body { grid-template-columns: 1fr; }
.lr-visual { max-width: 240px; }
.drum-canvas { height: clamp(360px, 52vh, 560px); }
.rotor-note { font-size: 8.5px; }
}
/* ---------- reduced motion (round-3/4 components) ---------- */
@media (prefers-reduced-motion: reduce) {
/* imagery drum + hero ambient drum: js/drum.js never boots under
reduced motion - the static .rotor strips remain in the band and
the hero keeps its static darkened olive field */
}
/* ============================================================
ROUND 4 - additions
(B) hero live scan · (C) locked BVAI demo · (D) PG-7 annotations
(F) one-big-shot incident layout · (G) orb showcase
All motion transform/opacity only; reduced-motion covered above.
============================================================ */
/* ---------- (F) one big incident capture + feature cards ----------
round 9: the BVD demo CSS is deleted (demo merged into the acts
stepper); the incident capture is now the OVERVIEW pane of the
lightly-clickable incident mock */
.shot-xl { margin-bottom: 0; max-width: 1080px; margin-left: auto; margin-right: auto; }
.shot-xl .shot-frame img { width: 100%; }
/* ---------- INCIDENT (round 13, owner item 9): the tab chrome and the
TOOLS / REPORT pane styles are deleted with their markup; only the
OVERVIEW capture + the feature chips remain ---------- */
.inc-mock { max-width: 1080px; margin: 0 auto; }
/* short-name feature chips */
.inc-feats {
list-style: none;
margin: 18px auto 0;
padding: 0;
max-width: 1080px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.inc-feats li {
color: var(--t2);
border: 1px solid var(--b1);
background: var(--s800);
border-left: 2px solid var(--a600);
padding: 8px 12px;
border-radius: 2px;
font-size: 10px;
letter-spacing: 0.13em;
transition: color 140ms ease, border-color 140ms ease;
}
.inc-feats li:hover { color: var(--a300); border-color: var(--a500); }
/* ---------- (G) SME AI - the orb IS the visual ---------- */
.ai-showcase {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 0;
/* round 13 (owner item 10): was overflow:hidden - it clipped the top of
the shader orb when the hover state scaled it 1.03. The section
(#f-ai) already has overflow:hidden, so page scroll stays protected. */
overflow: visible;
}
.ai-orb-wrap { position: relative; width: min(300px, 74vw); aspect-ratio: 1; }
.ai-orb-wrap::before {
/* wide, soft page-glow behind the canvas so the mark melts into the section */
content: '';
position: absolute; inset: -22%;
background: radial-gradient(circle, rgba(181, 172, 114, 0.16) 0%, rgba(181, 172, 114, 0.05) 45%, transparent 68%);
pointer-events: none;
}
.ai-showcase .bvai-orb { width: 100%; height: 100%; display: block; filter: none; }
.ai-showcase .ai-mark-name { font-size: 15px; letter-spacing: 0.2em; margin: 6px 0 4px; color: var(--a200); text-shadow: 0 0 18px var(--glow-a); }
.ai-showcase .ai-mark-sub { color: var(--t3); font-size: 9.5px; margin: 0 0 16px; }
.ai-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* ---------- (D) PG-7 labels - wrap tags on mid screens, swap to the
legend list on small screens (round 5: verified at 1440/1024/768) ---------- */
@media (max-width: 820px) {
.pgx-tag { white-space: normal; max-width: 140px; text-align: center; line-height: 1.5; }
}
@media (max-width: 900px) {
.cv-legend { grid-template-columns: 1fr; }
.cv-lede, .cv-verdict, .pgx-key { grid-column: 1; grid-row: auto; }
}
@media (max-width: 600px) {
.pgx-lbl { display: none; }
.pgx-stage { aspect-ratio: 16 / 6; }
.pgx-stage > img { top: 8%; height: 84%; }
}
@media (max-width: 900px) {
/* these base rules live below the main responsive block, so they need
their own narrow-viewport overrides here */
.gid { grid-template-columns: 1fr; }
}
/* ============================================================
ROUND 5 - additions
(1) hero topo background lives with the hero block above
(4) BVAI instrument mark - crisp SVG dial, no shader
(5) PROM-1 paper pub - white publication page + expander
============================================================ */
/* ---------- (4) BVAI INSTRUMENT MARK ---------- */
.ai-mark-svg { width: 100%; height: 100%; display: block; }
.aim-rot-a { animation: aimSpin 26s linear infinite; transform-origin: 200px 200px; }
.aim-rot-b { animation: aimSpin 38s linear infinite reverse; transform-origin: 200px 200px; }
.aim-rot-c { animation: aimSpin 90s linear infinite; transform-origin: 200px 200px; }
@keyframes aimSpin { to { transform: rotate(360deg); } }
.aim-phos { filter: drop-shadow(0 0 4px rgba(125, 255, 140, 0.8)); }
.aim-bezel { filter: drop-shadow(0 0 5px rgba(214, 207, 159, 0.4)); }
.aim-trace { filter: drop-shadow(0 0 3px rgba(125, 255, 140, 0.7)); animation: aimTrace 2.8s ease-in-out infinite; }
.aim-dot { filter: drop-shadow(0 0 6px rgba(125, 255, 140, 0.9)); }
@keyframes aimTrace { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
/* ---------- (5) LIBRARY FEATURE COPY - its own block above the pub ---------- */
.lib-feature {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 20px 52px;
align-items: center;
margin-bottom: 0; /* round 8: it is the section's last block */
}
.lib-feature .flag-lede { margin: 0; max-width: 44ch; }
/* round 13 (owner item 11): plain data-provenance sentence under the lede */
.lib-src { color: var(--t2); font-size: 14px; line-height: 1.6; max-width: 46ch; margin: 12px 0 0; }
.lib-feature-caps { min-width: 0; }
@media (max-width: 900px) {
.lib-feature { grid-template-columns: 1fr; gap: 18px; }
}
/* ---------- (5) PAPER PUB - the record as a printed publication page.
White card, dark text, the app's daylight accent treatment. ---------- */
.lr-paper {
background: #fcfbf4;
border: 1px solid #d9d5c0;
color: #20211a;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
border-radius: 2px;
}
.lr-paper .lr-demoband { color: #8a6a19; background: rgba(176, 140, 51, 0.10); border-bottom-color: rgba(146, 116, 42, 0.35); }
.lr-paper .lr-head { border-bottom-color: #e5e1ce; }
.lr-paper .lr-desig { color: #1c1d15; }
.lr-paper .lr-name { color: #5c5947; }
.lr-paper .lr-meta span { background: #f1eedd; border-color: #ddd8c2; color: #5c5947; }
.lr-paper .lr-meta .lr-cat { color: #6e6943; border-color: #b8b18a; background: #eceadb; }
.lr-paper .lr-conf { color: #55712f; border-color: #7a9a55; background: rgba(122, 154, 85, 0.14); box-shadow: none; }
.lr-paper .lr-body { border-bottom-color: #e5e1ce; }
.lr-paper .lr-visual { border-color: #ddd8c2; }
.lr-paper .lr-visual .pf-corner { border-color: #8c8657; }
.lr-paper .lr-k { color: #8a8670; }
.lr-paper .lr-feats li { color: #3a3a2d; }
.lr-paper .lr-feats li::before { background: #8c8657; }
.lr-paper .lr-haz .haz-d { color: #a4543a; background: rgba(164, 84, 58, 0.10); border-color: #c49076; }
.lr-paper .lr-haz .haz-w { color: #8a6a19; background: rgba(176, 140, 51, 0.10); border-color: #c2a24e; }
.lr-paper .lr-haz-note { color: #8a8670; }
.lr-paper .lr-grid p { color: #2c2d20; }
.lr-paper .lr-warnlist li { color: #3a3a2d; }
.lr-paper .lr-warnlist li::before { color: #a4543a; }
.lr-paper .lr-accs { padding-top: 16px; }
.lr-paper .lr-acc { background: #f5f2e5; border-color: #e1ddc8; }
.lr-paper .lr-acc-h { color: #4b4936; }
.lr-paper .lr-acc-h:hover { background: #edeada; color: #20211a; }
.lr-paper .lr-acc-h i { color: #8a8670; }
.lr-paper .lr-acc.open .lr-acc-h { border-bottom-color: #e1ddc8; }
.lr-paper .lr-acc-danger { border-color: rgba(164, 84, 58, 0.42); background: rgba(164, 84, 58, 0.05); }
.lr-paper .lr-acc-danger .lr-acc-h { color: #a4543a; }
.lr-paper .lr-acc-danger .lr-acc-h:hover { background: rgba(164, 84, 58, 0.08); }
.lr-paper .lr-acc-danger.open .lr-acc-h { border-bottom-color: rgba(164, 84, 58, 0.28); }
.lr-paper .lr-rsp-disc { color: #8a6a19; background: rgba(176, 140, 51, 0.10); border-color: rgba(146, 116, 42, 0.35); }
.lr-paper .lr-rsp-steps { color: #3a3a2d; }
.lr-paper .lr-rsp-src .tag-src { color: #55712f; border-color: #7a9a55; background: rgba(122, 154, 85, 0.12); }
.lr-paper .lr-verify { color: #6e6943; border-color: #b8b18a; }
.lr-paper .lr-verify:hover { background: #eceadb; border-color: #8c8657; }
.lr-paper .lr-foot { color: #8a8670; }
.lr-paper ::selection { background: #6e6943; color: #fcfbf4; }
/* the pub's expander - collapsed shows the record header only */
.lr-expand {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 16px;
background: #f1eedd;
border: none;
border-top: 1px solid #e5e1ce;
color: #6e6943;
cursor: pointer;
transition: background-color 140ms ease, color 140ms ease;
}
.lr-expand .lr-expand-t { letter-spacing: 0.2em; }
.lr-expand:hover { background: #ece8d5; color: #4b4936; }
.lr-expand i {
font-style: normal;
font-size: 13px;
line-height: 1;
transition: transform 200ms var(--ease);
}
.lr-expand.open i { transform: rotate(180deg); }
.lr-full { animation: faqIn 240ms var(--ease); }
.lr-full[hidden] { display: none; }
/* ============================================================
ROUND 7 - additions
(1) SME AI "thinking" mark - raw-WebGL shader canvas (js/aimark.js)
(2) gate cursor swarm - ported ButtonGlobal arrows (js/main.js §1b)
(3) designed card system - surfaced panels, inverting icon chips,
sibling focus-dimming, growing corner ticks (Services/Work refs)
============================================================ */
/* ---------- (1) AI MARK SHADER CANVAS ---------- */
.aimark-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
/* the SVG instrument dial stays in the DOM as the no-JS / no-WebGL /
compile-failure fallback; it hides only once the shader is live */
.ai-orb-wrap.aimark-live .ai-mark-svg { display: none; }
.ai-orb-wrap.aimark-hover .aimark-canvas {
transform: scale(1.03);
box-shadow: 0 0 34px rgba(214, 207, 159, 0.16), 0 0 70px rgba(125, 255, 140, 0.08);
}
/* slow counter-rotating dashed rings behind section 03 (Services.tsx bg) */
#f-ai { position: relative; overflow: hidden; }
#f-ai .wrap { position: relative; z-index: 1; }
.ai-rings i {
position: absolute;
border-radius: 50%;
pointer-events: none;
display: block;
}
.ai-rings i:first-child {
width: 820px; height: 820px;
top: -300px; right: -220px;
border: 1px dashed rgba(214, 207, 159, 0.10);
animation: aiRingSpin 90s linear infinite;
}
.ai-rings i:last-child {
width: 560px; height: 560px;
top: 40px; right: -60px;
border: 1px solid rgba(214, 207, 159, 0.05);
animation: aiRingSpin 120s linear infinite reverse;
}
@keyframes aiRingSpin { to { transform: rotate(360deg); } }
/* ---------- (2) GATE CURSOR SWARM - arrows only, button untouched ---------- */
#gate-form .btn-key { position: relative; isolation: isolate; overflow: visible; }
#gate, .gate-core, .gate-stack, .gate-io, #gate-form { overflow: visible; }
.gate-swarm {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
z-index: -1; /* behind the key face, above the gate backdrop */
pointer-events: none;
/* no constellation spin - a wide elliptical ring hugging the pill would wobble as it rotated;
the staggered pop-in + per-arrow pulse carry the motion instead. */
}
@keyframes gswSpin { to { transform: rotate(-360deg); } }
.gsw {
position: absolute;
left: 0; top: 0;
width: 20px; height: 20px;
margin: -10px 0 0 -10px;
color: var(--a300);
filter: drop-shadow(0 0 6px rgba(208, 202, 146, 0.55));
opacity: 0;
transform: translate(0, 0) rotate(var(--rot)) scale(0);
transition: transform 220ms var(--ease), opacity 160ms var(--ease);
transition-delay: 0s; /* collapse is immediate */
}
.gsw svg { width: 100%; height: 100%; display: block; }
.gsw-trail { color: var(--crt-green); filter: drop-shadow(0 0 4px rgba(208, 202, 146, 0.4)); }
.gate-swarm.on .gsw {
opacity: var(--to, 1);
transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--ts, 1));
transition-delay: var(--d); /* staggered pop-in: ring·0.01 + i·0.002 + trail·0.008 s */
}
.gate-swarm.on .gsw:not(.gsw-trail) svg { animation: gswPulse 2s ease-in-out infinite; }
@keyframes gswPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
/* ---------- (3) CARD SYSTEM ---------- */
/* surfaced panel: subtle translucent bg + border + blur */
.bvcards .bvcard {
position: relative;
display: flex;
align-items: flex-start;
gap: 13px;
padding: 14px 16px 15px;
border: 1px solid var(--b2);
background: rgba(35, 36, 27, 0.55);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
border-radius: 3px;
min-width: 0;
transition: transform 200ms var(--ease), border-color 200ms var(--ease),
background-color 200ms var(--ease), box-shadow 200ms var(--ease),
opacity 240ms var(--ease);
}
.bvcards.cap-list { gap: 12px; }
.bvcards-col .bvcard { padding: 10px 13px 11px; }
.bvcard-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bvcard .cap-k { display: block; }
.bvcard .cap-v { display: block; }
/* card lifts, border brightens */
.bvcards .bvcard:hover {
transform: translateY(-4px);
border-color: rgba(214, 207, 159, 0.45);
background: rgba(43, 44, 33, 0.72);
box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.78);
}
/* round icon chip that INVERTS on hover (fill khaki, icon goes dark) */
.bvcard-ic {
flex: 0 0 auto;
width: 36px; height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--a300);
background: rgba(140, 134, 87, 0.13);
border: 1px solid rgba(140, 134, 87, 0.38);
transition: background-color 400ms var(--ease), color 400ms var(--ease),
border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.bvcard-ic svg { width: 16px; height: 16px; display: block; }
.bvcard:hover .bvcard-ic,
.pillar:hover .bvcard-ic,
.support-card:hover .bvcard-ic {
background: var(--a300);
color: var(--s900);
border-color: var(--a200);
box-shadow: 0 0 14px rgba(214, 207, 159, 0.35), 0 0 26px rgba(125, 255, 140, 0.12);
}
.pillar .bvcard-ic { margin-bottom: 10px; }
/* tiny corner ticks that GROW to frame the full card on hover -
the page's existing bracket language, applied to the card system
(cap cards, roadmap cards, pillars) */
.bvcard::before, .bvcard::after,
.pillar::before, .pillar::after,
.road-card::before, .road-card::after,
.support-card::before, .support-card::after {
content: '';
position: absolute;
width: 10px; height: 10px;
pointer-events: none;
opacity: 0.55;
z-index: 2;
transition: width 420ms var(--ease), height 420ms var(--ease),
border-color 420ms var(--ease), opacity 420ms var(--ease);
}
.bvcard::before, .pillar::before, .road-card::before, .support-card::before {
top: -5px; left: -5px;
border-top: 1px solid rgba(214, 207, 159, 0.5);
border-left: 1px solid rgba(214, 207, 159, 0.5);
}
.bvcard::after, .pillar::after, .road-card::after, .support-card::after {
bottom: -5px; right: -5px;
border-bottom: 1px solid rgba(214, 207, 159, 0.5);
border-right: 1px solid rgba(214, 207, 159, 0.5);
}
.bvcard:hover::before, .bvcard:hover::after,
.pillar:hover::before, .pillar:hover::after,
.road-card:hover::before, .road-card:hover::after,
.support-card:hover::before, .support-card:hover::after {
width: calc(100% + 10px);
height: calc(100% + 10px);
border-color: rgba(214, 207, 159, 0.65);
opacity: 0.9;
}
/* sibling focus-dimming: hover one card → the rest of its group dims */
@media (hover: hover) {
.bvcards:hover .bvcard:not(:hover),
.pillars:hover .pillar:not(:hover),
.road-grid:hover .road-card:not(:hover),
.support-strip:hover .support-card:not(:hover) { opacity: 0.25; }
}
.pillar, .road-card {
transition: transform 140ms var(--ease), border-color 140ms var(--ease),
box-shadow 140ms var(--ease), opacity 240ms var(--ease);
}
/* staggered reveal: cards cascade in once their .reveal container lands */
.reveal:not(.in) .bvcard { opacity: 0; }
.reveal.in .bvcard {
animation: bvCardIn 520ms var(--ease) backwards;
animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes bvCardIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
/* ============================================================
ROUND 8 - owner-directed consolidation (2026-07)
stage kickers · stats trio · t2s band · plates row · quick-id
full-variable walk (styles above); the block below carries the
plates row and small odds-and-ends.
============================================================ */
/* ---------- MODERNIZED PLATES ROW (owner item 9) ---------- */
/* before/after framing band - honest: no legacy plate exists locally, so
the comparison is text-framed, never a fabricated 'legacy' image */
.plate-note-band {
max-width: 880px;
margin: 0 auto 14px;
color: var(--t3);
font-size: 9.5px;
letter-spacing: 0.16em;
line-height: 1.9;
text-align: center;
border: 1px dashed var(--b1);
border-left: 3px solid var(--a600);
border-right: 3px solid var(--a600);
background: var(--s800);
padding: 9px 16px;
}
.plate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 880px; margin: 0 auto 22px; }
.plate-card {
position: relative;
margin: 0;
border: 1px solid var(--b1);
background: var(--s800);
padding: 14px;
transition: transform 140ms var(--ease), border-color 140ms var(--ease),
box-shadow 140ms var(--ease), opacity 240ms var(--ease);
}
.plate-card:hover { transform: translateY(-2px); border-color: var(--s400); box-shadow: 0 8px 20px var(--shadow-field); }
@media (hover: hover) {
.plate-row:hover .plate-card:not(:hover) { opacity: 0.35; }
}
.plate-img {
aspect-ratio: 1 / 1;
background: #eef0f0;
border: 1px solid var(--b2);
overflow: hidden;
margin-bottom: 12px;
}
.plate-img img { width: 100%; height: 100%; object-fit: cover; }
.plate-card figcaption b { display: block; color: var(--a300); font-size: 11px; letter-spacing: 0.12em; margin-bottom: 4px; }
.plate-card figcaption span { display: block; color: var(--t2); font-size: 12.5px; line-height: 1.55; }
.plate-note { color: var(--t3); margin-top: 18px; text-align: center; letter-spacing: 0.16em; }
@media (max-width: 900px) {
.plate-row { grid-template-columns: 1fr; }
.plate-img { max-width: 340px; margin-left: auto; margin-right: auto; }
}
/* ============================================================
ROUND 9 - additions
founder section · customize solo card · locked drum note
============================================================ */
/* ---------- ABOUT THE FOUNDER (owner item 15) ---------- */
.founder-grid {
display: grid;
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
gap: 20px clamp(28px, 4vw, 56px);
align-items: center;
max-width: 1040px;
margin: 0 auto;
}
.founder-portrait {
position: relative;
margin: 0;
border: 1px solid var(--b1);
background: var(--s900);
overflow: hidden;
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
max-width: 360px;
}
.founder-portrait img { width: 100%; height: auto; display: block; }
.founder-portrait figcaption {
position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
padding: 14px 24px 8px;
font-size: 8.5px; letter-spacing: 0.14em; color: var(--t2);
background: linear-gradient(transparent, rgba(21, 22, 15, 0.92));
text-align: center;
}
.founder-portrait .pf-corner { border-color: var(--a500); }
.founder-specs {
list-style: none;
margin: 0 0 18px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.founder-specs li {
color: var(--a300);
border: 1px solid var(--a600);
background: var(--tint-accent);
padding: 5px 10px;
border-radius: 2px;
font-size: 9.5px;
letter-spacing: 0.13em;
}
.founder-bio p { color: var(--t2); font-size: 15.5px; line-height: 1.65; max-width: 60ch; }
.founder-bio p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.founder-grid { grid-template-columns: 1fr; }
.founder-portrait { margin: 0 auto; }
.founder-specs { justify-content: center; }
.founder-bio p { margin-left: auto; margin-right: auto; text-align: center; }
.founder-specs { max-width: 420px; margin-left: auto; margin-right: auto; }
}
/* ---------- MAKE IT YOURS - full-width 2-column panel (v15): copy left,
packs mock right (round-9 decorative package icon removed) ---------- */
.customize-solo { max-width: none; margin: 0; }
.customize-solo .pillar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
grid-template-rows: auto auto;
column-gap: 48px; row-gap: 8px;
align-items: center;
padding: 30px 36px;
}
.customize-solo .pillar h3 { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
.customize-solo .pillar > p { grid-column: 1; grid-row: 2; align-self: start; flex: none; margin: 0; max-width: 42ch; }
.customize-solo .pillar .packs-mini { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
/* reduced-motion coverage for the round-8/9 pieces */
@media (prefers-reduced-motion: reduce) {
.gid-mark-note { opacity: 1; transform: none; }
.gid-feat .gid-box { transition: none; }
.stage-kicker { opacity: 1; }
.feat-card { animation: none !important; }
.gate-tube::before { animation: none !important; }
.gate-sysline.gl-head, .gate-sysline.gl-rule { animation: gateLineIn 0.01ms steps(1) forwards !important; opacity: 1; }
}
/* ============================================================
============================================================
CLAUDE DESIGN v15 PORT (2026-07) - appended blocks
New maneuverability chrome, reveal variety, image lightbox,
IDENTIFY split-stage layout, and the global sleek pass.
============================================================
============================================================ */
/* ---- maneuverability: topbar section nav + scroll-progress hairline ---- */
.topnav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.topnav a {
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3);
padding: 4px 9px; border-radius: 2px; white-space: nowrap;
transition: color 140ms var(--ease), background-color 140ms var(--ease);
}
.topnav a:hover { color: var(--a300); background: rgba(140,134,87,.12); }
.topnav a.active { color: var(--a300); background: rgba(140,134,87,.16); }
.scrollprog {
position: fixed; top: var(--topbar-h); left: 0; z-index: 101;
height: 2px; width: 0; background: linear-gradient(90deg, var(--a600), var(--a300));
box-shadow: 0 0 10px var(--glow-a); pointer-events: none;
transition: width 160ms linear;
}
/* ---- right-edge section rail (scrollspy) ---- */
.secrail {
position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 15px;
}
.secrail a { display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; }
.secrail .rl-label {
font-family: var(--font-mono); font-size: 10px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--a300);
white-space: nowrap; opacity: 0; transform: translateX(6px);
transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.secrail .rl-tick {
display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--b1);
transition: background-color 200ms var(--ease), width 200ms var(--ease), box-shadow 200ms var(--ease);
}
.secrail a:hover .rl-label { opacity: 1; transform: translateX(0); }
.secrail a:hover .rl-tick { background: var(--a600); width: 26px; }
.secrail a.active .rl-tick { background: var(--a300); width: 30px; box-shadow: 0 0 10px var(--glow-a); }
.secrail a.active .rl-label { opacity: .5; transform: translateX(0); }
.secrail a.active:hover .rl-label { opacity: 1; }
@media (max-width: 1180px) { .secrail { display: none; } }
@media (max-width: 860px) { .topnav { display: none; } }
/* ---- entrance variety: differentiate reveals by section role. Each variant
changes only the HIDDEN (:not(.in)) transform, so .reveal.in still lands
everything at identity; reduced-motion (force-adds .in) is safe. ---- */
.spec-head.reveal:not(.in), .stage-kicker.reveal:not(.in), .split-head.reveal:not(.in) { transform: translateX(-16px); }
.featband .feat-card.reveal { transition-delay: calc(var(--i, 0) * 45ms); }
.featband .feat-card.reveal:not(.in) { transform: translateY(10px) scale(.96); }
.plate-card.reveal { transition-delay: calc(var(--i, 0) * 90ms); }
.plate-card.reveal:not(.in) { transform: translateY(16px) scale(.94); }
.pillars .pillar.reveal:not(.in) { transform: translateY(20px); }
.pillars .pillar.reveal:nth-child(2) { transition-delay: 80ms; }
.pillars .pillar.reveal:nth-child(3) { transition-delay: 160ms; }
.pillars .pillar.reveal:nth-child(4) { transition-delay: 240ms; }
.road-grid .road-card.reveal:not(.in) { transform: translateY(20px) scale(.97); }
.road-grid .road-card.reveal:nth-child(2) { transition-delay: 110ms; }
.road-grid .road-card.reveal:nth-child(3) { transition-delay: 220ms; }
/* ---- image lightbox (blow up on click) ---- */
.zoomable { cursor: zoom-in; }
.lightbox {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px;
padding: 5vmin; background: rgba(10, 11, 7, 0.88);
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
opacity: 0; transition: opacity 200ms var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }
.lb-media { display: flex; align-items: center; justify-content: center;
transform: scale(.97); transition: transform 240ms var(--ease); }
.lightbox.open .lb-media { transform: scale(1); }
.lb-media img, .lb-media video { display: block; max-width: 88vw; max-height: 78vh;
border: 1px solid var(--a600); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
.lb-ph {
width: min(78vmin, 640px); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
text-align: center; padding: 32px; border: 1px dashed var(--a500); background: var(--s700);
color: var(--t2); font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6;
box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), inset 0 0 60px rgba(0,0,0,.3); }
.lb-cap { color: var(--a300); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
text-transform: uppercase; text-align: center; max-width: 74ch; line-height: 1.6; }
.lb-close {
position: fixed; top: 22px; right: 26px; width: 42px; height: 42px; border-radius: 3px;
background: rgba(35,36,27,.7); border: 1px solid var(--b1); color: var(--t2);
font-family: var(--font-mono); font-size: 16px; cursor: pointer; line-height: 1;
transition: color 140ms var(--ease), border-color 140ms var(--ease); }
.lb-close:hover { color: var(--a300); border-color: var(--a500); }
.lb-hint { position: fixed; bottom: 22px; left: 0; right: 0; text-align: center;
color: var(--t3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
/* ===== IDENTIFY -> split-stage format (stepper left, device stage right).
The numbered-stepper LIST styling + its active mapping live with the
walkthrough state rules above; this block carries the layout. ===== */
#quickid .gid {
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: 44px; max-width: 1080px; margin: 0 auto;
justify-content: normal; align-items: start;
}
#quickid .gid-note { grid-column: 1; grid-row: 1; max-width: none; }
#quickid .gid-app { grid-column: 2; grid-row: 1; width: 100%; max-width: 620px; margin: 0 auto; }
#quickid .gid-body { min-height: 544px; }
#quickid .gid-note-h { color: var(--a300); font-size: 12px; letter-spacing: .16em; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
#quickid .gid-note-h::before { content: ''; width: 30px; height: 2px; background: var(--a400); box-shadow: 0 0 8px var(--glow-a); }
@media (max-width: 1040px) {
#quickid .gid { grid-template-columns: 1fr; }
#quickid .gid-app { grid-column: 1; grid-row: 2; }
#quickid .gid-note { grid-row: 1; }
}
/* ============================================================
GLOBAL SLEEK PASS - bigger glowing display headlines, rounded
gradient panels, softer card corners, more negative space.
============================================================ */
.h2 { font-size: clamp(38px, 4.8vw, 66px); line-height: 0.95; letter-spacing: 0.01em; text-shadow: 0 0 52px rgba(214, 207, 159, .14); }
.h2 .lit { color: var(--a300); text-shadow: 0 0 42px rgba(214, 207, 159, .30); }
.spec-head { margin-bottom: 30px; }
.h3 { text-shadow: 0 0 30px rgba(214, 207, 159, .08); }
section { padding: 46px 0; }
.split-head { margin-bottom: 34px; }
.pillar, .road-card, .fcard, .support-card, .customize-solo .pillar,
.bvcards .bvcard, .demo-card, .prov-card, .lr-card, .gid-app {
border-radius: 12px;
}
.pillar, .road-card, .fcard, .support-card, .customize-solo .pillar {
background: linear-gradient(180deg, var(--s800), var(--s900));
}
.road-art { border-radius: 9px; overflow: hidden; }
.mini, .brain-mini, .packs-mini { border-radius: 8px; }
.spec-desc::before {
content: ""; display: inline-block; width: 26px; height: 2px; vertical-align: middle;
margin-right: 12px; background: var(--a400); box-shadow: 0 0 8px var(--glow-a);
}
/* ===== POLISH SCRUB: unification + motion ===== */
/* corner brackets mitered to the rounded card radius */
.bvcard::before, .pillar::before, .road-card::before, .support-card::before { border-top-left-radius: 12px; }
.bvcard::after, .pillar::after, .road-card::after, .support-card::after { border-bottom-right-radius: 12px; }
/* remaining sharp chrome joins the rounded system */
.qi-banner, .plate-note-band, .advisory, .mock-pack, .mock-select { border-radius: 6px; }
/* FAQ answers open with motion instead of snapping */
.faq-item[open] > p { animation: faqIn 260ms var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* guided-ID: phosphor scan-sweep between steps */
.gid-body::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--a300), transparent);
box-shadow: 0 0 18px var(--glow-a); opacity: 0; pointer-events: none; z-index: 5; }
.gid-body.sweep::after { animation: gidSweep 640ms var(--ease); }
@keyframes gidSweep { 0% { top: 0; opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { top: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.gid-body.sweep::after, .faq-item[open] > p { animation: none !important; }
}
/* ===== v15 mobile reconcile: the design was a desktop review, so its
nowrap feature chips and full-width 2-column customize panel need narrow-
screen fallbacks (the pre-port page wrapped chips and stacked this panel),
otherwise long chips / the two columns push past a phone viewport. ===== */
@media (max-width: 640px) {
/* long feature-chip labels wrap instead of forcing a wider-than-viewport line */
.feat-card > a { white-space: normal; }
/* MAKE IT YOURS panel stacks to a single column */
.customize-solo .pillar {
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: 16px;
padding: 24px;
}
.customize-solo .pillar h3,
.customize-solo .pillar > p,
.customize-solo .pillar .packs-mini {
grid-column: 1;
grid-row: auto;
align-self: start;
max-width: none;
}
}