:root{color-scheme:light;--ink:#252b35;--muted:#667183;--line:#dedfdf;--paper:#fff;--accent:#b94e2a;--accent-light:#fff3ed;--green:#26745f;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#f4f4f2;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:var(--accent)}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}:focus-visible{outline:3px solid #2e57a2;outline-offset:4px}button:focus:not(:focus-visible),h1:focus{outline:none}.skip-link{position:absolute;left:16px;top:-80px;z-index:20;padding:12px;background:white}.skip-link:focus{top:8px}
.tour-bar{display:flex;align-items:center;gap:24px;min-height:78px;padding:16px 28px;background:var(--paper);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:750;color:var(--ink);line-height:1.25}.brand-subtitle{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px}.back-link{margin-left:auto;font-size:13px;text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #cbd0d5;border-radius:7px;background:white;color:var(--ink);min-height:42px;padding:10px 14px;font-weight:600;font-size:13px;line-height:1.4;text-decoration:none}.button:hover:not(:disabled){background:#f5f6f7}.button.primary{background:var(--accent);border-color:var(--accent);color:white}.button.primary:hover:not(:disabled){background:#a14122}
.tour-layout{max-width:2100px;margin:auto;padding:26px;display:grid;grid-template-columns:minmax(0,1fr) 322px;align-items:start;gap:24px}.workspace{min-width:0}.workspace-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;min-height:46px;padding:0 14px;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0}.sample-dot{display:inline-block;background:#3d9e87;width:7px;height:7px;margin-right:8px;border-radius:50%}.sample-label{color:var(--muted)}#zoom{font-size:12px;color:var(--muted);border:0;background:transparent;min-height:40px;padding:0 4px;white-space:nowrap}#screen-viewport{max-height:calc(100dvh - 210px);min-height:220px;overflow:auto;overscroll-behavior:contain;background:white;border:1px solid var(--line);scrollbar-color:#b5bbc4 #f1f2f3}#screen{position:relative;width:100%;isolation:isolate}#screen-viewport.enlarged #screen{width:max(100%,1440px)}#tour-image{display:block;width:100%;height:auto;user-select:none}#hotspot{position:absolute;transform:translate(-50%,-50%);min-width:32px;min-height:32px;padding:0;border:3px solid #d45d31;border-radius:5px;box-shadow:0 0 0 4px #fff9,0 0 0 6px #d45d312e;background:#ed80490a;touch-action:manipulation;z-index:2}#hotspot:hover{background:#ed80491c}#hotspot:focus-visible{outline:3px solid #294d99;outline-offset:6px}.hotspot-badge{position:absolute;bottom:calc(100% + 7px);left:0;white-space:nowrap;font-size:11px;font-weight:650;padding:4px 7px;border-radius:4px;background:var(--accent);color:white;line-height:1.2;pointer-events:none}.hotspot-badge.below{top:calc(100% + 7px);bottom:auto}#hotspot.nudge{animation:nudge .42s ease-in-out 2}@keyframes nudge{50%{box-shadow:0 0 0 8px #d45d3140}}#tour-pointer{position:absolute;z-index:4;color:#b64925;font-size:35px;line-height:1;text-shadow:1px 1px white,-1px -1px white;transform:rotate(-25deg);pointer-events:none;animation:pointer-press .55s ease-in-out}@keyframes pointer-press{50%{transform:rotate(-25deg) scale(.8)}}.screen-footer{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);padding:12px 3px;line-height:1.6}#screen-counter{white-space:nowrap}#interaction-hint{min-height:22px;margin:0;font-size:12px;color:var(--accent);line-height:1.5}
#guide{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:25px;box-shadow:0 8px 28px #22222206;position:sticky;top:20px;max-height:calc(100dvh - 38px);overflow:auto}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;font-weight:750;color:var(--accent);margin:0 0 14px}h1{font-size:25px;line-height:1.25;letter-spacing:-.65px;margin:0 0 16px}#guide p:not(.eyebrow){font-size:13px;line-height:1.7}#context,#welcome>p:not(.eyebrow),#completion>p:not(.eyebrow){color:var(--muted)}.tour-outline{padding-left:20px;margin:22px 0;color:var(--ink);font-size:13px;line-height:1.6}.tour-outline li{padding:5px 0 5px 4px}.tour-outline li::marker{color:var(--accent);font-weight:700}#start-tour,#show-me,#completion>.primary{width:100%}.tour-disclosure{font-size:11px!important;line-height:1.6!important;color:var(--muted);margin:17px 0 0}#progress{width:100%;height:4px;display:block;margin:0 0 22px;border:0;background:#eee;border-radius:4px;accent-color:var(--accent)}#progress::-webkit-progress-bar{background:#eee;border-radius:4px}#progress::-webkit-progress-value{background:var(--accent);border-radius:4px}#progress::-moz-progress-bar{background:var(--accent);border-radius:4px}#action-card{border-left:3px solid var(--accent);background:#faf6f3;padding:14px 15px;margin:19px 0}.action-eyebrow{font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.8px;color:var(--accent)}#instruction{font-weight:650;margin:5px 0 0;line-height:1.6!important}#result{border-radius:6px;padding:11px 13px;background:#eef7f3;color:var(--green);font-size:12px!important;margin:0 0 18px}#result::before{content:"✓ ";font-weight:700}.tour-nav{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.tour-nav .button{font-size:12px;flex:1;padding:8px}#overview{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}summary{cursor:pointer;font-size:12px;color:var(--muted);font-weight:600}#chapter-list{padding-left:20px;margin:12px 0 0}#chapter-list li{padding:4px 0;color:var(--muted);font-size:12px}#chapter-list button{border:0;background:transparent;padding:4px;color:inherit;text-align:left;font-size:12px}#chapter-list button[aria-current="step"]{color:var(--accent);font-weight:700}.completion-result{display:flex;flex-direction:column;gap:8px;background:#eef7f3;border:1px solid #bbdcd1;border-radius:7px;padding:17px;color:var(--green);margin:20px 0}.completion-result span{font-size:12px}.docs-link{display:block;text-align:center;font-size:12px;margin:16px 0 22px}#load-error{border:1px solid #dfad9b;background:#fff6f1;padding:12px;border-radius:7px;margin-top:15px}#load-error p{margin-top:0}.noscript-message{padding:20px;text-align:center}
@media(min-width:1750px){.tour-layout{grid-template-columns:minmax(0,1fr) 350px;gap:30px}#guide{padding:28px}#guide p:not(.eyebrow){font-size:14px}h1{font-size:28px}}
@media(max-width:1050px){.tour-layout{padding:16px;gap:16px;grid-template-columns:minmax(0,1fr) 284px}#guide{padding:20px}h1{font-size:23px}.sample-label{display:none}.tour-bar{padding:14px 20px}}
@media(max-width:760px){.tour-bar{gap:10px 14px;padding:12px 16px;min-height:68px;flex-wrap:wrap}.tour-bar .brand{margin-right:auto}.brand{font-size:14px;gap:8px}.brand img{width:25px;height:25px}.brand-subtitle{font-size:10px}.store-link{font-size:11px;padding:8px;min-height:36px}.back-link{display:none}.tour-layout{display:flex;flex-direction:column;gap:15px;padding:14px}#guide{position:static;order:-1;max-height:none;width:100%;padding:20px}.workspace{width:100%}#screen-viewport{max-height:60dvh;min-height:240px}#screen-viewport.enlarged #screen{width:1080px}.screen-footer{font-size:10px}#step-title{font-size:23px;margin-bottom:10px}#context{margin:10px 0}#action-card{margin:13px 0;padding:10px 13px}#progress{margin-bottom:15px}#step-guide>.tour-disclosure{margin-top:12px}#overview{margin-top:15px;padding-top:12px}#show-me{min-height:40px}#welcome .tour-outline{margin:15px 0}#welcome h1{font-size:28px}.workspace-bar{font-size:11px}#interaction-hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

#mobile-prompt{display:none}
@media(max-width:760px){
  body.tour-started:not(.tour-complete){padding-bottom:154px}
  .tour-started:not(.tour-complete) #mobile-prompt{display:block;position:fixed;z-index:10;bottom:0;left:0;right:0;background:#fff;border-top:2px solid var(--accent);padding:12px 16px max(12px,env(safe-area-inset-bottom));box-shadow:0 -6px 22px #2222220a}
  #mobile-instruction{font-size:13px;font-weight:650;line-height:1.5;margin:0 0 10px}
  .mobile-prompt-actions{display:flex;gap:10px;align-items:center;justify-content:space-between}
  .mobile-prompt-actions .button{font-size:11px;min-height:38px;padding:8px 10px}
  #mobile-progress{font-size:11px;color:var(--muted)}
}

/* Scenario chooser */
.chooser-layout{display:block;max-width:1100px}
.scenario-chooser{max-width:640px;margin:24px auto;padding:0 8px}
.scenario-chooser h1{font-size:32px;margin-bottom:12px}
.chooser-lede{color:var(--muted);margin:0 0 26px}
.scenario-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.scenario-card{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-decoration:none;color:var(--ink);box-shadow:0 8px 28px #22222206}
.scenario-card:hover{border-color:var(--accent)}
.scenario-card-title{font-weight:750;font-size:17px}
.scenario-card-description{color:var(--muted);font-size:13px;line-height:1.6;flex:1}
.scenario-card-cta{color:var(--accent);font-weight:650;font-size:13px}
@media(max-width:760px){.scenario-cards{grid-template-columns:1fr}.scenario-chooser h1{font-size:26px}}
/* The Change scenario control only makes sense inside a running tour. */
body.on-chooser #change-scenario{display:none}