/* v4.css — сборка web/styles/v4/*.css: tokens, fonts, base, chrome (python tools/build_css.py); руками не править */
:root{
color-scheme:light dark;
--bg:#F5F8FC; --surface:#FFFFFF;
--ink:#0A1620; --txt:#26333F; --mut:#66727F; --head:#0B2A55;
--h1-a:#123A70; --h1-b:#0B2A55; --h1-c:#071D3D;
--ice:#E2F4FC; --sky:#CFE6F7; --blue:#2F6FB5; --wire:#B7CCE2;
--line:rgba(11,42,85,.09); --line-2:rgba(11,42,85,.14);
--tint:rgba(11,42,85,.06); --tint-2:rgba(11,42,85,.10);
--navy:#0B2A55; --navy-2:#163F7A; --on-navy:#FFFFFF; --on-navy-mut:#BCD6F0;
--mark-bg:#0B2A55; --mark-bg-2:#163F7A; --mark-fg:#FFFFFF; --mark-slash:#E5484D;
--glass:rgba(245,248,252,.72);
--glass-card-1:rgba(255,255,255,.90); --glass-card-2:rgba(250,252,255,.78); --glass-edge:rgba(255,255,255,.90);
--contact-bg-1:#FFFFFF; --contact-bg-2:#F7FBFF; --ph-to:#B8D4EE;
--blob-a:#BFDDF5; --blob-b:#E2F4FC; --blob-c:rgba(47,111,181,.34); --blob-d:rgba(11,42,85,.16); --blob-e:rgba(140,192,234,.45);
--sh-card:0 1px 1px rgba(11,42,85,.03),0 2px 4px -1px rgba(11,42,85,.04),0 18px 40px -22px rgba(11,42,85,.18);
--sh-float:0 1px 0 rgba(255,255,255,.9) inset,0 2px 6px -2px rgba(11,42,85,.06),0 30px 80px -30px rgba(11,42,85,.30),0 60px 120px -60px rgba(47,111,181,.30);
--sans:Onest,"Onest Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Cascadia Mono",Consolas,monospace;
--gutter:clamp(20px,4vw,64px); --gap:clamp(14px,1.6vw,24px);
--r-lg:28px; --r-md:20px; --r-sm:12px;
--ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
--bar-h:64px;
}
@media (prefers-color-scheme:dark){
:root{
--bg:#07111E; --surface:#0D1B2E;
--ink:#E6EEF8; --txt:#CBD7E6; --mut:#9FB0C6; --head:#EAF3FC;
--h1-a:#FFFFFF; --h1-b:#EAF3FC; --h1-c:#CFE0F2;
--ice:#12253F; --sky:#0F2A4A; --blue:#6FA8E8; --wire:#2E4A6B;
--line:#22344D; --line-2:#2E4466;
--tint:rgba(230,238,248,.08); --tint-2:rgba(230,238,248,.14);
--navy:#123A70; --navy-2:#1A4A8A;
--mark-bg:#EAF3FC; --mark-bg-2:#F6FAFE; --mark-fg:#0B2A55;
--glass:rgba(7,17,30,.72);
--glass-card-1:rgba(20,38,62,.90); --glass-card-2:rgba(13,27,46,.78); --glass-edge:rgba(255,255,255,.07);
--contact-bg-1:#0D1B2E; --contact-bg-2:#0A1727; --ph-to:#1B3A5E;
--blob-a:rgba(47,111,181,.30); --blob-b:rgba(47,111,181,.16); --blob-c:rgba(47,111,181,.26); --blob-d:rgba(111,168,232,.10); --blob-e:rgba(47,111,181,.22);
--sh-card:0 1px 1px rgba(0,0,0,.30),0 2px 4px -1px rgba(0,0,0,.30),0 18px 40px -22px rgba(0,0,0,.60);
--sh-float:0 1px 0 rgba(255,255,255,.06) inset,0 2px 6px -2px rgba(0,0,0,.40),0 30px 80px -30px rgba(0,0,0,.70),0 60px 120px -60px rgba(47,111,181,.25);
}
}
@font-face{font-family:Onest;font-weight:400 700;font-style:normal;font-display:swap;src:url("../fonts/onest-var.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/jetbrains-mono-600.woff2") format("woff2")}
@font-face{font-family:"Onest Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:103.3%;ascent-override:93.9%;descent-override:29.5%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Consolas"),local("Menlo"),local("Liberation Mono");size-adjust:109.1%;ascent-override:93.5%;descent-override:27.5%;line-gap-override:0%}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);font-synthesis:none;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
p,ul,ol,h1,h2,h3,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
main:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:10px;background:var(--navy);color:var(--on-navy);text-decoration:none;font-weight:500}
.skip:focus{top:12px}
.wrap{padding-inline:var(--gutter)}
@media (min-width:1680px){
body{font-size:18px}
}
@media (max-width:560px){
:root{--bar-h:56px;--r-lg:22px;--r-md:18px}
body{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}
.mark{width:30px;height:30px;flex:none;border-radius:8px;background:linear-gradient(160deg,var(--mark-bg-2),var(--mark-bg));color:var(--mark-fg);
font:700 12.5px/1 var(--sans);letter-spacing:-.04em;display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 1px 0 var(--glass-edge) inset,var(--sh-card)}
.mark b{color:var(--mark-slash);font-weight:700}
.top{position:sticky;top:0;z-index:20;height:var(--bar-h);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s var(--ease);
background:var(--glass);box-shadow:0 1px 0 var(--line),var(--sh-card)}
.top.scrolled::before{opacity:1;-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.top-in{height:100%;display:flex;align-items:center;gap:20px;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:600 16px/1 var(--sans);letter-spacing:-.01em;min-width:0}
.brand-t{display:grid;overflow:hidden;height:20px}
.brand-t > span{grid-area:1/1;line-height:20px;white-space:nowrap;transition:transform .45s var(--ease-out),opacity .3s}
.brand-t .nm2{transform:translateY(100%);opacity:0}
.top.named .brand-t .nm1{transform:translateY(-100%);opacity:0}
.top.named .brand-t .nm2{transform:none;opacity:1}
.nav{margin-left:auto;display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--txt);font:500 14.5px/1 var(--sans);transition:background .2s,color .2s}
.nav a:hover{background:var(--tint);color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;text-decoration:none;
font:600 14.5px/1 var(--sans);white-space:nowrap;cursor:pointer;border:0;position:relative}
.btn::after{content:"";position:absolute;inset:-4px 0}
.btn-navy{color:var(--on-navy);background:linear-gradient(180deg,var(--navy-2),var(--navy));
box-shadow:0 1px 0 var(--glass-edge) inset,0 0 0 1px var(--navy),var(--sh-card),0 0 24px -6px color-mix(in srgb,var(--blue) 50%,transparent);
transition:transform .2s var(--ease),box-shadow .2s}
.btn-navy:hover{transform:translateY(-1px);box-shadow:0 1px 0 var(--glass-edge) inset,0 0 0 1px var(--navy),var(--sh-float),0 0 34px -4px color-mix(in srgb,var(--blue) 60%,transparent)}
.btn-pause{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:50%;cursor:pointer;
color:var(--head);background:var(--tint);transition:background .2s,color .2s}
.btn-pause[hidden]{display:none}
.btn-pause:hover{background:var(--tint-2)}
.btn-pause[aria-pressed="true"]{color:var(--on-navy);background:var(--navy)}
.btn-pause::before{content:"";width:18px;height:18px;background:currentColor;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.2v14H7zM13.8 5H17v14h-3.2z'/%3E%3C/svg%3E");-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.btn-pause[aria-pressed="true"]::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6L19 12z'/%3E%3C/svg%3E")}
.nav + .btn-pause{margin-left:0}
html.paused .intro,html.paused .portrait,html.paused .ph::after{animation:none}
.glass{background:linear-gradient(180deg,var(--glass-card-1),var(--glass-card-2));
border:1px solid var(--glass-edge);box-shadow:0 0 0 1px var(--line),var(--sh-card)}
.invite{font:500 clamp(18px,1.35vw,20px)/1.45 var(--sans);letter-spacing:-.01em;color:var(--ink);max-width:28em;text-wrap:pretty}
.contacts{margin-top:12px}
.contacts li{display:flex;align-items:center;gap:12px;min-height:46px;border-top:1px solid var(--line);position:relative}
.contacts .ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--head);
background:linear-gradient(180deg,var(--surface),var(--ice));box-shadow:0 0 0 1px var(--line),var(--sh-card)}
.contacts .ic svg{width:16px;height:16px}
.contacts a{padding-block:13px;margin-block:-13px;font:500 16.5px/1.3 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;background:linear-gradient(var(--blue),var(--blue)) 0 calc(100% - 13px) / 0 1px no-repeat;transition:background-size .3s var(--ease)}
.contacts a:hover{background-size:100% 1px}
.copy{position:relative;margin-left:auto;display:inline-grid;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:0;cursor:pointer;
font:500 13px/1 var(--sans);color:var(--head);background:var(--tint);transition:background .2s,color .2s}
.copy::after{content:"";position:absolute;inset:-9px -2px}
.copy:hover{background:var(--tint-2)}
.copy[hidden]{display:none}
.copy > span{grid-area:1/1;transition:opacity .2s,transform .3s var(--ease-out)}
.copy .cb{opacity:0;transform:translateY(6px)}
.copy[data-copied],.copy[data-fail]{background:var(--navy);color:var(--on-navy)}
.copy[data-copied] .ca,.copy[data-fail] .ca{opacity:0;transform:translateY(-6px)}
.copy[data-copied] .cb,.copy[data-fail] .cb{opacity:1;transform:none}
.foot{margin-top:clamp(64px,7vw,110px);border-top:1px solid var(--line);padding-block:28px calc(28px + env(safe-area-inset-bottom))}
.foot-in{display:flex;align-items:center;gap:14px 32px;flex-wrap:wrap;font:400 14.5px/1.5 var(--sans);color:var(--mut)}
.foot-id{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:600}
.clock time{font-family:var(--mono);font-size:13.5px;color:var(--txt);font-variant-numeric:tabular-nums}
.foot-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 24px}
.foot-links a{display:inline-block;padding-block:2px;color:var(--txt);text-decoration:none}
.foot-links a:hover{color:var(--head);text-decoration:underline;text-underline-offset:.25em}
.foot-priv{display:inline-block;padding-block:2px;color:var(--txt);text-decoration:none}
.foot-priv:hover{color:var(--head);text-decoration:underline;text-underline-offset:.25em}
.foot:has([data-assistant]){padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.as-fab{position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 16px;border:0;border-radius:999px;cursor:pointer;
font:600 15px/1 var(--sans);color:var(--on-navy);background:linear-gradient(180deg,var(--navy-2),var(--navy)) var(--navy);
box-shadow:0 1px 0 var(--glass-edge) inset,0 0 0 1px var(--navy),var(--sh-float);transition:transform .2s var(--ease),opacity .2s}
.as-fab::before{content:"";flex:none;width:22px;height:22px;background:currentColor;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6a.5.5 0 0 1-.8-.4V16.2A2.5 2.5 0 0 1 4 13.5zM8.5 8.5h7M8.5 11.5h4'/%3E%3C/svg%3E");-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.as-fab:hover{transform:translateY(-2px)}
.as-fab[aria-expanded="true"]{visibility:hidden}
.as-fab.is-dodge:not(:focus-visible){opacity:0;pointer-events:none}
@media (max-width:900px){
.nav a:not([href="#contact"]){display:none}
.nav a[href="#contact"]{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;font-weight:600;color:var(--on-navy);
background:linear-gradient(180deg,var(--navy-2),var(--navy)) var(--navy);box-shadow:0 1px 0 var(--glass-edge) inset,0 0 0 1px var(--navy),var(--sh-card)}
.nav a[href="#contact"]:hover{color:var(--on-navy);background:var(--navy-2)}
}
@media (max-width:560px){
.as-fab{height:48px;padding:0 18px 0 14px}
.btn{height:36px;padding:0 14px;font-size:14px}
.invite{font-size:17px}
.contacts li{gap:10px;min-height:44px;flex-wrap:wrap;padding-block:4px}
.contacts a{font-size:16px;flex-shrink:0}
.copy{padding:0 10px;font-size:12.5px;height:28px;margin-left:auto}
.foot-links{margin-left:0;flex-direction:column;gap:6px}
}
@media (forced-colors:active){.mark,.card,.tl-item,.reach{border:1px solid CanvasText}}