/* test-rutin.css — a test → rutin jelenet (test-rutin.jsx). Tinta a csonton: a tábla tintája kitölti a képet. */
.trs{position:relative;width:100vw;margin-left:calc(50% - 50vw)}
.tr-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tr-ink{position:absolute;inset:0;background:var(--ink-900)}
.tr-field{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-mask-image:radial-gradient(farthest-side at 50% 56%,#000 0,rgba(0,0,0,.75) 35%,transparent 100%);mask-image:radial-gradient(farthest-side at 50% 56%,#000 0,rgba(0,0,0,.75) 35%,transparent 100%)}
.tr-frame{position:absolute;border:1px solid var(--line-gold);pointer-events:none}
.tr-frame i{position:absolute;width:16px;height:16px;border:1px solid var(--line-gold);opacity:.7}
.tr-frame i:nth-child(1){left:9px;top:9px;border-right:0;border-bottom:0}
.tr-frame i:nth-child(2){right:9px;top:9px;border-left:0;border-bottom:0}
.tr-frame i:nth-child(3){left:9px;bottom:9px;border-right:0;border-top:0}
.tr-frame i:nth-child(4){right:9px;bottom:9px;border-left:0;border-top:0}
.tr-in{position:relative;width:100%;max-width:calc(var(--container) - 64px);padding:0 calc(var(--gutter) + 12px);box-sizing:border-box;transform-origin:50% 50%;color:var(--bone-200)}
.tr-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}

/* a fej: három állapot egy cellában (a magasság a legnagyobbé, így semmi nem ugrik) */
.tr-cap{display:grid;margin-bottom:clamp(14px,2vw,26px)}
.tr-cap>*{grid-area:1/1;align-self:center}
.tr-capA{text-align:center;display:grid;gap:14px;justify-items:center}
.tr-hiv{margin:0;max-width:900px;font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.18;color:var(--bone-100);text-wrap:balance}
.tr-hiv em{font-weight:400;color:var(--gold-bright)}
.tr-hint{font-family:var(--font-sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--gold-bright);animation:psScrollPulse 2.4s ease-in-out infinite}
.tr-capB{text-align:center;display:grid;gap:10px;justify-items:center}
.tr-k,.tr-pelda{display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;color:var(--gold-bright)}
.tr-h{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.06;color:var(--bone-100);text-wrap:balance}
.tr-l{margin:0;max-width:760px;font-family:var(--font-display);font-weight:300;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.35;color:rgba(233,227,214,.82);text-wrap:pretty}
.tr-l em{color:var(--gold-bright)}
.tr-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,3.4vw,48px);align-items:center;text-align:left}
.tr-top .tr-pelda{margin-bottom:10px}
.tr-top .rd-lead{margin:0;max-width:none;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08}
.tr-lead2{margin:12px 0 0;font-family:var(--font-sans);font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.55;color:rgba(233,227,214,.8)}
.tr-lead2 b{font-weight:500;color:var(--gold-bright)}
.tr-all{display:inline-block;margin-left:6px;color:var(--gold-bright);text-decoration:none;border-bottom:1px solid var(--line-gold);white-space:nowrap}
.tr-all:hover{color:var(--bone-100);border-bottom-color:var(--gold-bright)}
.tr-top .rd-cost{margin:0;padding:14px 18px;max-width:none;text-align:center}
.tr-top .rd-cost-n{font-size:clamp(2rem,3.4vw,2.8rem);margin:6px 0 2px}
.tr-top .rd-cost-s{margin:0;font-size:.9rem}

/* a tábla rácsa — ugyanaz, mint a LivingBody-ban */
.tr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,29%) minmax(0,1fr);gap:clamp(18px,2.4vw,38px);align-items:center}
.trs .ps-box-col{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.trs .ps-box.on .ps-box-big{font-size:clamp(2.1rem,3.4vw,3.1rem)}
.trs .ps-box-lines{position:absolute;left:-1px;right:-1px;top:100%;z-index:4;padding:0 clamp(18px,1.8vw,28px);background:var(--ink-900);border:1px solid var(--accent);border-top:0;box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.trs .ps-box.on{background:color-mix(in oklch,var(--ink-900) 88%,var(--accent))}
.tr-card:has(.ps-box.on){z-index:6}
.trs .ps-box.on .ps-box-sub{white-space:normal}
.trs .ps-box.on .ps-box-lines{margin-top:0;padding-top:12px;padding-bottom:16px}

/* a fordulás */
.tr-card{position:relative;display:grid;perspective:1400px}
.tr-face{grid-area:1/1;display:grid}
.tr-face>*{box-sizing:border-box}
.tr-card.mid .tr-face>*{box-shadow:0 0 26px -8px var(--hue)}

/* a készítmény-kártya — nagyobban, a tíz készítmény kártyájának nyelvén: név · mire jó · témajelek · szám */
.tr-pc{position:relative;display:grid;grid-template-columns:clamp(84px,7.6vw,118px) minmax(0,1fr);align-items:center;gap:clamp(12px,1.4vw,20px);width:100%;margin:0;padding:clamp(14px,1.4vw,20px) clamp(14px,1.6vw,24px);text-align:left;cursor:pointer;font:inherit;color:inherit;background:rgba(233,227,214,.03);border:1px solid rgba(198,168,104,.22);border-top:2px solid var(--hue);transition:border-color 300ms var(--ease-out),background 300ms var(--ease-out),box-shadow 400ms var(--ease-out)}
.tr-pc:hover,.tr-pc:focus-visible{outline:none;background:rgba(198,168,104,.09);border-color:var(--accent);border-top-color:var(--hue)}
.tr-pc.on{background:color-mix(in oklch,var(--hue) 14%,transparent);border-color:var(--hue);box-shadow:0 0 34px -10px var(--hue)}
.tr-pc-img{display:flex;align-items:center;justify-content:center;height:clamp(112px,11vw,172px)}
.tr-pc-img img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.65))}
.tr-pc-tx{display:grid;gap:9px;min-width:0}
.tr-pc-n{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.02;color:var(--bone-100)}
.tr-pc-k{padding-top:8px;border-top:1px solid color-mix(in oklch,var(--sig) 55%,transparent);font-family:var(--font-display);font-weight:500;font-size:clamp(.92rem,1.15vw,1.08rem);line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:var(--sig);text-wrap:balance}
.tr-pc-tm{display:flex;flex-wrap:wrap;gap:6px 12px}
.tr-pc-tm-i{display:flex;align-items:center;gap:6px}
.tr-pc-tm-g{display:flex;width:clamp(24px,2.2vw,30px);height:clamp(24px,2.2vw,30px)}
.tr-pc-tm-g svg{width:100%;height:100%}
.tr-pc-tm-l{font-family:var(--font-sans);font-size:clamp(.7rem,.82vw,.78rem);line-height:1.2;color:rgba(233,227,214,.78)}
.tr-pc-m{font-family:var(--font-sans);font-size:clamp(.8rem,.95vw,.9rem);line-height:1.4;color:rgba(233,227,214,.72)}
.tr-pc-m b{font-weight:500;color:var(--gold-bright)}
.tr-pc-m i{font-style:normal;margin:0 7px;color:var(--fg-faint)}
.tr-pc-more{position:absolute;right:10px;top:8px;font-size:12px;color:var(--gold-bright);opacity:.7}
/* a tábla oszlopai szélesebbek, a figura keskenyebb — a készítmények kapják a teret */
.tr-in{max-width:calc(var(--container) + 120px)}
.tr-grid{grid-template-columns:minmax(0,1fr) minmax(200px,24%) minmax(0,1fr)}

