/* ═══════════════════════════════════════════════════════════════
   ANOMALY INS — CZARNY METAL I SZKŁO

   Smoliście czarne anodowane aluminium i szkło najwyższej jakości:
   ciemne, przejrzyste, matowiące to, co leży za nim, z jasną krawędzią
   i odbiciem. Metal to podłoże, korpus i taśmy filmu. Szkłem jest
   wszystko, co kiedyś było białe: płyty sekcji, panel z taśmą kursu,
   panele, jasne akcje i slajdy lekcji, które można odtworzyć.

   Tekst jest jasny wszędzie. Koloru nie ma — tylko chłodny ślad,
   jaki ma prawdziwe aluminium i prawdziwe szkło.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── metal: smoliście czarne anodowane aluminium ──────────── */
  --m0:#010101;      /* szczelina, najgłębszy cień                     */
  --m1:#030304;      /* podłoże strony: czarna anoda                   */
  --m2:#0A0B0D;      /* uniesiony metal: taśmy, pasy                   */
  --m3:#111316;      /* slajd bez światła                              */
  --m4:#1B1E22;      /* najjaśniejsza anoda: krawędź, najazd           */
  --on-metal:#EDEFF2;  /* tekst na metalu i szkle, 18:1 na czerni      */
  --metal-2:#B3BAC2;   /* drugi tekst, 10:1 na czerni, 5:1 w świetle za szkłem */
  --metal-3:#A0A8B1;   /* trzeci tekst, 8,4:1 na czerni, 4,5:1 na odbiciu szkła */
  --metal-rule:rgba(214,224,236,.12);   /* linia na metalu — nie tekst */
  --ink:#0A0C0F;       /* tekst na jasnym: zaznaczenie, błąd serwera   */
  --white:#FFFFFF;

  /* ── szkło: ciemne, przejrzyste, matujące tło ─────────────────
     Tafla to mgła bieli nad rozmytym tym, co za nią (backdrop-filter),
     z odbiciem w górnej części. Krawędź to jasna obwódka, najjaśniejsza
     w rogach, i cienka linia światła u góry; grubość tafli to cień
     u jej dolnego brzegu. Za szkłem jest czarna blacha i światło, więc
     przez taflę widać tylko rozmyte smugi — jak przez prawdziwe szkło. */
  --glass-rule:rgba(255,255,255,.1);
  --glass-bg:
    linear-gradient(118deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.075) 24%, rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 40%) 0 0 / 100% min(100%, 900px) no-repeat,
    radial-gradient(120% 60% at 30% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    linear-gradient(165deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.04) 36%, rgba(255,255,255,.025) 68%, rgba(255,255,255,.05) 100%) rgba(12,13,16,.38);
  --glass-blur:blur(26px) saturate(170%) brightness(1.08);
  --glass-edge:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 22px 30px -26px rgba(255,255,255,.1),
    inset 0 -80px 90px -80px rgba(0,0,0,.55);
  --glass-rim:linear-gradient(150deg, rgba(255,255,255,.64), rgba(255,255,255,.13) 20%, rgba(255,255,255,.035) 50%, rgba(255,255,255,.08) 78%, rgba(255,255,255,.36));
  --seat:0 0 0 1px rgba(0,0,0,.72);      /* szczelina w metalu wokół szkła */
  --drop:0 40px 90px -40px rgba(0,0,0,.95);

  /* ── materiał metalu ────────────────────────────────────────────
     Szczotkowanie to szum rozciągnięty w poziomie: długie, cienkie
     rysy, w dwóch odmianach tego samego wzoru — ledwie widocznej
     w cieniu i jasnej w świetle. Perforacja ma dwie odmiany: na szkle
     przez otwory przechodzi światło, na metalu otwór jest wycięty
     i łapie światło dolną fazą.                                      */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0009 .9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .88  0 0 0 0 .92  0 0 0 0 .98  .08 0 0 0 -.035'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23b)'/%3E%3C/svg%3E");
  --brush-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0009 .9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .88  0 0 0 0 .92  0 0 0 0 .98  .95 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23b)'/%3E%3C/svg%3E");
  --holes-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8'%3E%3Crect x='6' y='1' width='10' height='6' rx='1.6' fill='%23CDD3DA'/%3E%3Crect x='6.6' y='1' width='8.8' height='1.1' rx='.5' fill='%23000' fill-opacity='.3'/%3E%3C/svg%3E");
  --holes-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8'%3E%3Crect x='6' y='1' width='10' height='6' rx='1.6' fill='%23020203'/%3E%3Crect x='7' y='6.1' width='8' height='.9' rx='.45' fill='%23fff' fill-opacity='.18'/%3E%3C/svg%3E");
  /* Znak wodny: przysłona z otwarcia strony, ledwie widoczna. Stoi tam,
     gdzie inaczej byłaby sama czerń — za nagłówkiem sekcji i w dolnej
     części pierwszego ekranu — i bardzo powoli się obraca. */
  --iris-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFFFFF' stroke-width='.7' stroke-linejoin='round'%3E%3Cpath d='M50 4 85.96 21.32 94.84 60.24 69.96 91.45 30.04 91.45 5.16 60.24 14.04 21.32Z'/%3E%3Cpath d='M50 18.4 75.5 30.7 81.8 58.3 64.2 80.4 35.8 80.4 18.2 58.3 24.5 30.7Z' transform='rotate(25.7 50 50)'/%3E%3Cpath d='M50 33 66.6 41 70.7 59 59.2 73.4 40.8 73.4 29.3 59 33.4 41Z' transform='rotate(51.4 50 50)'/%3E%3C/svg%3E");
  --edge-metal: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.72);
  --anod: linear-gradient(180deg, #16191E 0%, #0C0E11 46%, #060708 100%);

  /* ── akcje ───────────────────────────────────────────────────
     Zwykła akcja to przezroczysta szklana kapsuła; jasna akcja to
     szkło jaśniejsze, z mocną krawędzią i blaskiem przy dolnym brzegu,
     jak światło załamane w grubej tafli.                            */
  --tx:var(--on-metal); --tx-2:var(--metal-2); --tx-3:var(--metal-3); --rule:var(--metal-rule);
  --act-c:rgba(255,255,255,.055); --act-c-h:rgba(255,255,255,.12);
  --act-i:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 70%);
  --act-edge:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 24px -14px rgba(0,0,0,.9);
  --pri-tx:#FFFFFF; --pri-c:rgba(255,255,255,.14); --pri-c-h:rgba(255,255,255,.24);
  --pri-i:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.04) 58%, rgba(255,255,255,.1));
  --pri-edge:inset 0 1px 0 rgba(255,255,255,.62), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 -10px 18px -12px rgba(255,255,255,.34), 0 14px 30px -14px rgba(0,0,0,.9);

  /* ── promienie: szkło ma miękki brzeg, metal fazowany ──────── */
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* ── pismo ──────────────────────────────────────────────────
     Ciężkie, wąskie wersaliki jak grawer na obudowie. Tekst w tej
     samej rodzinie. Podpisy i liczniki — Geist Mono.              */
  --f-display: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-text: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Dolna granica każdego clampa to twarde 11px. */
  --t-2xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --t-xs:  clamp(0.8rem,  0.76rem + 0.18vw, 0.9rem);
  --t-sm:  clamp(0.92rem, 0.88rem + 0.18vw, 1.02rem);
  --t-md:  clamp(1.04rem, 1rem + 0.22vw, 1.17rem);
  --t-lg:  clamp(1.22rem, 1.1rem + 0.5vw, 1.5rem);
  --t-h1:  clamp(3rem, 1.3rem + 4.3vw, 5.6rem);
  --t-h2:  clamp(3rem, 1.4rem + 4.8vw, 6rem);
  --t-fig: clamp(2.4rem, 1.5rem + 2.6vw, 4.2rem);

  /* ── miara ─────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --s-sec: clamp(88px, 10vw, 168px);
  --wrap: 1360px;
  --gut: clamp(18px, 4vw, 56px);
  --head-h: 64px;
  --plate-x: clamp(6px, 1.2vw, 18px);   /* metal widoczny wokół płyty szkła */

  /* ── ruch ──────────────────────────────────────────────────
     ŚWIATŁO, TAFLA, PRZESUW — patrz motion.css.               */
  --e-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --e-film:  cubic-bezier(0.7, 0, 0.2, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --d-1: .2s; --d-2: .4s; --d-3: .7s; --d-4: 1.2s;
}

/* na szkle linie są jaśniejsze niż na metalu */
.sec--paper, .print, .hero__proof, .modal__box--auth, .flash{ --rule:var(--glass-rule); }

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
/* Atrybut hidden musi wygrywać z każdym display w arkuszu — inaczej
   sekcja z display:flex zostaje widoczna na każdej zakładce.        */
[hidden]{ display:none !important; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 16px);
  scrollbar-color:#2A2F36 var(--m1);
  background:var(--m1);
}
/* Body niesie samą czerń. Blacha ze szczotkowaniem i światło nad nią
   to stałe warstwy względem ekranu (motion.css, sekcja 1): treść i płyty
   szkła przesuwają się nad nieruchomym stołem, a przewijanie nie
   przemalowuje blachy. */
body{
  position:relative;
  background:var(--m1);
  color:var(--tx);
  font-family:var(--f-text);
  font-size:var(--t-md);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; }
img,svg,canvas,iframe,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; width:100%; }
ol,ul{ padding:0; }
::selection{ background:rgba(236,239,243,.92); color:var(--ink); }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:fixed; top:-100px; left:var(--s-4); z-index:1300;
  padding:var(--s-3) var(--s-5); border-radius:var(--r-pill);
  background:rgba(236,239,243,.94); color:var(--ink); box-shadow:inset 0 1px 0 #fff, var(--drop);
  font-weight:700; transition:top var(--d-1) var(--e-out);
}
.skip:focus{ top:var(--s-4); }

/* ═══════════ SZKŁO — wspólne dla wszystkich tafli ═══════════
   Obwódka tafli: gradient, najjaśniejszy w lewym górnym i prawym
   dolnym rogu, wycięty maską do pasa jednego piksela. Stoi na własnej
   warstwie nad treścią, ale treść nigdy nie sięga krawędzi.        */
.sec--paper::before, .hero__proof::before, .print::before, .acct--guest .auth::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; padding:1px;
  background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ═══════════ PASEK — belka z przydymionego szkła ═══════════
   Ciemne szkło, które matuje treść przewijaną pod spodem. Jest niskie,
   więc rozmycie kosztuje mało. Po dolnej krawędzi biegnie światło
   postępu przewijania. */
