.playground-page { --good:#117c72; --warn:#a66c10; --bad:#ae3e36; }
.current-authority { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:-.7rem 0 1rem; padding:.6rem .75rem; border-left:3px solid #526474; background:color-mix(in srgb,var(--panel-strong) 60%,transparent); font-size:.78rem; font-weight:800; letter-spacing:.035em; }
#current-authority-status.good { color:#117c72; } #current-authority-status.bad { color:#ae3e36; } #current-authority-status.neutral { color:#536474; }
.attack-group-title { margin:.75rem 0 .5rem; font-size:.78rem; letter-spacing:.06em; }
.mode-bar { border-style:dashed; border-color:#718198; }
.play-hero { padding: clamp(2.5rem,6vw,5.5rem) 0 2rem; }
.play-hero h1 { font-size:clamp(2.5rem,5vw,4.7rem); max-width:1000px; }
.prototype-banner { display:flex; flex-wrap:wrap; gap:.35rem .9rem; align-items:center; padding:.9rem 1.1rem; margin-bottom:2.2rem; background:var(--panel); border:1px solid var(--line-strong); border-left:5px solid var(--gold); border-radius:var(--radius); }
.prototype-banner strong { color:var(--gold); font-size:.78rem; letter-spacing:.08em; }
.prototype-banner span { color:var(--muted); font-size:.92rem; }
.play-lead { max-width:760px; color:var(--muted); font-size:1.18rem; margin:1rem 0 .4rem; }
.play-challenge { color:var(--accent-strong); font-weight:700; }
.mission-strip { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; padding:1rem 1.2rem; margin-top:2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.mission-strip span { color:var(--accent-strong); font-size:.75rem; font-weight:800; letter-spacing:.08em; }
.phase-rail { display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; padding:0 0 1.4rem; overflow:auto; }
.phase-rail span { white-space:nowrap; border-bottom:2px solid var(--line-strong); padding:.55rem .3rem; font-size:.72rem; color:var(--muted); font-weight:800; letter-spacing:.04em; }
.play-state-grid,.lower-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1rem; margin-bottom:1rem; align-items:start; }
.control-panel { min-width:0; padding:clamp(1rem,2.4vw,1.6rem); border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.2rem; }
.panel-heading .eyebrow { margin-bottom:.35rem; }
.panel-heading h2 { font-size:clamp(1.4rem,2.3vw,2rem); }
.state-pill { flex:0 0 auto; padding:.3rem .55rem; color:var(--bad); border:1px solid currentColor; border-radius:99px; font-size:.65rem; line-height:1.5; font-weight:850; letter-spacing:.04em; }
.state-pill.good { color:var(--good); }.state-pill.warn { color:var(--warn); }.state-pill.neutral { color:var(--muted); }
.authority-facts { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1.2rem; }
.authority-facts div,.state-list div { padding:.6rem .7rem; border:1px solid var(--line); border-radius:6px; background:color-mix(in srgb,var(--panel-strong) 48%,transparent); }
dl { margin:0; } dt { color:var(--muted); font-size:.69rem; font-weight:750; text-transform:uppercase; letter-spacing:.04em; } dd { margin:.1rem 0 0; font-size:.9rem; font-weight:700; }
.playground-page .button { cursor:pointer; font:inherit; font-weight:750; padding:.7rem 1rem; border-radius:7px; }
.playground-page .button:disabled { opacity:.45; cursor:not-allowed; }
.micro-message { min-height:2.8rem; margin:.8rem 0 1.1rem; color:var(--muted); font-size:.9rem; }
.attack-grid,.unknown-attacks { border-top:1px solid var(--line); padding-top:.9rem; }
.attack-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.attack-grid button,.unknown-attacks button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:.4rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--text); text-align:left; cursor:pointer; font:inherit; font-size:.8rem; }
.attack-grid button b,.unknown-attacks button b { color:var(--bad); font-size:.62rem; white-space:nowrap; }
.execution-placeholder { min-height:140px; display:grid; place-content:center; justify-items:center; text-align:center; color:var(--muted); border:1px dashed var(--line-strong); border-radius:8px; margin-bottom:1rem; }
.signal-dot { width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 15%,transparent); }
.reality-knowledge { display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:center; margin:1rem 0; }
.playground-page .proof-state { padding:1rem; border:1px solid var(--line); border-radius:8px; background:var(--panel-strong); }
.playground-page .proof-state.reality { border-top:4px solid var(--good); }.playground-page .proof-state.knowledge { border-top:4px solid var(--warn); }
.playground-page .proof-state h3 { font-size:1.2rem; }.playground-page .proof-state p:last-child { margin-bottom:0; font-size:.82rem; color:var(--muted); }
.playground-page .proof-boundary-divider { font-size:1.5rem; font-weight:900; }
#execute,#lose-ack { margin-right:.4rem; margin-bottom:.5rem; }
.unknown-attacks h3 { font-size:1rem; margin:.9rem 0; }.unknown-attacks button { margin-bottom:.45rem; }.unknown-attacks button b { color:var(--bad); }
#attack-result { color:var(--bad); font-weight:700; font-size:.88rem; min-height:1.5rem; }
.reconcile { margin:.5rem 0 1rem; }
.readback { padding:1rem; background:var(--accent-soft); border-radius:8px; }.readback .eyebrow { margin:0 0 .6rem; }
.readback-checks { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }.readback-checks span { display:grid; padding:.5rem; font-size:.67rem; font-weight:800; background:var(--panel); border-radius:5px; }.readback-checks b { color:var(--good); }
.event-rail { list-style:none; margin:0 0 1.5rem; padding:0; border-left:2px solid var(--line-strong); }.event-rail li { position:relative; margin:0 0 .55rem .9rem; padding:.38rem .6rem; background:var(--panel-strong); border-radius:4px; font-size:.77rem; font-weight:750; letter-spacing:.025em; }.event-rail li::before { content:""; position:absolute; left:-1.08rem; top:.72rem; width:8px;height:8px;border-radius:50%;background:var(--line-strong); }.event-rail li.good::before { background:var(--good); }.event-rail li.warn::before { background:var(--warn); }.event-rail li.bad::before { background:var(--bad); }
.control-panel>h3 { margin:1rem 0 .7rem; font-size:1rem; }.state-list { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.scenario-list { list-style:none; padding:0; margin:0; counter-reset:scenario; }.scenario-list li { counter-increment:scenario; display:flex; gap:.8rem; align-items:center; padding:.65rem 0; border-bottom:1px solid var(--line); font-size:.88rem; font-weight:700; }.scenario-list li::before { content:"0" counter(scenario); color:var(--accent-strong); font-size:.72rem; font-weight:850; }
.boundary-note { color:var(--muted); font-size:.8rem; }.reset-button { margin-top:.5rem; }
.play-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0 2rem; color:var(--muted); font-size:.84rem; }.play-bottom p { margin:0; }.play-bottom a { font-weight:750; }
[hidden] { display:none !important; }
@media(max-width:800px) { .play-state-grid,.lower-grid { grid-template-columns:1fr; }.phase-rail { grid-template-columns:repeat(3,1fr); }.play-hero { padding-top:2.5rem; } }
@media(max-width:520px) { .play-hero h1 { font-size:2.3rem; }.authority-facts,.attack-grid,.state-list { grid-template-columns:1fr; }.reality-knowledge { grid-template-columns:1fr; }.playground-page .proof-boundary-divider { text-align:center; transform:rotate(90deg); }.readback-checks { grid-template-columns:1fr 1fr; }.play-bottom { align-items:flex-start; flex-direction:column; }.phase-rail { grid-template-columns:repeat(2,1fr); } }
.mode-bar,.lifecycle-strip,.freshness-challenge,.review-instructions,.live-scenarios{margin:1rem 0;padding:1rem;border:1px solid var(--line,#d6deea);border-radius:14px;background:#fff;color:#172235}
.mode-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}.mode-bar>div:first-child{display:grid;gap:.3rem}.mode-bar span{color:#526174;font-size:.9rem}.mode-actions{display:flex;gap:.5rem}
.lifecycle-strip{display:flex;align-items:center;justify-content:space-between;gap:.6rem;overflow-x:auto}.lifecycle-strip span{min-width:max-content;display:grid;gap:.3rem;font-size:.72rem;letter-spacing:.06em;color:#526174}.lifecycle-strip b{font-size:.9rem;letter-spacing:0;color:#172235}.lifecycle-strip i{font-style:normal;color:#718198}
.freshness-challenge{border-color:#d4a43b;background:#fffaf0;color:#172235}.freshness-challenge h3{margin:.25rem 0}.freshness-state,.write-count{font-weight:700}.live-scenarios{display:flex;flex-wrap:wrap;gap:.6rem}.live-scenarios button,.freshness-challenge .attack-grid button{cursor:pointer;color:#172235;background:#f4f8fb;border:1px solid #aebbc7}
.live-unavailable{padding:1rem;border:2px solid #b42318;border-radius:12px;background:#fff1f0;color:#7a1711}.review-instructions{font-size:.92rem}.review-instructions p{margin:.5rem 0}.review-instructions code{overflow-wrap:anywhere}
[hidden]{display:none!important}
@media(max-width:700px){.mode-bar{align-items:flex-start;flex-direction:column}.lifecycle-strip{justify-content:flex-start}.live-scenarios{display:grid}.freshness-challenge .attack-grid{grid-template-columns:1fr}}
.three-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0}.three-phases article{display:grid;gap:.35rem;padding:1rem;border-left:3px solid #1f6b8f;background:#f4f8fb;color:#172235}.three-phases strong{font-size:.75rem;letter-spacing:.06em}.three-phases span{font-size:.92rem}
@media(max-width:700px){.three-phases{grid-template-columns:1fr}}

/* Small, optional first-visit help and contextual explanations. */
.quick-guide{margin:0 0 .65rem;color:var(--muted);font-size:.82rem}
.quick-guide summary,.info-tip summary{width:max-content;max-width:100%;color:var(--accent-strong);font-size:.75rem;font-weight:750;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.quick-guide[open]{padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.quick-guide ol{display:grid;gap:.2rem;margin:.55rem 0 0;padding-left:1.2rem}
.current-authority{justify-content:space-between}
.current-authority>span{display:flex;flex-wrap:wrap;gap:.3rem}
.info-tip{color:var(--muted);font-size:.75rem}
.info-tip p,.info-tip>span{display:block;max-width:42rem;margin:.35rem 0 0;color:var(--muted);font-size:.78rem;font-weight:450;line-height:1.45}
.state-explanation{margin:.25rem 0 .85rem;padding:.55rem .7rem;border-left:2px solid var(--line-strong);color:var(--muted);font-size:.82rem;line-height:1.45}
.state-explanation:empty{display:none}
.attack-intro{margin:-.2rem 0 .7rem;color:var(--muted);font-size:.8rem;line-height:1.45}
.live-scenarios .info-tip{flex:1 1 100%;padding:.15rem 0}
.closure-tip{margin-top:.5rem}
.info-tip summary:focus-visible,.quick-guide summary:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:2px}
@media(max-width:520px){.current-authority{align-items:flex-start}.quick-guide ol{padding-left:1rem}}

/* Static guided experience. */
.playground-page { background: var(--page, #f7f9fc); }
.replay-banner { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem; padding:.8rem 1rem; margin-bottom:2rem; background:#fff; border:1px solid var(--line-strong,#b9c5d3); border-left:5px solid #a66c10; border-radius:10px; }
.replay-banner strong,.source-tag { color:#855600; font-size:.7rem; font-weight:850; letter-spacing:.065em; }
.replay-banner span { color:var(--muted,#526174); font-size:.86rem; }
.play-intro { margin:.8rem 0 0; color:#855600; font-weight:750; }
.scenario-overview,.evidence-panel,.concept-preview { margin:1.2rem 0; padding:clamp(1rem,2.5vw,1.5rem); background:#fff; border:1px solid var(--line,#d6deea); border-radius:12px; box-shadow:var(--shadow,0 8px 24px rgba(20,35,55,.05)); }
.scenario-overview { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); gap:1.5rem; align-items:center; }
.scenario-overview h2,.ambiguity-panel h2,.evidence-panel h2,.concept-preview h2 { margin:.25rem 0 .55rem; font-size:clamp(1.25rem,2.1vw,1.7rem); }
.scenario-overview p { color:var(--muted,#526174); }
.operation-facts { display:grid; gap:.5rem; margin:0; }
.operation-facts div { padding:.7rem .8rem; border:1px solid var(--line,#d6deea); border-radius:7px; background:#f7f9fc; }
.operation-facts dt,.outcome-box span,.response-box span,.evidence-source span { color:var(--muted,#526174); font-size:.65rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.operation-facts dd { margin:.16rem 0 0; font-size:.88rem; }
.source-tag { display:inline-flex; width:fit-content; max-width:100%; padding:.28rem .45rem; background:#fff6df; border-radius:4px; overflow-wrap:anywhere; }
.guided-control { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.7rem 0; }
.playground-page .button { min-height:44px; }
.playground-page .button:focus-visible,.scenario-actions button:focus-visible,.guided-control button:focus-visible { outline:3px solid #2e6eac; outline-offset:3px; }
.step-count { min-width:4rem; text-align:center; color:var(--muted,#526174); font-size:.8rem; font-weight:800; }
.button.quiet { margin-left:auto; border:1px solid var(--line-strong,#b9c5d3); background:#fff; color:var(--text,#172235); }
.journey-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:.5rem 0 1rem; }
.journey-card { min-width:0; padding:clamp(1rem,2.5vw,1.6rem); border:1px solid var(--line,#d6deea); border-radius:12px; background:#fff; box-shadow:var(--shadow,0 8px 24px rgba(20,35,55,.05)); }
.journey-card h2 { margin:.3rem 0 .75rem; font-size:clamp(1.4rem,2.4vw,2rem); }
.journey-card>p:not(.eyebrow) { min-height:3.1rem; color:var(--muted,#526174); line-height:1.55; }
.business-card { border-top:4px solid #1f6b8f; }.trustgate-card { border-top:4px solid #117c72; }
.outcome-box,.response-box,.evidence-source { margin-top:1rem; padding:.85rem; border:1px solid var(--line,#d6deea); border-radius:7px; background:#f7f9fc; }
.outcome-box { display:grid; gap:.35rem; }.outcome-box strong { color:#155c70; font-size:.95rem; }
.response-box p,.state-outcome { margin:.35rem 0 0; font-size:.87rem; line-height:1.5; }
.evidence-source { display:grid; gap:.3rem; }.evidence-source strong { color:#855600; font-size:.76rem; overflow-wrap:anywhere; }
.state-outcome { padding-left:.75rem; border-left:3px solid #117c72; color:var(--text,#172235); }
.ambiguity-panel { display:grid; grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr); gap:1.5rem; align-items:start; margin:1rem 0; padding:clamp(1rem,2.5vw,1.5rem); border:1px solid #e4d5aa; border-radius:12px; background:#fffaf0; }
.ambiguity-panel>div>p:last-child { margin-bottom:0; color:var(--muted,#526174); font-size:.9rem; }
.scenario-actions { display:flex; flex-wrap:wrap; gap:.5rem; align-content:start; }
.scenario-actions button { flex:1 1 190px; }
.scenario-actions button:disabled { opacity:.5; cursor:not-allowed; }
.control-note { flex:1 1 100%; min-height:1.2rem; margin:.1rem 0; color:var(--muted,#526174); font-size:.78rem; }
.ambiguity-note { margin:1rem 0; padding:.8rem 1rem; border-left:4px solid #a66c10; background:#fff6df; }
.evidence-heading { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.evidence-trace { display:grid; gap:.6rem; margin:1rem 0 0; padding:0; list-style:none; }
.trace-item { padding:.8rem .9rem; border:1px solid var(--line,#d6deea); border-left:4px solid #718198; border-radius:7px; background:#fbfcfe; }
.trace-item.state-authorized,.trace-item.state-confirmed,.trace-item.state-closed { border-left-color:#117c72; }
.trace-item.state-unknown { border-left-color:#a66c10; background:#fffaf0; }
.trace-item.state-refused { border-left-color:#ae3e36; }
.trace-head { display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start; }.trace-head strong { font-size:.9rem; }.trace-head span { flex:none; color:#526174; font-size:.65rem; font-weight:850; letter-spacing:.045em; }
.trace-item p { margin:.4rem 0; font-size:.83rem; line-height:1.45; }.trace-item small { color:var(--muted,#526174); font-size:.71rem; line-height:1.4; overflow-wrap:anywhere; }
.concept-preview { border-left:4px solid #718198; }.concept-preview>p:last-child { margin-bottom:0; line-height:1.6; }
.play-bottom { align-items:flex-start; margin:1.5rem 0 2.5rem; padding:1.4rem; border-radius:12px; background:#eaf1f7; }
.play-bottom h2 { margin:0 0 .4rem; color:var(--text,#172235); font-size:1.4rem; }.play-bottom p { max-width:620px; margin:0 0 .9rem; line-height:1.5; }.play-bottom>a:not(.button) { padding-top:.8rem; }
.scenario-error { padding:1rem; border:2px solid #ae3e36; border-radius:8px; background:#fff1f0; color:#7a1711; }
.reset-message { min-height:1px; margin:0; color:var(--good,#117c72); font-size:.8rem; }
@media(max-width:760px) { .scenario-overview,.journey-layout,.ambiguity-panel { grid-template-columns:minmax(0,1fr); }.scenario-overview>* { min-width:0; }.guided-control { position:static; }.operation-facts { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:520px) { .operation-facts { grid-template-columns:1fr; }.guided-control { display:grid; grid-template-columns:1fr 1fr; }.guided-control #start-scenario { grid-column:1/-1; }.button.quiet { margin:0; }.step-count { grid-column:1/-1; grid-row:3; }.evidence-heading,.trace-head { align-items:flex-start; flex-direction:column; }.scenario-actions { display:grid; grid-template-columns:1fr; }.scenario-actions button { width:100%; }.play-bottom { padding:1rem; } }

.scenario-picker { width:min(100% - 2rem,1160px); margin:1rem auto; padding:1rem clamp(1rem,2.5vw,1.5rem); display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem; background:#fff; border:1px solid var(--line,#d6deea); border-radius:12px; }
.scenario-picker label { color:var(--ink,#1d2a3a); font-weight:800; }
.scenario-picker select { width:100%; min-height:46px; padding:.65rem .8rem; color:var(--ink,#1d2a3a); background:#fff; border:1px solid var(--line-strong,#b9c5d3); border-radius:8px; font:inherit; }
.scenario-picker select:focus-visible,.agentforce-controls button:focus-visible { outline:3px solid #2e6eac; outline-offset:3px; }
.agentforce-experience { margin:1.2rem 0; }
.agentforce-intro,.agentforce-provenance { padding:clamp(1rem,2.5vw,1.5rem); background:#fff; border:1px solid var(--line,#d6deea); border-radius:12px; box-shadow:var(--shadow,0 8px 24px rgba(20,35,55,.05)); }
.agentforce-intro h2 { margin:.25rem 0 .55rem; font-size:clamp(1.5rem,3vw,2.25rem); }
.agentforce-intro>p,.agentforce-provenance p { color:var(--muted,#526174); }
.authority-roles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.authority-roles article { padding:1rem; border-left:4px solid #256b99; background:#f2f7fb; border-radius:8px; }
.authority-roles article:last-child { border-color:#9a691a; }
.authority-roles p { margin:.4rem 0 0; color:var(--muted,#526174); }
.agentforce-controls { position:sticky; top:.5rem; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin:1rem 0; padding:.75rem; background:rgba(255,255,255,.97); border:1px solid var(--line,#d6deea); border-radius:10px; box-shadow:0 4px 14px rgba(20,35,55,.07); }
.agentforce-controls button { min-height:44px; }
.agentforce-controls span { min-width:4.5rem; text-align:center; font-weight:750; }
.agentforce-views { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.agentforce-views .journey-card { min-width:0; }
.agentforce-views h3 { margin:.25rem 0 .6rem; font-size:1.2rem; overflow-wrap:anywhere; }
.tool-name { display:inline-block; max-width:100%; padding:.35rem .55rem; color:#143f5b; background:#e9f4fb; border-radius:6px; font:700 .82rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.agentforce-experience .evidence-panel { margin-top:1rem; }
.agentforce-provenance { margin-top:1rem; border-left:5px solid #9a691a; }
.agentforce-provenance h3 { margin-top:0; }
.browser-boundary { padding:.8rem; border:1px solid var(--line,#d6deea); border-radius:8px; font-weight:700; }
@media(max-width:760px) { .agentforce-views,.authority-roles { grid-template-columns:minmax(0,1fr); }.agentforce-controls { position:static; } }
@media(max-width:520px) { .agentforce-controls { display:grid; grid-template-columns:1fr 1fr; }.agentforce-controls #agentforce-start { grid-column:1/-1; }.agentforce-controls span { grid-column:1/-1; }.scenario-picker { width:calc(100% - 2rem); } }