/* Astrologie świata — cztery tradycje, jedno niebo. Tokeny serwisu; akcent: cztery barwy szkół.
   Sygnatura: dwa pierścienie zodiaku rozjechane o ajanamsę. Miara serwisu: 1520 px treści. */
.tas-strona {
	--tlo: #060716; --panel: rgba( 10, 10, 34, .74 ); --obrys: rgba( 230, 196, 138, .3 ); --wlos: rgba( 230, 196, 138, .12 );
	--zloto: #fde291; --zloto-cieply: #f9d57a; --zloto-ciemne: #e6c48a; --zloto-etyk: #cda474; --jade: #7cc5a4;
	--tekst: #b3b1c2; --tekst-slaby: #9393a7; --tekst-mocny: #e6e2ea;
	--ogien: #d4763f; --ziemia: #9d9a5f; --powietrze: #7f96c0; --woda: #5d84a6;
	--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
	position: relative; max-width: 1520px; margin: 0 auto; padding: 0 40px 90px; color: var( --tekst ); font: 300 15px var( --sans );
	background: radial-gradient( 1200px 620px at 50% -10%, rgba( 90, 60, 160, .24 ), transparent 70% ), radial-gradient( 900px 520px at 12% 30%, rgba( 201, 162, 39, .07 ), transparent 70% ), var( --tlo ); overflow-x: clip;
}
.tas-strona *, .tas-strona *::before, .tas-strona *::after { box-sizing: border-box; }
body:has( .tas-strona ) .wp-site-blocks > header, body:has( .tas-strona ) header.wp-block-template-part, body:has( .tas-strona ) .wp-site-blocks > footer, body:has( .tas-strona ) footer.wp-block-template-part, body:has( .tas-strona ) .wp-block-post-title { display: none !important; }
body:has( .tas-strona ) .wp-site-blocks, body:has( .tas-strona ) .wp-block-group, body:has( .tas-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tas-strona ) .wp-block-post-content > *, body:has( .tas-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tas-strona ) { background: #060716; }
body:has( .tas-strona ) .wp-block-post-content > .tas-strona, body:has( .tas-strona ) .entry-content > .tas-strona, .tas-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tas-strona button { font-family: inherit; }

/* ───────────────────────────────  ścieżka  ─────────────────────────────── */
.tas-sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0 6px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tas-sciezka i { font-style: normal; color: var( --zloto-ciemne ); } .tas-sciezka b { font-weight: 400; color: var( --zloto ); }
.tas-poziom { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0 auto; }
.tas-poziom span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var( --tekst ); }
.tas-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --k ); box-shadow: 0 0 10px var( --k ); }
.tas-poziom .jest-hist { --k: #7cc59a; } .tas-poziom .jest-ezo { --k: #b98fd6; }

/* ─────────────────────────────────  hero  ──────────────────────────────── */
.tas-hero { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 380px, 500px ); gap: 56px; align-items: center; min-height: 560px; padding: 26px 0 8px; }
.tas-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tas-tytul { margin: 0; font: 500 clamp( 46px, 5.4vw, 80px )/1.02 var( --serif ); color: var( --zloto-cieply ); }
.tas-tytul small { display: block; margin-top: 8px; font: 300 16px var( --sans ); letter-spacing: .14em; color: var( --jade ); }
.tas-lead { max-width: 58ch; margin: 20px 0 0; font-size: 16px; line-height: 1.72; color: var( --tekst-mocny ); }
.tas-aja { margin: 18px 0 0; padding: 12px 18px; border-left: 2px solid var( --zloto-ciemne ); font-size: 14px; line-height: 1.6; color: var( --tekst ); background: rgba( 230, 196, 138, .05 ); }
.tas-aja b { color: var( --zloto ); font-weight: 400; font-size: 17px; }