.titleblock{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:stretch; min-height:var(--head-h);
  color:var(--on-metal);
  background:linear-gradient(180deg, rgba(10,11,13,.84), rgba(3,3,4,.74));
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.09), 0 1px 0 rgba(0,0,0,.55), 0 14px 32px -20px rgba(0,0,0,.85);
}
.titleblock::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, rgba(236,242,248,0), rgba(236,242,248,.7) 72%, #fff);
  transform-origin:0 50%; transform:scaleX(var(--prog, 0));
}
.titleblock__id{
  display:flex; align-items:center; gap:var(--s-3); align-self:center;
  padding:0 var(--s-5) 0 calc(var(--mk-x) + var(--mk-h) * 0.8214 + var(--s-3));
  white-space:nowrap;
}
/* Znak stoi w samym rogu ekranu, nie w rzędzie paska: pasek jest
   przypięty do góry, więc wystarczy mu pozycja bezwzględna, żeby
   trafić w narożnik. Nazwa cofa się o jego szerokość.

   Przy tej wielkości znak nie potrzebuje już dociążenia obrysem:
   jego własna laska (8,7% wysokości) ma przy 54 px 4,7 px, czyli
   tyle co laska nazwy obok. Obrys zostaje symboliczny, a szczeliny
   między A i T — te, które przy małych rozmiarach się zrastają —
   wracają na swoje miejsce. */
.titleblock{ --mk-h:54px; --mk-x:10px; --mk-y:5px; }
.titleblock__id .mark{
  position:absolute; left:var(--mk-x); top:var(--mk-y);
  height:var(--mk-h); stroke-width:14;
  /* Znak wystaje z metalu tak samo jak nazwa obok: łańcuch cieni
     liczony na kształcie, bo w SVG nie ma text-shadow. */
  filter:
    drop-shadow(1.6px 1.6px 0 #939AA2) drop-shadow(1.6px 1.6px 0 #646A72)
    drop-shadow(1.6px 1.6px 0 #3A3E44) drop-shadow(1.6px 1.6px 0 #18191D)
    drop-shadow(2px 3px 4px rgba(0,0,0,.6));
}
.titleblock__name{
  font-family:var(--f-display); font-weight:900; font-size:2.2rem;
  line-height:1; letter-spacing:.02em; text-transform:uppercase;
}
.titleblock__nav{
  position:relative; flex:1; display:flex; align-items:center;
  overflow-x:auto; scrollbar-width:none;
}
.titleblock__nav::-webkit-scrollbar{ display:none; }
.titleblock__nav > .tab:first-child{ margin-left:auto; }
.titleblock__nav > .tab:last-of-type{ margin-right:auto; }
.titleblock__acts{ display:flex; align-items:center; gap:var(--s-3); padding:0 var(--gut) 0 var(--s-4); }
.titleblock .lbl{ color:var(--metal-2); }

.tab{
  position:relative; z-index:1; display:flex; align-items:center; min-height:36px; padding:0 var(--s-4);
  border-radius:var(--r-pill); overflow:hidden;   /* światło naciśnięcia zostaje w kapsule */
  font-weight:600; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--metal-2); white-space:nowrap;
  transition:color var(--d-1) var(--e-out);
}
.tab:hover, .tab.is-on{ color:var(--on-metal); }
/* znacznik bez skryptu: szklana kapsuła pod aktywną zakładką;
   ze skryptem jedna kapsuła przejeżdża między zakładkami */
.tab.is-on{ background:rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.13); }
.js .titleblock__nav.has-ink .tab.is-on{ background:none; box-shadow:none; }

/* ═══════════ TYPOGRAFIA ═══════════ */
.h1, .h2{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  line-height:.86; letter-spacing:-.005em; text-wrap:balance;
}
.h1{ font-size:var(--t-h1); }
.h2{ font-size:var(--t-h2); }
/* Na metalu wielkie litery są wygrawerowane w stali: jasne u góry,
   chłodniejsze u dołu, z miejscem na pas światła (motion.css). Słowa
   nagłówków dzieli skrypt na osobne maski, więc tonacja leży na każdym
   słowie; bez skryptu litery są po prostu jasne. */
.sec--hero .h1 .roll-w > i, .sec--dark .h2 .roll-w > i, .foot__name{
  color:var(--on-metal);
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #FFFFFF 0%, #E3E8ED 46%, #98A1AB 100%);
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat;
  background-position:130% 0, 0 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.h3{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height:.95; letter-spacing:.005em;
}
.lbl{
  font-family:var(--f-mono); font-size:var(--t-2xs); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2);
}
.lead{ font-size:var(--t-lg); line-height:1.4; max-width:38ch; }
.prose{ color:var(--tx-2); max-width:60ch; }
.fine{ font-size:var(--t-xs); color:var(--tx-2); max-width:74ch; }
.sec--paper .fine, .print .fine{ color:var(--tx-3); }

/* ═══════════ SEKCJE — blacha albo płyta szkła ═══════════
   Sekcja na metalu nie ma własnego tła: widać czarną blachę i światło
   nad nią. Sekcja szklana to płyta ciemnego szkła osadzona w blasze,
   z czernią widoczną dookoła. Przez płytę widać rozmyte światło, które
   idzie po blasze za nią.                                            */
.sec{ position:relative; z-index:1; padding-block:var(--s-sec); color:var(--tx); }
.sec--paper{
  isolation:isolate; overflow:clip;
  margin:var(--plate-x);
  border-radius:var(--r-xl);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), var(--seat), var(--drop);
}
/* pierwsza płyta zakładki zaczyna się pod paskiem, nie za nim */
.sec--paper.is-lead{ margin-top:calc(var(--head-h) + var(--plate-x)); padding-top:calc(var(--s-sec) * .6); }
/* Nagłówek sekcji ma po prawej dużo miejsca, bo tekst kończy się na
   60 znakach. Stoi tam znak wodny przysłony — nie ilustracja, tylko
   ślad tego samego mechanizmu, który otwiera stronę. */
.sec__head{ position:relative; display:grid; gap:var(--s-5); margin-bottom:var(--s-8); }
.sec__head::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  right:-3%; top:calc(50% - min(16vw, 180px)); width:min(32vw, 360px); aspect-ratio:1;
  background:var(--iris-mark) center / contain no-repeat;
  opacity:.055;
}
@media (max-width:1080px){ .sec__head::after{ display:none; } }
.sec.is-lead:not(.sec--hero):not(.sec--paper){ padding-top:calc(var(--s-sec) * .6 + var(--head-h)); }

/* ═══════════ ZNAK MARKI ═══════════
   Monogram A i T. Jedna ścieżka leży w <symbol id="mark"> na górze
   dokumentu, a każde miejsce bierze ją przez <use>. Znak nie ma
   własnego koloru — jest w kolorze tekstu, który go otacza, więc
   działa na blasze, na szkle i w odwróconym oknie tak samo.
   Wysokość podaje miejsce; szerokość dobiera się sama.          */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* Znak ma wazyc tyle, co napis obok niego. Laska kroju to 15,1% jego
   stopnia, laska znaku (z obrysem 72 na 1000) to 15,9% jego wysokosci,
   wiec przy wysokosci 0,95 stopnia napisu obie laski maja tyle samo
   pikseli. Stad 0,95 przy kazdym uzyciu i jeden obrys tutaj — w
   jednostkach znaku, nie w pikselach, wiec waga trzyma sie w kazdej
   skali. Zlacza zostaja ostre (miter), bo wierzcholek A ma byc szpicem. */
.mark{
  display:block; flex:none; width:auto; height:1em; color:inherit;
  stroke:currentColor; stroke-width:72; stroke-linejoin:miter; stroke-miterlimit:12;
}

/* ═══════════ LITERY W BRYLE ═══════════
   Nazwa nie leży na metalu — wystaje z niego. Pod licem stoi osiem
   warstw stali, każda ciemniejsza, przesuniętych w dół i w prawo,
   czyli w stronę, w którą pada światło studyjne, a pod nimi jeden
   miękki cień na blasze. Głębia to jedna liczba (--z) podana w em,
   więc ten sam napis w pasku, w stopce i w otwarciu ma tę samą
   bryłę, każdy w swojej skali.

   --zk to mnożnik głębi. Stoi na 1, a zakłócenie (motion.css,
   sekcja 15) przeskakuje nim w krokach: bryła na moment wyjeżdża,
   znika albo odwraca się na drugą stronę, jakby sygnał zgubił
   kierunek światła.                                            */
/* Mnoznik glebi jest typowany, inaczej animacja nie ruszylaby go
   wcale: nierejestrowana zmienna nie zmienia sie w klatkach. */
@property --zk{ syntax:"<number>"; inherits:false; initial-value:1; }
.lettering{
  --z:0.14em; --zk:1;
  text-shadow:
    calc(var(--z) * var(--zk) * .125) calc(var(--z) * var(--zk) * .125) 0 #ACB3BB,
    calc(var(--z) * var(--zk) * .25)  calc(var(--z) * var(--zk) * .25)  0 #939AA2,
    calc(var(--z) * var(--zk) * .375) calc(var(--z) * var(--zk) * .375) 0 #7B828A,
    calc(var(--z) * var(--zk) * .5)   calc(var(--z) * var(--zk) * .5)   0 #646A72,
    calc(var(--z) * var(--zk) * .625) calc(var(--z) * var(--zk) * .625) 0 #4E535A,
    calc(var(--z) * var(--zk) * .75)  calc(var(--z) * var(--zk) * .75)  0 #3A3E44,
    calc(var(--z) * var(--zk) * .875) calc(var(--z) * var(--zk) * .875) 0 #282B30,
    calc(var(--z) * var(--zk))        calc(var(--z) * var(--zk))        0 #18191D,
    calc(var(--z) * var(--zk) * 1.25) calc(var(--z) * var(--zk) * 1.5)  calc(var(--z) * 1.1) rgba(0,0,0,.62);
}
/* Napis wypełniony gradientem ma lico przezroczyste, więc cień
   rysowałby się w środku liter. Kolejność idzie wtedy odwrotnie:
   bryłę niesie sam napis (lico kryjące, w kolorze dna), a stal
   z pasmem światła kładzie się na wierzchu osobną kopią z
   data-text, która dziedziczy te same gradienty. */
