:root{
  --bg:#eaf3fb;
  --bg-deep:#dcebf8;
  --surface:#ffffff;
  --primary:#0a5aa8;
  --primary-dark:#063f78;
  --teal:#00a6ad;
  --success:#1fa363;
  --success-dark:#158056;
  --text:#152531;
  --text-muted:#5c7186;
  --locked:#c6d6e4;
  --locked-line:#b7cadb;
  --warn:#e2a63c;
  --danger:#e2574c;
  --radius-lg:22px;
  --radius-md:16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg);
  font-family: "Segoe UI", "Heebo", -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text);
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
#app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--bg);
}
.bg-layer{
  position:absolute; inset:0; z-index:-1;
  opacity:0; transition:opacity 1.2s ease;
}
.bg-layer.visible{opacity:1;}

/* ---------- App bar ---------- */
.app-bar{
  padding: calc(14px + var(--safe-top)) 18px 12px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface);
  box-shadow:0 2px 10px rgba(10,60,110,0.08);
  z-index:20;
}
.app-bar-title{display:flex; align-items:center; gap:10px;}
.app-bar-emoji{
  font-size:26px; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--teal));
  border-radius:14px; color:#fff; box-shadow:0 4px 10px rgba(10,90,168,0.35);
}
.app-bar-title h1{font-size:16px; margin:0; color:var(--primary-dark); font-weight:800;}
.app-bar-title p{font-size:11.5px; margin:1px 0 0; color:var(--text-muted);}
.reset-btn{
  border:none; background:var(--bg-deep); color:var(--primary-dark);
  width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.reset-btn:active{transform:scale(0.88); background:var(--locked);}

/* ---------- Progress ---------- */
.progress-wrap{
  padding:10px 18px 14px; background:var(--surface);
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid #e3edf6;
  z-index:19;
}
.progress-track{
  flex:1; height:10px; border-radius:6px; background:var(--bg-deep); overflow:hidden;
  position:relative;
}
.progress-fill{
  height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg, var(--primary), var(--teal));
  transition:width .6s cubic-bezier(.22,.9,.32,1);
}
.progress-fill.full{background:linear-gradient(90deg, var(--teal), var(--success));}
.progress-label{font-size:11.5px; font-weight:700; color:var(--primary-dark); white-space:nowrap;}

/* ---------- Map viewport ---------- */
.map-viewport{
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:26px 0 40px;
  position:relative;
}
.scroll-top-button{
  position:fixed; left:18px; bottom:calc(18px + var(--safe-bottom)); z-index:22;
  width:48px; height:48px; display:grid; place-items:center; padding:0;
  border:0; border-radius:50%; background:var(--success); color:#fff;
  box-shadow:0 9px 18px rgba(21,128,86,.28); font-size:22px; font-weight:800;
  line-height:1; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,filter .2s ease;
}
.scroll-top-button.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top-button:hover{filter:brightness(.96)}
.scroll-top-button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.path-track{
  display:flex; flex-direction:column; align-items:stretch;
  gap:18px; position:relative; padding:0 20px;
  max-width:640px; margin:0 auto;
}

/* ---------- View header (nurse list) ---------- */
.view-header{padding:0 2px;}
.view-header h2{margin:0 0 2px; font-size:17px; color:var(--primary-dark);}
.view-header p{margin:0; font-size:12.5px; color:var(--text-muted);}

