/* a látványterv D részéből generálva — ne szerkeszd kézzel, lásd _src/make-engine.py */
.site{container-type:inline-size;background:var(--m-bg);color:var(--m-text);font-family:var(--m-body);position:relative;overflow:hidden}
.site .snav{position:absolute;inset:14px 14px auto;z-index:5;display:flex;align-items:center;gap:18px;padding:10px 12px 10px 18px;border-radius:999px;background:var(--m-navbg);border:1px solid var(--m-line);backdrop-filter:blur(12px)}
.snav .logo{font:600 17px/1 var(--m-display);letter-spacing:.14em;color:var(--m-text)}
.snav .logo small{display:block;font:500 7px/1.6 var(--mono);letter-spacing:.2em;color:var(--m-muted)}
.snav .links{display:flex;gap:16px;flex:1;justify-content:center;font-size:13px;color:var(--m-muted)}
.snav .links span:hover{color:var(--m-text)}
.snav .menu{display:none;margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--m-line);place-items:center;color:var(--m-text);font-size:16px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:11px 18px;font:600 13px/1 var(--m-body);border:1px solid var(--m-line);color:var(--m-text);background:transparent;cursor:pointer;white-space:nowrap}
.btn.pri{background:var(--m-accent);color:var(--m-onaccent);border-color:transparent}
.btn:hover{filter:brightness(1.08)}
.snav .links{white-space:nowrap}
@container (max-width:1080px){.snav .links{display:none}.snav .menu{display:grid;margin-left:6px}}
@container (max-width:760px){.nebpick button{padding:7px 9px}.nebpick button span{display:none}
.snav .links{display:none}.snav .menu{display:grid}.snav .btn{display:none}}

.shero{position:relative;min-height:600px;display:grid;align-content:end;padding:120px clamp(18px,5cqi,56px) 44px}
.shero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hcopy{position:relative;z-index:2;display:grid;gap:18px;max-width:640px;pointer-events:none}
.hcopy .btns{display:flex;gap:10px;flex-wrap:wrap;pointer-events:auto}
.hcopy .kick{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--m-accent)}
.hcopy p{color:var(--m-muted);max-width:46ch;font-size:15px}
.hmeta{position:absolute;right:clamp(18px,5cqi,56px);bottom:44px;z-index:2;text-align:right;font:500 11px/1.7 var(--mono);letter-spacing:.08em;color:var(--m-muted)}
.hmeta b{display:block;font:400 22px/1.2 var(--m-display);letter-spacing:.12em;color:var(--m-text)}
.hmeta .uk{display:block;font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--m-muted);margin-bottom:8px}
.hmeta .ug{display:inline-grid;grid-auto-flow:column;align-items:start;gap:0 12px}
.hmeta .ug div{display:grid;justify-items:center;gap:4px}
.hmeta .ug b{font:400 clamp(30px,4.2cqi,46px)/1 var(--m-display);letter-spacing:0;color:var(--m-text);font-variant-numeric:lining-nums}
.hmeta .ug small{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--m-muted)}
.hmeta .ug i{font:400 clamp(24px,3cqi,34px)/1 var(--m-display);font-style:normal;color:var(--m-accent);padding-top:4px}
@container (max-width:760px){.shero{min-height:620px;align-content:end}.hmeta{position:relative;right:auto;bottom:auto;text-align:left;margin-top:22px}}

.sblock{padding:64px clamp(18px,5cqi,56px);display:grid;gap:28px;position:relative}
.shead{display:flex;align-items:center;gap:18px}
.shead :is(h2,h3){font:400 clamp(30px,5cqi,48px)/1 var(--m-display);color:var(--m-text)}
.shead hr{flex:1;border:0;border-top:1px solid var(--m-line);margin:0}
.shead .idx{font:500 11px var(--mono);color:var(--m-muted);letter-spacing:.14em}

/* principles marquee-ish list */
.princ{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:1px;background:var(--m-line);border:1px solid var(--m-line);border-radius:14px;overflow:hidden}
.princ div{background:var(--m-bg);padding:20px;display:grid;gap:8px}
.princ b{font:400 21px/1.15 var(--m-display);color:var(--m-text)}
.princ span{font-size:14px;color:var(--m-muted)}

