/* 2D how-to: walk the plot, arrows, start and end */
.hvhow{margin:14px 0;padding:12px 12px 10px;border:1px solid var(--line,#2a2a38);border-radius:14px;background:var(--card,var(--surface,#15151f));color:var(--ink,#f2f0ea)}
.hvhow{overflow:visible}.hvhow svg{display:block;width:100%;height:auto;max-height:220px;padding-top:4px}
.hvhow-cap{margin:8px 0 0;min-height:2.8em;font:500 .92rem/1.4 system-ui,-apple-system,"Segoe UI","Noto Sans Georgian",sans-serif;color:var(--ink2,#a9a69c)}
.hvhow-static{display:none;margin:8px 0 0;padding-left:1.2em;color:var(--ink2,#a9a69c);font:500 .92rem/1.45 system-ui,-apple-system,"Segoe UI","Noto Sans Georgian",sans-serif}
.hvhow-static li{margin:4px 0}
.hvhow-outline{fill:none;stroke:var(--line,#2a2a38);stroke-width:1.5}
.hvhow-fill{fill:rgba(30,154,88,.14);stroke:none}
.hvhow-house{fill:none;stroke:var(--ink2,#a9a69c);stroke-width:1.6;stroke-linejoin:round}
.hvhow-path{fill:none;stroke:#1e9a58;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:602;stroke-dashoffset:602}
.hvhow-walk{offset-path:path("M 86 175 L 275 160 L 295 62 L 108 52 L 86 175");offset-rotate:0deg;offset-anchor:center}
.hvhow-you{fill:#3d8aff;stroke:var(--bg,#0b0b12);stroke-width:2}
.hvhow-n circle{fill:#f26a1b;stroke:var(--bg,#0b0b12);stroke-width:2}
.hvhow-n text{fill:var(--bg,#0b0b12);font:700 11px system-ui;text-anchor:middle;dominant-baseline:central}
.hvhow-n2,.hvhow-n3,.hvhow-n4{opacity:0}
.hvhow-arr{fill:#1e9a58;opacity:0}
.hvhow-pill{paint-order:stroke fill}
.hvhow-start-bg{fill:#1e9a58}
.hvhow-end-bg{fill:#f26a1b}
.hvhow-start-t,.hvhow-end-t{fill:#0b0b12;font:700 11px system-ui,"Noto Sans Georgian",sans-serif;text-anchor:middle;dominant-baseline:central}
.hvhow-end{opacity:0}
.hvhow-live{margin:8px 0 0;color:var(--ink2,#a9a69c);font:500 .92rem/1.4 system-ui,-apple-system,"Segoe UI","Noto Sans Georgian",sans-serif}
html[data-c="1"] .hvhow-path,html[data-c="1"] .hvhow-arr{stroke:#0b6b3a;fill:#0b6b3a}
html[data-c="1"] .hvhow-fill{fill:rgba(11,107,58,.12)}
html[data-c="1"] .hvhow-start-bg{fill:#0b6b3a}
html[data-c="1"] .hvhow-end-bg{fill:#b03f00}
html[data-c="1"] .hvhow-start-t,html[data-c="1"] .hvhow-end-t,html[data-c="1"] .hvhow-n text{fill:#fff}
html[data-c="1"] .hvhow-you{stroke:#fff}

@keyframes hvhow-draw{0%,8%{stroke-dashoffset:602}82%,100%{stroke-dashoffset:0}}
@keyframes hvhow-walk{0%,8%{offset-distance:0%}22%{offset-distance:31.5%}28%{offset-distance:31.5%}40%{offset-distance:48.12%}46%{offset-distance:48.12%}60%{offset-distance:79.24%}66%{offset-distance:79.24%}82%,100%{offset-distance:100%}}
@keyframes hvhow-n2{0%,20%{opacity:0}24%,100%{opacity:1}}
@keyframes hvhow-n3{0%,38%{opacity:0}42%,100%{opacity:1}}
@keyframes hvhow-n4{0%,58%{opacity:0}62%,100%{opacity:1}}
@keyframes hvhow-a1{0%,14%{opacity:0}20%,100%{opacity:1}}
@keyframes hvhow-a2{0%,32%{opacity:0}38%,100%{opacity:1}}
@keyframes hvhow-a3{0%,52%{opacity:0}58%,100%{opacity:1}}
@keyframes hvhow-a4{0%,70%{opacity:0}78%,100%{opacity:1}}
@keyframes hvhow-end{0%,78%{opacity:0}84%,100%{opacity:1}}
@keyframes hvhow-pulse{0%,8%{transform:scale(1)}4%{transform:scale(1.12)}8%,100%{transform:scale(1)}}
@keyframes hvhow-fill{0%,78%{fill-opacity:.7}86%,100%{fill-opacity:1}}

.hvhow-run .hvhow-path{animation:hvhow-draw 12s ease-in-out infinite}
.hvhow-run .hvhow-n2{animation:hvhow-n2 12s linear infinite}
.hvhow-run .hvhow-n3{animation:hvhow-n3 12s linear infinite}
.hvhow-run .hvhow-n4{animation:hvhow-n4 12s linear infinite}
.hvhow-run .hvhow-a1{animation:hvhow-a1 12s linear infinite}
.hvhow-run .hvhow-a2{animation:hvhow-a2 12s linear infinite}
.hvhow-run .hvhow-a3{animation:hvhow-a3 12s linear infinite}
.hvhow-run .hvhow-a4{animation:hvhow-a4 12s linear infinite}
.hvhow-run .hvhow-end{animation:hvhow-end 12s linear infinite}
.hvhow-run .hvhow-n1{transform-box:fill-box;transform-origin:center;animation:hvhow-pulse 12s ease-in-out infinite}
.hvhow-run .hvhow-fill{animation:hvhow-fill 12s linear infinite}

@media (prefers-reduced-motion:reduce){
  .hvhow-run .hvhow-path,.hvhow-run .hvhow-walk,.hvhow-run .hvhow-n2,.hvhow-run .hvhow-n3,.hvhow-run .hvhow-n4,
  .hvhow-run .hvhow-a1,.hvhow-run .hvhow-a2,.hvhow-run .hvhow-a3,.hvhow-run .hvhow-a4,.hvhow-run .hvhow-end,.hvhow-run .hvhow-n1,.hvhow-run .hvhow-fill{animation:none}
  .hvhow-path{stroke-dashoffset:0}
  .hvhow-n2,.hvhow-n3,.hvhow-n4,.hvhow-arr,.hvhow-end{opacity:1}
  .hvhow-walk{display:none}
  .hvhow-cap{display:none}
  .hvhow-static{display:block}
}
html[data-m="1"] .hvhow-run .hvhow-path,html[data-m="1"] .hvhow-run .hvhow-walk,html[data-m="1"] .hvhow-run .hvhow-n2,
html[data-m="1"] .hvhow-run .hvhow-n3,html[data-m="1"] .hvhow-run .hvhow-n4,html[data-m="1"] .hvhow-run .hvhow-a1,
html[data-m="1"] .hvhow-run .hvhow-a2,html[data-m="1"] .hvhow-run .hvhow-a3,html[data-m="1"] .hvhow-run .hvhow-a4,
html[data-m="1"] .hvhow-run .hvhow-end,html[data-m="1"] .hvhow-run .hvhow-n1,html[data-m="1"] .hvhow-run .hvhow-fill{animation:none}
html[data-m="1"] .hvhow-path{stroke-dashoffset:0}
html[data-m="1"] .hvhow-n2,html[data-m="1"] .hvhow-n3,html[data-m="1"] .hvhow-n4,html[data-m="1"] .hvhow-arr,html[data-m="1"] .hvhow-end{opacity:1}
html[data-m="1"] .hvhow-walk{display:none}
html[data-m="1"] .hvhow-cap{display:none}
html[data-m="1"] .hvhow-static{display:block}

.map-flag{background:none!important;border:0}
.map-flag b{display:inline-block;padding:2px 7px;border-radius:8px;font:700 11px/1.3 system-ui,"Noto Sans Georgian",sans-serif;color:#0b0b12;box-shadow:0 1px 4px rgba(0,0,0,.35);white-space:nowrap}
.map-flag.start b{background:#39ff88}
.map-flag.end b{background:#f26a1b}
.map-flag .arr{display:block;width:0;height:0;margin:0 auto;border:6px solid transparent}
.map-flag.start .arr{border-top-color:#39ff88}
.map-flag.end .arr{border-bottom-color:#f26a1b;margin-bottom:2px}