/* Self-hosted web fonts (SIL Open Font License 1.1): Lexend (variable 300–700) and IBM Plex Mono 400/500.
   Only the latin + latin-ext subsets are kept (Hungarian needs latin-ext for ő, ű). Generated from Google Fonts. */
/* IBM Plex Mono 400 · latin-ext */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Mono 400 · latin */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* IBM Plex Mono 500 · latin-ext */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* IBM Plex Mono 500 · latin */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Lexend 300 700 · latin-ext */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/lexend-300-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Lexend 300 700 · latin */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/lexend-300-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* CML Információ — design tokens
   Palette derived from May-Grünwald–Giemsa staining (violet nuclei, eosin-rose cytoplasm)
   and the two fusion partners: ABL1 (teal, chr 9) and BCR (amber, chr 22). */
:root{
  --bg:#FBF9FF; --surface:#FFFFFF; --surface-2:#F3EEFF; --surface-3:#E9E1FB;
  --ink:#1C1433; --ink-2:#41365E; --muted:#6A5F88; --line:#E6DEF5; --line-2:#D2C5EE;
  --violet:#6A3FD0; --violet-ink:#4B22A8; --violet-soft:#EFE8FF;
  --rose:#D6246A; --rose-soft:#FFE6EF;
  --eosin:#D9432A; --eosin-ink:#B3301B; --eosin-soft:#FFE6DE; --egg:#F6F1E6; --egg-line:#E7DDC8; --glass:rgba(255,255,255,.62); --glass-edge:rgba(28,20,51,.09); --glass-hi:rgba(255,255,255,.95); --rk:#13294F;
  --abl:#00827F; --abl-soft:#DDF7F5; --bcr:#D06F00; --bcr-soft:#FFF0DC;
  --good:#1F8A52; --good-soft:#E0F6E9; --warn:#B77A00; --warn-soft:#FFF3D6; --bad:#B8232E; --bad-soft:#FBE2E3;
  --rbc:#F09AAE; --shadow:0 1px 2px rgba(40,20,90,.06),0 10px 28px -12px rgba(60,30,140,.25);
  --f-display:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs:18px; --measure:68ch; --radius:14px; --wrap:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#130F1F; --surface:#1B1630; --surface-2:#241D3D; --surface-3:#2F264D;
    --ink:#F1ECFF; --ink-2:#D2C9EE; --muted:#A197C4; --line:#342A52; --line-2:#463A6B;
    --violet:#B79CFF; --violet-ink:#D2C2FF; --violet-soft:#2C2150;
    --rose:#FF6FA3; --rose-soft:#3F1830;
    --eosin:#FF7D5E; --eosin-ink:#FF9C82; --eosin-soft:#3F1D15; --egg:#241F1B; --egg-line:#3A3129; --glass:rgba(27,22,48,.58); --glass-edge:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.10); --rk:#F2F2F2;
    --abl:#33D6CF; --abl-soft:#0E3533; --bcr:#FFAA4D; --bcr-soft:#3D2810;
    --good:#4ED68C; --good-soft:#12301F; --warn:#FFCB47; --warn-soft:#382C0C; --bad:#FF6B7A; --bad-soft:#3F1720;
    --rbc:#9C4B62; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#130F1F; --surface:#1B1630; --surface-2:#241D3D; --surface-3:#2F264D;
  --ink:#F1ECFF; --ink-2:#D2C9EE; --muted:#A197C4; --line:#342A52; --line-2:#463A6B;
  --violet:#B79CFF; --violet-ink:#D2C2FF; --violet-soft:#2C2150;
  --rose:#FF6FA3; --rose-soft:#3F1830;
  --eosin:#FF7D5E; --eosin-ink:#FF9C82; --eosin-soft:#3F1D15; --egg:#241F1B; --egg-line:#3A3129; --glass:rgba(27,22,48,.58); --glass-edge:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.10); --rk:#F2F2F2;
  --abl:#33D6CF; --abl-soft:#0E3533; --bcr:#FFAA4D; --bcr-soft:#3D2810;
  --good:#4ED68C; --good-soft:#12301F; --warn:#FFCB47; --warn-soft:#382C0C; --bad:#FF6B7A; --bad-soft:#3F1720;
  --rbc:#9C4B62; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -12px rgba(0,0,0,.6);
}
:root.big{--fs:21px}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--fs);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.65;font-weight:350;text-rendering:optimizeLegibility}
img,svg,canvas{max-width:100%}
a{color:var(--violet-ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--eosin)}
:focus-visible{outline:3px solid var(--eosin);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.18;text-wrap:balance;color:var(--ink);letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:600}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin-top:2.6rem;scroll-margin-top:90px}
h3{font-size:1.22rem;margin-top:1.8rem;scroll-margin-top:90px}
p,ul,ol{margin:0}
.prose > * + *{margin-top:1rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li + li{margin-top:.35rem}
.prose strong{font-weight:700;color:var(--ink)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--surface);padding:.5rem 1rem}

