/* ==========================================================================
   APT.215 — walkthrough UI
   ========================================================================== */
:root{
  --ink:#151820; --paper:#f4f5f7; --line:#d7dae0;
  --accent:#00a3c4; --accent2:#0d6f86;
  --shadow:0 2px 14px rgba(15,20,30,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:#0e1116;overscroll-behavior:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

#stage{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none;
  cursor:grab}
#stage.dragging{cursor:grabbing}

/* ------------------------------------------------------------------ loader */
#boot{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 38%,#141922 0%,#0b0e13 72%);color:#e8edf3;
  transition:opacity .6s ease}
#boot.gone{opacity:0;pointer-events:none}

.bootBrand{position:absolute;top:26px;left:50%;transform:translateX(-50%);
  font-size:13px;font-weight:800;letter-spacing:.55em;
  background:linear-gradient(90deg,#f4d780,#d4af37);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.bootVert{position:absolute;left:16px;top:66px;writing-mode:vertical-rl;
  letter-spacing:.42em;font-size:11px;text-transform:uppercase;color:#7d8794}

.bootArt{width:min(44vw,300px);height:auto}
.bootArt .draw{fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.bootArt .draw>*{stroke-dasharray:1;stroke-dashoffset:1;
  animation:bootDraw 3s ease-in-out infinite}
.bootArt .draw>*:nth-child(2){animation-delay:.20s}
.bootArt .draw>*:nth-child(3){animation-delay:.35s}
.bootArt .draw>*:nth-child(4){animation-delay:.50s}
.bootArt .draw>*:nth-child(5){animation-delay:.65s}
.bootArt .draw>*:nth-child(6){animation-delay:.80s}
.bootArt .draw>*:nth-child(7){animation-delay:.95s}
.bootArt .draw>*:nth-child(8){animation-delay:1.10s}
@keyframes bootDraw{
  0%{stroke-dashoffset:1}
  45%{stroke-dashoffset:0}
  80%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-1}
}

.bootFoot{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);text-align:center}
.bootTitle{font-size:12px;letter-spacing:.2em;color:#c7ccd3}
#boot small{display:block;margin-top:6px;color:#7d8794;letter-spacing:.05em;font-size:12px}

.bootPct{position:absolute;left:26px;bottom:22px;font-size:62px;font-weight:200;line-height:1;
  color:#eef2f6;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bootPct em{font-size:20px;font-style:normal;color:var(--accent);margin-left:5px;
  vertical-align:super}

#bootLine{position:absolute;left:0;top:0;bottom:0;width:2px;background:#1b222b}
#bootLine::after{content:"";position:absolute;left:0;bottom:0;width:100%;
  height:var(--p,0%);background:linear-gradient(180deg,var(--accent),#f4d780);
  transition:height .4s ease}

/* -------------------------------------------------------------------- HUD */
.panel{position:fixed;z-index:20;background:rgba(255,255,255,.94);
  border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}

#head{top:12px;left:12px;padding:10px 13px;max-width:min(44vw,330px)}
#head b{display:block;font-size:12.5px;letter-spacing:.06em;color:var(--ink)}
#head span{display:block;margin-top:3px;font-size:10.5px;line-height:1.5;color:#5d656f}
#back{position:fixed;z-index:21;top:12px;right:12px;padding:9px 13px;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-decoration:none;color:var(--ink)}

#bar{left:12px;right:12px;bottom:12px;padding:8px;display:flex;gap:6px;
  justify-content:center;flex-wrap:wrap}
#bar button{flex:1 1 auto;min-width:78px;min-height:42px;padding:7px 9px;cursor:pointer;
  font:700 11px/1.2 inherit;letter-spacing:.05em;color:#2a303a;background:#fff;
  border:1px solid var(--line);border-radius:9px;transition:.15s}
#bar button:hover{background:#eef1f5}
#bar button.on{background:var(--accent2);border-color:var(--accent2);color:#fff}

