:root { --hn-comet: color-mix(in oklab, var(--hn-fibre) 40%, white); }
.hero-lines { --hn-comet: color-mix(in oklab, var(--hn-crew) 36%, white); }

.hn-ln { fill: none; stroke: var(--hn-fibre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hn-home { fill: var(--hn-ink); opacity: 0.4; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.hn-home.warn { fill: var(--hn-weak); opacity: 0.8; }
.hn-home.on { opacity: 1; }

.hero-out { position: absolute; inset: 0; opacity: 0; filter: grayscale(1) brightness(0.86) contrast(1.06); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  background: url("/hero-render-light.webp") center / 100% 100% no-repeat;
  background-image: image-set(url("/hero-render-light.avif") type("image/avif"), url("/hero-render-light.webp") type("image/webp")); }
html.dark .hero-out { filter: grayscale(1) brightness(0.4); background-image: url("/hero-render-dark.webp"); background-image: image-set(url("/hero-render-dark.avif") type("image/avif"), url("/hero-render-dark.webp") type("image/webp")); }
.hero-out[data-on] { opacity: 1; }
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-lines .hn-light path { filter: drop-shadow(0 0 3px color-mix(in oklab, var(--hn-crew) 40%, transparent)); }
.hero-cut { fill: none; stroke: var(--hn-fault); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.5s linear, stroke 0.45s linear; filter: drop-shadow(0 0 4px var(--hn-fault)); }
.hero-cut[data-clear] { stroke: var(--hn-crew); }
.hero-mark { fill: var(--hn-fault); stroke: var(--hn-ground); stroke-width: 2.6; opacity: 0; transition: opacity 0.3s linear; filter: drop-shadow(0 0 5px var(--hn-fault)); }
.hero-crew { fill: var(--hn-ink); stroke: var(--hn-ground); stroke-width: 2.8; opacity: 0; transition: opacity 0.3s linear; }
.hero-cut[data-on], .hero-mark[data-on], .hero-crew[data-on] { opacity: 1; }

.hero .hero-msg { position: absolute; left: 0; right: 0; top: 16px; z-index: 3; pointer-events: none; }
.hero-msg .msg { width: min(320px, 100%); background: var(--hn-sheet); box-shadow: inset 0 0 0 1px var(--hn-rule); padding: 12px 16px 14px; opacity: 0; transform: translate(-14px, -6px); transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-msg[data-side="right"] .msg { margin-left: auto; transform: translate(14px, -6px); }
.hero-msg[data-in] .msg, .hero-msg[data-side="right"][data-in] .msg { opacity: 1; transform: none; }
.hero-msg .who { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--hn-brand); }
.hero-msg .who svg { width: 16px; height: 16px; flex: none; }
.hero-msg .who b { font: 700 14px/1 var(--hn-sans); color: var(--hn-ink); }
.hero-msg .who .t { margin-left: auto; font: 400 14px/1 var(--hn-sans); color: var(--hn-ink-3); }
.hero-msg p { font: 400 14px/1.45 var(--hn-sans); color: var(--hn-ink-2); }
.hero-msg .l1 { font-weight: 700; font-size: 16px; color: var(--hn-ink); }
.hero-msg .l3 { margin-top: 8px; color: var(--hn-ink-3); }
.hero-msg .l4 { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hn-rule); font-weight: 600; color: var(--hn-ink); }
.hero-msg[data-reply] .l4 { display: block; }

.hero .hero-rail { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 16px; margin-top: clamp(40px, 5vw, 72px); list-style: none; }
.hero-rail li { display: grid; gap: 4px; padding-top: 12px; border-top: 2px solid var(--hn-rule); color: var(--hn-ink-3); font: 400 14px/1.35 var(--hn-sans); transition: color 0.3s linear, border-color 0.3s linear; }
.hero-rail li .t { font-weight: 600; }
.hero-rail li[data-on] { border-top-color: var(--hn-ink); color: var(--hn-ink); }
.hero-rail li[data-on] .t { color: var(--hn-ink-2); }

@media (max-width: 900px) {
  .hero .hero-msg { position: relative; left: auto; right: auto; top: auto; margin-top: 32px; }
  .hero-msg .msg { display: none; width: min(360px, 100%); margin-inline: auto; transform: translateY(10px); }
  .hero-msg[data-side="right"] .msg { margin-inline: auto; transform: translateY(10px); }
  .hero-msg[data-in] .msg, .hero-msg[data-side="right"][data-in] .msg { display: block; transform: none; }
}
@media (max-width: 720px) {
  .hero .hero-rail { grid-template-columns: 1fr; }
  .hero-rail li { display: none; }
  .hero-rail li[data-on] { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-out, .hero-cut, .hero-mark, .hero-crew, .hn-home, .hero-rail li { transition: none; }
  .hero-msg .msg, .hero-msg[data-side="right"] .msg { transform: none; transition: none; }
}