/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);border-bottom:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 24px -16px rgba(40,20,90,.35)}
.head-in{max-width:var(--wrap);margin:0 auto;padding:.7rem 16px;display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex-shrink:0}
/* logo: 250x44 on desktop; on narrow phones the brand shrinks so the buttons always fit */
.brand .logo{display:block;width:250px;max-width:100%;height:auto}
.site-head .brand{flex:0 1 auto;min-width:0}
.site-head .tools{flex-shrink:0}
.foot .brand{display:inline-flex;max-width:100%}
.foot .brand .logo{width:296px}
@media (max-width:560px){.head-in{gap:.6rem}}
.nav{display:flex;gap:.15rem;margin-left:auto;align-items:center}
.nav > .grp{position:relative}
.nav button.top,.nav a.top{font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-2);background:none;border:0;padding:.5rem .7rem;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;gap:.3rem;align-items:center}
.nav button.top:hover,.nav a.top:hover,.nav .grp:focus-within button.top{background:var(--egg-line);color:var(--ink)}
.nav .top.on{color:var(--violet-ink);background:var(--violet-soft)}
.nav .caret{width:.6em;height:.6em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:var(--surface);border:1px solid var(--egg-line);border-radius:12px;box-shadow:var(--shadow);padding:.4rem;display:none}
.grp:hover .menu,.grp:focus-within .menu,.grp.open .menu{display:block}
.menu a{display:block;padding:.55rem .75rem;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.9rem}
.menu a small{display:block;color:var(--muted);font-size:.78rem;line-height:1.35}
.menu a:hover,.menu a.on{background:var(--surface-2);color:var(--violet-ink)}
.tools{display:flex;gap:.3rem;align-items:center}
.iconbtn{font:inherit;font-size:.82rem;font-weight:700;border:1px solid var(--egg-line);background:var(--surface);color:var(--ink-2);border-radius:999px;height:36px;min-width:36px;padding:0 .6rem;cursor:pointer}
.iconbtn:hover{border-color:var(--violet);color:var(--violet-ink)}
.burger{display:none}
/* Rákkutatók Alapítvány logo: header (horizontal; mark only on narrow screens) and footer (stacked) */
.rk{display:block;color:var(--rk);height:auto}
.rk-link{display:flex;align-items:center;padding:.2rem .75rem .2rem .2rem;margin-right:.35rem;border-right:1px solid var(--glass-edge);border-radius:6px;text-decoration:none;transition:opacity .2s}
.rk-link:hover{opacity:.72}
.rk-link:focus-visible{outline:2px solid var(--eosin);outline-offset:2px}
.rk-h{width:100px}
.rk-mark{display:none;width:22px}
.rk-foot{display:inline-block!important;padding:.1rem 0 .7rem!important;transition:opacity .2s}
.rk-foot:hover{opacity:.72}
.rk-stacked{width:132px}
@media (min-width:981px){.nav button.top,.nav a.top{white-space:nowrap}}
@media (min-width:981px) and (max-width:1339px){.nav button.top,.nav a.top{padding-inline:.55rem}.site-head .brand .logo{width:220px}}
@media (max-width:1239px) and (min-width:981px){.rk-h{display:none}.rk-mark{display:block}}
@media (max-width:560px){.rk-h{display:none}.rk-mark{display:block;width:19px}.rk-link{padding-right:.5rem;margin-right:.1rem}}
@media (max-width:980px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);padding:.5rem 16px 1rem;max-height:calc(100vh - 70px);overflow:auto;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav button.top,.nav a.top{width:100%;justify-content:space-between;font-size:1rem;padding:.7rem .4rem;border-radius:8px}
  .menu{position:static;display:block;border:0;box-shadow:none;padding:0 0 .4rem .6rem;min-width:0;background:transparent}
  .nav .caret{display:none}
  .burger{display:inline-flex;align-items:center;margin-left:auto}
  .tools{margin-left:0}
}

