/* Подробные каталоги: типографика и цвет выставки, обычная читаемая прокрутка. */
.ex-menu-line { display:flex; align-items:center; flex-wrap:wrap; gap:0 2em; position:relative; z-index:12; }
.ref-links { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ref-links a { display:flex; align-items:center; gap:.7em; border:1px solid #bec9e225; border-radius:5px; padding:.55em .8em; color:#aebacd; font-size:clamp(11px,.76vw,24px); line-height:1.4; transition:color .18s,border-color .18s,background .18s; }
.ref-links__number { font:400 .85em var(--font-mono,monospace); color:#d3bb8f88; }
.ref-links a:hover,.ref-links a[aria-current="page"] { color:#f0dcb6; border-color:#d3bb8f77; background:#d3bb8f0b; text-decoration:none; }
.ref-page { --ref-accent:#d8bd8b; --su:clamp(10px,1vw,27px); height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; background:#080d17; color:#edf0f7; font-size:clamp(14px,1vw,27px); isolation:isolate; }
.ref-page[data-topic="context"],.ref-page[data-topic="psychology"] { --ref-accent:#bcb4e7; }
.ref-page[data-topic="channels"],.ref-page[data-topic="usecases"] { --ref-accent:#93cfbf; }
.ref-page button,.ref-page input { font:inherit; }
.ref-page button { cursor:pointer; }
.ref-page :focus-visible,.ref-links a:focus-visible { outline:2px solid var(--ref-accent,#d8bd8b); outline-offset:4px; }
.ref-page h1:focus { outline:none; box-shadow:none; }
.ref-header { display:flex; align-items:center; gap:clamp(20px,3vw,100px); padding:clamp(12px,1.2vw,34px) clamp(20px,4vw,150px); border-bottom:1px solid #bec9e218; background:#0a101b; z-index:5; }
.ref-home { color:#e9ebf2; }
.ref-home:hover { text-decoration:none; }
.ref-home .ex-brand { font-size:clamp(16px,1.25vw,36px); }
.ref-back { color:#b4c0d2; display:flex; gap:.6em; align-items:center; font-size:.85em; }
.ref-back span { color:var(--ref-accent); font-size:1.3em; }
.ref-tools { display:flex; align-items:center; gap:1em; margin-left:auto; }
.ref-scroll { overflow:auto; overscroll-behavior:contain; scrollbar-color:#39475e #0b1120; scrollbar-width:thin; background:radial-gradient(ellipse 60vw 35vw at 90% 0,#6b668916,transparent 90%); }
.ref-wrap { width:min(100%,3000px); margin-inline:auto; padding:clamp(20px,2.2vw,70px) clamp(20px,4vw,150px) clamp(32px,4vw,130px); }
.ref-page .ref-links { gap:.5em; }
.ref-page .ref-links a { font-size:.8em; padding:.65em 1em; }
.ref-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,.4fr); align-items:center; gap:3vw; padding:clamp(28px,3.5vw,100px) 0 clamp(22px,2.8vw,80px); }
.ref-eyebrow { display:flex; align-items:center; gap:.7em; color:var(--ref-accent); text-transform:uppercase; font:400 .72em/1.6 var(--font-mono,monospace); letter-spacing:.12em; margin-bottom:1.5em; }
.ref-eyebrow>span { width:5px; height:5px; flex-shrink:0; background:var(--ref-accent); border-radius:50%; box-shadow:0 0 12px var(--ref-accent); }
.ref-hero h1 { font-size:clamp(32px,3.45vw,96px); line-height:1.06; font-weight:400; letter-spacing:-.045em; max-width:19ch; text-wrap:balance; }
.ref-summary { color:#afbdce; max-width:66ch; line-height:1.65; margin-top:1.2em; font-size:1.04em; }
.ref-orb { position:relative; width:100%; color:var(--ref-accent); aspect-ratio:320/250; }
.ref-orb svg { width:100%; height:100%; }
.ref-orb svg g:first-of-type { opacity:.32; stroke-width:.7; }
.ref-orb>div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ref-orb strong { font:300 clamp(56px,6vw,160px)/1 var(--font); letter-spacing:-.065em; }
.ref-orb span { color:#a8b6c9; font-size:.7em; letter-spacing:.07em; margin-top:1em; }
.ref-principle { display:flex; align-items:baseline; gap:2em; padding:1.1em 1.3em; border:1px solid #bdc8e022; border-left:2px solid var(--ref-accent); border-radius:0 6px 6px 0; background:#b9c5df04; }
.ref-principle>span { color:var(--ref-accent); flex-shrink:0; font:400 .65em/1.6 var(--font-mono,monospace); letter-spacing:.08em; text-transform:uppercase; }
.ref-principle p { color:#b9c5d6; font-size:.86em; line-height:1.6; }
.ref-toolbar { display:flex; align-items:center; gap:1.4em; padding:1.3em 0; position:sticky; top:0; z-index:4; background:#080d17f5; border-bottom:1px solid #bec9e220; backdrop-filter:blur(16px); }
.ref-search { display:flex; align-items:center; gap:.7em; border:1px solid #b9c5df35; border-radius:6px; background:#111a28; padding:.7em 1em; flex:1; max-width:700px; min-width:0; }
.ref-search>span:first-child { font-size:1.5em; line-height:.5; color:var(--ref-accent); }
.ref-search input { background:none; color:#edf0f7; border:none; padding:0; width:100%; min-width:0; outline:none; font-size:.9em; }
.ref-search:focus-within { outline:1px solid var(--ref-accent); outline-offset:2px; }
.ref-search input:focus-visible { outline:none; }
.ref-search input::placeholder { color:#8999b0; }
.ref-found { color:#a0aec4; font:400 .75em var(--font-mono,monospace); white-space:nowrap; }
.ref-reset { background:none; border:0; color:var(--ref-accent); font-size:.78em!important; padding:.5em; margin-left:auto; }
.ref-reset:disabled { opacity:.36; cursor:default; }
.ref-browser { display:grid; grid-template-columns:clamp(220px,20vw,500px) minmax(0,1fr); gap:clamp(24px,3vw,90px); align-items:start; padding-top:1.8em; }
.ref-groups { display:flex; flex-direction:column; gap:3px; position:sticky; top:6em; max-height:calc(100dvh - 21em); overflow:auto; scrollbar-width:thin; scrollbar-color:#39475e transparent; padding:4px 8px 4px 4px; }
.ref-groups button { display:flex; gap:1em; align-items:baseline; justify-content:space-between; border:1px solid transparent; border-radius:4px; background:none; color:#9daec5; padding:.65em .75em; text-align:left; font-size:.8em; line-height:1.5; }
.ref-groups button b { color:#6f829d; font:400 .8em var(--font-mono,monospace); flex-shrink:0; }
.ref-groups button:hover { color:#e1e7f0; background:#b9c5df05; }
.ref-groups button[aria-pressed="true"] { border-color:#c5cceb25; background:#b8c7e60c; color:var(--ref-accent); }
.ref-section { margin-bottom:2.5em; }
.ref-section__heading { display:flex; align-items:baseline; gap:1em; margin:0 0 1em; }
.ref-section__heading>span { color:var(--ref-accent); font:400 .7em var(--font-mono,monospace); }
.ref-section__heading h2 { font-size:1.12em; line-height:1.5; font-weight:500; color:#dbe2ed; }
.ref-section__heading>b { color:#7386a2; font:400 .7em var(--font-mono,monospace); margin-left:auto; }
.ref-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75em; }
.ref-card { min-width:0; border:1px solid #b1c0de24; border-radius:8px; padding:1.2em; background:linear-gradient(130deg,#1620318c,#0f182640); transition:border-color .2s; }
.ref-card:hover { border-color:#b1c0de55; }
.ref-card__heading { display:flex; align-items:baseline; gap:.8em; }
.ref-card__heading>span { flex-shrink:0; color:var(--ref-accent); opacity:.65; font:400 .64em var(--font-mono,monospace); }
.ref-card h3 { color:#e6eaf2; font-size:.95em; line-height:1.5; font-weight:500; overflow-wrap:anywhere; }
.ref-card__description { font-size:.83em; color:#a9b9cd; line-height:1.7; margin-top:.65em; }
.ref-results[data-comparison="true"] .ref-grid { grid-template-columns:1fr; gap:1.1em; }
.ref-results[data-comparison="true"] .ref-card { padding:0; overflow:hidden; }
.ref-results[data-comparison="true"] .ref-card__heading { padding:1.2em 1.3em; }
.ref-comparison { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #b1c0de20; }
.ref-comparison>div { padding:1.3em; }
.ref-without { background:#bfa5b004; }
.ref-with { background:#8ecdb80b; border-left:1px solid #9bd5c128; }
.ref-comparison h4 { font:400 .64em/1.5 var(--font-mono,monospace); letter-spacing:.08em; text-transform:uppercase; color:#aaa9b8; margin-bottom:1em; }
.ref-with h4 { color:#9dd7c3; display:flex; gap:.8em; align-items:center; }
.ref-comparison p { font-size:.87em; line-height:1.8; color:#aebbd0; }
.ref-with p { color:#c7ded9; }
.ref-empty { text-align:center; padding:5em 1em; border:1px dashed #b1c0de30; border-radius:8px; }
.ref-empty>span { color:var(--ref-accent); font-size:3em; }
.ref-empty h2 { font-size:1.5em; margin:.7em 0; }
.ref-empty p { color:#a9b9cd; }
.ref-empty button,.ref-up { background:none; border:1px solid #b1c0de35; border-radius:4px; color:var(--ref-accent); padding:.7em 1em; margin-top:1.5em; }
.ref-up { display:flex; align-items:center; gap:2em; margin-inline:auto; font-size:.85em!important; }
.ref-footer { display:flex; align-items:center; justify-content:space-between; gap:2em; padding:1em clamp(20px,4vw,150px); border-top:1px solid #b1c0de28; background:#0b111c; }
.ref-footer>div:first-child { min-width:0; }
.ref-footer p:first-child { display:flex; align-items:baseline; flex-wrap:wrap; gap:.4em 1.5em; }
.ref-footer p:first-child span { color:#c8ad82; font:400 .66em/1.6 var(--font-mono,monospace); letter-spacing:.08em; text-transform:uppercase; }
.ref-footer b { font-weight:500; font-size:.85em; }
.ref-footer p+p { color:#a6b5cb; font-size:.77em; line-height:1.6; margin-top:.35em; }
.ref-timer { flex-shrink:0; display:flex; align-items:center; gap:1.2em; }
.ref-timer>span { color:#91a2ba; font:400 .58em/1.5 var(--font-mono,monospace); text-transform:uppercase; letter-spacing:.07em; }
.ref-timer strong { color:#d9be8c; font:300 2.6em/1 var(--font); }
.ref-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (min-width:2000px) { .ref-search { max-width:40%; } }
@media (max-width:1100px) {
  .ex-menu-line { gap:0 1em; }
  .ex-menu-line .ref-links a { padding:.45em .6em; }
  .ref-hero { grid-template-columns:minmax(0,1fr) 210px; }
  .ref-grid { grid-template-columns:1fr; }
  .ref-browser { grid-template-columns:210px minmax(0,1fr); gap:24px; }
  .ref-principle { align-items:start; gap:1em; }
}
@media (max-width:760px) {
  .ex-menu-line { align-items:start; flex-direction:column; padding-bottom:20px; }
  .ex-menu-line .ref-links { max-width:100%; }
  .ex-menu-line .ref-links a { font-size:11px; min-height:34px; }
  .ref-page { font-size:15px; }
  .ref-header { padding:12px 16px; gap:14px; }
  .ref-home .ex-brand { font-size:14px; }
  .ref-home .ex-brand svg { width:22px; }
  .ref-back { font-size:11px; gap:4px; }
  .ref-tools { gap:6px; }
  .ref-tools .locale-switch { transform:none; }
  .ref-wrap { padding:18px 18px 32px; }
  .ref-page .ref-links { gap:5px; }
  .ref-page .ref-links a { font-size:11px; padding:8px; min-height:34px; }
  .ref-hero { display:block; position:relative; padding:28px 0 20px; }
  .ref-hero__copy { position:relative; z-index:1; }
  .ref-eyebrow { font-size:9px; letter-spacing:.07em; padding-right:45px; }
  .ref-hero h1 { font-size:36px; max-width:18ch; padding-right:15px; }
  .ref-summary { font-size:14px; line-height:1.7; }
  .ref-orb { display:none; }
  .ref-principle { display:block; padding:12px 14px; }
  .ref-principle p { margin-top:7px; font-size:12px; }
  .ref-toolbar { gap:10px; flex-wrap:wrap; padding:14px 0; }
  .ref-search { flex-basis:100%; max-width:none; }
  .ref-search input { font-size:16px; }
  .ref-found { font-size:11px; }
  .ref-reset { font-size:11px!important; padding:3px; }
  .ref-browser { display:block; padding-top:12px; }
  .ref-groups { position:static; max-height:146px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin-bottom:24px; padding:3px; border-bottom:1px solid #bec9e220; }
  .ref-groups button { font-size:11px; padding:8px; background:#b8c7e606; }
  .ref-section__heading { gap:10px; }
  .ref-section__heading h2 { font-size:16px; }
  .ref-card { padding:15px; }
  .ref-card h3 { font-size:14px; }
  .ref-card__description { font-size:13px; }
  .ref-comparison { grid-template-columns:1fr; }
  .ref-comparison>div { padding:16px 18px; }
  .ref-with { border-left:0; border-top:1px solid #9bd5c128; }
  .ref-comparison p { font-size:13px; }
  .ref-comparison h4 { font-size:10px; }
  .ref-footer { padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); gap:14px; }
  .ref-footer p:first-child { gap:4px 10px; }
  .ref-footer p:first-child span { font-size:9px; }
  .ref-footer b { font-size:12px; }
  .ref-footer p+p { font-size:11px; line-height:1.5; }
  .ref-timer { gap:0; }
  .ref-timer>span { display:none; }
  .ref-timer strong { font-size:30px; }
}
@media (prefers-reduced-motion:reduce) { .ref-page *, .ref-links a { transition:none!important; } }
html[data-motion="reduced"] .ref-page *,html[data-motion="reduced"] .ref-links a { transition:none!important; }