.lettering--clip{
  position:relative;
  color:#0E1014; -webkit-text-fill-color:#0E1014;
  text-shadow:
    calc(var(--z) * var(--zk) * .125) calc(var(--z) * var(--zk) * .125) 0 #ACB3BB,
    calc(var(--z) * var(--zk) * .25)  calc(var(--z) * var(--zk) * .25)  0 #939AA2,
    calc(var(--z) * var(--zk) * .375) calc(var(--z) * var(--zk) * .375) 0 #7B828A,
    calc(var(--z) * var(--zk) * .5)   calc(var(--z) * var(--zk) * .5)   0 #646A72,
    calc(var(--z) * var(--zk) * .625) calc(var(--z) * var(--zk) * .625) 0 #4E535A,
    calc(var(--z) * var(--zk) * .75)  calc(var(--z) * var(--zk) * .75)  0 #3A3E44,
    calc(var(--z) * var(--zk) * .875) calc(var(--z) * var(--zk) * .875) 0 #282B30,
    calc(var(--z) * var(--zk))        calc(var(--z) * var(--zk))        0 #18191D,
    calc(var(--z) * var(--zk) * 1.25) calc(var(--z) * var(--zk) * 1.5)  calc(var(--z) * 1.1) rgba(0,0,0,.62);
}
.lettering--clip::before{
  content:attr(data-text); position:absolute; left:0; top:0;
  pointer-events:none; white-space:pre; text-shadow:none;
  background-image:inherit; background-size:inherit;
  background-repeat:inherit; background-position:inherit;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ═══════════ AKCJE ═══════════
   Szklane kapsuły. Zwykła jest przezroczysta, jasna — jaśniejsza,
   z mocną krawędzią. Pod kursorem po kapsule przejeżdża odblask
   (motion.css), a szkło płynnie jaśnieje.                          */
.act{
  --mx:0px; --my:0px;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  min-height:56px; padding:0 var(--s-7);
  font-family:var(--f-text); font-weight:700; font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:var(--tx);
  background-color:var(--act-c); background-image:var(--act-i);
  border:0; border-radius:var(--r-pill);
  box-shadow:var(--act-edge);
  transform:translate3d(var(--mx), var(--my), 0);
  transition:background-color .45s var(--e-out), color .3s var(--e-out), transform .6s var(--e-out), scale .2s var(--e-out);
}
.act:hover, .act:focus-visible{ background-color:var(--act-c-h); }
.act:focus-visible{ outline-color:currentColor; }
.act:active{ scale:.97; }
.act--primary{ color:var(--pri-tx); background-color:var(--pri-c); background-image:var(--pri-i); box-shadow:var(--pri-edge); }
.act--primary:hover, .act--primary:focus-visible{ background-color:var(--pri-c-h); }
.act--sm{ min-height:40px; padding:0 var(--s-4); font-size:var(--t-2xs); letter-spacing:.12em; }
.act--full{ width:100%; }
.act[disabled]{ opacity:.45; cursor:not-allowed; }
/* brak nagrania: przerywana krawędź — tu jeszcze nic nie ma, i to celowo */
.act--void{ color:var(--tx-3); background:none; box-shadow:none; border:1px dashed currentColor; }
.act--void:hover, .act--void:focus-visible{ background:none; }

/* ═══════════ LICZBY ═══════════
   Trzy liczby w „Inside” na zakładce Access — wyliczone z lekcji. */
.stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s-5) var(--s-4); }
.stat{
  display:grid; align-content:start; gap:6px; min-width:0;
  padding-top:var(--s-3); border-top:1px solid var(--rule);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.45);
}
.stat__v{
  font-family:var(--f-display); font-weight:900; font-size:var(--t-fig);
  line-height:.88; letter-spacing:-.01em; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.stat__k{
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em;
  text-transform:uppercase; color:var(--tx-2);
}

/* ═══════════ TAŚMA FILMU — metal z perforacją ═══════════
   Wspólny materiał taśm: anodowany pas z fazą. Na szkle przez otwory
   przechodzi światło, na metalu otwory są wycięte.                 */
.reel__film, .layer__film, .lesson__film{
  background:
    var(--holes-lit) 0 5px / 22px 8px repeat-x,
    var(--holes-lit) 0 calc(100% - 5px) / 22px 8px repeat-x,
    var(--anod);
  box-shadow:var(--edge-metal), 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06), 0 16px 30px -16px rgba(0,0,0,.85);
}

/* ═══════════ KURS NA TAŚMIE — panel szkła ═══════════
   Obok oferty stoi tafla szkła, a na niej cały kurs: dwie taśmy, po
   jednej na ścieżkę. Klatka to lekcja, jej szerokość to długość
   nagrania; kreska z numerem etapu schodzi do klatki, od której etap
   się zaczyna. Kursor jest lupą.                                     */
.reel{ display:grid; gap:var(--s-6); }
.reel__track{ display:grid; gap:var(--s-2); }
.reel__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-1) var(--s-4);
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em; text-transform:uppercase; color:var(--tx-2);
}
.reel__head b{
  font-family:var(--f-display); font-weight:900; font-size:clamp(1.5rem, 1rem + 1.2vw, 2.2rem);
  line-height:.9; letter-spacing:.01em; color:var(--on-metal);
}
.reel__film{ list-style:none; display:flex; margin-top:26px; padding:18px 5px; border-radius:var(--r-sm); }
.reel__frame{ position:relative; flex:1 1 0; min-width:clamp(26px, 3.2vw, 44px); padding-inline:3px; }
/* slajd bez światła: przydymione szkło w metalowej taśmie */
.reel__img{
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  height:clamp(72px, 3rem + 3vw, 112px); padding:8px clamp(3px, .6vw, 10px);
  border-radius:var(--r-xs);
  background:linear-gradient(170deg, #252A31, #121519 60%, #0D0F12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.16);
  transition:background-color .45s var(--e-out), box-shadow .45s var(--e-out), transform .45s var(--e-out);
}
.reel__img b{
  position:relative; z-index:1;
  font-family:var(--f-display); font-weight:900; font-size:clamp(max(11px, .85rem), .55rem + 1.1vw, 2.4rem);
  line-height:.8; color:var(--on-metal);
}
/* pod lupą slajd unosi się, a światło przechodzi przez niego */
.reel__frame.is-hot .reel__img{
  transform:perspective(700px) translate3d(0, -3px, 14px);
  background-color:#3A424C; background-image:linear-gradient(170deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
/* etap: numer nad taśmą, kreska schodzi przez perforację do klatki */
.reel__stage{
  position:absolute; left:3px; bottom:calc(100% + 22px); padding-left:7px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tx-2); white-space:nowrap; pointer-events:none;
}
.reel__stage::before{
  content:''; position:absolute; left:0; top:1px; bottom:-22px;
  border-left:1px solid rgba(255,255,255,.3);
}

/* odczyt pod taśmą — pasek na szkle, nie dymek nad kursorem */
.ro{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-5);
  min-height:48px; padding-top:var(--s-3); border-top:1px solid var(--rule);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.4);
  font-size:var(--t-sm);
}
.ro__no, .ro__d{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--tx-2); }
.ro__s{ font-family:var(--f-display); font-weight:900; font-size:var(--t-lg); line-height:1; text-transform:uppercase; color:var(--on-metal); }
.ro__hint{ font-size:var(--t-xs); color:var(--tx-2); }

/* ═══════════ PIERWSZY EKRAN ═══════════ */
/* Pierwszy ekran mieści nagłówek, ofertę i cały kurs na szkle. */
.sec--hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  padding-top:calc(var(--head-h) + clamp(28px, 3.4vw, 56px)); padding-bottom:clamp(40px, 5vw, 88px);
}
/* ten sam znak wodny w dolnej połowie pierwszego ekranu, gdzie
   zostaje sama blacha */
.sec--hero::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:calc(var(--gut) - 4vw); bottom:clamp(60px, 8vw, 120px); width:min(30vw, 340px); aspect-ratio:1;
  background:var(--iris-mark) center / contain no-repeat;
  opacity:.05;
}
@media (max-width:1080px){ .sec--hero::after{ display:none; } }
.hero{
  flex:1; display:grid; align-items:center;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr);
  gap:clamp(32px, 5vw, 88px); padding-bottom:clamp(20px, 2.4vw, 36px);
}
.hero__lead{ display:grid; gap:clamp(16px, 1.6vw, 24px); align-content:center; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
/* dane techniczne kursu: mono, z trójkątem jak numer klatki na brzegu taśmy */
.hero__spec{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-1);
  font-family:var(--f-mono); font-size:var(--t-2xs); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2);
}
.hero__spec span{ display:inline-flex; align-items:center; gap:8px; }
.hero__spec span::before{
  content:''; flex:none; width:0; height:0;
  border-left:6px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent;
}

/* ═══════════ TAŚMA POD PIERWSZYM EKRANEM ═══════════
   Film biegnie dalej, poza ekran: pas anody z perforacją, wycięty
   z tego samego materiału co taśmy kursu. Gaśnie przy obu krawędziach
   ekranu, żeby nie kończył się nożem.                              */
.leader{
  position:relative; overflow:hidden; height:clamp(40px, 4.4vw, 58px); margin-top:clamp(20px, 2.4vw, 36px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.leader i{
  position:absolute; top:0; bottom:0; left:0; width:200%;
  background:
    var(--holes-cut) 0 7px / 22px 8px repeat-x,
    var(--holes-cut) 0 calc(100% - 7px) / 22px 8px repeat-x,
    var(--anod);
  box-shadow:var(--edge-metal), 0 0 0 1px rgba(0,0,0,.5);
  will-change:transform;
}
/* tafla szkła osadzona w blasze */
.hero__proof{
  position:relative; isolation:isolate; overflow:clip;
  display:grid; gap:var(--s-5); min-width:0;
  padding:clamp(20px, 2.2vw, 34px) clamp(18px, 2.2vw, 34px) clamp(14px, 1.6vw, 24px);
  border-radius:var(--r-lg);
  color:var(--on-metal); background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), var(--seat), var(--drop);
}

/* ═══════════ CZEGO UCZYMY ═══════════
   Kolejność niesie treść, więc numery zostają — jako wielkie cyfry
   wycięte w szkle. Przy każdym etapie hasła i pasek klatek: po jednej
   na lekcję z biblioteki. Pod kursorem wiersz rozjaśnia się, a cyfra
   się wypełnia.                                                      */
.layers{ list-style:none; display:grid; border-top:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(0,0,0,.45); }
.layer{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:minmax(96px, .3fr) minmax(0, 1fr) 236px;
  gap:var(--s-5) var(--s-7); align-items:center;
  padding:var(--s-6) 0; border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
.layer::before{
  content:''; position:absolute; inset:0 calc(-1 * var(--gut)); z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.06) 22%, rgba(255,255,255,.06) 78%, rgba(255,255,255,0));
  opacity:0; transform:scaleY(.86);
  transition:opacity .6s var(--e-out), transform .7s var(--e-out);
}
.layer:hover::before{ opacity:1; transform:none; }
/* Kontur i wypełnienie biorą kolor wiersza. Wypełnienie steruje
   text-fill-color: color:transparent zgasiłby też kontur.         */
