:root {
  --hn-line: #1b1a17;
  --hn-dot: rgba(27,26,23,0.26);
  --hn-light: #2563eb;
  --hn-light-glow: rgba(37,99,235,0.35);
  --hn-comet: #79a4f3;
  --hn-comet: color-mix(in oklab, #2563eb 34%, white);
}
html.dark {
  --hn-line: #e4e4e4;
  --hn-dot: rgba(255,255,255,0.26);
  --hn-light: #70b8ff;
  --hn-light-glow: rgba(112,184,255,0.45);
  --hn-comet: #a9d4ff;
  --hn-comet: color-mix(in oklab, #70b8ff 40%, white);
}

.hn-ln { fill: none; stroke: var(--hn-line); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.hn-light path { filter: drop-shadow(0 0 3px var(--hn-light-glow)); }
.hn-home { fill: var(--hn-light); opacity: 0.4; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.hn-home.warn { fill: var(--hn-warn); opacity: 0.8; }
.hn-home.on { opacity: 1; }

.tile-art { display: flex; align-items: center; justify-content: center; height: clamp(136px, 15vw, 172px); padding: 14px 0; box-sizing: border-box; border-bottom: 1px solid var(--hn-b2);
  background-image: radial-gradient(circle at 12px 12px, var(--hn-dot) 1.4px, transparent 1.5px); background-size: 24px 24px; }
.tile-art svg { display: block; height: 100%; width: auto; overflow: visible; }

.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-town2-light.webp") center / 100% 100% no-repeat;
  background-image: image-set(url("/hero-town2-light.avif") type("image/avif"), url("/hero-town2-light.webp") type("image/webp")); }
html.dark .hero-out { filter: grayscale(1) brightness(0.4); background-image: url("/hero-town2-dark.webp"); background-image: image-set(url("/hero-town2-dark.avif") type("image/avif"), url("/hero-town2-dark.webp") type("image/webp")); }
.hero-out[data-on] { opacity: 1; }
.hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-cut { fill: none; stroke: var(--hn-red); 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-red)); }
.hero-cut[data-clear] { stroke: var(--hn-green-mark); }
.hero-mark { fill: var(--hn-red); stroke: var(--hn-bg); stroke-width: 2.6; opacity: 0; transition: opacity 0.3s linear; filter: drop-shadow(0 0 5px var(--hn-red)); }
.hero-crew { fill: var(--hn-ink); stroke: var(--hn-bg); 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: clamp(84px, 9.6vw, 152px); z-index: 3; pointer-events: none; }
.hero-msg .msg { width: min(320px, 100%); background: var(--hn-card); border-radius: var(--r-lg); box-shadow: var(--shadow-float); padding: 12px 15px 13px; 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: 9px; color: var(--hn-brand); font-size: var(--t-13); }
.hero-msg .who svg { width: 15px; height: 15px; flex: none; }
.hero-msg .who b { font: 600 var(--t-13)/1 var(--hn-sans); color: var(--hn-ink); }
.hero-msg .who .t { margin-left: auto; font: 400 12px/1 var(--hn-mono); color: var(--hn-soft); }
.hero-msg p { font-size: var(--t-13); line-height: 1.42; color: var(--hn-mut); }
.hero-msg .l1 { font-weight: 600; font-size: 14px; color: var(--hn-ink); }
.hero-msg .l3 { margin-top: 7px; color: var(--hn-soft); }
.hero-msg .l4 { display: none; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--hn-b2); font-weight: 500; 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 var(--s-4); margin-top: clamp(40px, 6vw, 88px); list-style: none; }
.hero-rail li { display: grid; gap: 3px; padding-top: 11px; border-top: 2px solid var(--hn-border); color: var(--hn-soft); font-size: var(--t-13); line-height: 1.35; transition: color 0.3s linear, border-color 0.3s linear; }
.hero-rail li .t { font: 400 12px/1.3 var(--hn-mono); }
.hero-rail li[data-on] { border-top-color: var(--hn-light); color: var(--hn-ink); }
.hero-rail li[data-on] .t { color: var(--hn-mut); }

@media (max-width: 900px) {
  .hero .hero-msg { position: relative; left: auto; right: auto; top: auto; margin-top: var(--s-8); }
  .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; }
}