#hud {
  position: fixed; inset: 0 0 auto; z-index: 48; height: var(--hud-h);
  background: var(--hud); color: var(--hud-ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 12px 28px -18px rgba(2,32,27,.6);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  --hud-dim: rgba(255,255,255,.82);
}
#hud :focus-visible { outline-color: #fff; }
#hud button { color: inherit; }
#hud .wide { display: none; }
@media (min-width: 760px) { #hud .wide { display: inline; } }

.hud-bar { display: flex; align-items: center; height: calc(var(--hud-h) - 12px); padding-inline: var(--gutter); }


.hud-home { display: flex; align-items: center; gap: 10px; flex: none; height: 44px; margin-inline-start: -12.5px; padding-inline: 12.5px; border-radius: var(--r); }
.hud-mark { width: 19px; height: 24px; fill: #fff; flex: none; }
.hud-word { display: none; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; }
@media (min-width: 780px) { .hud-word { display: block; } .hud-home { margin-inline-start: -8px; padding-inline: 8px; } }


.hud-meter { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding-inline: 1.5px 8px; border-radius: var(--r); text-align: start; }
@media (min-width: 760px) {
  .hud-meter { gap: 10px; margin-inline-start: 10px; padding-inline-start: 18px; position: relative; }
  .hud-meter::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 1px; background: var(--hud-track); }
}
@media (hover: hover) { .hud-meter:hover .odo { color: var(--hud-fill); } }
.hud-meter:active .odo { transform: scale(.96); }

.odo { display: flex; direction: ltr; align-items: flex-end; flex: none; height: 1em; font-size: 24px; font-weight: 600; line-height: 1; transition: transform .2s var(--ease), color .2s; }
@media (min-width: 760px) { .odo { font-size: 28px; } }

.rl { position: relative; display: block; height: 1em; overflow: hidden; max-width: .6em; transition: max-width .22s var(--ease); }
.rl.off { max-width: 0; }
.rl::before { content: var(--d0); visibility: hidden; }
.st { position: absolute; inset: 0 0 auto; word-break: break-all; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform .22s var(--ease); }
.pc { order: var(--pc-order); font-size: .62em; padding-bottom: .06em; color: var(--hud-dim); }

.hud-lines { display: flex; flex-direction: column; min-width: 0; overflow: hidden; font-size: 10.5px; line-height: 1.25; white-space: nowrap; }
@media (min-width: 760px) { .hud-lines { font-size: 11.5px; } }
.l1 { font-weight: 600; color: var(--hud-ink); }
.l2 { display: flex; min-width: 0; font-weight: 500; color: var(--hud-dim); }
.l2a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.l2.fl { color: var(--hud-ink); }
.l2t { display: none; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 760px) {
  .l2t:not(:empty) { display: block; max-width: 21.25em; }
  .l2t::before { content: ""; display: inline-block; width: 1px; height: .9em; margin-inline: .6em; vertical-align: -.1em; background: var(--hud-track); }
}


.hud-wallet { display: flex; align-items: center; flex: none; min-height: 44px; margin-inline-start: auto; padding-inline: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding-inline: 12px;
  border: 1px solid rgba(255,255,255,.32); border-radius: var(--r); font-size: 13px; font-weight: 600; line-height: 1;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
@media (hover: hover) { .hud-wallet:hover .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); } }
.hud-wallet:active .chip { transform: scale(.97); }
.chip .orb-mini, .chip .addr { display: none; }
#hud.signed .chip .orb-mini { display: inline-block; }
#hud.signed .chip .addr { display: inline; font-size: 12px; }
#hud.signed .chip .lbl { display: none; }
@media (max-width: 359px) { .chip { gap: 5px; padding-inline: 8px; } }

@media (max-width: 374px) {
  #hud .a0 { display: none; }
  #hud.signed .hud-wallet { padding-inline: 0; }
  #hud.signed .hud-meter { padding-inline-end: 4px; }
}

.hud-wallet[aria-busy="true"] { cursor: progress; }
.hud-wallet[aria-busy="true"] .chip { animation: hud-wait 1.2s var(--ease-soft) infinite alternate; }
html.rm .hud-wallet[aria-busy="true"] .chip { animation: none; opacity: .6; }
@keyframes hud-wait { to { opacity: .45; } }