.tas-hero__kolo { display: grid; gap: 14px; justify-items: center; }
.tas-kola { width: 100%; max-width: 470px; }
.tas-kola__svg { display: block; width: 100%; height: auto; overflow: visible; }
.tas-luk { fill: rgba( 230, 196, 138, .05 ); stroke: rgba( 230, 196, 138, .18 ); stroke-width: .6; transition: fill .3s; }
.tas-luk--ogien { fill: color-mix( in srgb, var( --ogien ) 13%, transparent ); }
.tas-luk--ziemia { fill: color-mix( in srgb, var( --ziemia ) 13%, transparent ); }
.tas-luk--powietrze { fill: color-mix( in srgb, var( --powietrze ) 13%, transparent ); }
.tas-luk--woda { fill: color-mix( in srgb, var( --woda ) 13%, transparent ); }
.tas-luk--syd { opacity: .55; stroke-dasharray: 3 3; }
.tas-glif { fill: var( --zloto-cieply ); font: 400 17px var( --sans ); text-anchor: middle; dominant-baseline: central; }
.tas-glif--syd { fill: var( --zloto-etyk ); font-size: 14px; opacity: .85; }
.tas-klin { fill: rgba( 253, 226, 145, .1 ); stroke: var( --zloto ); stroke-width: 1; stroke-dasharray: 4 4; }
.tas-klin__opis { fill: var( --zloto ); font: 400 15px var( --sans ); text-anchor: middle; dominant-baseline: central; }
.tas-kolo__srodek { fill: var( --zloto-etyk ); font: 400 15px var( --sans ); letter-spacing: .2em; text-anchor: middle; text-transform: uppercase; }
.tas-kolo__srodek--mala { fill: var( --tekst-slaby ); font-size: 13px; letter-spacing: .06em; }
.tas-promien { stroke: var( --zloto ); stroke-width: 1.2; stroke-dasharray: 2 4; }
.tas-znacznik { fill: rgba( 6, 7, 22, .9 ); stroke: var( --zloto ); stroke-width: 1.6; }
.tas-znacznik--syd { stroke: var( --ogien ); }
.tas-slonce { fill: rgba( 253, 226, 145, .12 ); stroke: var( --zloto ); stroke-width: 1; }
.tas-slonce__znak { fill: var( --zloto ); font: 400 26px var( --sans ); text-anchor: middle; }
.tas-kola__podpis { max-width: 42ch; margin: 0; font-size: 12.5px; line-height: 1.6; text-align: center; color: var( --tekst-slaby ); }
.jest-osobiste .tas-kola__podpis { color: var( --zloto-etyk ); }

/* ────────────────────────────────  sekcje  ─────────────────────────────── */
.tas-sekcja { margin: 72px 0 0; }
.tas-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tas-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --zloto-cieply ); }
.tas-sekcja__lead { max-width: 76ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }

