/* IssueGate presentation system. Layout by purpose; borders mark structure. */ :root{color-scheme:dark;--bg:#111315;--surface:#191c1f;--surface-raised:#22262a;--line:#30353a;--line-soft:#25292d;--text:#f0f1f2;--muted:#a9afb7;--accent:#b3b6ff;--success:#9bd2bb;--warning:#dfbc81;--danger:#f19d9d;--mono:Consolas,'SFMono-Regular',monospace;--sans:'Segoe UI','Microsoft YaHei UI','Microsoft YaHei',Arial,sans-serif} *{box-sizing:border-box}html{scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}body,button,input,select,textarea{font-family:var(--sans)}h1,h2,h3,h4,p,ul,ol{margin:0}h1,h2,h3,h4{font-weight:600;line-height:1.4}h1{font-size:44px;letter-spacing:-1.5px}h2{font-size:28px;letter-spacing:-.6px}h3{font-size:19px}p{color:var(--muted)}a{color:inherit;text-decoration:none}button,input,select,textarea{font-size:15px}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a,button{transition:color .16s,background-color .16s,border-color .16s}button:disabled{cursor:wait;opacity:.5}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.mono,code{font-family:var(--mono);font-size:.88em}small{font-size:13px}.meta,.note,.live-hint{color:var(--muted);font-size:13px;line-height:1.7}.small-label,.page-index,.eyebrow{display:block;color:var(--muted);font-size:12px;letter-spacing:.06em}.icon-arrow{display:inline-block;position:relative;width:16px;height:10px;margin-left:8px;vertical-align:middle}.icon-arrow:before{content:'';position:absolute;width:14px;height:1px;background:currentColor;top:4px;left:0}.icon-arrow:after{content:'';position:absolute;width:6px;height:6px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg);right:2px;top:1px}.icon-external{display:inline-block;width:9px;height:9px;border-right:1px solid;border-top:1px solid;position:relative;margin-left:5px;vertical-align:middle}.icon-external:after{content:'';position:absolute;width:11px;height:1px;background:currentColor;transform:rotate(-45deg);top:4px;right:-2px}.logo-symbol{display:inline-block;width:18px;height:19px;border-left:3px solid var(--text);border-right:3px solid var(--text);position:relative}.logo-symbol:before{content:'';position:absolute;left:3px;top:7px;width:7px;height:3px;background:var(--accent)} .nav{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line-soft)}.nav-inner{max-width:1392px;padding:0 48px;margin:auto;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:30px}.logo{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:650;letter-spacing:-.6px}.nav-links{display:flex;gap:32px;align-items:center;align-self:stretch}.nav-links a{font-size:14px;color:var(--muted);display:flex;align-items:center;position:relative;white-space:nowrap}.nav-links a:hover,.nav-links a.active{color:var(--text)}.nav-links a.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--text)}.section{display:none;max-width:1392px;padding:48px 48px 80px;margin:auto}.section.active{display:block}.page-head{margin-bottom:36px}.page-index{margin-bottom:14px}.page-head h1{max-width:960px}.page-sub{font-size:16px;max-width:760px;margin-top:16px;line-height:1.9}.section-block{margin-top:80px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.panel-heading h2{font-size:23px}.panel-heading .meta{display:block;margin-top:4px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 19px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--text);font-weight:550;line-height:1.4}.btn:hover{background:var(--surface-raised);border-color:#687079}.btn.primary{background:#dfe0ff;border-color:#dfe0ff;color:#191c2d}.btn.primary:hover{background:#f0f0ff;border-color:#f0f0ff}.btn.compact{min-height:36px;font-size:13px;padding:8px 13px}.text-link,.text-btn{font-size:14px;color:var(--text)}.text-link:hover,.text-btn:hover{color:var(--accent)}.text-btn{border:0;background:transparent;padding:0;text-decoration:underline;text-underline-offset:4px}.badge{display:inline-block;font:11px/1.5 var(--mono);padding:4px 7px;border:1px solid var(--line);border-radius:3px;color:var(--muted)}.footer{max-width:1392px;margin:auto;padding:25px 48px 36px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:30px}.footer p{font-size:12px}.foot-note{max-width:530px;text-align:right} /* Product overview */ #home{padding-top:68px}.home-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end;margin-bottom:46px}.product-category{font-size:14px;color:var(--muted);margin-bottom:18px}.hero-title h1{font-size:clamp(42px,3.8vw,56px);line-height:1.32;letter-spacing:-1.9px}.hero-context{padding-bottom:4px}.hero-context>p{font-size:17px;line-height:1.9;color:#c5c9cf}.cta{display:flex;align-items:center;gap:25px;margin-top:24px}.hero-footnote{display:block;color:var(--muted);font-size:12px;margin-top:17px}.product-window{background:var(--surface);border:1px solid var(--line);border-radius:7px;overflow:hidden}.window-bar{display:flex;align-items:center;gap:28px;padding:16px 25px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.window-brand{display:flex;align-items:center;gap:9px;color:var(--text);font-size:14px;font-weight:600}.window-brand .logo-symbol{width:13px;height:14px;border-width:2px}.window-brand .logo-symbol:before{left:2px;top:5px;width:5px;height:2px}.window-label{font:10px var(--mono);letter-spacing:.08em;margin-left:auto}.flow{display:grid;grid-template-columns:1fr 3fr 1.2fr;padding:25px 28px 28px;border-bottom:1px solid var(--line);gap:20px}.journey-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.journey-stage,.journey-input,.journey-output{position:relative;display:flex;flex-direction:column;gap:6px}.flow-number{font:11px var(--mono);color:#88919b;position:relative;padding-bottom:17px}.flow-number:after{content:'';position:absolute;left:0;right:-20px;bottom:5px;height:1px;background:#46505a}.journey-output .flow-number:after{right:0;background:var(--success)}.flow strong{font-size:14px;font-weight:550}.flow strong+span{font-size:11px;color:var(--muted)}.decision-preview{display:grid;grid-template-columns:1fr 1.28fr}.preview-source{padding:32px 36px;border-right:1px solid var(--line)}.preview-repo{display:block;font:12px var(--mono);margin-top:22px;color:var(--muted)}.preview-repo b{font-weight:400;margin-left:9px}.preview-source h2{font-size:22px;margin-top:10px;line-height:1.4;letter-spacing:-.4px}.preview-source>p{font-size:14px;margin:15px 0 24px;line-height:1.8}.preview-decision{padding:32px 36px}.preview-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--warning)}.preview-status code{margin-left:auto;color:var(--muted)}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--warning)}.preview-decision h3{font-size:27px;margin:20px 0 10px;letter-spacing:-.6px}.preview-decision>p{font-size:15px;max-width:480px}.preview-evidence{display:flex;gap:25px;border-block:1px solid var(--line);padding:15px 0;margin:24px 0 18px;font-size:12px;color:var(--muted)}.preview-evidence b{color:var(--text);font-weight:500}.preview-caveat{display:flex;gap:18px;align-items:baseline;font-size:12px}.preview-caveat>span{white-space:nowrap;color:var(--warning)}.preview-caveat a{white-space:nowrap;text-decoration:underline;text-underline-offset:3px}.proof-strip{display:grid;grid-template-columns:1.1fr .8fr 1.15fr .85fr;gap:30px;padding:35px 0 27px;border-bottom:1px solid var(--line-soft)}.proof-strip>div:not(:first-child){padding-left:24px;border-left:1px solid var(--line-soft)}.proof-strip strong{display:block;font-size:29px;font-weight:450;line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:-.8px}.proof-strip strong small{font:12px var(--mono);color:var(--muted);margin-left:6px;letter-spacing:0}.proof-strip span{display:block;font-size:12px;color:var(--muted);margin-top:8px}.proof-caption{font-size:15px}.proof-caption a{font-size:12px;color:var(--muted)}.safety-strip{display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:12px;color:var(--success)}.safety-strip>span:first-child{color:var(--muted)}.why-intro{display:grid;grid-template-columns:1fr 2.2fr;gap:70px;margin-bottom:40px}.why-intro h2{font-size:23px}.why-lead{font-size:28px;line-height:1.65;letter-spacing:-.5px;color:var(--text)}.why-table-head,.why-scenario{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:55px}.why-table-head{padding:13px 0;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}.why-scenario{padding:28px 0;border-bottom:1px solid var(--line-soft);align-items:center}.why-number{font:11px var(--mono);color:var(--muted)}.why-scenario h3{font-size:19px;margin:7px 0}.why-scenario p{font-size:15px}.why-scenario>div:last-child p{color:#d0d6dc}.mobile-label{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-bottom:5px}.why-takeaway{display:flex;justify-content:space-between;gap:40px;align-items:center;margin-top:32px}.why-takeaway>strong{font-size:18px;font-weight:500}.why-path{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted);white-space:nowrap}.why-path i{width:18px;height:1px;background:#68717b;position:relative}.why-path i:after{content:'';position:absolute;right:0;top:-2px;width:4px;height:4px;border-right:1px solid #68717b;border-top:1px solid #68717b;transform:rotate(45deg)} /* Workspace */ #demo{max-width:1512px}.workspace-head{display:flex;gap:45px;justify-content:space-between;align-items:flex-start}.workspace-head h1{font-size:36px;letter-spacing:-1px;margin-top:8px}.runtime{flex:0 0 auto;padding-top:9px;text-align:right}.backend-status{font-size:12px;color:var(--muted)}.backend-status.ok{color:var(--success)}.backend-status.off{color:var(--warning)}.runtime-note{font-size:11px;color:var(--muted)}.mode-toggle{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-bottom:26px}.mode-btn{border:0;background:none;color:var(--muted);padding:12px 0;font-size:15px;position:relative}.mode-btn span{font-size:11px;margin-left:5px}.mode-btn.active{color:var(--text)}.mode-btn.active:after{content:'';height:2px;position:absolute;left:0;right:0;bottom:-1px;background:var(--accent)}.live-input{padding:26px 28px;background:var(--surface);border:1px solid var(--line);border-radius:6px}.input-row{display:grid;grid-template-columns:minmax(0,1fr) 185px 155px;gap:16px;align-items:end}.input-row label{display:block;font-size:13px;color:#c5cbd2;margin-bottom:8px}input,select,textarea{background:var(--bg);border:1px solid #485059;border-radius:4px;color:var(--text);min-width:0}input{height:48px;padding:0 14px;width:100%;font-size:15px}input::placeholder{color:#868e97}select{height:42px;padding:0 10px;max-width:100%}.input-row select{height:48px;width:100%;font-size:13px}.input-row .btn{height:48px}.input-meta{display:flex;justify-content:space-between;gap:20px;margin-top:15px}.input-meta .text-btn{font-size:12px}.input-meta .live-hint .text-btn{margin-left:14px}#model-hint{font-size:12px;margin-top:6px}.explain-flow{margin:32px 0 26px}.explain-flow-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:16px}.explain-flow-head .eyebrow{display:none}.explain-flow-head h2{font-size:19px}.flow-state{font-size:12px;color:var(--muted)}.explain-steps{display:flex;align-items:stretch}.explain-step{flex:1;min-width:0;padding:14px 0;display:flex;gap:12px}.explain-index{font:11px var(--mono);color:var(--muted);padding-top:5px}.explain-step strong{font-size:14px;font-weight:500}.explain-step p{font-size:12px;margin-top:6px;max-width:180px}.explain-connector{width:25px;flex:0 0 25px;height:1px;background:var(--line);margin:25px 13px 0 0}.explain-step.is-complete .explain-index{color:var(--success)}.status-panel{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--line-soft);padding:22px 0;margin-top:10px}.status-panel strong{font-size:15px;font-weight:500}.status-panel p{font-size:13px;margin-top:4px}.status-panel.error{border-color:var(--danger)}.status-panel.error strong{color:var(--danger)}.status-actions{display:flex;gap:10px;flex-shrink:0}.empty-steps{display:none}.loading-panel{margin-top:30px;border-top:1px solid var(--line);padding:25px 0}.loading-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:25px 0}.loading-timeline .tl-item{display:block}.loading-timeline .tl-number{display:block;margin-bottom:12px}.loading-timeline .stage-state{display:block;margin-left:0}.replay-banner{font-size:13px;color:var(--warning);padding:12px 0;border-bottom:1px solid var(--line-soft)}.case-selector{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.case-chip{border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--muted);padding:8px 13px;font-size:13px}.case-chip.active{color:var(--text);background:var(--surface-raised);border-color:#5c636b}.replay-story{border-bottom:1px solid var(--line);margin-bottom:30px;padding:8px 0 28px}.story-head{display:flex;align-items:center;justify-content:space-between;gap:30px}.story-head h2{font-size:23px;margin:8px 0}.story-situation{font-size:14px}.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 50px;margin-top:25px}.story-grid>div:first-child{display:none}.story-grid>div:last-child{display:none}.story-grid p{font-size:14px;margin-top:5px}.story-result{display:flex;align-items:center;gap:20px;margin-top:20px}.story-result strong{font-weight:500;font-size:15px}.route-en{font:12px/1.7 var(--mono);color:var(--muted)} /* Response, action, sources, progressively disclosed technical records */ #analysis-results{margin-top:28px;scroll-margin-top:100px}.result-summary{border-left:3px solid var(--warning);background:var(--surface);padding:28px 32px}.result-summary[data-route=ready_for_coding]{border-color:var(--success)}.summary-top{display:flex;justify-content:space-between;gap:18px;margin-bottom:20px}.summary-main{display:flex;justify-content:space-between;align-items:center;gap:24px}.result-route{font-size:30px;letter-spacing:-.5px}.summary-main .route-en{display:block;margin-top:7px}.admission{font-size:12px;padding:6px 9px;border:1px solid var(--line);border-radius:3px;white-space:nowrap;color:var(--warning)}.admission.approved{color:var(--success)}.result-explanation{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;border-top:1px solid var(--line);padding-top:20px;margin-top:22px}.result-explanation p{font-size:15px;line-height:1.85;color:#c8cdd3;margin-top:6px}.missing-info{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.missing-info ul{padding-left:20px;margin-top:8px;font-size:15px;color:#d4d8dd}.missing-info li+li{margin-top:6px}.result-next-action{margin-top:24px;display:flex;gap:24px;align-items:baseline}.result-next-action .meta{flex-shrink:0}.result-next-action strong{font-size:16px;font-weight:500}.summary-facts{display:flex;gap:30px;margin-top:24px;border-top:1px solid var(--line);padding-top:15px;font-size:12px;color:var(--muted)}.summary-facts b{font-weight:500;color:var(--text);margin-left:5px}.result-grid{margin-top:32px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(330px,1fr);gap:35px 45px}.reply-card{grid-column:1;min-width:0}.evidence-card{grid-column:1/-1;padding-top:28px;border-top:1px solid var(--line);min-width:0}.result-support{grid-column:2;grid-row:1}.guardrail-card,.sufficiency-card,.run-card{min-width:0}.result-support>details{border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:20px}.result-support summary{font-size:16px;font-weight:500;cursor:pointer}.result-support summary .meta{display:block;font-size:12px;padding-left:17px;font-weight:400}.result-support details[open] summary{margin-bottom:20px}.result-support .panel-heading{display:none}.reply-language select{height:32px;font-size:12px}.reply-card textarea{width:100%;resize:vertical;min-height:270px;padding:18px;line-height:1.85;font-size:14px;background:var(--surface);border-color:var(--line)}.reply-actions{display:flex;align-items:center;gap:16px;margin:14px 0 9px}.evidence-tabs{display:flex;flex-wrap:wrap;gap:5px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:0}.ev-tab{background:transparent;border:0;border-radius:3px;padding:7px 12px;color:var(--muted);font-size:13px}.ev-tab span{font:11px var(--mono);margin-left:6px}.ev-tab.active{background:var(--surface-raised);color:var(--text)}#evidence-panel{max-height:620px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#505962 transparent}.ev-item{position:relative;padding:24px 0;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:24px}.ev-head{grid-column:1;grid-row:1/5;padding-top:2px}.ev-kind{font-size:12px;color:var(--muted)}.ev-title{font-size:16px;overflow-wrap:anywhere}.ev-source{font:12px/1.8 var(--mono);color:var(--muted);overflow-wrap:anywhere;margin-top:6px}.ev-source a:hover{color:var(--accent)}.evidence-why{font-size:13px;margin-top:10px}.evidence-why strong{font-weight:400;margin-right:8px;color:var(--text)}.evidence-detail{margin-top:12px;grid-column:2}.evidence-detail summary{cursor:pointer;display:flex;justify-content:space-between;gap:25px;font-size:13px;color:var(--muted);align-items:baseline}.ev-excerpt{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:80%;font-family:var(--mono);font-size:12px}.expand-label{font-size:12px;white-space:nowrap;color:var(--text)}.evidence-detail:not([open]) .when-open,.evidence-detail[open] .when-closed{display:none}.evidence-detail[open] .ev-excerpt{display:none}.ev-full,pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.85 var(--mono);background:var(--bg);padding:18px;margin-top:15px;color:#c6cdd4;max-height:360px;overflow:auto}.ev-id{display:block;font:11px var(--mono);margin-top:12px;color:var(--muted)}.empty-evidence{padding:30px 0}.check-item{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13px}.ok{color:var(--success)}.warn,.bad-text{color:var(--warning)}.unknown{color:var(--muted)}.sufficiency-card .note,.guardrail-card .note{font-size:12px;margin-top:12px}.gate-flow{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:16px;gap:12px;margin-bottom:20px}.gate-flow>span{display:none}.gate-flow strong{display:block;font-size:13px;font-weight:500}.admission-note{font-size:13px;color:var(--warning);margin-top:18px}.gate-warnings{margin-top:15px;font-size:12px}.gate-warnings ul{padding-left:18px}.tl-item{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid var(--line-soft)}.tl-number{font:11px var(--mono);color:var(--muted);padding-top:6px}.tl-title{font-size:14px}.stage-state{font-size:11px;margin-left:12px;color:var(--muted)}.tl-item.complete .stage-state{color:var(--success)}.tl-item.blocked .stage-state{color:var(--warning)}.tl-detail{font-size:12px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}.run-details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px}.run-details>summary{cursor:pointer;font-size:16px}.run-details>summary .meta{margin-left:10px}.run-details[open]>summary{margin-bottom:25px}.run-detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:45px}.run-card .panel-heading h2{font-size:19px}.issue-title{font-size:18px;margin:12px 0}.issue-body{font-size:13px}.issue-body p{white-space:pre-wrap;margin-top:15px}.detail-grid{display:grid;grid-template-columns:140px 1fr;font-size:13px;margin:20px 0}.detail-grid dt,.detail-grid dd{padding:8px 0;border-bottom:1px solid var(--line-soft);margin:0;overflow-wrap:anywhere}.detail-grid dt{color:var(--muted)}.technical-details{font-size:13px}.technical-details summary{cursor:pointer}.gate-warnings li{overflow-wrap:anywhere} /* Evaluation: measurements and calibration */ .eval-caption{display:flex;justify-content:space-between;gap:25px;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.evaluation-overview{display:grid;grid-template-columns:1fr 1.5fr 1fr;padding:32px 0;border-bottom:1px solid var(--line)}.evaluation-overview>div{display:flex;flex-direction:column;padding-left:40px;border-left:1px solid var(--line)}.evaluation-overview>div:first-child{padding-left:0;border:0}.evaluation-overview span{font-size:13px;color:#ccd1d6}.evaluation-overview strong{font-size:42px;line-height:1.3;font-weight:450;margin:12px 0;letter-spacing:-1px;font-variant-numeric:tabular-nums}.evaluation-overview small{color:var(--muted);font-size:12px}.evaluation-overview strong small{font:15px var(--mono);letter-spacing:0;margin-left:10px}.eval-split{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;margin:48px 0}.eval-split h2{font-size:23px}.eval-split .panel-heading{display:block}.eval-split .panel-heading>.meta{margin-top:8px}.route{display:grid;grid-template-columns:1fr auto;padding:18px 0;gap:14px}.route>div:first-child{display:flex;align-items:baseline;gap:15px}.route strong{font-size:15px;font-weight:500}.route code{color:var(--muted);font-size:12px}.route-val{font:16px var(--mono)}.bar{grid-column:1/-1;height:5px;background:var(--surface-raised)}.bar-fill{height:100%;background:var(--warning)}.route-needs-info{width:92.857%;background:var(--success)}.route-ready{width:0}.route-docs{width:33.333%}.eval-route-section>.note{margin-top:14px}.safety-section{border-left:1px solid var(--line);padding-left:45px}.safety-section .panel-heading{display:flex;align-items:baseline;margin-bottom:13px}.safety-section>p{font-size:14px}.verified-label{font-size:12px;color:var(--success)}.safety-ledger{list-style:none;padding:0;margin:18px 0}.safety-ledger li{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14px}.safety-ledger strong{font:18px var(--mono);color:var(--success)}.safety-ledger strong small{font:11px var(--sans);color:var(--muted)}.calibration{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;padding:35px 40px;background:var(--surface);border-top:1px solid #6b6251}.calibration h2{margin:10px 0 18px}.calibration p{font-size:15px}.calibration-findings>div{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}.calibration-findings span{display:block;color:var(--muted);font-size:12px}.calibration-findings strong{display:block;font-size:18px;font-weight:500;margin:4px 0}.calibration-findings p{font-size:13px}.calibration-findings .next-priority{border:0;padding:0;margin:0}.next-priority strong{color:var(--warning)}.next-priority code{font-size:12px;color:var(--muted)}.eval-method{display:grid;grid-template-columns:1fr 1.7fr;gap:80px;margin-top:64px}.eval-method h2{font-size:24px;margin-bottom:15px}.eval-method p{font-size:15px}.eval-method dl{margin:0;display:grid;grid-template-columns:100px 1fr;gap:0 30px}.eval-method dt,.eval-method dd{margin:0;font-size:14px;border-bottom:1px solid var(--line-soft);padding:16px 0}.eval-method dd{color:var(--muted)}.page-next{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:25px;margin-top:60px;font-size:19px}.page-next>span{font-size:14px;color:var(--muted)} /* Responsive: maintain hierarchy, change arrangement rather than shrink text. */ @media(min-width:1700px){.section{padding-top:62px}#home{padding-top:80px}.home-hero{gap:90px;margin-bottom:52px}.hero-title h1{font-size:56px}.preview-source,.preview-decision{padding-block:38px}} @media(max-width:1150px){.nav-inner,.section{padding-inline:32px}.nav-links{gap:24px}.home-hero{gap:40px}.hero-title h1{font-size:44px}.hero-context>p{font-size:15px}.cta{gap:18px}.cta .btn{font-size:13px}.flow{padding-inline:20px;gap:14px}.journey-stages{gap:14px}.flow strong{font-size:12px}.flow-number:after{right:-14px}.preview-source,.preview-decision{padding:28px}.proof-strip{gap:20px}.proof-strip>div:not(:first-child){padding-left:18px}.proof-strip strong{font-size:25px}.why-intro{gap:40px}.why-lead{font-size:25px}.why-scenario,.why-table-head{gap:30px}.why-takeaway{display:block}.why-path{margin-top:20px}.workspace-head{gap:25px}.workspace-head h1{font-size:32px}.explain-step{gap:7px}.explain-connector{width:12px;flex-basis:12px;margin-right:8px}.explain-step strong{font-size:13px}.explain-step p{font-size:12px}.result-grid{grid-template-columns:minmax(0,1.1fr) minmax(300px,1fr);gap:30px}.eval-split{gap:35px}.safety-section{padding-left:30px}.calibration{gap:40px;padding:30px}.eval-method{gap:50px}} @media(max-width:900px){.nav-inner{gap:20px}.nav-links{gap:18px}.nav-links a{font-size:13px}.home-hero{grid-template-columns:1fr;gap:25px}.hero-context>p br{display:none}.hero-context>p{max-width:650px;font-size:16px}.hero-title h1{font-size:46px}.cta{margin-top:20px}.hero-footnote{display:none}.decision-preview{grid-template-columns:1fr 1.1fr}.preview-source,.preview-decision{padding:24px}.preview-source h2{font-size:19px}.preview-decision h3{font-size:23px}.preview-evidence{gap:14px;flex-wrap:wrap}.proof-strip{grid-template-columns:1fr 1fr;gap:25px}.proof-strip>div:not(:first-child){border:0;padding-left:0}.proof-strip>div:nth-child(even){border-left:1px solid var(--line);padding-left:30px}.safety-strip{flex-wrap:wrap;justify-content:flex-start;gap:12px 25px}.why-intro{grid-template-columns:1fr;gap:25px}.why-scenario,.why-table-head{gap:25px}.why-scenario p{font-size:14px}.workspace-head{display:block}.runtime{display:flex;gap:16px;text-align:left;margin-top:18px}.result-grid{grid-template-columns:1fr}.result-support{grid-column:1;grid-row:auto;display:grid;grid-template-columns:1fr 1fr;gap:30px}.result-grid{display:flex;flex-direction:column}.result-support{order:1}.reply-card{order:2}.evidence-card{order:3}.run-details{order:4}.reply-card{grid-row:1}.result-explanation{gap:25px}.run-detail-layout{grid-template-columns:1fr;gap:30px}.eval-split{grid-template-columns:1fr;gap:36px}.safety-section{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}.safety-ledger{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}.calibration{grid-template-columns:1fr;gap:30px}.eval-method{grid-template-columns:1fr;gap:25px}.footer{padding-inline:32px;display:block}.foot-note{text-align:left;margin-top:10px}.loading-timeline{grid-template-columns:1fr}.loading-timeline .tl-item{display:flex}} @media(max-width:620px){h1{font-size:34px;letter-spacing:-.8px}h2{font-size:25px}.nav-inner{padding:0 20px;min-height:102px;display:block}.logo{height:52px;font-size:19px}.nav-links{height:50px;gap:0;justify-content:space-between;overflow-x:auto}.nav-links a{font-size:12px;min-height:44px}.nav-links .gh{display:none}.section{padding:30px 20px 55px}#home{padding-top:34px}.page-head{margin-bottom:27px}.page-sub{font-size:15px;line-height:1.85}.product-category{font-size:12px;margin-bottom:14px}.hero-title h1{font-size:37px;line-height:1.4;letter-spacing:-1.2px}.home-hero{gap:20px;margin-bottom:30px}.hero-context>p{font-size:15px}.cta{gap:17px;flex-wrap:wrap}.cta .btn{font-size:13px;padding-inline:14px}.text-link{font-size:13px}.window-bar{padding:13px 16px;gap:17px;font-size:11px}.window-label{display:none}.flow{display:block;padding:16px}.journey-stages{display:block}.journey-input,.journey-stage,.journey-output{display:grid;grid-template-columns:27px 1fr;gap:2px 10px;padding:10px 0}.flow-number{grid-row:1/3;padding:4px 0 0}.flow-number:after{left:8px;right:auto;width:1px;top:24px;bottom:-7px;height:auto}.journey-output .flow-number:after{display:none}.flow strong{font-size:13px}.flow strong+span{font-size:11px}.decision-preview{grid-template-columns:1fr}.preview-source{border-right:0;border-bottom:1px solid var(--line);padding:22px}.preview-source h2{font-size:20px}.preview-source>p br,.preview-source h2 br{display:none}.preview-source>p{margin:12px 0 16px}.preview-repo{margin-top:14px}.preview-decision{padding:22px}.preview-decision h3{font-size:23px;margin-top:15px}.preview-decision>p{font-size:14px}.preview-evidence{margin:19px 0 15px;gap:17px;font-size:11px}.preview-caveat{display:block}.preview-caveat p{margin-top:4px}.proof-strip{padding:27px 0;gap:27px 20px;grid-template-columns:1fr 1.2fr}.proof-strip>div:nth-child(even){padding-left:18px}.proof-strip strong{font-size:26px}.proof-strip strong small{display:block;margin:6px 0 0;font-size:11px}.proof-strip span{font-size:11px}.proof-caption{font-size:14px}.safety-strip{display:grid;gap:8px;font-size:12px;padding-top:18px}.section-block{margin-top:48px}.why-intro{gap:20px;margin-bottom:25px}.why-intro h2{font-size:22px}.why-lead{font-size:22px;line-height:1.75}.why-table-head{display:none}.why-scenario{display:block;padding:26px 0;border-top:1px solid var(--line);border-bottom:0}.why-scenario>div+div{margin-top:15px}.why-scenario p{font-size:15px}.mobile-label{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.why-takeaway{border-top:1px solid var(--line);padding-top:22px;margin-top:0}.why-takeaway>strong{font-size:18px}.why-path{white-space:normal;flex-wrap:wrap;gap:9px;font-size:11px}.why-path i{width:10px}.workspace-head h1{font-size:29px;line-height:1.5}.runtime{display:block}.runtime-note{display:block;margin-top:4px}.mode-toggle{gap:26px;margin-bottom:20px}.mode-btn{font-size:14px}.live-input{padding:18px}.input-row{grid-template-columns:minmax(0,1fr) 120px;gap:16px 12px}.url-field{grid-column:1/-1}.input-row .btn{grid-column:2;grid-row:2;font-size:13px;padding-inline:10px}.model-field{grid-column:1;grid-row:2}.model-field label{font-size:11px}.input-row input{font-size:13px}.input-row select{font-size:12px}.input-meta{display:block}.input-meta .live-hint .text-btn{display:block;margin:6px 0}.input-meta>#refresh-backend{margin-top:5px}#model-hint{font-size:11px;margin-top:10px}.explain-flow{margin-block:25px}.explain-flow-head{display:block}.explain-flow-head h2{font-size:18px}.flow-state{display:block;margin-top:6px}.explain-steps{display:block}.explain-step{padding:10px 0;gap:15px}.explain-step p{max-width:none;margin-top:2px}.explain-step strong{font-size:14px}.explain-connector{display:none}.status-panel{display:block}.status-actions{margin-top:18px}.story-head{display:block}.story-action{margin-top:16px}.story-head h2{font-size:20px}.story-grid{grid-template-columns:1fr;gap:15px}.story-result{flex-wrap:wrap;gap:10px}.replay-banner{font-size:12px}.case-chip{font-size:12px;padding:8px 10px}.result-summary{padding:21px 19px}.summary-top{display:block}.summary-top>.meta{display:block;margin-top:5px}.summary-main{display:block}.result-route{font-size:24px}.admission{display:inline-block;margin-top:12px}.result-explanation{grid-template-columns:1fr;gap:20px}.result-explanation p,.missing-info ul{font-size:14px}.result-next-action{display:block}.result-next-action strong{display:block;margin-top:7px;font-size:15px}.summary-facts{display:grid;gap:8px;font-size:11px}.summary-facts b{float:right}.result-support{display:block}.result-grid{gap:25px}.panel-heading h2{font-size:21px}.panel-heading{gap:12px}.reply-card textarea{font-size:14px;min-height:300px}.evidence-card .panel-heading{display:block}#evidence-count{margin-top:12px}.ev-tab{padding:8px;font-size:12px}.ev-item{display:block;padding:20px 0}.ev-head{margin-bottom:7px}.ev-title{font-size:15px}.evidence-why{font-size:12px}.evidence-why strong{display:block}.ev-source{font-size:11px}.ev-full{font-size:11px;padding:12px}.evidence-detail summary{gap:12px}.ev-excerpt{max-width:65%}.detail-grid{grid-template-columns:95px 1fr;font-size:12px}.run-details .panel-heading h2{font-size:19px}.evaluation-overview{grid-template-columns:1fr 1fr;padding:24px 0;gap:25px}.evaluation-overview>div{padding-left:20px}.evaluation-overview>div:last-child{grid-column:1/-1;border:0;padding:20px 0 0;border-top:1px solid var(--line-soft)}.evaluation-overview strong{font-size:31px}.evaluation-overview strong small{display:block;font-size:12px;margin:6px 0 0}.evaluation-overview span,.evaluation-overview small{font-size:11px}.eval-caption{display:block;font-size:11px}.eval-caption>span{display:block}.eval-split{margin:30px 0;gap:28px}.route>div:first-child{display:block}.route code{display:block;margin-top:3px;font-size:11px}.safety-ledger{display:block}.calibration{padding:24px}.calibration h2{font-size:24px}.calibration p{font-size:14px}.eval-method{margin-top:40px}.eval-method dl{grid-template-columns:70px 1fr;gap:0 15px}.eval-method dt,.eval-method dd{font-size:13px}.page-next{display:block;font-size:18px;margin-top:40px}.page-next>span{display:block;margin-top:12px}.footer{padding:22px 20px}.footer p{font-size:11px}.reply-actions{align-items:flex-start}.reply-actions>.note{font-size:11px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* Architecture: one open canvas, then a compact system-layer index. */ #architecture { max-width: 1280px; } #architecture .arch-page-heading { display: grid; grid-template-columns: 1.05fr 1fr; align-items: end; gap: 72px; margin-bottom: 52px; } #architecture .arch-page-index { margin: 0 0 20px; color: var(--muted); font-size: 13px; letter-spacing: .03em; } #architecture .arch-page-heading h1 { margin: 0; color: var(--text); font-size: clamp(36px, 3.3vw, 46px); line-height: 1.24; letter-spacing: -.04em; font-weight: 620; } #architecture .arch-page-intro p { max-width: 475px; margin: 0; color: var(--text); font-size: 16px; line-height: 1.9; } #architecture .arch-page-intro > span { display: block; margin-top: 18px; color: var(--muted); font-size: 12px; letter-spacing: .035em; } #architecture .arch-board { min-width: 0; border: 0; border-radius: 0; background: none; } #architecture .arch-board::before { display: none; } #architecture .arch-canvas-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-block: 1px solid var(--line); } #architecture .arch-canvas-heading h2 { margin: 0; color: var(--text); font-size: 20px; line-height: 1.4; font-weight: 550; letter-spacing: -.02em; } #architecture .arch-canvas-heading > span { color: var(--muted); font-size: 13px; } #architecture .arch-canvas-legend { display: flex; flex-wrap: wrap; gap: 8px 19px; padding: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; } #architecture .arch-canvas-legend span { display: inline-flex; align-items: center; gap: 7px; } #architecture .arch-canvas-legend span::before { content: ""; width: 18px; height: 1px; background: var(--line); } #architecture .arch-canvas-legend .legend-agent::before { background: var(--text); } #architecture .arch-canvas-legend .legend-evidence::before { background: var(--accent); } #architecture .arch-canvas-legend .legend-policy::before { background: var(--warning); } #architecture .arch-canvas-legend .legend-output::before { background: var(--success); } #architecture .arch-mobile-overview { display: none; } #architecture .arch-mobile-overview-wire { fill: none; stroke: var(--accent); stroke-width: 1.1; vector-effect: non-scaling-stroke; } #architecture .arch-mobile-overview-node rect { fill: var(--surface); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } #architecture .arch-mobile-overview-node text { fill: var(--muted); font: 8px/1 var(--mono); letter-spacing: .06em; } #architecture .arch-mobile-overview-node .arch-mobile-overview-label { fill: var(--text); font: 11px/1 var(--sans); font-weight: 550; } #architecture .arch-mobile-overview-evidence rect { stroke: var(--accent); } #architecture .arch-mobile-overview-gate rect { fill: color-mix(in srgb, var(--accent) 10%, var(--surface)); stroke: var(--accent); } #architecture .arch-mobile-overview-output rect { fill: color-mix(in srgb, var(--success) 9%, var(--surface)); stroke: var(--success); } #architecture .arch-canvas { position: relative; height: 930px; margin-top: 16px; background-image: radial-gradient(circle, color-mix(in srgb, var(--line) 45%, transparent) .6px, transparent .8px); background-size: 18px 18px; } #architecture .arch-connectors { position: absolute; inset: 0; width: 100%; height: 885px; overflow: visible; pointer-events: none; } #architecture .arch-wire { fill: none; stroke: color-mix(in srgb, var(--muted) 63%, transparent); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; color: var(--muted); } #architecture .arch-wire path { vector-effect: non-scaling-stroke; } #architecture .arch-wire-evidence { stroke: var(--accent); color: var(--accent); opacity: .78; } #architecture .arch-wire-branch { stroke: var(--muted); opacity: .78; } #architecture .arch-junction { fill: var(--muted); } #architecture .arch-source { position: absolute; top: 24px; left: 1%; width: 18%; min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); } #architecture .arch-source-mark { display: flex; width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted); } #architecture .arch-source strong { display: block; color: var(--text); font-size: 15px; line-height: 1.45; font-weight: 580; } #architecture .arch-source span:not(.arch-source-mark) { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; } #architecture .arch-source-note { position: absolute; left: 23%; top: 28px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; } #architecture .arch-agent { position: absolute; left: 1%; right: 1%; top: 112px; } #architecture .arch-component-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } #architecture .arch-component-heading h3 { margin: 0; color: var(--text); font-size: 15px; line-height: 1.5; font-weight: 560; } #architecture .arch-agent .arch-component-heading h3 { padding-right: 12px; background: var(--bg); } #architecture .arch-component-heading > span { color: var(--muted); font-size: 11px; letter-spacing: .025em; } #architecture .arch-agent-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 4.4%; margin-top: 19px; } #architecture .agent-step { min-width: 0; height: 108px; padding: 13px 16px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); box-shadow: none; } #architecture .arch-step-index { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; } #architecture .agent-step strong { display: block; color: var(--text); font-size: 19px; line-height: 1.3; font-weight: 560; } #architecture .agent-step p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: nowrap; } #architecture .arch-step-retrieve { border-top-color: var(--accent); } #architecture .arch-step-retrieve .arch-step-index { color: var(--accent); } #architecture .arch-evidence { position: absolute; left: 4.2%; top: 313px; width: 62.1%; } #architecture .arch-evidence-sources { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; } #architecture .arch-evidence-sources span { position: relative; } #architecture .arch-evidence-sources span + span::before { content: ""; position: absolute; top: 7px; left: -10px; height: 3px; width: 3px; border-radius: 50%; background: var(--line); } #architecture .arch-retrieval-track { display: grid; grid-template-columns: 25% 22.3% 31%; justify-content: space-between; align-items: center; margin-top: 47px; } #architecture .arch-retrieval-inputs { display: grid; gap: 12px; } #architecture .arch-retrieval-method { height: 44px; padding: 6px 10px; border-left: 2px solid var(--line); background: var(--surface); } #architecture .arch-retrieval-method span, #architecture .arch-fusion > span, #architecture .arch-snapshot > span { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; } #architecture .arch-retrieval-method strong { display: block; margin-top: 1px; color: var(--text); font-size: 13px; line-height: 1.3; font-weight: 580; } #architecture .arch-fusion, #architecture .arch-snapshot { min-height: 64px; padding: 11px 12px; border-block: 1px solid var(--line); background: var(--surface); } #architecture .arch-fusion strong, #architecture .arch-snapshot strong { display: block; margin-top: 6px; color: var(--text); font-size: 13px; line-height: 1.3; font-weight: 580; white-space: nowrap; } #architecture .arch-snapshot { border-top-color: var(--accent); background: var(--surface-raised); } #architecture .arch-evidence-caption { margin: 22px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; } #architecture .arch-loop-key { display: inline-block; vertical-align: 3px; width: 15px; height: 1px; margin-right: 8px; background: var(--accent); } #architecture .arch-assessment { position: absolute; top: 348px; left: 81.5%; width: 17%; min-height: 127px; padding: 13px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } #architecture .arch-small-label { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; letter-spacing: .015em; } #architecture .arch-assessment h3 { margin: 6px 0 0; color: var(--text); font-size: 18px; line-height: 1.5; font-weight: 550; } #architecture .arch-assessment p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; } #architecture .arch-assessment p strong { color: var(--text); font-weight: 500; } #architecture .arch-admission-context { position: absolute; top: 621px; left: 9%; width: 26%; } #architecture .arch-admission-context h3 { margin: 8px 0 0; color: var(--text); font-size: 20px; line-height: 1.55; font-weight: 520; letter-spacing: -.02em; } #architecture .arch-gate { position: absolute; top: 589px; left: calc(50% - 68px); width: 136px; height: 136px; display: grid; place-items: center; background: none; border: 0; padding: 0; } #architecture .arch-gate-shape { position: absolute; inset: 0; width: 136px; height: 136px; color: var(--accent); } #architecture .arch-gate > div { position: relative; text-align: center; } #architecture .arch-gate strong { display: block; color: var(--text); font-size: 16px; line-height: 1.4; font-weight: 580; } #architecture .arch-gate span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; } #architecture .arch-gate-criteria { position: absolute; top: 626px; left: 67%; width: 27%; } #architecture .arch-gate-criteria p { margin: 8px 0 0; color: var(--text); font-size: 13px; line-height: 1.5; } #architecture .arch-gate-criteria p + p { margin-top: 4px; } #architecture .arch-outcomes { position: absolute; top: 792px; left: 7%; right: 7%; display: grid; grid-template-columns: 1fr 1fr; gap: 20%; } #architecture .architecture-branch { position: relative; min-width: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); background: none; border-radius: 0; } #architecture .architecture-branch::before, #architecture .architecture-branch::after { display: none; } #architecture .arch-branch-rule { position: absolute; top: -1px; left: 0; width: 36px; height: 1px; background: var(--warning); } #architecture .arch-coding .arch-branch-rule { background: var(--success); } #architecture .architecture-branch h3 { margin: 5px 0 0; color: var(--text); font-size: 20px; line-height: 1.4; font-weight: 550; } #architecture .architecture-branch p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; } #architecture .arch-route-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; } #architecture .arch-route-list code, #architecture .arch-route-list > span { color: var(--muted); font-size: 11px; line-height: 1.5; background: none; } #architecture .arch-coding .arch-route-list code { color: var(--success); } #architecture .arch-canvas-footnote { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; } #architecture .arch-stack { margin-top: 86px; } #architecture .arch-stack-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; margin-bottom: 32px; } #architecture .arch-stack-heading h2 { margin: 0; color: var(--text); font-size: clamp(26px, 2.5vw, 32px); line-height: 1.4; letter-spacing: -.03em; font-weight: 550; } #architecture .arch-stack-heading p { max-width: 410px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; } #architecture .arch-stack-table { border-top: 1px solid var(--line); } #architecture .arch-stack-row { display: grid; grid-template-columns: 32px 145px 1fr 1.12fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start; } #architecture .arch-stack-number { padding-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.7; font-variant-numeric: tabular-nums; } #architecture .arch-stack-row h3 { margin: 0; color: var(--text); font-size: 17px; line-height: 1.6; font-weight: 550; } #architecture .arch-stack-row p { max-width: 365px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; } #architecture .arch-stack-row > div { display: flex; flex-wrap: wrap; gap: 7px 13px; } #architecture .arch-stack-row > div > span { color: var(--text); font-size: 12px; line-height: 1.8; } #architecture .arch-mobile-link, #architecture .arch-mobile-merge { display: none; } @media (max-width: 1100px) and (min-width: 851px) { #architecture .arch-page-heading { gap: 40px; } #architecture .agent-step { padding-inline: 12px; } #architecture .agent-step p { font-size: 12px; } #architecture .arch-retrieval-track { grid-template-columns: 25% 22.3% 31%; } #architecture .arch-fusion, #architecture .arch-snapshot { padding-inline: 8px; } #architecture .arch-fusion strong, #architecture .arch-snapshot strong { font-size: 12px; } #architecture .arch-source { gap: 7px; padding-inline: 8px; } #architecture .arch-source strong { font-size: 13px; } #architecture .arch-source span:not(.arch-source-mark) { font-size: 10px; } #architecture .arch-assessment { width: 18.5%; padding-inline: 10px; } #architecture .arch-assessment h3 { font-size: 17px; } #architecture .arch-stack-row { grid-template-columns: 28px 125px minmax(0, 1.1fr) minmax(220px, .9fr); gap: 18px; } } @media (max-width: 850px) { #architecture .arch-canvas-legend { gap: 7px 14px; padding-top: 11px; } #architecture .arch-mobile-overview { display: block; width: 100%; height: auto; margin-top: 17px; } #architecture .arch-page-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 34px; } #architecture .arch-page-index { margin-bottom: 15px; } #architecture .arch-page-heading h1 { font-size: 36px; } #architecture .arch-page-intro p { max-width: 610px; font-size: 15px; } #architecture .arch-page-intro > span { margin-top: 12px; font-size: 11px; } #architecture .arch-canvas-heading { display: block; padding-block: 17px; } #architecture .arch-canvas-heading h2 { font-size: 18px; } #architecture .arch-canvas-heading > span { display: block; margin-top: 7px; font-size: 12px; } #architecture .arch-canvas { height: auto; margin-top: 22px; padding: 0 0 5px; background: none; } #architecture .arch-connectors { display: none; } #architecture .arch-source, #architecture .arch-source-note, #architecture .arch-agent, #architecture .arch-evidence, #architecture .arch-assessment, #architecture .arch-admission-context, #architecture .arch-gate, #architecture .arch-gate-criteria, #architecture .arch-outcomes { position: relative; inset: auto; width: auto; } #architecture .arch-source { width: min(100%, 280px); min-height: 70px; padding: 12px 14px; } #architecture .arch-source-note { margin: 13px 0 28px; font-size: 13px; } #architecture .arch-source-note br { display: none; } #architecture .arch-agent { margin: 0 0 34px; } #architecture .arch-agent-track { grid-template-columns: 1fr; gap: 0; margin-top: 15px; } #architecture .agent-step { display: grid; grid-template-columns: 28px 52px 1fr; align-items: center; gap: 10px; height: auto; min-height: 62px; padding: 12px 14px; border-bottom: 0; background: var(--surface); } #architecture .agent-step:last-child { border-bottom: 1px solid var(--line); } #architecture .arch-step-index { margin: 0; font-size: 11px; } #architecture .agent-step strong { font-size: 17px; } #architecture .agent-step p { margin: 0; font-size: 12px; white-space: normal; } #architecture .arch-evidence { margin-bottom: 32px; } #architecture .arch-evidence-sources { margin-top: 12px; gap: 5px 18px; } #architecture .arch-retrieval-track { display: flex; flex-direction: column; align-items: stretch; margin-top: 24px; } #architecture .arch-retrieval-inputs { grid-template-columns: 1fr 1fr; gap: 16px; } #architecture .arch-retrieval-method { height: 56px; padding: 9px 12px; } #architecture .arch-retrieval-method strong { margin-top: 3px; font-size: 14px; } #architecture .arch-mobile-merge { display: block; width: 100%; height: 28px; color: var(--accent); } #architecture .arch-mobile-link { display: block; width: 12px; height: 28px; margin-inline: auto; color: var(--accent); } #architecture .arch-fusion, #architecture .arch-snapshot { min-height: 62px; padding: 12px 18px; text-align: center; } #architecture .arch-fusion strong, #architecture .arch-snapshot strong { font-size: 14px; } #architecture .arch-evidence-caption { margin-top: 15px; } #architecture .arch-assessment { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0 20px; min-height: 100px; padding: 15px 18px; } #architecture .arch-assessment .arch-small-label { grid-column: 1; } #architecture .arch-assessment h3 { grid-column: 1; margin-top: 2px; font-size: 18px; } #architecture .arch-assessment p { grid-column: 2; grid-row: 1 / 3; margin: 0; } #architecture .arch-admission-context { margin-top: 30px; text-align: center; } #architecture .arch-admission-context h3 { margin-top: 7px; font-size: 20px; } #architecture .arch-admission-context h3 br { display: none; } #architecture .arch-gate { width: 136px; height: 136px; margin: 22px auto; } #architecture .arch-gate-criteria { margin-bottom: 32px; text-align: center; } #architecture .arch-gate-criteria p { margin-top: 5px; font-size: 13px; } #architecture .arch-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 0; } #architecture .architecture-branch h3 { font-size: 18px; } #architecture .architecture-branch p { font-size: 13px; } #architecture .arch-canvas-footnote { margin-top: 26px; } #architecture .arch-stack { margin-top: 52px; } #architecture .arch-stack-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; } #architecture .arch-stack-heading h2 { font-size: 28px; } #architecture .arch-stack-heading p { font-size: 14px; } #architecture .arch-stack-row { grid-template-columns: 24px 1fr; gap: 8px 12px; padding-block: 21px; } #architecture .arch-stack-row h3 { grid-column: 2; } #architecture .arch-stack-row p, #architecture .arch-stack-row > div { grid-column: 2; max-width: none; } #architecture .arch-stack-row > div { margin-top: 2px; } } @media (max-width: 460px) { #architecture .arch-outcomes { grid-template-columns: 1fr; gap: 28px; } #architecture .arch-page-heading h1 { font-size: 34px; } #architecture .arch-component-heading > span { font-size: 10px; } #architecture .agent-step { padding-inline: 10px; grid-template-columns: 24px 48px 1fr; gap: 9px; } #architecture .arch-assessment { padding-inline: 12px; gap: 0 12px; } #architecture .arch-admission-context h3 { font-size: 18px; } } /* Project story: an editorial case study. All rules are scoped to the about route. */ #about { max-width:1280px; color:var(--text); } #about .story-visual { margin: 0 0 8px; padding: 24px 0 27px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } #about .story-visual-map { display: block; width: 100%; height: auto; min-height: 150px; overflow: visible; color: var(--muted); } #about .story-visual-map-mobile { display: none; } #about .story-map-wire { color: var(--accent); stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } #about .story-map-wire-mobile { stroke-width: 1.4; } #about .story-map-node rect { fill: var(--surface); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } #about .story-map-node-input rect { stroke: var(--muted); } #about .story-map-node-gate rect { fill: color-mix(in srgb, var(--accent) 10%, var(--surface)); stroke: var(--accent); } #about .story-map-node-output rect { fill: color-mix(in srgb, var(--success) 9%, var(--surface)); stroke: var(--success); } #about .story-map-kicker { fill: var(--muted); font: 7px/1 var(--mono,ui-monospace,Consolas,monospace); letter-spacing: .08em; } #about .story-map-label { fill: var(--text); font: 11px/1.3 var(--sans); font-weight: 550; } #about .story-visual figcaption { display: flex; align-items: baseline; gap: 22px; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; } #about .story-visual figcaption span:first-child { color: var(--text); font-size: 13px; font-weight: 500; } #about .story-header { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:64px; align-items:end; padding:12px 0 48px; } #about .story-page-label { margin:0 0 22px; color:var(--text); font-size:14px; line-height:1.5; } #about .story-page-label span { margin-left:18px; color:var(--muted); } #about .story-header h1 { margin:0; font-size:clamp(36px,4vw,52px); line-height:1.24; font-weight:650; letter-spacing:-.04em; } #about .story-deck { max-width:740px; margin:24px 0 0; color:var(--muted); font-size:17px; line-height:1.85; } #about .story-deck strong { color:var(--text); font-weight:500; } #about .story-project-meta { display:grid; gap:21px; margin:0 0 5px; border-left:1px solid var(--line); padding-left:25px; } #about .story-project-meta dt { margin:0 0 5px; color:var(--muted); font-size:12px; } #about .story-project-meta dd { margin:0; font-size:14px; line-height:1.7; } #about .story-chapter { display:grid; grid-template-columns:210px minmax(0,1fr); gap:56px; padding:43px 0; border-top:1px solid var(--line); } #about .story-chapter-heading { padding-top:4px; } #about .story-chapter-number { display:block; margin-bottom:10px; color:var(--muted); font:12px/1.4 var(--mono,ui-monospace,Consolas,monospace); } #about .story-chapter-heading h2 { margin:0; font-size:23px; line-height:1.35; font-weight:600; letter-spacing:-.025em; } #about .story-chapter-heading p { margin:13px 0 0; max-width:190px; color:var(--muted); font-size:13px; line-height:1.7; } #about .story-chapter-heading p span { font-size:12px; } #about .story-chapter-body { min-width:0; } #about .story-chapter-body > h3 { max-width:780px; margin:0 0 17px; font-size:25px; line-height:1.5; font-weight:550; letter-spacing:-.025em; } #about .story-chapter-body > p { max-width:800px; margin:0; color:var(--muted); font-size:16px; line-height:1.85; } #about .story-principle { display:grid; grid-template-columns:80px minmax(0,1fr); gap:20px; margin-top:28px; padding-top:23px; border-top:1px solid var(--line); } #about .story-principle > span { padding-top:3px; color:var(--muted); font-size:13px; } #about .story-principle p { margin:0; font-size:16px; line-height:1.85; } #about .story-principle strong { font-weight:550; } #about .story-workflow { display:flex; align-items:center; gap:20px; max-width:670px; padding:26px 0 0; font-size:14px; } #about .story-workflow > span, #about .story-workflow > strong { flex-shrink:0; font-weight:500; } #about .story-workflow strong { color:var(--text); } #about .story-workflow small { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; } #about .story-workflow svg { width:48px; min-width:28px; height:12px; fill:none; stroke:var(--line); stroke-width:1.3; } #about .story-workflow svg:last-of-type { stroke:var(--accent); } #about .story-evolution { padding-bottom:29px; } #about .story-timeline { list-style:none; margin:0; padding:0; } #about .story-step { position:relative; display:grid; grid-template-columns:115px minmax(0,1fr); gap:23px; padding:0 0 27px 25px; } #about .story-step::before { content:""; position:absolute; top:8px; bottom:-8px; left:3px; border-left:1px solid var(--line); } #about .story-step::after { content:""; position:absolute; top:8px; left:0; width:7px; height:7px; border:1px solid var(--muted); background:var(--bg); border-radius:50%; } #about .story-step:last-child::before { bottom:30px; } #about .story-step + .story-step { padding-top:25px; } #about .story-step + .story-step::after { top:33px; } #about .story-step-version { padding-top:1px; } #about .story-step-version > span { display:block; color:var(--text); font:14px/1.6 var(--mono,ui-monospace,Consolas,monospace); } #about .story-step-version small { display:block; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.6; } #about .story-step-content { min-width:0; padding-bottom:25px; border-bottom:1px solid var(--line); } #about .story-step:last-child .story-step-content { padding-bottom:0; border-bottom:0; } #about .story-step-content h3 { margin:0 0 13px; font-size:20px; line-height:1.5; font-weight:550; letter-spacing:-.02em; } #about .story-decisions { display:grid; gap:9px; margin:0; } #about .story-decisions > div { display:grid; grid-template-columns:60px minmax(0,1fr); gap:12px; } #about .story-decisions dt { padding-top:2px; color:var(--muted); font-size:12px; line-height:1.8; } #about .story-decisions dd { margin:0; color:var(--muted); font-size:15px; line-height:1.8; } #about .story-next-question { margin:13px 0 0; font-size:13px; line-height:1.75; color:var(--text); } #about .story-step-current::after { background:var(--accent); border-color:var(--accent); } #about .story-step-current .story-step-version > span { color:var(--accent); } #about .story-step-current .story-next-question { color:var(--warning); } #about code { overflow-wrap:anywhere; color:inherit; font: .88em/1.65 var(--mono,ui-monospace,Consolas,monospace); } #about .story-evaluation { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; padding:25px 0 26px; } #about .story-evaluation h4 { margin:0 0 18px; font-size:14px; font-weight:500; } #about .story-safety-findings dl { margin:0; } #about .story-safety-findings dl > div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); font-size:14px; } #about .story-safety-findings dt { color:var(--muted); } #about .story-safety-findings dd { margin:0; color:var(--success); font:14px/1.5 var(--mono,ui-monospace,Consolas,monospace); } #about .story-safety-findings dd small { color:var(--muted); font-size:12px; line-height:1.5; } #about .story-autonomy-finding { padding-left:30px; border-left:1px solid var(--line); } #about .story-finding-number { margin:0 0 5px; color:var(--warning); font-size:53px; font-weight:500; line-height:1.2; letter-spacing:-.05em; } #about .story-finding-number span { font-size:31px; letter-spacing:-.02em; } #about .story-autonomy-finding > p:not(.story-finding-number) { margin:0; font-size:13px; line-height:1.7; } #about .story-autonomy-finding > p.story-finding-note { max-width:300px; margin-top:14px; color:var(--muted); font-size:14px; } #about .story-chapter-body > .story-evaluation-note { font-size:13px; line-height:1.8; } #about .story-evaluation-note strong { color:var(--text); font-weight:500; } #about .story-text-link { display:inline-flex; align-items:center; gap:12px; margin-top:19px; color:var(--text); font-size:14px; line-height:1.6; text-decoration:none; text-underline-offset:5px; } #about .story-text-link:hover { color:var(--text); text-decoration:underline; } #about .story-text-link svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; transition:transform 160ms ease; } #about .story-text-link:hover svg { transform:translateX(3px); } #about .story-text-link:focus-visible { outline:2px solid var(--accent); outline-offset:5px; } #about .story-calibration { padding-top:37px; padding-bottom:38px; } #about .story-chapter-body > .story-calibration-note { margin-top:15px; color:var(--muted); font-size:12px; line-height:1.7; } #about .story-conclusion { padding:38px 0 6px 266px; border-top:1px solid var(--line); } #about .story-conclusion > p { margin:0 0 17px; color:var(--muted); font-size:13px; } #about .story-conclusion blockquote { margin:0; color:var(--muted); font-size:clamp(23px,2.5vw,31px); line-height:1.7; letter-spacing:-.025em; font-weight:400; } #about .story-conclusion blockquote strong { display:block; color:var(--text); font-weight:550; } #about .story-mobile-break { display:none; } @media (max-width:1100px) { #about .story-header { grid-template-columns:minmax(0,1fr) 220px; gap:34px; } #about .story-chapter { grid-template-columns:170px minmax(0,1fr); gap:34px; } #about .story-step { grid-template-columns:95px minmax(0,1fr); gap:15px; } #about .story-conclusion { padding-left:204px; } } @media (max-width:820px) { #about .story-visual { padding-block: 19px 22px; } #about .story-visual-map { min-height: 128px; } #about .story-visual figcaption { display: block; margin-top: 5px; } #about .story-visual figcaption span:first-child { display: block; margin-bottom: 3px; } #about .story-header { grid-template-columns:1fr; gap:27px; padding-bottom:36px; } #about .story-project-meta { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1.8fr); gap:18px; padding:20px 0 0; border-left:0; border-top:1px solid var(--line); } #about .story-chapter { grid-template-columns:1fr; gap:25px; padding:32px 0; } #about .story-chapter-heading { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:baseline; gap:0 10px; } #about .story-chapter-number { margin:0; } #about .story-chapter-heading h2 { font-size:21px; } #about .story-chapter-heading p { grid-column:2; max-width:none; margin-top:7px; } #about .story-chapter-heading p br { display:none; } #about .story-chapter-heading p span { margin-left:8px; } #about .story-conclusion { padding:31px 0 0; } #about .story-step { grid-template-columns:115px minmax(0,1fr); } } @media (max-width:560px) { #about .story-visual-map { display: none; } #about .story-visual-map-mobile { display: block; width: 100%; height: auto; min-height: 0; } #about .story-visual-map-mobile .story-map-kicker { font-size: 8px; } #about .story-visual-map-mobile .story-map-label { font-size: 13px; } #about .story-page-label { margin-bottom:18px; font-size:13px; } #about .story-page-label span { margin-left:12px; font-size:12px; } #about .story-header h1 { font-size:34px; line-height:1.3; } #about .story-deck { margin-top:20px; font-size:16px; line-height:1.85; } #about .story-project-meta { grid-template-columns:1fr 1fr; row-gap:17px; } #about .story-project-meta > div:first-child { grid-column:1 / -1; } #about .story-project-meta dd { font-size:13px; } #about .story-chapter-body > h3 { font-size:22px; } #about .story-chapter-body > p { font-size:15px; } #about .story-principle { grid-template-columns:1fr; gap:8px; margin-top:23px; padding-top:19px; } #about .story-principle p { font-size:15px; } #about .story-workflow { gap:8px; font-size:12px; } #about .story-workflow svg { flex:1; min-width:14px; width:22px; } #about .story-workflow small { max-width:100px; font-size:10px; } #about .story-step { grid-template-columns:1fr; gap:8px; padding:0 0 19px 23px; } #about .story-step + .story-step { padding-top:19px; } #about .story-step + .story-step::after { top:27px; } #about .story-step-version { display:flex; gap:11px; align-items:baseline; } #about .story-step-version small { margin:0; } #about .story-step-content { padding-bottom:23px; } #about .story-step-content h3 { font-size:19px; } #about .story-decisions { gap:11px; } #about .story-decisions > div { grid-template-columns:1fr; gap:2px; } #about .story-decisions dt { font-size:11px; } #about .story-decisions dd { font-size:15px; } #about .story-evaluation { grid-template-columns:1fr; gap:25px; padding-top:15px; } #about .story-autonomy-finding { padding:22px 0 0; border-left:0; border-top:1px solid var(--line); } #about .story-finding-number { font-size:48px; } #about .story-autonomy-finding > .story-finding-note { max-width:none; } #about .story-conclusion blockquote { font-size:23px; line-height:1.7; } #about .story-mobile-break { display:block; } } @media (prefers-reduced-motion:reduce) { #about .story-text-link svg { transition:none; } } /* Presentation polish: keep the data-led surfaces quiet, then add a small amount of motion and colour. */ .home-signal-rail { display: flex; align-items: center; gap: 0; min-height: 34px; padding: 0 25px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 72%, var(--bg)); } .home-signal-node { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid var(--muted); background: var(--surface); transform: scale(.82); animation: signal-node-breathe 3.8s ease-in-out infinite; } .home-signal-node.signal-input { border-color: var(--muted); } .home-signal-node.signal-evidence { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); animation-delay: .55s; } .home-signal-node.signal-policy { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, var(--surface)); animation-delay: 1.1s; } .home-signal-node.signal-output { border-color: var(--success); background: color-mix(in srgb, var(--success) 13%, var(--surface)); animation-delay: 1.65s; } .home-signal-link { position: relative; flex: 1 1 auto; height: 1px; margin: 0 11px; background: var(--line); overflow: hidden; } .home-signal-link::after { content: ""; position: absolute; top: 0; left: -22px; width: 22px; height: 1px; background: var(--accent); opacity: .7; animation: signal-trace 4.4s linear infinite; } .home-signal-link:nth-of-type(4)::after { background: var(--warning); animation-delay: 1.1s; } .home-signal-link:nth-of-type(6)::after { background: var(--success); animation-delay: 2.2s; } @keyframes signal-node-breathe { 0%, 100% { opacity: .62; transform: scale(.82); } 45% { opacity: 1; transform: scale(1); } } @keyframes signal-trace { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: .75; } 62%, 100% { transform: translateX(calc(100% + 22px)); opacity: 0; } } #evaluation .evaluation-signal { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(0, 1.7fr); gap: 54px; padding: 28px 0 30px; border-bottom: 1px solid var(--line); } #evaluation .evaluation-signal-heading { max-width: 360px; } #evaluation .evaluation-signal-heading h2 { margin: 9px 0 11px; font-size: 21px; line-height: 1.4; font-weight: 550; } #evaluation .evaluation-signal-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; } #evaluation .evaluation-signal-plot { display: grid; gap: 14px; align-content: center; } #evaluation .evaluation-signal-row { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 18px; align-items: center; } #evaluation .evaluation-signal-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } #evaluation .evaluation-signal-row span { color: var(--muted); font-size: 12px; } #evaluation .evaluation-signal-row strong { color: var(--text); font: 14px/1.4 var(--mono); font-weight: 500; white-space: nowrap; } #evaluation .signal-meter { height: 5px; background: var(--surface-raised); overflow: hidden; } #evaluation .signal-meter i { display: block; height: 100%; background: var(--accent); } #evaluation .signal-row-coding strong { color: var(--warning); } #evaluation .signal-row-coding .signal-meter i { background: var(--warning); } #evaluation .signal-row-safety strong { color: var(--success); } #evaluation .signal-zero-track { display: flex; align-items: center; gap: 8px; height: 5px; } #evaluation .signal-zero-track::before { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); } #evaluation .signal-zero-track i { width: 7px; height: 7px; border: 1px solid var(--success); background: color-mix(in srgb, var(--success) 20%, var(--surface)); } #architecture .arch-wire-branch { opacity: .84; } #about .story-conclusion { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; padding: 36px 0 8px; max-width: none; } #about .story-conclusion::before { content: none; } #about .story-conclusion-meta { display: flex; flex-direction: column; gap: 11px; padding-top: 4px; color: var(--text); font-size: 20px; line-height: 1.4; font-weight: 550; } #about .story-conclusion-index { color: var(--accent); font: 12px/1.4 var(--mono); letter-spacing: .03em; } #about .story-conclusion-copy { min-width: 0; max-width: 780px; } #about .story-conclusion-copy > p { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; } #about .story-conclusion blockquote { max-width: 760px; color: var(--muted); font-size: clamp(22px, 1.85vw, 26px); line-height: 1.55; letter-spacing: -.02em; } #about .story-conclusion blockquote strong { margin-top: 10px; color: var(--text); font-weight: 600; } #about .story-conclusion .story-text-link { margin-top: 23px; font-size: 13px; } @media (max-width: 1100px) { #about .story-conclusion { grid-template-columns: 170px minmax(0, 1fr); gap: 34px; } } @media (max-width: 820px) { #about .story-conclusion { grid-template-columns: 1fr; gap: 21px; padding-top: 30px; } #about .story-conclusion-meta { flex-direction: row; align-items: baseline; gap: 10px; font-size: 20px; } #about .story-conclusion-index { width: 28px; } } @media (max-width: 850px) { .home-signal-rail { min-height: 30px; padding-inline: 16px; } .home-signal-link { margin-inline: 8px; } #evaluation .evaluation-signal { grid-template-columns: 1fr; gap: 23px; padding-block: 24px 26px; } #evaluation .evaluation-signal-heading { max-width: 600px; } } @media (max-width: 560px) { .home-signal-rail { min-height: 27px; padding-inline: 16px; } .home-signal-node { width: 6px; height: 6px; } .home-signal-link { margin-inline: 6px; } #evaluation .evaluation-signal-row { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; } #evaluation .evaluation-signal-row span { font-size: 11px; } #evaluation .evaluation-signal-row strong { font-size: 12px; } #about .story-conclusion blockquote { font-size: 20px; line-height: 1.6; } #about .story-conclusion blockquote strong { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .home-signal-node, .home-signal-link::after { animation: none; } } /* About motion system: restrained timing, one-way reveals, and no motion-dependent content. */ :root { --motion-fast: 160ms; --motion-base: 260ms; --motion-slow: 560ms; --ease-standard: cubic-bezier(.2, .7, .2, 1); --ease-enter: cubic-bezier(.22, .75, .25, 1); } html.motion-ready #about .motion-reveal { opacity: 0; transform: translateY(10px); } html.motion-ready #about .motion-reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--motion-slow) var(--ease-enter), transform var(--motion-slow) var(--ease-enter); } html.motion-ready #about .story-header.motion-reveal { opacity: 1; transform: none; transition: none; } html.motion-ready #about .story-header .story-page-label, html.motion-ready #about .story-header h1, html.motion-ready #about .story-header .story-deck, html.motion-ready #about .story-header .story-project-meta { opacity: 0; transform: translateY(10px); } html.motion-ready #about .story-header.is-visible .story-page-label, html.motion-ready #about .story-header.is-visible h1, html.motion-ready #about .story-header.is-visible .story-deck, html.motion-ready #about .story-header.is-visible .story-project-meta { opacity: 1; transform: none; transition: opacity var(--motion-slow) var(--ease-enter), transform var(--motion-slow) var(--ease-enter); } html.motion-ready #about .story-header.is-visible h1 { transition-delay: 55ms; } html.motion-ready #about .story-header.is-visible .story-deck { transition-delay: 105ms; } html.motion-ready #about .story-header.is-visible .story-project-meta { transition-delay: 135ms; } html.motion-ready #about .story-map-wire path, html.motion-ready #about .story-workflow svg path { stroke-dasharray: 100; stroke-dashoffset: 100; } html.motion-ready #about .story-visual.is-visible .story-map-wire path, html.motion-ready #about .story-problem.is-visible .story-workflow svg path { animation: about-wire-draw 520ms var(--ease-standard) forwards; } html.motion-ready #about .story-visual.is-visible .story-map-wire path:nth-child(2), html.motion-ready #about .story-problem.is-visible .story-workflow svg path:nth-child(2) { animation-delay: 85ms; } html.motion-ready #about .story-visual.is-visible .story-map-wire path:nth-child(3) { animation-delay: 170ms; } html.motion-ready #about .story-visual.is-visible .story-map-wire path:nth-child(4) { animation-delay: 255ms; } @keyframes about-wire-draw { to { stroke-dashoffset: 0; } } #about .story-timeline { position: relative; --timeline-progress: 0%; } html.motion-ready #about .story-timeline::after { content: ""; position: absolute; top: 8px; bottom: auto; left: 2px; width: 2px; height: var(--timeline-progress); background: var(--accent); opacity: .78; transition: height var(--motion-base) var(--ease-standard); pointer-events: none; } #about .story-step::after { transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); } html.motion-ready #about .story-step.is-reading::after { transform: scale(1.08); border-color: var(--accent); background: var(--accent); } html.motion-ready #about .story-step.is-reading .story-step-version > span, html.motion-ready #about .story-step.is-reading .story-step-content h3 { color: var(--text); transition: color var(--motion-fast) var(--ease-standard); } html.motion-ready #about .story-step.is-reading .story-step-version > span { color: var(--accent); } html.motion-ready #about .story-evaluation:not(.is-visible) .story-safety-findings, html.motion-ready #about .story-evaluation:not(.is-visible) .story-autonomy-finding { opacity: 0; transform: translateY(7px); } html.motion-ready #about .story-evaluation.is-visible .story-safety-findings, html.motion-ready #about .story-evaluation.is-visible .story-autonomy-finding { opacity: 1; transform: none; transition: opacity var(--motion-base) var(--ease-enter), transform var(--motion-base) var(--ease-enter); } html.motion-ready #about .story-evaluation.is-visible .story-autonomy-finding { transition-delay: 110ms; } html.motion-ready #about .story-conclusion-copy blockquote strong { color: var(--muted); } html.motion-ready #about .story-conclusion-copy .story-emphasis-action, html.motion-ready #about .story-conclusion-copy .story-emphasis-stop { color: var(--muted); transition: color var(--motion-base) var(--ease-standard); } html.motion-ready #about .story-conclusion.is-visible .story-emphasis-action { color: var(--text); transition-delay: 110ms; } html.motion-ready #about .story-conclusion.is-visible .story-emphasis-stop { color: var(--text); transition-delay: 230ms; } @media (hover: hover) { html.about-motion-active #about .story-step-content { transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); } html.about-motion-active #about .story-step-content:hover { border-color: #4b535b; background: color-mix(in srgb, var(--surface) 48%, transparent); } html.about-motion-active #about .story-map-node rect { transition: fill var(--motion-fast) var(--ease-standard), stroke var(--motion-fast) var(--ease-standard); } html.about-motion-active #about .story-map-node:hover rect { fill: var(--surface-raised); stroke: #69727b; } } html.about-motion-active .nav-links a { transition: color var(--motion-fast) var(--ease-standard); } html.about-motion-active .nav-links a::after { transform: scaleX(0); transform-origin: center; transition: transform var(--motion-fast) var(--ease-standard); } html.about-motion-active .nav-links a.active::after { transform: scaleX(1); } @media (max-width: 560px) { :root { --motion-base: 220ms; --motion-slow: 460ms; } html.motion-ready #about .story-step.is-reading::after { transform: scale(1.04); } } /* Homepage hero composition: a quiet evidence map keeps the copy and product story together. */ #home .home-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); gap: clamp(42px, 6vw, 88px); align-items: center; position: relative; margin-bottom: 48px; padding: 24px 0 10px; } #home .hero-copy { min-width: 0; max-width: 620px; position: relative; z-index: 1; } #home .hero-title { position: relative; } #home .product-category { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; margin: 0; padding: 7px 12px 7px 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-left: 2px solid var(--accent); border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), transparent 78%); color: #afb5c4; font-size: clamp(15px, 1.55vw, 21px); font-weight: 600; line-height: 1.35; letter-spacing: -.35px; white-space: nowrap; } #home .product-category::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent); } #home .hero-title h1 { position: relative; max-width: 620px; margin-top: 22px; font-size: clamp(44px, 4.1vw, 62px); line-height: 1.22; letter-spacing: -2.4px; } #home .hero-title h1::before { content: ""; position: absolute; left: -16px; top: .12em; bottom: .1em; width: 2px; background: linear-gradient(var(--accent), var(--success)); opacity: .7; pointer-events: none; } #home .hero-context { position: relative; max-width: 520px; margin-top: 30px; padding: 17px 0 0 20px; border-top: 1px solid var(--line-soft); border-left: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: none; } #home .hero-context::before { content: ""; position: absolute; left: -1px; top: -1px; width: 78px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .78; pointer-events: none; } #home .hero-context::after { content: ""; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border: 1px solid var(--accent); background: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent); pointer-events: none; } #home .hero-context > p { max-width: 465px; font-size: 16px; line-height: 1.8; color: #c5c9cf; } #home .cta { display: flex; align-items: center; gap: 22px; margin-top: 21px; } #home .hero-footnote { margin-top: 15px; } #home .hero-visual { min-width: 0; min-height: 338px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent), 0 18px 48px color-mix(in srgb, #000 20%, transparent); } #home .hero-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%), radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--success) 8%, transparent), transparent 32%); pointer-events: none; } #home .hero-visual::after { content: ""; position: absolute; inset: 13px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); pointer-events: none; } #home .hero-visual-head, #home .hero-visual-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; } #home .hero-visual-head { padding: 17px 20px 0; color: var(--muted); } #home .hero-visual-kicker { color: #cbd0d8; } #home .hero-visual-status { display: inline-flex; align-items: center; gap: 7px; color: var(--success); } #home .hero-visual-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 11%, transparent); } #home .hero-visual-diagram { display: block; width: 100%; height: auto; min-height: 260px; padding: 7px 17px 0; position: relative; z-index: 1; } #home .hero-visual-diagram .hero-wire { fill: none; stroke: url(#hero-wire); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; } #home .hero-visual-diagram .hero-wire-dashed { stroke: var(--line); stroke-dasharray: 2 7; stroke-width: 1; } #home .hero-visual-diagram .hero-wire-branch { stroke: color-mix(in srgb, var(--warning) 60%, var(--line)); stroke-dasharray: 3 5; } #home .hero-wire-node { fill: var(--bg); stroke-width: 1.2; } #home .hero-wire-node.node-accent { stroke: var(--accent); } #home .hero-wire-node.node-warning { stroke: var(--warning); } #home .hero-wire-node.node-success { stroke: var(--success); } #home .hero-visual-node rect { fill: color-mix(in srgb, var(--bg) 70%, var(--surface)); stroke: var(--line); stroke-width: 1; } #home .hero-visual-node-evidence rect { stroke: color-mix(in srgb, var(--accent) 62%, var(--line)); } #home .hero-visual-node-output rect { stroke: color-mix(in srgb, var(--success) 62%, var(--line)); } #home .hero-visual-diagram text { font-family: var(--mono); } #home .hero-node-index { fill: #87909b; font-size: 8px; letter-spacing: .1em; } #home .hero-node-title { fill: var(--text); font-family: var(--sans) !important; font-size: 13px; font-weight: 600; } #home .hero-node-meta { fill: var(--muted); font-size: 8px; } #home .hero-visual-gate path { fill: color-mix(in srgb, var(--warning) 8%, var(--surface)); stroke: var(--warning); stroke-width: 1.2; } #home .hero-gate-label { fill: var(--text); font-size: 10px; font-weight: 600; letter-spacing: .08em; } #home .hero-gate-meta { fill: var(--warning); font-size: 8px; text-anchor: middle; } #home .hero-visual-note rect { fill: color-mix(in srgb, var(--warning) 7%, var(--surface)); stroke: color-mix(in srgb, var(--warning) 40%, var(--line)); } #home .hero-visual-note text { fill: #d1b47f; font-size: 9px; } #home .hero-visual-foot { justify-content: flex-start; padding: 11px 20px 13px; border-top: 1px solid var(--line-soft); color: var(--muted); letter-spacing: .02em; text-transform: none; } #home .hero-visual-foot i { width: 16px; height: 1px; background: var(--line); } @media (max-width: 1100px) { #home .home-hero { grid-template-columns: minmax(0, 1fr) minmax(380px, .95fr); gap: 42px; } #home .hero-visual { min-height: 320px; } #home .hero-visual-diagram { padding-inline: 9px; } } @media (max-width: 900px) { #home .home-hero { grid-template-columns: 1fr; gap: 30px; align-items: start; margin-bottom: 38px; padding-top: 10px; } #home .hero-copy { max-width: 700px; } #home .hero-visual { min-height: 310px; } } @media (max-width: 620px) { #home .home-hero { gap: 28px; margin-bottom: 32px; padding-top: 5px; } #home .product-category { max-width: 100%; padding: 6px 9px 6px 8px; font-size: 14px; letter-spacing: -.3px; } #home .product-category::before { width: 5px; height: 5px; flex-basis: 5px; } #home .hero-title h1 { margin-top: 18px; font-size: 37px; line-height: 1.34; letter-spacing: -1.25px; } #home .hero-title h1::before { left: -9px; width: 1px; opacity: .58; } #home .hero-context { max-width: none; margin-top: 24px; padding: 14px 8px 0 14px; } #home .hero-context > p { font-size: 15px; line-height: 1.82; } #home .cta { gap: 17px; margin-top: 19px; flex-wrap: wrap; } #home .hero-footnote { margin-top: 13px; } #home .hero-visual { min-height: 0; } #home .hero-visual-head { padding: 14px 15px 0; font-size: 9px; } #home .hero-visual-diagram { min-height: 0; padding: 4px 2px 0; } #home .hero-visual-foot { gap: 8px; padding: 10px 15px 11px; font-size: 9px; } #home .hero-visual-foot i { width: 9px; } } @media (max-width: 360px) { #home .product-category { white-space: normal; align-items: flex-start; font-size: 13px; } #home .hero-title h1 { max-width: 100%; font-size: 34px; line-height: 1.3; letter-spacing: -1.35px; overflow-wrap: anywhere; word-break: break-all; } } /* Homepage hero v2: shared canvas, quiet evidence map, and clearer product hierarchy. */ #home { --hero-ink: #f3f5fa; --hero-muted: #a7aebe; --hero-accent: #9298ff; --hero-green: #98d1bd; position: relative; isolation: isolate; max-width: 1328px; padding: 44px 44px 80px; } #home::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 650px; pointer-events: none; background: radial-gradient(ellipse 58% 68% at 78% 42%, rgba(95, 103, 200, .095), transparent 75%), linear-gradient(rgba(185, 193, 219, .012) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 193, 219, .012) 1px, transparent 1px); background-size: auto, 56px 56px, 56px 56px; mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.86) 62%, transparent 100%); } #home > * { position: relative; z-index: 1; } #home .home-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 4.3vw, 62px); align-items: center; min-height: 478px; margin-bottom: 35px; padding: 5px 0 0; } #home .home-hero::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 42%; width: 58%; height: 100%; transform: translateY(-50%); pointer-events: none; background: radial-gradient(ellipse at center, rgba(100, 107, 205, .08), rgba(100, 107, 205, .018) 42%, transparent 72%); filter: blur(14px); } #home .hero-copy { max-width: 660px; } #home .hero-title { position: relative; } #home .product-category { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; max-width: 100%; margin: 0; padding: 7px 11px; border: 1px solid rgba(146, 152, 255, .18); border-radius: 999px; background: rgba(105, 111, 184, .09); color: #c2c7db; font-size: 10px; font-weight: 550; line-height: 1.25; letter-spacing: .105em; white-space: normal; } #home .product-category::before { content: none; } #home .category-dot { display: block; content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--hero-accent); box-shadow: 0 0 9px rgba(146, 152, 255, .38); } #home .product-category::after { display: none; content: none; } #home .product-category > span:not(.category-dot) { white-space: nowrap; } #home .product-category b { padding-left: 10px; border-left: 1px solid rgba(194, 199, 219, .2); color: #aab1c5; font-weight: 450; letter-spacing: .015em; } #home .hero-title h1 { max-width: 650px; margin-top: 23px; color: var(--hero-ink); font-size: clamp(48px, 4.15vw, 62px); font-weight: 650; line-height: 1.13; letter-spacing: -2.25px; text-wrap: pretty; } #home .hero-title h1::before { content: none; } #home .hero-title h1 span { color: #c6c9f9; background: linear-gradient(100deg, #c8caf8 8%, #aeb9ef 58%, #a9c7db 100%); background-clip: text; -webkit-text-fill-color: transparent; } #home .hero-context { max-width: 590px; margin-top: 23px; padding: 0; border: 0; background: none; } #home .hero-context::before, #home .hero-context::after { content: none; } #home .hero-context > p { max-width: 570px; color: var(--hero-muted); font-size: 16px; line-height: 1.82; letter-spacing: .01em; } #home .cta { gap: 24px; margin-top: 23px; } #home .cta .btn.primary { min-height: 47px; padding: 11px 17px; border: 1px solid rgba(199, 201, 255, .68); border-radius: 7px; background: #c6c8fb; color: #171a27; font-size: 14px; font-weight: 600; box-shadow: 0 5px 22px rgba(111, 116, 222, .14); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } #home .cta .btn.primary:hover { transform: translateY(-2px); background: #d5d6ff; box-shadow: 0 9px 28px rgba(111, 116, 222, .2); } #home .cta .text-link { color: #c1c5d0; font-size: 14px; transition: color .18s ease; } #home .cta .text-link:hover { color: #eef0ff; } #home .trust-list { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 21px; margin-top: 21px; color: #9199a8; font: 10px/1.5 var(--sans); letter-spacing: .025em; } #home .trust-list span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } #home .trust-list i { display: inline-grid; width: 13px; height: 13px; place-items: center; border: 1px solid rgba(152, 209, 189, .34); border-radius: 50%; color: var(--hero-green); font-size: 8px; font-style: normal; } #home .hero-footnote { display: none; } #home .hero-visual { width: 100%; min-width: 0; min-height: 0; position: relative; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; isolation: isolate; } #home .hero-visual::before { content: ""; position: absolute; z-index: -2; inset: 12% 6% 12%; background: radial-gradient(ellipse at 53% 42%, rgba(112, 119, 227, .19), rgba(91, 99, 182, .065) 45%, transparent 73%); filter: blur(35px); animation: hero-glow-drift 14s ease-in-out infinite alternate; pointer-events: none; } #home .hero-visual::after { content: ""; position: absolute; z-index: -1; top: 50%; left: 51%; width: 112%; aspect-ratio: 1.64; border: 1px solid rgba(160, 167, 235, .075); border-radius: 50%; transform: translate(-50%, -50%) rotate(-17deg); pointer-events: none; } #home .hero-visual-head, #home .hero-visual-foot { z-index: 2; font-size: 9px; letter-spacing: .13em; } #home .hero-visual-head { padding: 6px 6px 0; color: #858da2; } #home .hero-visual-kicker { display: inline-flex; align-items: center; gap: 8px; color: #acb3c7; } #home .hero-visual-kicker i { width: 5px; height: 5px; border-radius: 50%; background: var(--hero-accent); box-shadow: 0 0 9px rgba(146, 152, 255, .55); animation: hero-node-pulse 5.4s ease-in-out infinite; } #home .hero-visual-status { color: #9ba4b2; font-size: 9px; } #home .hero-visual-status i { background: var(--hero-green); box-shadow: 0 0 0 3px rgba(152, 209, 189, .09); } #home .hero-visual-diagram { display: block; position: relative; z-index: 1; width: 100%; min-height: 0; height: auto; padding: 0; overflow: visible; } #home .hero-visual-diagram .hero-wire { fill: none; stroke: url(#hero-wire); stroke-width: 1.2; stroke-linecap: round; opacity: .86; } #home .hero-visual-diagram .hero-wire-faint { stroke: rgba(158, 166, 211, .28); stroke-dasharray: 2 6; } #home .hero-wire-halo { fill: none; stroke: url(#hero-wire); stroke-width: 5; opacity: .16; } #home .hero-visual-diagram .hero-result-wire { stroke: #99c9b7; opacity: .6; } #home .hero-canvas-texture { pointer-events: none; } #home .hero-canvas-contours { fill: none; stroke: url(#hero-contour); stroke-width: .65; } #home .hero-ground-shadow { fill: #090b12; opacity: .45; filter: blur(10px); } #home .hero-wire-node { fill: #252938; stroke: #b4b8ff; stroke-width: 1; filter: drop-shadow(0 0 3px rgba(159, 165, 255, .22)); } #home .hero-wire-node.node-success { stroke: var(--hero-green); } #home .hero-evidence-node { --node-accent: #bbbcf2; } #home .hero-evidence-node.code { --node-accent: #a8cbea; } #home .hero-evidence-node.context { --node-accent: #a7dfc7; } #home .hero-evidence-node .hero-node-surface { stroke: url(#hero-rim); stroke-width: .8; filter: drop-shadow(0 7px 9px rgba(4, 7, 14, .38)); } #home .hero-evidence-node.history .hero-node-surface { fill: url(#hero-history-surface); } #home .hero-evidence-node.code .hero-node-surface { fill: url(#hero-code-surface); } #home .hero-evidence-node.context .hero-node-surface { fill: url(#hero-ready-surface); } #home .hero-evidence-node .hero-surface-grain { opacity: .55; } #home .hero-node-header { fill: rgba(168, 191, 227, .055); } #home .hero-node-icon { fill: none; stroke: var(--node-accent); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; } #home .hero-node-accent { fill: none; stroke: var(--node-accent); stroke-width: 1.5; stroke-linecap: round; opacity: .7; } #home .hero-node-detail { fill: none; stroke: var(--node-accent); stroke-width: 1.2; stroke-linecap: round; opacity: .24; } #home .hero-node-divider { fill: none; stroke: rgba(179, 204, 229, .12); stroke-width: .6; } #home .hero-code-syntax { fill: none; stroke: var(--node-accent); stroke-width: 1.6; stroke-linecap: round; opacity: .55; } #home .hero-visual-diagram .hero-node-language { fill: var(--node-accent); font: 7px var(--mono); letter-spacing: .025em; opacity: .75; } #home .hero-visual-diagram .hero-node-index { fill: var(--node-accent); font: 7px var(--mono); letter-spacing: .105em; } #home .hero-visual-diagram .hero-node-title { fill: #e0e4ef; font: 10px var(--sans); font-weight: 500; } #home .hero-issue-card { transform-box: fill-box; transform-origin: center; transition: transform .24s ease; } #home .hero-issue-card:hover { transform: translateY(-3px); } #home .hero-issue-card .hero-card-surface { fill: url(#hero-card); stroke: url(#hero-rim); stroke-width: 1; filter: drop-shadow(0 13px 16px rgba(3, 5, 12, .48)); } #home .hero-visual-diagram .hero-surface-grain { fill: url(#hero-grain-pattern); stroke: none; pointer-events: none; } #home .hero-visual-diagram .hero-surface-brushed { fill: url(#hero-brushed-pattern); stroke: none; pointer-events: none; } #home .hero-visual-diagram .hero-surface-sheen { fill: url(#hero-surface-light); stroke: none; pointer-events: none; } #home .hero-visual-diagram .hero-edge-light { fill: none; stroke: url(#hero-top-light); stroke-width: .8; stroke-linecap: round; } #home .hero-card-header { fill: rgba(187, 204, 246, .045); } #home .hero-card-reflection { fill: url(#hero-glass-reflection); pointer-events: none; } #home .hero-card-fold { fill: rgba(182, 200, 240, .1); stroke: rgba(194, 211, 248, .15); stroke-width: .6; } #home .hero-card-perforation { fill: url(#hero-microdots); opacity: .32; } #home .hero-card-accent { fill: none; stroke: #b1b9fb; stroke-width: 1.5; opacity: .65; } #home .hero-issue-divider { stroke: rgba(219, 224, 241, .1); stroke-width: .7; } #home .hero-issue-card > .hero-issue-description { stroke: rgba(204, 211, 235, .24); stroke-width: 1.4; stroke-linecap: round; } #home .hero-issue-index { fill: #bfc6dc; font: 8px var(--mono); letter-spacing: .055em; } #home .hero-issue-title { fill: #f0f2fa; font: 14px var(--sans); font-weight: 600; letter-spacing: -.2px; } #home .hero-issue-tag { fill: rgba(159, 166, 248, .14); stroke: rgba(186, 191, 255, .24); stroke-width: .6; } #home .hero-issue-tag-text { fill: #c4c9fc; font: 7px var(--mono); } #home .hero-status-socket { fill: rgba(7, 12, 20, .38); stroke: rgba(185, 199, 232, .13); stroke-width: .7; } #home .hero-issue-spark { fill: #bfbaff; filter: drop-shadow(0 0 4px rgba(164,162,255,.65)); } #home .hero-ready-card .hero-ready-surface { fill: url(#hero-ready-surface); stroke: url(#hero-rim); stroke-width: .8; filter: drop-shadow(0 10px 12px rgba(3, 8, 9, .35)); } #home .hero-ready-accent { fill: none; stroke: #a8e6cd; stroke-width: 2; } #home .hero-ready-facet { fill: rgba(146, 208, 183, .035); } #home .hero-ready-seal { fill: rgba(143, 214, 184, .1); stroke: rgba(173, 230, 204, .48); stroke-width: .8; } #home .hero-ready-check { fill: none; stroke: #b9ecd7; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } #home .hero-evidence-meter { fill: none; stroke: #a0d8c2; stroke-width: 2; stroke-linecap: round; opacity: .8; } #home .hero-evidence-meter.meter-empty { stroke: rgba(171, 207, 193, .2); } #home .hero-ready-kicker { fill: #b5c9c3; font: 6px var(--mono); letter-spacing: .015em; } #home .hero-ready-title { fill: #b5e1d0; font: 13px var(--mono); font-weight: 600; letter-spacing: .02em; } #home .hero-ready-meta { fill: #c3d9d1; font: 7px var(--mono); } #home .hero-ready-note { fill: #b1c0bc; font: 7px var(--sans); } #home .hero-visual-foot { justify-content: center; gap: 12px; padding: 0 6px 4px; border: 0; color: #8991a3; font-size: 8px; letter-spacing: .055em; } #home .hero-visual-foot i { width: 19px; background: rgba(157, 165, 202, .22); } #home .hero-visual-foot .hero-foot-accent { color: #a9cfc1; } .nav-inner { max-width: 1328px; min-height: 76px; padding-inline: 44px; } .nav-links { gap: 30px; } .nav-links a { color: #9ca3b2; font-size: 13px; } .nav-links a.active::after { right: auto; bottom: -4px; width: 15px; height: 2px; border-radius: 2px; background: var(--accent); } @keyframes hero-node-pulse { 0%, 100% { opacity: .65; box-shadow: 0 0 0 rgba(146,152,255,0); } 50% { opacity: 1; box-shadow: 0 0 9px rgba(146,152,255,.55); } } @keyframes hero-glow-drift { from { transform: translate3d(-1%, -1%, 0) scale(.98); opacity: .72; } to { transform: translate3d(1.5%, 1%, 0) scale(1.04); opacity: 1; } } @media (min-width: 1500px) { #home { padding-top: 51px; } #home .home-hero { min-height: 495px; } } @media (max-width: 1100px) { .nav-inner { padding-inline: 32px; } .nav-links { gap: 22px; } .nav-links a.active::after { bottom: -4px; } #home { padding-inline: 32px; } #home .home-hero { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 30px; } #home .hero-title h1 { font-size: clamp(46px, 5vw, 56px); letter-spacing: -1.9px; } #home .hero-visual-foot { gap: 8px; } } @media (max-width: 900px) and (min-width: 761px) { #home .home-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0; padding-top: 0; align-items: start; } #home .hero-copy { max-width: 680px; } #home .hero-title h1 { max-width: 680px; font-size: clamp(46px, 6.4vw, 52px); letter-spacing: -1.9px; } #home .hero-context { max-width: 620px; margin-top: 18px; } #home .hero-context > p { font-size: 15px; } #home .hero-visual { justify-self: center; width: min(100%, 500px); margin-top: 0; } #home .hero-visual-foot { justify-content: center; } } @media (max-width: 760px) { #home { padding-top: 37px; } #home .home-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 0; padding-top: 0; } #home .hero-copy { max-width: 680px; } #home .hero-title h1 { max-width: 680px; font-size: clamp(44px, 7vw, 56px); } #home .hero-context { max-width: 620px; margin-top: 18px; } #home .hero-visual { justify-self: end; width: min(100%, 570px); margin-top: -1px; } #home .hero-visual-foot { justify-content: flex-end; padding-right: 10px; } } @media (max-width: 620px) { .nav-inner { padding-inline: 20px; } .nav-links { gap: 0; } .nav-links a.active::after { bottom: 0; } #home { padding: 30px 20px 55px; } #home::before { height: 720px; background-size: auto, 46px 46px, 46px 46px; } #home .home-hero { gap: 24px; margin-bottom: 30px; } #home .product-category { gap: 7px 8px; padding: 7px 10px; font-size: 9px; } #home .product-category b { padding-left: 8px; } #home .hero-title h1 { margin-top: 20px; font-size: clamp(37px, 9.7vw, 42px); line-height: 1.23; letter-spacing: -2.1px; } #home .hero-context { margin-top: 17px; } #home .hero-context > p { font-size: 14px; line-height: 1.8; } #home .hero-desktop-break { display: none; } #home .cta { gap: 17px; margin-top: 18px; } #home .cta .btn.primary { min-height: 44px; padding: 10px 13px; font-size: 13px; } #home .cta .text-link { font-size: 12px; } #home .trust-list { gap: 9px 13px; margin-top: 15px; font-size: 9px; } #home .hero-visual { width: 100%; margin-top: 1px; } #home .hero-visual-head { padding: 0 2px; font-size: 8px; } #home .hero-visual-status { font-size: 8px; } #home .hero-visual-foot { gap: 7px; justify-content: center; padding: 0 0 2px; font-size: 7px; letter-spacing: .035em; } #home .hero-visual-foot i { width: 10px; } } @media (max-width: 390px) { #home { padding-inline: 18px; } #home .hero-title h1 { font-size: 37px; letter-spacing: -2.35px; } #home .product-category b { font-size: 9px; } #home .trust-list { gap: 8px 10px; font-size: 8px; } #home .hero-visual-foot { gap: 5px; font-size: 6px; } #home .hero-visual-foot i { width: 8px; } } @media (prefers-reduced-motion: reduce) { #home .hero-visual::before, #home .hero-visual-kicker i { animation: none; } #home .hero-issue-card, #home .cta .btn.primary { transition: none; } }