.hud-theme { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-inline-end: -8px; border-radius: 50%; }
.hud-theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .5s var(--ease); }
.hud-theme path { fill: currentColor; stroke: none; }
@media (hover: hover) { .hud-theme:hover { background: radial-gradient(circle, rgba(255,255,255,.1) 17.5px, transparent 18px); } }
:root[data-theme="dark"] .hud-theme svg { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hud-theme svg { transform: rotate(180deg); } }



.hud-sound { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 44px; border-radius: var(--r); }
.hud-sound::before { content: ""; position: absolute; inset: 0 -4px; }


@media (max-width: 374px) { .hud-sound { width: 32px; } .hud-sound::before { inset: 0; } }
@media (max-width: 359px) { .hud-sound { width: 28px; } #hud.signed .chip { padding-inline: 6px; } #hud.signed .chip .orb-mini { display: none; } }
.hud-sound::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid #fff; border-radius: 50%; opacity: 0; pointer-events: none; }
@media (hover: hover) { .hud-sound:hover { background: radial-gradient(circle, rgba(255,255,255,.1) 17.5px, transparent 18px); } }
.eq { display: flex; align-items: center; gap: 3px; height: 16px; }
.eq i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(var(--h)); transition: transform .35s var(--ease); }


.eq i:nth-child(1) { --h: .5; --t: .433333s; --eq: hud-eq13; }
.eq i:nth-child(2) { --h: 1; --t: .3s; --eq: hud-eq9; }
.eq i:nth-child(3) { --h: .7; --t: .5s; --eq: hud-eq15; }
.eq i:nth-child(4) { --h: .38; --t: .366667s; --eq: hud-eq11; }
.hud-sound[aria-pressed="false"] .eq i { --h: .16; }
html.snd-play .hud-sound[aria-pressed="true"] .eq i { animation: var(--eq) var(--t) steps(1) infinite alternate; }
html.snd-hint .hud-sound[aria-pressed="true"]::after { animation: hud-ping 1.2s var(--ease) 2; }
html.rm .hud-sound[aria-pressed] .eq i, html.rm .hud-sound[aria-pressed]::after { animation: none; }

@keyframes hud-eq9 { 0%{transform:scaleY(0.22)} 11.111%{transform:scaleY(0.246)} 22.222%{transform:scaleY(0.357)} 33.333%{transform:scaleY(0.577)} 44.444%{transform:scaleY(0.762)} 55.556%{transform:scaleY(0.873)} 66.667%{transform:scaleY(0.938)} 77.778%{transform:scaleY(0.976)} 88.889%{transform:scaleY(0.995)} 100%{transform:scaleY(1)} }
@keyframes hud-eq11 { 0%{transform:scaleY(0.22)} 9.091%{transform:scaleY(0.236)} 18.182%{transform:scaleY(0.302)} 27.273%{transform:scaleY(0.449)} 36.364%{transform:scaleY(0.636)} 45.455%{transform:scaleY(0.775)} 54.545%{transform:scaleY(0.865)} 63.636%{transform:scaleY(0.924)} 72.727%{transform:scaleY(0.961)} 81.818%{transform:scaleY(0.984)} 90.909%{transform:scaleY(0.996)} 100%{transform:scaleY(1)} }
@keyframes hud-eq13 { 0%{transform:scaleY(0.22)} 7.692%{transform:scaleY(0.231)} 15.385%{transform:scaleY(0.275)} 23.077%{transform:scaleY(0.37)} 30.769%{transform:scaleY(0.523)} 38.462%{transform:scaleY(0.673)} 46.154%{transform:scaleY(0.783)} 53.846%{transform:scaleY(0.86)} 61.538%{transform:scaleY(0.912)} 69.231%{transform:scaleY(0.949)} 76.923%{transform:scaleY(0.974)} 84.615%{transform:scaleY(0.989)} 92.308%{transform:scaleY(0.997)} 100%{transform:scaleY(1)} }
@keyframes hud-eq15 { 0%{transform:scaleY(0.22)} 6.667%{transform:scaleY(0.228)} 13.333%{transform:scaleY(0.259)} 20%{transform:scaleY(0.324)} 26.667%{transform:scaleY(0.437)} 33.333%{transform:scaleY(0.577)} 40%{transform:scaleY(0.699)} 46.667%{transform:scaleY(0.789)} 53.333%{transform:scaleY(0.855)} 60%{transform:scaleY(0.903)} 66.667%{transform:scaleY(0.938)} 73.333%{transform:scaleY(0.963)} 80%{transform:scaleY(0.981)} 86.667%{transform:scaleY(0.992)} 93.333%{transform:scaleY(0.998)} 100%{transform:scaleY(1)} }
@keyframes hud-ping { from { opacity: .7; transform: scale(.7); } to { opacity: 0; transform: scale(1.25); } }