/* az eltelt idő-doboz (a „Mióta ezt nézed” hátoldala) */
.tr-split{display:grid;gap:10px}
.tr-clock{font-weight:300;font-size:clamp(2rem,3.2vw,2.9rem);line-height:1;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.tr-split-r{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:10px;padding-top:9px;border-top:1px solid rgba(198,168,104,.22)}
.tr-split-r span{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.2em;color:rgba(233,227,214,.55)}
.tr-split-r b{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1;color:var(--bone-100);font-variant-numeric:tabular-nums}
.tr-split-r i{font-style:normal;font-family:var(--font-sans);font-size:.82rem;color:rgba(233,227,214,.62);text-align:right}
.tr-split-r.dim{opacity:.45}

/* a figura: gyűrű, belső arany, a bőr fénye */
.tr-figw{position:relative}
.trs .ps-fig{position:relative}
.tr-ring{position:absolute;left:50%;top:50%;width:106%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;z-index:3}
.tr-mask{position:absolute;inset:0;overflow:hidden;-webkit-mask:url(assets/vitruvian-sm.png) center/contain no-repeat;mask:url(assets/vitruvian-sm.png) center/contain no-repeat;pointer-events:none}
.tr-fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(224,196,126,.92),rgba(201,168,106,.5));box-shadow:0 -8px 26px rgba(201,168,106,.5)}
.tr-skin{mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 42%,rgba(255,232,168,1),rgba(224,196,126,.75) 55%,rgba(201,168,106,.4) 76%,transparent 88%)}
.tr-tot{display:flex;justify-content:center;align-items:baseline;gap:12px;margin-top:26px;transition:opacity 600ms var(--ease-out)}
.tr-tot span{font-family:var(--font-sans);font-size:11px;letter-spacing:.2em;color:rgba(233,227,214,.55)}
.tr-tot b{font-weight:300;font-size:clamp(2rem,3vw,2.8rem);line-height:1;color:var(--gold-bright);font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(224,196,126,.4)}
.tr-end{margin:0;text-align:center;align-self:center;font-style:italic;font-weight:300;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.2;color:var(--bone-100)}
.tr-end span{color:var(--gold-bright)}

/* a koppintásra nyíló lap */
.tr-ask{border-top:2px solid var(--hue)}
.tr-ask .rd-ask-h{margin-bottom:12px}
.tr-ask-m{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);margin:0 0 14px}
.tr-ask-m span{display:grid;gap:4px;padding:10px 8px;text-align:center}
.tr-ask-m span+span{border-left:1px solid var(--line-strong)}
.tr-ask-m i{font-style:normal;font-family:var(--font-sans);font-size:10px;letter-spacing:.2em;color:var(--fg-3)}
.tr-ask-m b{font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1;color:var(--gold-deep)}
.tr-ask-m b.sm{font-family:var(--font-sans);font-size:.95rem;line-height:1.6rem;font-weight:500}
.tr-ask-l{margin:0 0 16px;text-align:left}
.tr-ask-k{display:block;margin-bottom:8px;font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.18em;color:var(--gold-deep)}
.tr-ask-l ul{list-style:none;margin:0;padding:0}
.tr-ask-l li{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--line);font-family:var(--font-sans);font-size:.9rem;line-height:1.35}
.tr-ask-l li b{font-weight:500;text-align:right;white-space:nowrap}
.tr-ask-s{display:block;margin-top:8px;font-family:var(--font-sans);font-size:.82rem;color:var(--fg-3)}

/* a rutin vége, tintán */
.tr-rest{position:relative;background:var(--ink-900);padding:clamp(28px,4vw,56px) var(--gutter) var(--sp-7);text-align:center}
.tr-rest-in{max-width:var(--container);margin:0 auto}
.tr-rest .rd-close2{margin-top:0}
.tr-src{max-width:700px;margin:var(--sp-6) auto 0;text-align:center}
.tr-src .ps-src-k{color:var(--gold-bright)}
.tr-src .ps-src-p,.tr-src .ps-src-p em{color:rgba(233,227,214,.55)}

/* mozgás nélkül: a végállapot, nem ragad */
.tr-static .tr-stick{position:relative;height:auto;padding:var(--sp-6) 0}