#key{bottom:74px;left:12px;padding:9px 12px;font-size:10.5px;line-height:1.75;color:#3c434d;
  transition:opacity .35s ease,transform .35s ease}
/* the walk writes its own captions in that corner, so the scale key stands
   down while it is running rather than stacking on top of them */
body.walking #key{opacity:0;transform:translateY(6px);pointer-events:none}
#key i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:7px;
  vertical-align:-1px;border:1px solid rgba(0,0,0,.22)}
#key u{display:block;text-decoration:none;font-weight:700;letter-spacing:.09em;
  font-size:9.5px;color:#8b939d;margin-bottom:4px}

/* ------------------------------------------------------------- the walk */
#scrollUI{position:fixed;inset:0;z-index:18;pointer-events:none;
  transition:opacity .45s ease}
#scrollUI.off{opacity:0}

/* the caption sits above the toolbar, left, and never fights the key panel */
#cap{position:absolute;left:14px;bottom:92px;max-width:min(62vw,420px)}
#cap b,#cap span{display:block;opacity:0;transform:translateY(9px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
#cap b{font:700 25px/1.14 inherit;letter-spacing:-.018em;color:#fff;
  text-shadow:0 1px 16px rgba(6,10,16,.62),0 1px 3px rgba(6,10,16,.5)}
#cap span{margin-top:6px;font:500 11.5px/1.55 inherit;letter-spacing:.055em;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 12px rgba(6,10,16,.7),0 1px 3px rgba(6,10,16,.55)}
#cap.in b,#cap.in span{opacity:1;transform:none}
#cap.in span{transition-delay:.075s}

#railTrack{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(255,255,255,.14)}
#rail{height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),#7fe3f5);
  box-shadow:0 0 12px rgba(0,163,196,.75)}

#hint{position:absolute;right:16px;bottom:96px;display:flex;align-items:center;
  gap:8px;font:600 9.5px/1 inherit;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-shadow:0 1px 10px rgba(6,10,16,.75);
  animation:hintOut .9s ease 9s forwards}
#hint i{display:block;width:15px;height:24px;border:1.5px solid rgba(255,255,255,.6);
  border-radius:8px;position:relative}
#hint i::after{content:'';position:absolute;left:50%;top:5px;width:2.5px;height:5px;
  margin-left:-1.25px;border-radius:2px;background:rgba(255,255,255,.9);
  animation:wheelDrop 1.65s cubic-bezier(.65,0,.35,1) infinite}
@keyframes wheelDrop{0%{opacity:0;transform:translateY(0)}
  22%{opacity:1}70%{opacity:0;transform:translateY(9px)}100%{opacity:0}}
@keyframes hintOut{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  #hint i::after{animation:none}
  #cap b,#cap span{transition-duration:.01ms}
}

/* ----------------------------------------------------------------- labels */
#tags{position:fixed;inset:0;z-index:15;pointer-events:none}
.tag{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font:700 10.5px/1 inherit;letter-spacing:.04em;color:#1d222a;
  background:rgba(255,255,255,.93);border:1px solid #c3c9d1;border-radius:6px;
  padding:4px 7px;box-shadow:0 1px 5px rgba(0,0,0,.14)}
.tag.dim{opacity:.42}

/* ------------------------------------------------------------------ error */
#err{position:fixed;inset:0;z-index:50;display:none;align-items:center;
  justify-content:center;text-align:center;padding:28px;background:#0e1116;color:#c8d2dd}
#err div{max-width:440px;font-size:13.5px;line-height:1.7}
#err a{color:var(--accent)}

@media (max-width:620px){
  #cap{bottom:84px;max-width:86vw}
  #cap b{font-size:20px}
  #hint{display:none}
  #key{display:none}
  #head span{display:none}
  #head{max-width:56vw}
  .tag{font-size:9.5px;padding:3px 5px}
}