:root{
    --ink:#071A33;
    --ink-2:#0C2446;
    --ink-3:#12305A;
    --line:#22426E;
    --cream:#F3F8FF;
    --cream-dim:#9FB8DA;
    --gold:#4FBDFF;
    --gold-hi:#8AD4FF;
    --wine:#531322;
    --wine-2:#6B1A2D;
    --yellow:#F2B71C;
    --crimson:#C8174A;
    --paper:#FBF3EE;
    --paper-2:#F3E4DC;
    --paper-ink:#2B1A1F;
    --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
    --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
    --body:"Figtree","Segoe UI",system-ui,sans-serif;
    --r:22px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);font-size:17px;line-height:1.6}
  img{max-width:100%;display:block}
  a{color:inherit}
  .wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
  .eyebrow{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0}
  h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.02em}
  h2{font-size:clamp(36px,6.4vw,64px);line-height:1.02;font-weight:800}
  .lead{font-size:clamp(17px,2.1vw,20px);line-height:1.55;max-width:34em;margin:0}
  .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}

  /* ---------- przyciski ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:700;
       font-size:16px;line-height:1;padding:16px 22px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
       transition:transform .15s ease, background-color .15s ease}
  .btn:active{transform:scale(.98)}
  .btn:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  .btn-gold{background:var(--gold);color:#04213F}
  .btn-gold:hover{background:var(--gold-hi)}
  .btn-ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line)}
  .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold)}
  .btn svg{width:18px;height:18px;flex:none}
  .ctas{display:flex;flex-wrap:wrap;gap:12px}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding-block:14px 0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
        background:
          radial-gradient(900px 560px at 85% 20%, rgba(79,189,255,.24), transparent 62%),
          radial-gradient(640px 480px at 55% 95%, rgba(0,98,179,.38), transparent 62%),
          radial-gradient(700px 520px at -10% 110%, rgba(143,212,255,.10), transparent 60%),
          var(--ink)}
  .hero>.wrap{flex:1;display:flex;flex-direction:column;width:100%}
  .top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:6px 0}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
  .brand img{width:34px;height:auto}
  .brand{gap:14px}
  .brand img{width:clamp(38px,4.4vw,52px)}
  .lt{display:flex;flex-direction:column;gap:2px;line-height:1}
  .lt small{font-size:clamp(10px,1.1vw,12.5px);font-weight:700;letter-spacing:.26em;color:var(--cream-dim)}
  .lt b,.logotype b{font-family:var(--display);font-weight:800;letter-spacing:-.035em;display:inline-flex;align-items:flex-end;color:var(--cream)}
  .lt b{font-size:clamp(30px,3.4vw,40px);gap:4px}
  .lt{gap:3px}
  /* trzy kropki – trzy zaproszenia – wznosza sie jak krok do przodu */
  .lt-dots{position:relative;display:inline-block;width:.58em;height:.7em;flex:none;margin-bottom:.07em}
  .lt-dots span{position:absolute;border-radius:50%;display:block}
  .lt-dots span:nth-child(1){width:.15em;height:.15em;left:0;bottom:0;background:var(--gold)}
  .lt-dots span:nth-child(2){width:.19em;height:.19em;left:.18em;bottom:.18em;background:var(--yellow)}
  .lt-dots span:nth-child(3){width:.23em;height:.23em;left:.35em;bottom:.42em;background:var(--crimson)}
  .logotype{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
  .logotype small{font-size:12px;font-weight:700;letter-spacing:.32em;color:var(--cream-dim);margin:0 0 4px 3px}
  .logotype b{font-size:clamp(48px,7vw,72px);gap:.08em}
  .logotype em{font-family:var(--serif);font-size:clamp(19px,2.2vw,23px);color:var(--gold);margin:10px 0 0 3px}
  .hero-grid{flex:1;display:grid;grid-template-columns:1.02fr .98fr;gap:24px 40px;align-items:center;align-content:center;padding-block:clamp(14px,3vh,44px)}
  .hero .eyebrow{color:var(--gold)}
  .hero h1{font-size:clamp(34px,min(6vw,8.6vh),78px);line-height:.98;font-weight:800;margin-top:0}
  .hero h1 .it{color:var(--gold);font-size:1.08em}
  .hero-sub{margin-top:clamp(12px,2.2vh,20px);color:var(--cream-dim);max-width:30em}
  .reveal-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(14px,2.8vh,26px)}

  /* wachlarz kart z akcji */
  .fan{position:relative;height:clamp(260px,min(40vw,56vh),500px)}
  .tile{position:absolute;left:50%;top:50%;width:clamp(120px,min(17.5vw,26vh),228px);aspect-ratio:3/4;border:0;padding:0;background:none;
        cursor:pointer;perspective:1200px;color:inherit;font:inherit;text-align:left;
        transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--r));
        transition:transform .35s cubic-bezier(.2,.8,.2,1);
        animation:deal .95s cubic-bezier(.2,.85,.25,1) backwards}
  .tile:hover{transform:translate(-50%,-50%) translate(var(--dx),calc(var(--dy) - 5%)) rotate(calc(var(--r) * .6))}
  .t1{--dx:-66%;--dy:6%;--r:-11deg;z-index:1;animation-delay:.12s}
  .t2{--dx:0%;--dy:-5%;--r:1.5deg;z-index:3;animation-delay:.28s}
  .t3{--dx:66%;--dy:8%;--r:10deg;z-index:2;animation-delay:.44s}
  @keyframes deal{from{transform:translate(-50%,-50%) translate(0,24%) rotate(0deg) scale(.86)}}
  .tile{container-type:inline-size}
  .tile-in{position:relative;display:block;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
  .tile.on .tile-in{transform:rotateY(180deg)}
  .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;overflow:visible}
  .front{display:block;width:100%;height:100%;border:0;margin:0;font:inherit;color:inherit;cursor:pointer;
         background:#F3F8FF;padding:8px;box-shadow:0 26px 60px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35)}
  .tile .back{pointer-events:none;cursor:pointer}
  .tile.on .back{pointer-events:auto}
  .tile.on .front{pointer-events:none}
  .back .go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:clamp(11.5px,5.8cqi,13px);font-weight:700;
            line-height:1;padding:clamp(8px,4cqi,9px) clamp(10px,5.6cqi,13px);border-radius:999px;background:rgba(0,0,0,.14);color:inherit;transition:background .15s}
  .back .go:hover{background:rgba(0,0,0,.24)}
  .t3 .back .go{background:rgba(255,255,255,.2)}
  .t3 .back .go:hover{background:rgba(255,255,255,.32)}
  .back .go:focus-visible{outline:3px solid currentColor;outline-offset:2px}
  .front img{width:100%;height:100%;object-fit:cover;border-radius:15px;display:block}
  .front em{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);white-space:nowrap;font-family:var(--serif);font-style:italic;
            font-size:clamp(17px,1.6vw,21px);line-height:1;padding:9px 15px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
  .t1 .front em{background:var(--gold);color:#04213F}
  .t2 .front em{background:var(--yellow);color:#2A0A12}
  .t3 .front em{background:var(--crimson);color:#fff}
  .t1 .front img{object-position:50% 12%}
  .t3 .front img{object-position:50% 60%}
  .back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:20px 18px;
        box-shadow:0 26px 60px rgba(0,0,0,.55)}
  .back small{font-size:clamp(9px,4.8cqi,11px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
  .back b{font-family:var(--display);font-weight:800;font-size:clamp(15px,10.4cqi,25px);line-height:1.06;letter-spacing:-.01em}
  .tile .back{padding:clamp(12px,8cqi,20px);gap:clamp(6px,4cqi,12px)}
  @container (max-width:175px){ .back .go-x{display:none} }
  .t1 .back{background:var(--gold);color:#04213F}
  .t2 .back{background:var(--yellow);color:#2A0A12}
  .t3 .back{background:var(--crimson);color:#fff}
  .swipe{display:none;align-items:center;justify-content:center;gap:8px;margin-top:-6px;font-size:12.5px;font-weight:600;color:var(--cream-dim)}
  .dots{display:inline-flex;align-items:center}
  .dot{width:18px;height:26px;padding:10px 5px;border:0;margin:0;cursor:pointer;background:var(--line);background-clip:content-box;
       border-radius:6px;transition:width .3s ease,background-color .3s ease}
  .dot.on{width:32px;background-color:var(--gold)}
  .dot:focus-visible{outline:2px solid var(--gold);outline-offset:0}
  .spark{position:absolute;border-radius:50%;pointer-events:none;animation:float 6s ease-in-out infinite}
  .sp1{width:12px;height:12px;background:var(--yellow);left:16%;top:8%}
  .sp2{width:8px;height:8px;background:var(--crimson);right:14%;top:12%;animation-delay:-2s}
  .sp3{width:10px;height:10px;background:var(--gold);left:22%;bottom:6%;animation-delay:-4s}
  @keyframes float{50%{transform:translateY(-10px)}}

  /* pasek z faktami i wskazowka przewijania */
  .ticker{flex:none;border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;background:rgba(7,26,51,.55)}
  .ticker-in{display:inline-flex;align-items:center;gap:26px;padding-block:clamp(10px,1.8vh,15px);padding-left:26px;animation:tick 38s linear infinite}
  .ticker-in span{font-family:var(--display);font-weight:700;font-size:clamp(16px,1.8vw,20px);letter-spacing:-.01em}
  .ticker-in i{font-style:normal;color:var(--gold)}
  @keyframes tick{to{transform:translateX(-50%)}}
  .cue{flex:none;display:flex;justify-content:center;padding-block:clamp(8px,1.6vh,16px) max(clamp(10px,2vh,22px),env(safe-area-inset-bottom))}
  .cue a{display:inline-flex;flex-direction:column;align-items:center;gap:4px;color:var(--cream-dim);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em}
  @keyframes bob{50%{transform:translateY(6px)}}

  @media (prefers-reduced-motion:reduce){
    .tile{animation:none;transition:none}
    .tile-in{transition:none}
    .tile.on .tile-in{transform:none}
    .tile .back{transform:none;opacity:0}
    .tile.on .back{opacity:1}
    .tile.on .front{opacity:0}
    .ticker-in,.spark{animation:none}
  }

  /* ---------- nawigacja rozdzialow ---------- */
  .chapters{position:sticky;top:0;z-index:20;background:rgba(7,26,51,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
            border-bottom:1px solid var(--line)}
  .chapters .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
  .chapters .wrap::-webkit-scrollbar{display:none}
  .chip{flex:none;display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;text-decoration:none;
        font-size:14px;font-weight:600;color:var(--cream-dim);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
  .chip i{width:9px;height:9px;border-radius:50%;display:block}
  .chip.active{color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--cream-dim)}
  .chip .sm{display:none}

  /* ---------- rolka ---------- */
  .reel{padding-block:72px}
  .reel .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
  .reel h2 .it{color:var(--gold)}
  .reel p{color:var(--cream-dim);margin:18px 0 0;max-width:30em}
  .reel p.reel-src{display:flex;align-items:flex-start;gap:9px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.45}
  .reel-src svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--gold)}
  .reel-src a{color:var(--cream);text-underline-offset:3px}
  .reel-src a:hover{color:var(--gold)}
  .phone{justify-self:center;width:min(320px,100%);aspect-ratio:9/16;border-radius:34px;overflow:hidden;background:#000;
         box-shadow:0 0 0 8px #020A16, 0 0 0 9px var(--line), 0 30px 80px rgba(0,0,0,.55)}
  .phone video{width:100%;height:100%;object-fit:cover;display:block}

  /* ---------- rozdzialy ---------- */
  .chapter{padding-block:88px;scroll-margin-top:56px}
  .ch-head{display:flex;flex-direction:column;gap:18px;max-width:44em}
  .ch-num{display:inline-flex;align-items:center;gap:10px}
  .ch-num span{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.08em;padding:6px 11px;border-radius:999px}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:48px}
  .facts{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
  .facts li{font-size:14px;font-weight:600;padding:8px 13px;border-radius:999px}

  .video{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9}
  .video video,.video iframe,.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
  .yt{position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:#000}
  .yt img{opacity:.88;transition:opacity .2s}
  .yt:hover img{opacity:1}
  .play{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
        display:grid;place-items:center;background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .play svg{width:26px;height:26px;margin-left:4px}
  .cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;margin-top:12px;font-size:14px}
  .cap b{font-weight:700}
  .cap a{font-weight:600;text-underline-offset:3px}
  .stack{display:flex;flex-direction:column;gap:30px}

  /* kod QR: dyskretny, tylko na komputerze – na telefonie wystarczy kliknac */
  .ctas{align-items:center}
  .qrp{display:none;position:relative}
  @media (min-width:960px) and (hover:hover){
    .qrp{display:block}
  }
  .qrp summary{list-style:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
               font-size:13.5px;font-weight:600;padding:10px 12px;border-radius:999px;color:var(--cream-dim);transition:color .15s, background .15s}
  .qrp summary::-webkit-details-marker{display:none}
  .qrp summary svg{width:16px;height:16px}
  .qrp summary:hover,.qrp[open] summary{color:var(--cream);background:rgba(255,255,255,.07)}
  .qrp-card{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);z-index:30;width:172px;
            background:#fff;color:#2B1A1F;border-radius:18px;padding:14px 14px 12px;text-align:center;
            box-shadow:0 22px 50px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.2);animation:qrIn .18s ease-out}
  .qrp-card::after{content:"";position:absolute;left:50%;top:100%;margin-left:-8px;border:8px solid transparent;border-top-color:#fff}
  .qrp-card img{width:144px;height:144px;margin:0 auto;display:block}
  .qrp-card p{margin:10px 0 0;font-size:12.5px;line-height:1.35;font-weight:600}
  @keyframes qrIn{from{opacity:0;transform:translate(-50%,6px)}}
  @media (prefers-reduced-motion:reduce){.qrp-card{animation:none}}

  /* Mistyczka – zachowuje wlasne zloto */
  #mistyczka,.t1{--gold:#D9B96A;--gold-hi:#EACF8F}
  #mistyczka .btn-gold{color:#1A1208}
  .t1 .front em,.t1 .back{color:#1A1208}
  #mistyczka{background:linear-gradient(180deg,var(--ink) 0%,#0A2142 100%)}
  #mistyczka .ch-num span{background:var(--gold);color:#04213F}
  #mistyczka h2 .it{color:var(--gold)}
  #mistyczka .facts li{background:var(--ink-3);color:var(--cream)}
  #mistyczka .cap{color:var(--cream-dim)}
  #mistyczka .cap b{color:var(--cream)}
  .poster{border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);aspect-ratio:854/1200;max-width:430px}
  .poster img{width:100%;height:100%;object-fit:cover}

  /* Wirtualna Choinka */
  #choinka{background:
      radial-gradient(800px 500px at 90% 10%, rgba(242,183,28,.14), transparent 60%),
      var(--wine)}
  #choinka .ch-num span{background:var(--yellow);color:#2A0A12}
  #choinka h2 .it{color:var(--yellow)}
  #choinka .lead{color:#F6E3E6}
  .badge{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:#2A0A12;font-family:var(--display);
         font-weight:800;font-size:clamp(18px,2.4vw,24px);padding:10px 18px;border-radius:14px;width:fit-content;letter-spacing:-.01em}
  .ways{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .way{background:var(--wine-2);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px}
  .way img{width:46px;height:46px;background:var(--yellow);border-radius:14px;padding:10px}
  .way b{font-family:var(--display);font-size:21px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
  .way span{color:#EBC9CF;font-size:15px;line-height:1.45}
  #choinka .cap{color:#EBC9CF}
  #choinka .cap b{color:#fff}
  .btn-yellow{background:var(--yellow);color:#2A0A12}
  .btn-yellow:hover{background:#FFC93F}
  .tree{position:relative;max-width:440px;justify-self:center}
  .tree img.logo{position:absolute;left:-6px;top:-6px;width:96px;height:auto}

  /* Dialog Malzenski */
  #dialog{background:var(--paper);color:var(--paper-ink)}
  #dialog .ch-num span{background:var(--crimson);color:#fff}
  #dialog h2 .it{color:var(--crimson)}
  #dialog .lead{color:#4A363B}
  .app-id{display:flex;align-items:center;gap:14px}
  .app-id img{width:58px;height:58px;border-radius:15px}
  .app-id b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;line-height:1.1}
  .app-id small{display:block;color:#7A6268;font-size:14px;font-weight:500}
  .features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
  .features li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start}
  .features img{width:52px;height:52px;background:var(--crimson);border-radius:16px;padding:12px}
  .features b{display:block;font-family:var(--display);font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.01em}
  .features span{color:#5E474D;font-size:15.5px}
  .btn-crimson{background:var(--crimson);color:#fff}
  .btn-crimson:hover{background:#A91140}
  .dm-visual{display:flex;justify-content:center}
  .dm-visual img{width:min(360px,100%);border-radius:28px;box-shadow:0 30px 70px rgba(120,20,50,.22)}
  .punch{font-family:var(--serif);font-style:italic;font-size:clamp(28px,4vw,40px);line-height:1.12;color:var(--crimson);margin:0;max-width:18em}
  #dialog .btn:focus-visible{outline-color:var(--crimson)}
  #dialog .qrp summary{color:#7A6268}
  #dialog .qrp summary:hover,#dialog .qrp[open] summary{color:var(--paper-ink);background:rgba(43,26,31,.06)}
  #dialog .qrp-card{box-shadow:0 18px 44px rgba(120,20,50,.22),0 0 0 1px #EAD9D0}

  /* ---------- matematyka zasiegu ---------- */
  .math{padding-block:96px;background:
      radial-gradient(700px 420px at 10% 0%, rgba(79,189,255,.12), transparent 60%), var(--ink)}
  .math h2 .it{color:var(--gold)}
  .chain{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
  .chain li{position:relative;padding:22px 18px 22px 0;border-top:1px solid var(--line)}
  .chain li+li{padding-left:18px;border-left:1px solid var(--line)}
  .chain .n{display:block;font-family:var(--display);font-weight:800;font-size:clamp(40px,5.4vw,64px);line-height:1;
            letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .chain .l{display:block;color:var(--cream-dim);margin-top:10px;font-size:15px}
  .chain li:last-child .n{color:var(--gold)}
  .math-note{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-top:40px}
  .math-note p{margin:0}
  .math-note .big{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.4vw,36px);line-height:1.15;max-width:20em}
  .math-note small{color:var(--cream-dim);font-size:13px}

  /* ---------- co dalej ---------- */
  .todo{padding-block:88px;background:linear-gradient(180deg,var(--ink-2),#0A1F3E)}
  .todo .grid-2{grid-template-columns:1.1fr .9fr;margin-top:40px}
  .checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .checks label{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;padding:18px 20px;border-radius:18px;
                background:var(--ink-3);cursor:pointer;transition:background .2s}
  .checks input{appearance:none;-webkit-appearance:none;width:26px;height:26px;margin:1px 0 0;border-radius:8px;
                box-shadow:inset 0 0 0 2px var(--cream-dim);display:grid;place-items:center;cursor:pointer}
  .checks input:checked{background:var(--gold);box-shadow:none}
  .checks input:checked::after{content:"";width:12px;height:7px;border-left:3px solid #04213F;border-bottom:3px solid #04213F;transform:translate(0,-1px) rotate(-45deg)}
  .checks input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  .checks b{display:block;font-weight:700;font-size:17px;line-height:1.35}
  .checks span{color:var(--cream-dim);font-size:15px}
  .checks input:checked + div b{text-decoration:line-through;text-decoration-color:var(--gold);text-decoration-thickness:2px;color:var(--cream-dim)}
  .progress{margin:18px 0 0;color:var(--cream-dim);font-size:14px}
  .kit{background:var(--ink);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:18px;box-shadow:inset 0 0 0 1px var(--line)}
  .kit h3{font-size:24px;font-weight:700}
  .kit-note{margin:0;color:var(--cream-dim);font-size:13.5px}

  /* materialy do pobrania */
  .dl{margin-top:64px;display:flex;flex-direction:column;gap:18px;scroll-margin-top:70px}
  .dl-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:6px}
  .dl-head h3{font-size:clamp(26px,3.4vw,36px);font-weight:800}
  .dl-head p{margin:0;color:var(--cream-dim)}
  .film{display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:center;padding:16px;border-radius:var(--r);text-decoration:none;
        background:linear-gradient(120deg,rgba(79,189,255,.16),rgba(200,23,74,.10) 70%),var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
  .film:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
  .film-th{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000}
  .film-th img{width:100%;height:100%;object-fit:cover}
  .film-play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center}
  .film-play svg{width:18px;height:18px;margin-left:3px}
  .film-tx{display:flex;flex-direction:column;gap:6px}
  .film-tx small{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
  .film-tx b{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);font-weight:800;line-height:1.1;letter-spacing:-.01em}
  .film-tx>span{color:var(--cream-dim);font-size:15px;max-width:38em}
  .film-tx .film-btn{align-self:flex-start;margin-top:8px;background:var(--gold);color:#04213F;font-weight:700;font-size:14px;padding:11px 16px;border-radius:999px}
  .film:hover .film-btn{background:var(--gold-hi)}

  .flyers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .flyer{background:var(--ink);border-radius:var(--r);padding:18px;display:grid;grid-template-rows:auto auto 1fr;gap:16px;box-shadow:inset 0 0 0 1px var(--line)}
  .fl-th{position:relative;height:150px;border-radius:14px;background:radial-gradient(160px 110px at 50% 60%,rgba(79,189,255,.18),transparent 70%),var(--ink-3)}
  .fl-th img{position:absolute;top:50%;left:50%;height:124px;width:auto;border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.45)}
  .fl-one img{transform:translate(-50%,-50%) rotate(-2deg)}
  .fl-two img:first-child{transform:translate(-18%,-47%) rotate(7deg)}
  .fl-two img:last-child{transform:translate(-82%,-53%) rotate(-5deg)}
  .fl-tag{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .fl-tx h4{font-family:var(--display);font-size:21px;font-weight:700;margin:4px 0 0;letter-spacing:-.01em}
  .fl-tx p:last-child{margin:4px 0 0;color:var(--cream-dim);font-size:14.5px;line-height:1.45}
  .fmts{display:flex;flex-wrap:wrap;gap:8px;align-content:end}
  .fmt{display:inline-flex;flex-direction:column;gap:2px;padding:10px 13px;border-radius:12px;text-decoration:none;background:var(--ink-3);
       box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s, background .15s}
  .fmt b{font-size:14.5px;font-weight:700;line-height:1.15}
  .fmt span{font-size:12px;color:var(--cream-dim);font-variant-numeric:tabular-nums}
  .fmt:hover{box-shadow:inset 0 0 0 1.5px var(--gold);background:#18396A}
  .fmt:hover b{color:var(--gold)}
  .msg{background:var(--ink-3);border-radius:16px;padding:16px 18px;font-size:15px;line-height:1.5;margin:0;white-space:pre-line}

  /* ---------- final ---------- */
  .final{padding-block:110px 64px;text-align:left;background:
      radial-gradient(900px 600px at 50% 120%, rgba(79,189,255,.22), transparent 60%), var(--ink)}
  .quote{font-family:var(--serif);font-style:italic;font-size:clamp(44px,8vw,104px);line-height:.98;margin:0;max-width:12ch;letter-spacing:-.01em}
  .quote-by{color:var(--cream-dim);margin:22px 0 0;font-size:14px;letter-spacing:.04em}
  .final h3{font-size:clamp(28px,4.4vw,48px);font-weight:800;color:var(--gold);margin-top:52px}
  .final .ctas{margin-top:28px}
  footer{margin-top:96px;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
  .foot-l{display:flex;align-items:center;gap:16px}
  .ozk{display:flex;align-items:center;gap:12px;color:var(--cream-dim);font-size:13px}
  .ozk img{width:54px;height:54px;border-radius:50%}

  .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--cream);color:var(--ink);font-weight:700;
         padding:12px 18px;border-radius:999px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:50}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- telefon ---------- */
  @media (max-width:860px){
    .reel .wrap,.grid-2,.todo .grid-2{grid-template-columns:1fr;gap:36px}
    .hero-grid{grid-template-columns:1fr;gap:clamp(8px,1.8svh,18px);padding-block:clamp(8px,2svh,20px)}
    .hero h1{font-size:clamp(27px,min(8.6vw,4.6svh),42px)}
    .hero-sub{font-size:15px;line-height:1.45}
    .reveal-row{margin-top:clamp(10px,1.8svh,16px)}
    .reveal-row .btn{padding:clamp(11px,1.6svh,14px) 18px;font-size:15px}
    .ticker-in span{font-size:15px}

    /* karty: animowany stos – co kilka sekund na wierzch wychodzi kolejna */
    .fan{--ch:clamp(200px,44svh,400px);position:relative;height:calc(var(--ch) + 44px);touch-action:pan-y}
    .spark{display:none}
    .tile{height:auto;width:min(calc(var(--ch) * .75),55vw);aspect-ratio:3/4;animation:none;
          --sx:0%;--sy:-3%;--sr:0deg;--ss:1;
          transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(var(--ss));
          transition:transform .8s cubic-bezier(.22,.8,.22,1),filter .6s ease}
    .tile:hover{transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(var(--ss))}
    .tile[data-pos="0"]{z-index:3}
    .tile[data-pos="1"]{--sx:43%;--sy:-4%;--sr:9deg;--ss:.82;z-index:2;filter:brightness(.82)}
    .tile[data-pos="2"]{--sx:-43%;--sy:-4%;--sr:-9deg;--ss:.82;z-index:1;filter:brightness(.72)}
    .tile:not([data-pos="0"]):active{filter:brightness(1)}
    .front em{font-size:clamp(14px,4.4vw,17px);padding:8px 13px;bottom:-14px;transition:opacity .35s}
    .tile:not([data-pos="0"]) .front em{opacity:0}
    .tile.leaving{animation:toBack .85s cubic-bezier(.3,.7,.2,1) both}
    @keyframes toBack{
      0%  {transform:translate(-50%,-50%) translate(0,-3%) rotate(0deg) scale(1);z-index:5}
      42% {transform:translate(-50%,-50%) translate(-95%,2%) rotate(-18deg) scale(.92);z-index:5}
      50% {z-index:0}
      100%{transform:translate(-50%,-50%) translate(-43%,-4%) rotate(-9deg) scale(.82);z-index:0}
    }
    .swipe{display:flex}

    /* menu rozdzialow miesci sie w jednej linii */
    .chapters .wrap{gap:4px;padding-inline:10px;overflow:visible}
    .chip{flex:1 1 auto;justify-content:center;gap:0;padding:8px 4px;font-size:13px}
    .chip i{display:none}
    .chip .lg{display:none}
    .chip .sm{display:inline}
    .chip.active{background:rgba(243,233,210,.10)}
    .film-tx .film-btn{font-size:13px;padding:10px 14px}
    .ways{grid-template-columns:1fr}
    .flyers{grid-template-columns:1fr}
    .film{grid-template-columns:96px 1fr;gap:16px}
    .dl{margin-top:48px}
    .chain{grid-template-columns:1fr 1fr}
    .chain li,.chain li+li{padding:18px 14px 18px 0;border-left:0}
    .chain li:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
    .chain li:last-child{grid-column:1/-1;padding-left:0;border-left:0}
    .poster{max-width:300px}
    .chapter{padding-block:68px}
    .tree{max-width:320px}
  }
  /* pierwszy ekran na telefonie: dokladnie wysokosc ekranu, karty biora cale wolne miejsce */
  @media (max-width:860px){
    .hero-sub{display:none}
  }
  @media (max-width:860px) and (min-height:560px){
    .hero{height:100vh;height:100svh;min-height:0}
    .hero>.wrap{min-height:0}
    .hero-grid{display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-height:0}
    .fan{flex:1 1 0;min-height:190px;max-height:470px}
    @supports (height:1cqh){
      .fan{container-type:size}
      .tile{height:auto;width:min(calc((100cqh - 46px) * .75),55vw,322px)}
    }
  }

  /* komputer: po odkryciu karty rozsuwaja sie, zeby tekst nie chowal sie pod sasiednia */
  @media (min-width:861px){
    .fan:has(.tile.on) .t1{--dx:-92%;--r:-7deg}
    .fan:has(.tile.on) .t3{--dx:92%;--r:7deg}
    .tile{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  }


  /* ---------- przycisk udostepniania: wychyla sie zza prawej krawedzi ekranu ---------- */
  .fab{position:fixed;z-index:45;right:0;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 14px);
       display:flex;align-items:center;border:0;cursor:pointer;font-family:var(--body);font-weight:700;font-size:15.5px;line-height:1;
       padding:14px calc(22px + env(safe-area-inset-right)) 14px 16px;border-radius:999px 0 0 999px;
       background:var(--gold);color:#04213F;box-shadow:-10px 14px 34px rgba(0,0,0,.5);
       transform:translateX(115%);transition:transform .6s cubic-bezier(.2,.9,.25,1.15),background-color .15s}
  .fab.show{transform:translateX(10px)}
  .fab.show:hover,.fab.show:focus-visible,.fab.show.open{transform:translateX(0)}
  .fab svg{width:22px;height:22px;flex:none;transform-origin:50% 60%}
  .fab span{display:block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;margin-left:0;
            transition:max-width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease,margin-left .5s ease}
  .fab:hover span,.fab:focus-visible span,.fab.open span{max-width:220px;opacity:1;margin-left:10px}
  .fab:hover{background:var(--gold-hi)}
  .fab:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
  .fab.peek{animation:peek 1.3s cubic-bezier(.3,.8,.3,1) 1}
  .fab.peek svg{animation:wiggle 1.3s ease 1}
  @keyframes peek{0%,100%{transform:translateX(10px)}35%{transform:translateX(-14px)}60%{transform:translateX(0)}80%{transform:translateX(-5px)}}
  @keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}50%{transform:rotate(10deg)}70%{transform:rotate(-6deg)}}
  .toast{bottom:92px}
  @media (prefers-reduced-motion:reduce){
    .fab,.fab span{transition:none}
    .fab.peek,.fab.peek svg{animation:none}
  }

  /* ---------- wersja 2: domek DK i rozjasnione niebieskie „DZIAŁAJ!” wprost na ciemnym tle ---------- */
  .brand2{display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,18px);text-decoration:none}
  .brand2 .b2-dk{height:clamp(38px,4.6vw,58px);width:auto;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
  .brand2 i{width:1px;align-self:stretch;margin-block:6px;background:rgba(243,233,210,.22);display:block}
  .brand2 .b2-dz{height:clamp(34px,4.2vw,54px);width:auto;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
  .brand2:focus-visible{outline:3px solid var(--gold);outline-offset:6px;border-radius:12px}
  .brand2.big{gap:26px}
  .brand2.big .b2-dk{height:84px}
  .brand2.big .b2-dz{height:78px}
  @media (max-width:860px){ .brand2.big{gap:18px} .brand2.big .b2-dk{height:60px} .brand2.big .b2-dz{height:54px} }

  /* ---------- logotypy: wpadaja do menu po zjechaniu z pierwszego ekranu, a na koncu do stopki ---------- */
  .nav-brand{display:none}
  @media (min-width:861px){
    .chapters .wrap{align-items:center}
    .nav-brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;max-width:0;opacity:0;margin-right:0;
               transform:translateY(-140%) rotate(-6deg);
               transition:max-width .55s cubic-bezier(.2,.8,.2,1),margin-right .55s cubic-bezier(.2,.8,.2,1),opacity .3s ease,
                          transform .7s cubic-bezier(.34,1.56,.5,1)}
    .nav-brand .n-dk{height:30px;width:auto;display:block}
    .nav-brand i{width:1px;height:22px;background:rgba(243,248,255,.25);display:block}
    .nav-brand .n-dz{height:27px;width:auto;display:block}
    .chapters.brand-in .nav-brand{max-width:240px;margin-right:14px;opacity:1;transform:none}
    .chapters.brand-out .nav-brand{max-width:0;margin-right:0;opacity:0;transform:translateY(140%) rotate(6deg);
                                   transition:max-width .5s .25s ease,margin-right .5s .25s ease,opacity .3s ease,transform .45s ease-in}
  }
  .js .brand2.big{transform-origin:50% 0}
  .js .brand2.big:not(.landed){opacity:0;transform:translateY(-90px) rotate(-4deg) scale(.92)}
  .brand2.big.landed{opacity:1;transform:none;transition:transform .9s cubic-bezier(.34,1.56,.5,1),opacity .35s ease}
  @media (prefers-reduced-motion:reduce){
    .nav-brand,.chapters.brand-out .nav-brand,.brand2.big.landed{transition:none}
    .js .brand2.big:not(.landed){opacity:1;transform:none}
  }

  /* ---------- stopka: wiekszy znak roku OZK 2026 ---------- */
  footer{align-items:center}
  .ozk{gap:18px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,28px);color:var(--cream);line-height:1.15}
  .ozk img{width:clamp(84px,9vw,112px);height:auto;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .ozk small{display:block;font-family:var(--body);font-style:normal;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--cream-dim);margin-bottom:6px}

  /* ---------- naglowek: na telefonie sama ikona ---------- */
  .top-share{padding:11px 16px;font-size:14px}
  @media (max-width:860px){
    .top-share{width:44px;height:44px;padding:0;border-radius:50%}
    .top-share .ts-l{display:none}
    .top-share svg{width:20px;height:20px}
  }

  /* ---------- pasek postepu u gory ---------- */
  .progress-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);
                background:linear-gradient(90deg,#0061B2,#4FBDFF 45%,#F2B71C 75%,#C8174A);pointer-events:none}

  /* ---------- animacje przy przewijaniu ---------- */
  .js [data-rv]{opacity:0;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.85,.25,1);transition-delay:var(--d,0s);will-change:transform,opacity}
  .js [data-rv="up"]{transform:translateY(46px)}
  .js [data-rv="left"]{transform:translateX(-60px) rotate(-1.5deg)}
  .js [data-rv="right"]{transform:translateX(60px) rotate(1.5deg)}
  .js [data-rv="zoom"]{transform:scale(.86) rotate(-3deg)}
  .js [data-rv="pop"]{transform:scale(.6);transition:opacity .4s ease,transform .7s cubic-bezier(.34,1.7,.5,1);transition-delay:var(--d,0s)}
  .js [data-rv="word"]{transform:translateY(.6em) rotate(4deg);display:inline-block;transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.5,.5,1);transition-delay:var(--d,0s)}
  .js [data-rv].in{opacity:1;transform:none}
  .ch-num span.in{animation:wiggle .9s .5s ease 1}
  @keyframes wiggle{0%,100%{rotate:0deg}20%{rotate:-6deg}45%{rotate:5deg}70%{rotate:-3deg}}
  .btn.in-pulse{animation:btnPulse 1.2s ease-out 1}
  @keyframes btnPulse{0%{box-shadow:0 0 0 0 rgba(79,189,255,.55)}100%{box-shadow:0 0 0 22px rgba(79,189,255,0)}}
  .parallax{will-change:transform}
  .burst{position:fixed;width:9px;height:9px;border-radius:50%;pointer-events:none;z-index:70;animation:burst .8s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes burst{to{transform:translate(var(--bx),var(--by)) scale(.2);opacity:0}}
  @media (prefers-reduced-motion:reduce){
    .js [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
    .ch-num span.in,.btn.in-pulse,.burst{animation:none}
    .progress-bar{display:none}
  }

  /* ---------- nagroda za 4 kroki ---------- */
  .reward{border:0;padding:0;background:transparent;max-width:min(760px,calc(100vw - 24px));width:100%;color:var(--cream);overflow:visible}
  .reward::backdrop{background:rgba(3,8,18,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .reward[open]{animation:rwIn .55s cubic-bezier(.34,1.45,.5,1)}
  @keyframes rwIn{from{opacity:0;transform:translateY(40px) scale(.9)}}
  .rw-box{position:relative;background:var(--ink-2);border-radius:26px;padding:22px;box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px var(--line);
          display:flex;flex-direction:column;gap:18px}
  .rw-x{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--cream);font-size:26px;line-height:1;cursor:pointer}
  .rw-x:hover{background:rgba(255,255,255,.16)}
  .rw-head{display:flex;align-items:center;gap:16px;padding-right:40px}
  .rw-badge{flex:none;width:58px;height:58px;color:var(--gold);animation:rwBadge .9s .25s cubic-bezier(.34,1.8,.5,1) both}
  @keyframes rwBadge{from{transform:scale(0) rotate(-90deg)}}
  .rw-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
  .reward h3{font-size:clamp(28px,4vw,38px);font-weight:800;margin:2px 0 0}
  .rw-sub{margin:4px 0 0;color:var(--cream-dim);font-size:15px}
  .rw-video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
  .rw-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .rw-foot{display:flex;flex-wrap:wrap;gap:10px}
  .rw-btn{margin-top:14px}
  .rw-bit{position:fixed;top:-12px;width:10px;height:14px;border-radius:2px;pointer-events:none;z-index:2147483647;animation:rwFall linear forwards}
  @keyframes rwFall{to{transform:translate(var(--dx),110vh) rotate(var(--rot))}}
  @media (max-width:560px){ .rw-box{padding:16px;border-radius:20px} .rw-badge{width:46px;height:46px} }
  @media (prefers-reduced-motion:reduce){ .reward[open],.rw-badge{animation:none} .rw-bit{display:none} }

  /* ---------- telefon: bez przewijania w poziomie (clip nie psuje przyklejonego menu) ---------- */
  html,body{overflow-x:clip}
  .hero,.chapter,.reel,.math,.todo,.final{overflow-x:clip}
  @media (max-width:860px){
    .js [data-rv="left"],.js [data-rv="right"]{transform:translateY(40px)}
    .js [data-rv="zoom"]{transform:scale(.92)}
  }

  /* telefon: logo DZIALAJ! o ok. 20% wieksze */
  @media (max-width:860px){ .brand2 .b2-dz{height:41px} }

  /* ---------- wyrazniejsze PRZEWIN ---------- */
  .cue a{flex-direction:row;gap:12px;padding:9px 18px 9px 12px;border-radius:999px;color:var(--cream);
         background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px var(--gold);font-size:13px;font-weight:800;letter-spacing:.22em;
         position:relative;animation:cueFloat 2.4s ease-in-out infinite}
  .cue a::before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 0 var(--gold);opacity:.6;animation:cueRing 2.4s ease-out infinite;pointer-events:none}
  .cue a:hover{background:var(--gold);color:var(--ink)}
  .cue a:hover .cue-mouse{border-color:var(--ink)} .cue a:hover .cue-mouse i{background:var(--ink)} .cue a:hover .cue-chev path{stroke:var(--ink)}
  .cue-mouse{width:22px;height:34px;border:2px solid var(--gold);border-radius:12px;position:relative;flex:none}
  .cue-mouse i{position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cueWheel 1.6s ease-in-out infinite}
  .cue-chev{display:flex;flex-direction:column;height:30px;justify-content:center}
  .cue-chev svg{width:20px;height:14px;margin:-2px 0;animation:cueChev 1.6s ease-in-out infinite;opacity:0}
  .cue-chev svg:nth-child(2){animation-delay:.25s}
  .cue-chev path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .cue svg{animation-name:cueChev}
  @keyframes cueWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(11px);opacity:0}100%{transform:translateY(0);opacity:0}}
  @keyframes cueChev{0%{opacity:0;transform:translateY(-5px)}45%{opacity:1}100%{opacity:0;transform:translateY(6px)}}
  @keyframes cueFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
  @keyframes cueRing{0%{box-shadow:0 0 0 0 var(--gold);opacity:.55}100%{box-shadow:0 0 0 14px var(--gold);opacity:0}}
  @media (max-width:860px){ .cue a{padding:7px 16px 7px 10px;gap:10px} .cue-mouse{width:20px;height:30px} }
  @media (prefers-reduced-motion:reduce){ .cue a,.cue a::before,.cue-mouse i,.cue-chev svg{animation:none} .cue-chev svg{opacity:1} }
  .ast{font-size:.36em;vertical-align:super;margin-left:.08em;color:var(--gold);font-weight:700;line-height:0}
  .math-note small .ast{font-size:1.15em;vertical-align:.1em;margin:0 2px 0 0}