/* Průvodce návody Ubuntu: kapitoly (volba způsobů připojení, kroky), údaje serveru, lišta „další krok“,
   příkazy pro Windows / Mac a Linux. Načítá <PageStyles name="ubuntu-guide" /> přes GuideRuntime
   (src/components/pages/(ubuntu)/guide/Guide.tsx) jen na stránkách návodů Ubuntu – mimo globální CSS webu.
   Volby zapisuje do <html data-guide-mode / data-guide-system / data-guide-os> skript guide/GuideIsland.tsx;
   co je vidět, řídí pravidla níže. Čisté CSS, všechny třídy s prefixem ug-. */

:root {
  --ug-brand: #00a94f;
  --ug-brand-2: #007a3b;
  --ug-dark: #0f2a1d;
  --ug-ink: #111111;
  --ug-text: #3d4744;
  --ug-muted: #5f6865;
  --ug-line: #e3e8e5;
  --ug-soft: #f4f8f5;
  --ug-mint: #eefaf2;
  --ug-red: #b42318;
}

/* ------------------------------------------------------------------ */
/* Formulář údajů serveru                                               */
/* ------------------------------------------------------------------ */

.ug-params { margin: 32px 0; padding: 20px; border: 1px solid var(--ug-line); border-radius: 16px; background: var(--ug-soft); }
.ug-params-head { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ug-muted); }
.ug-params-head strong { color: var(--ug-ink); }
.ug-params-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .ug-params-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ug-param label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; font-weight: 600; color: var(--ug-ink); }
.ug-token { padding: 0 6px; border: 1px solid #c9d2cd; border-radius: 6px; background: #fff; font: 500 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #374151; }
.ug-param input { width: 100%; margin-top: 6px; padding: 8px 12px; border: 1px solid #c9d2cd; border-radius: 10px; background: #fff; font-size: 15px; color: var(--ug-ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.ug-param input:focus { border-color: var(--ug-brand); box-shadow: 0 0 0 3px rgba(0, 169, 79, .18); }
.ug-param-help,
.ug-param-invalid { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ug-muted); }
.ug-param-invalid { display: none; color: var(--ug-red); }
.ug-param[data-invalid] .ug-param-help { display: none; }
.ug-param[data-invalid] .ug-param-invalid { display: block; }
.ug-param[data-invalid] input { border-color: #f87171; }

/* Volba vašeho počítače ve formuláři (sdílený výběr ChoiceGroup níže) */
.ug-params-os { margin: 0 0 20px; }

/* Příkazy pro konkrétní systém klienta: bez volby oba, po volbě jen zvolený. */
html[data-guide-os="win"] .ug-os[data-os="unix"],
html[data-guide-os="unix"] .ug-os[data-os="win"] { display: none; }

/* ------------------------------------------------------------------ */
/* Volba kapitoly: typ systému a způsoby připojení                      */
/* ------------------------------------------------------------------ */

.ug-choices { margin: 32px 0; padding: 20px; border: 1px solid var(--ug-line); border-radius: 16px; background: var(--ug-soft); }
/* Sdílený výběr – ChoiceGroup (typ systému, způsoby připojení, váš počítač) */
.ug-choice-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.ug-choice-group + .ug-choice-group { margin-top: 24px; }
.ug-choice-group legend { margin-bottom: 8px; padding: 0; font-size: 15px; font-weight: 600; color: var(--ug-ink); }
.ug-hint { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ug-text); }
.ug-options { display: grid; gap: 12px; }
@media (min-width: 640px) { .ug-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ug-option { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--ug-line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s; }
.ug-option:hover { border-color: #9aa5a0; }
.ug-option input { margin-top: 4px; accent-color: var(--ug-brand); }
.ug-option:has(input:checked) { border-color: var(--ug-brand); box-shadow: 0 0 0 1px var(--ug-brand); }
.ug-option:has(input:focus-visible) { outline: 2px solid var(--ug-brand); outline-offset: 2px; }
.ug-option-label { display: block; font-size: 15px; font-weight: 600; color: var(--ug-ink); }
.ug-option-text { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ug-muted); }
.ug-no-choice { margin: 12px 0 0; font-size: 14px; color: var(--ug-muted); }

/* ------------------------------------------------------------------ */
/* Kroky kapitoly                                                       */
/* ------------------------------------------------------------------ */

.ug-steps { margin: 32px 0; counter-reset: ugstep; }
.ug-group-title { margin: 40px 0 16px; font-size: 24px; font-weight: 700; color: var(--ug-ink); }
.ug-step-list { margin: 0; padding: 0; list-style: none; }
.ug-step { counter-increment: ugstep; margin: 0 0 24px; padding: 20px; border: 1px solid var(--ug-line); border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .05); scroll-margin-top: 96px; }
.ug-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ug-num { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: var(--ug-brand); font-size: 14px; font-weight: 700; color: #fff; }
.ug-num::before { content: counter(ugstep); }
.ug-step-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--ug-ink); }
.ug-badge { display: none; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ug-badge[data-need="always"] { background: var(--ug-dark); color: #fff; }
.ug-badge[data-need="recommended"] { background: #d1fae5; color: #064e3b; }
.ug-badge[data-need="optional"] { background: #eef1ef; color: #374151; }
.ug-badge[data-need="no"] { background: #d4d9d6; color: #1f2937; }
.ug-needs { margin: 8px 0 0; font-size: 14px; color: var(--ug-muted); }
.ug-skip { display: none; margin: 12px 0 0; font-size: 14px; color: var(--ug-muted); }
.ug-body { margin-top: 12px; }
.ug-open { font-weight: 600; }

/* Obsah jen pro některé způsoby připojení */
.ug-for-mode { margin: 16px 0; padding-left: 16px; border-left: 4px solid var(--ug-line); }
.ug-for-mode-label { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ug-muted); }

/* ------------------------------------------------------------------ */
/* Lišta „krok X z Y · předchozí / další“ v článcích                     */
/* ------------------------------------------------------------------ */

.ug-nav-wrap { max-width: 72rem; margin: 24px auto 0; padding: 0 16px; }
.ug-nav-wrap--bottom { margin: 0 auto 48px; }
/* Uvnitř článku (sloupec s obsahem): zarovnat s textem, bez vlastního odsazení a centrování. */
.pg-main .ug-nav-wrap { max-width: none; margin: 40px 0 0; padding: 0; }
.ug-nav { display: none; }
.ug-nav-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--ug-line); border-radius: 12px; background: var(--ug-soft); font-size: 14px; color: var(--ug-text); }
.ug-nav-bar a { color: inherit; }
.ug-nav-chapter { font-weight: 600; color: var(--ug-ink) !important; text-decoration: none; }
.ug-nav-chapter:hover { color: var(--ug-brand-2) !important; }
.ug-nav-off { color: #92400e; }
.ug-nav-change { text-decoration: underline; }
.ug-nav-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ug-btn { padding: 6px 12px; border: 1px solid #c9d2cd; border-radius: 999px; background: #fff; text-decoration: none; }
.ug-btn:hover { border-color: #6b7570; }
.ug-btn--primary { border-color: var(--ug-ink); background: var(--ug-ink); font-weight: 600; color: #fff !important; }
.ug-btn--primary:hover { border-color: #374151; background: #374151; }

/* ------------------------------------------------------------------ */
/* Přehled kapitoly na rozcestníku                                      */
/* ------------------------------------------------------------------ */

.ug-overview { margin: 24px 0; padding: 20px; border: 1px solid var(--ug-line); border-radius: 16px; background: var(--ug-soft); }
.ug-overview-modes { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ug-text); }
.ug-overview ol { margin: 16px 0 0; padding-left: 24px; }
.ug-overview li { margin: 8px 0 0; font-size: 15px; }
.ug-overview li a { font-weight: 600; color: var(--ug-ink); }
.ug-overview li span { color: var(--ug-muted); }
.ug-overview-cta { margin: 16px 0 0; }
.ug-overview-cta a { display: inline-flex; padding: 8px 16px; border-radius: 999px; background: var(--ug-ink); font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; }

/* Obsah podle zaškrtnutých částí 2FA (guide-tfa: „ssh sudo console“) */
.ug-for-tfa { margin: 16px 0; padding-left: 16px; border-left: 4px solid var(--ug-line); }
.ug-for-tfa-label { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ug-muted); }
html[data-guide-tfa] .ug-for-tfa { display: none; margin: 0; padding: 0; border: 0; }
html[data-guide-tfa] .ug-for-tfa-label { display: none; }
html[data-guide-tfa~="ssh"] .ug-for-tfa[data-scope="ssh"],
html[data-guide-tfa~="sudo"] .ug-for-tfa[data-scope="sudo"],
html[data-guide-tfa~="console"] .ug-for-tfa[data-scope="console"] { display: block; }

/* ------------------------------------------------------------------ */
/* Stav volby (html[data-guide-*])                                      */
/* ------------------------------------------------------------------ */

.ug-nav[data-all] { display: block; }
html[data-guide-mode] .ug-nav[data-all],
html[data-guide-mode] .ug-for-mode-label,
html[data-guide-mode] .ug-no-choice { display: none; }
html[data-guide-mode] .ug-needs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-guide-mode] .ug-for-mode { margin: 0; padding: 0; border: 0; }
html[data-guide-system="server"] .ug-for-system[data-system="desktop"],
html[data-guide-system="desktop"] .ug-for-system[data-system="server"] { display: none; }

/* Pravidla pro každou volbu – generováno z combos v guide/flow.ts (při změně způsobů připojení přegenerovat). */
/* local */
html[data-guide-mode="local"] .ug-step[data-need-local="no"] { counter-increment: none; opacity: .6; border-style: dashed; box-shadow: none; }
html[data-guide-mode="local"] .ug-step[data-need-local="no"] .ug-num::before { content: "–"; }
html[data-guide-mode="local"] .ug-step[data-need-local="no"] .ug-body { display: none; }
html[data-guide-mode="local"] .ug-step[data-need-local="no"] .ug-skip { display: block; }
html[data-guide-mode="local"] .ug-step[data-need-local="always"] .ug-badge[data-need="always"] { display: inline-block; }
html[data-guide-mode="local"] .ug-step[data-need-local="yes"] .ug-badge[data-need="yes"] { display: inline-block; }
html[data-guide-mode="local"] .ug-step[data-need-local="recommended"] .ug-badge[data-need="recommended"] { display: inline-block; }
html[data-guide-mode="local"] .ug-step[data-need-local="optional"] .ug-badge[data-need="optional"] { display: inline-block; }
html[data-guide-mode="local"] .ug-step[data-need-local="no"] .ug-badge[data-need="no"] { display: inline-block; }
html[data-guide-mode="local"] .ug-for-mode:not([data-modes~="local"]) { display: none; }
html[data-guide-mode="local"] .ug-for-mode[data-without~="local"] { display: none; }
html[data-guide-mode="local"] .ug-nav[data-modes~="local"] { display: block; }
/* lan */
html[data-guide-mode="lan"] .ug-step[data-need-lan="no"] { counter-increment: none; opacity: .6; border-style: dashed; box-shadow: none; }
html[data-guide-mode="lan"] .ug-step[data-need-lan="no"] .ug-num::before { content: "–"; }
html[data-guide-mode="lan"] .ug-step[data-need-lan="no"] .ug-body { display: none; }
html[data-guide-mode="lan"] .ug-step[data-need-lan="no"] .ug-skip { display: block; }
html[data-guide-mode="lan"] .ug-step[data-need-lan="always"] .ug-badge[data-need="always"] { display: inline-block; }
html[data-guide-mode="lan"] .ug-step[data-need-lan="yes"] .ug-badge[data-need="yes"] { display: inline-block; }
html[data-guide-mode="lan"] .ug-step[data-need-lan="recommended"] .ug-badge[data-need="recommended"] { display: inline-block; }
html[data-guide-mode="lan"] .ug-step[data-need-lan="optional"] .ug-badge[data-need="optional"] { display: inline-block; }
html[data-guide-mode="lan"] .ug-step[data-need-lan="no"] .ug-badge[data-need="no"] { display: inline-block; }
html[data-guide-mode="lan"] .ug-for-mode:not([data-modes~="lan"]) { display: none; }
html[data-guide-mode="lan"] .ug-for-mode[data-without~="lan"] { display: none; }
html[data-guide-mode="lan"] .ug-nav[data-modes~="lan"] { display: block; }
/* tailscale */
html[data-guide-mode="tailscale"] .ug-step[data-need-tailscale="no"] { counter-increment: none; opacity: .6; border-style: dashed; box-shadow: none; }
html[data-guide-mode="tailscale"] .ug-step[data-need-tailscale="no"] .ug-num::before { content: "–"; }
html[data-guide-mode="tailscale"] .ug-step[data-need-tailscale="no"] .ug-body { display: none; }
html[data-guide-mode="tailscale"] .ug-step[data-need-tailscale="no"] .ug-skip { display: block; }
html[data-guide-mode="tailscale"] .ug-step[data-need-tailscale="always"] .ug-badge[data-need="always"] { display: inline-block; }
html[data-guide-mode="tailscale"] .ug-step[data-need-tailscale="yes"] .ug-badge[data-need="yes"] { display: inline-block; }
html[data-guide-mode="tailscale"] .ug-step[data-need-tailscale="recommended"] .ug-badge[data-need="recommended"] { display: inline-block; }
html[data-guide-mode="tailscale"] .ug-step[data-need-tailscale="optional"] .ug-badge[data-need="optional"] { display: inline-block; }
html[data-guide-mode="tailscale"] .ug-step[data-need-tailscale="no"] .ug-badge[data-need="no"] { display: inline-block; }
html[data-guide-mode="tailscale"] .ug-for-mode:not([data-modes~="tailscale"]) { display: none; }
html[data-guide-mode="tailscale"] .ug-for-mode[data-without~="tailscale"] { display: none; }
html[data-guide-mode="tailscale"] .ug-nav[data-modes~="tailscale"] { display: block; }
/* lan-tailscale */
html[data-guide-mode="lan-tailscale"] .ug-step[data-need-lan-tailscale="no"] { counter-increment: none; opacity: .6; border-style: dashed; box-shadow: none; }
html[data-guide-mode="lan-tailscale"] .ug-step[data-need-lan-tailscale="no"] .ug-num::before { content: "–"; }
html[data-guide-mode="lan-tailscale"] .ug-step[data-need-lan-tailscale="no"] .ug-body { display: none; }
html[data-guide-mode="lan-tailscale"] .ug-step[data-need-lan-tailscale="no"] .ug-skip { display: block; }
html[data-guide-mode="lan-tailscale"] .ug-step[data-need-lan-tailscale="always"] .ug-badge[data-need="always"] { display: inline-block; }
html[data-guide-mode="lan-tailscale"] .ug-step[data-need-lan-tailscale="yes"] .ug-badge[data-need="yes"] { display: inline-block; }
html[data-guide-mode="lan-tailscale"] .ug-step[data-need-lan-tailscale="recommended"] .ug-badge[data-need="recommended"] { display: inline-block; }
html[data-guide-mode="lan-tailscale"] .ug-step[data-need-lan-tailscale="optional"] .ug-badge[data-need="optional"] { display: inline-block; }
html[data-guide-mode="lan-tailscale"] .ug-step[data-need-lan-tailscale="no"] .ug-badge[data-need="no"] { display: inline-block; }
html[data-guide-mode="lan-tailscale"] .ug-for-mode:not([data-modes~="lan"]):not([data-modes~="tailscale"]) { display: none; }
html[data-guide-mode="lan-tailscale"] .ug-for-mode[data-without~="lan"] { display: none; }
html[data-guide-mode="lan-tailscale"] .ug-for-mode[data-without~="tailscale"] { display: none; }
html[data-guide-mode="lan-tailscale"] .ug-nav[data-modes~="lan-tailscale"] { display: block; }
/* internet */
html[data-guide-mode="internet"] .ug-step[data-need-internet="no"] { counter-increment: none; opacity: .6; border-style: dashed; box-shadow: none; }
html[data-guide-mode="internet"] .ug-step[data-need-internet="no"] .ug-num::before { content: "–"; }
html[data-guide-mode="internet"] .ug-step[data-need-internet="no"] .ug-body { display: none; }
html[data-guide-mode="internet"] .ug-step[data-need-internet="no"] .ug-skip { display: block; }
html[data-guide-mode="internet"] .ug-step[data-need-internet="always"] .ug-badge[data-need="always"] { display: inline-block; }
html[data-guide-mode="internet"] .ug-step[data-need-internet="yes"] .ug-badge[data-need="yes"] { display: inline-block; }
html[data-guide-mode="internet"] .ug-step[data-need-internet="recommended"] .ug-badge[data-need="recommended"] { display: inline-block; }
html[data-guide-mode="internet"] .ug-step[data-need-internet="optional"] .ug-badge[data-need="optional"] { display: inline-block; }
html[data-guide-mode="internet"] .ug-step[data-need-internet="no"] .ug-badge[data-need="no"] { display: inline-block; }
html[data-guide-mode="internet"] .ug-for-mode:not([data-modes~="internet"]) { display: none; }
html[data-guide-mode="internet"] .ug-for-mode[data-without~="internet"] { display: none; }
html[data-guide-mode="internet"] .ug-nav[data-modes~="internet"] { display: block; }
/* lan-internet */
html[data-guide-mode="lan-internet"] .ug-step[data-need-lan-internet="no"] { counter-increment: none; opacity: .6; border-style: dashed; box-shadow: none; }
html[data-guide-mode="lan-internet"] .ug-step[data-need-lan-internet="no"] .ug-num::before { content: "–"; }
html[data-guide-mode="lan-internet"] .ug-step[data-need-lan-internet="no"] .ug-body { display: none; }
html[data-guide-mode="lan-internet"] .ug-step[data-need-lan-internet="no"] .ug-skip { display: block; }
html[data-guide-mode="lan-internet"] .ug-step[data-need-lan-internet="always"] .ug-badge[data-need="always"] { display: inline-block; }
html[data-guide-mode="lan-internet"] .ug-step[data-need-lan-internet="yes"] .ug-badge[data-need="yes"] { display: inline-block; }
html[data-guide-mode="lan-internet"] .ug-step[data-need-lan-internet="recommended"] .ug-badge[data-need="recommended"] { display: inline-block; }
html[data-guide-mode="lan-internet"] .ug-step[data-need-lan-internet="optional"] .ug-badge[data-need="optional"] { display: inline-block; }
html[data-guide-mode="lan-internet"] .ug-step[data-need-lan-internet="no"] .ug-badge[data-need="no"] { display: inline-block; }
html[data-guide-mode="lan-internet"] .ug-for-mode:not([data-modes~="lan"]):not([data-modes~="internet"]) { display: none; }
html[data-guide-mode="lan-internet"] .ug-for-mode[data-without~="lan"] { display: none; }
html[data-guide-mode="lan-internet"] .ug-for-mode[data-without~="internet"] { display: none; }
html[data-guide-mode="lan-internet"] .ug-nav[data-modes~="lan-internet"] { display: block; }
/* tailscale-internet */
html[data-guide-mode="tailscale-internet"] .ug-step[data-need-tailscale-internet="no"] { counter-increment: none; opacity: .6; border-style: dashed; box-shadow: none; }
html[data-guide-mode="tailscale-internet"] .ug-step[data-need-tailscale-internet="no"] .ug-num::before { content: "–"; }
html[data-guide-mode="tailscale-internet"] .ug-step[data-need-tailscale-internet="no"] .ug-body { display: none; }
html[data-guide-mode="tailscale-internet"] .ug-step[data-need-tailscale-internet="no"] .ug-skip { display: block; }
html[data-guide-mode="tailscale-internet"] .ug-step[data-need-tailscale-internet="always"] .ug-badge[data-need="always"] { display: inline-block; }
html[data-guide-mode="tailscale-internet"] .ug-step[data-need-tailscale-internet="yes"] .ug-badge[data-need="yes"] { display: inline-block; }
html[data-guide-mode="tailscale-internet"] .ug-step[data-need-tailscale-internet="recommended"] .ug-badge[data-need="recommended"] { display: inline-block; }
html[data-guide-mode="tailscale-internet"] .ug-step[data-need-tailscale-internet="optional"] .ug-badge[data-need="optional"] { display: inline-block; }
html[data-guide-mode="tailscale-internet"] .ug-step[data-need-tailscale-internet="no"] .ug-badge[data-need="no"] { display: inline-block; }
html[data-guide-mode="tailscale-internet"] .ug-for-mode:not([data-modes~="tailscale"]):not([data-modes~="internet"]) { display: none; }
html[data-guide-mode="tailscale-internet"] .ug-for-mode[data-without~="tailscale"] { display: none; }
html[data-guide-mode="tailscale-internet"] .ug-for-mode[data-without~="internet"] { display: none; }
html[data-guide-mode="tailscale-internet"] .ug-nav[data-modes~="tailscale-internet"] { display: block; }
/* lan-tailscale-internet */
html[data-guide-mode="lan-tailscale-internet"] .ug-step[data-need-lan-tailscale-internet="no"] { counter-increment: none; opacity: .6; border-style: dashed; box-shadow: none; }
html[data-guide-mode="lan-tailscale-internet"] .ug-step[data-need-lan-tailscale-internet="no"] .ug-num::before { content: "–"; }
html[data-guide-mode="lan-tailscale-internet"] .ug-step[data-need-lan-tailscale-internet="no"] .ug-body { display: none; }
html[data-guide-mode="lan-tailscale-internet"] .ug-step[data-need-lan-tailscale-internet="no"] .ug-skip { display: block; }
html[data-guide-mode="lan-tailscale-internet"] .ug-step[data-need-lan-tailscale-internet="always"] .ug-badge[data-need="always"] { display: inline-block; }
html[data-guide-mode="lan-tailscale-internet"] .ug-step[data-need-lan-tailscale-internet="yes"] .ug-badge[data-need="yes"] { display: inline-block; }
html[data-guide-mode="lan-tailscale-internet"] .ug-step[data-need-lan-tailscale-internet="recommended"] .ug-badge[data-need="recommended"] { display: inline-block; }
html[data-guide-mode="lan-tailscale-internet"] .ug-step[data-need-lan-tailscale-internet="optional"] .ug-badge[data-need="optional"] { display: inline-block; }
html[data-guide-mode="lan-tailscale-internet"] .ug-step[data-need-lan-tailscale-internet="no"] .ug-badge[data-need="no"] { display: inline-block; }
html[data-guide-mode="lan-tailscale-internet"] .ug-for-mode:not([data-modes~="lan"]):not([data-modes~="tailscale"]):not([data-modes~="internet"]) { display: none; }
html[data-guide-mode="lan-tailscale-internet"] .ug-for-mode[data-without~="lan"] { display: none; }
html[data-guide-mode="lan-tailscale-internet"] .ug-for-mode[data-without~="tailscale"] { display: none; }
html[data-guide-mode="lan-tailscale-internet"] .ug-for-mode[data-without~="internet"] { display: none; }
html[data-guide-mode="lan-tailscale-internet"] .ug-nav[data-modes~="lan-tailscale-internet"] { display: block; }