.capability-gallery { margin-top:52px }
.capability-selectors { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:28px }
.capability-selectors button { position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:15px;text-align:left;border:0;border-top:2px solid var(--line);background:none;padding:23px 12px 24px 0;color:var(--ink);transition:border-color .2s,color .2s }
.capability-selectors button[aria-pressed="true"] { border-color:var(--blue) }
.capability-number { font:11px var(--mono);color:var(--muted) }
.capability-selectors strong { font-size:24px;font-weight:750;letter-spacing:-.045em;line-height:1.12;max-width:260px }
.capability-text { font-size:15px;line-height:1.6;color:var(--ink-soft) }
.capability-arrow { position:absolute;right:5px;top:20px;font-size:24px;color:var(--muted);transition:transform .2s,color .2s }
.capability-selectors button[aria-pressed="true"] .capability-arrow { color:var(--blue);transform:rotate(45deg) }
.capability-theatre { border:1px solid #d3dcee;background:radial-gradient(ellipse at 72% 28%,#e6eeff 0%,#f8faff 56%,#eef3ff 100%);border-radius:16px;padding:24px 40px 20px;overflow:hidden }
.motion-topline { display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;line-height:1.35;color:#293855 }
.motion-topline>div:first-child { display:flex;align-items:center;gap:10px }
.live-indicator { flex:none;width:7px;height:7px;background:var(--blue);box-shadow:0 0 0 4px #dce5ff;border-radius:50% }
.motion-actions { display:flex;gap:12px;white-space:nowrap }
.motion-actions button { border:0;background:transparent;padding:7px 3px;font:11px var(--mono);color:#425471 }
.motion-actions button:disabled { opacity:.4;cursor:default }
.capability-canvas { margin:15px auto 0;max-width:1100px;min-height:570px }
.capability-canvas .s2r,.capability-canvas .rl,.capability-canvas .at { margin:0;padding:20px 0 10px;overflow:visible }
.capability-canvas .s2r-flow,.capability-canvas .rl-scene,.capability-canvas .at-scene { font-family:Satoshi,Arial,sans-serif }
.capability-canvas .material-symbols-outlined { display:inline-flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;flex:none;font-style:normal }
.capability-canvas .material-symbols-outlined svg { width:100%;height:100% }
.capability-canvas .rl-tabs,.capability-canvas .at-tabs { margin:24px 0 4px;list-style:none;padding:0 }
.capability-canvas .rl-tabs button,.capability-canvas .at-tabs button { font-family:Satoshi,Arial,sans-serif }
.capability-gallery[data-paused="true"] .capability-canvas *,.capability-canvas [data-playing="false"] * { animation-play-state:paused!important }
.motion-caption { display:flex;gap:20px;border-top:1px solid #d8e1f0;padding-top:18px;margin-top:12px;font-size:12px;line-height:1.5;color:#61718b }
.motion-caption>span { flex:none;font:10px var(--mono);text-transform:uppercase;letter-spacing:.03em;color:#344864;padding-top:3px }
.mobile-demo { font-size:14px;line-height:1.5;min-height:390px;max-width:520px;margin:auto }
.mobile-demo b { font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.025em }
.mobile-sources,.mobile-agents { display:flex;flex-wrap:wrap;gap:6px;justify-content:center }
.mobile-sources span,.mobile-agents span { padding:8px 11px;border:1px solid #dbe3f2;background:#fff;border-radius:8px;font-size:11px }
.mobile-agents { margin:15px 0 }
.mobile-agents span { background:#e4ecff;color:#213e94;border-color:#cbd9fc }
.mobile-wire { width:2px;height:35px;background:#d3dcf4;margin:0 auto;position:relative }
.mobile-wire::after { content:"";position:absolute;top:0;width:4px;height:12px;left:-1px;background:#1d46ff;border-radius:2px;animation:mobile-pulse 2.2s infinite }
@keyframes mobile-pulse { from{transform:translateY(0);opacity:0}25%{opacity:1}to{transform:translateY(23px);opacity:0} }
.mobile-process { display:flex;align-items:center;gap:12px;padding:18px;border:1px solid #cad8fc;background:#fff;border-radius:12px;box-shadow:0 5px 20px #2b4ca30c }
.mobile-process .material-symbols-outlined { color:var(--blue);width:26px;height:26px }
.mobile-process p { font-size:12px;color:#78859b;margin-top:4px }
.mobile-result { padding:20px;margin-top:10px;background:#fff;border:1px solid #d4dff3;border-radius:12px;box-shadow:0 8px 24px #2148860b;transition:border-color .5s,box-shadow .5s }
.mobile-result>span,.mobile-context>span { display:block;font:9px var(--mono);letter-spacing:.08em;color:#6c7c94;margin-bottom:10px }
.mobile-result>b { display:block;margin-bottom:10px }
.mobile-result p { font-size:13px;color:#536680;line-height:1.9 }
.mobile-result em { display:block;margin-top:12px;padding:10px;background:#edf3ff;border-radius:6px;font-size:11px;font-style:normal;color:#28458b }
.mobile-question { padding:13px 17px;background:#1b3e9c;color:white;border-radius:12px 12px 2px 12px;margin:0 0 18px auto;max-width:92%;font-size:13px }
.mobile-result label { display:block;font-size:12px;font-weight:650;margin:15px 0 7px }
.mobile-options { display:flex;gap:5px;flex-wrap:wrap }
.mobile-options span { font-size:11px;padding:5px 9px;border:1px solid #d8e2f5;border-radius:5px }
.mobile-options span:first-child { background:#e5edff;color:#244892;border-color:#b9cdf6 }
.mobile-field { font-size:11px;line-height:1.5;padding:10px;border:1px solid #dce4f2;border-radius:6px;color:#7b8ca5 }
.mobile-addition { transition:opacity .5s,max-height .5s;max-height:120px;opacity:1 }
.phase-0 .mobile-addition,.phase-1 .mobile-addition { opacity:0 }
.phase-2 .mobile-result,.phase-3 .mobile-result { border-color:#8daaf2;box-shadow:0 8px 24px #21488618 }
.mobile-context { background:#142c4b;color:#f7f9ff;border-radius:12px;padding:20px }
.mobile-context>span { color:#a9c6f6 }
.mobile-context ul { padding:0;list-style:none;font-size:12px;line-height:1.95;margin:13px 0 0;color:#d8e9ff }
.mobile-context .excluded { color:#7e91aa }
@media(max-width:1199px) {
 .capability-theatre { padding:20px 24px }
 .capability-canvas { min-height:480px }
 .capability-selectors strong { font-size:22px }
 .capability-text { font-size:14px }
}
@media(max-width:959px) {
 .capability-gallery { margin-top:32px }
 .capability-selectors { grid-template-columns:1fr;gap:0;margin-bottom:22px }
 .capability-selectors button { padding:15px 35px 15px 30px;gap:6px;border-top:1px solid var(--line) }
 .capability-number { position:absolute;left:0;top:22px;font-size:9px }
 .capability-selectors strong { max-width:none;font-size:22px }
 .capability-text { display:none }
 .capability-selectors button[aria-pressed="true"] .capability-text { display:block;font-size:13px }
 .capability-selectors button[aria-pressed="true"] { border-top:2px solid var(--blue) }
 .capability-arrow { font-size:20px;top:17px }
 .capability-theatre { padding:18px 16px 16px;border-radius:12px }
 .motion-topline { align-items:flex-start;font-size:12px;gap:10px }
 .motion-topline>div:first-child { align-items:flex-start;gap:8px;max-width:225px }
 .live-indicator { margin-top:5px;width:5px;height:5px }
 .motion-actions { flex-direction:column;gap:0;align-items:flex-end }
 .motion-actions button { padding:2px 0;font-size:10px }
 .capability-canvas { min-height:0;margin-top:25px }
 .motion-caption { flex-direction:column;gap:6px;font-size:11px;margin-top:20px;padding-top:15px }
 }
@media(prefers-reduced-motion:reduce) {
 .mobile-wire::after { animation:none;display:none }
 .capability-selectors button,.capability-arrow,.mobile-result,.mobile-addition { transition:none }
}
@media(min-width:960px) { .capability-text { display:none } .capability-selectors { margin-bottom:18px } .capability-selectors button { padding-bottom:12px;gap:10px } }
.motion-intro { margin-top:16px;max-width:900px;font-size:15px;line-height:1.5;color:#64738a }
.capability-theatre { scroll-margin-top:110px }
@media(max-width:959px) { .motion-intro { display:none } }
.capability-canvas [data-playing="false"] .s2r-source { opacity:1;transform:translateY(-50%) }

.mobile-addition { min-height:85px }

.capability-gallery[data-paused="true"] .s2r-flow,
.capability-gallery[data-paused="true"] .rl-scene,
.capability-gallery[data-paused="true"] .at-scene { opacity:1!important;transition:none }

.process-page main { padding-top:40px; }
.process-back { display:inline-flex; margin-bottom:56px; color:var(--muted); font:500 10px/1.6 var(--mono); text-transform:uppercase; }
.process-page h1 { margin-top:26px; font-size:clamp(54px,5.5vw,80px); }
.process-page .section-heading { margin-bottom:0; }
.process-page .capability-theatre { border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; padding:26px 0; background:none; }
.process-page .capability-canvas { margin-top:30px; }
.process-page .motion-topline,.process-page .motion-actions button { color:var(--ink); }
.process-page .motion-intro,.process-page .motion-caption { color:var(--muted); }
.process-page .live-indicator { box-shadow:none; border-radius:0; background:var(--orange); }
.process-page .motion-caption { border-color:var(--line); }
.process-page .motion-caption>span { color:var(--muted); }
.process-page .capability-canvas * { box-shadow:none!important; }
.process-page .capability-canvas :is(.s2r-summary,.s2r-record,.rl-chat,.rl-preview,.rl-doc,.rl-form,.at-chat,.at-context,.at-card,.at-answer,.mobile-result,.mobile-context,.mobile-process) { border-radius:0!important; }
@media(max-width:600px) {
 .process-page main { padding-top:28px; }
 .process-back { margin-bottom:36px; }
 .process-page h1 { font-size:clamp(43px,11.8vw,58px); }
 .process-page .capability-theatre { padding:22px 0; }
}

/* The scene gallery uses the original Playfield page shell. */
.process-page { --ink-soft: var(--ink-2); }
.process-page .shell { width:min(var(--max),calc(100% - var(--gutter)*2)); margin:0 auto; }
.process-page main { padding-bottom:100px; border-bottom:1px solid var(--line); }
.process-page .section-heading { display:grid; grid-template-columns:1.1fr .7fr; gap:80px; align-items:end; }
.process-page h1 { margin:26px 0 0; line-height:.94; font-weight:800; }
.process-page .kicker { margin:0; color:var(--muted); font:11px var(--mono); text-transform:uppercase; }
.process-page .section-intro { margin:0; max-width:420px; color:var(--ink-2); font-size:20px; line-height:1.4; }
.process-page button { cursor:pointer; }
@media(max-width:860px) { .process-page .section-heading { grid-template-columns:1fr; gap:30px; } .process-page .section-intro { font-size:17px; } }