/* Product illustration. Styles stay inside this section. */
.context-animation { display: none; }
.js .context-animation { display: block; }
#context-flow { --mono: ui-monospace, SFMono-Regular, Consolas, monospace; font: 15px/1.5 var(--sans); }
#context-flow button { background: none; border: 0; color: inherit; cursor: pointer; touch-action: manipulation; }
#context-flow button:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.context-fallback { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.context-fallback h3 { margin-bottom: 12px; }
.context-fallback p + p { margin-top: 8px; color: var(--muted); }
#context-flow .scenario-picker { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:29px;padding-bottom:14px;border-bottom:1px solid var(--line) }
#context-flow .scenario-tabs { display:flex;gap:5px;flex-wrap:wrap }
#context-flow .scenario-tab { padding:9px 14px;border:1px solid transparent;border-radius:6px;color:var(--muted);font-size:12px;min-height:38px }
#context-flow .scenario-tab:hover { color:var(--ink);background:#181b11 }
#context-flow .scenario-tab[aria-pressed="true"] { color:var(--lime);border-color:#485433;background:#1a2011 }
#context-flow .scenario-detail { font:9px/1.5 var(--mono);color:var(--muted);text-align:right }
#context-flow .scene { height:520px;position:relative;margin:4px -3% 0;isolation:isolate }
#context-flow .scene:after { content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 45% 55%,#8fae2810,transparent 60%);pointer-events:none }
#context-flow canvas { width:100%;height:100%;display:block;position:absolute;inset:0;z-index:-1 }
#context-flow .zone { position:absolute;top:39px;font:9px var(--mono);letter-spacing:2px;text-transform:uppercase;color:#817d70 }
#context-flow .zone-query { left:3% }
#context-flow .zone-graph { left:36% }
#context-flow .zone-answer { left:77% }
#context-flow .zone span { color:#d4cebf;margin-right:10px }
#context-flow .query { position:absolute;left:3%;top:146px;width:245px;transition:opacity .5s }
#context-flow .query-tag, #context-flow .context-tag { font:9px var(--mono);text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin-bottom:11px }
#context-flow .query-body { position:relative;padding:17px 19px;border:1px solid #454b2d;border-radius:12px;background:linear-gradient(140deg,#212719,#14170f);box-shadow:0 10px 45px #0005,0 0 32px #c8f16906;font-size:16px;line-height:1.45;min-height:82px;letter-spacing:-.3px }
#context-flow .query-body:after { content:"";position:absolute;right:-4px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime) }
#context-flow .query-foot { margin-top:12px;display:flex;gap:6px;font:9px var(--mono);color:#9eaa80;align-items:center }
#context-flow .query-foot i { width:4px;height:4px;border-radius:50%;background:var(--lime) }
#context-flow .cursor { color:var(--lime);padding-left:2px }
#context-flow .query-note { font:10px var(--mono);color:#7d786b;position:absolute;left:3%;top:290px;line-height:1.7 }
#context-flow .graph-caption { position:absolute;left:40%;bottom:25px;transform:translateX(-50%);text-align:center;pointer-events:none }
#context-flow .graph-caption strong { display:block;font:12px var(--mono);color:#c2c8b2;letter-spacing:4px }
#context-flow .graph-caption span { display:block;color:#7d806e;font:9px var(--mono);margin-top:7px;letter-spacing:1px }
#context-flow .graph-label { position:absolute;font:10px var(--mono);white-space:nowrap;pointer-events:none;transition:opacity .2s;color:#b2b99f;text-shadow:0 2px 8px #000,0 0 15px #0c0b09;display:flex;align-items:center;gap:7px }
#context-flow .graph-label:before { content:"";width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor }
#context-flow .graph-label.is-found { color:var(--lime) }
#context-flow .result { position:absolute;left:77%;width:20%;top:120px }
#context-flow .result:before { content:"";position:absolute;left:-18px;top:0;bottom:0;width:1px;background:linear-gradient(transparent,#626c3b,transparent) }
#context-flow .context-tag { color:var(--lime);display:flex;align-items:center;gap:8px }
#context-flow .context-tag:before { content:"";width:5px;height:5px;border-radius:50%;background:currentColor }
#context-flow .fragments { display:grid;gap:8px;margin-top:17px }
#context-flow .fragment { border:1px solid #34372a;border-radius:7px;padding:10px 12px;background:#161910e8;opacity:0;transform:translateX(-7px);transition:opacity .25s,transform .3s,border-color .3s }
#context-flow .fragment.is-visible { opacity:1;transform:translateX(0);border-color:#576637 }
#context-flow .fragment small { font:8px var(--mono);letter-spacing:1px;color:#9ca486;text-transform:uppercase;display:block;margin-bottom:3px }
#context-flow .fragment p { font-size:12px;color:#d4d7c7 }
#context-flow .fragment b { color:var(--lime);font-weight:400 }
#context-flow .answer { position:relative;margin-top:19px;opacity:0;transform:translateY(5px);transition:opacity .35s,transform .35s }
#context-flow .answer.is-visible { opacity:1;transform:none }
#context-flow .answer .answer-label { font:9px var(--mono);letter-spacing:1px;color:var(--lime);margin-bottom:8px }
#context-flow .answer p { font-size:17px;line-height:1.5;letter-spacing:-.4px }
#context-flow .answer p strong { font-weight:500;color:var(--lime) }
#context-flow .citations { display:flex;gap:6px;margin-top:13px;color:#b6bea4;font:8px var(--mono) }
#context-flow .citations span { padding:3px 5px;border:1px solid #363c29;border-radius:3px }
#context-flow .result-wait { position:absolute;left:77%;top:89px;font:9px var(--mono);color:#8d947d;letter-spacing:.5px }
#context-flow .playback { display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);padding:23px 0 0 }
#context-flow .transport { display:flex;gap:8px }
#context-flow .transport button { width:36px;height:36px;border:1px solid #343128;border-radius:50%;display:grid;place-items:center;color:#c9c5b7;padding:0 }
#context-flow .transport button:hover { color:var(--lime);border-color:#66733f }
#context-flow .pause-symbol { width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor }
#context-flow .play-symbol { width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor;margin-left:2px }
#context-flow .replay-symbol { font-size:20px;line-height:1 }
#context-flow .chapters { display:grid;grid-template-columns:repeat(5,1fr);gap:22px;flex:1 }
#context-flow .chapter { text-align:left;padding:0;min-height:40px;color:#8a8578 }
#context-flow .chapter-label { display:flex;align-items:center;gap:9px;font-size:12px;white-space:nowrap }
#context-flow .chapter-label small { font:9px var(--mono);color:#777362 }
#context-flow .chapter[aria-current="step"] { color:var(--ink) }
#context-flow .chapter[aria-current="step"] small { color:var(--lime) }
#context-flow .track { display:block;height:2px;background:#2a2a20;margin-top:13px;overflow:hidden }
#context-flow .track i { display:block;width:0;height:100%;background:var(--lime) }
#context-flow .playback-note { font:9px var(--mono);color:#aaa48f;text-align:right;white-space:nowrap }
#context-flow .footer { display:flex;justify-content:space-between;gap:25px;padding:22px 0 26px;color:#7e796c;font:9px/1.6 var(--mono) }
#context-flow .footer span:last-child { color:#a5ab91 }
#context-flow .stage-description { font:11px var(--mono);color:#b0b99c;letter-spacing:.2px;margin-top:18px;min-height:18px;text-align:center }
@media(min-width:1500px) {
#context-flow .scene { height:580px }
#context-flow .query { top:175px }
#context-flow .query-note { top:320px }
#context-flow .result { top:150px }
#context-flow .result-wait { top:119px }
}
@media(max-width:1050px) {
#context-flow .page { padding:0 4% }
#context-flow .intro-copy { max-width:240px }
#context-flow .query { width:185px;top:150px }
#context-flow .query-body { font-size:14px;padding:14px }
#context-flow .query-note { font-size:9px;max-width:160px }
#context-flow .result { left:76%;width:21%;top:110px }
#context-flow .zone-answer, #context-flow .result-wait { left:76% }
#context-flow .fragment { padding:9px }
#context-flow .fragment p { font-size:11px }
#context-flow .answer p { font-size:15px }
#context-flow .chapter-label { font-size:11px;gap:5px }
#context-flow .chapters { gap:16px }
#context-flow .playback { gap:15px }
}
@media(max-width:700px) {
#context-flow .topbar { height:68px }
#context-flow .study { font-size:8px;gap:9px }
#context-flow .brand { font-size:20px }
#context-flow .brand small { font-size:12px }
#context-flow .intro { padding-top:35px;display:block }
#context-flow .intro-copy { max-width:330px;margin-top:18px;font-size:13px }
#context-flow h1 { font-size:44px;letter-spacing:-2px }
#context-flow .eyebrow { font-size:9px }
#context-flow .scene { height:810px;margin-top:15px }
#context-flow .zone { top:10px;font-size:8px }
#context-flow .zone-query { left:5% }
#context-flow .zone-graph { left:53% }
#context-flow .zone-answer { top:485px;left:5% }
#context-flow .query { left:5%;top:42px;width:235px }
#context-flow .query-body { min-height:61px;font-size:14px }
#context-flow .query-foot { font-size:8px }
#context-flow .query-note { display:none }
#context-flow .graph-caption { left:50%;top:448px;bottom:auto;width:250px }
#context-flow .graph-caption strong { font-size:10px }
#context-flow .graph-caption span { font-size:8px }
#context-flow .result { top:538px;left:5%;width:90%;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:0 22px }
#context-flow .result:before { display:none }
#context-flow .context-tag { grid-column:1/-1;font-size:8px;margin-bottom:0 }
#context-flow .fragments { gap:5px;margin-top:11px }
#context-flow .fragment { padding:7px 9px }
#context-flow .fragment small { font-size:7px;margin-bottom:2px }
#context-flow .fragment p { font-size:10px }
#context-flow .answer { margin-top:10px;padding-top:0 }
#context-flow .answer p { font-size:17px }
#context-flow .answer .answer-label { font-size:8px }
#context-flow .citations { font-size:7px;flex-wrap:wrap;margin-top:9px }
#context-flow .result-wait { left:auto;right:5%;top:486px;font-size:8px }
#context-flow .playback { flex-wrap:wrap;padding-top:18px;gap:12px }
#context-flow .chapters { order:3;flex-basis:100%;gap:13px;margin-top:4px }
#context-flow .chapter-label { font-size:10px;gap:5px;flex-wrap:wrap }
#context-flow .chapter-label small { font-size:8px }
#context-flow .playback-note { margin-left:auto }
#context-flow .track { margin-top:9px }
#context-flow .stage-description { text-align:left;font-size:10px;margin-top:20px;min-height:30px }
#context-flow .footer { font-size:8px;padding-top:14px }
#context-flow .footer span:first-child { max-width:210px }
}
@media(max-width:700px) {
#context-flow .chapters { min-width:0;grid-template-columns:repeat(4,minmax(0,1fr)) }
#context-flow .chapter { min-width:0 }
#context-flow .chapter-label { white-space:normal;min-height:30px;align-content:start }
}
@media(min-width:701px) and (max-width:950px) {
#context-flow .scene { height:600px }
}
@media(max-width:700px) {
#context-flow .scenario-picker { align-items:flex-start;flex-direction:column;gap:10px;margin-top:24px }
#context-flow .scenario-detail { text-align:left }
#context-flow .scenario-tab { padding:8px 11px;min-height:44px }
#context-flow .scene { height:850px }
}
@media(max-width:420px) {
#context-flow .study { flex-direction:column;align-items:flex-end;gap:4px;font-size:7.5px;letter-spacing:1.2px }
}
#context-flow .history { position:absolute;left:3%;top:78px;width:245px }
#context-flow .history-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font:9px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted) }
#context-flow .history-head span { color:#b1bb93;font-size:8px;letter-spacing:.2px }
#context-flow .history-list { display:grid;gap:7px;min-height:248px;align-content:start }
#context-flow .history-item { position:relative;border-left:1px solid #3b4230;padding:9px 12px;background:linear-gradient(90deg,#1b2012b3,#11120d70);opacity:0;transform:translateX(-9px);transition:opacity .3s,transform .4s,border-color .3s }
#context-flow .history-item.is-visible { opacity:1;transform:none }
#context-flow .history-item.is-linked { border-left-color:#a3cb47 }
#context-flow .history-item:after { content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;border-radius:50%;background:#a3cb47;opacity:0;box-shadow:0 0 10px #c8f16955 }
#context-flow .history-item.is-linked:after { opacity:1 }
#context-flow .history-item header { display:flex;justify-content:space-between;gap:7px;font:8px/1.5 var(--mono);color:#9ba587;margin-bottom:4px }
#context-flow .history-item header > span { font-size:7px;color:#b5aa86 }
#context-flow .history-item p { font-size:12px;line-height:1.45;color:#d8d7c8 }
#context-flow .history-item.is-superseded .prior-date { text-decoration:line-through;color:#928d7e }
#context-flow .history-item.is-missing { border-left-color:#b28c52 }
#context-flow .history-item.is-missing header { color:#d0ac72 }
#context-flow .history-status { margin-top:10px;font:8px var(--mono);color:#8d9975;letter-spacing:.3px }
#context-flow .query { top:410px;opacity:0;transform:translateY(7px);transition:opacity .3s,transform .3s }
#context-flow .query.is-visible { opacity:1;transform:none }
#context-flow .query-note { display:none }
#context-flow .scene { height:650px }
#context-flow .chapters { grid-template-columns:repeat(5,minmax(0,1fr));min-width:0 }
#context-flow .chapter { min-width:0 }
#context-flow .chapter-label { white-space:normal }
#context-flow .app-sprite { position:absolute;width:0;height:0;overflow:hidden;pointer-events:none }
#context-flow .app-logo { display:block;width:15px;height:15px;flex:none;overflow:visible }
#context-flow .history-source { display:flex;align-items:center;gap:7px;min-width:0 }
#context-flow .history-item header { align-items:center }
#context-flow .history-source .source-name { font:inherit;color:inherit }
#context-flow .fragment small { display:flex;align-items:center;gap:7px;line-height:1.5 }
#context-flow .fragment .app-logo { width:13px;height:13px }
#context-flow .history-item b { font-weight:500;color:#e0e4ce }
@media(min-width:701px) and (max-width:1050px) {
#context-flow .scene { height:680px }
#context-flow .history { width:185px }
#context-flow .history-item { padding:8px 9px }
#context-flow .history-item p { font-size:11px }
#context-flow .history-item header { font-size:7px }
#context-flow .history-list { min-height:258px }
#context-flow .query { top:430px }
#context-flow .chapter-label { font-size:10px;gap:5px;min-height:30px;align-content:start;flex-wrap:wrap }
}
@media(max-width:700px) {
#context-flow .scene { height:1370px }
#context-flow .history { left:5%;top:43px;width:90% }
#context-flow .history-list { min-height:258px }
#context-flow .history-item { padding:9px 12px }
#context-flow .history-item p { font-size:12px }
#context-flow .history-item header { font-size:8px }
#context-flow .history-head { font-size:8px }
#context-flow .query { left:5%;top:385px;width:90% }
#context-flow .query-body { min-height:67px }
#context-flow .zone-graph { left:auto;right:5% }
#context-flow .graph-caption { top:915px }
#context-flow .zone-answer { top:971px }
#context-flow .result-wait { top:972px }
#context-flow .result { top:1025px }
#context-flow .chapters { grid-template-columns:repeat(5,minmax(0,1fr));gap:9px }
#context-flow .chapter-label { font-size:9px;min-height:42px }
#context-flow .chapter-label small { font-size:7px }
}
@media(prefers-reduced-motion:reduce) {
#context-flow * { transition:none!important }
}