/* Uses the existing system font. No font request or delayed font replacement. */
.operator-tour { display:block; min-height:100dvh; color:#14161a; background:#f5f6f8; font-family:var(--ui-font); --tour-orange:#ee8620; --tour-dark:#0a0b0d; }
.operator-tour [hidden] { display:none !important; }
.operator-tour button,.operator-tour a { -webkit-tap-highlight-color:transparent; }
.operator-tour button,.tour-header-actions a,.tour-dialog-actions a { font:inherit; font-weight:600; border:1px solid #d8dbe1; border-radius:8px; padding:10px 14px; min-height:44px; background:#fff; color:#14161a; cursor:pointer; text-decoration:none; line-height:1.35; }
.operator-tour button:hover,.tour-header-actions a:hover { background:#f5f6f8; border-color:#9198a4; }
.operator-tour button:disabled { cursor:default; opacity:.4; }
.operator-tour :is(button,a):focus-visible { outline:3px solid #b94b00; outline-offset:3px; }
.tour-header { min-height:82px; padding:16px 28px; display:flex; align-items:center; gap:24px; background:var(--tour-dark); color:#fff; }
.tour-brand { display:flex; flex:none; align-items:center; }
.tour-brand img { width:124px; height:50px; object-fit:contain; }
.tour-heading { display:flex; flex-direction:column; padding-left:24px; border-left:1px solid #ffffff35; line-height:1.45; }
.tour-heading strong { font-size:19px; }
.tour-heading span { font-size:13px; color:#c9cdd5; }
.tour-header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.tour-header-actions button { color:#fff; background:transparent; border-color:#737b89; }
.tour-header-actions button:hover { color:#14161a; }
.tour-header-actions a { color:#fff; background:transparent; border-color:transparent; font-size:13px; }
.tour-header-actions a:hover { color:#14161a; }
.tour-chapters { display:flex; gap:6px; padding:12px 28px; overflow:auto; border-bottom:1px solid #e3e5e9; background:#fff; }
.tour-chapters button { display:flex; gap:9px; align-items:center; flex:1; justify-content:center; white-space:nowrap; border-color:transparent; font-size:13px; }
.tour-chapters button span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#eceef2; font-size:12px; }
.tour-chapters button[aria-current=step] { color:#9b4000; background:#fff0dd; border-color:#e6b684; }
.tour-chapters button[aria-current=step] span { color:var(--tour-dark); background:var(--tour-orange); }
.tour-workspace { display:grid; grid-template-columns:206px minmax(0,1fr); gap:20px; max-width:1920px; margin:auto; padding:24px; }
.tour-sidebar { max-height:calc(100dvh - 210px); overflow:auto; padding-right:10px; }
.tour-sidebar h2 { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#5b6270; margin:18px 8px 6px; }
.tour-sidebar h2:first-child { margin-top:0; }
.tour-sidebar button { display:block; text-align:left; width:100%; font-size:12px; font-weight:500; border-color:transparent; background:transparent; padding:9px; min-height:40px; margin-bottom:3px; }
.tour-sidebar button[aria-current=step] { background:#fff0dd; color:#913e00; border-color:#e6b684; }
.is-guided .tour-workspace { grid-template-columns:minmax(0,1fr); }
.is-guided .tour-sidebar { display:none; }
.tour-main { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:22px; align-items:start; }
.tour-frame { overflow:hidden; min-width:0; border:1px solid #d8dbe1; border-radius:12px; background:#fff; box-shadow:0 8px 24px #0a0b0d0a; }
.tour-chrome { min-height:39px; padding:9px 13px; display:flex; gap:13px; align-items:center; background:#eceef2; font-size:11px; line-height:1.5; }
.tour-chrome [data-tour-url] { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tour-dots { color:#9aa2b1; font-size:9px; white-space:nowrap; }
.tour-demo { color:#5b6270; font-size:10px; white-space:nowrap; }
.tour-views { display:flex; gap:7px; align-items:center; padding:8px 12px; border-bottom:1px solid #e3e5e9; background:#fff; }
.tour-views button { font-size:12px; min-height:36px; padding:7px 12px; }
.tour-views button[aria-pressed=true] { color:#8b3b03; background:#fff0dd; border-color:#dba975; }
.tour-screen { position:relative; overflow:hidden; background:#f5f6f8; }
.tour-screen > img { display:block; width:100%; height:auto; aspect-ratio:3 / 2; }
.tour-spotlight { pointer-events:none; position:absolute; z-index:2; border:3px solid var(--tour-orange); border-radius:7px; box-shadow:0 0 0 200vmax #0a0b0d66; }
.tour-frame-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 14px; border-top:1px solid #e3e5e9; color:#5b6270; font-size:11px; }
.tour-frame-footer button { font-size:12px; min-height:36px; padding:6px 8px; border-color:transparent; }
.tour-explanation { padding:24px; background:#fff; border:1px solid #d8dbe1; border-top:4px solid var(--tour-orange); border-radius:12px; box-shadow:0 8px 24px #0a0b0d08; }
.tour-step-label,.tour-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:#9c4608; }
.tour-explanation h1 { font-size:26px; line-height:1.17; margin:14px 0 18px; text-wrap:balance; }
.tour-explanation h1:focus { outline:none; }
.tour-explanation [data-tour-text] { color:#5b6270; font-size:14px; line-height:1.7; }
.tour-result { margin:22px 0; padding:12px 0 12px 13px; border-left:3px solid var(--tour-orange); font-size:13px; font-weight:600; line-height:1.6; }
.tour-explanation progress { display:block; width:100%; height:5px; border:0; border-radius:9px; overflow:hidden; background:#eceef2; accent-color:var(--tour-orange); }
.tour-explanation progress::-webkit-progress-bar { background:#eceef2; }
.tour-explanation progress::-webkit-progress-value { background:var(--tour-orange); }
.tour-explanation progress::-moz-progress-bar { background:var(--tour-orange); }
.tour-navigation { display:flex; gap:8px; margin-top:18px; }
.tour-navigation button { flex:1; font-size:13px; }
.operator-tour .tour-primary { background:var(--tour-orange); border-color:var(--tour-orange); color:var(--tour-dark); }
.operator-tour .tour-primary:hover { background:#d17625; border-color:#d17625; }
.operator-tour .tour-text-button { background:none; border-color:transparent; font-size:12px; padding:10px 0; text-decoration:underline; text-underline-offset:3px; }
.tour-keyboard { color:#5b6270; font-size:10px; margin:2px 0 0; }
.tour-dialog { max-width:min(610px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:42px; border:1px solid #d8dbe1; border-radius:18px; background:#fff; color:#14161a; box-shadow:0 24px 100px #0006; }
.tour-dialog::backdrop,.tour-zoom-dialog::backdrop { background:#0a0b0dcc; }
.tour-dialog h2 { font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-.035em; margin:18px 0 22px; }
.tour-dialog > p { color:#5b6270; line-height:1.7; }
.tour-intro-stages { list-style:none; counter-reset:tour-stage; padding:0; display:grid; gap:12px; margin:24px 0; }
.tour-intro-stages li { display:flex; gap:12px; align-items:center; font-size:14px; }
.tour-intro-stages li::before { counter-increment:tour-stage; content:counter(tour-stage); display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:#fff0dd; color:#9b4000; font-size:12px; font-weight:700; }
.tour-dialog-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.tour-dialog-actions a { display:inline-flex; align-items:center; }
.tour-dialog .tour-small { font-size:11px; border-top:1px solid #e3e5e9; padding-top:18px; margin:24px 0 0; }
.tour-image-status { position:absolute; inset:0; margin:0; padding:28px; display:grid; place-items:center; font-size:14px; background:#f5f6f8; }
.tour-zoom-dialog { width:min(1600px,96vw); max-width:96vw; max-height:95dvh; border:0; border-radius:12px; padding:12px; overflow:auto; background:#f5f6f8; }
.tour-zoom-dialog img { display:block; width:1440px; max-width:none; height:auto; }
.tour-zoom-dialog button { position:sticky; top:0; left:0; z-index:1; display:block; margin:0 0 10px; }
.tour-integration { padding:clamp(20px,3vw,42px); background:#fff; min-height:550px; }
.tour-planned { display:inline-block; font-size:11px; font-weight:650; color:#80500a; background:#fff0d5; border:1px solid #e3c994; padding:6px 10px; border-radius:5px; }
.tour-integration h2 { margin:20px 0 10px; font-size:clamp(22px,2.4vw,33px); line-height:1.2; }
.tour-integration-intro { color:#5b6270; font-size:14px; }
.tour-integration-flow { display:grid; grid-template-columns:1fr 115px 1fr; gap:10px; align-items:stretch; margin:24px 0; }
.tour-integration-flow article { padding:20px; border:1px solid #e6b684; border-radius:10px; background:#fff3e7; }
.tour-integration-flow article.tour-snelstart { background:#edf3f9; border-color:#c1d2e2; }
.tour-system { font-size:21px; font-weight:750; }
.tour-integration-flow h3 { font-size:13px; margin:9px 0 14px; }
.tour-integration-flow ul { margin:0; padding-left:17px; font-size:12px; line-height:1.8; }
.tour-transfer { display:flex; flex-direction:column; align-self:center; align-items:center; text-align:center; gap:7px; font-size:11px; }
.tour-transfer > span { font-size:34px; color:#b94b00; }
.tour-transfer small { line-height:1.5; font-size:10px; color:#5b6270; }
.tour-integration-checks { border:1px solid #e3e5e9; border-radius:10px; background:#fff; padding:18px; }
.tour-integration-checks h3 { font-size:16px; margin:0 0 14px; }
.tour-integration-checks ul { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; list-style:none; padding:0; margin:0; }
.tour-integration-checks li { display:flex; flex-direction:column; gap:5px; font-size:11px; line-height:1.7; }
.tour-integration-status { margin:18px 0 0; font-size:11px; color:#6c5941; }
.tour-transcript { max-width:900px; margin:auto; padding:24px; }
.tour-transcript section { margin:38px 0; }
.tour-transcript img { width:100%; height:auto; }
@media(scripting:none) { .operator-tour [data-tour-shell] { display:none; } }
@media(min-width:1600px) { .tour-main { grid-template-columns:minmax(0,1fr) 360px; } .tour-explanation { padding:28px; } .tour-explanation h1 { font-size:29px; } }
@media(max-width:1150px) { .tour-workspace { padding:16px; grid-template-columns:170px minmax(0,1fr); gap:14px; } .tour-main { grid-template-columns:minmax(0,1fr); } .tour-explanation { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; } .tour-step-label,.tour-explanation h1 { grid-column:1; } .tour-explanation [data-tour-text] { grid-column:1; } .tour-result { grid-column:2; grid-row:2 / 4; align-self:start; } .tour-explanation progress,.tour-navigation,.tour-text-button,.tour-keyboard { grid-column:2; } .tour-navigation { grid-row:4; } }
@media(max-width:720px) { .tour-header { padding:12px 16px; gap:12px; flex-wrap:wrap; } .tour-brand img { width:90px; height:38px; } .tour-heading { padding-left:12px; } .tour-heading span { font-size:11px; } .tour-header-actions { width:100%; justify-content:space-between; } .tour-header-actions button,.tour-header-actions a { font-size:12px; padding:8px; } .tour-chapters { padding:8px 12px; } .tour-chapters button { flex:none; font-size:12px; padding:8px; } .tour-workspace { display:block; padding:12px; } .tour-sidebar { max-height:190px; margin-bottom:14px; border:1px solid #d8dbe1; border-radius:8px; padding:10px; } .tour-main { gap:12px; } .tour-explanation { display:block; padding:20px; } .tour-explanation h1 { font-size:25px; margin:10px 0 14px; } .tour-result { margin:16px 0; } .tour-keyboard { display:none; } .tour-demo { display:none; } .tour-frame-footer { font-size:10px; padding:6px 10px; } .tour-dialog { padding:26px; } .tour-dialog-actions { flex-direction:column; } .tour-dialog-actions > * { width:100%; text-align:center; justify-content:center; } .tour-integration { padding:18px; } .tour-integration-flow { grid-template-columns:1fr; } .tour-transfer { padding:4px; } .tour-transfer > span { transform:rotate(90deg); } .tour-integration-checks ul { grid-template-columns:1fr; gap:12px; } }
@media(prefers-reduced-motion:reduce) { .operator-tour *, .operator-tour *::before { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media print { .tour-header,.tour-chapters,.tour-sidebar,.tour-explanation,.tour-dialog { display:none; } .tour-workspace,.tour-main { display:block; } .tour-spotlight { display:none; } }