/* ---------- page frame ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:16px}
.page-hero{padding-block:3rem 1.5rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.page-hero .wrap{display:grid;gap:1rem}
.page-hero p.lede{font-size:1.15rem;color:var(--ink-2);max-width:60ch}
.crumbs{font-size:.8rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:3.5rem;padding-block:2.5rem 4rem;max-width:var(--wrap);margin:0 auto;padding-inline:16px}
.layout > article{min-width:0}
.layout > article > .prose{max-width:var(--measure)}
.toc{position:sticky;top:90px;align-self:start;font-size:.85rem;border-left:2px solid var(--line);padding-left:1rem}
.toc b{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;font-weight:500}
.toc a{display:block;color:var(--ink-2);text-decoration:none;padding:.25rem 0;line-height:1.35}
.toc a:hover,.toc a.on{color:var(--violet-ink)}
@media (max-width:980px){.layout{grid-template-columns:1fr;gap:0}.toc{display:none}}

/* ---------- components ---------- */
.summary{background:var(--egg);border:1px solid var(--egg-line);border-left:4px solid var(--eosin);border-radius:var(--radius);padding:1.2rem 1.4rem;max-width:var(--measure)}
.summary .eyebrow{color:var(--eosin-ink)}
.summary ul{margin-top:.5rem;padding-left:1.2rem}
.summary li + li{margin-top:.3rem}
.note{border-left:4px solid var(--abl);background:var(--abl-soft);padding:1rem 1.2rem;border-radius:0 10px 10px 0}
.note.warn{border-color:var(--warn);background:var(--warn-soft)}
.note.alert{border-color:var(--bad);background:var(--bad-soft)}
.note b.t{display:block;margin-bottom:.2rem}
.byline{font-size:.88rem;color:var(--muted)}
.pill{display:inline-block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;padding:.12rem .55rem;border-radius:999px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.pill.new{background:var(--eosin-soft);color:var(--eosin-ink)}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.btn{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-weight:700;font-size:.92rem;padding:.7rem 1.15rem;border-radius:999px;border:1.5px solid var(--violet);background:var(--violet);color:var(--bg);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--violet-ink);border-color:var(--violet-ink);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--violet-ink)}
.btn.ghost:hover{background:var(--violet-soft);color:var(--violet-ink)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.card{display:flex;flex-direction:column;gap:.45rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.25rem;text-decoration:none;color:var(--ink)}
a.card:hover{border-color:var(--violet);box-shadow:var(--shadow);color:var(--ink)}
.card h3{margin:0;font-size:1.1rem}
.card p{color:var(--ink-2);font-size:.92rem}
.card .go{margin-top:auto;font-size:.85rem;font-weight:700;color:var(--violet-ink)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--surface-2)}
tr:last-child td{border-bottom:0}
td .mono{font-size:.85rem}
details.qa{border-bottom:1px solid var(--line);padding:.2rem 0}
details.qa summary{cursor:pointer;list-style:none;padding:.9rem 2rem .9rem 0;font-weight:700;position:relative}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";position:absolute;right:.2rem;top:.7rem;font-family:var(--f-mono);font-size:1.3rem;color:var(--violet)}
details.qa[open] summary::after{content:"–"}
details.qa > div{padding:0 0 1rem;color:var(--ink-2)}
.checklist{list-style:none;padding:0!important}
.checklist li{padding-left:1.8rem;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:.35em;width:1.05rem;height:1.05rem;border-radius:4px;border:2px solid var(--violet)}
.quote{font-family:var(--f-display);font-size:1.2rem;color:var(--ink-2);border-left:3px solid var(--eosin);padding-left:1rem}

/* glossary term */
.g{border-bottom:1.5px dotted var(--violet);cursor:help;text-decoration:none}
.gpop{position:absolute;z-index:60;max-width:320px;background:var(--ink);color:var(--bg);padding:.7rem .85rem;border-radius:10px;font-size:.84rem;line-height:1.45;box-shadow:var(--shadow)}
.gpop b{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:.2rem}

