@charset "UTF-8";
:root { --paper:#f2f0e8; --ink:#202820; --muted:#62675e; --line:#d3d5c9; --green:#d1f76b; --orange:#f88156; --lavender:#d6d4f0; --dark:#1c3026; --white:#fafbf6; --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
a { color:inherit; text-underline-offset:4px; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #554ad1; outline-offset:5px; }
::selection { background:var(--green); color:var(--ink); }
img,svg { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.04; letter-spacing:-.055em; }
h1 { font-size:clamp(64px,7.3vw,110px); font-weight:750; }
h2 { font-size:clamp(34px,4vw,56px); }
h3 { font-size:24px; }
ul,ol { padding-left:1.2em; }
[hidden] { display:none!important; }
.wrap { width:min(1240px,calc(100% - 96px)); margin-inline:auto; }
.mono,.eyebrow,.micro { font-family:var(--mono); }
.mono { font-size:11px; line-height:1.5; letter-spacing:.065em; }
.eyebrow { font-size:11px; line-height:1.6; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-bottom:22px; }
.micro { font-size:11px; line-height:1.7; color:var(--muted); }
.muted { color:var(--muted); }
.small { font-size:14px; }
.serif-word { font:italic 1.05em/.9 Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.065em; }
.orange { color:#df5e31; }
.dot { display:inline-block; flex-shrink:0; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#697e39; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:15px; left:20px; z-index:100; background:var(--green); padding:12px 20px; opacity:0; pointer-events:none; }
.skip-link:focus { opacity:1; pointer-events:auto; }
.site-header { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:100px; width:min(1340px,calc(100% - 64px)); margin:auto; border-bottom:1px solid var(--line); }
.brand { flex-shrink:0; display:block; width:205px; }
.brand img { width:205px; height:auto; filter:invert(1); mix-blend-mode:multiply; }
#site-nav { display:flex; align-items:center; gap:29px; }
#site-nav a { text-decoration:none; font-size:13px; padding:8px 0; }
#site-nav a[aria-current="page"] { box-shadow:0 2px 0 var(--ink); }
#site-nav a:hover { color:#456224; }
#site-nav .nav-contact { margin-left:12px; border:1px solid var(--ink); border-radius:100px; padding:10px 19px; }
.nav-contact span { padding-left:12px; }
.nav-toggle { display:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:26px; min-height:52px; border:1px solid transparent; padding:14px 22px; border-radius:5px; font-size:13px; font-weight:600; line-height:1.4; text-decoration:none; transition:transform .18s,background .18s; }
.button:hover { transform:translateY(-2px); }
.button span { font-size:21px; line-height:1; }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { background:#354b30; }
.button-orange { background:var(--orange); color:var(--ink); }
.button-orange:hover { background:#ff966f; }
.full { width:100%; }
.text-link { font-size:13px; font-weight:600; text-decoration:none; }
.text-link span { display:inline-block; margin-left:10px; }
.hero { position:relative; display:grid; grid-template-columns:1.07fr 1fr; gap:70px; align-items:center; padding-top:78px; padding-bottom:91px; }
.tiny-star { display:inline-block; color:#d45d31; font-size:20px; line-height:10px; margin-right:6px; vertical-align:middle; }
.hero h1 { font-size:clamp(62px,6.6vw,99px); line-height:1; }
.hero-deck { margin-top:28px; font-size:18px; line-height:1.55; color:#5b6359; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:32px; }
.hero-footnote { margin-top:25px; }
.hero-workbench { position:relative; background:var(--dark); color:#e7ecdf; border-radius:15px; padding:23px 25px 18px; transform:rotate(2deg); box-shadow:9px 11px 0 #dfe2d4; }
.board-top { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #425548; padding-bottom:16px; }
.board-top .mono { font-size:10px; }
.board-badge { border:1px solid #748a5d; color:var(--green); border-radius:30px; padding:3px 8px; font:9px var(--mono); letter-spacing:.08em; }
.hero-workbench .sentinel-svg { width:100%; margin-top:5px; }
.board-message { padding:0 0 23px; }
.board-message>.mono { display:block; color:#a8b39d; font-size:9px; margin-bottom:4px; }
.board-message strong { display:block; font-size:22px; letter-spacing:-.04em; line-height:1.4; min-height:31px; }
.poke-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-top:16px; border-top:1px solid #425548; }
.poke-row>.mono { flex-basis:100%; font-size:9px; color:#a8b39d; margin-bottom:2px; }
.poke-row button { flex:1; min-height:40px; background:#314738; color:#ecf1e6; border:1px solid #52654f; border-radius:4px; font:11px var(--mono); display:flex; align-items:center; justify-content:space-between; padding:9px 12px; }
.poke-row button:hover { background:var(--green); color:var(--ink); }
.poke-row button span { font-size:19px; }
.board-caption { text-align:center; font-size:9px; color:#a3b298; margin-top:15px; }
.hero-side-note { position:absolute; bottom:36px; right:0; font-size:9px; color:var(--muted); transform:rotate(2deg); }
.hero-workbench[data-mood="motion"] .robot-pupil { transform:translateX(-12px); }
.hero-workbench[data-mood="light"] .robot-pupil { transform:scale(.72); transform-origin:219px 158px; }
.hero-workbench[data-mood="heat"] .robot-pupil { transform:translateY(8px); }
.robot-pupil { transition:transform .25s; }
.ticker { background:var(--green); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); overflow:hidden; }
.ticker>div { min-width:max-content; display:flex; justify-content:center; align-items:center; gap:40px; padding:14px 22px; font:11px var(--mono); letter-spacing:.08em; }
.ticker i { font-style:normal; font-size:24px; line-height:1; }
.experiment-section { padding-block:90px 100px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:40px; }
.section-heading>p { max-width:330px; font-size:15px; color:var(--muted); padding-bottom:5px; }
.experiment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.experiment-card { display:flex; flex-direction:column; padding:26px; text-decoration:none; border:1px solid var(--ink); border-radius:9px; overflow:hidden; transition:transform .2s,box-shadow .2s; }
.experiment-card:hover { transform:translateY(-5px); box-shadow:5px 6px 0 var(--ink); }
.things-card { background:#dce5c7; }
.eyes-card { background:var(--lavender); }
.answers-card { background:#f6d6b4; }
.card-top { display:flex; align-items:center; justify-content:space-between; }
.card-top>span:last-child { font:26px Arial,sans-serif; }
.card-visual { position:relative; height:140px; display:flex; align-items:center; justify-content:center; margin-top:10px; }
.experiment-card h3 { font-size:48px; margin-bottom:16px; }
.experiment-card p { font-size:14px; line-height:1.65; max-width:270px; }
.card-link { display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:600; margin-top:30px; padding-top:17px; border-top:1px solid #222a2040; }
.card-link>span { font-size:20px; }
.signal-visual { gap:9px; }
.signal-visual span { width:13px; height:24px; border-radius:12px; background:#2b442c; }
.signal-visual span:nth-child(2),.signal-visual span:nth-child(8) { height:42px; }
.signal-visual span:nth-child(3),.signal-visual span:nth-child(7) { height:68px; }
.signal-visual span:nth-child(4),.signal-visual span:nth-child(6) { height:45px; }
.signal-visual span:nth-child(5) { height:100px; background:#68894b; }
.eye-visual>span { display:grid; place-items:center; width:132px; height:78px; background:#faf7ed; border:2px solid #313239; border-radius:70% 25% 70% 25%; transform:rotate(45deg); }
.eye-visual i { display:block; width:42px; height:42px; border:10px solid #414b3b; border-radius:50%; background:#1c251c; position:relative; }
.eye-visual i:after { content:""; position:absolute; width:7px; height:7px; background:#d1f76b; border-radius:50%; top:1px; left:1px; }
.eye-corner { position:absolute; width:24px; height:24px; border-color:#62627a; border-style:solid; }
.eye-corner.one { top:25px; left:23px; border-width:1px 0 0 1px; }
.eye-corner.two { bottom:15px; right:23px; border-width:0 1px 1px 0; }
.answer-visual>span { position:relative; z-index:2; font:bold 74px Georgia,serif; margin-right:-7px; margin-bottom:35px; }
.answer-visual>div { transform:rotate(-7deg); width:125px; height:92px; background:#faf7ef; border:1.5px solid var(--ink); padding:22px 17px; box-shadow:6px 6px 0 #f88156; }
.answer-visual i { display:block; height:3px; margin-bottom:8px; background:#7f8874; }
.answer-visual i:nth-child(2) { width:76%; }
.answer-visual i:nth-child(3) { width:45%; }
.answer-visual b { position:absolute; bottom:10px; right:12px; font:12px var(--mono); }
.loop-section { background:#e4e6da; border-block:1px solid var(--line); padding-block:85px; }
.loop-layout { display:grid; grid-template-columns:.95fr 1.15fr; gap:90px; }
.loop-layout h2 { font-size:clamp(52px,6vw,80px); line-height:1.08; }
.large-copy { font-size:24px; letter-spacing:-.025em; line-height:1.4; }
.loop-steps { list-style:none; padding:0; margin:30px 0; }
.loop-steps li { display:flex; gap:22px; border-top:1px solid #bdc4b1; padding:20px 0; }
.loop-steps li>span { font:12px var(--mono); padding-top:3px; }
.loop-steps strong { font-size:16px; }
.loop-steps p { font-size:13px; color:var(--muted); margin-top:3px; }
.honesty-note { display:flex; gap:12px; font-size:12px; color:#55604d; }
.honesty-note>span { font-size:22px; }
.honesty-note strong { color:var(--ink); }
.closing { padding-block:85px; position:relative; }
.closing .button { margin-top:30px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-inline:32px; padding:32px 16px; border-top:1px solid var(--line); }
.footer-brand { text-decoration:none; font-size:16px; font-weight:700; letter-spacing:-.04em; }
.footer-brand .mono { display:block; margin-top:5px; font-size:9px; color:var(--muted); font-weight:400; letter-spacing:0; }
.site-footer>p { color:var(--muted); font:10px var(--mono); }
.site-footer>a:last-child { font-size:12px; text-decoration:none; }
.site-footer>a:last-child span { margin-left:15px; }
.noscript-note { margin:24px; padding:20px; border:1px solid var(--ink); }
/* Shared experiment pages */
.lab-intro { padding-top:35px; padding-bottom:48px; }
.back-link { font:11px var(--mono); text-decoration:none; display:inline-block; margin-bottom:37px; color:var(--muted); }
.lab-intro .eyebrow { margin-bottom:18px; }
.lab-intro h1 { font-size:clamp(64px,7vw,94px); }
.lab-deck { max-width:650px; margin-top:25px; font-size:18px; line-height:1.55; color:var(--muted); }
.simulation-label { display:flex; align-items:center; flex-wrap:wrap; gap:7px; font:10px/1.5 var(--mono); margin-top:24px; }
.simulation-label .dot { margin:0; }
.label-divider { color:#a0a497; padding:0 6px; }
.lab-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start; }
.panel { background:#faf9f3; border:1px solid var(--line); border-radius:9px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.panel-heading h3 { font-size:20px; letter-spacing:-.03em; }
.status-tag { display:inline-block; font:9px/1.4 var(--mono); padding:4px 8px; border:1px solid #8e9c76; border-radius:50px; background:#e7edda; color:#3b512b; white-space:nowrap; }
.status-tag.offline { background:#e2e1dc; color:#60635b; border-color:#acafa1; }
.device-panel { background:var(--dark); color:#edf2e7; padding:26px; }
.device-panel>.panel-heading { padding-bottom:16px; border-bottom:1px solid #415748; }
.device-panel .mono { color:#bec9b6; }
.device-drawing { max-width:450px; margin:0 auto; }
.device-drawing .sentinel-svg { width:100%; }
.device-mood { padding:0 8px 26px; }
.device-mood .eyebrow { display:block; color:#a8b99b; font-size:9px; margin-bottom:10px; }
.device-mood h2 { font-size:36px; }
.device-mood p { min-height:44px; font-size:13px; color:#bcc9b5; margin-top:10px; max-width:340px; }
.device-panel[data-tone="alert"] .device-mood h2 { color:#ffb384; }
.device-panel[data-tone="offline"] .device-drawing { opacity:.45; }
.readings { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:20px; border-top:1px solid #415748; }
.readings .mono { display:block; font-size:9px; }
.readings strong { display:block; font-size:34px; letter-spacing:-.04em; font-weight:500; margin-top:5px; }
.readings small { font:11px var(--mono); margin-left:4px; color:#bec9b6; }
.controls-stack { display:grid; gap:20px; }
.control-panel { padding:30px; }
.control-panel h2 { font-size:31px; }
.control-panel>.muted { font-size:13px; margin-top:12px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; padding:22px 0; margin:10px 0 7px; border-bottom:1px solid var(--line); cursor:pointer; }
.toggle-row strong { display:block; font-size:14px; }
.toggle-row small { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.toggle-row input { position:absolute; right:0; width:46px; height:30px; opacity:0; cursor:pointer; z-index:2; margin:0; }
.switch-track { display:block; width:46px; height:27px; border-radius:20px; background:#bbc1b1; position:relative; flex-shrink:0; }
.switch-track:after { content:""; position:absolute; width:19px; height:19px; top:4px; left:4px; background:white; border-radius:50%; transition:transform .15s; box-shadow:0 1px 2px #0003; }
.toggle-row input:checked+.switch-track { background:#627c3a; }
.toggle-row input:checked+.switch-track:after { transform:translateX(19px); }
.toggle-row input:focus-visible+.switch-track { outline:3px solid #554ad1; outline-offset:5px; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
fieldset:disabled { opacity:.45; }
.range-field { margin:25px 0; }
.range-field label { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; font-weight:600; margin-bottom:10px; }
.range-field output { font:12px var(--mono); background:#e7ebdd; padding:3px 8px; border-radius:4px; }
input[type="range"] { appearance:none; display:block; width:100%; height:22px; background:transparent; accent-color:var(--ink); cursor:pointer; margin:0; }
input[type="range"]::-webkit-slider-runnable-track { height:5px; border-radius:5px; background:#c4cbb8; }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:19px; height:19px; margin-top:-7px; border-radius:50%; background:var(--ink); border:3px solid #faf9f3; box-shadow:0 0 0 1px var(--ink); }
input[type="range"]::-moz-range-track { height:5px; background:#c4cbb8; border-radius:5px; }
input[type="range"]::-moz-range-thumb { width:14px; height:14px; background:var(--ink); border:3px solid #faf9f3; border-radius:50%; box-shadow:0 0 0 1px var(--ink); }
.range-labels { display:flex; justify-content:space-between; margin-top:7px; font-size:8px; color:var(--muted); }
.feedback { min-height:20px; font-size:11px; color:var(--muted); margin-top:14px; }
.event-panel { padding:24px 28px; }
.plain-button { border:0; padding:5px 0; background:transparent; font-size:11px; text-decoration:underline; text-underline-offset:4px; color:inherit; min-height:36px; }
.event-log { padding:0; list-style:none; margin:18px 0 0; font-size:11px; }
.event-log li { display:flex; gap:16px; padding:10px 0; border-top:1px solid #e0e3d7; }
.event-log .mono { color:var(--muted); font-size:9px; padding-top:2px; }
.field-notes { padding-block:72px 65px; }
.notes-columns { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.notes-columns h2 { font-size:36px; }
.notes-columns h3 { font-size:20px; margin-bottom:18px; }
.notes-columns p { font-size:15px; color:var(--muted); margin-top:20px; max-width:470px; }
.notes-columns ul { margin:0; font-size:14px; color:var(--muted); }
.notes-columns li { padding:4px 0; }
.next-experiment { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 0 10px; margin-top:55px; border-top:1px solid var(--line); text-decoration:none; }
.next-experiment .mono { color:var(--muted); }
.next-experiment strong { margin-left:auto; font-size:24px; letter-spacing:-.04em; line-height:1.2; }
.next-experiment>span:last-child { font-size:32px; margin-left:22px; }
/* Vision workbench */
.vision-layout { display:grid; grid-template-columns:1.75fr 1fr; gap:27px; align-items:start; }
.vision-main { min-width:0; }
.scene-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px; background:var(--dark); color:#e8eddf; border-radius:8px 8px 0 0; }
.scene-toolbar .mono { font-size:9px; }
.scene-toolbar .status-tag { font-size:8px; background:transparent; color:#c8d6bb; border-color:#6c7d61; }
.scene-frame { position:relative; aspect-ratio:8/5; background:#d8d9c6; overflow:hidden; }
.scene-frame>img { width:100%; height:100%; object-fit:contain; }
#detection-overlay { position:absolute; inset:0; pointer-events:none; }
.detection-box { position:absolute; border:2px solid #355e2d; box-shadow:0 0 0 1px #e1f5bd70; border-radius:4px; }
.detection-box>span { position:absolute; left:-2px; top:-24px; white-space:nowrap; background:#27451f; color:#f0f8e4; padding:3px 6px; font:9px/1.6 var(--mono); border-radius:3px 3px 0 0; }
.scene-caption { display:flex; justify-content:space-between; gap:15px; padding:17px; background:#e7e9de; border-radius:0 0 8px 8px; }
.scene-caption strong { font-size:13px; }
.scene-caption .mono { font-size:9px; color:var(--muted); }
.scene-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:22px 0 14px; }
.scene-option { min-width:0; padding:0; border:1px solid var(--line); border-radius:5px; background:#faf9f3; overflow:hidden; text-align:left; }
.scene-option[aria-pressed="true"] { outline:2px solid var(--ink); outline-offset:3px; }
.scene-option img { width:100%; height:auto; aspect-ratio:8/5; }
.scene-option span { display:block; padding:9px 8px; font-size:10px; line-height:1.4; }
.vision-controls { padding:29px; }
.vision-controls h2 { font-size:39px; }
.vision-controls .eyebrow { font-size:9px; margin-bottom:15px; }
.detection-list { list-style:none; padding:0; margin:25px 0; }
.detection-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:13px 0; font-size:13px; }
.detection-list li span { font:11px var(--mono); color:#456137; }
.detection-list .empty-detection { display:block; color:var(--muted); font-size:12px; padding:20px 0; }
.vision-controls .feedback { margin-bottom:21px; }
/* Grounded answers */
.answer-layout { display:grid; grid-template-columns:1.6fr 1fr; gap:32px; align-items:start; }
.answer-main { min-width:0; }
.context-strip { padding:18px 22px; border:1px solid #c3ceaf; border-radius:7px; margin-bottom:18px; background:#e2e8d5; }
.context-strip>.mono { font-size:9px; }
.context-strip p { font-size:12px; margin-top:5px; }
.context-strip a { font-size:10px; display:inline-block; margin-top:9px; }
.question-panel { padding:32px; }
.answer-avatar { display:grid; place-items:center; font:italic 32px Georgia,serif; width:49px; height:49px; border:1px solid var(--ink); background:var(--green); border-radius:50%; margin-bottom:23px; box-shadow:3px 3px 0 #283321; }
.question-panel h2 { font-size:31px; line-height:1.15; max-width:380px; }
.question-panel>.muted { font-size:13px; margin-top:18px; }
.suggested-questions { display:flex; flex-wrap:wrap; gap:8px; margin:23px 0; }
.suggested-questions button { font-size:10px; background:transparent; border:1px solid #c6cdbb; border-radius:30px; padding:9px 11px; }
.suggested-questions button:hover { background:#e3e9d6; border-color:#85966b; }
.question-input { display:flex; gap:7px; border:1px solid #b4bea8; border-radius:7px; padding:6px; background:white; }
.question-input input { width:100%; min-width:0; border:0; background:transparent; padding:10px; font-size:12px; color:var(--ink); }
.question-input input::placeholder { color:#6e7666; }
.question-input .button { min-height:43px; padding:9px 13px; gap:10px; font-size:12px; flex-shrink:0; }
#question-form>.micro { font-size:9px; margin-top:11px; }
.answer-result { padding-top:26px; margin-top:28px; border-top:1px solid var(--line); }
.answer-result-top { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.answer-result-top .mono { font-size:8px; }
#answer-label { background:#e6edda; padding:5px 8px; color:#3e5a2d; border-radius:4px; }
.answer-result[data-supported="false"] #answer-label { background:#f4dfc7; color:#794520; }
.answer-method { color:var(--muted); }
.answer-result h3 { font-size:20px; line-height:1.35; margin-top:21px; letter-spacing:-.025em; overflow-wrap:anywhere; }
#answer-text { font-size:14px; line-height:1.8; margin:13px 0 20px; white-space:pre-line; }
.citation { padding:15px 17px; background:#eaece2; border-left:2px solid #798d5b; margin:12px 0; }
.citation a { font-size:11px; font-weight:600; }
.citation blockquote { margin:9px 0 0; font-size:11px; color:#58614e; line-height:1.7; }
.field-guide { border:1px solid #bfc6b4; border-radius:8px; padding:26px; background:#e5e8dc; }
.field-guide-header>.mono { font-size:9px; }
.field-guide-header h2 { font-size:32px; margin-top:16px; }
.field-guide-header p { font-size:12px; color:var(--muted); margin:17px 0 25px; }
.document { border-top:1px solid #bbc5ae; padding:16px 0; scroll-margin-top:40px; }
.document summary { font-size:12px; font-weight:600; cursor:pointer; }
.document p { margin-top:12px; font-size:11px; line-height:1.8; color:#4f5b45; }
.document .mono { display:block; margin-top:12px; font-size:9px; color:#647452; }
.rag-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; padding-top:10px; }
.rag-flow .mono { display:block; font-size:10px; margin-bottom:18px; }
.rag-flow h3 { font-size:22px; }
.rag-flow p { font-size:13px; margin-top:16px; color:var(--muted); }
.standalone { margin-top:30px; padding:17px 20px; border:1px dashed #aab69a; border-radius:5px; }
/* Contact */
.contact-hero { position:relative; padding-block:85px 65px; }
.contact-hero h1 { font-size:clamp(85px,11vw,145px); }
.contact-deck { margin-top:30px; font-size:20px; color:var(--muted); }
.contact-email { display:inline-block; margin-top:35px; font-size:clamp(17px,2.3vw,28px); letter-spacing:-.025em; overflow-wrap:anywhere; }
.contact-email span { display:inline-block; margin-left:20px; text-decoration:none; }
.contact-person { margin-top:50px; }
.contact-person>.mono { font-size:10px; }
.contact-person>p:first-of-type { font-size:20px; margin-top:8px; }
.contact-person>.muted { font-size:13px; }
.contact-orbit { position:absolute; top:150px; right:60px; width:280px; height:280px; border:1px solid #8d9b7b; border-radius:50%; display:grid; place-items:center; }
.contact-orbit:before { content:""; position:absolute; inset:35px; border:1px dashed #8d9b7b; border-radius:50%; }
.contact-orbit>span { position:absolute; top:58px; font:12px var(--mono); transform:rotate(-13deg); }
.contact-orbit>i { position:absolute; width:24px; height:24px; border-radius:50%; background:var(--orange); right:9px; top:58px; }
.contact-orbit>b { font:120px/1 Arial,sans-serif; font-weight:400; }
.contact-note { max-width:680px; margin-left:max(48px,calc((100vw - 1240px)/2)); padding-bottom:65px; }
.contact-note>p { font-size:12px; color:var(--muted); }
.contact-note .plain-button { margin-top:15px; }
#clear-feedback { margin-top:9px; min-height:20px; }
@media (min-width:1500px) { .hero { gap:110px; } }
@media (max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  .hero { gap:38px; padding-block:65px 85px; }
  .hero h1 { font-size:78px; }
  .hero-actions { gap:18px; flex-wrap:wrap; }
  .hero-workbench { padding:20px; }
  .board-message strong { font-size:20px; }
  .experiment-card { padding:22px; }
  .experiment-card h3 { font-size:40px; }
  .card-top .mono,.card-top { font-size:9px; }
  .loop-layout { gap:55px; }
  .vision-layout { grid-template-columns:1.5fr 1fr; gap:20px; }
  .vision-controls { padding:24px; }
  .answer-layout { grid-template-columns:1.5fr 1fr; gap:22px; }
  .question-panel { padding:26px; }
  .contact-orbit { right:0; width:240px; height:240px; }
}
@media (max-width:850px) {
  .site-header { min-height:84px; }
  .brand,.brand img { width:175px; }
  #site-nav { gap:18px; }
  #site-nav a { font-size:12px; }
  #site-nav .nav-contact { margin-left:0; padding:8px 13px; }
  .hero h1 { font-size:64px; }
  .hero-deck { font-size:16px; }
  .hero { gap:30px; }
  .hero-copy .eyebrow { font-size:9px; }
  .hero-actions { gap:20px; }
  .hero-workbench { padding:18px; }
  .board-message strong { font-size:17px; }
  .hero-footnote { font-size:9px; }
  .poke-row button { padding:8px; font-size:9px; }
  .board-caption { font-size:8px; }
  .experiment-grid { gap:14px; }
  .experiment-card { padding:19px; }
  .experiment-card p { font-size:12px; }
  .card-link { font-size:10px; }
  .signal-visual { gap:6px; }
  .signal-visual span { width:10px; }
  .eye-visual>span { width:105px; height:62px; }
  .eye-corner.one { left:0; }
  .eye-corner.two { right:0; }
  .section-heading>p { max-width:275px; font-size:13px; }
  .loop-layout { gap:40px; }
  .large-copy { font-size:20px; }
  .lab-layout,.vision-layout,.answer-layout { grid-template-columns:1fr; }
  .lab-layout { max-width:680px; }
  .device-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; }
  .device-panel>.panel-heading,.readings { grid-column:1/-1; }
  .device-mood { padding:15px 15px 15px 0; }
  .device-mood h2 { font-size:30px; }
  .readings { text-align:center; }
  .vision-controls { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
  .vision-controls>.eyebrow,.vision-controls>h2 { grid-column:1; }
  .vision-controls>.range-field { grid-column:1; }
  .vision-controls>.small { grid-column:1; }
  .detection-list { grid-column:2; grid-row:1/5; }
  .vision-controls>.feedback { grid-column:2; grid-row:5; }
  .vision-controls>.button { grid-column:2; grid-row:6; }
  .field-guide { display:grid; grid-template-columns:.9fr 1.2fr; gap:25px; }
  .field-guide-header p { max-width:220px; }
  .notes-columns { gap:40px; }
  .contact-orbit { width:190px; height:190px; right:5px; top:200px; opacity:.8; }
  .contact-orbit>span { top:37px; font-size:9px; }
  .contact-orbit>b { font-size:85px; }
  .contact-orbit>i { right:-3px; }
  .contact-note { margin-left:32px; width:calc(100% - 64px); }
}
@media (max-width:680px) {
  .wrap { width:calc(100% - 40px); }
  .site-header { width:calc(100% - 40px); min-height:77px; }
  .brand,.brand img { width:170px; }
  .nav-toggle { display:flex; align-items:center; gap:10px; background:transparent; border:1px solid #abb49e; border-radius:5px; padding:8px 11px; font-size:11px; min-height:40px; }
  .nav-toggle span { font-size:17px; }
  #site-nav { display:none; position:absolute; left:0; right:0; top:76px; background:var(--paper); border:1px solid var(--line); border-top:0; box-shadow:0 14px 24px #2028201a; padding:15px; border-radius:0 0 7px 7px; }
  #site-nav.open { display:grid; gap:4px; }
  #site-nav a { font-size:14px; padding:12px; }
  #site-nav a[aria-current="page"] { box-shadow:none; background:#e1e7d5; border-radius:4px; }
  #site-nav .nav-contact { margin-top:7px; text-align:center; }
  .hero { grid-template-columns:1fr; gap:42px; padding-top:44px; padding-bottom:72px; }
  .hero-copy .eyebrow { font-size:10px; }
  .hero h1 { font-size:clamp(62px,15vw,90px); }
  .hero-deck { font-size:17px; margin-top:23px; }
  .hero-actions { margin-top:26px; gap:24px; }
  .hero-actions .button { padding:14px 18px; font-size:12px; }
  .hero-actions .text-link { font-size:12px; }
  .hero-footnote { margin-top:22px; font-size:10px; }
  .hero-workbench { width:calc(100% - 10px); max-width:480px; margin-inline:auto; transform:rotate(1.5deg); padding:22px; }
  .hero-workbench .sentinel-svg { max-height:300px; }
  .board-message strong { font-size:24px; }
  .board-caption { font-size:9px; }
  .poke-row button { padding:10px 12px; font-size:11px; }
  .hero-side-note { bottom:25px; font-size:8px; right:10px; }
  .ticker>div { justify-content:flex-start; font-size:9px; gap:25px; padding-block:12px; }
  .experiment-section { padding-block:55px 60px; }
  .section-heading { display:block; margin-bottom:30px; }
  .section-heading .eyebrow { margin-bottom:16px; }
  .section-heading h2 { font-size:42px; }
  .section-heading>p { max-width:350px; margin-top:22px; font-size:14px; }
  .experiment-grid { grid-template-columns:1fr; gap:18px; }
  .experiment-card { padding:25px; }
  .experiment-card h3 { font-size:48px; }
  .experiment-card p { font-size:15px; max-width:330px; }
  .card-top { font-size:10px; }
  .card-visual { margin-block:0 10px; }
  .card-link { font-size:12px; margin-top:25px; }
  .signal-visual { gap:11px; }
  .signal-visual span { width:15px; }
  .eye-visual>span { width:132px; height:78px; }
  .eye-corner.one { left:40px; }
  .eye-corner.two { right:40px; }
  .loop-section { padding-block:55px; }
  .loop-layout { grid-template-columns:1fr; gap:32px; }
  .loop-layout h2 { font-size:66px; }
  .large-copy { font-size:22px; }
  .closing { padding-block:55px; }
  .closing h2 { font-size:40px; }
  .site-footer { margin-inline:20px; padding:28px 0; flex-wrap:wrap; gap:20px; }
  .site-footer>p { order:3; flex-basis:100%; }
  .site-footer>a:last-child { font-size:11px; }
  .lab-intro { padding-top:24px; padding-bottom:34px; }
  .back-link { margin-bottom:30px; }
  .lab-intro h1 { font-size:64px; }
  .lab-deck { font-size:16px; margin-top:22px; }
  .simulation-label { font-size:9px; gap:6px; }
  .label-divider { padding:0 2px; }
  .lab-layout { gap:20px; }
  .device-panel { padding:20px; display:block; }
  .device-panel .panel-heading .mono { font-size:9px; }
  .device-drawing { max-width:340px; }
  .device-mood { padding:0 2px 22px; }
  .device-mood h2 { font-size:35px; }
  .device-mood p { min-height:0; }
  .readings { text-align:left; }
  .readings strong { font-size:30px; }
  .readings small { font-size:9px; }
  .readings .mono { font-size:8px; }
  .control-panel { padding:24px; }
  .event-panel { padding:22px 24px; }
  .field-notes { padding-block:48px 50px; }
  .notes-columns { grid-template-columns:1fr; gap:30px; }
  .notes-columns h2 { font-size:34px; }
  .notes-columns p { font-size:14px; margin-top:15px; }
  .next-experiment { flex-wrap:wrap; gap:13px; margin-top:35px; padding-top:24px; }
  .next-experiment>.mono { flex-basis:100%; font-size:10px; }
  .next-experiment strong { margin-left:0; font-size:24px; flex:1; }
  .next-experiment>span:last-child { margin-left:0; }
  .scene-toolbar { padding:13px 11px; }
  .scene-toolbar .mono { font-size:8px; }
  .scene-toolbar .status-tag { font-size:7px; padding:3px 5px; }
  .scene-caption { padding:13px; align-items:center; }
  .scene-caption strong { font-size:12px; }
  .scene-caption .mono { font-size:8px; }
  .scene-picker { gap:8px; margin-top:19px; }
  .scene-option span { font-size:9px; padding:8px 6px; }
  .detection-box { border-width:1.5px; }
  .detection-box>span { font-size:7px; padding:2px 4px; top:-19px; }
  .vision-controls { display:block; padding:25px; }
  .vision-controls h2 { font-size:40px; }
  .answer-layout { gap:22px; }
  .context-strip { padding:15px 18px; }
  .question-panel { padding:24px 20px; }
  .question-panel h2 { font-size:30px; }
  .suggested-questions { gap:7px; }
  .suggested-questions button { font-size:10px; }
  .question-input { flex-wrap:wrap; padding:7px; }
  .question-input input { flex-basis:100%; padding:10px 6px; min-height:43px; font-size:16px; }
  .question-input .button { width:100%; min-height:42px; }
  .field-guide { display:block; padding:25px; }
  .field-guide-header h2 { font-size:36px; }
  .field-guide-header p { max-width:100%; }
  .document summary { font-size:13px; padding-block:3px; }
  .document p { font-size:12px; }
  .rag-flow { grid-template-columns:1fr; gap:30px; }
  .rag-flow h3 { font-size:26px; }
  .rag-flow p { margin-top:12px; font-size:14px; }
  .contact-hero { padding-top:55px; }
  .contact-hero h1 { font-size:96px; }
  .contact-deck { font-size:18px; }
  .contact-email { font-size:20px; margin-top:28px; }
  .contact-email span { margin-left:9px; }
  .contact-orbit { display:none; }
  .contact-person { margin-top:42px; }
  .contact-note { width:calc(100% - 40px); margin-left:20px; padding-bottom:45px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }
/* A visible backend: service boundaries, request traces, and source payloads. */
.answers-intro { padding-bottom:42px; }
.answers-intro h1 { font-size:clamp(64px,7.3vw,100px); }
.question-workbench { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:30px; align-items:stretch; }
.question-workbench .question-panel { padding:28px; }
.question-workbench .answer-avatar { display:none; }
.question-workbench .question-panel h2 { max-width:none; }
.request-controls { border:1px dashed #aab69a; border-radius:8px; padding:29px; display:flex; flex-direction:column; }
.request-controls h2 { font-size:32px; margin-bottom:20px; }
.request-controls .eyebrow { font-size:9px; margin-bottom:14px; }
.request-controls>label { font-size:11px; font-weight:bold; margin-bottom:7px; }
.request-controls select { width:100%; padding:12px 10px; border:1px solid #aab69a; border-radius:5px; color:var(--ink); background:#faf9f3; font:12px Arial,sans-serif; margin-bottom:18px; }
.request-controls>.micro { font-size:10px; margin-top:auto; }
.request-actions { display:flex; gap:25px; margin-top:13px; }
button:disabled { cursor:default; opacity:.45; }
.backend-workbench { padding-top:66px; }
.backend-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:30px; }
.backend-heading .eyebrow { margin-bottom:12px; }
.backend-heading h2 { font-size:clamp(36px,4.2vw,58px); }
.backend-stamp { font-size:10px; text-align:right; line-height:1.8; border:1px solid #a0af8e; padding:10px 14px; transform:rotate(3deg); flex-shrink:0; }
.source-map { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.source-map>div { border-top:2px solid #a5b693; padding:18px 0 12px; }
.source-icon { display:block; font-size:9px; color:var(--muted); margin-bottom:10px; }
.source-map strong { font-size:18px; letter-spacing:-.03em; }
.source-map p { margin:7px 0 10px; color:var(--muted); font-size:11px; }
.source-map a { font-size:10px; text-underline-offset:3px; }
.source-caption { font-size:11px; color:var(--muted); margin:13px 0 22px; max-width:840px; }
.backend-boundary { background:var(--dark); border-radius:10px; padding:25px; color:#eef1e6; border:1px solid #223124; }
.boundary-label { display:flex; justify-content:space-between; gap:16px; color:#b8c8aa; font-size:9px; margin-bottom:24px; }
.service-map { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; }
.service-node { position:relative; text-align:left; display:flex; flex-direction:column; min-width:0; min-height:145px; background:#2d4233; color:#edf2e6; border:1px solid #6c8064; border-radius:6px; padding:16px 13px; }
.service-node:not(:last-child):after { content:'→'; color:#acbf9d; font-size:17px; position:absolute; right:-19px; top:58px; }
.service-node[aria-pressed="true"] { outline:2px solid var(--green); outline-offset:4px; }
.service-node:hover { background:#3d5440; }
.service-number { font-size:9px; color:#b9caaa; margin-bottom:14px; }
.service-node strong { font-size:15px; line-height:1.2; letter-spacing:-.02em; }
.service-node-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px; font-size:9px; margin-top:auto; padding-top:18px; }
.service-time { font-size:8px; }
.service-answer { background:#f6ab85; color:#312e22; border-color:#f6ab85; }
.service-answer:hover { background:#ffbf9c; }
.service-answer .service-number { color:#62503b; }
.answer-here { font:7px var(--mono); margin-top:10px; letter-spacing:.01em; }
.service-node[data-status="running"] { box-shadow:inset 0 0 0 2px var(--green); }
.service-node[data-status="running"] .service-status:before { content:''; display:inline-block; margin-right:5px; width:6px; height:6px; border-radius:50%; background:var(--green); animation:request-pulse .7s ease-in-out infinite alternate; }
.service-node[data-status="done"] .service-status:before { content:'✓ '; }
.service-node[data-status="error"] { border-color:#ffae93; box-shadow:inset 0 0 0 2px #ffae93; }
.service-node[data-status="error"] .service-status:before { content:'! '; color:#ffae93; }
.service-node[data-status="skipped"],.service-node[data-status="cancelled"] { opacity:.6; }
@keyframes request-pulse { from { opacity:.25; } to { opacity:1; } }
.trace-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:24px 0; min-height:34px; }
.trace-bar p { font:11px/1.6 var(--mono); overflow-wrap:anywhere; }
.trace-bar label { display:flex; align-items:center; gap:8px; font-size:10px; white-space:nowrap; cursor:pointer; }
.trace-bar input { accent-color:var(--green); width:15px; height:15px; }
.service-inspector { display:grid; grid-template-columns:.9fr 1.2fr; background:#f0f1e9; color:var(--ink); border-radius:6px; overflow:hidden; }
.service-explainer { padding:27px; }
.service-explainer>.mono { display:inline-block; padding:6px 8px; background:#ead3bd; color:#604128; font-size:8px; }
.service-explainer h3 { font-size:28px; margin-top:16px; letter-spacing:-.04em; }
.service-explainer>p { font-size:13px; margin-top:12px; line-height:1.7; }
.service-explainer dl { margin:23px 0 0; }
.service-explainer dt { font:9px var(--mono); text-transform:uppercase; margin-top:18px; }
.service-explainer dd { margin:8px 0 0; font-size:11px; line-height:1.7; color:var(--muted); }
.service-data { padding:24px; background:#e0e6d6; min-width:0; border-left:1px solid #bdc9af; }
.data-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.data-heading>.mono { font-size:9px; }
.payload-switch { display:flex; gap:3px; background:#c8d2bd; border-radius:4px; padding:3px; }
.payload-switch button { border:0; border-radius:3px; padding:8px 11px; background:transparent; color:var(--ink); font-size:11px; }
.payload-switch button[aria-pressed="true"] { background:var(--dark); color:#f1f3eb; }
.service-data>.micro { font-size:10px; margin:15px 0 12px; min-height:32px; }
.service-data pre { margin:0; padding:17px; background:#f7f8f1; border:1px solid #bec9b2; border-radius:5px; font:11px/1.7 var(--mono); height:280px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; tab-size:2; }
.backend-footnote { color:var(--muted); font-size:10px; margin-top:15px; max-width:850px; }
.answer-delivery { padding-top:65px; }
.delivery-heading .eyebrow { margin-bottom:15px; }
.delivery-heading h2 { font-size:43px; }
.delivery-heading>p:last-child { color:var(--muted); font-size:13px; max-width:470px; margin-top:20px; }
.answer-delivery .answer-result { padding:27px; margin-top:25px; }
@media (max-width:1000px) {
  .service-map { gap:15px; }
  .service-node { padding:14px 10px; }
  .service-node strong { font-size:13px; }
  .service-node:not(:last-child):after { right:-14px; font-size:13px; }
  .service-inspector { grid-template-columns:1fr 1.1fr; }
  .answer-here { font-size:6px; }
}
@media (max-width:760px) {
  .question-workbench { grid-template-columns:1fr; gap:20px; }
  .request-controls { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; padding:24px; }
  .request-controls .eyebrow,.request-controls h2,.request-controls>.micro,.request-actions { grid-column:1/-1; }
  .request-controls label[for="request-pace"] { grid-column:1; grid-row:3; }
  .request-controls label[for="request-fault"] { grid-column:2; grid-row:3; }
  .request-controls select { grid-row:4; }
  .request-controls h2 br { display:none; }
  .request-controls h2 { font-size:28px; }
  .backend-heading { align-items:start; }
  .backend-stamp { font-size:7px; padding:8px; }
  .backend-heading h2 { max-width:300px; }
  .source-map { gap:12px; }
  .source-map strong { font-size:15px; }
  .source-map p,.source-map a { font-size:9px; }
  .backend-boundary { padding:22px; }
  .boundary-label>span:last-child { display:none; }
  .service-map { grid-template-columns:1fr; gap:15px; }
  .service-node { display:grid; grid-template-columns:25px 1fr auto; align-items:center; min-height:66px; gap:10px; padding:15px; }
  .service-number { margin:0; }
  .service-node strong { font-size:15px; }
  .service-node-bottom { margin:0; padding:0; flex-direction:column; align-items:end; gap:5px; }
  .answer-here { grid-column:2; grid-row:2; font-size:8px; margin:0; }
  .service-answer .service-node-bottom { grid-column:3; grid-row:1/3; }
  .service-node:not(:last-child):after { content:'↓'; top:auto; bottom:-17px; left:26px; right:auto; font-size:15px; }
  .trace-bar { flex-direction:column; align-items:start; gap:12px; margin:22px 0; }
  .service-inspector { grid-template-columns:1fr; }
  .service-data { border-left:0; border-top:1px solid #bdc9af; padding:20px; }
  .service-explainer { padding:23px; }
  .service-data pre { height:260px; }
  .backend-workbench { padding-top:45px; }
  .answer-delivery { padding-top:44px; }
}
@media (max-width:420px) {
  .backend-heading { display:block; }
  .backend-stamp { display:none; }
  .source-map { grid-template-columns:1fr; gap:8px; }
  .source-map>div { padding:12px 0; }
  .source-icon { margin-bottom:6px; }
  .source-map strong { font-size:17px; }
  .source-map p { display:inline; font-size:10px; margin-left:8px; }
  .source-map a { display:block; margin-top:8px; font-size:10px; }
  .source-caption { margin-top:8px; }
  .request-controls { display:block; }
  .request-controls label { display:block; }
  .request-controls select { font-size:12px; }
  .backend-boundary { padding:18px; }
  .boundary-label { font-size:8px; }
  .service-node { gap:7px; padding:13px 10px; grid-template-columns:20px 1fr auto; }
  .service-node strong { font-size:13px; }
  .service-data,.service-explainer { padding:18px; }
  .service-data pre { font-size:10px; padding:12px; }
  .data-heading { align-items:start; }
  .data-heading>.mono { padding-top:9px; font-size:8px; }
}
@media (prefers-reduced-motion:reduce) { .service-node[data-status="running"] .service-status:before { animation:none; } }
#service-map { scroll-margin-top:28px; }
#answer-result { scroll-margin-top:25px; }
#snapshot-note { font-weight:bold; margin-top:10px; }
.trace-bar .request-actions { margin:0; flex-shrink:0; gap:15px; }
.trace-bar .plain-button { color:#edf2e6; font-size:10px; white-space:nowrap; }
.trace-answer-link { display:block; color:var(--green); font-size:12px; margin:-6px 0 22px; }
.trace-answer-link[hidden] { display:none; }
/* QA: real comparisons, deliberate defects, and an inspectable test run. */
.experiment-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.qa-card { background:#cbded8; }
.qa-visual { gap:10px; }
.qa-visual span { display:grid; place-items:center; width:51px; height:65px; border:1.5px solid var(--ink); border-radius:5px; background:#f4f7eb; font:36px Georgia,serif; box-shadow:3px 4px 0 #526e5d; transform:rotate(-8deg); }
.qa-visual span:nth-child(2) { background:#f8ac85; transform:rotate(9deg); margin-top:20px; }
.qa-invitation { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:32px; border:1px solid #b6c6aa; border-radius:8px; background:#dfe8d1; margin-top:55px; }
.qa-invitation .eyebrow { font-size:9px; margin-bottom:12px; }
.qa-invitation h2 { font-size:30px; }
.qa-invitation p:last-child { font-size:13px; color:var(--muted); margin-top:12px; max-width:650px; }
.qa-invitation .button { flex-shrink:0; }
.qa-intro h1 { font-size:clamp(62px,7vw,96px); }
.qa-console { background:var(--dark); color:#f0f2e9; border:1px solid #263e2d; border-radius:9px; padding:32px; scroll-margin-top:24px; }
.qa-console-top { display:flex; justify-content:space-between; align-items:center; gap:25px; }
.qa-console-top .eyebrow { font-size:9px; color:#b3c8a7; margin-bottom:12px; }
.qa-console-top h2 { font-size:42px; }
.qa-gate { border:1px dashed #90a085; padding:14px 18px; text-align:center; border-radius:5px; min-width:185px; transform:rotate(2deg); color:#c9d6bb; }
.qa-gate>.mono { display:block; font-size:8px; margin-bottom:7px; }
.qa-gate strong { font:700 17px var(--mono); letter-spacing:-.03em; }
.qa-gate[data-state="pass"] { background:var(--green); border-color:var(--green); color:var(--ink); border-style:solid; }
.qa-gate[data-state="fail"] { background:#ffbba4; border-color:#ffbba4; color:#572417; border-style:solid; }
.qa-gate[data-state="running"] { color:var(--green); border-color:var(--green); }
.qa-gate[data-state="stopped"] { color:#e2d8bc; border-color:#b4a487; }
.qa-controls { display:flex; align-items:flex-end; gap:19px; margin-top:31px; }
.qa-build-choice { min-width:0; flex:1; max-width:480px; }
.qa-build-choice label { display:block; font-size:11px; margin-bottom:8px; }
.qa-build-choice select { width:100%; height:50px; padding:10px 13px; border:1px solid #839776; background:#edf0e4; color:var(--ink); border-radius:5px; font-size:13px; }
.qa-controls .button { min-height:50px; }
.qa-controls .plain-button { color:#dbe3d2; min-height:50px; white-space:nowrap; }
.qa-build-note { font-size:11px; line-height:1.6; color:#bccbb2; margin-top:16px; max-width:780px; min-height:35px; }
.qa-scoreboard { display:grid; grid-template-columns:90px 90px 110px 1fr; gap:24px; align-items:center; border-top:1px solid #52664c; padding-top:24px; margin-top:16px; }
.qa-scoreboard>div>strong { display:block; font-size:45px; font-weight:500; letter-spacing:-.06em; line-height:1; }
.qa-scoreboard>div>.mono { display:block; font-size:8px; color:#afc09f; margin-top:10px; }
#qa-passed { color:var(--green); }
#qa-failed { color:#ffbba4; }
.qa-run-summary { border-left:1px solid #52664c; padding-left:26px; }
#qa-run-status { font-size:13px; line-height:1.6; }
#qa-run-meta { font-size:9px; color:#b2c0a6; margin-top:8px; }
.qa-repair { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #52664c; margin-top:25px; padding-top:22px; }
.qa-repair strong { font-size:17px; }
.qa-repair p { color:#bbcbb0; font-size:12px; margin-top:6px; max-width:550px; }
.qa-repair .button { background:var(--green); color:var(--ink); flex-shrink:0; }
.qa-results-layout { display:grid; grid-template-columns:1fr 1.25fr; gap:28px; align-items:start; margin-top:30px; }
.qa-case-list { min-width:0; }
.qa-list-heading { margin-bottom:19px; display:flex; flex-direction:column; gap:12px; }
.qa-list-heading h3 { font-size:25px; }
.qa-list-heading label { font-size:10px; display:flex; align-items:center; gap:7px; cursor:pointer; }
.qa-list-heading input { accent-color:var(--ink); width:14px; height:14px; margin:0; }
#qa-cases { display:grid; gap:10px; }
.qa-case-row { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; padding:19px 17px; text-align:left; border:1px solid #c4cbb8; border-radius:6px; background:#eceee4; color:var(--ink); }
.qa-case-row[aria-pressed="true"] { outline:2px solid #355d37; outline-offset:2px; }
.qa-case-row:hover { background:#e3e8d9; }
.qa-case-row[data-status="running"] { background:#e5edc8; border-color:#8caa54; }
.qa-case-row[data-status="fail"] { background:#f5dfd2; border-color:#c28b72; }
.qa-row-name { min-width:0; }
.qa-row-name>.mono { display:block; font-size:8px; color:var(--muted); margin-bottom:7px; text-transform:uppercase; }
.qa-row-name strong { display:block; font-size:14px; line-height:1.35; letter-spacing:-.015em; }
.qa-row-verdict { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.qa-row-status,.qa-result-badge { font:9px var(--mono); border-radius:4px; padding:5px 7px; color:#626d58; background:#dfe4d5; }
.qa-row-time { font-size:8px; color:var(--muted); }
.qa-case-row[data-status="pass"] .qa-row-status,.qa-result-badge[data-status="pass"] { color:#244f2a; background:#d8e9c6; }
.qa-case-row[data-status="fail"] .qa-row-status,.qa-result-badge[data-status="fail"] { color:#792b18; background:#f5c0a8; }
.qa-case-row[data-status="running"] .qa-row-status,.qa-result-badge[data-status="running"] { color:#2f4c21; background:#cde77a; }
.qa-inspector { padding:28px; position:sticky; top:24px; min-width:0; scroll-margin-top:24px; }
.qa-inspector-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.qa-inspector-top>.mono { font-size:9px; text-transform:uppercase; }
.qa-inspector h3 { font-size:32px; line-height:1.12; }
#qa-case-description { font-size:13px; color:var(--muted); margin-top:16px; }
.qa-case-summary { font-size:12px; line-height:1.6; padding:15px 0; margin-top:18px; border-top:1px solid var(--line); }
#qa-assertions { display:grid; gap:14px; }
.qa-assertion { background:#eef1e7; border:1px solid #ced8bd; border-radius:5px; overflow:hidden; }
.qa-assertion h4 { font-size:11px; line-height:1.5; margin:0; padding:13px; display:flex; align-items:baseline; gap:10px; border-bottom:1px solid #ced8bd; }
.qa-check-symbol { white-space:nowrap; color:#345d28; font:9px var(--mono); }
.qa-assertion[data-status="fail"] { background:#fbede3; border-color:#dab39d; }
.qa-assertion[data-status="fail"] h4 { border-color:#dab39d; }
.qa-assertion[data-status="fail"] .qa-check-symbol { color:#9c3a1d; }
.qa-comparison { display:grid; grid-template-columns:1fr 1fr; }
.qa-comparison>div { padding:13px; min-width:0; }
.qa-comparison>div+div { border-left:1px solid #d5ddc9; }
.qa-comparison .mono { font-size:8px; color:var(--muted); }
.qa-comparison pre { font:11px/1.65 var(--mono); margin:7px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; max-height:190px; overflow:auto; }
.qa-evidence { margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.qa-evidence summary { cursor:pointer; font-size:11px; font-weight:bold; }
.qa-evidence .micro { font-size:9px; margin-top:12px; }
.qa-evidence pre { font:10px/1.7 var(--mono); max-height:300px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:14px; border:1px solid var(--line); border-radius:4px; background:#e9eddf; }
.qa-back-link { display:none; }
.qa-scope { font-size:10px; margin-top:24px; max-width:850px; }
select:focus-visible,.qa-inspector:focus-visible { outline:3px solid #554ad1; outline-offset:5px; }
@media (max-width:1100px) {
  .experiment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .qa-controls { gap:15px; }
  .qa-controls .button { padding:14px 17px; gap:16px; }
  .qa-scoreboard { grid-template-columns:65px 65px 95px 1fr; gap:20px; }
  .qa-results-layout { grid-template-columns:1fr 1.2fr; gap:22px; }
  .qa-inspector { padding:23px; }
}
@media (max-width:760px) {
  .site-header { width:calc(100% - 40px); min-height:77px; }
  .brand,.brand img { width:170px; }
  .nav-toggle { display:flex; align-items:center; gap:10px; background:transparent; border:1px solid #abb49e; border-radius:5px; padding:8px 11px; font-size:11px; min-height:40px; }
  .nav-toggle span { font-size:17px; }
  #site-nav { display:none; position:absolute; left:0; right:0; top:76px; background:var(--paper); border:1px solid var(--line); border-top:0; box-shadow:0 14px 24px #2028201a; padding:15px; border-radius:0 0 7px 7px; }
  #site-nav.open { display:grid; gap:4px; }
  #site-nav a { font-size:14px; padding:12px; }
  #site-nav a[aria-current="page"] { box-shadow:none; background:#e1e7d5; border-radius:4px; }
  #site-nav .nav-contact { margin-top:7px; text-align:center; }
  .qa-console { padding:25px; }
  .qa-console-top h2 { font-size:35px; }
  .qa-gate { min-width:150px; padding:12px; }
  .qa-gate strong { font-size:14px; }
  .qa-controls { flex-wrap:wrap; }
  .qa-build-choice { flex-basis:100%; max-width:none; }
  .qa-scoreboard { grid-template-columns:repeat(3,1fr); gap:22px; }
  .qa-run-summary { grid-column:1/-1; border-left:0; border-top:1px solid #52664c; padding:17px 0 0; }
  .qa-results-layout { grid-template-columns:1fr; gap:30px; }
  .qa-inspector { position:static; }
  .qa-repair { flex-direction:column; align-items:flex-start; }
  .qa-repair .button { width:100%; }
  .qa-back-link { display:inline-block; margin-top:22px; font-size:11px; }
  .qa-invitation { flex-direction:column; align-items:flex-start; padding:25px; gap:22px; }
}
@media (max-width:680px) { .experiment-grid { grid-template-columns:1fr; } }
@media (max-width:420px) {
  .qa-console { padding:23px 19px; }
  .qa-console-top { display:block; }
  .qa-console-top h2 { font-size:36px; }
  .qa-gate { display:inline-block; margin-top:22px; transform:none; text-align:left; padding:10px 14px; }
  .qa-controls { gap:10px; margin-top:24px; }
  .qa-controls .button { flex:1; padding-inline:12px; font-size:12px; gap:10px; }
  .qa-controls .plain-button { font-size:10px; padding:10px; }
  .qa-scoreboard { gap:15px; }
  .qa-scoreboard>div>strong { font-size:37px; }
  .qa-scoreboard>div>.mono { font-size:7px; }
  .qa-inspector { padding:21px 17px; }
  .qa-inspector h3 { font-size:29px; }
  .qa-case-row { padding:16px 13px; }
  .qa-row-name strong { font-size:13px; }
  .qa-row-name>.mono { font-size:7px; }
  .qa-comparison { grid-template-columns:1fr; }
  .qa-comparison>div+div { border-left:0; border-top:1px solid #d5ddc9; }
}
/* Product lifecycle and the lessons carried by the working examples. */
.lifecycle-section { padding-block:70px 10px; }
.lifecycle-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.lifecycle-grid>a { position:relative; display:flex; flex-direction:column; text-decoration:none; padding:22px 19px; border-top:2px solid #879c6e; background:#e7ebde; border-radius:0 0 6px 6px; }
.lifecycle-grid>a:first-child { background:#e0eac9; border-color:#426338; }
.lifecycle-grid .mono { font-size:9px; color:#526444; }
.lifecycle-grid h3 { font-size:25px; margin-top:25px; line-height:1.15; }
.lifecycle-grid p { font-size:13px; line-height:1.65; color:var(--muted); margin-top:14px; }
.lifecycle-grid strong { display:block; font-size:11px; padding-top:23px; margin-top:auto; }
.lifecycle-grid>a:hover { background:#d8e2ca; }
.quality-section { padding-top:75px; }
.quality-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.quality-grid article { padding:25px; border:1px solid #c5cfb7; border-radius:7px; background:#e9edde; display:flex; flex-direction:column; }
.quality-grid .mono { font-size:9px; color:#556b45; }
.quality-grid h3 { font-size:25px; line-height:1.12; margin-top:22px; }
.quality-grid p { font-size:13px; color:var(--muted); margin-top:17px; }
.quality-grid a { font-size:11px; margin-top:auto; padding-top:24px; }
.quality-footnote { font-size:12px; color:var(--muted); max-width:850px; margin-top:24px; }
.iteration-section { padding:60px 0 10px; }
.iteration-section h2 { font-size:48px; }
.iteration-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:32px 0; }
.iteration-steps>div { border-top:1px solid #aaba98; padding-top:18px; }
.iteration-steps .mono { font-size:9px; color:#596b4c; }
.iteration-steps h3 { font-size:23px; line-height:1.15; margin-top:17px; }
.iteration-steps p { font-size:13px; margin-top:14px; color:var(--muted); }
.lab-shortcuts { display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:25px; }
.lab-shortcuts a { font-size:12px; font-weight:bold; }
@media (max-width:1100px) { .lifecycle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:850px) { .quality-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) {
  .lifecycle-section { padding-top:45px; }
  .lifecycle-grid,.quality-grid,.iteration-steps { grid-template-columns:1fr; gap:18px; }
  .lifecycle-grid h3 { font-size:28px; margin-top:18px; }
  .lifecycle-grid p { font-size:14px; }
  .lifecycle-grid strong { padding-top:18px; }
  .quality-section { padding-top:48px; }
  .quality-grid article { padding:24px; }
  .quality-grid h3 { font-size:28px; }
  .quality-grid p { font-size:14px; }
  .iteration-section { padding-top:45px; }
  .iteration-section h2 { font-size:40px; }
  .iteration-steps h3 { font-size:26px; }
  .iteration-steps p { font-size:14px; }
}
/* Product vision and definition: the contract behind the demo. */
.product-intro h1 { font-size:clamp(66px,7.3vw,100px); }
.lifecycle-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-block:0 60px; }
.lifecycle-nav>a { display:block; text-decoration:none; padding:19px; border-top:2px solid #9eb181; background:#e4e9d9; border-radius:0 0 5px 5px; font-size:13px; }
.lifecycle-nav .mono { display:block; font-size:9px; margin-bottom:9px; color:#526642; }
.lifecycle-nav strong { display:block; font-size:17px; }
.lifecycle-nav p { font-size:11px; margin-top:9px; color:var(--muted); }
.lifecycle-nav>a:hover { background:#d9e3cb; }
.product-section { padding-bottom:60px; scroll-margin-top:35px; }
.product-section>.eyebrow { margin-bottom:17px; }
.product-section>h2 { margin-bottom:25px; max-width:900px; }
.product-section>p:not(.eyebrow):not(.product-note) { font-size:17px; max-width:850px; color:var(--muted); margin:20px 0 28px; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:28px 0; }
.product-grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.product-card { padding:28px; border:1px solid #c8d0be; border-radius:7px; background:#ebeee4; }
.product-card>.mono { font-size:9px; color:#556b45; display:block; margin-bottom:18px; }
.product-card h3 { font-size:27px; line-height:1.15; }
.product-card p,.product-card li { font-size:14px; line-height:1.75; color:var(--muted); }
.product-card p { margin-top:17px; }
.product-card ul { margin:16px 0 0; }
.product-card li { margin:7px 0; }
.product-card a { font-size:12px; display:inline-block; margin-top:16px; }
.product-note { padding:22px 25px; background:#e0e8d2; border-left:3px solid #799456; border-radius:0 5px 5px 0; color:#46583b; font-size:13px; line-height:1.7; margin:25px 0; }
.product-note p { margin-top:8px; }
.product-compare,.product-criteria { width:100%; margin:30px 0; overflow:auto; border:1px solid #bfcbb0; border-radius:7px; }
.product-compare table,.product-criteria table,table.product-criteria { width:100%; border-collapse:collapse; text-align:left; font-size:13px; line-height:1.65; }
.product-compare caption,.product-criteria caption { text-align:left; font-weight:bold; padding:17px; font-size:15px; background:#e2e8d5; }
.product-compare th,.product-criteria th { background:#e2e8d5; padding:17px; vertical-align:top; font-size:12px; }
.product-compare td,.product-criteria td { padding:18px; border-top:1px solid #c4cdb9; vertical-align:top; background:#f6f7ef; }
.product-compare td+td,.product-criteria td+td { border-left:1px solid #d5dccb; }
.product-loop { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; margin:28px 0; padding:0; list-style:none; counter-reset:product-step; }
.product-loop>li { counter-increment:product-step; border-top:2px solid #aaba97; padding:20px 0; }
.product-loop>li:before { content:'0' counter(product-step); display:block; font:11px var(--mono); color:#62764d; margin-bottom:18px; }
.product-loop h3 { font-size:25px; line-height:1.15; }
.product-loop p { font-size:14px; color:var(--muted); margin-top:15px; }
@media (max-width:850px) { .lifecycle-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .product-grid-three { grid-template-columns:1fr; } }
@media (max-width:680px) {
  .product-section { padding-bottom:40px; }
  .product-grid,.product-loop { grid-template-columns:1fr; gap:18px; }
  .product-section>p:not(.eyebrow):not(.product-note) { font-size:16px; }
  .product-card { padding:24px; }
  .product-note { padding:20px; }
  .product-compare table,.product-criteria table,table.product-criteria { min-width:580px; }
  .lifecycle-nav { margin-bottom:45px; gap:10px; }
  .lifecycle-nav>a { padding:16px; }
  .lifecycle-nav strong { font-size:15px; }
}
.lifecycle-nav>a>span:last-child { display:block; font-size:11px; color:var(--muted); margin-top:9px; }
.product-loop>article { border-top:2px solid #aaba97; padding:20px 0; }
.product-loop>article>.mono { display:block; font-size:9px; color:#5d744a; margin-bottom:18px; }
.product-compare table.product-criteria { margin:0; border:0; border-radius:0; }
.product-compare:focus-visible { outline:3px solid #554ad1; outline-offset:5px; }