[hidden] { display:none!important; }
.scenario-launcher { margin:48px 0; }
.scenario-launcher h2 { font-size:32px; }
.scenario-launcher > summary { cursor:pointer; padding:20px; border:1px solid #cad8cd; border-radius:12px; background:#fff; font-size:18px; font-weight:600; }
.scenario-launcher[open] > summary { margin-bottom:24px; }
.scenario-launcher > summary:focus-visible { outline:3px solid #bf8f59; outline-offset:3px; }
.client-start { margin:28px 0 44px; padding:30px; border-radius:16px; background:#dfeadd; border:1px solid #c4d5c5; }
.client-start .button { display:inline-block; }
.manual-workspaces a { color:#294e42; text-underline-offset:3px; }
.client-dialog { width:min(600px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:32px; border:1px solid #c5d7e9; border-radius:18px; background:#fff; color:#263b38; box-shadow:0 20px 80px #123c8333; font:16px/1.65 system-ui,sans-serif; }
.client-dialog::backdrop { background:#102b42a6; }
.client-dialog .client-kicker { color:#174b99; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.client-dialog h2 { font:32px/1.2 Georgia,serif; margin:14px 0; }
.client-dialog .client-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.client-dialog button, .client-dialog a { padding:12px 18px; border:1px solid #bfcfc4; border-radius:8px; font:inherit; cursor:pointer; text-decoration:none; color:#294e42; background:white; }
.client-dialog .client-primary { background:#294e42; color:white; }
.client-dialog :focus-visible { outline:3px solid #bf8f59; outline-offset:3px; }
.client-context { font-size:12px; color:#60756a; margin-bottom:6px; }
@media(max-width:720px) { .client-start, .client-dialog { padding:22px; } .client-dialog h2 { font-size:27px; } }
.scenario-launcher h3 { font:25px Georgia,serif; margin:32px 0 16px; }
.scenario-filters { display:flex; flex-wrap:wrap; gap:16px; margin:24px 0; }
.scenario-filters label { flex:1; min-width:200px; font-size:13px; }
.scenario-filters input, .scenario-filters select { display:block; width:100%; margin-top:8px; padding:12px; border:1px solid #cbd8d0; border-radius:8px; background:white; color:#263b38; font:inherit; }
.scenario-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.scenario-card { padding:22px; }
.scenario-card small { color:#64736d; letter-spacing:1px; }
.scenario-card h4 { font-size:18px; margin:12px 0 0; }
.scenario-card p { font-size:14px; }
.scenario-player { position:sticky; top:0; z-index:20; padding:12px 24px; background:#edf3fa; border-bottom:1px solid #cadbf0; }
.scenario-player-inner { max-width:1140px; margin:auto; color:#123c83; }
.scenario-guide-label { display:block; margin-bottom:8px; color:#dbeafe; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.scenario-player h2 { font:15px/1.4 system-ui,sans-serif; margin:0 0 8px; color:#123c83; }
.scenario-bubble { position:fixed; z-index:30; width:360px; max-width:calc(100vw - 24px); box-sizing:border-box; padding:20px 24px; border:1px solid #3678c9; border-radius:16px; background:#174b99; color:#fff; box-shadow:0 10px 32px #123c8340; }
.scenario-bubble p { max-height:calc(100dvh - 210px); overflow:auto; font:550 19px/1.5 system-ui,sans-serif; margin:10px 0 0; text-wrap:pretty; }
.scenario-bubble-controls { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.scenario-bubble-controls button { padding:8px 10px; border:1px solid #bfdbfe; border-radius:7px; background:white; color:#123c83; font:13px system-ui,sans-serif; cursor:pointer; }
.scenario-bubble-controls button:first-child { background:transparent; color:white; }
.scenario-bubble-controls button:disabled { opacity:.45; cursor:default; }
.scenario-bubble-controls button:focus-visible { outline:3px solid #ffd166; outline-offset:3px; }
#bubble-next { font-weight:700; }
.scenario-bubble::before { content:''; position:absolute; width:14px; height:14px; background:#174b99; transform:rotate(45deg); pointer-events:none; }
.scenario-bubble[data-side=right]::before { left:calc(0px - 7px); top:var(--scenario-arrow); }
.scenario-bubble[data-side=left]::before { right:-7px; top:var(--scenario-arrow); }
.scenario-bubble[data-side=below]::before { top:-7px; left:var(--scenario-arrow); }
.scenario-bubble[data-side=above]::before { bottom:-7px; left:var(--scenario-arrow); }
.scenario-bubble-close { position:absolute; right:8px; top:6px; padding:3px 8px; border:0; border-radius:6px; background:transparent; color:white; font:24px system-ui,sans-serif; cursor:pointer; }
.scenario-bubble-close:hover { background:#ffffff20; }
.scenario-bubble-close:focus-visible { outline:3px solid #ffd166; }
.scenario-cursor { position:fixed; z-index:31; width:16px; height:16px; margin:-8px 0 0 -8px; border:3px solid white; border-radius:50%; background:#2563eb; box-shadow:0 0 0 5px #2563eb40; pointer-events:none; }
#scenario-step-count { font-size:12px; font-weight:650; }
.scenario-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.scenario-controls button, .scenario-controls select, .scenario-controls a { font:14px system-ui,sans-serif; padding:9px 13px; border:1px solid #bfdbfe; border-radius:8px; background:#fff; color:#123c83; }
.scenario-controls a { text-decoration:none; }
.scenario-controls label { display:flex; align-items:center; gap:6px; margin:0; font-size:12px; }
.scenario-controls select { width:auto; margin:0; }
.scenario-controls button:disabled { opacity:.5; cursor:default; }
.scenario-controls button { cursor:pointer; }
.scenario-controls button:hover:not(:disabled), .scenario-controls a:hover { background:#dbeafe; }
.scenario-controls :focus-visible { outline:3px solid #bf8f59; outline-offset:3px; }
.scenario-filters :focus-visible { outline:3px solid #bf8f59; outline-offset:3px; }
.scenario-player progress { display:block; width:100%; height:5px; margin-top:10px; accent-color:#2563eb; }
.scenario-highlight { outline:3px solid #bf8f59!important; outline-offset:4px; }
@media(max-width:720px) { .scenario-grid { grid-template-columns:1fr; } .scenario-player { padding:10px; } .scenario-player h2 { font-size:13px; margin-bottom:8px; } .scenario-bubble { width:320px; padding:16px 20px; } .scenario-bubble p { font-size:17px; } .scenario-guide-label { font-size:10px; margin-bottom:6px; } .scenario-controls { gap:6px; } .scenario-controls button, .scenario-controls a { font-size:13px; padding:7px 9px; } }
@media(max-height:600px) { .scenario-player { position:relative; } .scenario-bubble { width:400px; padding:12px 16px; } .scenario-bubble p { font-size:15px; line-height:1.4; margin-top:6px; } .scenario-bubble-controls { gap:6px; margin-top:10px; } .scenario-bubble-controls button { font-size:12px; padding:6px 9px; } }
/* Keep the walkthrough below its target on phones and short landscape screens. */
@media(max-width:800px), (max-height:600px) {
  body:has(.scenario-bubble:not([hidden])) { padding-bottom:var(--scenario-dock-space, 280px); }
  .scenario-player { position:relative; }
  .scenario-bubble { display:flex; flex-direction:column; width:calc(100% - 24px); max-width:540px; max-height:45dvh; padding:16px; padding-bottom:max(16px, env(safe-area-inset-bottom)); }
  .scenario-bubble::before { display:none; }
  .scenario-bubble p { min-height:0; max-height:none; margin-top:6px; font-size:16px; line-height:1.45; overscroll-behavior:contain; }
  .scenario-guide-label { flex-shrink:0; padding-right:32px; }
  .scenario-bubble-controls { flex-shrink:0; margin-top:12px; }
  .scenario-bubble-controls button { flex:1; min-height:44px; font-size:13px; padding:8px; }
  .scenario-bubble-close { min-width:44px; min-height:44px; right:4px; top:0; }
  .scenario-controls button, .scenario-controls a, .scenario-controls select { min-height:44px; }
  .scenario-controls select { font-size:16px; }
  .client-dialog { overflow-y:auto; overscroll-behavior:contain; }
}
@media(max-width:550px) {
  .client-start { padding:22px; }
  .client-dialog { padding:20px; }
  .client-dialog .client-actions { flex-direction:column; }
  .client-dialog .client-actions > * { text-align:center; }
  .scenario-filters { flex-direction:column; }
  .scenario-filters label { min-width:0; }
  .scenario-filters input, .scenario-filters select { min-width:0; font-size:16px; }
  .scenario-launcher > summary { padding:16px; font-size:16px; }
  .scenario-launcher h2 { font-size:28px; }
}