/* INTERSTELLAR · общий вид внутренних страниц (19.10) — по эталону главной (hub-universe.html).
   Шапка «приборная панель корабля», единый жест появления «опускание», подвал. Подключается последним в <head>: <link rel="stylesheet" href="/ui.css"> + <script src="/ui.js" defer></script>
   Разметка шапки: header.top.ui-top > a.brand(canvas.mark + span>b+i) + div.mid + div.rt(a.lang + a.cta [+ бургер]) [+ nav — строка разделов под горизонтом] */
@font-face{font-family:Unbounded;font-weight:200 900;font-display:swap;src:url(fonts/unbounded-cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:Unbounded;font-weight:200 900;font-display:swap;src:url(fonts/unbounded-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Onest;font-weight:100 900;font-display:swap;src:url(fonts/onest-cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:Onest;font-weight:100 900;font-display:swap;src:url(fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Mono;font-weight:500;font-display:swap;src:url(fonts/mono-cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:Mono;font-weight:500;font-display:swap;src:url(fonts/mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

/* ===== шапка ===== */
html body header.ui-top{--u-fd:Unbounded,system-ui,sans-serif;--u-fb:Onest,system-ui,sans-serif;--u-fm:Mono,ui-monospace,monospace;--u-gold:#f3d9a0;--u-sys:#fff3dc;
 position:fixed;left:0;right:0;top:0;z-index:20;height:78px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 34px;margin:0;inset:0 0 auto;
 background:linear-gradient(180deg,rgba(2,4,10,.82),rgba(2,4,10,.35) 70%,transparent);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .4s;font-family:var(--u-fb)}
html body header.ui-top.ui-scr{background:linear-gradient(180deg,rgba(2,4,10,.94),rgba(2,4,10,.84));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* золотой горизонт и бегущий по нему импульс сердцебиения звезды */
html body header.ui-top:after{content:"";position:absolute;left:34px;right:34px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(243,217,160,.32) 18%,rgba(243,217,160,.32) 82%,transparent);pointer-events:none}
html body header.ui-top:before{content:"";position:absolute;left:34px;bottom:-1px;width:180px;height:3px;border-radius:2px;background:radial-gradient(ellipse at center,rgba(255,246,226,.95),rgba(243,217,160,.5) 35%,transparent 70%);filter:blur(.4px);opacity:0;animation:uiPulse 2.856s cubic-bezier(.45,0,.2,1) infinite;pointer-events:none}
@keyframes uiPulse{0%{transform:translateX(0);opacity:0}8%{opacity:1}70%{opacity:.9}100%{transform:translateX(calc(100vw - 248px));opacity:0}}
/* бренд: знак с сердцебиением + две строки */
html body .ui-top .brand{display:inline-flex;align-items:center;gap:12px;justify-self:start;min-width:0;font:inherit;letter-spacing:normal;color:#fff;text-decoration:none}
html body .ui-top .brand .mark{width:38px;height:38px;flex:none;animation:uiHbm 2.856s ease-in-out infinite}
@keyframes uiHbm{0%,100%{transform:scale(1)}12%{transform:scale(1.1)}24%{transform:scale(.97)}36%{transform:scale(1.03)}}
html body .ui-top .brand>span{display:grid;gap:3px}
html body .ui-top .brand b{font:600 15px var(--u-fd);letter-spacing:.22em;color:#fff;white-space:nowrap}
html body .ui-top .brand i{font:500 12px var(--u-fm);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:#8b90a3;margin:0;white-space:nowrap}
/* центр: название системы */
html body .ui-top .mid{display:inline-flex;align-items:center;gap:14px;font:500 12px var(--u-fm);letter-spacing:.3em;text-transform:uppercase;color:var(--u-gold);white-space:nowrap;justify-self:center;border:0;padding:0;background:none;box-shadow:none}
html body .ui-top .mid:before,html body .ui-top .mid:after{content:"";width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--u-gold))}
html body .ui-top .mid:after{transform:scaleX(-1)}
html body .ui-top .mid em{font-style:normal;color:#8b90a3;letter-spacing:.22em}
html body .ui-top .mid .dot{width:5px;height:5px;border-radius:50%;background:var(--u-sys);box-shadow:0 0 8px 2px color-mix(in srgb,var(--u-sys) 70%,transparent)}
/* справа: Экосистема (eco.js) · язык · старт */
html body .ui-top .rt{display:flex;align-items:center;gap:10px;justify-self:end;margin:0}
html body .ui-top .lang{display:inline-grid;place-items:center;height:38px;min-width:46px;font:500 12px var(--u-fm)!important;letter-spacing:.14em;color:#fff3dc!important;padding:0 12px;margin:0;border-radius:999px;border:1px solid rgba(243,217,160,.32);background:rgba(3,5,11,.78);text-decoration:none;transition:border-color .25s,background .25s}
html body .ui-top .lang:hover{border-color:var(--u-gold);background:rgba(243,217,160,.1)}
html body .ui-top :is(.cta,.hcta),html body .ui-top :is(.cta,.hcta).gem{position:relative!important;overflow:hidden;isolation:auto;white-space:nowrap;flex:none;display:inline-flex;gap:8px;align-items:center;height:42px;padding:0 22px!important;margin:0;border:0!important;border-radius:999px!important;
 background:linear-gradient(135deg,#fff3dc,var(--u-gold) 45%,#d8b56a)!important;color:#1c1406!important;font:600 15px var(--u-fb)!important;letter-spacing:normal;text-shadow:none;text-decoration:none;box-shadow:0 0 30px -10px rgba(243,217,160,.8)!important;justify-self:auto}
html body .ui-top :is(.cta,.hcta) .s{display:none}
html body .ui-top :is(.cta,.hcta):before{display:none!important}
html body .ui-top :is(.cta,.hcta):after{content:""!important;position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:uiShine 5.7s ease-in-out infinite 2s;font-size:0}
@keyframes uiShine{0%,70%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(475%) skewX(-18deg)}}
html body .ui-top :is(.cta,.hcta):hover{filter:brightness(1.06)}
html body .ui-top a:focus-visible,html body .ui-top button:focus-visible{outline:2px solid var(--u-gold);outline-offset:3px}
/* строка разделов страницы — под горизонтом, моно 12px; при прокрутке вниз прячется, вверх — возвращается */
html body .ui-top nav{position:absolute;left:0;right:0;top:100%;height:38px;display:flex;justify-content:center;align-items:center;gap:6px;margin:0;padding:0 34px;border:0;border-radius:0;box-shadow:none;
 background:linear-gradient(180deg,rgba(2,4,10,.42),transparent);-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;transform:none;pointer-events:auto;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
html body .ui-top.ui-scr nav{background:rgba(2,4,10,.96)}
html body .ui-top.ui-up nav{opacity:0;transform:translateY(-10px);pointer-events:none}
html body .ui-top nav a{position:relative;padding:8px 14px;border-radius:0;background:none!important;font:500 12px var(--u-fm)!important;letter-spacing:.2em!important;text-transform:uppercase;color:#9aa0b4;text-decoration:none;white-space:nowrap;opacity:1;transition:color .25s}
html body .ui-top nav a:hover{color:#fff3dc}
html body .ui-top nav a[aria-current="true"],html body .ui-top nav a.on{color:var(--u-gold)}
html body .ui-top nav a[aria-current="true"]:after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--u-gold);box-shadow:0 0 8px var(--u-gold)}
html body .ui-top nav .lang{display:none}
/* бургер (телефон) — капсула в стиле языка */
html body .ui-top .burger,html body .ui-top .pburger,html body .ui-top .ui-burger{display:none;position:relative;width:38px;height:38px;margin:0;padding:0;border-radius:999px;border:1px solid rgba(243,217,160,.32)!important;background:rgba(3,5,11,.78)!important;box-shadow:none!important;cursor:pointer;flex:none}
html body .ui-top .burger i,html body .ui-top .pburger i,html body .ui-top .ui-burger i{position:absolute;left:11px;right:11px;width:auto;height:1.5px;margin:0;background:#fff3dc;transition:transform .3s}
html body .ui-top :is(.burger,.pburger,.ui-burger) i:nth-child(1){top:14px}html body .ui-top :is(.burger,.pburger,.ui-burger) i:nth-child(2){top:22px}html body .ui-top :is(.burger,.pburger,.ui-burger) i:nth-child(3){display:none}
html body .ui-top :is(.burger,.pburger,.ui-burger)[aria-expanded="true"] i:nth-child(1),html body.pnav .ui-top .pburger i:nth-child(1){transform:translateY(4px) rotate(45deg)}
html body .ui-top :is(.burger,.pburger,.ui-burger)[aria-expanded="true"] i:nth-child(2),html body.pnav .ui-top .pburger i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

@media(max-width:1180px){html body .ui-top .mid em,html body .ui-top .brand i{display:none}html body .ui-top nav a{padding:8px 10px;letter-spacing:.16em!important}}
@media(max-width:980px){html body header.ui-top{grid-template-columns:1fr auto}html body .ui-top .mid{display:none}}
/* телефон — как на главной: плотная полоса 64px, только знак, капсулы справа; разделы — в выпадающем списке по бургеру */
@media(max-width:800px){
 html body header.ui-top{height:64px;padding:0 14px;gap:10px;background:rgba(4,5,10,.96)}
 html body header.ui-top.ui-scr{background:rgba(4,5,10,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
 html body header.ui-top:after{left:14px;right:14px}html body header.ui-top:before{left:14px}
 html body .ui-top .brand>span{display:none}
 html body .ui-top .rt{gap:8px}
 html body .ui-top .lang{padding:8px 9px;min-width:40px}
 html body .ui-top :is(.cta,.hcta),html body .ui-top :is(.cta,.hcta).gem{padding:10px 14px!important;font-size:14px!important}
 html body .ui-top :is(.cta,.hcta) .l{display:none}html body .ui-top :is(.cta,.hcta) .s{display:inline}
 html body .ui-top .burger,html body .ui-top .pburger,html body .ui-top .ui-burger{display:block}
 html body .ui-top nav{display:flex!important;position:absolute;top:calc(100% + 8px);left:auto;right:14px;height:auto;min-width:230px;flex-direction:column;align-items:stretch;gap:0;padding:8px;border-radius:16px;
  background:rgba(5,8,14,.97)!important;border:1px solid rgba(243,217,160,.25);opacity:0;transform:translateY(-6px);pointer-events:none}
 html body .ui-top nav.open,html body.pnav .ui-top nav{opacity:1;transform:none;pointer-events:auto}
 html body .ui-top nav a{padding:14px 14px;font-size:12px!important;letter-spacing:.2em!important;border-bottom:1px solid rgba(205,212,226,.08)}
 html body .ui-top nav a:last-of-type{border-bottom:0}
 html body .ui-top nav a[aria-current="true"]:after{left:4px;top:50%;bottom:auto;margin:-2px 0 0}
}
@media(max-width:380px){html body .ui-top .lang{min-width:36px;padding:8px 7px}}
@media(prefers-reduced-motion:reduce){html body header.ui-top:before,html body .ui-top .brand .mark,html body .ui-top :is(.cta,.hcta):after{animation:none!important}html body header.ui-top:before{opacity:0}}

/* ===== единый жест появления «опускание»: сверху вниз, из лёгкой дымки ===== */
html body .reveal,html body .rv,html body .ui-rv{opacity:0;transform:translateY(-14px)!important;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)}
html body .reveal:not(.on),html body .rv:not(.on),html body .ui-rv:not(.on){filter:blur(4px)}
html body .reveal.on,html body .rv.on,html body .ui-rv.on{opacity:1;transform:none!important}
@media(prefers-reduced-motion:reduce){html body .reveal,html body .rv,html body .ui-rv{opacity:1;transform:none!important;filter:none!important;transition:none}}

/* ===== подвал служебных страниц (бриф, флот, журнал) — как у Студии и Звезды ===== */
.ui-foot{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:36px 56px;border-top:1px solid rgba(205,212,226,.14);font:500 13px Mono,ui-monospace,monospace;letter-spacing:.04em;color:#9aa0b4;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:900px){.ui-foot{padding:24px 16px;flex-direction:column;gap:8px}}