/* mobil: a figura felül, alatta a hat kártya két hasábban */
.tr-mob .tr-in{max-width:none;padding:0 calc(var(--gutter) + 6px)}
.tr-mob .tr-grid{grid-template-columns:1fr 1fr;gap:8px}
.tr-mob .ps-box-col{display:contents}
.tr-mob .tr-figw{grid-column:1/-1;order:-1;width:min(230px,56vw);margin:0 auto 18px}
.tr-mob .tr-tot{margin-top:18px}
.tr-mob .tr-tot b{font-size:1.8rem}
.tr-mob .ps-box{padding:10px 12px}
.tr-mob .ps-box-label{font-size:9.5px;letter-spacing:.16em}
.tr-mob .ps-box-big,.tr-mob .ps-box.on .ps-box-big{font-size:1.45rem;margin-top:6px}
.tr-mob .ps-box-sub{font-size:.78rem;margin-top:4px}
.tr-mob .ps-box-lines{font-size:.8rem}.tr-mob .ps-box-lines li{font-size:.78rem;line-height:1.45}.tr-mob .ps-box{cursor:pointer}
.tr-mob .ps-box.on{transform:none}
.tr-mob .ps-box-col>.tr-card:nth-child(even) .ps-box-lines,.tr-mob .tr-grid>.ps-box-col:last-child .ps-box-lines{left:auto}
.tr-mob .ps-live{gap:6px 10px;margin-top:8px;padding-top:8px}
.tr-mob .ps-live-cap{font-size:8.5px;letter-spacing:.12em}
.tr-mob .ps-live-val{font-size:1rem}
.tr-mob .tr-pc{grid-template-columns:46px minmax(0,1fr);gap:8px;padding:10px}
.tr-mob .tr-pc-img{height:92px}
.tr-mob .tr-pc-n{font-size:1.1rem}
.tr-mob .tr-pc-tx{gap:6px}
.tr-mob .tr-pc-k{padding-top:5px;font-size:.72rem;letter-spacing:.03em}
.tr-mob .tr-pc-tm-l{display:none}
.tr-mob .tr-pc-tm-g{width:22px;height:22px}
.tr-mob .tr-pc-m{font-size:.74rem}
.tr-mob .tr-pc-m i{margin:0 4px}
.tr-mob .tr-split{gap:6px}
.tr-mob .tr-clock{font-size:1.6rem}
.tr-mob .tr-split-r{grid-template-columns:auto 1fr;gap:6px;padding-top:6px}
.tr-mob .tr-split-r i{display:none}
.tr-mob .tr-split-r b{font-size:1.15rem;text-align:right}
.tr-mob .tr-top{grid-template-columns:1fr;text-align:center;gap:12px}
.tr-mob .tr-lead2{display:none}
.tr-mob .tr-top .rd-cost{padding:10px 12px}
.tr-mob .tr-top .rd-cost-n{font-size:1.9rem}
.tr-mob .tr-hiv{font-size:1.35rem}
.tr-mob .tr-h{font-size:1.65rem}
.tr-mob .tr-l{font-size:1.02rem}
.tr-mob .tr-end{font-size:1.25rem}
@media (prefers-reduced-motion:reduce){.tr-hint{animation:none}}

/* a tábla dobozai tömörek — a szöveg-mátrix csak mögöttük, a résekben látszik */
.trs .ps-box,.trs .tr-pc{background:color-mix(in oklch,var(--ink-900) 94%,var(--bone-100))}
.trs .ps-box:hover{border-color:rgba(198,168,104,.5)}
.trs .ps-box{cursor:default}
.tr-figw .ps-fig-cap{bottom:-14px}
/* közepes szélesség (760–1100 px): három hasáb marad, a figura keskenyebb */
@media (max-width:1100px) and (min-width:761px){.tr-grid{grid-template-columns:minmax(0,1fr) minmax(170px,22%) minmax(0,1fr);gap:16px}.tr-in{padding:0 calc(var(--gutter) + 4px)}.tr-pc{grid-template-columns:96px minmax(0,1fr);gap:12px}.tr-pc-img{height:124px}.tr-pc-tm-l{display:none}}

