:root{
      --bg0: #0b1020;
      --bg1: #0f1730;
      --card: rgba(255,255,255,.08);
      --card-border: rgba(255,255,255,.14);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.65);
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --radius: 20px;

      --maxw: 68ch;        /* szerokość czytania */
      --pad: clamp(18px, 3.6vw, 36px);
      --fs: clamp(18px, 2.4vw, 22px);
      --lh: 1.55;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }

    body{
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color: var(--text);
      background:
        radial-gradient(1200px 700px at 15% 10%, rgba(124, 92, 255, .25), transparent 55%),
        radial-gradient(900px 600px at 85% 75%, rgba(0, 214, 255, .18), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      display: grid;
      place-items: center;
      padding: clamp(14px, 3vw, 28px);
    }

    .wrap{
      width: min(100%, 980px);
      display: grid;
      place-items: center;
    }

    .card{
      width: min(100%, 980px);
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: var(--pad);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .quote{
      max-width: var(--maxw);
      margin: 0 auto;
      font-size: var(--fs);
      line-height: var(--lh);
      letter-spacing: .2px;
      text-wrap: pretty;
      overflow-wrap: anywhere;
    }

    /* „Adam powiedział:” jako nagłówek cytatu */
    .quote strong{
      font-weight: 700;
      color: var(--text);
    }

    /* Sama wypowiedź (opcjonalnie w <q>) */
    q{
      quotes: "„" "”" "‚" "’";
      font-style: italic;
    }
    q::before{ content: open-quote; }
    q::after{ content: close-quote; }

    /* delikatna stopka (np. nr etapu) – możesz usunąć jeśli ma być absolutnie sam napis */
    .meta{
      max-width: var(--maxw);
      margin: 16px auto 0;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .12em;
      text-transform: uppercase;
      user-select: none;
    }

    /* poprawa dla bardzo małych ekranów */
    @media (max-width: 380px){
      :root{ --radius: 16px; }
    }

    /* preferencje dostępności */
    @media (prefers-reduced-motion: reduce){
      * { scroll-behavior: auto !important; }
    }