/* Спільні стилі підсторінок. Токени ті самі, що в index.html. */
:root{
  --bg:#f3f4f5; --surface:#ffffff; --surface-2:#eceef0;
  --text:#11161a; --muted:#55616a; --faint:#6a757d;
  --line:rgba(17,22,26,.1); --line-strong:rgba(17,22,26,.2);
  --accent:#a8650f; --accent-hi:#d98a1c; --accent-2:#1f5fae;
  --on-accent:#fff; --glow-a:rgba(217,138,28,.22);
  --rust:#a23b22; --rust-wash:rgba(162,59,34,.08);
  --info-wash:rgba(31,95,174,.08);
  --radius:22px; --radius-sm:14px;
  --font:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Consolas",monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 1px 2px rgba(17,22,26,.06),0 12px 32px -12px rgba(17,22,26,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0d10; --surface:#12171b; --surface-2:#1a2127;
    --text:#eef1f3; --muted:#9ba6ae; --faint:#8a959d;
    --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.18);
    --accent:#f5b54a; --accent-hi:#ffcb6b; --accent-2:#6fb0ff;
    --on-accent:#14100a; --glow-a:rgba(245,181,74,.2);
    --rust:#ff9b82; --rust-wash:rgba(255,155,130,.09);
    --info-wash:rgba(111,176,255,.09);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box;}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased;}
a{color:var(--accent-2);}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.02em; text-wrap:balance;}
.wrap{max-width:900px; margin:0 auto; padding:0 24px;}

.progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:50;}
.progress i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-hi)); transform-origin:0 50%; transform:scaleX(0);}
.bar{position:sticky; top:0; z-index:40; padding:14px 0; pointer-events:none;}
.bar .wrap{max-width:1180px; display:flex; justify-content:space-between; align-items:center; height:60px; padding:0 10px 0 20px; border-radius:999px; background:var(--surface); background:color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); border:1px solid var(--line); box-shadow:var(--shadow); pointer-events:auto; width:min(1180px,calc(100% - 32px));}
.logo{font-weight:800; letter-spacing:.14em; text-decoration:none; color:var(--text); font-size:.98rem; display:flex; align-items:center; gap:10px;}
.logo-img{width:34px; height:34px; display:block;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-img{filter:invert(1);} }
.bar nav{display:flex; gap:4px; align-items:center;}
.bar nav a{font-size:.9rem; font-weight:500; text-decoration:none; color:var(--muted); padding:9px 14px; border-radius:999px; transition:color .2s, background .2s;}
.bar nav a:hover{color:var(--text); background:var(--surface-2);}
.bar nav a[aria-current]{color:var(--on-accent); background:linear-gradient(135deg,var(--accent),var(--accent-hi));}
@media (max-width:640px){ .bar nav a.opt{display:none;} .bar nav a{padding:8px 10px; font-size:.82rem;} .bar .wrap{padding-left:14px;} .logo{letter-spacing:.06em; font-size:.88rem;} }

.head{padding:70px 0 40px; position:relative; overflow:hidden; isolation:isolate;}
.head::before{content:""; position:absolute; z-index:-1; width:520px; height:520px; right:-160px; top:-220px; border-radius:50%; background:var(--glow-a); filter:blur(90px);}
.crumb{font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);}
.head h1{font-size:clamp(2.6rem,8vw,5rem); font-weight:800; line-height:1; margin-top:16px; letter-spacing:-.035em; overflow:hidden; padding-bottom:.1em;}
.head h1 span{display:block; transform:translateY(105%); animation:up 1s var(--ease) forwards;}
@keyframes up{to{transform:none;}}
.lede{font-size:1.18rem; color:var(--muted); max-width:60ch; margin:22px 0 0;}

main{padding:10px 0 90px;}
h2{font-size:1.6rem; margin:64px 0 16px; position:relative; padding-bottom:14px;}
h2::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:56px; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-hi)); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease);}
h2.in::after{transform:scaleX(1);}
p{max-width:66ch; color:var(--muted);}
p strong{color:var(--text);}
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.rv.in{opacity:1; transform:none;}

