/* tuner · station dial */
.htun { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
.htunb { position: relative; height: 92px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(var(--bg-rgb), .92); }
.htunb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: rgb(var(--bg-rgb)); pointer-events: none; }   /* fully covers the tentacles' ends just under the line */
.htun-ticks { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: 0 2px; }
.htun-ticks i { display: block; width: 1px; height: 8px; background: var(--line); }
.htun-ticks i.mid { height: 16px; }
.htun-ticks i.big { height: 26px; background: var(--text-6); }
.htunl { position: absolute; left: 0; right: 0; bottom: 14px; display: grid; font-size: 13px; letter-spacing: .2em; text-align: center; }
.htunl a { color: var(--text-3); }
.htunl a:hover { color: var(--title); }
.htunl a.on { color: var(--alert); }
.needle { position: absolute; top: -10px; width: 2px; height: 70px; margin-left: -1px; background: var(--alert); box-shadow: 0 0 12px var(--alert); animation: drift 5s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (max-width: 600px) { .htunl { font-size: 10px; letter-spacing: .06em; line-height: 1.35; bottom: 10px; } .htunl a { padding: 0 2px; } }