.hud-lang { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 44px; color: inherit; border-radius: var(--r); -webkit-tap-highlight-color: transparent; }
.hud-lang .lg, .hud-lang-item .lg {
  display: grid; place-items: center; min-width: 26px; height: 22px; padding-inline: 4px;
  border: 1px solid rgba(255,255,255,.32); border-radius: var(--r); font: 600 12px/1 var(--font-body); letter-spacing: .06em;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.hud-lang svg { display: block; height: .644em; width: auto; font-size: 14px; fill: currentColor; }
@media (hover: hover) { .hud-lang:hover .lg { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); } }
.hud-lang:active .lg { transform: scale(.94); }

.hud-langs { position: relative; flex: none; }
.hud-lang-menu { position: absolute; top: calc(100% - 2px); inset-inline-end: 0; z-index: 1; display: grid; gap: 2px; padding: 4px; border-radius: var(--r); background: var(--hud); box-shadow: 0 10px 24px -12px rgba(2,32,27,.7), 0 0 0 1px rgba(255,255,255,.14); }
.hud-lang-menu[hidden] { display: none; }
.hud-lang-item { display: grid; place-items: center; min-width: 44px; height: 40px; border-radius: var(--r); color: inherit; }
@media (hover: hover) { .hud-lang-item:hover .lg { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); } }
@media (max-width: 759px) {
  .hud-lang { width: 32px; }
  .hud-lang::before { content: ""; position: absolute; inset: 0 -4px; }
  .hud-lang .lg { min-width: 24px; height: 19px; font-size: 11px; }
  .hud-sound::before { inset-inline-end: -1px; }
}
@media (max-width: 374px) { .hud-lang { width: 28px; } .hud-lang .lg { min-width: 22px; } }







