/* Brand palette from the app icon: navy, petrol and silver. */
:root { --boot-bg:#07182b; --boot-ink:#d7dee8; --boot-muted:#9cacc0; --boot-accent:#6992a6; --boot-line:#2a425c; }
html,body { margin:0; height:100%; background:var(--boot-bg); }
#pk-boot,#pk-boot * { box-sizing:border-box; }
#pk-boot { position:fixed; inset:0; z-index:99999; overflow:auto; color:var(--boot-ink); background:radial-gradient(ellipse at 50% 42%,#14314c 0,#0b2037 40%,var(--boot-bg) 78%); font-family:"Segoe UI",sans-serif; line-height:1.5; transition:opacity 180ms ease,visibility 180ms ease; }
#pk-boot[hidden] { display:none; }
#pk-boot.pk-boot--hide { opacity:0; visibility:hidden; pointer-events:none; }
.boot-shell { max-width:1320px; min-height:100%; margin:auto; padding:24px 48px; display:flex; flex-direction:column; }
.boot-header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:650; }
.brand img { border-radius:12px; }
.brand small { display:block; font-size:9px; letter-spacing:2px; font-weight:500; color:var(--boot-muted); }
.header-note { color:var(--boot-muted); font-size:12px; }
.boot-main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 0 32px; }
.eyebrow { color:var(--boot-muted); font-size:10px; font-weight:600; letter-spacing:3px; margin:0 0 12px; }
.boot-main h1 { font-size:clamp(28px,3vw,42px); font-weight:400; letter-spacing:-1px; line-height:1.25; margin:0; }
.boot-main h1 em { font-family:Georgia,serif; font-weight:400; color:#b0c5d4; }
.intro { color:var(--boot-muted); font-size:13px; margin:12px 0 0; }
.compass-stage { position:relative; width:min(300px,76vw); aspect-ratio:1; margin:24px 0 16px; }
.compass { width:100%; height:100%; overflow:visible; }
.outer-orbit { fill:none; stroke:#446078; stroke-dasharray:2 7; }
.cardinal { position:absolute; font-family:Georgia,serif; font-size:11px; color:var(--boot-muted); }
.north { top:-14px; left:50%; transform:translateX(-50%); }
.south { bottom:-14px; left:50%; transform:translateX(-50%); }
.east { right:-14px; top:50%; transform:translateY(-50%); }
.west { left:-14px; top:50%; transform:translateY(-50%); }
.compass-rose,#compass-bearing { transform-origin:200px 200px; transition:transform 700ms cubic-bezier(.2,.7,.2,1); }
#pk-boot[data-bearing="1"] .compass-rose,#pk-boot[data-bearing="1"] #compass-bearing { transform:rotate(60deg); }
#pk-boot[data-bearing="2"] .compass-rose,#pk-boot[data-bearing="2"] #compass-bearing { transform:rotate(135deg); }
.directions { display:flex; gap:12px; margin-top:24px; max-width:100%; flex-wrap:wrap; justify-content:center; }
.directions button { font:inherit; font-size:16px; min-height:56px; padding:12px 28px; cursor:pointer; color:var(--boot-muted); border:1px solid transparent; border-radius:30px; background:transparent; }
.directions button span { font-size:12px; margin-right:10px; opacity:.8; }
.directions button[aria-pressed="true"] { border-color:#59738c; color:var(--boot-ink); background:#1b354e; }
.directions button:hover { background:#203c55; color:var(--boot-ink); }
.directions button:focus-visible { outline:2px solid #b0c5d4; outline-offset:4px; }
.compass-message { max-width:620px; min-height:104px; margin-top:24px; }
.compass-message h2 { font-size:26px; font-weight:500; margin:0 0 12px; }
.compass-message p { color:var(--boot-muted); font-size:17px; line-height:1.7; margin:0; }
.interaction-hint { font-size:13px; color:var(--boot-muted); margin:8px 0 24px; }
.loading-status { width:min(460px,100%); }
.loading-track { height:3px; background:var(--boot-line); overflow:hidden; margin-bottom:20px; }
.loading-track>span { display:block; width:35%; height:100%; background:#8fa9bc; animation:boot-travel 2.8s ease-in-out infinite; }
.loading-status strong { font-size:16px; font-weight:500; }
.loading-status p { font-size:14px; color:var(--boot-muted); margin:6px 0 0; }
@keyframes boot-travel { from { transform:translateX(-100%); } to { transform:translateX(390%); } }
@media (min-width:700px) and (max-height:850px) {
  .compass-stage { width:260px; margin-top:20px; }
  .boot-main { padding:16px 0; }
  .interaction-hint { margin-bottom:16px; }
}
@media (max-width:600px) {
  .boot-shell { padding:20px; }
  .header-note { display:none; }
  .boot-main { padding-top:32px; }
  .boot-main h1 { max-width:340px; }
  .intro { max-width:260px; }
  .directions { gap:4px; }
  .directions button { padding:10px 12px; font-size:15px; }
  .compass-message { min-height:112px; }
}
@media (prefers-reduced-motion:reduce) {
  #pk-boot,.compass-rose,#compass-bearing { transition:none; }
  .loading-track>span { animation:none; width:100%; opacity:.65; }
}
#pk-boot.boot-paused .loading-track>span { animation-play-state:paused; }