.tr-pc-img img{width:100%;height:100%}
/* alacsony képernyőn (laptop, kis ablak): a természetes magasságot csökkentjük, nem a betűt */
@media (max-height:780px){
.tr-cap{margin-bottom:10px}.tr-lead2{display:none}.tr-top .tr-pelda{margin-bottom:6px}.tr-top .rd-lead{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.tr-top .rd-cost{padding:8px 14px}.tr-top .rd-cost-n{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:2px 0 0}.tr-top .rd-cost-s{display:none}
.tr-hiv{font-size:clamp(1.3rem,2.2vw,1.9rem)}.tr-h{font-size:clamp(1.6rem,2.8vw,2.4rem)}.tr-l{font-size:1.02rem}
.trs .ps-box{padding:12px 16px}.trs .ps-box-big{font-size:clamp(1.7rem,2.6vw,2.4rem)!important;margin-top:6px}.trs .ps-box-sub{font-size:.85rem;margin-top:4px}
.trs .ps-box-col{gap:10px}.tr-grid{gap:14px 20px}
.tr-pc{padding:10px 14px;gap:12px}.tr-pc-img{height:clamp(96px,9vw,128px)}.tr-pc-tx{gap:6px}.tr-pc-k{padding-top:5px}
.tr-tot{margin-top:16px}.tr-tot b{font-size:2rem}
.trs .ps-live{margin-top:8px;padding-top:8px;gap:8px 16px}.trs .ps-live-val{font-size:1.1rem}
.tr-split{gap:6px}.tr-clock{font-size:2rem}.tr-split-r{padding-top:6px}}

/* TÖMÖREBBEN (2026.10.11 éjjel, a felhasználó kérése): a két oldal közel egy magas — a rendszer-doboz tartalma középen ül, a készítmény-kártya alacsonyabb */
.trs .ps-box{display:flex;flex-direction:column;justify-content:center;padding:clamp(12px,1.2vw,18px) clamp(16px,1.6vw,24px)}
.trs .ps-box-big{margin-top:6px}
.trs .ps-box-sub{margin-top:4px}
.trs .ps-box-col{gap:clamp(8px,1vw,12px)}
.tr-pc{padding:clamp(10px,1vw,14px) clamp(14px,1.4vw,20px);gap:clamp(10px,1.2vw,16px);grid-template-columns:clamp(70px,6.4vw,100px) minmax(0,1fr)}
.tr-pc-img{height:clamp(92px,8.6vw,132px)}
.tr-pc-tx{gap:6px}
.tr-pc-k{padding-top:6px}
.tr-split{justify-content:center}

/* a rutin vége és a tíz belépője közt kevesebb levegő (2026.10.11 éjjel) */
.tr-rest{padding-bottom:clamp(18px,2.6vw,32px)}
.tr-rest .rd-foot{margin-top:clamp(24px,3vw,40px);padding-top:clamp(18px,2.4vw,28px)}
.tr-src{margin-top:clamp(18px,2.4vw,28px)}

/* a fej ne érjen a keret széléhez — a tábla belső felső levegője (2026.10.11 éjjel) */
.trs .tr-in{padding-top:clamp(28px,4vh,52px);padding-bottom:clamp(20px,3vh,40px)}
/* a felső felirat ne tapadjon a kerethez (2026.10.11) */
.trs .tr-capA{padding-top:clamp(18px,3vh,36px)}
.trs .tr-cap{margin-bottom:clamp(22px,3vh,36px)}
/* MOBIL, RENDEZETTEBBEN (2026.10.11, a felhasználó: „mobilon a Vitruvius nagyon össze van csúszva”):
   két egyenlő hasáb, a kártya nem lóg ki, a készítmény-oldal tömör (név · mire jó · szám), a témajelek csak a tíz kártyáján */
.tr-mob .tr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch}
.tr-mob .tr-card,.tr-mob .tr-face,.tr-mob .tr-face>*{min-width:0}
.tr-mob .tr-face>*{overflow:hidden}
.tr-mob .tr-figw{width:min(196px,50vw);margin:0 auto 6px}
.tr-mob .tr-tot{margin-top:12px;gap:8px}
.tr-mob .tr-tot span{font-size:9.5px;letter-spacing:.16em}
.tr-mob .tr-tot b{font-size:1.5rem}
.tr-mob .tr-pc{grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;padding:9px 10px}
.tr-mob .tr-pc-img{height:64px}
.tr-mob .tr-pc-tm,.tr-mob .tr-pc-more{display:none}
.tr-mob .tr-pc-tx{gap:4px}
.tr-mob .tr-pc-n{font-size:1rem;line-height:1.05;overflow-wrap:anywhere}
.tr-mob .tr-pc-k{padding-top:4px;font-size:.62rem;line-height:1.25;letter-spacing:.02em}
.tr-mob .tr-pc-m{font-size:.68rem;line-height:1.35}
.tr-mob .tr-cap{margin-bottom:12px}
.tr-mob .tr-capA{padding-top:8px}
.tr-mob .tr-top .rd-lead{font-size:1.35rem}
.tr-mob .tr-top .rd-cost{padding:8px 10px}
.tr-mob .tr-top .rd-cost-n{font-size:1.6rem;margin:2px 0 0}
.tr-mob .tr-top .rd-cost-s{display:none}
/* a fő üzenet nagyban (2026.10.11, a felhasználó kérése: „fontos üzenet itt”) */
.trs .tr-hiv{max-width:1180px;font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.1}
@media (max-height:780px){.trs .tr-hiv{font-size:clamp(1.9rem,3.8vw,3.2rem)}}
.tr-mob .tr-hiv{font-size:1.85rem!important;line-height:1.14}
.trs .tr-capA{gap:20px}
/* OLVASHATÓBBAN (2026.10.11, a felhasználó: „kicsik a betűk, pedig van hely”): szélesebb kép, nagyobb betűk —
   a szélesebb kártyán kevesebb sorba törik a szöveg, így a jelenet nem lesz magasabb, és kevésbé kell kicsinyíteni */
@media (min-width:761px){
.trs .tr-in{max-width:min(1720px,100%);padding-left:clamp(28px,3vw,56px);padding-right:clamp(28px,3vw,56px)}
.trs .tr-grid{grid-template-columns:minmax(0,1fr) minmax(200px,21%) minmax(0,1fr);gap:clamp(16px,2vw,34px)}
.trs .tr-pc{grid-template-columns:clamp(70px,5.6vw,104px) minmax(0,1fr);padding:clamp(12px,1.1vw,18px) clamp(16px,1.5vw,26px)}
.trs .tr-pc-n{font-size:clamp(1.6rem,2.2vw,2.3rem)}
.trs .tr-pc-k{font-size:clamp(1rem,1.25vw,1.3rem)}
.trs .tr-pc-tm{flex-wrap:wrap;gap:6px 16px}
.trs .tr-pc-tm-l{font-size:clamp(.9rem,1vw,1.05rem);color:rgba(233,227,214,.88)}
.trs .tr-pc-tm-g{width:clamp(26px,2.2vw,34px);height:clamp(26px,2.2vw,34px)}
.trs .tr-pc-m{font-size:clamp(1rem,1.1vw,1.15rem);color:rgba(233,227,214,.86)}
.trs .tr-pc-more{font-size:15px}
.trs .ps-box-label{font-size:clamp(11.5px,.9vw,13.5px)}
.trs .ps-box-big{font-size:clamp(2.1rem,3vw,3.2rem)}
.trs .ps-box-sub{font-size:clamp(1rem,1.1vw,1.15rem)}
.trs .tr-k,.trs .tr-pelda{font-size:clamp(11.5px,.9vw,13.5px)}
.trs .tr-top .rd-lead{font-size:clamp(2rem,3.4vw,3.2rem)}
.trs .tr-lead2{font-size:clamp(1.05rem,1.25vw,1.3rem);color:rgba(233,227,214,.88)}
.trs .tr-h{font-size:clamp(2.2rem,4vw,3.8rem)}
.trs .tr-l{font-size:clamp(1.25rem,1.8vw,1.7rem)}
.trs .tr-end{font-size:clamp(1.8rem,3.4vw,3rem)}
.trs .tr-tot span{font-size:13px}
.trs .tr-tot b{font-size:clamp(2.4rem,3.4vw,3.4rem)}
.trs .tr-figw .ps-fig-cap{font-size:13px}
.trs .tr-clock{font-size:clamp(2.4rem,3.4vw,3.4rem)}
.trs .tr-split-r span{font-size:12px}
.trs .tr-split-r b{font-size:1.8rem}
.trs .tr-split-r i{font-size:1rem;color:rgba(233,227,214,.78)}
.trs .ps-live-cap{font-size:11.5px}
.trs .ps-live-val{font-size:clamp(1.3rem,1.6vw,1.7rem)}
.trs .tr-top .rd-cost-n{font-size:clamp(2.4rem,3.6vw,3.4rem)}
.trs .tr-top .rd-cost-s{font-size:1.05rem}
}
/* NEM KICSINYÍTÜNK (2026.10.11 este, a felhasználó: „nagyon kicsik a betűk, pedig van hely”): a jelenet a képernyő magasságához
   igazodva kicsinyít — laptopon (~650–900 px magas) 0,6-ig zsugorodott, ettől lett apró minden. Itt a kártyák lesznek
   alacsonyabbak (kisebb flakon, a témajelek egy-két sorban, kevesebb belső levegő), így a jelenet ~1:1-ben fér ki. */
