.tutorial-root { position:fixed; inset:0; z-index:2147483100; pointer-events:none; font-family:Inter,Arial,sans-serif; color:#e9f4ff; line-height:1.5; isolation:isolate; }
.tutorial-root[hidden], .tutorial-root [hidden] { display:none !important; }
.tutorial-root *, .tutorial-root *::before, .tutorial-root *::after { box-sizing:border-box; }
.tutorial-shade { position:fixed; background:#020916c9; pointer-events:auto; touch-action:none; }
.tutorial-ring { position:fixed; border:3px solid #7effe5; border-radius:12px; box-shadow:0 0 0 4px #1ddfbd38,0 0 30px #40f3d277; pointer-events:none; animation:tutorial-glow 1.7s ease-in-out infinite; }
.tutorial-hand, .tutorial-arrow { position:fixed; pointer-events:none; z-index:1; filter:drop-shadow(0 3px 4px #000b); }
.tutorial-hand { display:grid; place-items:center; width:42px; height:42px; color:#fff6d5; font-size:36px; line-height:1; }
.tutorial-arrow { color:#7effe5; font-size:30px; line-height:1; animation:tutorial-arrow-move 1.2s ease-in-out infinite; }
.tutorial-card, .tutorial-library { position:fixed; z-index:2; pointer-events:auto; padding:20px; border:1px solid #417390; border-radius:18px; background:linear-gradient(145deg,#13364b,#091c30 75%); box-shadow:0 16px 65px #000b,inset 0 1px 0 #ffffff12; }
.tutorial-card { width:390px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; }
.tutorial-card-centered { left:50% !important; top:50% !important; transform:translate(-50%,-50%); }
.tutorial-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tutorial-card-top { cursor:grab; touch-action:none; }
.tutorial-card-top:active { cursor:grabbing; }
.tutorial-card-top .tutorial-eyebrow { margin-right:auto; }
.tutorial-window-controls { display:flex; align-items:center; gap:5px; flex-shrink:0; padding:4px; border:1px solid #7de5d51c; border-radius:14px; background:#071c2b66; box-shadow:inset 0 1px 0 #ffffff06; }
.tutorial-card-compact { width:320px; padding:14px; }
.tutorial-card-compact .tutorial-details, .tutorial-card-compact .tutorial-hint, .tutorial-card-compact .tutorial-feedback:not([data-kind="error"]):not([data-kind="success"]) { display:none; }
.tutorial-card-compact .tutorial-description { font-size:12px; }
.tutorial-card-compact .tutorial-title { font-size:17px; }
.tutorial-card-compact .tutorial-actions { margin-top:10px; gap:6px; }
.tutorial-card-compact .tutorial-footer { margin-top:8px; padding-top:8px; }
.tutorial-card-minimized { width:300px; padding:12px; }
.tutorial-card-minimized > :not(.tutorial-card-top):not(.tutorial-title):not(.tutorial-plan) { display:none !important; }
.tutorial-card-minimized .tutorial-title { font-size:14px; margin-bottom:0; }
.tutorial-card-minimized .tutorial-plan { margin-top:7px; padding-top:6px; }
.tutorial-card-minimized .tutorial-plan-title { display:none; }
.tutorial-card-minimized > .tutorial-actions { display:block !important; margin-top:8px; }
.tutorial-card-minimized .tutorial-secondary-actions, .tutorial-card-minimized .tutorial-skip-step { display:none; }
.tutorial-card-minimized .tutorial-navigation { display:block; }
.tutorial-card-manual { transform:none !important; left:var(--tutorial-left) !important; top:var(--tutorial-top) !important; }
.tutorial-eyebrow { color:#81e8d9; font-size:10px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; }
.tutorial-root .tutorial-title { margin:10px 0 8px; color:#f4fbff; font-size:20px; line-height:1.3; overflow-wrap:anywhere; font-weight:750; }
.tutorial-root .tutorial-title:focus { outline:none; }
.tutorial-progress { margin:9px 0; color:#a7bed4; font-size:12px; }
.tutorial-description { margin:0; font-size:14px; color:#d5e8f6; white-space:pre-line; }
.tutorial-feedback { margin:12px 0 0; min-height:21px; font-size:12px; color:#adccdf; }
.tutorial-feedback[data-kind="success"] { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid #60cfa94d; border-radius:11px; background:#36b68614; color:#a0f4d0; font-weight:600; }
.tutorial-feedback[data-kind="success"]::before { content:"✓"; display:grid; place-items:center; flex:0 0 23px; height:23px; border-radius:50%; background:#3cae8340; color:#b6ffe1; font-size:14px; }
.tutorial-feedback[data-kind="error"] { padding:9px 10px; border:1px solid #a75d63; background:#702f3738; color:#ffd6da; border-radius:9px; }
.tutorial-feedback[data-kind="waiting"] { color:#ffd78e; }
.tutorial-hint, .tutorial-details { margin:12px 0 0; padding:11px 12px; border-radius:10px; background:#7be9d610; border:1px solid #5eafaa46; font-size:13px; color:#c9f3ed; white-space:pre-line; overflow-wrap:anywhere; }
.tutorial-save-notice { margin:10px 0 0; font-size:11px; color:#ffd78e; }
.tutorial-plan { margin-top:10px; padding-top:8px; border-top:1px solid #41739040; }
.tutorial-plan-title { margin:0 0 7px; font-size:11px; color:#a7bed4; font-weight:600; }
.tutorial-task-list { position:relative; list-style:none; padding:0; margin:0; }
.tutorial-task { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:start; gap:8px; padding:4px 0; font-size:11px; color:#a7bed0; }
.tutorial-task-number { display:grid; place-items:center; width:18px; height:18px; box-sizing:border-box; border:1px solid #456377; border-radius:50%; font-size:11px; font-weight:700; }
.tutorial-task-title { line-height:1.5; }
.tutorial-task[data-state="current"] { color:#e2fff8; }
.tutorial-task[data-state="current"] .tutorial-task-number { border-color:#7effe5; color:#7effe5; }
.tutorial-task[data-state="done"] { color:#a8ebd5; }
.tutorial-task[data-state="done"] .tutorial-task-number { background:#36b68625; border-color:#60cfa960; }
.tutorial-task[data-state="skipped"] { color:#c2ac83; }
.tutorial-actions { display:grid; gap:10px; margin-top:16px; }
.tutorial-secondary-actions { display:flex; gap:8px; }
.tutorial-secondary-actions > .tutorial-button { flex:1; min-width:0; }
.tutorial-navigation { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:8px; }
.tutorial-navigation > .tutorial-button { width:100%; margin:0; }
.tutorial-root .tutorial-card > .tutorial-actions { position:sticky; top:-1px; z-index:2; display:flex !important; align-items:center; justify-content:flex-end; gap:6px; margin:10px 0 12px; padding:6px; border:1px solid #7de5d51c; border-radius:12px; background:#102d40; }
.tutorial-card > .tutorial-actions .tutorial-secondary-actions, .tutorial-card > .tutorial-actions .tutorial-navigation { display:flex; gap:6px; }
.tutorial-root .tutorial-card > .tutorial-actions .tutorial-button { width:36px; height:36px; min-height:36px; flex:none; padding:8px; border-radius:9px; }
.tutorial-actions svg { width:18px; height:18px; display:block; pointer-events:none; }
.tutorial-root .tutorial-card > .tutorial-actions .tutorial-secondary-actions > .tutorial-button:not(:first-child) { width:auto; }
.tutorial-card-minimized > .tutorial-actions .tutorial-secondary-actions, .tutorial-card-minimized > .tutorial-actions .tutorial-skip-step { display:flex; }
.tutorial-root .tutorial-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid #3d627d; border-radius:9px; background:#153650; color:#dcefff; padding:9px 12px; font:600 12px/1.3 Inter,Arial,sans-serif; cursor:pointer; white-space:normal; text-align:center; transition:background .15s,border-color .15s; }
.tutorial-root .tutorial-button:hover { background:#214c68; border-color:#72b9cf; }
.tutorial-root .tutorial-button:focus-visible { outline:3px solid #b1fff0; outline-offset:3px; }
.tutorial-root .tutorial-button:disabled { opacity:.45; cursor:default; }
.tutorial-root .tutorial-button-primary { background:linear-gradient(125deg,#227f7b,#1c646e); border-color:#5fc9bd; color:#fff; margin-left:auto; }
.tutorial-root .tutorial-button-primary:hover { background:#298b84; }
.tutorial-root .tutorial-window-controls .tutorial-button { width:36px; height:36px; min-height:36px; padding:8px; border:1px solid transparent; border-radius:10px; background:transparent; color:#b2cddc; box-shadow:none; transition:background .18s,color .18s,border-color .18s; }
.tutorial-window-controls svg { display:block; width:18px; height:18px; pointer-events:none; }
.tutorial-root .tutorial-window-controls .tutorial-button:hover { background:#8debd414; border-color:#8debd42e; color:#e0fff6; }
.tutorial-root .tutorial-window-controls .tutorial-pause { background:linear-gradient(145deg,#318b8338,#21636b30); border-color:#72dac334; color:#8ff0d8; }
.tutorial-root .tutorial-window-controls .tutorial-pause[data-paused="true"] { background:linear-gradient(145deg,#318b8360,#21636b50); color:#afffe6; }
.tutorial-footer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:14px; border-top:1px solid #41739040; padding-top:12px; }
.tutorial-root .tutorial-button-quiet { min-width:0; border-color:#52718a4d; background:#071a2a55; padding:7px 5px; color:#adc8dc; font-weight:500; font-size:10px; }
.tutorial-library { left:50%; top:50%; transform:translate(-50%,-50%); width:800px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; padding:28px; border-color:#35576f; background:radial-gradient(ellipse at 0 0,#18445988,transparent 65%),#0c1b2b; box-shadow:0 24px 90px #000b,inset 0 1px #ffffff0d; }
.tutorial-library-intro { margin:0 0 18px; font-size:13px; color:#b8d0e3; }
.tutorial-course-list { display:grid; gap:10px; overflow-y:auto; overscroll-behavior:contain; padding:4px 7px 7px 3px; scrollbar-width:thin; scrollbar-color:#426c80 #102637; color-scheme:dark; }
.tutorial-course { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; padding:20px; border:1px solid #294355; border-radius:16px; background:linear-gradient(120deg,#18354999,#13283b66); align-items:center; transition:border-color .18s,background .18s; }
.tutorial-course:hover { border-color:#518398; background-color:#1d405544; }
.tutorial-course[data-status="completed"] { border-color:#316157; }
.tutorial-course[data-status="active"],.tutorial-course[data-status="paused"] { border-color:#43888b; }
.tutorial-course-progress { display:block; appearance:none; border:0; width:min(100%,280px); height:4px; margin-top:12px; border-radius:8px; overflow:hidden; background:#284154; color:#64d8c5; }
.tutorial-course-progress::-webkit-progress-bar { background:#284154; border-radius:8px; }
.tutorial-course-progress::-webkit-progress-value { background:linear-gradient(90deg,#338f9a,#70e3c7); border-radius:8px; }
.tutorial-course-progress::-moz-progress-bar { background:#64d8c5; }
.tutorial-library .tutorial-button-primary { min-width:136px; border-color:#409b98; border-radius:11px; background:linear-gradient(135deg,#287f85,#18575e); box-shadow:0 4px 12px #0003,inset 0 1px #ffffff15; font-weight:700; }
.tutorial-library .tutorial-button-primary:hover { background:linear-gradient(135deg,#33999b,#216d73); }
.tutorial-library .tutorial-button-quiet { padding:6px 10px; min-height:30px; font-size:11px; }
.tutorial-library-controls { padding-top:18px; border-top:1px solid #294355; }
.tutorial-library .tutorial-autostart,.tutorial-library .tutorial-library-close { border-radius:11px; background:#152c3e; border-color:#36576b; }
.tutorial-course-text { grid-row:span 2; }
.tutorial-course h3 { margin:0 0 4px; color:#edfbff; font-size:15px; line-height:1.35; }
.tutorial-course p { margin:0; color:#b1c8da; font-size:12px; line-height:1.5; }
.tutorial-course-count { color:#8cddcc; font-size:11px; text-align:right; }
.tutorial-root .tutorial-library-close { align-self:flex-end; flex-shrink:0; margin-top:15px; }
.tutorial-library-controls { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:15px; flex-shrink:0; }
.tutorial-library-controls .tutorial-library-close { margin-top:0; }
.tutorial-card-nudge { animation:tutorial-nudge .25s ease-in-out; }
@keyframes tutorial-glow { 50% { box-shadow:0 0 0 7px #1ddfbd22,0 0 38px #40f3d2aa; border-color:#d2fff4; } }
@keyframes tutorial-point { 50% { margin-top:8px; } }
@keyframes tutorial-arrow-move { 50% { margin-left:6px; } }
@keyframes tutorial-nudge { 25%,75% { margin-left:-3px; } 50% { margin-left:3px; } }
@media (max-width:700px) {
  .tutorial-card, .tutorial-card-centered { left:12px !important; right:12px; top:auto !important; bottom:max(12px,env(safe-area-inset-bottom)); width:auto; max-width:none; max-height:46dvh; transform:none; padding:14px 16px; border-radius:16px; }
  .tutorial-card.tutorial-card-mobile-top:not(.tutorial-card-centered) { top:max(12px,env(safe-area-inset-top)) !important; bottom:auto; }
  .tutorial-root .tutorial-title { font-size:18px; margin:6px 0; }
  .tutorial-progress { margin:4px 0 7px; font-size:11px; }
  .tutorial-description { font-size:13px; }
  .tutorial-feedback { margin-top:8px; }
  .tutorial-actions { margin-top:11px; gap:6px; }
  .tutorial-root .tutorial-button { padding:8px 10px; }
  .tutorial-footer { margin-top:6px; padding-top:4px; }
  .tutorial-eyebrow { letter-spacing:.8px; }
  .tutorial-library { padding:16px; max-width:calc(100vw - 20px); max-height:calc(100dvh - 24px); }
  .tutorial-course { padding:12px; gap:8px; }
  .tutorial-course-text { grid-row:auto; grid-column:1 / -1; }
  .tutorial-course-count { text-align:left; }
}
body:has(.tutorial-root:not([hidden])) #buildModalList .building-palette:is([data-tutorial-target="first-station"],[data-tutorial-target="build-choices"]) .building-palette-card:is(.building-palette-card--fire,.building-palette-card--police) { outline:3px solid #7effe5; outline-offset:-3px; box-shadow:0 0 20px #40f3d255; }
body:has(.tutorial-root:not([hidden])) #buildModalList .building-palette:is([data-tutorial-target="first-station"],[data-tutorial-target="build-choices"]) .building-palette-card:not(.building-palette-card--fire):not(.building-palette-card--police) { opacity:.45; }
.tutorial-root .tutorial-card.tutorial-card-manual { transform:none !important; left:var(--tutorial-left) !important; top:var(--tutorial-top) !important; right:auto; bottom:auto; width:var(--tutorial-width,320px); max-width:calc(100vw - 16px); }
@media (prefers-reduced-motion:reduce) {
  .tutorial-root *, .tutorial-root *::before, .tutorial-root *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}