/* Home intro overlay (assets/js/intro.js). The page underneath is untouched;
   every animated value is written by seek(t), so nothing here transitions. */
html.intro-play::after { content: ""; position: fixed; inset: 0; z-index: 9998; background: #111112; }
html.intro-live::after { display: none; }
html.intro-play .hero__text > *, html.intro-play .hero__card > .fx-up { opacity: 0; }

.zi {
  position: fixed; inset: 0; z-index: 9999; cursor: default;
  font-family: var(--font); -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.zi--leave { opacity: 0; transition: opacity .3s ease; }
.zi__scene { position: absolute; inset: 0; }
.zi [hidden] { display: none !important; }
/* The site resets img/svg to max-width:100%; the world layer is 0 wide, so opt out. */
.zi svg, .zi img { max-width: none; }
.zi__stage { position: fixed; overflow: hidden; background: #111112; }
.zi__dots { position: absolute; inset: 0; background-image: radial-gradient(circle, #2c2c30 1.1px, transparent 1.6px); }
.zi__world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.zi__tiles { position: absolute; left: 0; top: 0; overflow: visible; }
.zi__actor { position: absolute; overflow: hidden; }
.zi__inner, .zi__top { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.zi__knob { position: absolute; }
.zi__cicon { position: absolute; overflow: visible; }
.zi__cicon path { fill: currentColor; }

/* scene type */
.zi-a { position: absolute; white-space: nowrap; line-height: 1; }
.zi-c { transform: translate(-50%, -50%); }
.zi-l { transform: translate(0, -50%); }
.zi-r { transform: translate(-100%, -50%); }
.zi-rt { transform: translate(-100%, 0); }
.zi-sw { position: relative; display: inline-block; vertical-align: top; }
.zi-sw > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.zi-ico { display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.zi-dim { color: #8a8a8f; }
.zi-logo { display: block; height: auto; }
.zi__skills { position: absolute; inset: 0; pointer-events: none; }
.zi-take {
  position: absolute; left: 0; top: 0; transform-origin: 100% 0; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 999px;
  background: #1f1f22; box-shadow: inset 0 0 0 1px #2e2e32; font: 600 14px/1 var(--font); color: #fff;
}
.zi-take i { width: 7px; height: 7px; border-radius: 50%; background: #6488ff; }
.zi-brand { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font); color: #fff; }
.zi-mark { width: 104px; height: 64px; display: grid; place-items: center; }
.zi-toastt {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 18px/1 var(--font);
  color: #1a1a1a;
}
.zi-okay { transform: scale(0); }
.zi-okay circle { fill: #4b6bf3; }
.zi-okay path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.zi-t12 { font: 600 12px/1 var(--font); color: #8a8a8f; }
.zi-tag { font: 600 12px/1 var(--font); color: #8a8a8f; letter-spacing: .02em; }
.zi-h1 { font: 700 36px/1 var(--font); color: #1a1a1a; letter-spacing: -.025em; }
.zi-sub { font: 500 15px/1 var(--font); color: #8a8a8f; }
.zi-chip {
  height: 36px; padding: 0 14px; border-radius: 18px; background: #f1f0f3;
  display: flex; align-items: center; font: 600 13px/1 var(--font); color: #1a1a1a;
}
.zi-chip .zi-sw { height: 13px; }
.zi-stat { transform: translateX(-100%); text-align: right; }
.zi-stat b { display: block; font: 700 28px/1 var(--font); color: #4b6bf3; letter-spacing: -.02em; }
.zi-stat span { display: block; margin-top: 8px; font: 500 13px/1 var(--font); color: #8a8a8f; }
.zi-badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.zi-badge .zi-chk { stroke-width: 2.4; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.zi-toastt .zi-sw { height: 18px; }
.zi-toasts { font: 500 13.5px/1 var(--font); color: #8a8a8f; }
.zi-toasts .zi-sw { height: 14px; }
.zi-itile { width: 44px; height: 44px; border-radius: 12px; background: #f1f0f3; }
.zi-itile svg { position: absolute; left: 11px; top: 11px; }
.zi-sa { color: #1a1a1a; }
.zi-sb { color: #4b6bf3; opacity: 0; }
.zi-t16 { font: 600 16px/1 var(--font); color: #1a1a1a; }
.zi-t15 { font: 600 15px/1 var(--font); }
.zi-t14 { font: 600 14px/1 var(--font); color: #1a1a1a; }
.zi-t14d { font: 500 14px/1 var(--font); color: #8a8a8f; }
.zi-t13 { font: 500 13px/1 var(--font); color: #8a8a8f; }
.zi-toggle { width: 52px; height: 32px; border-radius: 16px; }
.zi-rule { height: 1px; background: #ecebef; }
.zi-rule--dark { background: #2a2a2e; }
.zi-tab { font: 600 16px/1 var(--font); color: #a1a1a6; }
.zi-tab--ink { color: #1a1a1a; }
.zi-ring circle { fill: none; }
.zi-ringtrack { stroke: #2c2c30; stroke-width: 12; }
.zi-ringarc { stroke: #6488ff; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 0 100; }
.zi-ringnum { font: 700 46px/1 var(--font); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zi-ringlab { font: 500 12.5px/1 var(--font); color: #8a8a8f; }
.zi-ringsub { font: 600 12px/1 var(--font); color: #6488ff; }
.zi-file { font: 600 12.5px/1 var(--font); color: #cfcfd4; }
.zi-ai {
  transform: translateX(-100%); font: 600 11px/1 var(--font); color: #6488ff;
  border: 1px solid rgba(100, 136, 255, .45); border-radius: 6px; padding: 4px 7px;
}
.zi-code { font: 500 17px/30px ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; color: #f2f2f4; white-space: pre; }
.zi-code i { font-style: normal; }
.zi-at { color: #6488ff; }
.zi-st { color: #f2f2f4; }
.zi-pu { color: #8a8a8f; }
.zi-ghost, .zi-ghost i { color: #55555b; }
.zi-tabkey {
  display: inline-block; position: relative; top: -2px; margin-left: 12px; vertical-align: middle;
  font: 600 11px/1 var(--font); color: #8a8a8f; border: 1px solid #3a3a3e; border-radius: 5px; padding: 4px 6px;
}
.zi-foot { font: 500 13px/1 var(--font); color: #8a8a8f; }
.zi-foot b { color: #fff; font-weight: 700; }
.zi-runkey { font: 600 12px/1 var(--font); color: #cfcfd4; border: 1px solid #3a3a3e; border-radius: 6px; padding: 5px 8px; }
.zi-compile { height: 2px; width: 0; background: #6488ff; }

/* design-system selection chrome */
.zi__sel, .zi__sel > * { position: absolute; left: 0; top: 0; }
.zi__selol { border: 1.5px solid #6488ff; box-sizing: border-box; }
.zi__selh { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; border: 1.5px solid #6488ff; box-sizing: border-box; }
.zi__selr { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 1.5px solid #6488ff; box-sizing: border-box; }
.zi__selname { font: 600 12px/1 var(--font); color: #6488ff; white-space: nowrap; }
.zi__selbadge {
  transform: translateX(-50%); white-space: nowrap; font: 600 11px/1 var(--font); color: #fff;
  background: #4b6bf3; border-radius: 4px; padding: 4px 6px;
}

/* HUD */
.zi__hud { position: absolute; inset: 0; pointer-events: none; }
.zi__cap { position: absolute; left: 32px; top: 30px; display: flex; gap: 14px; font: 500 13px/1 var(--font); }
.zi__year { display: inline-block; width: 40px; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.zi__captext { display: inline-block; color: #8a8a8f; }
.zi__cap .zi-sw { height: 13px; }
.zi__line { position: absolute; left: 50%; bottom: 46px; width: min(520px, 62vw); height: 2px; transform: translateX(-50%); }
.zi__track { position: absolute; inset: 0; border-radius: 1px; background: #2a2a2d; }
.zi__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1px; background: #fff; }
.zi__head { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; }
.zi__tick { position: absolute; top: 0; }
.zi__tick i { position: absolute; left: -2px; top: -1px; width: 4px; height: 4px; border-radius: 50%; background: #3a3a3e; }
.zi__tick span {
  position: absolute; left: 0; top: 14px; transform: translateX(-50%);
  font: 600 11px/1 var(--font); color: #4e4e53; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.zi__tick.is-on span { color: #fff; }
.zi__tick.is-on i { background: #fff; }
.zi__skip { position: absolute; left: 32px; bottom: 36px; display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--font); color: #6e6e73; }
.zi__esc { border: 1px solid #333337; border-radius: 5px; padding: 4px 6px; font-size: 11px; }
.zi__sound {
  position: absolute; right: 28px; bottom: 30px; display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 13px; border: 1px solid #2e2e31; border-radius: 17px;
  background: rgba(255, 255, 255, .04); color: #9a9aa0; font: 600 12px/1 var(--font); cursor: pointer;
}
.zi__sound.is-on { color: #fff; }
.zi__sound:focus-visible { outline: 2px solid #6488ff; outline-offset: 3px; }
.zi__bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.zi__bars i { display: block; width: 2px; height: 3px; border-radius: 1px; background: currentColor; }
.zi__cursor { position: absolute; left: 0; top: 0; transform-origin: 6.4px 3.7px; filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .35)); pointer-events: none; }

@media (max-width: 809px) {
  .zi-take { transform-origin: 0 0; }
  .zi__cap { left: 20px; top: 22px; flex-direction: column; gap: 8px; }
  .zi__captext { white-space: normal; }
  .zi__skip { left: 20px; bottom: 26px; }
  .zi__esc { display: none; }
  .zi__sound { right: 16px; bottom: 18px; }
  .zi__line { bottom: 84px; width: calc(100vw - 64px); }
}