.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); margin:20px 0; background:var(--surface); box-shadow:var(--shadow);}
table{width:100%; border-collapse:collapse; font-size:.94rem; min-width:520px;}
th{text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:14px 18px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2);}
td{padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted);}
td:first-child{color:var(--text);}
tr:last-child td{border-bottom:0;}
tbody tr{transition:background .2s;} tbody tr:hover{background:var(--surface-2);}
td.code{font-family:var(--mono); font-weight:500; white-space:nowrap; color:var(--text);}

.lookup{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--line); display:grid; gap:1px; margin:20px 0; box-shadow:var(--shadow);}
.lookup div{background:var(--surface); padding:16px 20px; display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; transition:background .2s;}
.lookup div:hover{background:var(--surface-2);}
.lookup div > span:first-child{color:var(--text);}
.lookup .a{color:var(--accent); font-family:var(--mono);}
.lookup .r{font-family:var(--mono); font-size:.86rem; color:var(--accent-2); text-align:right;}
@media (max-width:640px){ .lookup div{grid-template-columns:1fr; gap:4px;} .lookup .a{display:none;} .lookup .r{text-align:left;} }

.callout,.note{border-radius:var(--radius); border:1px solid color-mix(in srgb, var(--rust) 35%, transparent); background:var(--rust-wash); padding:22px 26px; margin:28px 0; position:relative;}
.callout::before{content:"ВАЖЛИВО"; display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--rust); margin-bottom:8px;}
.note{border-color:color-mix(in srgb, var(--accent-2) 35%, transparent); background:var(--info-wash);}
.note::before{content:"ДОВІДКОВО"; display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--accent-2); margin-bottom:8px;}
.callout p,.note p{margin:0; max-width:none; color:var(--text);}

.layers{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); margin:22px 0; box-shadow:var(--shadow);}
.layer{display:grid; grid-template-columns:1fr auto; gap:12px 18px; padding:18px 22px; border-bottom:1px dashed var(--line-strong);}
.layer:last-child{border-bottom:0;}
.layer small{display:block; color:var(--faint); font-size:.84rem;}
.layer .t{font-family:var(--mono); color:var(--accent-2); text-align:right; max-width:12em; overflow-wrap:anywhere;}
.layer.s{background:linear-gradient(90deg,rgba(80,100,125,.16),transparent);}
.layer.b{background:linear-gradient(90deg,rgba(245,181,74,.16),transparent);}
.layer.g{background:linear-gradient(90deg,var(--surface-2),transparent);}

.cta{margin-top:80px; border-radius:28px; background:#0d1114; color:#eef1f3; padding:48px 40px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08);}
.cta::before{content:""; position:absolute; width:420px; height:420px; right:-120px; top:-180px; border-radius:50%; background:radial-gradient(circle,rgba(245,181,74,.25),transparent 70%);}
.cta h2{margin:0 0 10px; padding:0; color:#eef1f3; position:relative;}
.cta h2::after{display:none;}
.cta p{color:#a9b3ba; position:relative;}
.btn{display:inline-flex; align-items:center; margin-top:18px; font-weight:600; padding:15px 28px; border-radius:999px; text-decoration:none; background:linear-gradient(135deg,#f5b54a,#ffcb6b); color:#14100a; transition:transform .25s var(--ease), box-shadow .25s; box-shadow:0 8px 24px -10px #f5b54a; position:relative;}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px #f5b54a;}
.disclaimer{font-size:.9rem; color:var(--faint);}
footer{border-top:1px solid var(--line); padding:28px 0 46px; font-size:.84rem; color:var(--faint);}
footer .wrap{max-width:1180px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
footer a{color:var(--muted);} footer a:hover{color:var(--accent);}

@media (max-width:640px){ .cta{padding:34px 24px;} .head{padding-top:40px;} }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important;}
  .rv{opacity:1; transform:none;}
  .head h1 span{transform:none;}
}