.layer__n{
  font-family:var(--f-display); font-weight:900; font-size:clamp(3.4rem, 2rem + 4vw, 6rem);
  line-height:.8; -webkit-text-fill-color:rgba(237,239,242,0); -webkit-text-stroke:1.5px currentColor;
  transition:-webkit-text-fill-color .6s var(--e-out);
}
.layer:hover .layer__n{ -webkit-text-fill-color:var(--on-metal); }
.layer__b{ display:grid; gap:var(--s-3); max-width:62ch; }
/* hasła etapu: grawer z trójkątem, jak numer klatki na brzegu taśmy */
.layer__topics{
  list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-1);
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em; text-transform:uppercase;
  color:var(--tx-2);
}
.layer__topics li{ display:inline-flex; align-items:center; gap:8px; }
.layer__topics li::before{
  content:''; flex:none; width:0; height:0;
  border-left:6px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent;
}
/* pasek lekcji etapu: metalowa taśma, klatki tej samej szerokości */
.layer__strip{ display:grid; gap:var(--s-3); justify-items:start; }
.layer__film{
  display:flex; padding:15px 6px; border-radius:var(--r-sm);
  background:
    var(--holes-lit) 0 3px / 22px 8px repeat-x,
    var(--holes-lit) 0 calc(100% - 3px) / 22px 8px repeat-x,
    var(--anod);
  transition:transform .6s var(--e-out);
}
.layer__film i{
  display:grid; place-items:end start; width:64px; aspect-ratio:3 / 2; margin-inline:3px; padding:3px 6px;
  border-radius:3px;
  font-style:normal; font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--metal-2);
  background:linear-gradient(170deg, #252A31, #111418);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.14);
}
.layer__meta{
  display:grid; gap:2px;
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em; text-transform:uppercase;
  color:var(--tx-2);
}
.layer__meta b{ font-weight:500; color:var(--on-metal); }
.layer:hover .layer__film, .layer__strip:focus-visible .layer__film{ transform:perspective(900px) translate3d(0, -3px, 16px); }

/* ═══════════ FILTRY ═══════════
   Przezroczyste szklane klawisze. Wybrany ma jasną szklaną kapsułę; ze
   skryptem jedna kapsuła przejeżdża pod wybrany klawisz (motion.css). */
.chips{ position:relative; display:flex; flex-wrap:wrap; gap:var(--s-2); }
.chip{
  position:relative; z-index:1; overflow:hidden;
  min-height:40px; padding:0 var(--s-5); border-radius:var(--r-pill);
  font-family:var(--f-mono); font-size:var(--t-2xs); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--on-metal);
  background-color:rgba(255,255,255,.04);
  background-image:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:color .45s var(--e-out), background-color .35s var(--e-out);
}
.chip:hover{ background-color:rgba(255,255,255,.1); }
.chip.is-on{
  color:#fff; background-color:var(--pri-c); background-image:var(--pri-i); box-shadow:var(--pri-edge);
}
.js .chips.has-ink .chip.is-on{ background:none; box-shadow:none; }

/* ═══════════ BIBLIOTEKA WIDEO — taśma na ścieżkę ═══════════
   Plakaty lekcji stoją klatka przy klatce w metalowej taśmie na płycie
   szkła. Zamknięty slajd jest przydymiony, otwarty — rozświetlony,
   a lekcja bez nagrania ma tylko przerywaną krawędź.                   */
.libbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-3) var(--s-5); margin-bottom:var(--s-7);
}
.libbar__sum{
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em;
  text-transform:uppercase; color:var(--tx-2);
}
.library{ display:grid; gap:var(--s-8); }
.track{ display:grid; gap:var(--s-4); }
.track__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--s-2) var(--s-5); padding-bottom:var(--s-3);
  border-bottom:1px solid rgba(255,255,255,.16); box-shadow:0 1px 0 rgba(0,0,0,.45);
}
.track__name{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2rem, 1.4rem + 1.6vw, 3.2rem); line-height:.86;
}
.track__meta{
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em;
  text-transform:uppercase; color:var(--tx-2);
}
.track__roll{ list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--s-6) var(--s-3); }
.lesson{ display:grid; grid-template-rows:auto 1fr; min-width:0; }
.lesson__film{
  position:relative; padding:26px 9px 40px; cursor:pointer; border-radius:var(--r-sm);
  background:
    var(--holes-lit) 0 8px / 22px 8px repeat-x,
    var(--holes-lit) 0 calc(100% - 8px) / 22px 8px repeat-x,
    var(--anod);
  container-type:inline-size;
  transition:transform .6s var(--e-out);
}
.lesson__img{
  position:relative; display:grid; grid-template-rows:auto 1fr auto; gap:4px;
  aspect-ratio:16 / 10; overflow:hidden; border-radius:var(--r-xs);
  padding:clamp(8px, 5cqi, 14px) clamp(10px, 6cqi, 16px);
  color:var(--on-metal);
  background:linear-gradient(165deg, #252A31, #121519 58%, #0D0F12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.16);
  transition:filter .6s var(--e-out);
}
/* odbicie na tafli slajdu: stały, ukośny połysk */
.lesson__img::before{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(128deg, rgba(255,255,255,.12), rgba(255,255,255,0) 42%);
}
.lesson__top, .lesson__state{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:6px; min-width:0;
  font-family:var(--f-mono); font-size:max(11px, 4.4cqi); letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap; color:var(--metal-2);
}
.lesson__top{ justify-content:space-between; }
.lesson__state svg{ flex:none; }
.lesson__no{
  position:relative; z-index:1;
  align-self:center; font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.2rem, 26cqi, 4.6rem); line-height:.8; letter-spacing:-.01em;
  color:transparent; -webkit-text-stroke:1.5px var(--on-metal);
}
/* linijka czasu na slajdzie: kreska na każdą minutę nagrania, dłuższa
   co pięć. Długość lekcji widać na plakacie tak samo jak na taśmie
   kursu — to ta sama liczba, nie ozdoba. */
.lesson__ruler{
  position:absolute; z-index:1; pointer-events:none;
  left:clamp(10px, 6cqi, 16px); right:clamp(10px, 6cqi, 16px);
  bottom:calc(clamp(8px, 5cqi, 14px) + 20px); height:10px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, transparent 1px calc(500% / var(--mins, 30))),
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px calc(100% / var(--mins, 30)));
  background-size:100% 10px, 100% 5px;
  background-position:0 0, 0 100%;
  background-repeat:no-repeat;
}
.lesson.is-open .lesson__ruler{
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 1px, transparent 1px calc(500% / var(--mins, 30))),
    repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 1px, transparent 1px calc(100% / var(--mins, 30)));
}
@container (max-width:220px){
  .lesson__ruler{ display:none; }
}

/* nadruk brzegu: numer lekcji i data wydania, jak numer klatki na taśmie */
.lesson__edge{
  position:absolute; left:14px; right:14px; bottom:18px; display:flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--metal-3);
  white-space:nowrap; overflow:hidden;
}
.lesson__edge b{ font-weight:400; margin-right:auto; }
.lesson__edge::before{
  content:''; width:0; height:0;
  border-left:6px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent;
}
/* otwarta: slajd rozświetlony — jasne szkło z mocną krawędzią */
.lesson.is-open .lesson__img{
  background:radial-gradient(120% 90% at 40% 10%, rgba(255,255,255,.38), rgba(255,255,255,.16) 58%, rgba(255,255,255,.1)) #1A1D21;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -10px 18px -12px rgba(255,255,255,.3);
}
.lesson.is-open .lesson__top, .lesson.is-open .lesson__state{ color:var(--on-metal); }
.lesson.is-open .lesson__state svg{ width:20px; height:20px; }
/* bez nagrania: slajdu jeszcze nie ma, sama przerywana krawędź */
.lesson.is-pending .lesson__img{ background:transparent; box-shadow:none; border:1px dashed rgba(236,239,243,.45); }
.lesson.is-pending .lesson__img::before{ display:none; }
/* Pod kursorem taśma unosi się nad szkłem, a slajd łapie więcej światła.
   Głębszy cień leży gotowy na osobnej warstwie i tylko się pojawia —
   animowany box-shadow przemalowywałby szkło pod taśmą w każdej klatce. */
.lesson__film::after, .layer__film::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  box-shadow:0 26px 40px -20px rgba(0,0,0,.9);
  opacity:0; transition:opacity .6s var(--e-out);
}
.layer__film{ position:relative; isolation:isolate; }
.lesson__film{ isolation:isolate; }
/* plakat wychodzi w stronę patrzącego, nie tylko do góry */
.lesson__film:hover{ transform:perspective(900px) translate3d(0, -5px, 26px); }
.lesson__film:hover::after, .layer:hover .layer__film::after, .layer__strip:focus-visible .layer__film::after{ opacity:1; }
.lesson__film:hover .lesson__img{ filter:brightness(1.4); }
.lesson.is-open .lesson__film:hover .lesson__img{ filter:brightness(1.15); }
/* wąski plakat zostawia samą kłódkę — napis mieszka w przycisku pod spodem */
@container (max-width:220px){
  .lesson__state span{ display:none; }
}
.lesson__body{ display:grid; grid-template-rows:auto 1fr auto; gap:var(--s-2); min-width:0; padding:var(--s-4) var(--s-3) 0 4px; }
.lesson__t{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.25rem, 1rem + .6vw, 1.6rem); line-height:.95; text-wrap:balance;
  /* Dwie linie miejsca, nawet gdy tytul zajmuje jedna. W rzedzie
     obok siebie stoja tytuly rozne co do dlugosci ("Entry" przy
     "Equilibrium and Invalidations"), a po polsku lamia sie prawie
     wszystkie. Bez tego opis w kazdym kaflu zaczynalby sie na innej
     wysokosci i rzad wygladalby na zsypany. 1.9em to dokladnie dwie
     linie przy line-height .95; 2lh mowi to samo wprost tam, gdzie
     przegladarka zna te jednostke.                                 */
  min-block-size:1.9em;
  min-block-size:2lh;
}
.lesson__b{ font-size:var(--t-sm); color:var(--tx-2); }
.lesson__foot{ display:flex; padding-top:var(--s-2); }