@media (min-width:761px) and (max-height:920px){
.trs .tr-in{padding-top:clamp(10px,2vh,22px);padding-bottom:clamp(8px,1.4vh,16px)}
.trs .tr-capA{padding-top:clamp(6px,1.4vh,16px);gap:12px}
.trs .tr-cap{margin-bottom:clamp(12px,2vh,22px)}
.trs .tr-top{gap:clamp(16px,2.4vw,36px)}
.trs .tr-top .tr-pelda{margin-bottom:6px}
.trs .tr-top .rd-lead{font-size:clamp(1.8rem,2.9vw,2.8rem)}
.trs .tr-lead2{margin-top:8px;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.45}
.trs .tr-top .rd-cost{padding:10px 16px}
.trs .tr-top .rd-cost-n{font-size:clamp(2.2rem,3.2vw,3rem);margin:2px 0 0}
.trs .tr-grid{gap:clamp(10px,1.4vh,16px) clamp(16px,2vw,30px)}
.trs .ps-box-col{gap:clamp(8px,1.2vh,12px)}
.trs .tr-pc{grid-template-columns:clamp(50px,4.2vw,72px) minmax(0,1fr);gap:clamp(10px,1vw,16px);padding:clamp(8px,1.2vh,14px) clamp(14px,1.3vw,22px)}
.trs .tr-pc-img{height:clamp(78px,12vh,118px)}
.trs .tr-pc-tx{gap:5px}
.trs .tr-pc-n{font-size:clamp(1.5rem,2vw,2.1rem)}
.trs .tr-pc-k{padding-top:5px;font-size:clamp(.95rem,1.1vw,1.15rem);line-height:1.15}
.trs .tr-pc-tm{gap:3px 14px}
.trs .tr-pc-tm-g{width:clamp(22px,1.9vw,28px);height:clamp(22px,1.9vw,28px)}
.trs .tr-pc-tm-l{font-size:clamp(.9rem,.95vw,1rem)}
.trs .tr-pc-m{font-size:clamp(.98rem,1.05vw,1.1rem)}
.trs .ps-box{padding:clamp(10px,1.4vh,16px) clamp(16px,1.5vw,24px)}
.trs .ps-box-big{font-size:clamp(2rem,2.8vw,3rem)}
.trs .tr-tot{margin-top:14px}
.trs .tr-split{gap:6px}
.trs .tr-split-r{padding-top:6px}
.trs .tr-hiv{font-size:clamp(1.9rem,3.8vw,3.4rem)}
}
@media (min-width:761px) and (max-height:720px){
.trs .tr-lead2{display:none}
.trs .tr-pc-img{height:clamp(70px,11vh,96px)}
.trs .tr-pc-k{font-size:clamp(.9rem,1vw,1.05rem)}
}