/* ---------- figures ("lab plates") ---------- */
.fig{margin:2rem 0;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.fig-head{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;justify-content:space-between;padding:1rem 1.25rem .6rem}
.fig-head h4{font-size:1.08rem}
.fig-no{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--eosin)}
.fig-body{padding:0 1.25rem 1.1rem}
.fig-cap{border-top:1px solid var(--egg-line);padding:.8rem 1.25rem;font-size:.85rem;color:var(--ink-2);background:var(--egg)}
.ctrls{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .8rem}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px}
.seg button{font:inherit;font-size:.82rem;font-weight:700;border:0;background:transparent;color:var(--ink-2);padding:.45rem .85rem;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--violet-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.chip{font:inherit;font-size:.82rem;font-weight:700;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-2);padding:.4rem .75rem;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--violet);background:var(--violet-soft);color:var(--violet-ink)}
.fig svg text{font-family:var(--f-body)}
.fig svg .mono,.fig svg text.mono{font-family:var(--f-mono)}
.readout{font-size:.92rem;color:var(--ink-2);min-height:3em}
.readout strong{color:var(--ink)}
.two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.25rem;align-items:start}
@media (max-width:760px){.two{grid-template-columns:1fr}}
input[type=range]{width:100%;accent-color:var(--violet)}
.field{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted)}
.field input,.field select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-2);border-radius:10px;padding:.5rem .6rem;min-width:0}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.8rem;color:var(--muted);margin-top:.5rem}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.legend i{width:.8rem;height:.8rem;border-radius:3px;display:inline-block}

