/* --mut: at least 4.5:1 on every background (WCAG 1.4.3); --aritekst: the gold of texts and links (in the light look a
     darker gold, the bright one is only 2.7:1 there); --fokus: the ring of the element that has the keyboard focus */
  :root{color-scheme:dark;--bg:#0f1115;--bg2:#171a21;--bg3:#1f232c;--text:#e9e4da;--text2:#a59f94;--mut:#8f8a82;--ari:#d4a24c;--ari2:#e2b65f;--kufi:#2e333d;
        --aritekst:var(--ari);--fokus:var(--ari);
        --hije:0 10px 30px rgba(0,0,0,.25);--kuti:var(--bg2);
        /* buttons, reading line and highlighting: the colours of the program */
        --btn:var(--ari);--btnfg:#1a1408;--btnsh:none;--btnshh:0 4px 14px rgba(212,162,76,.22);--fill:linear-gradient(90deg,#9a7535,#e2b65f);
        --fjalia:color-mix(in srgb,var(--ari) 17%,transparent);--fjala:color-mix(in srgb,var(--ari) 48%,transparent)}
  :root[data-theme=light]{color-scheme:light;--bg:#f3efe7;--bg2:#ffffff;--bg3:#ebe5d9;--text:#1f1c17;--text2:#62594c;--mut:#6c6458;--ari:#c08a2e;--ari2:#d9a443;--kufi:#d8cfbf;
        --aritekst:#8a5a12;--fokus:#8a5a12;
        --hije:0 10px 30px rgba(90,60,10,.10);--kuti:#f9f6f0;
        --btn:linear-gradient(180deg,#ecc26c,#d9a443);--btnfg:#3a2705;--btnsh:0 1px 2px rgba(90,60,10,.18),0 4px 12px rgba(200,145,50,.25);
        --btnshh:0 2px 4px rgba(90,60,10,.2),0 6px 16px rgba(200,145,50,.34);--fill:linear-gradient(90deg,#efcf8a,#c8902f);
        --fjalia:color-mix(in srgb,var(--ari) 20%,transparent);--fjala:color-mix(in srgb,var(--ari) 52%,transparent)}
  *{box-sizing:border-box}
  html{scrollbar-color:var(--kufi) var(--bg)}
  body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 system-ui,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
  .faqe{max-width:1120px;margin:0 auto;padding:0 28px}
  header{display:flex;align-items:center;justify-content:space-between;padding:24px 0}
  .marka{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
  .marka img{width:48px;height:48px}
  .marka b{display:block;font-size:24px;line-height:1.1;letter-spacing:.2px}
  .marka b em{font-style:normal;color:var(--ari)}
  .marka span{display:block;font-size:14px;color:var(--text2)}
  .pamja{width:42px;height:42px;border-radius:12px;border:1px solid var(--kufi);background:var(--kuti);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  .pamja:hover{color:var(--ari);border-color:var(--ari)}
  .pamja:active{filter:brightness(.9)}
  .pamja svg{width:20px;height:20px}
  .pamja .hene{width:19px;height:19px}
  .pamja .hene,:root[data-theme=light] .pamja .diell{display:none}
  :root[data-theme=light] .pamja .hene{display:block}
  .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:64px 0 40px}
  .pill{display:inline-block;font-size:13.5px;font-weight:600;color:var(--aritekst);background:color-mix(in srgb,var(--ari) 12%,transparent);border:1px solid color-mix(in srgb,var(--ari) 40%,transparent);border-radius:999px;padding:4px 14px}
  h1{font-size:clamp(38px,5.4vw,60px);line-height:1.08;letter-spacing:-.5px;margin:18px 0 18px}
  h1 em{font-style:normal;color:var(--aritekst)}
  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--fokus);outline-offset:3px}   /* WCAG 2.4.7 */
  .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .hyrje{font-size:19px;color:var(--text2);margin:0 0 30px;max-width:540px}
  .buton{display:inline-flex;align-items:center;gap:10px;background:var(--btn);color:var(--btnfg);text-decoration:none;font-weight:700;font-size:18px;padding:15px 30px;border-radius:12px;box-shadow:var(--btnsh);transition:box-shadow .15s ease,filter .15s ease}
  .buton:hover{filter:brightness(1.06);box-shadow:var(--btnshh)}
  .buton:active{filter:brightness(.93);box-shadow:var(--btnsh)}
  .buton svg{width:20px;height:20px}
  .te-dhena{color:var(--mut);font-size:14.5px;margin:14px 0 0}
  .zerat{display:grid;gap:12px}
  .shembull{margin:0;color:var(--mut);font-size:14px;font-weight:600;letter-spacing:.3px}
  /* the two voices in one box: the play button with the name under it, and the line of the reading */
  .dy-zera{background:var(--bg2);border:1px solid var(--kufi);border-radius:18px;padding:6px 22px;box-shadow:var(--hije)}
  .zeri{display:flex;align-items:center;gap:20px;padding:18px 0}
  .zeri + .zeri{border-top:1px solid var(--kufi)}
  .luaj-emri{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;width:60px}
  .luaj-emri span{font-weight:700;font-size:15px;color:var(--text)}
  .mes{flex:1;min-width:0}
  /* the text of the sample, read as in the program: the sentence and the word being said are coloured */
  .teksti{margin:0 0 4px;font:16px/1.65 Georgia,"Times New Roman",serif;color:var(--text)}
  .teksti .fj{border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .12s}
  .teksti .fj.tani{background:var(--fjalia)}
  .teksti .f{border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .teksti .f.tani{background:var(--fjala);box-shadow:0 0 0 2px var(--fjala)}
  .shirit{height:24px;position:relative;cursor:pointer}
  .shirit::before,.shirit i{content:"";position:absolute;left:0;top:9px;height:6px;border-radius:6px}
  .shirit::before{right:0;background:var(--kufi)}
  .shirit i{width:0;background:var(--fill)}
  /* the play button of the program */
  .luaj{width:46px;height:46px;flex:none;border-radius:50%;border:0;padding:0;background:var(--btn);color:var(--btnfg);box-shadow:var(--btnsh);cursor:pointer;
        display:flex;align-items:center;justify-content:center;transition:box-shadow .15s ease,filter .15s ease}
  .luaj:hover{filter:brightness(1.06);box-shadow:var(--btnshh)}
  .luaj:active{filter:brightness(.93);box-shadow:var(--btnsh)}
  .luaj svg{width:20px;height:20px;pointer-events:none}
  .luaj .pauze,.duke-luajtur .luaj .play{display:none}
  .duke-luajtur .luaj .pauze{display:block}
  section{padding:64px 0 8px}
  h2{font-size:30px;margin:0 0 28px;text-align:center;letter-spacing:-.2px}
  .rrjete{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
  .karte{background:var(--bg2);border:1px solid var(--kufi);border-radius:16px;padding:22px 22px 18px}
  .karte h3{margin:0 0 6px;font-size:18.5px}
  .karte p{margin:0;color:var(--text2);font-size:15.5px}
  .karte a{color:var(--aritekst)}
  .shenje{width:36px;height:36px;border-radius:10px;background:var(--bg3);display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--ari)}
  .shenje svg{width:20px;height:20px}
  .se-shpejti .karte{border-style:dashed}
  .etikete{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;color:var(--aritekst);border:1px solid var(--aritekst);border-radius:999px;padding:2px 10px;margin-bottom:12px}
  ol.hapat{max-width:760px;margin:0 auto;padding-left:22px;color:var(--text2)}
  ol.hapat li{margin:0 0 12px;padding-left:4px}
  ol.hapat b{color:var(--text)}
  @media (max-width:880px){.hero{grid-template-columns:1fr;gap:40px;padding-top:36px}}
  @media (max-width:520px){.faqe{padding:0 18px}.marka span{font-size:13px}.buton{display:flex;justify-content:center}.dy-zera{padding:4px 18px}.zeri{gap:18px}}
  footer{border-top:1px solid var(--kufi);margin-top:72px;padding:22px 0 36px;color:var(--mut);font-size:14px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center}
  footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
  footer a,footer .kontakt{color:var(--text2);text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer}
  footer a:hover,footer .kontakt:hover{color:var(--ari)}
  .tekst{max-width:760px;margin:0 auto;padding:40px 0 0}
  .tekst h1{font-size:clamp(30px,4.4vw,42px);margin:0 0 8px}
  .tekst .data{color:var(--mut);font-size:14px;margin:0 0 30px}
  .tekst h2{text-align:left;font-size:21px;margin:34px 0 10px}
  .tekst p,.tekst li{color:var(--text2)}
  .tekst ol,.tekst ul{padding-left:22px}
  .tekst li{margin:0 0 10px}
  .tekst b{color:var(--text)}
  .kthehu{display:inline-block;margin-top:34px;color:var(--aritekst);text-decoration:none}
  .tekst a:not(.kthehu){color:var(--aritekst)}
  /* the keyboard shortcuts of the accessibility page */
  .tabela{border-collapse:collapse;width:100%;margin:6px 0 10px}
  .tabela th,.tabela td{text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--kufi);vertical-align:top;color:var(--text2)}
  .tabela th{color:var(--text);font-weight:600;white-space:nowrap}
  kbd{font:13px ui-monospace,Consolas,monospace;background:var(--bg3);border:1px solid var(--kufi);border-radius:4px;padding:1px 6px;color:var(--text);white-space:nowrap}