/* ═══ ÉLMÉNY-KÖR (2026.10.11 késő este, a felhasználó: „mire látnám, mire kattintsak, már fordul” · „mobilon szinte semmi nem látszik”) ═══ */
/* a felhívás: gomb + halk útmutatás */
.tr-cue{display:grid;justify-items:center;gap:12px}
.tr-cue-b{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 24px;font:500 clamp(.95rem,1.1vw,1.1rem)/1 var(--font-sans);letter-spacing:.06em;color:var(--bone-100);background:color-mix(in oklch,var(--ink-900) 90%,var(--gold));border:1px solid var(--line-gold);cursor:pointer;transition:background 280ms var(--ease-out),border-color 280ms var(--ease-out),color 280ms var(--ease-out)}
.tr-cue-b i{font-style:normal;color:var(--gold-bright);animation:psScrollPulse 2.4s ease-in-out infinite}
.tr-cue-b:hover,.tr-cue-b:focus-visible{outline:none;border-color:var(--gold-bright);background:color-mix(in oklch,var(--ink-900) 78%,var(--gold))}
.trs .tr-hint{font-size:clamp(10.5px,.8vw,12px);letter-spacing:.18em;animation:none;color:color-mix(in oklch,var(--bone-200) 70%,transparent)}
/* a rendszer-doboz mint gomb */
.trs .tr-sys{display:flex;width:100%;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tr-sys>span{display:block}
.tr-sys-more{margin-top:10px;font-family:var(--font-sans);font-size:clamp(11px,.85vw,12.5px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);opacity:.75;transition:opacity 280ms var(--ease-out)}
.trs .tr-sys:focus-visible{outline:none;border-color:var(--accent);background:color-mix(in oklch,var(--ink-900) 86%,var(--accent))}
.tr-sys.on .tr-sys-more{display:none}
.trs .tr-sys .ps-box-lines{text-align:left}
.trs.tr-mob .tr-sys .ps-box-lines{display:none}
.tr-exp .tr-sys-more{animation:trMore 3.2s ease-in-out infinite}
.tr-exp .ps-box-col .tr-card:nth-child(2) .tr-sys-more{animation-delay:.5s}
.tr-exp .ps-box-col .tr-card:nth-child(3) .tr-sys-more{animation-delay:1s}
@keyframes trMore{0%,100%{opacity:.55}50%{opacity:1}}
/* a lépés-sáv */
.tr-steps{display:flex;justify-content:center;gap:clamp(6px,1.4vw,22px);margin-top:clamp(14px,2.2vh,26px)}
.tr-step{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;font:500 clamp(11px,.85vw,12.5px)/1 var(--font-sans);letter-spacing:.18em;color:color-mix(in oklch,var(--bone-200) 55%,transparent);background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;transition:color 280ms var(--ease-out),border-color 280ms var(--ease-out)}
.tr-step i{font-style:normal;font-family:var(--font-display);font-size:1.25em;letter-spacing:0;color:var(--gold-bright);opacity:.6}
.tr-step:hover,.tr-step:focus-visible{outline:none;color:var(--bone-100)}
.tr-step.done{color:color-mix(in oklch,var(--bone-200) 75%,transparent)}
.tr-step.on{color:var(--bone-100);border-bottom-color:var(--gold-bright)}
.tr-step.on i{opacity:1}

/* a rendszer olvasólapja */
.tr-sh{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);background:color-mix(in oklch,var(--ink-900) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:trFade 500ms var(--ease-out)}
.tr-sh-p{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);grid-template-areas:"fig tx" "nav nav";gap:clamp(20px,3vw,48px) clamp(24px,4vw,64px);width:min(1080px,100%);max-height:100%;overflow:auto;padding:clamp(28px,4vw,60px);color:var(--bone-200);background:var(--ink-900);border:1px solid var(--line-gold);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.tr-sh-c i{position:absolute;width:16px;height:16px;border:1px solid var(--line-gold)}
.tr-sh-c i:nth-child(1){left:10px;top:10px;border-right:0;border-bottom:0}.tr-sh-c i:nth-child(2){right:10px;top:10px;border-left:0;border-bottom:0}.tr-sh-c i:nth-child(3){left:10px;bottom:10px;border-right:0;border-top:0}.tr-sh-c i:nth-child(4){right:10px;bottom:10px;border-left:0;border-top:0}
.tr-sh-fig{grid-area:fig;align-self:center;display:grid;gap:18px;justify-items:center}
.tr-sh-fig .ps-fig{width:100%;max-width:380px}
.tr-sh-dots{display:flex;gap:2px}
.tr-sh-dots button,.tr-mnav-d button{display:flex;align-items:center;justify-content:center;width:36px;height:44px;padding:0;background:none;border:0;cursor:pointer}
.tr-sh-dots i,.tr-mnav-d i{display:block;width:8px;height:8px;border:1px solid var(--line-gold);transform:rotate(45deg);transition:background 280ms var(--ease-out),border-color 280ms var(--ease-out)}
.tr-sh-dots .on i{background:var(--gold-bright);border-color:var(--gold-bright)}
.tr-sh-tx{grid-area:tx;align-self:center;animation:trFade 600ms var(--ease-out)}
.tr-sh-n{display:block;font-family:var(--font-sans);font-size:13px;letter-spacing:.22em;color:color-mix(in oklch,var(--bone-200) 60%,transparent)}
.tr-sh-n b{font-weight:500;color:var(--gold-bright)}
.tr-sh-big{margin:18px 0 0;font-weight:300;font-size:clamp(3.2rem,6.4vw,5.6rem);line-height:.95;color:var(--gold-bright)}
.tr-sh-sub{margin:14px 0 0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.2;color:var(--bone-100);text-wrap:balance}
.tr-sh-l{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;border-top:1px solid var(--line-gold)}
.tr-sh-l li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid color-mix(in oklch,var(--bone-200) 12%,transparent);font-family:var(--font-sans);font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.45;color:var(--bone-100)}
.tr-sh-l li::before{content:"＋";position:absolute;left:0;top:15px;font-size:.85rem;color:var(--gold-bright)}
.tr-sh-src{margin:14px 0 0;font-family:var(--font-sans);font-size:.85rem;font-style:italic;color:color-mix(in oklch,var(--bone-200) 55%,transparent)}
.tr-sh-nav{grid-area:nav;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding-top:clamp(14px,2vw,22px);border-top:1px solid var(--line-strong)}
.tr-sh-nav button{min-height:48px;padding:0 16px;font:500 12.5px/1 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-100);background:none;border:1px solid var(--line-strong);cursor:pointer;transition:border-color 280ms var(--ease-out),color 280ms var(--ease-out),background 280ms var(--ease-out)}
.tr-sh-nav button:first-child{justify-self:start}.tr-sh-nav button:last-child{justify-self:end}
.tr-sh-nav button:hover,.tr-sh-nav button:focus-visible{outline:none;border-color:var(--gold-bright);color:var(--gold-bright)}
.tr-sh-nav .tr-sh-x{border-color:var(--line-gold);color:var(--gold-bright)}
@keyframes trFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:760px){
.tr-sh{align-items:flex-end;padding:0}
.tr-sh-p{grid-template-columns:1fr;grid-template-areas:"fig" "tx" "nav";gap:14px;max-height:94svh;padding:22px 20px calc(16px + env(safe-area-inset-bottom));border-left:0;border-right:0;border-bottom:0}
.tr-sh-fig{gap:4px}.tr-sh-fig .ps-fig{max-width:min(46vw,190px)}
.tr-sh-n{font-size:12px}
.tr-sh-big{margin-top:10px;font-size:3rem}
.tr-sh-sub{font-size:1.3rem}
.tr-sh-l{margin-top:16px}.tr-sh-l li{padding:11px 0 11px 24px;font-size:1.05rem}.tr-sh-l li::before{top:12px}
.tr-sh-nav{grid-template-columns:48px 1fr 48px}
.tr-sh-nav button{padding:0}.tr-sh-nav button span{display:none}
}
@media (prefers-reduced-motion:reduce){.tr-sh,.tr-sh-tx,.tr-focus>*{animation:none!important}.tr-cue-b i,.tr-exp .tr-sys-more{animation:none}}