/* ticket stack (inspired by the SITCON ticket accordion, re-drawn as analysis cards) */
.tickets{display:flex;gap:10px;height:380px}
.ticket{position:relative;flex:0 0 66px;border-radius:16px;overflow:hidden;cursor:pointer;background:var(--m-card);color:var(--m-cardtext);transition:flex-grow .6s cubic-bezier(.2,.8,.2,1),flex-basis .6s cubic-bezier(.2,.8,.2,1);border:1px solid var(--m-line)}
.ticket:nth-child(2){background:var(--m-card2)}
.ticket:nth-child(3){background:var(--m-card3)}
.ticket:nth-child(4){background:var(--m-card4)}
.ticket.open{flex:1 1 0;cursor:default}
.ticket .vt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font:500 15px/1 var(--mono);letter-spacing:.12em;transition:opacity .3s}
.ticket.open .vt{opacity:0;pointer-events:none}
.ticket .tb{position:absolute;inset:0;display:grid;grid-template-columns:1fr 150px;opacity:0;transition:opacity .35s .15s;min-width:520px}
.ticket.open .tb{opacity:1}
.tb .main{padding:24px;display:grid;gap:12px;align-content:start}
.tb .main :is(h3,h4){margin:0;font:400 30px/1.05 var(--m-display)}
.tb .price{font:600 22px/1 var(--m-body);font-variant-numeric:tabular-nums}
.tb .price small{font:500 12px var(--mono);opacity:.7;margin-left:6px}
.tb ul{margin:0;padding-left:16px;font-size:14px;display:grid;gap:4px;opacity:.9}
.tb .acts{display:flex;gap:8px;margin-top:6px}
.tb .acts .btn{border-color:currentColor;color:inherit;padding:9px 14px}
.tb .stub{border-left:2px dashed currentColor;opacity:.9;padding:24px 16px;display:grid;align-content:space-between;text-align:center}
.tb .stub .big{font:400 64px/1 var(--m-display)}
.tb .stub .lbl{font:500 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.bars{height:36px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 8px);opacity:.55}
@container (max-width:680px){
  .tickets{flex-direction:column;height:auto}
  .ticket{flex:0 0 58px;min-height:58px}
  .ticket.open{flex:0 0 auto}
  .ticket .vt{writing-mode:horizontal-tb;justify-content:flex-start;padding-left:20px}
  .ticket .tb{position:relative;min-width:0;grid-template-columns:1fr;display:none}
  .ticket.open .tb{display:grid}
  .tb .stub{border-left:0;border-top:2px dashed currentColor;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-align:left}
}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
@container (max-width:680px){.calc{grid-template-columns:1fr}}
.cform{display:grid;gap:14px}
.cform label{display:grid;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted)}
.cform input{font:500 20px/1 var(--mono);padding:14px 16px;border-radius:12px;border:1px solid var(--m-line);background:var(--m-input);color:var(--m-text);letter-spacing:.06em;width:100%}
.cform .hint{font-size:13px;color:var(--m-muted)}
.cres{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cres .card{border:1px solid var(--m-line);border-radius:14px;padding:18px;display:grid;gap:6px;background:var(--m-input)}
.cres .card .n{font:400 72px/.9 var(--m-display);color:var(--m-accent);font-variant-numeric:lining-nums}
.cres .card .t{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted)}
.cres .card .m{font-size:14px;color:var(--m-text)}
.cres .steps{grid-column:1/-1;font:13px/1.6 var(--mono);color:var(--m-muted);border-top:1px dashed var(--m-line);padding-top:12px}
.cres .steps b{color:var(--m-text);font-weight:500}

/* course timeline */
.course{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr));gap:10px}
.mod{border-top:2px solid var(--m-accent);padding:14px 4px 0;display:grid;gap:6px}
.mod .i{font:500 11px var(--mono);color:var(--m-muted);letter-spacing:.12em}
.mod b{font:400 19px/1.15 var(--m-display);color:var(--m-text)}
.mod span{font-size:13px;color:var(--m-muted)}
.mod.prac{border-top-style:dashed}

.sfoot{padding:56px clamp(18px,5cqi,56px);display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:space-between;border-top:1px solid var(--m-line)}
.sfoot h3{font:400 clamp(28px,5cqi,52px)/1 var(--m-display);color:var(--m-text);max-width:16ch}
.sfoot .fine{font:12px var(--mono);color:var(--m-muted);width:100%}

/* ---- concept D: Arany-fehér (háttérválasztóval) ---- */
.cD{--m-bg:#F7F4EE;--m-text:#2B251C;--m-muted:#766C5A;--m-line:rgba(160,120,40,.2);--m-accent:#A9843A;--m-onaccent:#FFFFFF;--m-navbg:rgba(250,248,243,.8);--m-input:#FBF9F5;
  --m-card:#C9A55E;--m-card2:#EFE9DD;--m-card3:#DCC697;--m-card4:#2B251C;--m-cardtext:#2B251C;
  --m-display:"Bodoni Moda",Didot,Georgia,serif;--m-body:"Hanken Grotesk",system-ui,sans-serif;transition:background .5s,color .5s}