/* ═══════════ PANEL SZKLANY ═══════════
   Na metalu: tafla ciemnego szkła z rozmyciem tła. Na płycie szkła:
   cieńsza, jaśniejsza tafla położona na niej, bez drugiego rozmycia. */
.print{
  position:relative; isolation:isolate; overflow:clip;
  padding:var(--s-6); border-radius:var(--r-lg);
  color:var(--on-metal); background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), var(--seat), var(--drop);
}
.sec--paper .print{
  background:linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.03) 60%, rgba(255,255,255,.045)) rgba(255,255,255,.015);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(0,0,0,.4), 0 26px 50px -30px rgba(0,0,0,.85);
}

/* ═══════════ LIVE — wraca razem z zakładką ═══════════ */
.livegrid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s-5); }
.ltable{ margin-top:var(--s-4); }
.ltable td{ padding:var(--s-3) 0; border-bottom:1px solid var(--rule); font-size:var(--t-sm); }
.ltable tr:last-child td{ border-bottom:0; }
.ltable td:first-child{
  font-family:var(--f-mono); font-size:var(--t-xs); white-space:nowrap;
  padding-right:var(--s-5); color:var(--tx-2);
}
/* brak terminów to zdanie, nie pusta tabela */
.ltable td.ltable__none{
  padding:var(--s-4) 0 0; white-space:normal;
  font-family:var(--f-text); font-size:var(--t-sm); color:var(--tx-2);
}
.agenda{ list-style:none; counter-reset:ag; display:grid; gap:var(--s-4); margin-top:var(--s-4); }
.agenda li{ position:relative; counter-increment:ag; padding-left:var(--s-8); font-size:var(--t-sm); color:var(--tx-2); }
.agenda li::before{
  content:counter(ag, decimal-leading-zero);
  position:absolute; left:0; top:-.15em;
  font-family:var(--f-display); font-weight:900; font-size:1.8rem; line-height:1; color:var(--tx);
}

/* ═══════════ DOSTĘP ═══════════
   Po lewej tafla szkła: cena z przełącznikiem walut, to, co w cenie,
   i zakup. Po prawej, na blasze, to, co dostęp otwiera — obie ścieżki
   jako taśmy i liczby policzone z treści.                            */
.access{ display:grid; grid-template-columns:minmax(0, 540px) minmax(0, 1fr); gap:var(--s-8); align-items:start; }
.plans{ display:grid; min-width:0; }
.plan{ display:grid; gap:var(--s-4); align-content:start; padding:var(--s-7) var(--s-6) var(--s-6); }
.plan__top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding-bottom:var(--s-4); border-bottom:1px solid var(--rule); box-shadow:0 1px 0 rgba(0,0,0,.4);
}
.plan__name{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.8rem, 1.4rem + 1vw, 2.4rem); line-height:.9;
}
.cur{ display:inline-flex; align-items:center; gap:var(--s-3); }
.cur > span{
  font-family:var(--f-mono); font-size:var(--t-2xs); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx-2);
}
/* 16 px: poniżej iOS powiększa stronę przy otwarciu listy.
   Lista systemowa w ciemnej odmianie, jak reszta szkła. */
.cur select{
  -webkit-appearance:none; appearance:none; color-scheme:dark;
  min-height:44px; padding:0 40px 0 16px; border-radius:var(--r-md);
  font-family:var(--f-mono); font-size:16px; font-weight:500; letter-spacing:.04em; color:var(--on-metal);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23EDEFF2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center / 12px 8px,
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  background-color:rgba(8,9,11,.5);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.4);
  cursor:pointer;
  transition:background-color var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out);
}
.cur select:hover{ border-color:rgba(255,255,255,.34); }
.cur select:focus-visible{ outline:2px solid var(--on-metal); outline-offset:2px; }
.plan__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s-2) var(--s-3); }
.plan__amt{
  display:inline-block;
  font-family:var(--f-display); font-weight:900; font-size:clamp(4.5rem, 3rem + 4vw, 6rem);
  line-height:.8; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.plan__approx{ font-style:normal; font-weight:800; font-size:.5em; vertical-align:.32em; margin-right:.08em; }
.plan__cur{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em; text-transform:uppercase; color:var(--tx-2); }
.plan__cur b{ font-weight:500; color:var(--on-metal); }
/* miejsce na zdanie o kursie stoi zawsze — lista nie skacze przy zmianie waluty */
.plan__fx{ min-height:1.55em; font-size:var(--t-xs); color:var(--tx-3); }
.plan__list{ list-style:none; display:grid; gap:var(--s-3); padding-block:var(--s-1) var(--s-2); }
.plan__list li{ position:relative; padding-left:var(--s-6); font-size:var(--t-sm); color:var(--tx-2); }
.plan__list li::before{ content:''; position:absolute; left:0; top:.72em; width:14px; height:2px; border-radius:2px; background:var(--on-metal); }
/* zapowiedziane, jeszcze niedostępne: kreska przerywana, jak wszystko, czego jeszcze nie ma */
.plan__list li.is-later{ color:var(--tx-3); }
.plan__list li.is-later::before{ height:0; background:none; border-top:2px dashed var(--metal-3); border-radius:0; }
.plan__list em{
  margin-left:var(--s-3); font-style:normal; font-family:var(--f-mono); font-size:var(--t-2xs);
  letter-spacing:.04em; text-transform:uppercase;
}
.plan__trust{ display:flex; flex-wrap:wrap; justify-content:center; row-gap:var(--s-1); font-size:var(--t-xs); color:var(--tx-3); text-align:center; }
.plan__trust span{ padding-inline:var(--s-3); }
.plan__trust span + span{ border-left:1px solid var(--rule); }
.plan__warn{ padding:var(--s-3) var(--s-4); border-radius:var(--r-md); font-size:var(--t-xs); line-height:1.5; color:var(--tx-2); border:1px dashed var(--metal-3); }

.access__side{ display:grid; gap:var(--s-6); align-content:start; min-width:0; padding-top:var(--s-4); }
.inside{ display:grid; gap:var(--s-5); min-width:0; }
.inside__h{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height:.95;
}
.inside__sheet{ display:grid; gap:var(--s-4); }
.inside__row{ display:grid; gap:var(--s-2); }
.inside__lvl{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2); }
/* ścieżka jako taśma na blasze: otwory wycięte, slajdy przydymione */
.inside__film{
  list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr));
  padding:18px 5px; border-radius:var(--r-sm);
  background:
    var(--holes-cut) 0 5px / 22px 8px repeat-x,
    var(--holes-cut) 0 calc(100% - 5px) / 22px 8px repeat-x,
    linear-gradient(180deg, #171A1F, #0C0E11);
  box-shadow:var(--edge-metal), 0 0 0 1px rgba(0,0,0,.6), 0 16px 30px -20px rgba(0,0,0,.9);
}
.inside__film li{
  display:grid; align-content:space-between; gap:4px; aspect-ratio:16 / 10; min-width:0;
  margin-inline:3px; padding:8px 10px; border-radius:3px;
  background:linear-gradient(170deg, #22262D, #101216);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.14);
}
.inside__film b{ font-family:var(--f-display); font-weight:900; font-size:clamp(1.3rem, .9rem + 1vw, 2.1rem); line-height:.85; }
.inside__film span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--metal-3); white-space:nowrap; overflow:hidden; }
/* Minuty mieszczą się dopiero w klatce szerszej niż ~100 px; przy dwóch
   kolumnach poniżej 1240 px klatka zostaje z samym numerem. Próg stoi
   w zwykłym @media: zapytanie o szerokość kontenera na dziesięciu klatkach
   kosztowało kilkaset milisekund układu przy każdym wejściu na zakładkę. */
@media (min-width:901px) and (max-width:1240px){
  .inside__film span{ display:none; }
}
.stats.inside__nums{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.inside__nums .stat__v{ order:-1; font-size:clamp(2rem, 1.4rem + 1.4vw, 3rem); }
.access__note{ max-width:56ch; padding-top:var(--s-4); border-top:1px solid var(--rule); box-shadow:inset 0 1px 0 rgba(0,0,0,.45); }

/* ═══════════ KONTO ═══════════ */
.acct{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--s-5); }
.acct .print{ display:grid; gap:var(--s-3); align-content:start; }
.acct__state{ font-size:var(--t-sm); color:var(--tx-2); }
.acct__state--on b{ color:var(--on-metal); font-weight:600; }

/* ═══════════ BRAK DANYCH ═══════════ */
.nodata{
  grid-column:1 / -1; display:grid; place-items:center; gap:var(--s-4);
  min-height:220px; padding:var(--s-6); text-align:center;
  border:1.5px dashed currentColor; border-radius:var(--r-lg);
}
.nodata__t{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.06em; text-transform:uppercase; }