/* MOBIL · EGY NAGY KÁRTYA (a hat apró helyett): a figura felül, alatta egy olvasható kártya, lapozva ← · ◇◇◇◇◇ · → */
.trs.tr-mob .tr-in{padding:0 18px}
.trs.tr-mob .tr-hiv{font-size:1.6rem!important;line-height:1.14}
.trs.tr-mob .tr-capA{gap:14px;padding-top:4px}
.trs.tr-mob .tr-cue{gap:8px}
.trs.tr-mob .tr-cue-b{font-size:1rem;min-height:46px;padding:0 20px}
.trs.tr-mob .tr-hint{font-size:10.5px;letter-spacing:.16em}
.trs.tr-mob .tr-h{font-size:1.75rem}
.trs.tr-mob .tr-l{font-size:1.08rem}
.trs.tr-mob .tr-k,.trs.tr-mob .tr-pelda{font-size:11px;letter-spacing:.16em;line-height:1.5}
.trs.tr-mob .tr-top .rd-lead{font-size:1.5rem}
.trs.tr-mob .tr-top .rd-cost{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 12px;padding:8px 12px}
.trs.tr-mob .tr-top .rd-cost-k{font-size:10.5px;letter-spacing:.16em}
.trs.tr-mob .tr-top .rd-cost-n{font-size:1.7rem;margin:0}
.trs.tr-mob .tr-end{font-size:1.5rem}
.tr-mgrid{display:flex;flex-direction:column;align-items:center;gap:10px}
.trs.tr-mob .tr-figw{width:min(200px,50vw,24svh);margin:0 auto}
.trs.tr-mob .tr-figw .ps-fig-cap{bottom:-16px;font-size:11.5px;letter-spacing:.2em}
.trs.tr-mob .tr-tot{margin-top:22px;gap:8px;align-items:baseline}
.trs.tr-mob .tr-tot span{font-size:10.5px;letter-spacing:.16em}
.trs.tr-mob .tr-tot b{font-size:1.6rem}
.trs.tr-mob .tr-tot .tr-tot-c{margin-right:8px;color:var(--bone-100)}
.tr-focus{width:100%;max-width:440px;animation:trFade 450ms var(--ease-out)}
.tr-focus .tr-card,.tr-focus .tr-face,.tr-focus .tr-face>*{min-width:0}
.trs.tr-mob .tr-focus .tr-face>*{overflow:visible}
.trs.tr-mob .tr-sys{padding:16px 18px;min-height:150px}
.trs.tr-mob .tr-sys .ps-box-label{font-size:12px;letter-spacing:.2em}
.trs.tr-mob .tr-sys .ps-box-big{font-size:2.5rem;margin-top:8px}
.trs.tr-mob .tr-sys .ps-box-sub{font-size:1.02rem;line-height:1.4;margin-top:6px}
.trs.tr-mob .tr-sys-more{font-size:11.5px;margin-top:10px}
.trs.tr-mob .tr-pc{grid-template-columns:62px minmax(0,1fr);gap:14px;padding:14px 16px;min-height:150px}
.trs.tr-mob .tr-pc-img{height:104px}
.trs.tr-mob .tr-pc-tx{gap:6px}
.trs.tr-mob .tr-pc-n{font-size:1.55rem;line-height:1.02}
.trs.tr-mob .tr-pc-k{padding-top:6px;font-size:.92rem;line-height:1.2;letter-spacing:.04em}
.trs.tr-mob .tr-pc-tm{display:flex;gap:4px 12px}
.trs.tr-mob .tr-pc-tm-g{width:24px;height:24px}
.trs.tr-mob .tr-pc-tm-l{display:inline;font-size:.84rem}
.trs.tr-mob .tr-pc-m{font-size:.98rem;line-height:1.4}
.trs.tr-mob .tr-pc-m i{margin:0 6px}
.trs.tr-mob .tr-pc-more{display:block;font-size:15px;right:12px;top:10px}
.tr-mnav{display:flex;align-items:center;justify-content:center;gap:4px;transition:opacity 400ms var(--ease-out)}
.tr-mnav.busy{opacity:.45;pointer-events:none}
.tr-mnav-a{width:48px;height:44px;padding:0;font:400 1.2rem/1 var(--font-sans);color:var(--gold-bright);background:none;border:1px solid var(--line-gold);cursor:pointer}
.tr-mnav-d .on i{background:var(--hue);border-color:var(--hue)}
.trs.tr-mob .tr-steps{gap:0;margin-top:8px}
.trs.tr-mob .tr-step{gap:6px;min-height:36px;padding:0 8px;font-size:10px;letter-spacing:.12em}
@media (max-width:380px){.trs.tr-mob .tr-step span{display:none}.trs.tr-mob .tr-step.on span{display:inline}}

