/* HYDRA DOCS. Палітра, шрифт і шапка — як у hydraboard і LINK (свідомо лише темна тема, як і сам HYDRA). Макет: головна — зміст, згрупований за вкладками HYDRA; стаття — бічне меню | текст | «On this page». */ :root{ color-scheme:dark; --page:#141416;--panel:#1d1e21;--raised:#23252a;--field:#282a2f;--line:#33353b;--row-line:#292b30; --text:#f2f3f5;--muted:#a3a8b1;--faint:#7d838e; --accent:#dd0031;--accent-ink:#f0a0b5;--accent-wash:#342129;--accent-deep:#24171c; --gold:#e8c35a;--amber:#ef7a3c;--ok:#9fd8b4; --app-cell:#505052;--app-cell-dark:#18181a; --font-ui:"Microsoft New Tai Lue","Segoe UI",Arial,sans-serif; --font-mono:"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace; --gutter-l:max(16px,env(safe-area-inset-left,0px));--gutter-r:max(16px,env(safe-area-inset-right,0px)); font-family:var(--font-ui);font-size:15px;line-height:1.6;background:var(--page);color:var(--text); -webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none } *{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;background:var(--page);color:var(--text);font-family:var(--font-ui);font-size:15px;line-height:1.6} a{color:var(--accent-ink);text-underline-offset:3px;text-decoration-thickness:1px} a:hover{color:#ffc4d2} :focus-visible{outline:2px solid #e84b70;outline-offset:3px;border-radius:4px} img{max-width:100%;height:auto;display:block} h1,h2,h3{text-wrap:balance;margin:0;font-weight:600} h1{font-size:34px;line-height:1.15;letter-spacing:-.7px} h2{font-size:22px;line-height:1.3;letter-spacing:-.3px} h3{font-size:16px;line-height:1.4} p{margin:0} code,kbd,.mono{font-family:var(--font-mono);font-size:.86em} code{background:var(--field);border-radius:4px;padding:1px 5px;color:#e6e8ec} kbd{display:inline-block;min-width:1.9em;padding:1px 6px;border:1px solid #4a4e57;border-bottom-width:2px;border-radius:5px;background:var(--raised);color:var(--text);text-align:center;line-height:1.5;white-space:nowrap} .muted{color:var(--muted)} .eyebrow{color:var(--muted);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} html{scroll-behavior:smooth;scroll-padding-top:24px} /* Відступи контейнера — як у LINK і hydraboard: 24 px, 40 px на широкому екрані, 16 px на телефоні. */ .shell{width:100%;max-width:1360px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))} @media (min-width:1100px){.shell{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}} @media (max-width:480px){.shell{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}} /* Шапка — копія LINK і hydraboard: стоїть усередині контейнера, тому лінія під нею не йде на всю ширину сторінки. Логотип: висота великих літер HYDRA рівно 16 px (cap 0.7003 em шрифту Microsoft New Tai Lue), DOCS має той самий трекінг 2.8 px, що й чотирилітерне LINK; зсув top компенсує округлення базових ліній (підібрано в LINK за знімками Edge). */ .site-header{display:flex;align-items:center;gap:20px;min-height:78px;border-bottom:1px solid var(--line)} .brand{display:inline-flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;flex-shrink:0} .brand:hover{color:var(--text)} .brand img{display:block;width:34px;height:34px;object-fit:contain} .brand-name{display:flex;flex-direction:column;align-items:flex-start;font-size:22.85px;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:.2px;position:relative;top:.65px} .brand-subtitle{display:block;padding-inline-start:1px;color:var(--accent);font-size:9px;font-weight:700;letter-spacing:2.8px;line-height:1} @supports(text-box-trim:trim-both){.brand-name{top:.15px;gap:5px}.brand-title,.brand-subtitle{text-box-trim:trim-both;text-box-edge:cap alphabetic}} .site-nav{display:flex;align-items:center;gap:4px;min-width:0} .site-nav a{color:var(--muted);text-decoration:none;font-size:13px;padding:8px 10px;border-radius:7px;white-space:nowrap} .site-nav a:hover{color:var(--text);background:var(--panel)} .site-nav a[aria-current=page]{color:var(--text)} .site-nav .ext::after{content:"↗";margin-left:4px;font-size:11px;color:var(--faint)} .header-tools{margin-left:auto;display:flex;align-items:center;gap:10px} .lang{display:flex;align-items:center;gap:8px} .lang select{font:inherit;font-size:13px;color:var(--text);background:var(--field);border:1px solid transparent;border-radius:7px;min-height:38px;padding:6px 10px} .lang select:hover{border-color:#494d57} .menu-toggle{display:none;font:inherit;font-size:13px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:7px;min-height:38px;padding:6px 12px;cursor:pointer} @media (max-width:720px){.site-nav{display:none}.site-header{gap:12px}} @media (max-width:480px){.site-header{min-height:74px}} /* Підказка-тост для заглушок і перемикача мови. */ .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#2b2d33;border:1px solid #454951;color:var(--text);font-size:13px;padding:10px 14px;border-radius:8px;box-shadow:0 10px 26px #0008;transition:opacity .18s,transform .18s;z-index:40;max-width:calc(100vw - 32px)} .toast.show{opacity:1;transform:translate(-50%,0)} /* ---------- Головна ---------- */ .home main{padding-block:44px 56px} .intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:end;padding-bottom:36px;border-bottom:1px solid var(--line)} .intro h1{margin-top:10px} .intro .lead{margin-top:14px;color:#d3d6dc;font-size:16.5px;max-width:58ch} .search{display:flex;flex-direction:column;gap:8px;min-width:0} .search label{font-size:12px;color:var(--muted)} .search-box{position:relative} .search-box input{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--field);border:1px solid #3c3f46;border-radius:9px;min-height:52px;padding:12px 16px 12px 44px} .search-box input::placeholder{color:#8a909b} .search-box input:focus{outline:none;border-color:#854052;box-shadow:0 0 0 3px #dd003126} .search-box svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2} .search-hint{font-size:12px;color:var(--faint);min-height:1.6em} .search-hint strong{color:var(--text);font-weight:600} .block{padding-top:40px} .block-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap} .block-head p{color:var(--muted);font-size:13px} .start-link{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:11px 16px;border:1px solid #5a2a37;border-radius:9px;background:var(--accent-deep);color:var(--text);text-decoration:none;font-size:14px} .start-link b{font-weight:700;letter-spacing:.5px} .start-link span{color:var(--accent-ink)} .start-link:hover{background:var(--accent-wash);color:#fff} .start-link.soon{background:transparent;border-color:var(--line);color:var(--muted);cursor:default} .start-link.soon b{color:#8f95a0} /* Зміст: 5 груп рядками — назва групи ліворуч, сторінки сіткою праворуч у порядку SCAN → налаштування → тест. Назви сторінок — капсом, як кнопки й вкладки HYDRA. */ .contents{display:flex;flex-direction:column} .group{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 32px;padding:22px 0 20px;border-top:1px solid var(--line);min-width:0} .group-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:6px} .group-head h3{font-size:18px} .scope{font-size:11px;color:var(--muted);line-height:1.5;font-variant-numeric:tabular-nums} .pages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 20px} .pages .pg{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:2px;padding:9px 10px;margin:0 -10px;border-radius:7px;color:var(--text);text-decoration:none;height:100%} .pages .t{font-size:13.5px;font-weight:600;letter-spacing:.5px;display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap} .pages .d{font-size:12.5px;color:var(--muted);line-height:1.45} /* Стан сторінки: Ready — написана й відкривається (зелена крапка, світла картка); Coming soon — лише назва, приглушено. */ .pages .pg.ready{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)} .pages .pg.ready:hover{background:var(--raised);box-shadow:inset 0 0 0 1px #4a4e57} .pages .pg.ready .t{color:#fff} .pages .pg.ready .t::before,.key-ready::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0} /* Крапка по центру великих літер, а не рядка: низ крапки стає на базову лінію (baseline-вирівнювання), потім піднімається до половини висоти великих літер (0.35 em = cap 0.7 em / 2) мінус половина крапки. */ .pages .pg.ready .t::before{align-self:baseline;transform:translateY(calc(3.5px - .35em))} .pages .pg.soon{cursor:default} .pages .pg.soon .t{color:#6f7580} .pages .pg.soon .d{color:#5b6069} .pages .pg.soon .vendor{color:#50545c} .soon-tag{font-size:10px;font-weight:500;letter-spacing:.3px;color:#8a909b;border:1px solid #3a3d44;border-radius:20px;padding:0 7px;line-height:1.7;white-space:nowrap} .status-legend{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)} .key-ready{display:inline-flex;align-items:center;gap:7px;color:var(--text)} #contents-count{font-variant-numeric:tabular-nums} .vendor{font-size:10.5px;font-weight:500;letter-spacing:.2px;color:var(--faint);white-space:nowrap} .tab{font-family:var(--font-mono);font-size:11px;letter-spacing:.4px;color:#dfe2e7;background:var(--field);border:1px solid #3a3d44;border-radius:4px;padding:0 5px;line-height:1.6} .group[hidden],.pages li[hidden]{display:none} .no-results{padding:28px 0;border-top:1px solid var(--line);color:var(--muted)} /* Підвал — як у LINK: усередині контейнера, лінія лише на ширину вмісту. */ .site-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--muted);font-size:11px} .site-footer nav{display:flex;gap:18px;flex-wrap:wrap} .site-footer a{color:var(--muted);text-decoration:none} .site-footer a:hover{color:var(--text)} @media (max-width:1100px){.pages{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:860px){.group{grid-template-columns:minmax(0,1fr)}.group-head{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding-top:0}} @media (max-width:760px){.intro{grid-template-columns:minmax(0,1fr);gap:26px}.home main{padding-top:30px}h1{font-size:29px}} @media (max-width:600px){.pages{grid-template-columns:minmax(0,1fr)}} /* ---------- Стаття ---------- */ .doc-layout{display:grid;grid-template-columns:236px minmax(0,1fr) 180px;gap:40px;align-items:start;padding-block:34px 64px} /* Скріншот на весь екран по кліку: колонка статті вужча за вікно редактора (1281 px). */ .zoomable{cursor:zoom-in} .lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.88);display:grid;place-items:center;padding-block:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-bottom,0px));padding-left:var(--gutter-l);padding-right:var(--gutter-r);cursor:zoom-out} .lightbox img{width:auto;max-width:min(1281px,100%);max-height:100%;border-radius:6px;box-shadow:0 20px 60px #000} .sidebar,.toc{position:sticky;top:calc(24px + env(safe-area-inset-top,0px));max-height:calc(100vh - 48px);overflow:auto;scrollbar-width:thin;scrollbar-color:#4a4e57 transparent;min-width:0} /* Бічне меню — зменшена копія змісту головної: та сама назва групи з підписом заліза, ті самі назви сторінок капсом і позначки виробника; усі групи розгорнуті й розділені лінією, як рядки змісту. */ .side-group{padding:14px 0 12px;border-top:1px solid var(--line)} .side-group:first-child{border-top:0;padding-top:2px} .side-head{display:flex;flex-direction:column;gap:2px;margin-bottom:7px} .side-head b{font-size:14px;font-weight:600;color:var(--text)} .side-head span{font-size:11px;color:var(--faint);line-height:1.45} .sidebar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px} .sidebar a{display:block;padding:4px 10px;margin:0 -10px;border-radius:6px;color:var(--muted);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.4px;line-height:1.45} .sidebar a .vendor{margin-left:4px;font-size:10px} .sidebar a:hover{color:var(--text);background:var(--panel)} .sidebar a[aria-current=page]{color:#fff;background:var(--accent-wash);box-shadow:inset 2px 0 0 var(--accent)} .sidebar a[aria-current=page] .vendor{color:#c9a3ad} /* Той самий поділ, що на головній: написані — зелена крапка, ще не написані — приглушені й не клікаються. */ .sidebar a.ready::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:calc(.35em - 3px)} .sidebar .soon{display:block;padding:4px 10px;margin:0 -10px;color:#5d626b;font-size:12px;font-weight:600;letter-spacing:.4px;line-height:1.45;cursor:default} .sidebar .soon .vendor{margin-left:4px;font-size:10px;color:#4b4f57} .toc h4{margin:0 0 10px;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);font-weight:600} .toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)} .toc a{display:block;padding:4px 0 4px 12px;margin-left:-1px;border-left:1px solid transparent;color:var(--muted);text-decoration:none;font-size:12.5px;line-height:1.45} .toc a:hover{color:var(--text)} .toc a.active{color:var(--text);border-left-color:var(--accent)} .article{min-width:0} .crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--faint);margin-bottom:14px} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--text)} .crumbs span[aria-hidden]{color:#565b64} .article h1{font-size:34px;letter-spacing:.3px} .article .lead{margin-top:14px;font-size:17px;color:#d6d9de;max-width:66ch} .facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)} .facts b{color:var(--text);font-weight:500} .article section{padding-top:46px} .article section>h2{padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--line)} .article h3{margin:26px 0 8px} .prose>p,.prose>ul,.prose>ol{max-width:68ch} .prose>*+*{margin-top:14px} .prose ul,.prose ol{padding-left:22px} .prose li+li{margin-top:6px} .prose li::marker{color:var(--faint)} .prose strong{font-weight:600;color:#fff} /* Скріншот із нумерованими мітками: номери — це посилання на легенду під ним. */ .shot{margin:18px 0 0;border:1px solid var(--line);border-radius:10px;background:#1a1a1a;overflow:hidden} .shot-frame{position:relative} .hotspot{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:var(--accent);color:#fff;font:700 11px/1 var(--font-ui);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 2px 8px #000a;transition:transform .12s,background .12s} .hotspot:hover,.hotspot.on{transform:translate(-50%,-50%) scale(1.22);background:#ff1f4e} .shot figcaption{padding:10px 14px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--panel)} .legend{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px;counter-reset:none} .legend li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:8px 8px;margin:0 -8px;border-radius:7px;font-size:13.5px;line-height:1.5;color:#d3d6dc;transition:background .12s} .legend li.on{background:var(--accent-deep)} .legend .n{width:22px;height:22px;border-radius:50%;background:var(--field);border:1px solid #4a4e57;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px} .legend li.on .n{background:var(--accent);border-color:var(--accent)} .legend b{color:#fff;font-weight:600} @media (max-width:640px){.hotspot{width:19px;height:19px;font-size:9.5px;border-width:1.5px}.legend{grid-template-columns:minmax(0,1fr)}} /* Пояснення-абзац із міткою; без бокової смуги. */ .callout{margin-top:18px;padding:14px 16px;border-radius:9px;background:var(--panel);border:1px solid var(--line);font-size:14px;max-width:72ch} .callout .label{display:block;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;margin-bottom:4px} .callout.note .label{color:#9fc3ff}.callout.tip .label{color:var(--ok)}.callout.caution{background:#26191c;border-color:#4a2a31}.callout.caution .label{color:#ff8ca8} /* Довідкові таблиці (кнопки, жести, причини). */ .table-wrap{margin-top:16px;overflow-x:auto;border:1px solid var(--line);border-radius:10px} .ref{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px} .ref th{text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);font-weight:600;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)} .ref td{padding:11px 14px;border-top:1px solid var(--row-line);vertical-align:top;color:#d3d6dc;line-height:1.5} .ref tr:first-child td{border-top:0} .ref td:first-child{white-space:nowrap;color:var(--text);font-weight:500} .ref .ico{display:flex;align-items:center;gap:10px} .ref .ico img{width:28px;height:28px;flex-shrink:0;background:#2a2a2c;border-radius:6px;padding:2px} .ref td.keys{white-space:nowrap} .reason{font-family:var(--font-mono);font-size:12px;letter-spacing:.3px;color:#fff;font-weight:600} .reason.v{color:var(--amber)} /* Копія таблиці кривої в кольорах редактора HYDRA. */ .curve-table-wrap{margin-top:16px;overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#202022} .curve-table{border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap} .curve-table th,.curve-table td{padding:6px 9px;text-align:center;border-right:1px solid #2a2a2c} .curve-table th{position:sticky;left:0;z-index:1;text-align:left;font-weight:500;min-width:148px;padding-left:12px} .curve-table tr.v th,.curve-table tr.v td,.curve-table tr.f th,.curve-table tr.f td{background:var(--app-cell);color:#f4f4f4} .curve-table tr.d th,.curve-table tr.d td{background:var(--app-cell-dark);color:#fff;font-weight:700} .curve-table td.flat{box-shadow:inset 0 -2px 0 var(--gold)} .curve-table tr.f td.flat{color:var(--gold);box-shadow:none} .curve-note{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--muted)} .curve-note i{display:inline-block;width:14px;height:3px;background:var(--gold);vertical-align:middle;margin-right:6px;border-radius:2px} /* Режими: вкладки над скріншотом, як список режимів у самому редакторі. */ .modes{margin-top:18px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)} .mode-tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin} .mode-tabs button{font:inherit;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.3px;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:6px;padding:7px 11px;white-space:nowrap;cursor:pointer;min-height:36px} .mode-tabs button:hover{color:var(--text);background:var(--field)} .mode-tabs button[aria-selected=true]{color:#fff;background:var(--field);border-color:#454951} .mode-panel img{width:100%;border-bottom:1px solid var(--line);background:#1a1a1a} .mode-panel .cap{padding:14px 16px;font-size:13.5px;color:#d3d6dc;display:grid;gap:6px} .mode-panel .cap b{color:#fff;font-weight:600} .modes-list{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden} .modes-list div{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:16px;padding:11px 14px;border-top:1px solid var(--row-line);font-size:13.5px;line-height:1.5} .modes-list div:first-child{border-top:0} .modes-list dt{font-family:var(--font-mono);font-size:12px;color:#fff;padding-top:2px} .modes-list dd{margin:0;color:#d3d6dc} @media (max-width:560px){.modes-list div{grid-template-columns:minmax(0,1fr);gap:4px}} /* Знімок панелі V/F STATS і LIMITED BY, як у редакторі. */ .panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px} .app-panel{background:#262626;border:1px solid #3a3a3a;border-radius:8px;padding:14px 16px;font-size:12.5px;line-height:1.45;color:#cfcfcf;min-width:0} .app-panel .ttl{font-weight:700;letter-spacing:.3px;margin-bottom:6px} .app-panel .ttl.gold{color:var(--gold)}.app-panel .ttl.amber{color:var(--amber)} .app-panel .cap{color:#8f8f8f;margin-top:8px;font-size:11.5px;letter-spacing:.3px} .app-panel .val{color:#fff} .app-panel .bar{display:flex;justify-content:space-between;color:#fff;font-weight:600;padding-bottom:4px;border-bottom:3px solid var(--amber)} @media (max-width:560px){.panels{grid-template-columns:minmax(0,1fr)}} .pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:56px} .pager a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;color:var(--text);text-decoration:none} .pager a:hover{border-color:#4a4e57;background:var(--panel)} .pager a span{font-size:12px;color:var(--muted)} .pager a.next{text-align:right} .feedback{margin-top:22px;font-size:13px;color:var(--muted)} @media (max-width:1180px){.doc-layout{grid-template-columns:236px minmax(0,1fr);gap:36px}.toc{display:none}} @media (max-width:880px){ .doc-layout{grid-template-columns:minmax(0,1fr);gap:0;padding-top:16px} .menu-toggle{display:inline-flex} .sidebar{position:static;max-height:none;overflow:visible;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:22px} .sidebar:not(.open) nav{display:none} .article h1{font-size:31px} } /* Позиції міток на скріншоті Curve Editor (1281×768) — тут, а не в style="", бо CSP сайту забороняє inline-стилі. */ #annotated .hotspot[data-spot="1"]{left:32.6%;top:3.3%} #annotated .hotspot[data-spot="2"]{left:82.1%;top:3.3%} #annotated .hotspot[data-spot="3"]{left:8.4%;top:11.2%} #annotated .hotspot[data-spot="4"]{left:85.6%;top:10.9%} #annotated .hotspot[data-spot="5"]{left:70.6%;top:14.1%} #annotated .hotspot[data-spot="6"]{left:52.1%;top:25.5%} #annotated .hotspot[data-spot="7"]{left:15.4%;top:34.9%} #annotated .hotspot[data-spot="8"]{left:85.6%;top:23.7%} #annotated .hotspot[data-spot="9"]{left:85.6%;top:48.3%} #annotated .hotspot[data-spot="10"]{left:1.6%;top:79%} #annotated .hotspot[data-spot="11"]{left:26.9%;top:96.4%} .para{max-width:68ch} .spaced{margin-top:16px} /* Список мови — той самий listbox, що в LINK і hydraboard (assets/dropdown.js): власна стрілка з відступом від краю замість системної стрілки