:root{
    --bg:#080b12; --bg2:#05070c; --panel:rgba(18,24,35,.72); --panel-brd:rgba(45,212,191,.16);
    --ink:#dbe4ee; --muted:#8b97a7; --faint:#818ea0; --acc:#2dd4bf; --acc2:#34d399;
    --line:rgba(45,212,191,.14); --card:rgba(16,22,32,.55); --shadow:0 18px 50px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
  :root[data-theme="light"]{
    --bg:#eef2f7; --bg2:#dde5ee; --panel:rgba(255,255,255,.78); --panel-brd:rgba(13,148,136,.22);
    --ink:#141b26; --muted:#526073; --faint:#5f6d7f; --acc:#0d9488; --acc2:#059669;
    --line:rgba(13,148,136,.18); --card:rgba(255,255,255,.6); --shadow:0 18px 44px -22px rgba(30,60,80,.35);
    color-scheme:light;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#eef2f7; --bg2:#dde5ee; --panel:rgba(255,255,255,.78); --panel-brd:rgba(13,148,136,.22);
      --ink:#141b26; --muted:#526073; --faint:#5f6d7f; --acc:#0d9488; --acc2:#059669;
      --line:rgba(13,148,136,.18); --card:rgba(255,255,255,.6); --shadow:0 18px 44px -22px rgba(30,60,80,.35);
      color-scheme:light;
    }
  }
  *{box-sizing:border-box}
  html,body{margin:0;max-width:100%;overflow-x:hidden}
  body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:radial-gradient(1100px 620px at 76% -10%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 62%), linear-gradient(180deg,var(--bg),var(--bg2));
    color:var(--ink); min-height:100vh; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:clamp(18px,4vw,40px)}

  /* header */
  header.top{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
  .brand .pre{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);font-weight:600}
  .brand h1{margin:.28em 0 .1em;font-size:clamp(26px,5.2vw,44px);letter-spacing:-.02em;font-weight:700}
  .brand .role{color:var(--muted);font-size:clamp(13px,2.4vw,16px)}
  .brand .role b{color:var(--ink);font-weight:600}
  .meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .term{font-size:12.5px;color:var(--muted);background:var(--card);border:1px solid var(--panel-brd);
    border-radius:9px;padding:7px 11px}
  .term .p{color:var(--acc)}
  .term .c{color:var(--ink)}
  .cursor{display:inline-block;width:7px;height:14px;background:var(--acc);vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(2) infinite}
  @keyframes blink{50%{opacity:0}}
  .tbtn{cursor:pointer;border:1px solid var(--panel-brd);background:var(--card);color:var(--muted);
    border-radius:9px;padding:7px 11px;font-size:12px;display:inline-flex;gap:7px;align-items:center;font-family:inherit}
  .tbtn:hover{color:var(--ink);border-color:var(--acc)}
  .tbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

  /* stage */
  .stagehead{margin:clamp(26px,5vw,44px) 0 12px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .stagehead h2{margin:0;font-size:15px;letter-spacing:.02em;font-weight:600}
  .stagehead .sub{color:var(--faint);font-size:12.5px}
  .stagehead .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);display:inline-block}

  .stage{position:relative;border:1px solid var(--panel-brd);border-radius:18px;overflow:hidden;
    background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 4%, transparent), transparent 40%);
    box-shadow:var(--shadow); min-height:clamp(360px,52vw,500px)}
  canvas#scene{position:absolute;inset:0;width:100%;height:100%;display:none}
  .js canvas#scene{display:block}

  ul.city{list-style:none;margin:0;padding:0}
  /* NO-JS fallback: readable grid of cards */
  ul.city{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding:18px}
  .js ul.city{display:block;padding:0;position:absolute;inset:0;pointer-events:none}

  .bld{display:block;position:relative;pointer-events:auto;border-radius:12px;
    border:1px solid var(--panel-brd);background:var(--card);padding:14px;transition:border-color .18s,transform .18s}
  .js .bld{position:absolute;border:none;background:transparent;padding:0}
  .bld:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}

  .plate{display:flex;flex-direction:column;gap:5px}
  .js .plate{position:absolute;left:50%;top:0;transform:translate(-50%,-8px);width:max-content;max-width:220px;
    background:var(--panel);border:1px solid var(--panel-brd);border-radius:8px;padding:4px 8px;gap:2px;
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
    transition:transform .18s,border-color .18s,box-shadow .18s,opacity .18s;opacity:.82}
  /* по умолчанию — только имя; хост и бейдж раскрываются при наведении */
  .js .plate .p-host,.js .plate .p-badge{display:none}
  .js .bld:hover,.js .bld:focus-visible{z-index:80 !important}
  .js .bld:hover .plate,.js .bld:focus-visible .plate{border-color:var(--acc);transform:translate(-50%,-14px);
    opacity:1;padding:6px 9px;gap:4px}
  .js .bld:hover .plate .p-host,.js .bld:focus-visible .plate .p-host,
  .js .bld:hover .plate .p-badge,.js .bld:focus-visible .plate .p-badge{display:flex}
  .p-name{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
  .js .p-name{font-size:12px;font-weight:600}
  .p-host{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:var(--acc)}
  .p-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted);margin-top:1px}
  .p-badge .live{width:6px;height:6px;border-radius:50%;background:var(--acc2);box-shadow:0 0 8px var(--acc2)}
  .p-badge svg{width:11px;height:11px;stroke:var(--faint);fill:none}
  .p-desc{font-size:12px;color:var(--muted);margin-top:4px}
  .js .p-desc{display:none}
  .p-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
  .js .p-tags{display:none}
  .p-tags span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:var(--faint);
    border:1px solid var(--panel-brd);border-radius:5px;padding:2px 6px}

  /* HUD */
  .hud{position:absolute;left:16px;bottom:16px;max-width:min(320px,72%);pointer-events:none;
    background:var(--panel);border:1px solid var(--panel-brd);border-radius:12px;padding:12px 14px;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);display:none}
  .js .hud{display:block}
  .hud .k{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.18em;color:var(--acc);text-transform:uppercase}
  .hud .hn{font-weight:700;font-size:16px;margin-top:3px;display:flex;align-items:center;gap:8px}
  .hud .hn svg{width:14px;height:14px;stroke:var(--faint);fill:none;flex:none}
  .hud .hh{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--acc);margin-top:1px}
  .hud .hd{font-size:12.5px;color:var(--muted);margin-top:7px}
  .hud .ht{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
  .hud .ht span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:var(--faint);
    border:1px solid var(--panel-brd);border-radius:5px;padding:2px 6px}
  .hud .st{font-size:11px;color:var(--faint);margin-top:9px}
  .hud .st b{color:var(--acc2)}

  /* footer */
  footer{margin-top:clamp(24px,5vw,40px);border-top:1px solid var(--panel-brd);padding-top:20px;
    display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
  .contacts{display:flex;flex-wrap:wrap;gap:10px}
  .contacts a{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
    border:1px solid var(--panel-brd);background:var(--card);border-radius:9px;padding:8px 12px;transition:.16s}
  .contacts a:hover,.contacts a:focus-visible{color:var(--ink);border-color:var(--acc)}
  .contacts a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .contacts svg{width:15px;height:15px;stroke:currentColor;fill:none}
  .colophon{font-size:11.5px;color:var(--faint);font-family:ui-monospace,Menlo,Consolas,monospace}

  /* ---------- fullscreen immersive (JS only) ---------- */
  .js,.js body{height:100%}
  .js body{overflow:hidden}
  .js .wrap{max-width:none;padding:0;height:100dvh;height:100vh}
  .js .stagehead{display:none}
  .js .stage{position:fixed;inset:0;height:100dvh;height:100vh;border:none;border-radius:0;
    box-shadow:none;background:transparent;z-index:0}
  .js header.top{position:fixed;top:0;left:0;right:0;z-index:20;pointer-events:none;align-items:flex-start;
    padding:clamp(16px,3vw,30px);
    background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 82%,transparent),transparent)}
  .js header.top .brand,.js header.top .meta{pointer-events:none}
  .js header.top .tbtn,.js header.top .term{pointer-events:auto}
  .js .meta{align-items:flex-end}
  .js footer{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;border-top:none;pointer-events:none;
    justify-content:flex-end;align-items:flex-end;padding:clamp(14px,3vw,26px);
    background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 82%,transparent),transparent)}
  .js footer .contacts,.js footer .colophon{pointer-events:none}
  .js footer .contacts a{pointer-events:auto}
  .js footer .colophon{display:none}
  .js .hud{left:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:21}

  /* ---------- телефон: сцена сверху, сервисы списком (наведения нет — нужен список) ---------- */
  @media (max-width:600px){
    .js,.js body{height:auto}
    .js body{overflow:auto}
    .js .wrap{height:auto;padding:0 0 8px}
    .js header.top{position:static;background:none;padding:20px 16px 0;pointer-events:auto}
    .js .meta{align-items:flex-start;width:100%;flex-direction:row;gap:10px}
    .js .term{display:none}
    .js .hud{display:none}
    .js .stagehead{display:flex;margin:18px 0 8px;padding:0 16px}
    .js .stage{position:static;height:auto;min-height:0;border:none;border-radius:0;background:transparent}
    .js canvas#scene{position:relative;inset:auto;width:100%;height:44vh;min-height:260px}
    .js ul.city{display:grid;position:static;inset:auto;pointer-events:auto;
      grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:14px 16px}
    .js .bld{position:static !important;width:auto !important;height:auto !important;min-width:0;
      border:1px solid var(--panel-brd);background:var(--card);padding:12px;z-index:auto !important;
      overflow-wrap:anywhere}
    .js .plate{position:static;transform:none !important;background:none;border:none;padding:0 !important;
      box-shadow:none;opacity:1;width:auto !important;max-width:100%;gap:4px !important;
      -webkit-backdrop-filter:none;backdrop-filter:none}
    .js .plate .p-host,.js .plate .p-badge{display:flex}
    .js .p-name{font-size:13.5px}
    .js .p-desc{display:block}
    .js .p-tags{display:flex}
    .js footer{position:static;background:none;margin-top:8px;padding:16px;justify-content:flex-start;
      border-top:1px solid var(--panel-brd);pointer-events:auto}
    .js footer .colophon{display:block}
  }

  @media (max-width:560px){
    .meta{align-items:flex-start;width:100%}
    header.top{align-items:flex-start}
    .hud{left:10px;bottom:10px;padding:10px 11px}
  }
  @media (prefers-reduced-motion: reduce){ .cursor{animation:none} }

  /* статусы живых проверок */
  .p-badge .live.bad{background:#ff5f56;box-shadow:0 0 8px #ff5f56}
  .hud .st b.bad{color:#ff5f56}