/* ═══════════ STOPKA — klin od stali do czerni i znak ═══════════ */
.foot{ position:relative; z-index:1; color:var(--on-metal); padding-bottom:var(--s-8); }
/* klin kalibracyjny: od jasnej stali do czerni blachy */
.wedge{
  height:14px;
  background:linear-gradient(90deg,
    #C6CCD3 0 9.09%, #ACB3BB 9.09% 18.18%, #939AA2 18.18% 27.27%, #7B828A 27.27% 36.36%,
    #646A72 36.36% 45.45%, #4E535A 45.45% 54.54%, #3A3E44 54.54% 63.63%, #282B30 63.63% 72.72%,
    #18191D 72.72% 81.81%, #0B0C0E 81.81% 90.9%, #030304 90.9% 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5);
}
.foot__grid{
  display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  gap:var(--s-6) var(--s-8); padding-top:var(--s-8); align-items:start;
}
.foot__mark{ margin:0 0 var(--s-5); color:var(--on-metal); }
.foot__mark .mark{ fill:url(#steel); stroke:url(#steel); }
.foot__mark .mark{ height:clamp(2.85rem, 1.52rem + 3.8vw, 5.7rem); }   /* 0,95 stopnia nazwy w stopce */
.foot__name{
  font-family:var(--f-display); font-weight:900; font-size:clamp(3rem, 1.6rem + 4vw, 6rem);
  line-height:.82; text-transform:uppercase; margin-bottom:var(--s-4);
}
/* mapa zakładek: wiersze pod linią; pod kursorem linia jaśnieje, nazwa
   przesuwa się, a trójkąt wychodzi jej naprzeciw */
.foot__nav{ display:grid; border-top:1px solid var(--metal-rule); }
.foot__link{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:52px;
  font-weight:600; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--metal-2);
  border-bottom:1px solid var(--metal-rule);
  transition:color .3s var(--e-out), border-color .3s var(--e-out);
}
.foot__link > span{ transition:transform .5s var(--e-out); }
.foot__link::after{
  content:''; flex:none; width:0; height:0;
  border-left:6px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .5s var(--e-out);
}
.foot__link:hover, .foot__link:focus-visible{ color:var(--on-metal); border-color:rgba(236,239,243,.5); }
.foot__link:hover > span, .foot__link:focus-visible > span{ transform:translateX(10px); }
.foot__link:hover::after, .foot__link:focus-visible::after{ transform:translateX(-4px); }
.foot__legal{ margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--metal-rule); }
body:has(.modebar) .foot{ padding-bottom:var(--s-10); }

/* ═══════════ ZGODA ═══════════
   Szklana tafla w lewym dolnym rogu — naprzeciw kapsuły asystenta.
   Nie jest oknem: nic nie blokuje i nie zabiera fokusu, a czeka na
   nią tylko wykres. Na telefonie zajmuje całą szerokość nad paskiem
   trybu demonstracyjnego. */
.consent{
  position:fixed; left:var(--gut); bottom:var(--s-6); z-index:75;
  width:min(440px, calc(100vw - 2 * var(--gut)));
  display:grid; gap:var(--s-3); padding:var(--s-5);
  border-radius:22px; color:var(--on-metal);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), 0 0 0 1px rgba(0,0,0,.72), 0 30px 70px -30px rgba(0,0,0,.95);
}
.consent[hidden]{ display:none; }
body:has(.modebar) .consent{ bottom:calc(var(--s-6) + 38px); }
.consent__h{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--metal-2); }
.consent__p{ font-size:var(--t-xs); line-height:1.5; color:var(--tx-2); }
.consent__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); margin-top:var(--s-1); }
@media (max-width:760px){
  .consent{ left:var(--s-2); right:var(--s-2); width:auto; bottom:var(--s-2); padding:var(--s-4); border-radius:18px; }
  body:has(.modebar) .consent{ bottom:calc(var(--s-2) + 52px); }
}

/* wykres czeka na zgodę: zdanie i przycisk w środku tafli */
.chart__consent-acts{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-2) var(--s-4); }

/* stopka: dokumenty i ustawienia cookies, drobnym drukiem */
.foot__law{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-6);
  padding-top:var(--s-4); border-top:1px solid var(--metal-rule);
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.06em; text-transform:uppercase;
}
.foot__law a, .foot__law .linkbtn{ color:var(--metal-2); text-decoration:none; }
.foot__law a:hover, .foot__law a:focus-visible, .foot__law .linkbtn:hover{ color:var(--on-metal); }

/* zdanie o regulaminie pod drogami do nowego konta */
.auth__agree{ font-size:var(--t-xs); line-height:1.5; color:var(--tx-3); }
.auth__agree a{ color:var(--tx-2); }

/* ═══════════ OKNA ═══════════ */
.modal{ position:fixed; inset:0; z-index:900; display:grid; place-items:center; padding:var(--s-4); }
.modal[hidden]{ display:none; }
/* Pod oknem strona gaśnie i lekko się rozmywa — okno szkła leży na niej. */
.modal__bg{
  position:absolute; inset:0; background:rgba(2,2,3,.62);
  -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%);
}
.modal__box{
  position:relative; width:min(460px, 100%); max-height:calc(100svh - 2 * var(--s-4)); overflow:auto;
  display:grid; gap:var(--s-4); padding:var(--s-7) var(--s-6);
  border-radius:var(--r-lg);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.9);
}
.modal--wide .modal__box{ width:min(1000px, 100%); }
/* odtwarzacz: film w czarnej metalowej ramie, jak ekran w obudowie */
.modal__box--player{
  padding:0 0 var(--s-2); gap:0; color:var(--on-metal);
  background:linear-gradient(180deg, #14171B, #08090B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.7), 0 40px 100px -40px rgba(0,0,0,.95);
}
#playerNote:empty{ display:none; }
.modal__x{
  position:absolute; top:10px; right:10px; z-index:3;
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  color:inherit;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .6s var(--e-out), background-color .3s var(--e-out);
}
.modal__x:hover{ transform:rotate(90deg); background-color:rgba(255,255,255,.14); }
.player__bar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-5) var(--s-5) var(--s-4);
}
.player__bar .modal__x{ position:static; }
.player__stage{
  position:relative; aspect-ratio:16 / 9; margin-inline:var(--s-3); overflow:hidden;
  border-radius:var(--r-md); background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 1px rgba(0,0,0,.8);
}
.player__stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.player__stage .nodata{ height:100%; border:0; border-radius:0; }
.modal__box--player .fine{ padding:var(--s-3) var(--s-5) var(--s-4); }
/* Wykres obok lekcji: okno rozsuwa się, film zostaje większy.
   Węziej wykres schodzi pod film, a nie ściska go w pasek. */
.player__acts{ display:flex; align-items:flex-start; gap:var(--s-2); }
.player__split{ display:grid; gap:var(--s-3); margin-inline:var(--s-3); }
.player__split .player__stage{ margin-inline:0; }
.player__side{ min-height:clamp(280px, 40vh, 520px); padding:0; }
.modal__box--player.is-split{ width:min(1480px, 100%); }
@media (min-width:1081px){
  .modal__box--player.is-split .player__split{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); align-items:start; }
}

/* ═══════════ WYKRES — żywy rynek w tafli ═══════════
   Tafla szkła z paskiem instrumentów i ramką z TradingView. Dopóki
   nikt nie poprosi o wykres, w tafli stoi zdanie, skąd się weźmie —
   nie podstawiamy tam żadnego rysunku, bo wykres bez danych byłby
   wykresem wymyślonym (PRODUCT.md).                                */
.chart{ display:grid; gap:var(--s-4); align-content:start; }
.sec--dark .chart{ padding:var(--s-5); }
.chart__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3) var(--s-5); }
.chart__stage{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(320px, 52vh, 620px); border-radius:var(--r-md);
  background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(0,0,0,.22) 60%, rgba(0,0,0,.3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.14);
}
.player__side .chart__stage{ min-height:clamp(260px, 38vh, 500px); }
.chart__stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.chart__frame{ position:absolute; inset:0; }
/* zanim ramka wstanie — jedno mono słowo; gdy nie wstanie — zdanie
   o tym i przycisk. Pustej tafli bez wyjaśnienia tu nie ma. */
.chart__wait{
  position:absolute; inset:0; z-index:1; display:grid; place-content:center;
  font-family:var(--f-mono); font-size:var(--t-2xs); font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--metal-3);
}
.chart__ask{
  position:absolute; inset:0; z-index:1;
  display:grid; place-content:center; justify-items:center; gap:var(--s-4);
  padding:var(--s-6) var(--s-5); text-align:center;
}
.chart__ask .fine{ max-width:52ch; }
.chart__foot{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-2) var(--s-4); }
.chart__by{
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx-3);
}
.chart__by a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.chart__by a:hover{ color:var(--on-metal); }
@media (max-width:760px){
  .sec--dark .chart{ padding:var(--s-4); }
  .chart__stage{ min-height:clamp(280px, 58vh, 460px); }
}

/* ═══════════ POLA ═══════════
   Pole to ciemniejsze zagłębienie w szkle z jasną krawędzią. Błąd nie
   ma koloru: pole dostaje grubszą ramkę, a pod nim stoi zdanie ze
   znacznikiem. */
.field{ display:grid; gap:var(--s-2); min-width:0; }
.field__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); }
.field label{
  font-family:var(--f-mono); font-size:var(--t-2xs); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx-2);
}
.field input{
  width:100%; min-height:52px; padding:0 16px; border-radius:var(--r-md);
  /* 16 px to próg, poniżej którego iOS powiększa stronę przy fokusie */
  font-size:max(16px, var(--t-sm)); color:var(--on-metal); caret-color:var(--on-metal);
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.14));
  background-color:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s var(--e-out);
}
.field input:hover{ border-color:rgba(255,255,255,.32); }
.field input:focus{ outline:2px solid var(--on-metal); outline-offset:2px; }
/* autouzupełnianie przeglądarki nie wybiela pola */
.field input:-webkit-autofill{
  -webkit-text-fill-color:var(--on-metal); caret-color:var(--on-metal);
  box-shadow:inset 0 0 0 100px #14171B, 0 1px 0 rgba(255,255,255,.05);
}
/* Błąd to gruba ramka bez odstępu, fokus to cienki obrys z odstępem.
   Pole z błędem i fokusem ma oba — te stany nigdy nie wyglądają tak samo. */
.field input[aria-invalid="true"]{ border:3px solid var(--on-metal); padding-inline:14px; }
.field__pw input[aria-invalid="true"]{ padding-right:54px; }
.field__pw input[aria-invalid="true"] + .field__eye{ top:3px; right:3px; bottom:3px; }
.field input:disabled{ background:rgba(255,255,255,.02); color:var(--metal-3); }
.field__pw{ position:relative; }
.field__pw input{ padding-right:56px; }
.field__eye{
  position:absolute; top:1px; right:1px; bottom:1px; width:50px; border-radius:0 var(--r-md) var(--r-md) 0;
  display:grid; place-items:center; color:var(--tx-2);
  transition:color var(--d-1) var(--e-out);
}
.field__eye:hover{ color:var(--on-metal); }
.field__eye:focus-visible{ outline:2px solid var(--on-metal); outline-offset:-5px; }
.field__eye .eye-slash{ opacity:0; }
.field__eye[aria-pressed="true"] .eye-slash{ opacity:1; }
.field__hint{ font-size:var(--t-xs); color:var(--tx-3); }
.field__caps{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em; text-transform:uppercase; color:var(--on-metal); }
.field__msg{ display:flex; gap:8px; align-items:baseline; font-size:var(--t-xs); font-weight:600; color:var(--on-metal); }
.field__msg::before{ content:''; flex:none; width:8px; height:8px; border-radius:2px; background:currentColor; transform:translateY(-1px); }

/* Podkreślenie to jedna długa kreska z przerwą, dwa i pół raza szersza
   od słowa. W spoczynku widać jej pierwszą część; pod kursorem kreska
   przesuwa się, a przerwa przebiega pod słowem z prawej na lewo. Szerokość
   dopasowana do tekstu, żeby kreska w siatce nie ciągnęła się przez kolumnę. */