/* NEM RAGAD (2026.10.11 késő este): sima, képernyőnyi szakasz; tovább a gombbal */
.trs.tr-free .tr-stick{position:relative;height:auto;min-height:100vh;min-height:100svh}
.tr-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px clamp(14px,2.4vw,36px);margin-top:clamp(14px,2.2vh,26px)}
.tr-nav .tr-steps{margin-top:0}
.tr-next{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 26px;font:500 clamp(.95rem,1.05vw,1.08rem)/1 var(--font-sans);letter-spacing:.06em;color:var(--ink-900);background:var(--gold-bright);border:1px solid var(--gold-bright);cursor:pointer;transition:background 280ms var(--ease-out),opacity 400ms var(--ease-out)}
.tr-next i{font-style:normal}
.tr-next:hover,.tr-next:focus-visible{outline:none;background:var(--gold)}
.tr-next.busy{opacity:.4;pointer-events:none}
.tr-next.ghost{color:var(--bone-100);background:none;border-color:var(--line-gold)}
.tr-next.ghost:hover{color:var(--gold-bright);background:none;border-color:var(--gold-bright)}
.trs.tr-mob .tr-nav{flex-direction:column-reverse;gap:6px;margin-top:10px}
.trs.tr-mob .tr-next{width:100%;max-width:440px;justify-content:center}

/* KÉT KÉP (2026.10.11 késő este): a kettő közt arany hajszálvonal; a rutin-kép a test alatt, ugyanabban a rendben */
.trs.tr-rut{border-top:0}

/* a leúszó alak: rögzített réteg a két kép fölött (a lapok és a chat alatt) */
.tr-fly{position:fixed;left:0;top:0;z-index:40;pointer-events:none;transform-origin:50% 50%;will-change:transform}
.tr-fly .ps-fig-inner{position:absolute;inset:0}
.tr-flying .trs .tr-figw .ps-fig-inner,.tr-flying .trs .tr-figw .tr-ring,.tr-flying .trs .tr-figw .ps-fig-cap{visibility:hidden}

/* AZ ELVÁLASZTÓ, SZEBBEN (2026.10.11 késő este, a felhasználó kérése): kifutó arany hajszálvonal, középen registration-jel
   és egy függőleges méretvonal — a leúszó alak útja */
.trs.tr-rut::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent 4%,var(--line-gold) 30%,var(--gold-bright) 50%,var(--line-gold) 70%,transparent 96%)}
.trs.tr-rut::after{content:"";position:absolute;left:50%;top:-34px;width:1px;height:68px;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,var(--gold-bright) 40%,var(--gold-bright) 60%,transparent)}
.tr-div{position:absolute;left:50%;top:0;z-index:4;width:15px;height:15px;transform:translate(-50%,-50%) rotate(45deg);background:var(--ink-900);border:1px solid var(--gold-bright);pointer-events:none}
.tr-div::after{content:"";position:absolute;inset:4px;background:var(--gold-bright)}
.tr-div i{position:absolute;left:50%;top:50%;width:44px;height:44px;border:1px solid var(--line-gold);transform:translate(-50%,-50%)}
/* SZIMMETRIKUS KÁRTYÁK (a felhasználó kérése): két oldalt három-három egyforma magas sor, egy vonalban */
.trs:not(.tr-mob) .tr-grid{align-items:stretch}
.trs:not(.tr-mob) .tr-grid>.ps-box-col{display:grid;grid-template-rows:repeat(3,minmax(0,1fr))}
.trs:not(.tr-mob) .tr-grid>.ps-box-col>.tr-card,.trs:not(.tr-mob) .tr-grid .tr-face{height:100%}
.trs:not(.tr-mob) .tr-grid .tr-face>*{height:100%}
.trs:not(.tr-mob) .tr-grid>.tr-figw{align-self:center}

/* A RENDSZEREK FINOM RAJZA (2026.10.11 késő este) */
.trs .tr-sys{position:relative;overflow:visible}
.tr-art{position:absolute;right:clamp(10px,1.2vw,18px);top:clamp(10px,1.2vw,16px);width:clamp(84px,7.4vw,126px);aspect-ratio:3/2;pointer-events:none;opacity:.5;transition:opacity 600ms var(--ease-out)}
.tr-art svg{display:block;width:100%;height:100%;overflow:visible}
.tr-art .a,.tr-art .n{stroke:var(--gold-bright);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tr-art .n{fill:color-mix(in oklch,var(--gold) 22%,transparent)}
.tr-art .d{fill:var(--gold-bright)}
.tr-art .f{stroke-dasharray:3 3}
.tr-sys.on .tr-art,.tr-sys:focus-visible .tr-art{opacity:1}
.tr-sys.on .tr-art .f{stroke-dasharray:none;stroke-width:1.1;filter:drop-shadow(0 0 3px rgba(224,196,126,.6))}
.ps-anim .tr-art .d{animation:trArtD 3.4s ease-in-out infinite}
.ps-anim .tr-art .d:nth-of-type(2n){animation-delay:1.1s}
.ps-anim .tr-art .d:nth-of-type(3n){animation-delay:2.2s}
.ps-anim .tr-sys.on .tr-art .f{animation:trArtF 2.2s linear infinite}
@keyframes trArtD{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes trArtF{from{stroke-dashoffset:0}to{stroke-dashoffset:-24}}
.tr-sys.on .tr-art .f{stroke-dasharray:6 2}
.trs .tr-sys .ps-box-label,.trs .tr-sys .ps-box-big,.trs .tr-sys .ps-box-sub{position:relative;max-width:calc(100% - clamp(70px,6vw,104px))}
.trs .tr-sys.on .ps-box-sub{max-width:none}
.tr-sh-art{display:block;width:clamp(120px,14vw,170px);margin-bottom:14px}
.tr-sh-art .tr-art{position:static;width:100%;opacity:1}
.tr-sh-art .tr-art .f{stroke-dasharray:6 2;animation:trArtF 2.2s linear infinite}
.trs.tr-mob .tr-art{width:96px;opacity:.7}
.trs.tr-mob .tr-sys .ps-box-label,.trs.tr-mob .tr-sys .ps-box-big{max-width:calc(100% - 90px)}
@media (prefers-reduced-motion:reduce){.tr-art .d,.tr-art .f{animation:none!important}}

.trs .tr-end-b{margin:clamp(16px,2.6vh,30px) 0 0}
.trs.tr-mob .tr-end-b{margin-top:14px;font-size:1.35rem}