/* ---------- home ---------- */
.hero{padding-block:3.2rem 2.5rem;background:var(--bg);border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2.5rem;align-items:center}
@media (max-width:900px){.hero-in{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:600;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--violet)}
.hero p.lede{font-size:1.15rem;color:var(--ink-2);margin-top:1rem;max-width:34em}
.hero .actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.section{padding-block:3rem}
.section + .section{border-top:1px solid var(--line)}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.4rem}
.section-head h2{margin:0}
.path-card .tag{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--eosin)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--line)}
.facts > div{padding:1.2rem 1.2rem 1.2rem 0;border-bottom:1px solid var(--line)}
.facts b{display:block;font-family:var(--f-display);font-size:1.9rem;font-weight:600;color:var(--violet-ink);line-height:1.1}
.facts span{font-size:.9rem;color:var(--ink-2)}
.event{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;background:var(--egg);border:1px solid var(--egg-line);border-radius:18px;padding:1.4rem}
.event .date{font-family:var(--f-display);text-align:center;background:var(--eosin);color:var(--bg);border-radius:12px;padding:.8rem 1rem;min-width:88px;align-self:start}
.event .date b{display:block;font-size:2rem;line-height:1}
.event .date span{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:560px){.event{grid-template-columns:1fr}.event .date{justify-self:start}}
.program{list-style:none;padding:0;margin-top:.8rem;font-size:.9rem}
.program li{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem;padding:.35rem 0;border-bottom:1px dashed var(--line)}
.program li .mono{color:var(--muted);font-size:.8rem}
.news-list{display:grid;gap:1rem}
.news{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.news time{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
@media (max-width:560px){.news{grid-template-columns:1fr;gap:.2rem}}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.video{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:var(--ink)}
.video .thumb{aspect-ratio:16/9;max-width:100%;border-radius:12px;background:var(--violet);position:relative;overflow:hidden;display:grid;place-items:center}
.video .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.video .thumb::before{content:"";position:absolute;z-index:1;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;background:rgba(30,12,80,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 1.5px rgba(255,255,255,.6),0 4px 12px rgba(0,0,0,.3);transition:transform .2s,background .2s}
.video .thumb::after{content:"";position:absolute;z-index:2;right:21px;bottom:22px;width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.video .thumb img{transition:transform .35s}
.video:hover .thumb img,.video:focus-visible .thumb img{transform:scale(1.04)}
.video:hover .thumb::before,.video:focus-visible .thumb::before{background:var(--eosin);transform:scale(1.08)}
.video b{font-size:.95rem}
.video small{color:var(--muted)}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:2.2rem 1.4rem;padding-top:1.5rem}
.person{position:relative;display:flex;flex-direction:column}
.person .portrait{position:relative;height:300px;clip-path:inset(-60px 0 0 0 round 0 0 22px 22px);--pc:var(--violet)}
.person.p-eosin .portrait{--pc:var(--eosin)}
.person.p-abl .portrait{--pc:var(--abl)}
.person .panel{position:absolute;inset:auto 0 0 0;height:74%;background:var(--pc);border-radius:22px}
.person .orb{position:absolute;width:128px;height:128px;border-radius:50%;right:8px;top:8px;background:var(--pc);opacity:.22}
.person:nth-child(2) .orb{left:8px;right:auto;top:22px}
.person img{position:absolute;bottom:0;left:50%;height:330px;width:auto;max-width:none;transform:translateX(-50%);transition:transform .45s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 10px 18px rgba(20,10,50,.28))}
.person:hover img{transform:translateX(-50%) translateY(-6px) scale(1.02)}
@media (prefers-reduced-motion:reduce){.person:hover img{transform:translateX(-50%)}}
.person .plate{position:relative;z-index:2;margin:-46px 14px 0;padding:1rem 1.1rem;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border:1px solid var(--glass-edge);border-radius:16px;box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 28px -18px rgba(40,20,90,.45)}
.person b{font-family:var(--f-display);font-size:1.1rem}
.person p{font-size:.88rem;color:var(--ink-2);margin-top:.3rem}
.person .copyable{font-size:.74rem;overflow-wrap:break-word}
.copyable{font-family:var(--f-mono);font-size:.82rem;user-select:all}

/* glossary page */
.gl-search{font:inherit;width:100%;max-width:420px;padding:.7rem 1rem;border-radius:999px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink)}
.gl-letters{display:flex;flex-wrap:wrap;gap:.25rem;margin:1rem 0}
.gl-letters a{font-family:var(--f-mono);font-size:.8rem;padding:.2rem .5rem;border-radius:6px;text-decoration:none;background:var(--surface-2)}
dl.gl{margin:0}
dl.gl dt{font-weight:700;font-family:var(--f-display);font-size:1.05rem;margin-top:1.2rem}
dl.gl dd{margin:.2rem 0 0;color:var(--ink-2)}

/* footer */
.foot{background:var(--surface-2);border-top:1px solid var(--line);padding-block:2.5rem 2rem;font-size:.88rem;color:var(--ink-2)}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot h5{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem;font-weight:500}
.foot a{color:var(--ink-2);text-decoration:none;display:block;padding:.15rem 0}
.foot a:hover{color:var(--violet-ink)}
.foot .disc{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.2rem;font-size:.8rem;color:var(--muted)}
@media (max-width:820px){.foot-in{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-in{grid-template-columns:1fr}}
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;max-width:var(--measure)}
.nextprev a{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;text-decoration:none;color:var(--ink)}
.nextprev a:hover{border-color:var(--violet)}
.nextprev small{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nextprev .n{text-align:right;grid-column:2}

/* eggshell panels */
.egg{background:var(--egg);border-color:var(--egg-line)}
.foot{background:var(--egg);border-top-color:var(--egg-line)}
.foot .disc{border-top-color:var(--egg-line)}
.hero h1 em{text-decoration:none}

/* glass header */
.site-head .iconbtn{background:var(--glass)}
.site-head .nav button.top:hover,.site-head .nav a.top:hover,.site-head .nav .grp:focus-within button.top{background:rgba(106,63,208,.08)}

/* theme toggle */
.themebtn{display:inline-grid;place-items:center;padding:0;width:36px}
.themebtn svg{width:18px;height:18px;grid-area:1/1;transition:transform .35s ease,opacity .25s ease}
.themebtn .i-moon{fill:currentColor}
.themebtn .i-sun{fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:0;transform:rotate(-60deg) scale(.6)}
.themebtn.dark .i-moon{opacity:0;transform:rotate(60deg) scale(.6)}
.themebtn.dark .i-sun{opacity:1;transform:none}

/* page hero with photo (Rólunk): flat colour overlay, no gradient */
.page-hero.has-bg{position:relative;isolation:isolate;overflow:hidden;background-color:#2A1466;background-size:cover;background-repeat:no-repeat;border-bottom:0;padding-block:5.5rem 3rem}
.page-hero.has-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:#7B4FE0;mix-blend-mode:multiply}
.page-hero.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(30,12,80,.42)}
.page-hero.has-bg h1{color:#fff}
.page-hero.has-bg p.lede{color:rgba(255,255,255,.9)}
.page-hero.has-bg .crumbs,.page-hero.has-bg .crumbs a{color:rgba(255,255,255,.75)}
.page-hero.has-bg .wrap{position:relative}
@media (max-width:560px){.page-hero.has-bg{padding-block:4rem 2.2rem}}

/* ---------- "Mi az a kromoszóma?" info button + modal figure ---------- */
.infobtn{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.82rem;font-weight:700;color:var(--violet-ink);background:var(--violet-soft);border:1.5px solid transparent;border-radius:999px;padding:.4rem .85rem .4rem .45rem;cursor:pointer;transition:border-color .2s,background .2s}
.infobtn span{display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--violet);color:var(--bg);font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:.85rem}
.infobtn:hover{border-color:var(--violet)}
.infobtn:focus-visible{outline:2px solid var(--eosin);outline-offset:2px}
html.modal-open{overflow:hidden}
.figmodal{width:min(920px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:0;border-radius:20px;padding:0;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px rgba(20,10,50,.35);overflow:auto}
.figmodal::backdrop{background:rgba(20,10,50,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.figmodal-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem .6rem;background:var(--surface);border-bottom:1px solid var(--line)}
.figmodal-head h4{margin:.1rem 0 0;font-size:1.2rem}
.figmodal-x{flex-shrink:0;font-size:1rem}
.figmodal-body{padding:.9rem 1.25rem 1.2rem}
.chromo-step{margin:.2rem 0 .3rem;color:var(--eosin-ink)}
.chromo-svg{width:100%;height:auto;display:block;border-radius:14px;background:var(--bg);
  --chr-fill:#E7DEF9;--chr-edge:#8E76CF;--chr-band:#3E1C92}
.chromo-sub:empty{display:none}
.chromo-sub{margin:.6rem 0 0}
.chromo-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.4rem;flex-wrap:wrap}
.chromo-nav .btn{padding:.5rem 1rem}
.chromo-nav .btn:disabled{opacity:.35;cursor:default}
.chromo-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chromo-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:var(--line-2);cursor:pointer;transition:background .2s,transform .2s}
.chromo-dots button[aria-current="step"]{background:var(--eosin);transform:scale(1.3)}
.chromo-svg .chr{transition:transform 1.1s cubic-bezier(.6,.05,.3,1),opacity .7s}
.chromo-svg .chr-body{fill:var(--chr-fill);stroke:var(--chr-edge);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .6s}
.chromo-svg .chr-bands rect{fill:var(--chr-band)}
.chromo-svg .chr-bands,.chromo-svg .chr-tint{opacity:0;transition:opacity .9s}
.chromo-svg.stained .chr-bands{opacity:.85}
.chromo-svg.cmlmode .chr-tint{opacity:.75}
.chromo-svg .src-22{fill:var(--bcr)}.chromo-svg .src-9{fill:var(--abl)}
.chromo-svg.homs [data-h="a"] .chr-body{fill:#CDB8FA;stroke:#6A3FD0}
.chromo-svg.homs [data-h="b"] .chr-body{fill:#FFC7DA;stroke:#D6246A}
.chromo-svg .lg-a{fill:#CDB8FA;stroke:#6A3FD0}.chromo-svg .lg-b{fill:#FFC7DA;stroke:#D6246A}
.chromo-layer{opacity:0;transition:opacity .6s;pointer-events:none}
.chromo-layer.on{opacity:1}
.chromo-svg .cell-memb{fill:var(--surface-2);stroke:var(--violet);stroke-opacity:.45;stroke-width:2.5;transform-box:fill-box;transform-origin:center;transition:transform 1.1s,stroke-dasharray .6s,opacity .6s}
.chromo-svg .cell-memb.torn{stroke-dasharray:22 16;fill-opacity:.35}
.chromo-svg .cell-nuc{fill:var(--surface-3);stroke:var(--violet);stroke-opacity:.5;stroke-width:1.5;transition:opacity .8s}
.chromo-svg .chromatin{transform-box:fill-box;transform-origin:center;transition:transform 1.1s,opacity .9s}
.chromo-svg .chromatin path{fill:none;stroke:var(--violet);stroke-opacity:.55;stroke-width:1.3;stroke-linecap:round}
.chromo-svg .chromatin.gone{opacity:0;transform:scale(.3)}
.chromo-svg .mic-field{fill:var(--surface-2);stroke:var(--line-2);stroke-width:2}
.chromo-svg text{font-family:var(--f-body,inherit)}
.chromo-svg .ct-big{font-size:46px;font-weight:700;fill:var(--violet-ink)}
.chromo-svg .ct-t{font-size:15px;font-weight:600;fill:var(--ink)}
.chromo-svg .ct-s{font-size:13px;fill:var(--muted)}
.chromo-svg .ct-lbl{font-size:13px;font-weight:600;fill:var(--muted);transition:opacity .6s}
.chromo-svg .ct-abl{font-size:13px;font-weight:700;fill:var(--abl)}
.chromo-svg .ct-arrow{font-size:20px;fill:var(--muted)}
.chromo-svg .ct-formula{font-family:var(--f-mono);font-size:14px;font-weight:600;fill:var(--ink)}
.chromo-svg .k-num{font-family:var(--f-mono);font-size:11px;fill:var(--muted)}
.chromo-svg .one-line{stroke:var(--muted);stroke-width:1}
.chromo-svg .abl-mark{fill:none;stroke:var(--abl);stroke-width:2}
.chromo-svg .pk-s1{fill:none;stroke:var(--violet);stroke-width:2.2}
.chromo-svg .pk-s2{fill:none;stroke:var(--rose);stroke-width:2.2}
.chromo-svg .pk-rung{stroke:var(--line-2);stroke-width:1.5}
.chromo-svg .pk-bead{fill:var(--violet-soft);stroke:var(--violet);stroke-width:1.5}
.chromo-svg .der-ring{fill:none;stroke:var(--eosin);stroke-width:2;stroke-dasharray:4 3}
.chromo-svg .der-lbl{font-size:12px;font-weight:700;fill:var(--eosin-ink)}
@media (max-width:560px){.figmodal-body{padding:.7rem .8rem 1rem}.figmodal-head{padding:.8rem .8rem .5rem}.infobtn{margin-left:0}
  .chromo-scroll{overflow-x:auto;margin-inline:-.8rem;padding-inline:.8rem;-webkit-overflow-scrolling:touch}
  .chromo-scroll .chromo-svg{min-width:560px}
  .figmodal [data-ch]{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .figmodal [data-ch] button{white-space:nowrap}
  .chromo-dots{order:-1;width:100%;margin-bottom:.3rem}}

/* ---------- Sample journey (FIG.journey) ---------- */
.jr-ctrls{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:flex-end;margin:.2rem 0 1rem}
.jr-ctrls .eyebrow{margin-bottom:.3rem}
.jr-play{margin-left:auto;padding:.5rem 1rem}
.jr-track{list-style:none;margin:0 0 1rem;padding:0 0 .4rem;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(72px,1fr);gap:8px;overflow-x:auto;scroll-snap-type:x proximity;position:relative}
.jr-track li{scroll-snap-align:start;position:relative}
.jr-track li:not(:last-child)::after{content:"";position:absolute;top:23px;left:calc(50% + 21px);right:calc(-50% + 21px);height:2px;background:var(--line-2);z-index:0}
.jr-st{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;font:inherit;background:none;border:0;padding:.1rem .2rem .45rem;border-radius:12px;cursor:pointer;color:var(--ink-2)}
.jr-st .jr-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--kc);color:var(--kc);transition:transform .25s,background .25s,color .25s}
.jr-st .jr-ico svg{width:22px;height:22px}
.jr-st .jr-n{font-family:var(--f-mono);font-size:.68rem;color:var(--muted)}
.jr-st .jr-t{font-size:.74rem;hyphens:auto;font-weight:700;line-height:1.2;color:var(--ink)}
.jr-st .jr-d{font-size:.66rem;color:var(--muted);line-height:1.2}
.jr-st:hover .jr-ico{transform:translateY(-2px)}
.jr-st.on{background:var(--surface-2)}
.jr-st.on .jr-ico{background:var(--kc);color:var(--bg);transform:scale(1.06)}
.jr-st.k-wait .jr-ico{border-style:dashed}
.jr-st:focus-visible{outline:2px solid var(--eosin);outline-offset:2px}
.k-clinic{--kc:var(--violet)}.k-lab{--kc:var(--abl)}.k-wait{--kc:var(--bcr)}.k-report{--kc:var(--eosin)}
.jr-detail{display:grid;grid-template-columns:minmax(200px,.8fr) 1.6fr;gap:.6rem 1.4rem;align-items:start;background:var(--egg);border:1px solid var(--egg-line);border-left:5px solid var(--kc);border-radius:14px;padding:1rem 1.2rem;margin-bottom:1rem;min-height:9.5rem}
.jr-detail p{margin:0;font-size:.95rem;color:var(--ink-2)}
.jr-detail p strong{color:var(--ink)}
.jr-dh{display:flex;gap:.8rem;align-items:flex-start}
.jr-dh h5{margin:.15rem 0 .1rem;font-size:1.05rem}
.jr-dh .eyebrow{color:var(--kc)}
.jr-who{font-size:.82rem;color:var(--muted)}
.jr-ico.big{flex-shrink:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--kc);color:var(--bg)}
.jr-ico.big svg{width:26px;height:26px}
.jr-sum{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline;margin-bottom:.8rem}
.jr-big{font-size:.9rem;color:var(--muted)}
.jr-big b{font-size:1.9rem;color:var(--violet-ink);font-weight:700;margin-right:.2rem}
.jr-bar{flex-basis:100%;display:flex;gap:3px;height:12px}
.jr-bar span{border-radius:4px;background:var(--kc);opacity:.85;transition:flex .5s,opacity .2s}
.jr-bar span.k-wait{background:repeating-linear-gradient(135deg,var(--bcr) 0 4px,var(--bcr-soft) 4px 8px)}
.jr-bar span.on{outline:2px solid var(--ink);outline-offset:1px}
.jr-note{flex-basis:100%;margin:.2rem 0 0;font-size:.88rem;color:var(--ink-2)}
.jr-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:560px}
.jr-hd{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);text-align:center;padding-bottom:2px}
.jr-c{position:relative;height:44px;border-radius:8px;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2);transition:background .3s,box-shadow .2s}
.jr-c.out{background:transparent;border:1px dashed var(--line)}
.jr-c.out.k-off{background:transparent}
.jr-c.k-off{background:repeating-linear-gradient(135deg,var(--surface-2) 0 5px,var(--surface-3) 5px 10px);color:var(--muted)}
.jr-c.k-clinic,.jr-c.k-lab,.jr-c.k-report{background:var(--kc);color:var(--bg)}
.jr-c.k-wait{background:repeating-linear-gradient(135deg,var(--bcr) 0 5px,var(--bcr-soft) 5px 10px);color:var(--ink)}
.jr-c.k-wait span{background:var(--bcr-soft);border-radius:4px;padding:0 3px}
.jr-c em{font-style:normal;font-family:var(--f-body);font-size:.58rem;font-weight:700;line-height:1;margin-top:2px}
.jr-c.on{box-shadow:0 0 0 2.5px var(--surface),0 0 0 4.5px var(--ink)}
.jr-legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.7rem;font-size:.78rem;color:var(--ink-2)}
.jr-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.35rem;vertical-align:-1px;background:var(--kc)}
.jr-legend i.k-wait{background:repeating-linear-gradient(135deg,var(--bcr) 0 3px,var(--bcr-soft) 3px 6px)}
.jr-legend i.k-off{background:repeating-linear-gradient(135deg,var(--surface-2) 0 3px,var(--line-2) 3px 6px)}
@media (max-width:760px){.jr-track{grid-auto-columns:88px}.jr-detail{grid-template-columns:1fr}.jr-play{margin-left:0}.jr-c{height:38px}.jr-c em{display:none}}

/* ---------- 404 page ---------- */
.nf{padding:clamp(2.5rem,7vw,5rem) 0 2rem}
.nf-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.nf-code{display:flex;align-items:center;gap:.2rem;font-family:var(--f-display);font-weight:700;font-size:clamp(5rem,15vw,9.5rem);line-height:1;color:var(--violet-ink);letter-spacing:-.02em}
.nf-cell{width:.95em;height:auto;display:block;animation:nf-bob 4s ease-in-out infinite}
@keyframes nf-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
.nf-txt h1{margin:.3rem 0 .6rem}
.nf-txt .eyebrow{color:var(--eosin-ink)}
.nf-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.nf-links{padding-bottom:3.5rem}
.nf-links h2{margin:0 0 .8rem}
.nf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
@media (max-width:900px){.nf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.nf-grid{grid-template-columns:1fr}}
.nf-card{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1rem;border-radius:14px;background:var(--egg);border:1px solid var(--egg-line);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.nf-card small{color:var(--muted);font-size:.82rem}
.nf-card:hover{border-color:var(--violet);transform:translateY(-2px)}
.nf-card:focus-visible{outline:2px solid var(--eosin);outline-offset:2px}
@media (max-width:760px){.nf-in{grid-template-columns:1fr;text-align:left}}