.linkbtn{
  display:inline-block; width:fit-content; padding-bottom:3px;
  font-size:var(--t-xs); color:var(--tx-2);
  background:linear-gradient(90deg, currentColor 40%, transparent 40% 50%, currentColor 50%) 0 100% / 250% 1px no-repeat;
  transition:color var(--d-1), background-position .6s var(--e-inout);
}
.linkbtn:hover, .linkbtn:focus-visible{ color:var(--tx); background-position:100% 100%; }

/* ═══════════ PANEL LOGOWANIA ═══════════
   U góry ciemniejszy pas ze znakiem i zakładkami, pod nim szkło
   z formularzem. W oknie szkłem jest samo okno, w zakładce Account
   — tafla położona na płycie.                                       */
.auth{ --auth-pad:var(--s-6); display:grid; min-width:0; color:var(--on-metal); }
.auth__band{
  position:relative; display:grid; gap:var(--s-3);
  padding:var(--s-5) var(--auth-pad) var(--s-2); color:var(--on-metal);
  background:linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.18));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.09);
}
.auth__brand{
  display:flex; align-items:center; gap:10px;
  padding-right:48px; font-family:var(--f-display); font-weight:900; font-size:1.35rem;
  line-height:1; letter-spacing:.02em; text-transform:uppercase;
}
.auth__brand .mark{ height:0.95em; }
.auth.is-inline .auth__brand{ display:none; }
.auth__tabs{ position:relative; display:flex; gap:var(--s-5); }
.auth__tab{
  padding:var(--s-2) 0 var(--s-3); font-weight:600; font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--metal-2);
  transition:color var(--d-1) var(--e-out);
}
.auth__tab:hover, .auth__tab[aria-selected="true"]{ color:var(--on-metal); }
.auth__tab:focus-visible{ outline:2px solid var(--on-metal); outline-offset:2px; }
.auth__ink{
  position:absolute; left:0; bottom:4px; width:100px; height:2px; border-radius:2px;
  background:var(--on-metal);
  transform-origin:0 50%; transition:transform .55s var(--e-out); pointer-events:none;
}
.auth__band:not(.is-tabbed) .auth__tabs{ display:none; }
/* bez zakładek pas niesie tylko znak — nazwę kroku mówi nagłówek w treści */
.auth__band:not(.is-tabbed){ padding-bottom:var(--s-5); }
.auth__body{ display:grid; gap:var(--s-5); min-width:0; padding:var(--s-6) var(--auth-pad) var(--auth-pad); }
.auth__form, .auth__fs{ display:grid; gap:var(--s-4); min-width:0; }
.auth__fs{ border:0; padding:0; margin:0; }
.auth__head{ display:grid; gap:var(--s-3); }
.auth__h{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height:.9; letter-spacing:-.005em;
}
.auth__h:focus{ outline:none; }
.auth__p{ font-size:var(--t-sm); color:var(--tx-2); }
.auth__mail{ font-family:var(--f-mono); font-weight:500; color:var(--on-metal); overflow-wrap:anywhere; }
.auth__note{ font-size:var(--t-xs); color:var(--tx-3); }
.auth__go{ margin-top:var(--s-1); }
/* błąd serwera: odwrócenie w jasne szkło, nie kolor */
.auth__alert{
  display:grid; gap:var(--s-2); padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  font-size:var(--t-sm); line-height:1.45; color:var(--ink);
  background:rgba(236,239,243,.94);
  box-shadow:inset 0 1px 0 #fff, 0 12px 26px -16px rgba(0,0,0,.9);
}
.auth__alert-acts{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); }
.auth__alert .linkbtn, .auth__alert .linkbtn:hover{ color:var(--ink); }
.auth__or{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s-3);
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-3);
}
.auth__or::before, .auth__or::after{ content:''; height:1px; background:var(--rule); box-shadow:0 1px 0 rgba(0,0,0,.4); }
/* Inne drogi do konta. Kapsuły dostawców to zwykłe .act — ten sam
   szklany brzeg i ten sam błysk pod palcem. Znak stoi przy nazwie,
   obie razem pośrodku, żeby rząd czytał się jak jedna lista.      */
.auth__alts{ display:grid; gap:var(--s-3); }
.via{ gap:var(--s-3); padding-inline:var(--s-4); letter-spacing:.1em; }
.via__mark{ flex:none; width:20px; height:20px; }
.via__mark--letter{
  display:grid; place-items:center; border-radius:50%;
  font-family:var(--f-mono); font-size:11px; line-height:1; letter-spacing:0;
  background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.auth__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(124px, 1fr)); gap:var(--s-3); }
.via--sm{ min-height:48px; padding-inline:var(--s-3); gap:var(--s-2); font-size:var(--t-2xs); letter-spacing:.08em; }
.via--sm .via__mark{ width:18px; height:18px; }
.via__label{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.auth__demo{ display:grid; gap:var(--s-2); }
.auth__links{ display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); }

/* okno z panelem: szkło niesie samo okno, panel nie ma własnego tła */
.modal__box--auth{
  width:min(460px, 100%); padding:0; gap:0; color:var(--on-metal);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.6), 0 40px 90px -36px rgba(0,0,0,.95);
}
.modal__box--auth > .modal__x{ top:12px; right:12px; color:var(--on-metal); }
.auth-host{ min-width:0; }

/* ═══════════ KONTO W PASKU ═══════════
   Po zalogowaniu przycisk pokazuje stan dostępu diodą: pełna —
   aktywna, pusta — bez dostępu, przerywana — sprawdzam.          */
#authBtn{ min-width:108px; }
#authBtn i{ flex:none; width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; }
#authBtn.is-on i{ background:currentColor; }
#authBtn.is-wait i{ border-style:dashed; }

/* ═══════════ KONTO — gość i konto ═══════════ */
.acct--guest{ grid-template-columns:minmax(0, 460px) minmax(0, 1fr); gap:var(--s-8); align-items:start; }
.acct--guest .auth{
  position:relative; isolation:isolate; overflow:clip; border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.03) 60%, rgba(255,255,255,.045)) rgba(255,255,255,.015);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(0,0,0,.4), 0 30px 60px -34px rgba(0,0,0,.9);
}
.acct__aside{ display:grid; gap:var(--s-4); align-content:start; max-width:46ch; padding-top:var(--s-5); }
.acct__lead{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height:.95;
}
.acct__wait{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2); }
/* ile tego kursu jest — te same trzy liczby co w „Inside" na Access */
.acct__nums{ grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:var(--s-4); }
.acct__nums .stat__v{ order:-1; font-size:clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem); }
.acct__card{ gap:var(--s-4); }
.acct__mail{ font-family:var(--f-mono); font-size:var(--t-sm); overflow-wrap:anywhere; }
.acct__via{ margin-top:calc(var(--s-4) * -1 + 4px); font-size:var(--t-xs); color:var(--tx-3); }
.acct__acts{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
/* Usunięcie konta stoi osobno i ciszej niż reszta: dostępne, ale nie
   obok „Sign out", żeby nikt nie trafił w nie przypadkiem. */
.acct__danger{ margin-top:var(--s-2); padding-top:var(--s-3); border-top:1px solid rgba(255,255,255,.06); }
.acct__danger .linkbtn{ font-size:var(--t-xs); color:var(--tx-3); }
.acct__danger .linkbtn:hover, .acct__danger .linkbtn:focus-visible{ color:var(--on-metal); }

/* okno usunięcia: szkło jak okno logowania, jedno pytanie */
.modal__box--delete{
  width:min(460px, 100%); display:grid; gap:var(--s-4); padding:var(--s-7) var(--s-6) var(--s-6);
  color:var(--on-metal); background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), 0 0 0 1px rgba(0,0,0,.72), 0 40px 90px -36px rgba(0,0,0,.95);
  border-radius:26px;
}
.del__h{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); line-height:.92; padding-right:48px; }
.del__p, .del__sub{ font-size:var(--t-sm); line-height:1.55; color:var(--tx-2); }
.del__sub{ color:var(--on-metal); font-weight:600; }
.del__acts{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-2); }
.del__acts .act{ flex:1 1 180px; }
/* przycisk usuwający: przerywana krawędź, bez koloru — waga, nie czerwień */
.del__go{ color:var(--on-metal); }
.acct__state.is-wait{ color:var(--tx-2); }
@media (max-width:1080px){
  .acct--guest{ grid-template-columns:1fr; gap:var(--s-6); }
  .acct__aside{ padding-top:0; }
}
@media (max-width:760px){
  .auth{ --auth-pad:var(--s-5); }
}
@media (max-width:420px){
  /* Szeroka kapsuła ma na telefonie ok. 260 px: przy rozstrzeleniu
     .14em najdłuższy napis („Email me a sign-in link") się nie mieści. */
  .act--full{ padding-inline:var(--s-4); letter-spacing:.09em; }
  #authBtn{ min-width:0; }
}

/* ═══════════ KOMUNIKATY ═══════════ */
/* komunikat: kapsuła ciemnego szkła, wysuwa się od dołu */
.flash{
  position:fixed; left:50%; bottom:var(--s-6); translate:-50% 14px; z-index:950;
  max-width:min(560px, calc(100vw - 2 * var(--s-4)));
  padding:var(--s-3) var(--s-6); border-radius:var(--r-pill); font-size:var(--t-sm);
  color:var(--on-metal); background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 1px rgba(0,0,0,.6), 0 24px 50px -24px rgba(0,0,0,.9);
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--e-out), translate .6s var(--e-out);
}
.flash.is-on{ opacity:1; translate:-50% 0; }
.modebar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:var(--s-2) var(--gut); text-align:center;
  font-size:var(--t-xs); line-height:1.4; color:var(--metal-2);
  /* bez rozmycia: pasek stoi nad przewijaną treścią, a jest prawie
     nieprzezroczysty, więc rozmycie i tak by nie było widać */
  background:rgba(5,6,7,.94);
  border-top:1px dashed rgba(236,239,243,.26);
}

/* ═══════════ ASYSTENT ═══════════
   Kapsuła w rogu otwiera konsolę z ciemnego szkła. Konsola nie blokuje
   strony — pod nią da się klikać dalej, bo okienko jest przezroczyste
   dla kliknięć poza samą taflą. Pytania stoją w szklanych kapsułach po
   prawej, odpowiedzi leżą na szkle. Treść buduje js/assistant.js.   */