.cD .ticket:nth-child(4){color:#F3E3BC}
.cD .shero{background:radial-gradient(70% 70% at 72% 38%,rgba(214,180,110,.22),transparent 65%),var(--m-bg);transition:background .5s}
.cD .hcopy :is(h1,h2){font:500 clamp(44px,8.4cqi,104px)/.95 var(--m-display);letter-spacing:-.01em;font-optical-sizing:none;font-variation-settings:"opsz" 18;padding-left:.04em}
.cD .shead :is(h2,h3),.cD .sfoot h3,.cD .tb .main :is(h3,h4),.cD .princ b,.cD .mod b,.cD .cres .card .n,.cD .hmeta b{font-optical-sizing:none;font-variation-settings:"opsz" 24}
.cD .hcopy :is(h1,h2) i{font-style:italic;background:linear-gradient(100deg,#8A6A2C,#D4AF62 45%,#9C7A34);-webkit-background-clip:text;background-clip:text;color:transparent}
.cD .btn.pri{background:linear-gradient(135deg,#C9A152,#E7CE8E 50%,#B08A3E);color:#1A1610}
.cD .hairline{background:#FBF9F5;border-block:1px solid var(--m-line)}
.cD[data-bg="dark"]{--m-bg:#0E0D0A;--m-text:#F3ECDA;--m-muted:#A59B84;--m-line:rgba(215,185,120,.2);--m-accent:#D8B46A;--m-onaccent:#17130A;--m-navbg:rgba(20,18,13,.65);--m-input:#16140F;--m-card2:#EDE6D6;--m-card4:#2A251B}
.cD[data-bg="dark"] .hairline{background:#15130E}
/* ==== fekete-arany téma ==== */
.cD[data-neb="black"]{--m-bg:#FFFFFF;--m-text:#0A0A0A;--m-muted:#5C5A55;--m-line:rgba(10,10,10,.14);--m-accent:#B8912F;--m-onaccent:#0A0A0A;--m-navbg:rgba(255,255,255,.86);--m-input:#FAFAF8;
  --m-card:#0A0A0A;--m-card2:#D4AF37;--m-card3:#EDE8DD;--m-card4:#1C1C1C;--m-cardtext:#F5F0E6}
.cD[data-neb="black"] .ticket:nth-child(2),.cD[data-neb="black"] .ticket:nth-child(3){color:#0A0A0A}
.cD[data-neb="black"] .ticket:nth-child(4){color:#F3D98A}
.cD[data-neb="black"] .hairline{background:#FAFAF8}
.cD[data-neb="black"] .shero{background:radial-gradient(70% 70% at 72% 38%,rgba(212,175,55,.16),transparent 65%),#FFFFFF}
.cD[data-neb="black"] .hcopy :is(h1,h2) i,.cD[data-neb="black"] .chead :is(h1,h2) i{background:linear-gradient(100deg,#6E5418,#D4AF37 40%,#F3D98A 55%,#B8912F);-webkit-background-clip:text;background-clip:text;color:transparent}
.cD[data-neb="black"] .btn.pri{background:linear-gradient(135deg,#B8912F,#F3D98A 50%,#B8912F);color:#0A0A0A}
.cD[data-bg="dark"][data-neb="black"]{--m-bg:#000000;--m-text:#F5F0E6;--m-muted:#A89F8A;--m-line:rgba(212,175,55,.22);--m-accent:#D4AF37;--m-onaccent:#000000;--m-navbg:rgba(0,0,0,.78);--m-input:#0B0B0B;
  --m-card:#D4AF37;--m-card2:#141414;--m-card3:#8C7430;--m-card4:#F5F0E6;--m-cardtext:#000000}
.cD[data-bg="dark"][data-neb="black"] .ticket:nth-child(2){color:#F5F0E6}
.cD[data-bg="dark"][data-neb="black"] .ticket:nth-child(3),.cD[data-bg="dark"][data-neb="black"] .ticket:nth-child(4){color:#000}
.cD[data-bg="dark"][data-neb="black"] .hairline{background:#070707}
.cD[data-bg="dark"][data-neb="black"] .shero{background:radial-gradient(70% 70% at 72% 38%,rgba(212,175,55,.14),transparent 62%),#000000}
.cD[data-bg="dark"][data-neb="black"] .btn.pri{color:#000}
.calcsite[data-neb="black"] .pdna{background:radial-gradient(60% 60% at 50% 45%,rgba(212,175,55,.10),transparent 70%),#FFFFFF}
.calcsite[data-bg="dark"][data-neb="black"] .pdna{background:radial-gradient(60% 60% at 50% 45%,rgba(212,175,55,.12),transparent 70%),#000000}
.calcsite[data-neb="black"] .mstage{background:radial-gradient(60% 70% at 50% 40%,rgba(212,175,55,.14),transparent 65%),#FFFFFF}
.calcsite[data-bg="dark"][data-neb="black"] .mstage{background:radial-gradient(60% 70% at 50% 40%,rgba(212,175,55,.14),transparent 65%),#000000;border-color:rgba(212,175,55,.22)}
/* ==== arany-ezüst téma ==== */
.cD[data-neb="gray"]{--m-bg:#F3F4F6;--m-text:#1E2126;--m-muted:#646B77;--m-line:rgba(110,120,140,.24);--m-accent:#A9843A;--m-onaccent:#FFFFFF;--m-navbg:rgba(248,249,251,.82);--m-input:#FAFBFC;
  --m-card:#C9A55E;--m-card2:#E4E7EC;--m-card3:#CDD2DA;--m-card4:#1E2126;--m-cardtext:#1E2126}
.cD[data-neb="gray"] .hairline{background:#FAFBFC}
.cD[data-neb="gray"] .ticket:nth-child(4){color:#E4E7EC}
.cD[data-neb="gray"] .hcopy :is(h1,h2) i,.cD[data-neb="gray"] .chead :is(h1,h2) i{background:linear-gradient(100deg,#8A6A2C,#D4AF62 38%,#C9CFD9 62%,#9C7A34);-webkit-background-clip:text;background-clip:text;color:transparent}
.cD[data-neb="gray"] .btn.pri{background:linear-gradient(135deg,#C9A152,#E7CE8E 45%,#DDE2E9 70%,#B08A3E);color:#1E2126}
.cD[data-bg="dark"][data-neb="gray"]{--m-bg:#0C0D10;--m-text:#ECEEF2;--m-muted:#9AA1AD;--m-line:rgba(170,180,200,.18);--m-accent:#D8B46A;--m-onaccent:#14161A;--m-navbg:rgba(18,20,24,.72);--m-input:#14161A;
  --m-card2:#E4E7EC;--m-card3:#AEB5C0;--m-card4:#23262C}
.cD[data-bg="dark"][data-neb="gray"] .hairline{background:#111317}
.cD[data-bg="dark"][data-neb="gray"] .btn.pri{color:#14161A}
.nebpick{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--m-line);background:var(--m-input);margin-left:auto}
.nebpick button{border:0;background:none;color:var(--m-muted);font:600 12px/1 var(--m-body);padding:7px 11px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nebpick button i{width:11px;height:11px;border-radius:50%;display:inline-block}
.nebpick button[aria-pressed="true"]{background:var(--m-accent);color:var(--m-onaccent)}
.nebpick+.bgpick{margin-left:6px}
.cD[data-neb="gray"] .shero{background:radial-gradient(70% 70% at 72% 38%,rgba(120,130,150,.18),transparent 65%),radial-gradient(35% 45% at 88% 80%,rgba(120,130,150,.10),transparent 70%),#ECEDEF}
.cD[data-bg="dark"][data-neb="gray"] .shero{background:radial-gradient(70% 70% at 72% 38%,rgba(150,160,178,.16),transparent 65%),radial-gradient(35% 45% at 88% 80%,rgba(110,122,145,.10),transparent 70%),#0C0D10}
.calcsite[data-neb="gray"] .pdna{background:radial-gradient(60% 60% at 50% 45%,rgba(120,130,150,.16),transparent 70%),#ECEDEF}
.calcsite[data-bg="dark"][data-neb="gray"] .pdna{background:radial-gradient(60% 60% at 50% 45%,rgba(150,160,178,.14),transparent 70%),#0C0D10}
.bgpick{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--m-line);background:var(--m-input);margin-left:auto}
.bgpick button{border:0;background:none;color:var(--m-muted);font:600 12px/1 var(--m-body);padding:7px 11px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.bgpick button i{width:11px;height:11px;border-radius:50%;border:1px solid var(--m-line);display:inline-block}
.bgpick button[aria-pressed="true"]{background:var(--m-accent);color:var(--m-onaccent)}
.cD .snav .menu{margin-left:0}
/* nyitóképernyő */
.cD .welcome{display:none}
.cD[data-state="welcome"] .welcome{display:grid}
.cD[data-state="welcome"] .hcopy,.cD[data-state="welcome"] .hmeta{display:none}
.cD[data-state="welcome"] .shero{min-height:680px;align-content:center;padding-top:110px}
.welcome{position:relative;z-index:3;gap:22px;justify-items:start;max-width:600px}
.welcome .wk{font:500 11px/1 var(--mono);letter-spacing:.34em;color:var(--m-accent)}
.welcome h2{font:500 clamp(46px,8.6cqi,108px)/.98 var(--m-display);letter-spacing:-.01em;font-optical-sizing:none;font-variation-settings:"opsz" 18;color:var(--m-text);padding-left:.04em}
.welcome h2 .ww>span{display:inline-block;animation:wl .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms + .15s)}
@keyframes wl{from{opacity:0;transform:translateY(.45em) rotate(4deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.wform{display:grid;gap:16px;justify-items:start;animation:wf .8s .9s both}
@keyframes wf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wdate{display:flex;align-items:flex-start;gap:10px}
.wseg{display:grid;gap:6px;justify-items:center}
.wseg small{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--m-muted)}
.wseg input{font:500 clamp(36px,6.4cqi,68px)/1.05 var(--m-display);font-optical-sizing:none;font-variation-settings:"opsz" 24;color:var(--m-text);text-align:center;border:0;padding:4px 0 8px;width:2.3ch;
  background:linear-gradient(var(--m-accent),var(--m-accent)) center bottom/0% 2px no-repeat,linear-gradient(var(--m-line),var(--m-line)) center bottom/100% 1px no-repeat;transition:background-size .5s cubic-bezier(.2,.8,.2,1);font-variant-numeric:lining-nums tabular-nums}
.wseg input#w-y{width:4.2ch}
.wseg input::placeholder{color:var(--m-muted);opacity:.35}
.wseg input:focus{outline:none;background-size:100% 2px,100% 1px}
.wseg input:focus-visible{outline:none}
.wdot{font:400 clamp(36px,6.4cqi,68px)/1.05 var(--m-display);color:var(--m-accent)}
.wprev{font:13px/1.6 var(--mono);color:var(--m-muted);min-height:3.2em;max-width:52ch}
.wprev b{color:var(--m-accent);font-weight:500;font-size:15px}
.wprev.err{color:#B4553F}
.wskip{background:none;border:0;padding:6px 0;color:var(--m-text);font:500 16px/1.3 var(--m-body);border-bottom:1px solid var(--m-accent);cursor:pointer;animation:wf .8s 1.1s both}
.wskip:hover{color:var(--m-accent)}
.wnote{font:12px var(--mono);color:var(--m-muted);animation:wf .8s 1.2s both}
.welcome .wstepno{margin-left:10px;padding:3px 8px;border:1px solid var(--m-line);border-radius:999px;letter-spacing:.14em;color:var(--m-muted)}
.wstep{display:grid;gap:22px;justify-items:start}
.wstep[hidden]{display:none}
.wstep .wform{animation-delay:.55s}
.wbtns{display:flex;flex-wrap:wrap;gap:10px}
.wname{display:grid;gap:8px;width:min(100%,560px)}
.wname input{font:500 clamp(30px,5cqi,54px)/1.1 var(--m-display);font-optical-sizing:none;font-variation-settings:"opsz" 24;color:var(--m-text);border:0;padding:4px 0 10px;width:100%;
  background:linear-gradient(var(--m-accent),var(--m-accent)) left bottom/0% 2px no-repeat,linear-gradient(var(--m-line),var(--m-line)) left bottom/100% 1px no-repeat;transition:background-size .6s cubic-bezier(.2,.8,.2,1)}
.wname input::placeholder{color:var(--m-muted);opacity:.35}
.wname input:focus{outline:none;background-size:100% 2px,100% 1px}
.wname small{font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--m-muted)}
.ywbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ywbox:empty{display:none}
.ywq{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m-accent)}
.yw{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border:1px solid var(--m-line);border-radius:999px;background:var(--m-input);font-size:13px;color:var(--m-text)}
.yw span{margin-right:4px}
.yw button{border:0;background:none;color:var(--m-muted);font:600 12px var(--m-body);padding:6px 10px;border-radius:999px;cursor:pointer}
.yw button[aria-pressed="true"]{background:var(--m-accent);color:var(--m-onaccent)}
.cD .shero{touch-action:pan-y}
.cD .shero.grabbing,.cD .shero.grabbing *{cursor:grabbing!important;user-select:none}
.welcome h2 .ww{display:inline-block;white-space:nowrap}
.welcome h2 .ww span{display:inline-block}
.dnahint{position:absolute;z-index:2;right:clamp(18px,5cqi,56px);top:92px;margin:0;max-width:220px;text-align:right;font:500 10.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--m-muted);opacity:.85;pointer-events:none}
.cD[data-state="welcome"] .dnahint{top:92px}
@container (max-width:760px){.dnahint{display:none}}
.cD #name-D{font-family:var(--m-body);font-size:18px;letter-spacing:0}
.cD .cform .ywbox{margin-top:-4px}
.welcome.leaving{animation:wout .55s cubic-bezier(.6,0,.8,.4) forwards}
@keyframes wout{to{opacity:0;transform:translateY(-24px);filter:blur(4px)}}
.cD[data-state="home"] .hcopy{animation:wf .8s both}
/* számaid a hero-ban */
.mynums{display:flex;flex-wrap:wrap;gap:8px;pointer-events:auto}
.mynums:empty{display:none}
.mynums .chip{display:grid;gap:3px;padding:9px 13px;border-radius:12px;border:1px solid var(--m-line);background:var(--m-navbg);backdrop-filter:blur(8px);min-width:92px;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .25s,border-color .25s}
.mynums .chip:hover{transform:translateY(-2px);border-color:var(--m-accent)}
.cD .cres .card[data-v]{cursor:pointer;transition:transform .25s,border-color .25s}
.cD .cres .card[data-v]:hover{transform:translateY(-2px);border-color:var(--m-accent)}
/* magyarázó kártya — a számból nyílik ki */
.npop{position:absolute;z-index:8;width:min(360px,calc(100% - 24px));max-height:calc(100% - 80px);overflow:auto;padding:20px 20px 18px;border-radius:18px;
  background:var(--m-navbg);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--m-accent);color:var(--m-text);box-shadow:0 24px 60px -24px rgba(60,40,10,.45);
  transform-origin:var(--ox) var(--oy);animation:popin .55s cubic-bezier(.2,.9,.25,1) both}
.npop.sheet{width:auto;right:12px}
.npop.out{animation:popout .3s cubic-bezier(.6,0,.8,.4) forwards}
@keyframes popin{from{opacity:0;transform:scale(.35);clip-path:circle(0 at var(--ox) var(--oy));filter:blur(6px)}to{opacity:1;transform:none;clip-path:circle(160% at var(--ox) var(--oy));filter:none}}
@keyframes popout{to{opacity:0;transform:scale(.6);filter:blur(4px)}}
.npop .nx{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:1px solid var(--m-line);background:transparent;color:var(--m-text);font-size:18px;line-height:1;cursor:pointer}
.npop .nx:hover{border-color:var(--m-accent);color:var(--m-accent)}
.npop .nh{display:flex;align-items:baseline;gap:12px;padding-right:36px;margin-bottom:6px}
.npop .nbig{font:500 54px/1 var(--m-display);font-optical-sizing:none;font-variation-settings:"opsz" 24;color:var(--m-accent);animation:wf .6s .15s both}
.npop .nroles{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted)}
.npop section{display:grid;gap:6px;padding-top:12px;margin-top:10px;border-top:1px solid var(--m-line);animation:wf .6s both}
.npop section:nth-of-type(2){animation-delay:.1s}.npop section:nth-of-type(3){animation-delay:.18s}
.npop h5{margin:0;font:600 15px/1.3 var(--m-body)}
.npop h5 em{font-style:normal;color:var(--m-accent);margin-left:4px}
.npop .nsub{font:12px var(--mono);color:var(--m-muted)}
.npop .nlead{font-size:14px;color:var(--m-text)}
.npop ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--m-muted);display:grid;gap:3px}
.npop li::marker{color:var(--m-accent)}
.npop .nwarn{font-size:13px;padding:10px 12px;border-radius:10px;background:rgba(180,85,63,.08);border:1px solid rgba(180,85,63,.3);color:var(--m-text)}
.npop .nwarn b{color:#B4553F}
.mynums .chip .t{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted)}
.mynums .chip b{font:500 26px/1 var(--m-display);color:var(--m-accent);font-variant-numeric:lining-nums}
.cD .cres{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
.cD .cres .card .n{font-size:52px}
.cD .cres .card{min-width:0;overflow:hidden}
.cD .cres .card .t{letter-spacing:.08em;overflow-wrap:anywhere}
.cD .cres .card[data-role="8"] .n{font-size:28px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-block:8px 4px}
.cD .cres .card .cyb{white-space:normal;max-width:100%;font-size:9.5px}
.cD .cres .card[data-role="0"]{border-color:var(--m-accent)}
.replay{justify-self:start;border:1px solid var(--line);background:none;color:var(--gold2);font:500 13px var(--sans);padding:8px 14px;border-radius:999px;cursor:pointer}
.replay:hover{background:var(--panel2)}

/* ---- D+ kalkulátor oldal ---- */
.legend{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.legend li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start;font-size:14px;color:#D6CEBC}
.legend i{width:14px;height:14px;border-radius:50%;margin-top:4px}
.calcsite{padding-bottom:40px}
.site .snav.snav-static{position:relative;inset:auto;margin:14px}
.snav .links .on{color:var(--m-text);border-bottom:1px solid var(--m-accent)}
.chead{display:grid;gap:12px;padding:36px clamp(18px,5cqi,56px) 8px}
.chead :is(h1,h2){font:500 clamp(40px,7cqi,84px)/.95 var(--m-display);font-optical-sizing:none;font-variation-settings:"opsz" 18;color:var(--m-text)}
.chead :is(h1,h2) i{font-style:italic;background:linear-gradient(100deg,#8A6A2C,#D4AF62 45%,#9C7A34);-webkit-background-clip:text;background-clip:text;color:transparent}
.chead .kick{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--m-accent)}
.enote{font-size:14px;color:var(--m-muted);display:flex;align-items:center;gap:8px}
.okdot{width:8px;height:8px;border-radius:50%;background:#3E9B6A;box-shadow:0 0 0 4px rgba(62,155,106,.15);flex:0 0 auto}
.persons{padding:22px clamp(18px,5cqi,56px) 0;display:grid;gap:26px}
.prow{display:flex;gap:18px;align-items:stretch}
.person{flex:1 1 0;min-width:0;display:grid;gap:14px;align-content:start;padding:20px;border:1px solid var(--m-line);border-radius:20px;background:var(--m-input)}
.person[hidden]{display:none}
.person header{display:flex;align-items:center;gap:10px}
.person header b{font:500 22px/1 var(--m-display);color:var(--m-text)}
.ptag{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--mono);color:#fff;background:#B08A3E}
.person[data-p="B"] .ptag{background:#3A6EA5}
.prm{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--m-line);background:none;color:var(--m-muted);font-size:18px;cursor:pointer}
.prm:hover{color:var(--m-text);border-color:var(--m-accent)}
.person label{display:grid;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted)}
.person input{font:500 18px/1.2 var(--m-body);padding:12px 14px;border-radius:12px;border:1px solid var(--m-line);background:var(--m-bg);color:var(--m-text);width:100%;letter-spacing:0;text-transform:none}
.person input.p-dob{font-family:var(--mono);letter-spacing:.06em}
.person input:focus{outline:2px solid var(--m-accent);outline-offset:1px}
.pchips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pc{display:grid;gap:2px;align-content:start;padding:7px 10px;border-radius:10px;border:1px solid var(--m-line);background:var(--m-bg);min-width:0;min-height:78px;overflow:hidden}
.pc i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2!important;padding-bottom:2px}
.pc i{font:500 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted);font-style:normal}
.pc b{font:500 22px/1 var(--m-display);color:var(--m-accent)}
.person[data-p="B"] .pc b{color:#3A6EA5}
.pempty{font-size:13px;color:var(--m-muted);grid-column:1/-1;min-height:78px}
.person .ywbox{min-height:42px;align-content:center}
.person header{min-height:32px}
.person .ywbox:empty{display:flex}
.pdna{position:relative;height:380px;margin:0 -8px -8px;border-radius:14px;overflow:hidden;touch-action:pan-y;transition:height .7s cubic-bezier(.6,0,.2,1),opacity .5s}
.pdna canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pdna.grabbing,.mstage.grabbing{cursor:grabbing}
.persons[data-mode="merged"] .pdna{height:0;opacity:0}
.person.enter{animation:slidein .8s cubic-bezier(.2,.9,.25,1) both}
@keyframes slidein{from{opacity:0;transform:translateX(90px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.addp{flex:0 0 250px;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;border:1.5px dashed var(--m-accent);border-radius:20px;background:transparent;color:var(--m-text);cursor:pointer;padding:24px;font:inherit;transition:background .3s,transform .3s}
.addp:hover{background:var(--m-input);transform:translateY(-2px)}
.addp[hidden]{display:none}
.addp .plus{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:300 32px/1 var(--m-body);color:var(--m-onaccent);background:linear-gradient(135deg,#C9A152,#E7CE8E 50%,#B08A3E)}
.addp b{font:500 20px/1.15 var(--m-display)}
.addp small{font-size:12px;color:var(--m-muted)}
.mid{flex:0 0 auto;display:grid;align-content:center;justify-items:center;gap:8px;position:relative}
.mid[hidden]{display:none}
.harm{display:grid;justify-items:center;gap:6px;width:96px;height:96px;align-content:center;border-radius:50%;border:1px solid var(--m-accent);background:var(--m-bg);color:var(--m-accent);font:600 12px var(--m-body);cursor:pointer;box-shadow:0 10px 30px -12px rgba(176,138,62,.6);animation:pulse 2.6s ease-in-out infinite;transition:transform .3s}
.harm svg{width:30px;height:30px}
.harm:hover{transform:scale(1.06)}
.harm[aria-pressed="true"]{background:linear-gradient(135deg,#C9A152,#E7CE8E 50%,#B08A3E);color:#1A1610;animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(176,138,62,.35)}50%{box-shadow:0 0 0 12px rgba(176,138,62,0)}}
.hwarn{position:absolute;top:100%;width:180px;text-align:center;font-size:12px;color:#B4553F}
.merged{display:grid;gap:16px;animation:wf .7s .2s both}
.merged[hidden]{display:none}
.mhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.mhead .kick{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--m-accent)}
.mhead h3{font:500 clamp(24px,4cqi,38px)/1.1 var(--m-display);color:var(--m-text);font-optical-sizing:none;font-variation-settings:"opsz" 24}
.hsum{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto;font-size:13px;color:var(--m-muted)}
.hsum span{display:inline-flex;align-items:center;gap:6px}
.hsum i,.hlist i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.shero .hstage{position:absolute;inset:0}
.sklist{position:absolute;inset:0;pointer-events:none;z-index:2}
.sk{position:absolute;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:0;background:none;padding:2px 4px;font:inherit;color:var(--m-text);cursor:pointer;pointer-events:auto}
.sk-right .sk{transform:translate(0,-50%)}
.sk-left .sk{transform:translate(-100%,-50%);flex-direction:row-reverse}
.sk i{width:7px;height:7px;border-radius:50%;background:var(--m-accent);flex:0 0 auto}
.sk b{font:600 12.5px/1 var(--m-body)}
.sk em{font:500 12px/1 var(--mono);font-style:normal;color:var(--m-accent)}
.sk .cyb{font-size:9px;padding:1px 6px}
.sk::before{content:"";position:absolute;top:50%;width:var(--lead,20px);border-top:1px dashed var(--m-line)}
.sk-right .sk::before{right:100%}
.sk-left .sk::before{left:100%}
.sk-edge .sk{transform:translate(0,-50%);flex-direction:row-reverse;justify-content:flex-end}
.sk-edge .sk::before{left:100%}
.sk-edge .sk em{min-width:32px;text-align:left}
.sk:hover b{color:var(--m-accent)}
.cD .dnahint{display:none}
.cD .shero{min-height:700px}
.cD .shero .hmeta{bottom:24px}
.cD[data-state="welcome"] .hmeta{display:block}
.cD .hmeta .ug b{font-size:clamp(40px,5.6cqi,62px)}
.cD .hmeta .ug small{font-size:13px}
@container (max-width:760px){
 .cD .shero{display:flex;flex-direction:column;align-content:normal;justify-content:flex-start;min-height:0;padding-bottom:28px}
 .cD[data-state="welcome"] .shero{min-height:0;padding-top:96px}
 .cD .shero .welcome,.cD .shero .hcopy{order:1}
 .cD .shero .hstage{position:relative;inset:auto;order:2;height:460px;margin:18px calc(-1 * clamp(18px,5cqi,56px)) 0}
 .cD .shero .hmeta{order:3;position:relative;right:auto;bottom:auto;text-align:left;margin-top:18px}
 .sk b{font-size:11px}.sk em{font-size:11px}
 .cD .shero .hstage{height:520px}
 .sk .cyb{display:none}
 .sk[data-cy="sajat"] i{outline:1.5px solid #3E9B6A;outline-offset:2px}
 .sk[data-cy="ellenseges"] i{outline:1.5px solid #C8553D;outline-offset:2px}
}
/* keskeny nézet: 520–760 px között a szöveg bal oldalt, mellette a lánc a listával */
@container (min-width:521px) and (max-width:760px){
 .cD .shero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48%);column-gap:6px;align-items:start;padding-top:96px}
 .cD .shero .welcome,.cD .shero .hcopy{grid-column:1;grid-row:1;order:0}
 .cD .shero .hstage{grid-column:2;grid-row:1 / span 2;order:0;height:560px;margin:0 calc(-1 * clamp(18px,5cqi,56px)) 0 0}
 .cD .shero .hmeta{grid-column:1 / -1;grid-row:3;order:0}
 .cD .welcome h2{font-size:clamp(38px,7cqi,56px)}
 .cD .wseg input{font-size:clamp(28px,5.4cqi,44px)}
 .cD .wdot{font-size:clamp(28px,5.4cqi,44px)}
 .cD .hcopy :is(h1,h2){font-size:clamp(36px,7cqi,56px)}
}
/* telefon: a lánc a szöveg alatt, de közvetlenül utána és nagyobban */
@container (max-width:520px){
 .cD .shero .hstage{height:430px;margin-top:4px}
 .cD .wform{gap:12px}
}
.sidel{position:absolute;inset:0;pointer-events:none;z-index:2}
.sidel svg{position:absolute;inset:0;overflow:visible}
.sidel path{fill:none;stroke:var(--m-accent);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.sidel circle{fill:var(--m-accent);opacity:.8}
.sidel .back{opacity:.18}
.sl-rows{position:absolute;inset:0}
.sl{position:absolute;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transform:translateY(-50%);font:inherit;color:var(--m-text)}
.side-right .sl{transform:translate(-100%,-50%)}
.sl i{width:7px;height:7px;border-radius:50%;background:var(--m-accent);flex:0 0 auto}
.sl b{font:600 12.5px/1 var(--m-body)}
.sl em{font:500 15px/1 var(--m-display);font-style:normal;color:var(--m-accent)}
.sl .cyb{font-size:9px;padding:1px 6px}
.side-left .sl{flex-direction:row-reverse}
.side-right .sl{flex-direction:row}
.shero.has-side .dnahint{display:none}
@container (max-width:760px){.sl b{font-size:11px}.sl em{font-size:13px}}
.lmode,.nmode{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.nmode span{margin-right:4px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted)}
.nmode button{border:1px solid var(--m-line);background:var(--m-input);color:var(--m-text);font:600 13px var(--m-body);padding:8px 14px;border-radius:999px;cursor:pointer}
.nmode button:hover{border-color:var(--m-accent)}
.nmode button[aria-pressed="true"]{background:var(--m-accent);color:var(--m-onaccent);border-color:transparent}
/* űrszürke köd — hideg, ezüstös csillámpor */
.calcsite[data-bg="dark"] .mstage[data-neb="gray"]{background:radial-gradient(55% 65% at 50% 42%,rgba(150,160,178,.16),transparent 68%),radial-gradient(35% 45% at 22% 78%,rgba(110,122,145,.10),transparent 70%),radial-gradient(30% 40% at 82% 18%,rgba(130,140,160,.08),transparent 70%),#0C0D10;border-color:rgba(160,170,190,.18)}
.calcsite:not([data-bg="dark"]) .mstage[data-neb="gray"]{background:radial-gradient(55% 65% at 50% 42%,rgba(120,130,150,.16),transparent 68%),radial-gradient(35% 45% at 22% 78%,rgba(120,130,150,.10),transparent 70%),#ECEDEF;border-color:rgba(90,100,120,.18)}
.lmode span{margin-right:4px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted)}
.lmode button{border:1px solid var(--m-line);background:var(--m-input);color:var(--m-text);font:600 13px var(--m-body);padding:8px 14px;border-radius:999px;cursor:pointer}
.lmode button:hover{border-color:var(--m-accent)}
.lmode button[aria-pressed="true"]{background:var(--m-accent);color:var(--m-onaccent);border-color:transparent}
.mlabels{position:absolute;inset:0;pointer-events:none;z-index:3}
.ml{position:absolute;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:0;background:none;padding:2px 4px;font:inherit;color:var(--m-text);cursor:pointer;opacity:0;transition:opacity .25s}
.ml i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ml b{font:600 12.5px/1 var(--m-body);letter-spacing:.01em}
.ml em{font:500 12px/1 var(--mono);font-style:normal;color:var(--m-muted)}
.ml.sel b{color:var(--m-accent)}
.cyb{display:inline-block;font:600 10px/1.2 var(--mono);letter-spacing:.04em;padding:3px 7px;border-radius:999px;border:1px solid;white-space:nowrap}
.cyt.cy-sajat{color:#3E9B6A;font-weight:600}
.cyt.cy-ellenseges{color:#C8553D;font-weight:600}
.cyb.cy-sajat{color:#2F7E55;border-color:rgba(62,155,106,.45);background:rgba(62,155,106,.08)}
.cyb.cy-ellenseges{color:#A8432F;border-color:rgba(200,85,61,.45);background:rgba(200,85,61,.08)}
.chip .cyb,.pc .cyb{margin-top:4px;justify-self:start}
.pc .cyb{white-space:normal;font-size:9px;padding:2px 6px;line-height:1.25;max-width:100%}
.cres .card .cyb{justify-self:start}
.ml .cyb{margin-right:2px}
.ncy{font-size:13px;padding:9px 12px;border-radius:10px;border:1px solid}
.ncy.cy-sajat{background:rgba(62,155,106,.08);border-color:rgba(62,155,106,.35)}
.ncy.cy-ellenseges{background:rgba(200,85,61,.08);border-color:rgba(200,85,61,.35)}
.ml i.pulse{animation:dotpulse 1.8s ease-in-out infinite}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pc) 55%,transparent);transform:scale(1)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--pc) 0%,transparent);transform:scale(1.3)}}
.mbr{position:absolute;width:12px;transform:translateX(-100%);border:2px solid #3E9B6A;border-right:0;border-radius:10px 0 0 10px;background:none;padding:0;cursor:pointer;transition:opacity .25s;opacity:0}
.mbr span{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#3E9B6A;white-space:nowrap}
.mbr:hover{border-color:#2F7E55}
.mstage[data-lm="2"] .mbr,.mstage[data-lm="3"] .mbr{display:none}
/* 1 · skála: jobbra igazított oszlop a lánc bal oldalán, vékony vezetővonallal */
.mstage[data-lm="1"] .ml{transform:translate(-100%,-50%);text-align:right}
.ml .mlm{display:inline-flex;align-items:center;gap:7px}
.mcy{display:none;flex-wrap:wrap;gap:6px;align-items:center;margin:0;font-size:12px;color:var(--m-muted)}
.mcy span{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.mstage[data-lm="1"] .ml .mlm{flex-direction:row-reverse}
.ml .mlb{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.mstage[data-lm="2"] .ml .mlb,.mstage[data-lm="3"] .ml .mlb{display:none}
.mstage[data-lm="1"] .ml::after{content:"";position:absolute;left:100%;top:50%;width:var(--lead,20px);border-top:1px dashed var(--m-line)}
.mstage[data-lm="1"] .ml i{order:-1}
/* 2 · szám alatt: apró, csupa nagybetűs felirat */
.mstage[data-lm="2"] .ml{transform:translate(-50%,0);padding:1px 3px}
.mstage[data-lm="2"] .ml b{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted)}
.mstage[data-lm="2"] .ml em,.mstage[data-lm="2"] .ml i{display:none}
/* 3 · rámutatásra: buborék */
.mtip{position:absolute;z-index:4;transform:translate(-50%,calc(-100% - 16px));display:grid;grid-template-columns:auto auto;gap:2px 8px;align-items:center;padding:9px 12px;border-radius:12px;border:1px solid var(--m-line);background:var(--m-navbg);backdrop-filter:blur(10px);box-shadow:0 10px 30px -14px rgba(0,0,0,.4);pointer-events:none;white-space:nowrap}
.mtip i{width:9px;height:9px;border-radius:50%;grid-row:1}
.mtip b{font:600 13px var(--m-body);color:var(--m-text)}
.mtip em{font:500 12px var(--mono);font-style:normal;color:var(--m-muted);grid-column:2}
.mtip small{grid-column:1/-1;font-size:12px;color:var(--m-muted)}
.mtip[hidden]{display:none}
.mstage{position:relative;height:560px;border-radius:20px;border:1px solid var(--m-line);background:radial-gradient(60% 70% at 50% 40%,rgba(214,180,110,.22),transparent 65%),var(--m-bg);overflow:hidden;touch-action:pan-y}
.mstage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.msplit{position:absolute;z-index:4;top:12px;right:12px;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;border:1px solid var(--m-accent);background:var(--m-bg);color:var(--m-accent);font:600 12px/1 var(--m-body);cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.35)}
.msplit svg{width:16px;height:16px}
.msplit:hover{background:var(--m-accent);color:var(--m-onaccent)}
.mkey{position:absolute;left:16px;bottom:14px;display:flex;align-items:center;gap:8px;font:500 11px var(--mono);color:var(--m-muted)}
.mkey i{width:22px;height:3px;border-radius:2px;display:inline-block}.mkey .ka{background:#B08A3E}.mkey .kb{background:#3A6EA5;margin-left:10px}
.hlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:8px}
.hlist button{width:100%;display:grid;grid-template-columns:10px 1fr auto;grid-template-areas:"d r n" "d t t";gap:2px 10px;align-items:center;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--m-line);background:var(--m-input);color:var(--m-text);font:inherit;cursor:pointer;transition:border-color .25s,transform .25s}
.hlist button:hover{border-color:var(--m-accent);transform:translateY(-1px)}
.hlist i{grid-area:d;align-self:start;margin-top:5px}.hlist span{grid-area:r;font-size:14px;font-weight:600}.hlist b{grid-area:n;font:500 18px/1 var(--m-display);color:var(--m-accent)}.hlist em{grid-area:t;font-style:normal;font-size:12.5px;color:var(--m-muted)}
.merged .fine{font:12px var(--mono);color:var(--m-muted)}
.npop .ldot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:1px}
.npop .nbig small{font-size:.5em;color:var(--m-muted)}
@container (max-width:600px){
  .mstage[data-lm="1"] .ml[data-r="8"] b,.mstage[data-lm="1"] .ml .cyb{display:none}
  .mstage[data-lm="1"] .ml[data-cy="sajat"] i{outline:1.5px solid #3E9B6A;outline-offset:2px}
  .mstage[data-lm="1"] .ml[data-cy="ellenseges"] i{outline:1.5px solid #C8553D;outline-offset:2px}
  .mcy:not([hidden]){display:flex}
}
@container (max-width:760px){
  .ml{gap:5px}.ml .mlm{gap:5px}.ml b{font-size:11px}.ml em{font-size:10px}.ml .cyb{font-size:8.5px;padding:1px 5px}.ml i{width:7px;height:7px}
  .prow{flex-direction:column}
  .addp{flex-basis:auto}
  .mid{padding-block:4px}.harm{width:auto;height:auto;grid-auto-flow:column;padding:12px 20px;border-radius:999px}
  .hwarn{position:static}
  .person.enter{animation-name:slideup}
  .pdna{height:320px}.mstage{height:380px}
  .hsum{margin-left:0}
}
@keyframes slideup{from{opacity:0;transform:translateY(40px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

@container (max-width:460px){.site .snav{inset:10px 10px auto;gap:8px;padding:8px 8px 8px 14px}.bgpick button{font-size:0;padding:8px 9px;gap:0}.bgpick button i{width:13px;height:13px}.nebpick+.bgpick{margin-left:2px}}