:root{
    --ink:#08161f;
    --ink-2:#0d2430;
    --ink-3:#12303e;
    --ice:#e6f0f2;
    --muted:#84a0ac;
    --amber:#f0a02e;
    --cyan:#6fc7d8;
    --rose:#e0868b;
    --rule:#1b3d4d;
    --display:"Unbounded","Trebuchet MS",system-ui,sans-serif;
    --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--ink);color:var(--ice);
    font:400 17px/1.7 var(--body);-webkit-font-smoothing:antialiased}
  .wrap{max-width:62rem;margin:0 auto;padding:0 1.5rem}
  a{color:var(--amber)}
  :focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  code{font:400 .88em/1 var(--mono);background:var(--ink-3);
    padding:.15em .45em;border-radius:3px;color:var(--ice);white-space:nowrap}

  /* ---------- шапка ---------- */
  header{padding:5.5rem 0 3rem}
  .eyebrow{font:500 .75rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
    color:var(--amber);margin:0 0 1.75rem}
  h1{font:400 clamp(2.1rem,5vw,3.4rem)/1.14 var(--display);
    letter-spacing:-.015em;margin:0 0 1.5rem;max-width:21ch}
  h1 em{font-style:normal;color:var(--amber)}
  .lede{font-size:1.15rem;color:var(--muted);margin:0;max-width:60ch}

  /* ---------- сигнатура ---------- */
  .braid{margin:3.5rem 0 1rem}
  .braid svg{width:100%;height:auto;display:block;overflow:visible}
  .strand{fill:none;stroke-width:2.5;stroke-linecap:round}
  .base{opacity:.3}
  .cable{fill:none;stroke:var(--amber);stroke-width:7;stroke-linecap:round;opacity:.9}
  .pulse{stroke-width:3;opacity:.9}
  .flow{stroke-dasharray:10 214;animation:flow 4.4s linear infinite}
  @keyframes flow{from{stroke-dashoffset:224}to{stroke-dashoffset:0}}
  .braid figcaption{font:400 .8rem/1.6 var(--mono);color:var(--muted);
    display:flex;justify-content:space-between;gap:1rem;
    border-top:1px solid var(--rule);padding-top:.75rem;margin-top:.5rem}

  /* ---------- секции ---------- */
  section{padding:3.75rem 0 0}
  h2{font:600 .78rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);margin:0 0 1.25rem}
  .sub{font:400 1.35rem/1.3 var(--display);letter-spacing:-.01em;
    margin:3rem 0 .75rem;color:var(--ice)}
  .note{color:#c3d6dc;max-width:64ch;margin:0 0 2rem}

  /* ---------- таблица-стойка ---------- */
  .stack{border:1px solid var(--rule)}
  .row{display:grid;grid-template-columns:9rem 1fr 13rem;gap:1.5rem;
    padding:1.15rem 1.5rem;border-bottom:1px solid var(--rule);align-items:baseline}
  .stack .row:last-child{border-bottom:0}
  .row__name{font:500 .82rem/1.5 var(--mono);color:var(--amber);word-break:break-word}
  .row__what{color:#c3d6dc}
  .row__what b{font-weight:500;color:var(--ice)}
  .row__where{font:400 .78rem/1.6 var(--mono);color:var(--muted)}
  .row--payload{background:var(--ink-2);border-left:2px solid var(--rose)}
  .row--payload .row__name{color:var(--rose)}

  /* ---------- маршрут ---------- */
  .stop{display:grid;grid-template-columns:8rem 1fr;gap:2rem;
    padding:0 0 2.75rem;position:relative}
  .stop::before{content:"";position:absolute;left:calc(8rem + 1rem);top:.7rem;bottom:-.7rem;
    width:1px;background:var(--rule);transform:translateX(-50%)}
  .stop:last-child::before{display:none}
  .stop::after{content:"";position:absolute;left:calc(8rem + 1rem);top:.5rem;
    width:9px;height:9px;border-radius:50%;background:var(--ink);
    border:2px solid var(--amber);transform:translateX(-50%)}
  .who{font:500 .78rem/1.5 var(--mono);color:var(--cyan);text-align:right;padding-top:.15rem}
  .stop h3{font:400 1.3rem/1.3 var(--display);margin:0 0 .6rem;letter-spacing:-.01em}
  .stop p{margin:0;color:#c3d6dc;max-width:60ch}
  .stop p + p{margin-top:.75rem}

  /* ---------- связи ---------- */
  .wires{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
  .wires li{display:grid;grid-template-columns:13rem 1fr;gap:1.5rem;
    padding:1rem 0;border-bottom:1px solid var(--rule);color:#c3d6dc}
  .wires .from{font:500 .8rem/1.6 var(--mono);color:var(--cyan)}

  /* ---------- два взгляда ---------- */
  .views{display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:var(--rule);border:1px solid var(--rule)}
  .view{background:var(--ink-2);padding:1.75rem}
  .view h3{font:500 .75rem/1 var(--mono);letter-spacing:.16em;
    text-transform:uppercase;margin:0 0 1rem}
  .view--outside h3{color:var(--muted)}
  .view--inside h3{color:var(--rose)}
  .view ul{margin:0;padding:0;list-style:none}
  .view li{padding:.55rem 0;border-bottom:1px solid var(--rule);
    color:#c3d6dc;font-size:.97rem}
  .view li:last-child{border-bottom:0}

  .caveat{margin:2rem 0 0;padding:1.1rem 1.25rem;border-left:2px solid var(--rule);
    color:var(--muted);font-size:.95rem;max-width:64ch}
  .big{font:400 clamp(1.3rem,3vw,1.8rem)/1.4 var(--display);
    color:var(--ice);max-width:27ch;margin:0 0 1.25rem;letter-spacing:-.01em}
  .seal p{max-width:64ch;color:#c3d6dc}

  footer{margin-top:4.5rem;border-top:1px solid var(--rule);
    padding:2rem 0 4rem;color:var(--muted);font:400 .85rem/1.7 var(--mono)}

  @media (max-width:820px){
    .row{grid-template-columns:8rem 1fr;gap:.4rem 1.25rem}
    .row__where{grid-column:2}
    .wires li{grid-template-columns:1fr;gap:.3rem}
  }
  @media (max-width:640px){
    header{padding:3.5rem 0 2rem}
    .stop{grid-template-columns:1fr;gap:.35rem}
    .stop::before,.stop::after{display:none}
    .who{text-align:left}
    .views{grid-template-columns:1fr}
    .row{grid-template-columns:1fr}
    .row__where{grid-column:1}
    .braid figcaption{flex-direction:column;gap:.25rem}
  }
  @media (prefers-reduced-motion:reduce){.flow{animation:none;stroke-dasharray:none}}

/* ---------- фальш-панель ---------- */
.gate{min-height:100svh;display:grid;place-items:center;padding:1.5rem}
.gate__card{max-width:30rem;width:100%;background:var(--ink-2);
  border:1px solid var(--rule);padding:2.5rem 2rem}
.gate__mark{display:flex;gap:.4rem;margin:0 0 1.75rem}
.gate__mark i{display:block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--rule);animation:pulse 1.5s ease-in-out infinite}
.gate__mark i:nth-child(2){animation-delay:.2s}
.gate__mark i:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,100%{background:var(--rule)}50%{background:var(--amber)}}
.gate h1{font:400 1.5rem/1.3 var(--display);margin:0 0 .75rem;letter-spacing:-.01em}
.gate p{color:var(--muted);margin:0 0 2rem;font-size:.97rem}
.gate button{font:500 .8rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  background:var(--amber);color:#08161f;border:0;padding:1rem 1.75rem;
  cursor:pointer;width:100%;transition:filter .15s ease}
.gate button:hover{filter:brightness(1.1)}
.gate button:active{filter:brightness(.95)}
/* .gate p задаёт margin с большей специфичностью — перебиваем адресно */
.gate p.gate__note{font:400 .75rem/1.6 var(--mono);color:var(--muted);opacity:.6;
  margin:1.5rem 0 0;text-align:center}
.gate[hidden]{display:none}
.revealed{animation:fadein .4s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- страница 404 ---------- */
.mid{min-height:100svh;display:grid;place-items:center;padding:1.5rem}
.mid main{max-width:34rem}
.mid a{border-bottom:1px solid var(--rule);padding-bottom:2px;text-decoration:none}
.mid a:hover{border-bottom-color:var(--amber)}

@media (prefers-reduced-motion:reduce){
  .gate__mark i{animation:none}
  .revealed{animation:none}
}