.ask{ position:fixed; right:var(--gut); bottom:var(--s-6); z-index:60; }
body:has(.modebar) .ask{ bottom:calc(var(--s-6) + 38px); }
.ask i{
  flex:none; width:8px; height:8px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.modal--ask{ place-items:end; padding:var(--s-4); pointer-events:none; }
body:has(.modebar) .modal--ask{ padding-bottom:calc(var(--s-4) + 38px); }
.modal--ask .modal__box{ pointer-events:auto; }
.modal__box--ask{
  display:grid; grid-template-rows:auto minmax(0, 1fr) auto; gap:0; padding:0; overflow:hidden;
  width:min(440px, 100%); max-height:min(660px, calc(100svh - 2 * var(--s-4)));
  color:var(--on-metal); background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.6), 0 40px 90px -36px rgba(0,0,0,.95);
}
.ask__band{
  position:relative; display:grid; gap:var(--s-2);
  padding:var(--s-5) var(--s-5) var(--s-3);
  background:linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.18));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.09);
}
.ask__h{
  padding-right:48px; font-family:var(--f-display); font-weight:900; font-size:1.35rem;
  line-height:1; letter-spacing:.02em; text-transform:uppercase;
}
.ask__p{ font-size:var(--t-xs); color:var(--tx-3); }
.ask__log{ display:grid; gap:var(--s-5); align-content:start; padding:var(--s-5); overflow:auto; overscroll-behavior:contain; }
.ask__msg{ display:grid; gap:6px; min-width:0; font-size:var(--t-sm); line-height:1.5; }
.ask__msg p{ margin:0; overflow-wrap:anywhere; }
.ask__msg--you{ justify-items:end; text-align:right; }
.ask__msg--you p{
  max-width:88%; padding:10px var(--s-4); border-radius:var(--r-lg);
  background-color:rgba(255,255,255,.055);
  background-image:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.14);
}
.ask__from{
  font-family:var(--f-mono); font-size:var(--t-2xs); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx-3);
}
.ask__note{ font-size:var(--t-xs); color:var(--tx-3); }
/* czekanie: po dolnej krawędzi wiersza biegnie światło, jak przy pracującej kapsule */
.ask__wait{ display:flex; align-items:center; gap:var(--s-3); }
.ask__wait span{
  font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx-2); white-space:nowrap;
}
.ask__wait i{ position:relative; flex:1; height:2px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.1); }
.ask__wait i::after{
  content:''; position:absolute; inset:0; border-radius:inherit; background:var(--on-metal);
  transform-origin:0 50%; animation:busy 1.1s var(--e-inout) infinite;
}
.ask__sugg{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.ask__form{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:var(--s-2);
  padding:var(--s-4) var(--s-5) var(--s-5);
}
.ask__in{
  width:100%; min-height:48px; max-height:128px; padding:12px var(--s-4); border-radius:var(--r-md);
  font-family:var(--f-text); font-size:max(16px, var(--t-sm)); line-height:1.4; resize:none;
  color:var(--on-metal); caret-color:var(--on-metal);
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.14));
  background-color:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s var(--e-out);
}
.ask__in:hover{ border-color:rgba(255,255,255,.32); }
.ask__in:focus{ outline:2px solid var(--on-metal); outline-offset:2px; }
.ask__in::placeholder{ color:var(--metal-3); }
@media (max-width:760px){
  .ask{ right:var(--s-4); bottom:var(--s-4); }
  body:has(.modebar) .ask{ bottom:calc(var(--s-4) + 44px); }
  .modal--ask{ padding:0; place-items:end stretch; }
  .modal__box--ask{ width:100%; max-height:88svh; border-radius:var(--r-lg) var(--r-lg) 0 0; }
}

/* Szkło bez rozmycia tła (starsze przeglądarki): pasek i tło okna
   gęstnieją, tafle zostają z krawędzią i odbiciem. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .titleblock{ background:rgba(8,9,11,.97); }
  .modal__bg{ background:rgba(2,2,3,.86); }
}
/* „Mniej przezroczystości" w systemie (w Windows: wyłączone efekty
   przezroczystości) nie gasi szkła, tylko je zagęszcza — jak „mniej
   ruchu" uspokaja ruch. Tło prześwituje słabiej, krawędź, odbicie
   i światło za taflą zostają. Szary panel w miejscu szkła byłby
   usunięciem materiału, o który strona jest zbudowana. */
@media (prefers-reduced-transparency: reduce){
  :root{
    --glass-bg:
      linear-gradient(118deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.075) 24%, rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 40%) 0 0 / 100% min(100%, 900px) no-repeat,
      radial-gradient(120% 60% at 30% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
      linear-gradient(165deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.04) 36%, rgba(255,255,255,.025) 68%, rgba(255,255,255,.05) 100%) rgba(12,13,16,.52);
  }
  .titleblock{ background:linear-gradient(180deg, rgba(10,11,13,.93), rgba(3,3,4,.88)); }
  .modal__bg{ background:rgba(2,2,3,.76); }
}

/* „Mniej ruchu" w systemie nie gasi całego ruchu — uspokaja go
   motion.css (sekcja 12). Tu zostaje tylko skok zamiast przewijania. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* ═══════════ ADAPTACJA ═══════════ */
@media (max-width:1080px){
  /* Jedna kolumna: wiersze trzymają swoją wysokość, a wolne miejsce
     ekranu idzie nad i pod całość, nie między ofertę a taflę. */
  .hero{ grid-template-columns:1fr; align-content:center; }
  .livegrid{ grid-template-columns:1fr; }
  .layer{ grid-template-columns:minmax(80px, .26fr) minmax(0, 1fr); }
  .layer__strip{ grid-column:2; }
  .track__roll{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .access{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--s-6); }
}

/* Dostęp: tafla i to, co otwiera, stoją obok siebie, dopóki obie
   kolumny mają miejsce; węziej tafla idzie nad listę.           */
@media (max-width:900px){
  .access{ grid-template-columns:1fr; gap:var(--s-7); }
  .plans{ max-width:560px; }
  .access__side{ padding-top:0; }

  /* Pasek łamie się na dwa wiersze, zanim zakładki musiałyby się
     przewijać: znak i konto u góry, zakładki na pełnej szerokości. */
  :root{ --head-h:98px; }
  .titleblock{ flex-wrap:wrap; }
  /* bryła znaku (ok. 6 px) ma się skończyć nad kreską między rzędami */
  .titleblock{ --mk-h:42px; --mk-x:10px; --mk-y:6px; }
  .titleblock__id{
    flex:1 1 auto;
    padding:14px var(--s-4) 8px calc(var(--mk-x) + var(--mk-h) * 0.8214 + var(--s-3));
  }
  .titleblock__acts{ padding:10px var(--gut) 0 0; align-items:flex-start; }
  .titleblock__name{ font-size:1.95rem; }
  .titleblock__nav{
    flex:0 0 100%; order:3; min-height:44px;
    padding-inline:calc(var(--gut) - 12px); border-top:1px solid var(--metal-rule);
  }
  .titleblock__nav > .tab:first-child{ margin-left:0; }
  .titleblock__nav > .tab:last-of-type{ margin-right:0; }
  .tab{ min-height:32px; padding:0 12px; letter-spacing:.08em; }
}

@media (max-width:760px){
  :root{ --plate-x:6px; }

  /* Na telefonie: nagłówek, oferta i przyciski, pod nimi tafla z taśmą. */
  .sec--hero{ padding-top:calc(var(--head-h) + 32px); }
  .hero{ gap:var(--s-7); }
  #heroLead{ font-size:var(--t-md); }
  .hero__acts .act{ flex:1 1 0; padding:0 var(--s-3); }
  /* na telefonie dane techniczne mieszczą się w jednym wierszu bez
     ścieżek — obie i tak widać niżej na taśmie */
  .hero__spec{ gap:var(--s-2) var(--s-4); }
  .hero__spec span:nth-child(4){ display:none; }
  .hero__proof{ margin-inline:calc(var(--s-2) - var(--gut)); padding:18px 14px 12px; border-radius:18px; }
  .reel{ gap:var(--s-5); }

  /* Na telefonie za płytą nie przesuwa się żadne światło — rozmycie
     nie miałoby czego matować, więc płyty zostają przejrzystym szkłem. */
  .sec--paper{ border-radius:20px; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .sec--paper.is-lead{ padding-top:32px; }
  .sec.is-lead:not(.sec--hero):not(.sec--paper){ padding-top:calc(var(--head-h) + 32px); }
  .sec__head{ gap:var(--s-3); margin-bottom:var(--s-6); }
  /* filtry przewijają się w poziomie, od krawędzi do krawędzi płyty */
  .chips{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut);
    /* ostatni chip gaśnie przy krawędzi zamiast być ucięty: rząd
       ciągnie się dalej, a nie kończy w pół słowa */
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:none; }

  .layer{ grid-template-columns:1fr; gap:var(--s-3); }
  .layer__strip{ grid-column:auto; margin-top:var(--s-2); }

  /* Biblioteka na telefonie: plakat obok tytułu, opis pod spodem —
     taśma rozpada się na klatki ułożone jedna pod drugą.            */
  .libbar{ display:grid; justify-content:stretch; margin-bottom:var(--s-6); }
  .libbar__gate .act{ width:100%; }
  .library{ gap:var(--s-7); }
  .track__roll{ grid-template-columns:1fr; row-gap:var(--s-6); }
  .lesson{
    grid-template-columns:minmax(0, 46%) minmax(0, 1fr); grid-template-rows:auto 1fr auto;
    grid-template-areas:"film t" "film foot" "b b"; gap:var(--s-2) var(--s-4);
  }
  .lesson__film{ grid-area:film; }
  .lesson__body{ display:contents; }
  /* Na telefonie klatki stoja jedna pod druga, wiec nie ma czego
     wyrownywac w rzedzie — zapas na druga linie tylko robilby dziure. */
  .lesson__t{ grid-area:t; padding-top:var(--s-2); min-block-size:0; }
  .lesson__foot{ grid-area:foot; align-items:flex-end; padding-top:0; }
  .lesson__b{ grid-area:b; }

  .foot__grid{ grid-template-columns:1fr; }
  .print{ border-radius:18px; }
  .plan{ padding:var(--s-6) var(--s-5); }
  .plan__top{ padding-bottom:var(--s-3); }
  .inside__film{ padding-block:16px; }
  .inside__film li{ margin-inline:2px; padding:6px; }
  .inside__film span{ display:none; }
}

/* Najwęższe telefony: nazwa o stopień mniejsza, żeby najdłuższy stan
   konta („No access") nie dotykał jej bryły. Stoi na końcu, bo
   reguła dwóch rzędów (900 px) jest w pliku później niż blok 420 px. */
@media (max-width:380px){
  .titleblock__name{ font-size:1.75rem; }
}