/* ---------- Nurse list (circular nodes, like the journey path) ---------- */
.nurse-grid{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; padding:6px 2px;}
.nurse-node{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:104px; border:none; background:transparent; cursor:pointer;
  padding:4px; text-align:center; transition:transform .15s ease;
}
.nurse-node:active{transform:scale(0.95);}
.nurse-node-photo-wrap{position:relative;}
.nurse-node-photo{
  width:84px; height:84px; border-radius:50%; overflow:hidden;
  background:var(--bg-deep); box-shadow:0 6px 14px rgba(20,50,80,0.15);
  border:4px solid var(--locked-line); transition:border-color .3s ease;
}
.nurse-node-photo img{width:100%; height:100%; object-fit:cover;}
.nurse-node-points{
  position:absolute; top:-4px; inset-inline-end:-6px;
  background:var(--surface); color:#8a6414; border:2px solid var(--warn);
  font-size:10px; font-weight:800; padding:1px 6px; border-radius:20px;
  box-shadow:0 3px 6px rgba(10,60,110,0.15); white-space:nowrap;
}
.nurse-node-open{
  position:absolute; bottom:-2px; inset-inline-start:-2px; z-index:2;
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--teal)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; box-shadow:0 3px 8px rgba(10,90,168,0.35);
}
.nurse-node.status-green .nurse-node-photo{border-color:var(--success);}
.nurse-node.status-yellow .nurse-node-photo{border-color:var(--warn);}
.nurse-node.status-red .nurse-node-photo{border-color:var(--danger);}
.nurse-node-pct{font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; background:var(--bg-deep); color:var(--text-muted);}
.nurse-node.status-green .nurse-node-pct{background:#e3f6ec; color:var(--success-dark);}
.nurse-node.status-yellow .nurse-node-pct{background:#fbf1de; color:#8a6414;}
.nurse-node.status-red .nurse-node-pct{background:#fbe8e6; color:#9c332a;}
.nurse-node-name{font-size:12.5px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px;}
.nurse-node-meta{font-size:10px; color:var(--text-muted);}

/* ---------- Detail header (nurse workspace) ---------- */
.detail-header{display:flex; flex-direction:column; gap:10px; padding:0 2px;}
.back-btn{
  align-self:flex-start; border:none; background:var(--bg-deep); color:var(--primary-dark);
  font-size:13px; font-weight:800; padding:8px 14px; border-radius:20px; cursor:pointer;
  transition:transform .15s ease;
}
.back-btn:active{transform:scale(0.95);}
.detail-nurse{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.detail-nurse-name{font-size:19px; font-weight:800; color:var(--primary-dark);}
.calendar-badge{
  background:var(--surface); color:var(--text-muted); font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:20px; box-shadow:0 2px 6px rgba(10,60,110,0.1);
}
.points-badge{
  background:#fdf3df; color:#8a6414; font-size:11.5px; font-weight:800;
  padding:4px 10px; border-radius:20px; box-shadow:0 2px 6px rgba(10,60,110,0.1);
}

/* ---------- Space tabs (מעקב / הרשאות - two workspaces per nurse) ---------- */
.space-tabs{
  display:flex; gap:6px; background:var(--bg-deep); border-radius:16px; padding:4px;
}
.space-tab{
  flex:1; border:none; background:transparent; color:var(--text-muted);
  font-size:13px; font-weight:800; padding:9px 10px; border-radius:12px; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.space-tab.active{background:var(--surface); color:var(--primary-dark); box-shadow:0 3px 8px rgba(10,60,110,0.15);}

/* ---------- Node grid (shared visual language for both spaces) ---------- */
.module-grid{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; padding:6px 2px;}
.module-node{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:124px; border:none; background:transparent; cursor:pointer;
  padding:4px; text-align:center; transition:transform .15s ease;
}
.module-node:active{transform:scale(0.95);}
.module-node-bubble-wrap{position:relative;}
.module-node-bubble{
  width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:28px; background:var(--surface); box-shadow:0 6px 14px rgba(20,50,80,0.15);
  border:4px solid var(--locked-line); transition:border-color .3s ease;
  filter:drop-shadow(0 2px 2px rgba(20,50,80,.2));
}
.module-node.status-green .module-node-bubble{border-color:var(--success);}
.module-node.status-yellow .module-node-bubble{border-color:var(--warn);}
.module-node.status-red .module-node-bubble{border-color:var(--danger);}
.module-node-open{
  position:absolute; bottom:-2px; inset-inline-start:-2px; z-index:2;
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--teal)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; box-shadow:0 3px 8px rgba(10,90,168,0.35);
}
.module-node-pct{font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; background:var(--bg-deep); color:var(--text-muted);}
.module-node.status-green .module-node-pct{background:#e3f6ec; color:var(--success-dark);}
.module-node.status-yellow .module-node-pct{background:#fbf1de; color:#8a6414;}
.module-node.status-red .module-node-pct{background:#fbe8e6; color:#9c332a;}
.module-node-title{font-size:12.5px; font-weight:800; color:var(--text); line-height:1.3;}

/* ---------- Dual-signature rows inside sheet ---------- */
.sig-row{display:flex; gap:6px; margin-top:4px;}
.sig-tag{
  font-size:10.5px; font-weight:700; color:var(--text-muted);
  background:var(--surface); border:1px solid var(--locked-line);
  padding:2px 7px; border-radius:20px;
}
.sig-tag.signed{color:var(--success-dark); border-color:var(--success); background:#e3f6ec;}

.app-footer{
  flex-shrink:0; background:var(--surface); padding:10px 0 calc(10px + var(--safe-bottom));
  text-align:center; z-index:15;
}
.app-footer-message{
  margin:0 18px 8px; color:var(--text-muted); font-size:12px; line-height:1.45;
}
.app-footer-stripe{
  height:2px; border-radius:999px; margin:0 auto 8px;
  width:min(220px, 60%);
  background:linear-gradient(90deg, var(--primary), var(--teal));
}
.app-footer-brand{
  color:var(--primary-dark); font-size:11.5px; font-weight:800; letter-spacing:.3px;
}

/* ---------- Detail sheet (mobile: bottom sheet) ---------- */
.backdrop{
  position:fixed; inset:0; background:rgba(10,25,40,0.35);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:30;
}
.backdrop.show{opacity:1; pointer-events:auto;}

.sheet{
  position:fixed; inset:0;
  background:var(--surface);
  border-radius:0;
  padding:calc(12px + var(--safe-top)) 22px calc(22px + var(--safe-bottom));
  transform:translateY(105%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -8px 30px rgba(10,40,70,0.25);
  z-index:31; max-height:none; overflow-y:auto;
}
.sheet.show{transform:translateY(0);}
.sheet-handle{width:42px; height:5px; border-radius:4px; background:var(--locked); margin:8px auto 14px;}
.sheet-badge{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.3px;
  color:#fff; background:linear-gradient(135deg,var(--primary),var(--teal));
  padding:5px 12px; border-radius:20px; margin-bottom:10px;
}
.sheet h2{margin:0 0 6px; font-size:19px; color:var(--primary-dark);}
.sheet .message{font-size:14px; color:var(--text); line-height:1.6; margin:0 0 14px;}
.checklist{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px;}
.checklist-item{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted);
  background:var(--bg); border-radius:12px; padding:9px 12px;
  cursor:pointer; user-select:none;
  transition:background .2s ease, color .2s ease;
}
.checklist-item:active{transform:scale(0.98);}
.checklist-item .check-box{
  flex-shrink:0; width:22px; height:22px; border-radius:7px;
  border:2px solid var(--locked-line); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:900; line-height:1;
  transition:background .2s ease, border-color .2s ease;
}
.checklist-item.checked{background:#e3f6ec; color:var(--text);}
.checklist-item.checked .check-box{background:var(--success); border-color:var(--success);}
.checklist-hint{font-size:11.5px; color:var(--text-muted); text-align:center; margin:-6px 0 14px;}
.sheet-actions{display:flex; gap:10px;}
.btn{
  flex:1; border:none; border-radius:14px; padding:13px 14px; font-size:14.5px; font-weight:800;
  cursor:pointer; transition:transform .15s ease, opacity .2s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--teal)); color:#fff;}
.btn-ghost{background:var(--bg-deep); color:var(--primary-dark);}
.btn[disabled]{opacity:.55; cursor:default;}
.done-tag{
  display:flex; align-items:center; gap:6px; color:var(--success-dark); font-weight:800; font-size:13px; margin-bottom:14px;
}

/* ---------- Mobile scale-up (x1.5 for better visibility) ---------- */
@media (max-width: 899px){
  .app-bar{padding: calc(21px + var(--safe-top)) 27px 18px;}
  .app-bar-title{gap:15px;}
  .app-bar-emoji{font-size:39px; width:63px; height:63px; border-radius:21px;}
  .app-bar-title h1{font-size:24px;}
  .app-bar-title p{font-size:17px;}
  .reset-btn{width:57px; height:57px; font-size:27px;}

  .progress-wrap{padding:15px 27px 21px; gap:15px;}
  .progress-track{height:15px; border-radius:9px;}
  .progress-fill{border-radius:9px;}
  .progress-label{font-size:17px;}

  .map-viewport{padding:39px 0 60px;}
  .path-track{gap:24px; padding:0 30px;}

  .nurse-grid{gap:27px;}
  .nurse-node{width:156px; gap:6px;}
  .nurse-node-photo{width:126px; height:126px; border-width:6px;}
  .nurse-node-points{font-size:13px; padding:2px 9px; top:-6px;}
  .nurse-node-open{width:34px; height:34px; font-size:18px;}
  .nurse-node-pct{font-size:15px; padding:3px 12px;}
  .nurse-node-name{font-size:18px; max-width:150px;}
  .nurse-node-meta{font-size:14px;}

  .back-btn{font-size:16px; padding:10px 18px;}
  .detail-nurse-name{font-size:25px;}
  .calendar-badge{font-size:15px; padding:5px 13px;}
  .points-badge{font-size:15px; padding:5px 13px;}

  .space-tab{font-size:17px; padding:12px 14px;}

  .module-grid{gap:24px;}
  .module-node{width:180px; gap:9px;}
  .module-node-bubble{width:108px; height:108px; font-size:42px; border-width:6px;}
  .module-node-open{width:34px; height:34px; font-size:18px;}
  .module-node-pct{font-size:15px; padding:3px 12px;}
  .module-node-title{font-size:18px;}
}

/* ---------- Desktop layout ---------- */
@media (min-width: 900px){
  .app-bar{padding:18px 34px 14px;}
  .progress-wrap{padding:12px 34px 16px;}
  .map-viewport{padding:40px 20px 60px;}
  .path-track{max-width:640px; margin:0 auto; padding:0 20px;}

  .backdrop{background:rgba(10,25,40,0.2);}
  .sheet{
    left:auto; right:0; top:0; bottom:0;
    width:380px; height:100%; max-height:none;
    border-radius:22px 0 0 22px;
    transform:translateX(105%);
    padding:26px 28px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .sheet.show{transform:translateX(0);}
  .sheet-handle{display:none;}
}

/* ---------- Login screen (license number, then password - both 6-digit keypad) ---------- */
.login-screen{
  position:fixed; inset:0; z-index:110;
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg);
  padding:calc(28px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
  transition:opacity .35s ease, visibility .35s ease, transform .35s ease;
}
.login-screen.is-hidden{opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-16px);}
.login-header{width:100%; max-width:340px; text-align:center; margin-top:8px; position:relative;}
.login-back{
  position:absolute; top:-4px; right:0; border:none; background:var(--bg-deep); color:var(--primary-dark);
  width:36px; height:36px; border-radius:50%; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .15s ease;
}
.login-back.visible{opacity:1; visibility:visible;}
.login-back:active{transform:scale(0.88);}
.login-title{margin:0 0 6px; font-size:19px; color:var(--primary-dark); font-weight:800;}
.login-subtitle{margin:0; font-size:13px; color:var(--text-muted);}

.login-dots{display:flex; gap:14px; margin:34px 0; direction:ltr;}
.login-dot{
  width:14px; height:14px; border-radius:50%; background:var(--bg-deep);
  border:2px solid var(--locked-line);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.login-dot.filled{background:var(--primary); border-color:var(--primary); transform:scale(1.1);}
.login-dots.error .login-dot{background:var(--danger); border-color:var(--danger);}
.login-dots.error{animation:login-shake .4s ease;}
@keyframes login-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);}
  80%{transform:translateX(6px);}
}

.login-keypad{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  width:100%; max-width:300px;
}
.login-key{
  width:100%; aspect-ratio:1; border-radius:50%; border:none;
  background:var(--surface); color:var(--text); font-size:22px; font-weight:700;
  box-shadow:0 4px 12px rgba(10,60,110,0.1);
  cursor:pointer; min-height:64px; min-width:64px;
  transition:transform .12s ease, background .12s ease;
}
.login-key:active{transform:scale(0.95); background:var(--bg-deep);}
.login-key-side{background:transparent; box-shadow:none; font-size:20px; color:var(--text-muted);}

.login-footer{margin-top:auto; padding-top:20px;}
.login-forgot{
  border:none; background:transparent; color:var(--primary);
  font-size:13px; text-decoration:underline; text-underline-offset:4px; cursor:pointer;
}

@media (max-width:899px){
  .login-title{font-size:26px;}
  .login-subtitle{font-size:17px;}
  .login-back{width:50px; height:50px; font-size:22px;}
  .login-dots{gap:18px; margin:44px 0;}
  .login-dot{width:19px; height:19px;}
  .login-keypad{max-width:400px; gap:26px;}
  .login-key{font-size:29px; min-height:84px;}
  .login-key-side{font-size:27px;}
  .login-forgot{font-size:17px;}
}

/* ---------- Six-second journey intro ---------- */
.journey-intro{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center;
  min-width:320px; overflow:hidden;
  padding:calc(28px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
  background:
    radial-gradient(circle at 84% 13%, rgba(0,166,173,.13), transparent 26rem),
    radial-gradient(circle at 5% 88%, rgba(31,163,99,.10), transparent 21rem),
    var(--bg);
  transition:opacity .45s ease, visibility .45s ease;
}
.journey-intro.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.intro-cloud{
  position:absolute; border:1px solid rgba(255,255,255,.8); border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.65));
  box-shadow:inset 0 -4px 0 rgba(176,208,233,.28),0 8px 18px rgba(39,83,119,.08);
  opacity:0; animation:intro-cloud-in .55s .55s ease forwards,intro-cloud-clear 1.1s 2.2s cubic-bezier(.4,0,.2,1) forwards;
}
.intro-cloud::before,.intro-cloud::after{position:absolute; content:""; border:inherit; border-radius:50%; background:inherit; box-shadow:inset 0 -3px 0 rgba(176,208,233,.22);}
.intro-cloud--1{width:74px;height:24px;top:11%;right:-18px;}
.intro-cloud--1::before{width:35px;height:35px;top:-18px;right:13px}.intro-cloud--1::after{width:27px;height:27px;top:-12px;left:15px}
.intro-cloud--2{width:60px;height:20px;bottom:18%;left:-20px;animation-delay:.8s,2.45s}.intro-cloud--2::before{width:29px;height:29px;top:-15px;right:9px}.intro-cloud--2::after{width:22px;height:22px;top:-10px;left:12px}
.intro-cloud--3{width:54px;height:18px;top:41%;left:-10px;animation-delay:1.05s,2.7s}.intro-cloud--3::before{width:28px;height:28px;top:-15px;right:8px}.intro-cloud--3::after{width:19px;height:19px;top:-9px;left:11px}
.intro-cloud--4{width:76px;height:25px;top:54%;right:-31px;animation-delay:1.25s,2.9s}.intro-cloud--4::before{width:36px;height:36px;top:-19px;right:14px}.intro-cloud--4::after{width:26px;height:26px;top:-13px;left:15px}
.intro-cloud--5{width:46px;height:16px;top:24%;left:18px;animation-delay:1.45s,3.1s}.intro-cloud--5::before{width:23px;height:23px;top:-12px;right:7px}.intro-cloud--5::after{width:16px;height:16px;top:-8px;left:9px}
.intro-cloud--6{width:48px;height:17px;bottom:10%;right:15px;animation-delay:1.65s,3.3s}.intro-cloud--6::before{width:25px;height:25px;top:-13px;right:7px}.intro-cloud--6::after{width:17px;height:17px;top:-9px;left:10px}
.intro-cloud--7{width:40px;height:14px;top:33%;right:13px;animation-delay:1.8s,3.45s}.intro-cloud--7::before{width:20px;height:20px;top:-11px;right:6px}.intro-cloud--7::after{width:14px;height:14px;top:-7px;left:8px}
.intro-cloud--8{width:70px;height:23px;bottom:31%;left:-25px;animation-delay:1.95s,3.6s}.intro-cloud--8::before{width:34px;height:34px;top:-18px;right:12px}.intro-cloud--8::after{width:24px;height:24px;top:-12px;left:14px}
.intro-cloud--9{width:38px;height:13px;top:16%;left:3px;animation-delay:2.1s,3.75s}.intro-cloud--9::before{width:19px;height:19px;top:-10px;right:6px}.intro-cloud--9::after{width:13px;height:13px;top:-7px;left:7px}
.intro-cloud--10{width:56px;height:19px;bottom:6%;left:22%;animation-delay:2.25s,3.9s}.intro-cloud--10::before{width:27px;height:27px;top:-14px;right:9px}.intro-cloud--10::after{width:19px;height:19px;top:-10px;left:11px}
.intro-brand{position:relative;z-index:1;color:var(--primary);font-size:15px;font-weight:800;letter-spacing:.02em;opacity:0;animation:intro-rise .55s .1s ease forwards;}
.intro-title{position:relative;z-index:1;margin:17px 0 8px;color:var(--primary-dark);font-size:clamp(31px,9vw,45px);line-height:1.1;letter-spacing:-.045em;text-align:center;opacity:0;animation:intro-rise .6s .25s ease forwards;}
.intro-copy{position:relative;z-index:1;margin:0;max-width:300px;color:var(--text-muted);font-size:16px;line-height:1.65;text-align:center;opacity:0;animation:intro-rise .6s .45s ease forwards;}
.intro-route{position:relative;z-index:1;width:min(100%,370px);height:min(40svh,310px);min-height:245px;margin:clamp(34px,8svh,62px) 0 12px;}
.intro-route svg{width:100%;height:100%;overflow:visible}.intro-route-base{fill:none;stroke:var(--locked-line);stroke-width:4;stroke-linecap:round}.intro-route-active{fill:none;stroke:url(#introRouteGradient);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:530;stroke-dashoffset:530;animation:intro-draw 2.5s .65s cubic-bezier(.4,0,.2,1) forwards}
.intro-start,.intro-finish{fill:var(--surface);stroke-width:4}.intro-start{stroke:var(--teal)}.intro-finish{stroke:var(--primary)}
.intro-start-aura,.intro-finish-aura{fill:none;transform-box:fill-box;transform-origin:center}.intro-start-aura{stroke:var(--teal);stroke-width:3;opacity:0;animation:intro-start-pulse 1.7s .85s ease-out 2}.intro-finish-aura{stroke:var(--primary);stroke-width:3;opacity:0;animation:intro-finish-pulse 1.9s 2.5s ease-out 1}
.intro-stage-dot{fill:var(--teal);opacity:0;transform-box:fill-box;transform-origin:center;animation:intro-pop .42s ease forwards}.intro-dot-1{animation-delay:1.15s}.intro-dot-2{animation-delay:1.6s}.intro-dot-3{animation-delay:2.05s}.intro-halo{fill:rgba(0,166,173,.16);opacity:0;transform-box:fill-box;transform-origin:center;animation:intro-halo .7s ease forwards}.intro-halo-1{animation-delay:1.05s}.intro-halo-2{animation-delay:1.5s}.intro-halo-3{animation-delay:1.95s}
.intro-traveler{fill:#f5ad35;stroke:var(--primary-dark);stroke-width:2.5;filter:drop-shadow(0 4px 5px rgba(6,63,120,.22))}.intro-label{fill:var(--text-muted);font-family:"Segoe UI","Heebo",sans-serif;font-size:13px;font-weight:700}.intro-label-start{fill:var(--teal)}.intro-label-finish{fill:var(--primary-dark)}
.intro-message{position:relative;z-index:1;margin:0;color:var(--primary-dark);font-size:clamp(20px,5.7vw,27px);font-weight:800;letter-spacing:-.025em;text-align:center;opacity:0;animation:intro-rise .65s 2.2s ease forwards;}
.intro-skip{position:relative;z-index:1;margin-top:22px;padding:8px 2px;border:0;color:var(--primary);background:transparent;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:0;animation:intro-rise .5s 2.55s ease forwards;}
@keyframes intro-draw{to{stroke-dashoffset:0}}@keyframes intro-rise{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes intro-pop{0%{transform:scale(.1);opacity:0}65%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes intro-halo{0%{transform:scale(.25);opacity:0}40%{opacity:1}100%{transform:scale(1.5);opacity:0}}@keyframes intro-cloud-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes intro-cloud-clear{to{opacity:0;transform:translate(-42px,-22px) scale(1.18)}}@keyframes intro-start-pulse{0%{transform:scale(.55);opacity:0}22%{opacity:.9}100%{transform:scale(2.5);opacity:0}}@keyframes intro-finish-pulse{0%{transform:scale(.55);opacity:0}24%{opacity:.9}100%{transform:scale(2.65);opacity:0}}
@media (prefers-reduced-motion:reduce){.journey-intro *,.journey-intro *::before,.journey-intro *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}.intro-route-active{stroke-dashoffset:0}}