/* ──────────────────────────────  kalkulator  ───────────────────────────── */
.tas-kalk { padding: 34px 38px 38px; border: 1px solid var( --obrys ); border-radius: 24px; background: linear-gradient( 180deg, rgba( 16, 12, 40, .6 ), rgba( 7, 5, 22, .5 ) ); }
.tas-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 24px 0 0; }
.tas-pole { display: grid; gap: 7px; }
.tas-pole span { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tas-pole span i { font-style: normal; color: var( --tekst-slaby ); letter-spacing: .1em; }
.tas-pole input { min-width: 200px; padding: 12px 15px; border: 1px solid var( --wlos ); border-radius: 12px; background: rgba( 6, 7, 22, .7 ); color: var( --tekst-mocny ); font: 300 15px var( --sans ); color-scheme: dark; }
.tas-pole input:focus { outline: none; border-color: var( --obrys ); }
.tas-licz { padding: 13px 30px; border: 1px solid var( --obrys ); border-radius: 12px; background: rgba( 253, 226, 145, .1 ); color: var( --zloto ); font: 400 12px var( --sans ); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.tas-licz:hover { background: rgba( 253, 226, 145, .2 ); }
.jest-liczony .tas-licz { opacity: .5; pointer-events: none; }
.tas-blad { margin: 16px 0 0; padding: 12px 16px; border: 1px solid rgba( 224, 69, 58, .5 ); border-radius: 12px; color: #e8907f; font-size: 14px; }

.tas-wynik { margin: 32px 0 0; }
.tas-karty { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; }
.tas-karta { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px; border: 1px solid color-mix( in srgb, var( --k ) 40%, transparent ); border-radius: 20px; background: linear-gradient( 180deg, color-mix( in srgb, var( --k ) 8%, transparent ), rgba( 7, 5, 22, .5 ) ); }
.tas-karta__nad { margin: 0; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var( --k ); }
.tas-karta__glif { margin: 6px 0 0; font: 400 46px/1 var( --sans ); color: var( --k ); }
.tas-karta__glif--dew { font-size: 34px; font-family: var( --serif ); }
.tas-karta__glif--han { font-size: 40px; }
.tas-karta__glif--mewa { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var( --m, var( --k ) ); border-radius: 50%; background: color-mix( in srgb, var( --m, var( --k ) ) 22%, transparent ); font-size: 26px; color: var( --tekst-mocny ); }
.tas-karta__duze { margin: 2px 0 0; font: 500 27px/1.1 var( --serif ); color: var( --zloto-cieply ); }
.tas-karta__pod { margin: 0; font-size: 12px; line-height: 1.5; color: var( --tekst-slaby ); }
.tas-karta__w { display: grid; grid-template-columns: 96px minmax( 0, 1fr ); gap: 10px; margin: 0; padding: 7px 0; border-top: 1px solid var( --wlos ); font-size: 13px; line-height: 1.45; }
.tas-karta__w b { font-weight: 400; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var( --zloto-etyk ); padding-top: 2px; }
.tas-karta__w span { color: var( --tekst-mocny ); }
.tas-karta__uwaga { margin: 6px 0 0; padding: 10px 12px; border-left: 2px solid var( --k ); font-size: 12.5px; line-height: 1.55; color: var( --tekst ); background: color-mix( in srgb, var( --k ) 7%, transparent ); }
.tas-karta__wiecej { margin-top: auto; padding: 10px 0 0; border: 0; border-top: 1px solid var( --wlos ); background: none; color: var( --k ); font: 400 10.5px var( --sans ); letter-spacing: .2em; text-transform: uppercase; text-align: left; cursor: pointer; }
.tas-karta__wiecej:hover { color: var( --zloto ); }

.tas-roznica { margin: 26px 0 0; padding: 28px 32px; border: 1px solid var( --wlos ); border-radius: 20px; background: var( --panel ); }
.tas-roznica h3 { margin: 0 0 14px; font: 500 27px/1.15 var( --serif ); color: var( --zloto-cieply ); }
.tas-roznica p { margin: 0 0 12px; max-width: 84ch; font-size: 14.5px; line-height: 1.72; }
.tas-roznica__licz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 18px !important; }
.tas-roznica__licz b { font: 400 24px var( --serif ); color: var( --zloto ); }
.tas-roznica__licz i { font-style: normal; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tas-roznica__licz span { width: 100%; font-size: 12px; letter-spacing: .1em; color: var( --zloto-etyk ); }
.tas-roznica__obalamy { margin-top: 16px !important; padding: 14px 18px; border-left: 2px solid var( --jade ); background: rgba( 124, 197, 164, .06 ); color: var( --tekst-mocny ); }

/* ──────────────────────────────  cztery szkoły  ────────────────────────── */
.tas-szkoly { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; margin: 28px 0 0; }
.tas-szkola { display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 20px; border: 1px solid var( --wlos ); border-top: 3px solid var( --k ); border-radius: 4px 4px 20px 20px; background: var( --panel ); backdrop-filter: blur( 10px ); cursor: pointer; transition: border-color .22s, transform .22s, box-shadow .22s; }
.tas-szkola:hover { border-color: color-mix( in srgb, var( --k ) 55%, transparent ); border-top-color: var( --k ); transform: translateY( -3px ); box-shadow: 0 18px 40px rgba( 0, 0, 0, .45 ); }
.tas-szkola:focus-visible { outline: 2px solid var( --k ); outline-offset: 3px; }
.tas-szkola__obszar { margin: 0; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var( --k ); }
.tas-szkola__nazwa { margin: 0; font: 500 26px/1.08 var( --serif ); color: var( --zloto-cieply ); }
.tas-szkola__pod { margin: 0; font: italic 400 14px var( --serif ); color: var( --tekst-slaby ); }
.tas-szkola__lead { margin: 0; font-size: 13.5px; line-height: 1.6; color: var( --tekst ); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.tas-szkola__slowa { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tas-szkola__slowa span { padding: 3px 9px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10.5px; letter-spacing: .06em; color: var( --tekst-slaby ); }
.tas-szkola__stopa { margin-top: auto; padding-top: 12px; border-top: 1px solid var( --wlos ); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --k ); }

/* ────────────────────────────  tabela różnic  ──────────────────────────── */

/* ────────────────────────────────  tory  ───────────────────────────────── */
.tas-tor { position: relative; margin: 26px 0 10px; min-width: 0; contain: inline-size; }
.tas-tor__pas { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 10px; margin: -4px -2px -10px; cursor: grab; scroll-behavior: smooth; }
.tas-tor__pas::-webkit-scrollbar { display: none; }
.tas-tor__pas.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.tas-tor__strz { position: absolute; top: 0; bottom: 22px; z-index: 2; display: grid; place-items: center; width: 62px; border: 0; background: linear-gradient( 90deg, var( --tlo ) 26%, rgba( 6, 7, 22, .82 ) 62%, rgba( 6, 7, 22, 0 ) ); color: var( --zloto-etyk ); cursor: pointer; }
.tas-tor__strz::before { content: ''; width: 13px; height: 13px; margin-left: 6px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate( -45deg ); }
.tas-tor__strz--lewo { left: -8px; } .tas-tor__strz--prawo { right: -8px; transform: scaleX( -1 ); }
.tas-tor__strz:hover { color: var( --zloto ); }
.tas-tor__strz[hidden] { display: none; }
.tas-tor__licznik { position: absolute; right: 4px; bottom: -14px; margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby ); }

/* ──────────────────────────────  nakszatry  ────────────────────────────── */
.tas-naksz-kafel { position: relative; flex: 0 0 calc( ( 100% - 4 * 16px ) / 5 ); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 20px 18px 18px; border: 1px solid var( --wlos ); border-radius: 20px; background: var( --panel ); backdrop-filter: blur( 10px ); cursor: pointer; transition: border-color .22s, transform .22s, box-shadow .22s; }
.tas-naksz-kafel:hover { border-color: rgba( 212, 118, 63, .5 ); transform: translateY( -3px ); box-shadow: 0 18px 40px rgba( 0, 0, 0, .45 ); }
.tas-naksz-kafel:focus-visible { outline: 2px solid var( --ogien ); outline-offset: 3px; }
/* ── karty nakszatr z dostawy ──
   Karta niesie te same dane co tekst kafla: imię, dewanagari, symbol i władcę.
   Zostaje jedno i drugie — obraz dla oka, tekst dla czytnika ekranu i dla
   wyszukiwania. Kafel bez pliku wygląda dokładnie tak, jak wyglądał wcześniej,
   dlatego obraz jest osobnym elementem, a nie tłem. */
.tas-naksz__mini { margin: -20px -18px 8px; overflow: hidden; border-radius: 19px 19px 0 0; }
.tas-naksz__mini img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 562; object-fit: cover; transition: transform .5s; }
.tas-naksz-kafel:hover .tas-naksz__mini img { transform: scale( 1.04 ); }
/* Numer siada na obrazie, więc dostaje własne tło — bez niego ginie na jasnym
   fragmencie ornamentu. */
.tas-naksz-kafel.ma-obraz .tas-naksz__nr { padding: 2px 8px; border-radius: 999px; background: rgba( 8, 8, 12, .72 ); color: var( --tekst ); }
.tas-naksz__karta { margin: 0 0 18px; }
.tas-naksz__karta img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 26px 60px -30px rgba( 0, 0, 0, .9 ); }
@media ( prefers-reduced-motion: reduce ) { .tas-naksz__mini img { transition: none; } }
.tas-naksz__nr { position: absolute; right: 16px; top: 14px; font: 400 13px var( --serif ); color: var( --tekst-slaby ); }
.tas-naksz__nazwa { margin: 0; padding-right: 24px; font: 500 21px/1.1 var( --serif ); color: var( --zloto-cieply ); }
.tas-naksz__orig { margin: 0; font: 400 16px var( --serif ); color: var( --ogien ); }
.tas-naksz__symbol { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var( --tekst ); }
.tas-naksz__wladca { margin-top: auto; padding-top: 10px; border-top: 1px solid var( --wlos ); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var( --zloto-etyk ); }

/* ──────────────────────────────  mewa i parkha  ────────────────────────── */
.tas-tybet__uklad { display: grid; grid-template-columns: minmax( 0, 340px ) minmax( 0, 1fr ); gap: 32px; margin: 28px 0 0; align-items: start; }
.tas-loshu { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 8px; }
.tas-mewa { display: grid; gap: 6px; place-items: center; aspect-ratio: 1; padding: 10px; border: 1px solid color-mix( in srgb, var( --k ) 55%, transparent ); border-radius: 14px; background: color-mix( in srgb, var( --k ) 12%, rgba( 7, 5, 22, .6 ) ); color: var( --tekst-mocny ); cursor: pointer; transition: transform .2s, background .2s; }
.tas-mewa:hover { transform: translateY( -2px ); background: color-mix( in srgb, var( --k ) 24%, rgba( 7, 5, 22, .6 ) ); }
.tas-mewa b { font: 400 30px var( --serif ); color: var( --tekst-mocny ); }
.tas-mewa span { font-size: 10.5px; letter-spacing: .08em; text-align: center; color: var( --tekst-slaby ); }
.tas-parkha { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 10px; }
.tas-parkha__pole { display: grid; gap: 7px; justify-items: center; padding: 16px 10px; border: 1px solid var( --wlos ); border-radius: 14px; background: var( --panel ); color: var( --tekst ); cursor: pointer; transition: border-color .2s, transform .2s; }
.tas-parkha__pole:hover { border-color: rgba( 93, 132, 166, .55 ); transform: translateY( -2px ); }
.tas-parkha__pole b { font: 400 16px var( --serif ); color: var( --zloto-cieply ); }
.tas-parkha__pole span { font-size: 10.5px; letter-spacing: .06em; color: var( --tekst-slaby ); text-align: center; }
.tas-trygram { display: grid; gap: 4px; width: 42px; }
.tas-trygram i { display: block; height: 4px; background: var( --woda ); border-radius: 2px; }
.tas-trygram i.jest-przerwana { background: linear-gradient( 90deg, var( --woda ) 0 40%, transparent 40% 60%, var( --woda ) 60% 100% ); }

/* ───────────────────────────────  słownik  ─────────────────────────────── */
.tas-filtry { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.tas-filtr { padding: 7px 16px; border: 1px solid var( --wlos ); border-radius: 999px; background: none; color: var( --tekst-slaby ); font: 300 12px var( --sans ); letter-spacing: .1em; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.tas-filtr:hover { color: var( --tekst-mocny ); }
.tas-filtr.jest-wybrany { border-color: color-mix( in srgb, var( --k ) 60%, transparent ); background: color-mix( in srgb, var( --k ) 12%, transparent ); color: var( --k ); }
.tas-haslo { flex: 0 0 calc( ( 100% - 4 * 16px ) / 5 ); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 7px; padding: 20px 18px 18px; border: 1px solid var( --wlos ); border-radius: 20px; background: var( --panel ); backdrop-filter: blur( 10px ); cursor: pointer; transition: border-color .22s, transform .22s, box-shadow .22s; }
.tas-haslo:hover { border-color: color-mix( in srgb, var( --k ) 50%, transparent ); transform: translateY( -3px ); box-shadow: 0 18px 40px rgba( 0, 0, 0, .45 ); }
.tas-haslo:focus-visible { outline: 2px solid var( --k ); outline-offset: 3px; }
.tas-haslo__orig { margin: 0; font: 400 20px/1.2 var( --serif ); color: var( --k ); min-height: 24px; }
.tas-haslo__nazwa { margin: 0; font: 500 21px/1.1 var( --serif ); color: var( --zloto-cieply ); }
.tas-haslo__krotko { margin: 0; font-size: 13px; line-height: 1.55; color: var( --tekst ); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tas-haslo__tr { margin-top: auto; padding-top: 10px; border-top: 1px solid var( --wlos ); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var( --k ); }

/* ──────────────────────────────  uczciwie  ─────────────────────────────── */
.tas-uczciwie__siatka { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 18px; margin: 26px 0 0; }
.tas-uczciwie__siatka > div { padding: 22px; border: 1px solid var( --wlos ); border-radius: 18px; background: var( --panel ); }
.tas-uczciwie__siatka b { display: block; margin-bottom: 8px; font: 400 12px var( --sans ); letter-spacing: .22em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tas-uczciwie__siatka p { margin: 0; font-size: 14px; line-height: 1.65; color: var( --tekst ); }

.tas-pow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 56px 0 0; padding-top: 22px; border-top: 1px solid var( --wlos ); font-size: 12.5px; color: var( --tekst-slaby ); }
.tas-pow a { padding: 6px 14px; border: 1px solid var( --wlos ); border-radius: 999px; color: var( --zloto-etyk ); text-decoration: none; }
.tas-pow a:hover { border-color: var( --obrys ); color: var( --zloto ); }

/* ────────────────────────────────  okno  ──────────────────────────────── */
.tas-tlo { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 28px; background: rgba( 4, 3, 12, .72 ); backdrop-filter: blur( 14px ); opacity: 0; transition: opacity .22s; }
.tas-tlo.jest-widoczne { opacity: 1; }
.tas-okno { --k: #c9a227; --zloto: #fde291; --zloto-cieply: #f9d57a; --zloto-etyk: #cda474; --jade: #7cc5a4; --tekst: #b3b1c2; --tekst-slaby: #9393a7; --tekst-mocny: #e6e2ea; --wlos: rgba( 230, 196, 138, .14 ); --obrys: rgba( 230, 196, 138, .3 ); --serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
	position: relative; width: min( 980px, 100% ); max-height: min( 88vh, 940px ); overflow: auto; padding: 40px 44px 44px; border: 1px solid var( --obrys ); border-top: 3px solid var( --k ); border-radius: 4px 4px 24px 24px; background: linear-gradient( 180deg, rgba( 16, 12, 40, .97 ), rgba( 7, 5, 22, .98 ) ); box-shadow: 0 40px 90px rgba( 0, 0, 0, .6 ); color: var( --tekst ); font: 300 15px var( --sans ); transform: translateY( 14px ); transition: transform .22s; }
.tas-tlo.jest-widoczne .tas-okno { transform: none; }
.tas-okno *, .tas-okno *::before, .tas-okno *::after { box-sizing: border-box; }
.tas-okno__x { position: absolute; right: 18px; top: 18px; width: 38px; height: 38px; border: 1px solid var( --wlos ); border-radius: 50%; background: rgba( 7, 5, 22, .6 ); color: var( --zloto-etyk ); font-size: 17px; cursor: pointer; z-index: 1; }
.tas-okno__nad { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var( --k ); }
.tas-okno__tytul { margin: 0; padding-right: 46px; font: 500 40px/1.06 var( --serif ); color: var( --zloto-cieply ); }
.tas-orig { display: block; margin-top: 6px; font: 400 22px var( --serif ); color: var( --k ); }
.tas-okno__pod { margin: 10px 0 0; font: italic 400 18px var( --serif ); color: var( --tekst-slaby ); }
.tas-okno__lead { margin: 16px 0 0; max-width: 82ch; font-size: 16px; line-height: 1.72; color: var( --tekst-mocny ); }
.tas-dane { display: grid; grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) ); gap: 12px; margin: 22px 0 0; }
.tas-dane > div { padding: 12px 14px; border: 1px solid var( --wlos ); border-radius: 12px; }
.tas-dane b { display: block; margin-bottom: 4px; font: 400 10px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tas-dane span { font-size: 14px; line-height: 1.45; color: var( --tekst-mocny ); }
.tas-blok { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var( --wlos ); }
.tas-blok h4 { margin: 0 0 10px; font: 400 11px var( --sans ); letter-spacing: .26em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tas-blok p { margin: 0 0 12px; max-width: 84ch; font-size: 15px; line-height: 1.75; color: var( --tekst ); }
.tas-blok p:last-child { margin-bottom: 0; }
.tas-blok--niebo { padding: 18px 20px; border: 1px solid rgba( 127, 150, 192, .3 ); border-radius: 14px; background: rgba( 127, 150, 192, .06 ); }
.tas-blok--dzis { padding: 18px 20px; border: 1px solid rgba( 185, 143, 214, .28 ); border-radius: 14px; background: rgba( 185, 143, 214, .06 ); }
.tas-blok--niebo h4, .tas-blok--dzis h4 { color: var( --tekst-mocny ); }
.tas-slowa { margin: 0; padding: 0 0 0 18px; }
.tas-slowa li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; color: var( --tekst ); }
.tas-ciekawostka { display: flex; gap: 12px; margin: 26px 0 0; padding: 16px 20px; border: 1px solid var( --wlos ); border-radius: 14px; background: rgba( 230, 196, 138, .05 ); font-size: 14.5px; line-height: 1.65; color: var( --tekst-mocny ); }
.tas-ciekawostka i { font-style: normal; color: var( --zloto ); }
.tas-okno__pow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var( --wlos ); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tas-okno__pow a, .tas-okno__pow button, .tas-okno__pow span { padding: 6px 14px; border: 1px solid var( --wlos ); border-radius: 999px; background: none; color: var( --zloto-etyk ); font: 300 12px var( --sans ); letter-spacing: .06em; text-transform: none; text-decoration: none; cursor: pointer; }
.tas-okno__pow a:hover, .tas-okno__pow button:hover { border-color: var( --obrys ); color: var( --zloto ); }
.tas-okno__akcje { display: flex; justify-content: flex-end; margin: 30px 0 0; }
.tas-btn { padding: 11px 26px; border: 1px solid var( --obrys ); border-radius: 999px; background: none; color: var( --zloto-etyk ); font: 300 12px var( --sans ); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.tas-btn:hover { color: var( --zloto ); }

/* ─────────────────────────────  węższe ekrany  ─────────────────────────── */
@media ( max-width: 1240px ) {
	.tas-naksz-kafel, .tas-haslo { flex-basis: calc( ( 100% - 3 * 16px ) / 4 ); }
	.tas-wiersz { grid-template-columns: 160px repeat( 4, minmax( 0, 1fr ) ); gap: 12px; }
	.tas-wiersz__nota { padding-left: 194px; }
}
@media ( max-width: 1020px ) {
	.tas-strona { padding: 0 24px 70px; }
	.tas-hero { grid-template-columns: minmax( 0, 1fr ); gap: 32px; min-height: 0; }
	.tas-hero__kolo { order: -1; }
	.tas-karty, .tas-szkoly { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.tas-naksz-kafel, .tas-haslo { flex-basis: calc( ( 100% - 2 * 16px ) / 3 ); }
	.tas-tybet__uklad { grid-template-columns: minmax( 0, 1fr ); }
	.tas-uczciwie__siatka { grid-template-columns: minmax( 0, 1fr ); }
	.tas-wiersz { grid-template-columns: minmax( 0, 1fr ); gap: 8px; }
	.tas-wiersz > span { border-left-width: 3px; }
	.tas-wiersz--glowa { display: none; }
	.tas-wiersz > span::before { content: attr( data-tr ); display: block; margin-bottom: 3px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --k ); }
	.tas-wiersz__nota { padding-left: 22px; }
	.tas-okno { padding: 34px 26px 30px; }
	.tas-okno__tytul { font-size: 32px; }
}
@media ( max-width: 680px ) {
	.tas-strona { padding: 0 16px 60px; }
	.tas-kalk { padding: 24px 18px 26px; }
	.tas-karty, .tas-szkoly { grid-template-columns: minmax( 0, 1fr ); }
	.tas-naksz-kafel, .tas-haslo { flex-basis: calc( ( 100% - 16px ) / 2 ); }
	.tas-parkha { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.tas-pole input { min-width: 0; width: 100%; }
	.tas-pole, .tas-licz { width: 100%; }
	.tas-roznica { padding: 22px 18px; }
}
@media ( max-width: 460px ) {
	.tas-naksz-kafel, .tas-haslo { flex-basis: calc( 100% - 34px ); }
}

/* ══════════════  splot: osiem pytań, cztery odpowiedzi  ══════════════

   Tabela cztery na osiem pokazywała trzydzieści dwie komórki naraz i chowała
   to, co w tej sekcji najważniejsze: przy każdym pytaniu cztery tradycje
   układają się w INNE grupy. Nitka pod kartami pokazuje ten układ i rysuje
   się od nowa przy każdej zmianie pytania.

   Cała śmiałość tej sekcji siedzi w nitce. Karty, tor i nota są celowo ciche,
   żeby nic z nią nie konkurowało. */

.tas-tor--pytania { position: relative; contain: inline-size; margin: 26px 0 0; }
.tas-pytania { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 12px; }
.tas-pytania::-webkit-scrollbar { display: none; }
.tas-pytanie {
	display: inline-flex; align-items: baseline; gap: 9px; flex: 0 0 auto;
	padding: 9px 16px; border: 1px solid var( --wlos ); border-radius: 999px;
	background: transparent; color: var( --tekst-slaby ); cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
}
.tas-pytanie i { font-style: normal; font-size: 10px; letter-spacing: .1em; color: var( --zloto-etyk ); }
.tas-pytanie b { font: 400 13.5px var( --sans ); letter-spacing: .02em; white-space: nowrap; }
.tas-pytanie:hover { border-color: var( --obrys ); color: var( --tekst-mocny ); }
.tas-pytanie.jest-wybrany { border-color: var( --zloto ); background: rgba( 230, 196, 138, .12 ); color: var( --zloto ); }
.tas-pytanie.jest-wybrany i { color: var( --zloto ); }
.tas-pytanie:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.tas-splot { margin: 8px 0 0; }
.tas-karty { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 14px; }
.tas-odp {
	position: relative; overflow: hidden;
	display: grid; align-content: start; gap: 12px; min-width: 0; min-height: 146px;
	padding: 26px 26px 28px; border-radius: 18px;
	border-top: 2px solid color-mix( in srgb, var( --k ) 72%, transparent );
	/* Trzy warstwy: poświata z góry w barwie tradycji, tonalne zejście w mrok
	   i ciepły odblask przy dolnej krawędzi. */
	background:
		radial-gradient( 130% 80% at 30% -10%, color-mix( in srgb, var( --k ) 22%, transparent ), transparent 62% ),
		linear-gradient( 168deg, color-mix( in srgb, var( --k ) 11%, transparent ), rgba( 11, 10, 17, .78 ) 68% ),
		linear-gradient( 0deg, color-mix( in srgb, var( --k ) 7%, transparent ), transparent 30% );
	box-shadow:
		inset 0 1px 0 color-mix( in srgb, var( --k ) 30%, transparent ),
		0 20px 44px -30px rgba( 0, 0, 0, .95 );
	animation: tas-wejdz .34s both; animation-delay: calc( var( --op, 0 ) * 45ms );
	transition: box-shadow .25s, transform .25s;
}
.tas-odp:hover { transform: translateY( -3px ); box-shadow:
	inset 0 1px 0 color-mix( in srgb, var( --k ) 46%, transparent ),
	0 26px 54px -30px rgba( 0, 0, 0, .95 ),
	0 0 52px -22px color-mix( in srgb, var( --k ) 85%, transparent ); }
.tas-odp small { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: color-mix( in srgb, var( --k ) 78%, #fff ); }
.tas-odp p { margin: 0; font-size: 15.5px; line-height: 1.64; color: var( --tekst-mocny ); }
.tas-odp > * { position: relative; z-index: 1; }

/* ── Znak wodny: własna figura wykresu każdej tradycji ──────────────────────
   To nie ozdobnik dobrany do koloru. Każda z tych czterech rysuje wykres
   inaczej i mówi o tym osobne pytanie w tej samej sekcji: Zachód kreśli koło
   ze stopniami, Jyotisz romb podzielony na pola, chińska tabelę czterech
   filarów, tybetańska kwadrat dziewięciu liczb mewa. Kafel niesie tę figurę
   pod spodem, więc barwa i kształt mówią to samo. */
.tas-odp::after {
	content: ''; position: absolute; right: -14px; bottom: -18px;
	width: 128px; height: 128px; z-index: 0; opacity: .16; pointer-events: none;
	mask-image: radial-gradient( circle at 60% 60%, #000 40%, transparent 78% );
}
.tas-odp:hover::after { opacity: .26; }

/* koło ze stopniami — zachodnia */
.tas-odp[ data-szkola="zachodnia" ]::after {
	border-radius: 50%;
	background:
		repeating-conic-gradient( from 0deg, color-mix( in srgb, var( --k ) 90%, transparent ) 0 .6deg, transparent .6deg 30deg ),
		radial-gradient( circle, transparent 58%, color-mix( in srgb, var( --k ) 70%, transparent ) 58.5% 60%, transparent 61% ),
		radial-gradient( circle, transparent 76%, color-mix( in srgb, var( --k ) 55%, transparent ) 76.5% 78%, transparent 79% );
}
/* romb podzielony na pola — jyotisz */
.tas-odp[ data-szkola="jyotish" ]::after {
	transform: rotate( 45deg ); width: 104px; height: 104px; right: 2px; bottom: 2px;
	background:
		linear-gradient( 90deg, transparent calc( 50% - .6px ), color-mix( in srgb, var( --k ) 70%, transparent ) calc( 50% - .6px ) calc( 50% + .6px ), transparent calc( 50% + .6px ) ),
		linear-gradient( 0deg, transparent calc( 50% - .6px ), color-mix( in srgb, var( --k ) 70%, transparent ) calc( 50% - .6px ) calc( 50% + .6px ), transparent calc( 50% + .6px ) );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --k ) 75%, transparent );
}
/* tabela czterech filarów — chińska */
.tas-odp[ data-szkola="chinska" ]::after {
	background:
		repeating-linear-gradient( 90deg, color-mix( in srgb, var( --k ) 72%, transparent ) 0 1px, transparent 1px 25% ),
		repeating-linear-gradient( 0deg, color-mix( in srgb, var( --k ) 55%, transparent ) 0 1px, transparent 1px 50% );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --k ) 72%, transparent );
}
/* kwadrat dziewięciu liczb mewa — tybetańska */
.tas-odp[ data-szkola="tybetanska" ]::after {
	width: 112px; height: 112px;
	background:
		repeating-linear-gradient( 90deg, color-mix( in srgb, var( --k ) 70%, transparent ) 0 1px, transparent 1px 33.333% ),
		repeating-linear-gradient( 0deg, color-mix( in srgb, var( --k ) 70%, transparent ) 0 1px, transparent 1px 33.333% );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --k ) 78%, transparent );
}
@keyframes tas-wejdz { from { opacity: 0; transform: translateY( 6px ); } to { opacity: 1; transform: none; } }

/* Nitka: pionowe zejścia z kart, poziome spięcie grupy i podpis pod spodem. */
.tas-nitki { position: relative; height: 78px; }
.tas-nitka__co { max-width: 32ch; }
.tas-nitki__rys { display: block; overflow: visible; }
/* Stan koncowy w regule bazowej — nitka jest widoczna nawet wtedy, gdy
   animacja nie ruszy. Klatki tylko do niego dochodza. */
.tas-nitka { stroke-dasharray: var( --dl, 2000 ); stroke-dashoffset: 0; animation: tas-rysuj .6s ease-out; animation-delay: calc( .2s + var( --op, 0 ) * .09s ); }
@keyframes tas-rysuj { from { stroke-dashoffset: var( --dl, 2000 ); } to { stroke-dashoffset: 0; } }
.tas-nitka__co {
	position: absolute; transform: translateX( -50% ); max-width: 30ch;
	font-size: 14.5px; line-height: 1.45; letter-spacing: .01em; text-align: center;
	color: color-mix( in srgb, var( --k ) 70%, #fff );
	opacity: 1; animation: tas-wejdz-podpis .4s; animation-delay: calc( .5s + var( --op, 0 ) * .09s );
}
/* Wlasne klatki, bo `tas-wejdz` konczy sie na `transform: none` i zdejmowalo
   wysrodkowanie — podpis ladowal lewa krawedzia na kresce nitki. */
@keyframes tas-wejdz-podpis {
	from { opacity: 0; transform: translate( -50%, 6px ); }
	to   { opacity: 1; transform: translateX( -50% ); }
}
/* Tradycja, która na to pytanie odpowiada sama, dostaje podpis własną barwą
   i mniejszy — nie jest grupą, tylko wyjątkiem. */
.tas-nitka__co.jest-sama { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; opacity: .9; max-width: 24ch; }

.tas-nota { max-width: 88ch; margin: 6px 0 0; padding: 18px 22px; border-left: 2px solid var( --wlos ); font-size: 14.5px; line-height: 1.7; color: var( --tekst ); background: rgba( 230, 196, 138, .04 ); border-radius: 0 12px 12px 0; }

@media ( max-width: 900px ) {
	.tas-karty { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	/* Przy dwóch kolumnach nitka liczona dla czterech przestaje cokolwiek
	   znaczyć — chowamy ją, a podpisy grup zostają pod kartami jako lista. */
	.tas-nitki { height: auto; display: grid; gap: 6px; padding: 12px 0 0; }
	.tas-nitki__rys { display: none; }
	.tas-nitka__co { position: static; transform: none; max-width: none; text-align: left; animation: none; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tas-odp, .tas-nitka__co { animation: none; }
	.tas-nitka { stroke-dashoffset: 0; animation: none; }
}

/* OKNO TEZY — przejscie tonalne.
   Wspolna warstwa daje oknu tezy plaska pobialke rgba(255,255,255,.028)
   regulami o swoistosci 0,2,0 i 0,3,0 — jedna wartosc dla wszystkich dzialow
   naraz. Dublowana klasa daje 0,4,0 i zamyka sprawe bez !important.
   Barwy sa z palety TEGO dzialu. Dopisane po stronie SERWERA, bo lokalna
   kopia modulu bywa starsza niz wgrana. */
.tas-strona .tas-hero .tas-okno.zd-okno,
.tas-strona .tas-hero .zd-okno.zd-okno,
.tas-strona .tas-hero .tas-okno.tas-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 10, 10, 34, .10 ), transparent 70% ),
		linear-gradient( 168deg, #111221, #060716 );
}