@media (max-width: 419px) { #hud .a0 { display: none; } }
@media (max-width: 399px) {
  #hud.signed .chip .orb-mini { display: none; }
  #hud .hud-meter { padding-inline-end: 4px; }
}
@media (min-width: 360px) and (max-width: 399px) { #hud.signed .chip { padding-inline: 8px; } .hud-sound { width: 32px; } }
@media (max-width: 389px) {
  #hud .hud-wallet { padding-inline: 0; }
  #hud .chip { padding-inline: 8px; }
  #hud .hud-theme { width: 36px; }
}
@media (max-width: 374px) {
  #hud .hud-meter { gap: 6px; }
  #hud .hud-home { margin-inline-start: -10px; padding-inline: 10px; }
}
@media (max-width: 359px) { #hud .chip { padding-inline: 6px; } }





.hud-rail { position: absolute; inset: auto 0 0; height: 12px; cursor: pointer; transform-origin: var(--o-start) 50%; transition: transform .7s var(--ease); }

html.intro:not(.hud-draw) .hud-rail { transform: scaleX(0); animation: dn-failsafe 0s 3s forwards; }
.rail-track, .rail-fill, .rail-sh, .rail-segs { position: absolute; inset: auto 0 4px; height: 4px; }

.rail-track { background: rgba(0,32,26,.34); box-shadow: inset 0 1px 1.5px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.12); }
.rail-fill { background: linear-gradient(#F2FAF7, var(--hud-fill) 60%, #A9D3C8); box-shadow: 0 0 8px rgba(207,230,223,.55); transform-origin: var(--o-start) 50%; transform: scaleX(0); transition: opacity .6s var(--ease); }
.rail-sh { overflow: hidden; pointer-events: none; }
.rail-sh i { position: absolute; top: 0; inset-inline-start: 0; width: 160px; height: 100%; opacity: 0; background: linear-gradient(to left, transparent, #fff 45%, #fff 55%, transparent); }
.rail-in { position: absolute; inset: 0 var(--gutter); }


.rail-segs { opacity: 0; transition: opacity .6s var(--ease); }
.rail-segs::before { content: ""; position: absolute; inset-block: 0; inset-inline: calc(var(--gutter) * -1) auto; width: var(--gutter); background: var(--hud-fill); }
.rail-segs > i { position: absolute; top: 0; bottom: 0; }
.rail-segs b { position: absolute; inset: 0; background: var(--hud-fill); transform-origin: var(--o-start) 50%; transform: scaleX(var(--f, 0)); transition: transform .25s linear; }
#hud:not([data-mode="visitor"]) .rail-fill { opacity: 0; }
#hud:not([data-mode="visitor"]) .rail-segs { opacity: 1; }
#hud[data-mode="preview"] .rail-segs::before { opacity: .5; }
#hud[data-mode="preview"] .rail-segs > i:not(.free) { background: repeating-linear-gradient(-55deg, rgba(255,255,255,.42) 0 1px, transparent 1px 4px), var(--hud); }
#hud.complete .rail-segs > i { background: var(--hud-fill); }




.rail-marks { opacity: 0; transition: opacity .4s var(--ease); }
.rail-marks.in { opacity: 1; }
.rail-marks > i { position: absolute; bottom: 2px; translate: calc(var(--fwd) * -50%) 0; }
.rail-marks > i.hid { visibility: hidden; }
.hud-rail.morph .rail-marks > i { transition: right .6s var(--ease), left .6s var(--ease); }
.hud-rail.morph .rail-orb { transition: transform .6s var(--ease); }
.rail-marks .tk { width: 2px; height: 8px; border-radius: 1px; background: rgba(255,255,255,.42); }
.rail-marks .tk.sec { height: 10px; background: rgba(255,255,255,.68); }
.rail-marks .tk.sub { bottom: 4px; width: 1.5px; height: 4px; background: rgba(255,255,255,.34); }
.rail-marks .hf { width: 2px; height: 10px; border-radius: 1px; background: rgba(255,255,255,.7); }
.rail-marks .rg { bottom: 1.5px; width: 9px; height: 9px; border: 1.5px solid rgba(255,255,255,.8); border-radius: 50%; background: var(--hud); box-shadow: 0 0 0 1.5px var(--hud); }
.rail-marks .tk.on, .rail-marks .hf.on { background: #fff; }
.rail-marks .rg.on { border-color: #fff; background: var(--hud-fill); box-shadow: 0 0 0 1.5px var(--hud), 0 0 6px rgba(207,230,223,.6); }


.rail-ghost { position: absolute; inset-inline-start: -6px; bottom: 0; width: 12px; height: 12px; border: 1.5px solid #fff; border-radius: 50%; opacity: 0; transition: opacity .3s var(--ease); }
#hud.ghost .rail-ghost { opacity: .9; }




.rail-orb { position: absolute; inset-inline-start: -6px; bottom: 0; width: 12px; height: 12px; will-change: transform; }
.rail-orb::before { content: ""; position: absolute; inset-inline-end: 6px; top: 4px; width: 46px; height: 4px; border-radius: 2px;
  background: linear-gradient(calc(var(--fwd) * -90deg), rgba(255,255,255,.95), rgba(242,250,247,.4) 45%, rgba(242,250,247,0)); }
.rail-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 9%, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 40% 36%, #EAF6F2 0, #A9D3C8 38%, #4F9585 72%, #1E5548 100%);
  box-shadow: 0 0 0 1.5px var(--hud), inset 0 -1.5px 2px rgba(0,30,24,.35), 0 0 12px 2px rgba(207,230,223,.6);
}



.hud-banner { position: fixed; inset: var(--hud-h) 0 auto; z-index: 47; height: 44px; overflow: hidden; pointer-events: none; }
.bn {
  position: relative; display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: space-between;
  gap: 1px 10px; height: 100%; padding-inline: calc(var(--gutter) + 28px) var(--gutter);
  background: var(--banner-bg); color: var(--banner-ink); box-shadow: inset 0 -1px 0 rgba(207,230,223,.12);
  transform: translateY(-100%); visibility: hidden;
  transition: transform .26s cubic-bezier(.4,0,1,1), visibility 0s .26s;
}
.hud-banner.on .bn { transform: none; visibility: visible; transition: transform .32s var(--ease); }
.bn-t { position: absolute; inset: auto 0 0; height: 1px; background: rgba(207,230,223,.45); transform-origin: var(--o-start) 50%; transform: scaleX(0); }
.bn-stamp { position: absolute; inset-inline-start: var(--gutter); top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.bn-stamp .d { stroke-width: 1; stroke-dasharray: 1.6 1.6; }
.bn-stamp .c { fill: currentColor; stroke: none; }

.bn-main, .bn-side { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.bn-main { font-size: 13.5px; font-weight: 600; color: #fff; }
.bn-side { font-size: 12px; font-weight: 500; opacity: .8; }
@media (max-width: 400px) { .bn { column-gap: 8px; padding-inline-start: calc(var(--gutter) + 26px); } .bn-main { font-size: 13px; } .bn-side { font-size: 11px; } }