.security-lab { max-width:1100px !important; }
.lab-intro { margin:0 0 24px; }
.lab-intro h1 { margin-bottom:10px !important; }
.lab-intro .section-subtitle { margin:0; font-size:16px; }
.lab-disclaimer { margin:18px 0 0; padding:12px 16px; border:1px solid var(--line); border-left:4px solid var(--action); border-radius:10px; background:var(--surface); color:var(--muted); }
.lab-disclaimer strong { color:var(--ink); }
.scenario-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.scenario-card { display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid var(--line); border-top:3px solid var(--scenario-accent,var(--safe)); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); transition:box-shadow .18s ease,border-color .18s ease; }
.scenario-card[data-scenario="safe"] { --scenario-accent:var(--safe); }
.scenario-card[data-scenario="suspicious"] { --scenario-accent:var(--suspicious); }
.scenario-card[data-scenario="unsafe"] { --scenario-accent:var(--unsafe); }
.scenario-card:hover { box-shadow:var(--shadow-hover); }
.scenario-card[data-selected="true"] { border-color:var(--scenario-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--scenario-accent) 24%,transparent),var(--shadow-hover); }
.scenario-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:14px; }
.scenario-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--scenario-accent); background:var(--surface-soft); font-size:20px; font-weight:800; }
.scenario-label { color:var(--scenario-accent); font-size:10px; font-weight:800; letter-spacing:.08em; text-align:right; }
.scenario-card h2 { margin:0 0 8px; font-size:17px; }
.scenario-card > p { margin:0; color:var(--muted); line-height:1.55; }
.scenario-indicators { display:grid; gap:7px; padding:0; margin:18px 0; list-style:none; color:var(--ink); font-size:13px; }
.scenario-indicators li { line-height:1.45; }
.scenario-url { margin:-6px 0 14px !important; }
.scenario-url code { overflow-wrap:anywhere; color:var(--muted); font-size:12px; }
.scenario-action { width:100%; min-height:48px; margin-top:auto; cursor:pointer; transition:background .16s ease,box-shadow .16s ease; }
.scenario-action:hover { box-shadow:var(--shadow-hover); }
.selected-scenario,.demo-guide,.comparison { margin-top:22px; }
.selected-scenario { border-top:3px solid var(--action) !important; }
.demo-badge { display:inline-flex; margin:0 0 8px; padding:5px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.selected-scenario h2 { margin:0 0 8px; }
.scenario-transition { min-height:24px; margin:0 0 14px; color:var(--muted); }
.scenario-transition[data-loading="true"]::before { content:""; display:inline-block; width:12px; height:12px; margin-right:8px; border:2px solid var(--line); border-top-color:var(--action); border-radius:50%; vertical-align:-2px; animation:lab-spin .55s linear infinite; }
.selected-explanation { padding-top:14px; border-top:1px solid var(--line); }
.selected-explanation h3 { margin:0 0 8px; font-size:14px; }
.selected-explanation ul { display:grid; gap:7px; margin:0; padding-left:20px; color:var(--muted); }
.scenario-live-note { margin:12px 0 0; color:var(--muted); font-size:12px; }
.continue-link { display:inline-flex; align-items:center; justify-content:center; width:fit-content; min-height:46px; margin-top:16px; padding:10px 16px; text-decoration:none; }
.demo-guide-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.demo-guide-heading h2,.comparison h2 { margin:0 0 5px; }
.demo-guide-heading .intro-kicker { margin-bottom:6px; }
.demo-guide-heading .section-subtitle { margin:0; }
.demo-progress { margin-top:22px; }
.demo-progress-meta { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; color:var(--ink); font-size:13px; font-weight:700; }
.progress-track { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-soft); }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--safe),var(--suspicious),var(--unsafe)); transition:width .25s ease; }
.demo-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; margin:14px 0; list-style:none; }
.demo-steps li { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.demo-steps li span { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; border:1px solid var(--line); border-radius:50%; }
.demo-steps li[aria-current="step"] { color:var(--ink); font-weight:700; }
.demo-steps li[aria-current="step"] span { border-color:var(--action); background:var(--action); color:var(--action-ink); }
.demo-complete-copy { margin:12px 0; color:var(--safe-ink); font-weight:650; }
.demo-controls { display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
.demo-controls button { min-width:128px; min-height:46px; cursor:pointer; }
.demo-controls button:disabled { opacity:.55; }
.comparison-note { margin:4px 0 16px; color:var(--muted); font-size:12px; }
.comparison-table-wrap { width:100%; overflow-x:auto; }
.comparison table { width:100%; border-collapse:collapse; text-align:center; }
.comparison th,.comparison td { padding:11px 10px; border-bottom:1px solid var(--line); }
.comparison thead th { color:var(--muted); font-size:12px; }
.comparison tbody th { text-align:left; color:var(--ink); font-size:13px; font-weight:600; }
.comparison td { color:var(--safe); font-size:17px; font-weight:750; }
.comparison tbody tr:last-child > * { border-bottom:0; }
.security-lab :is(button,a):focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
@keyframes lab-spin { to { transform:rotate(360deg); } }
@media(max-width:900px) { .scenario-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
 .security-lab { padding-left:16px !important; padding-right:16px !important; }
 .scenario-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
 .scenario-card { padding:20px; }
 .demo-guide-heading { align-items:flex-start; flex-direction:column; }
 .demo-guide-heading > button { width:100%; }
 .comparison th,.comparison td { padding:9px 5px; font-size:11px; }
 .comparison tbody th { font-size:11px; }
 .demo-controls button { flex:1; min-width:0; }
 .continue-link { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
 .scenario-card,.scenario-action,.progress-track span { transition:none; }
 .scenario-transition[data-loading="true"]::before { animation:none; }
}