/* ══════════════════════════════════════════════════════════════════════════
   LION — "2011 MacBook" (Mac OS X 10.7 ajastu)
   Linane taust, ühendatud tööriistariba, valgusfoorinupud, allikaloend
   külgribas, vahelduvad tabeliread, klaasist dokk, õmmeldud nahkpaneel.
   Skeuomorfism täpselt sellel tasemel, kus ta 2011 oli.

   Kõik pinnad on CSS-gradiendid; ükski varamärk ega ikoon ei ole kopeeritud.
   Ainult hele režiim — Lion'il tumedat ei olnud.

   Alus: stiilivariant 8 (stiilid/lion.html), laiendatud terve saidi jaoks
   komponentidega, mis olid varem css/aero.css-is.
   ══════════════════════════════════════════════════════════════════════════ */

@layer reset, muutujad, alus, kroom, sisu, ipod, liikumine, utiliidid;

/* ═══════════════════════════════════════════════════════════════ 0. RESET */
@layer reset {
  *, ::before, ::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }

  /* NB: ainult KLASSIGA loendid on kasutajaliides. Klassita <ul> on proosa ja
     peab oma täpid ja taande alles hoidma — cv/, raud/, tervis/, ajalugu/ ja
     kood/ kasutavad neid. (Variandifailis oli see reegel piiramata ja sõi
     kõik täpid ära.) */
  ul[class], ol[class] { padding-inline-start: 0; list-style: none; }

  img, svg, video { max-inline-size: 100%; block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; }

  /* [hidden] jääb peitu ka siis, kui komponent ise display't seab (vidin,
     mängija juhtnupud on ilma JS-ita peidus). !important madalaimas kihis
     võidab tavalised reeglid kõigis hilisemates kihtides. */
  [hidden] { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════ 1. MUUTUJAD */
@layer muutujad {
  :root {
    /* ── palett ─────────────────────────────────────────────────────────── */
    --linane:     #b7b7b2;
    --linane-2:   #a3a39e;
    --kroom-1:    #fbfbfb;
    --kroom-2:    #d7d7d7;
    --kroom-serv: #9a9a9a;
    --kroom-joon: #b8b8b8;

    --allikas:      #dde3ea;
    --allikas-2:    #cfd6e0;
    --allikas-tekst:#3a4653;
    --allikas-pais: #566370;   /* oli #8794a4 — 2.4:1, liiga hele 11px jaoks */

    --valik-1: #6aa9ee;
    --valik-2: #3a76c4;

    --sisu:    #ffffff;
    --triip:   #f2f6fc;
    --joon:    #e2e6ea;

    --tekst:      #2e3338;
    --tekst-tuhm: #6a7178;     /* oli #7c848c — 3.8:1 valgel */
    --pais-tuhm:  #5d666e;     /* tabelipäis, oli #6c757d */
    --link:       #1a5fb4;

    --etsitud: 0 1px 0 rgb(255 255 255 / .85);
    --vari-aken: 0 0 0 1px rgb(0 0 0 / .28), 0 12px 28px rgb(0 0 0 / .35),
                 0 34px 70px rgb(0 0 0 / .35);

    --font: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica,
            Arial, "DejaVu Sans", sans-serif;
    --mono: Menlo, Monaco, "Courier New", monospace;

    --menyy: 22px;   /* menüüriba kõrgus */
    --dokk: 76px;    /* doki kõrgus (keha alumine varu) */
    --dokk-ikoon: clamp(24px, 7.1vw, 46px);
    --mootlaius: 64ch;

    accent-color: var(--valik-2);
    color-scheme: light;
  }
}

/* ════════════════════════════════════════════════════════════════ 2. ALUS */
@layer alus {
  html { scroll-behavior: smooth; }

  @media (width < 34rem) { :root { --dokk: 56px; } }

  body {
    min-block-size: 100dvb;
    padding-block: calc(var(--menyy) + 22px) calc(var(--dokk) + 18px);
    padding-inline: 16px;
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.55;
    color: var(--tekst);
    background-color: var(--linane);   /* varuvärv, muster on .taust peal */
    overflow-x: clip;
  }

  /* Taust: fotod, mis vahetuvad aeglaselt, linane jääb varuvärviks.
     Eraldi fikseeritud kiht (mitte body taust), sest background-attachment:
     fixed + backdrop-filter sunnib Windowsis iga kerimiskaadri peale
     täisvaate ülejoonistuse. inset: -28px annab parallaksile ruumi. */
  .taust {
    position: fixed;
    inset: -28px;
    z-index: -2;
    overflow: clip;
    pointer-events: none;
    background-color: var(--linane);
    background-image:
      repeating-linear-gradient(45deg, rgb(255 255 255 / .055) 0 1px, transparent 0 3px),
      repeating-linear-gradient(-45deg, rgb(0 0 0 / .05) 0 1px, transparent 0 3px),
      linear-gradient(to bottom, var(--linane), var(--linane-2));
    translate: calc(var(--par-x, 0) * var(--par-taust, 0px))
               calc(var(--par-y, 0) * var(--par-taust, 0px) * .66);
  }
  .taust__pilt {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1.8s ease;
    --transition-reduced: none;
  }
  .taust__pilt.on-nahtav { opacity: 1; }
  /* Loor fotode PEAL: linane kude + vinjett + tume kalle.
     Kude peab olema siin, mitte .taust taustapildina — muidu katavad
     läbipaistmatud fotokihid selle täielikult kinni ja kangas kaob ära.
     ::after on .taust sees, nii et kude nihkub parallaksiga kaasa. */
  .taust::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(45deg, rgb(255 255 255 / .10) 0 1px, transparent 0 3px),
      repeating-linear-gradient(-45deg, rgb(0 0 0 / .09) 0 1px, transparent 0 3px),
      radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / .22), transparent 60%),
      linear-gradient(to bottom, rgb(20 26 32 / .18), rgb(20 26 32 / .34));
  }

  h1, h2, h3, h4 { line-height: 1.25; font-size: 1em; font-weight: 700; }
  a { color: var(--link); }
  a:visited { color: #6b4fa0; }
  :focus-visible {
    outline: 3px solid rgb(106 169 238 / .75);
    outline-offset: 1px;
    border-radius: 4px;
  }
  ::selection { background: #b4d3f5; }

  /* Fikseeritud menüüriba varjab ankrud — lükka sihtmärk allapoole. */
  :target, #sisu, .margid li, .artikkel h2, .artikkel h3 {
    scroll-margin-block-start: calc(var(--menyy) + 12px);
  }

  /* Kakskeelsus: mõlemad keeled elavad HTML-is kõrvuti, CSS peidab teise. */
  html[lang="et"] :where(.en) { display: none; }
  html[lang="en"] :where(.et) { display: none; }

}

/* ═══════════════════════════════════════════════════════════════ 3. KROOM */
@layer kroom {

  /* ── menüüriba ─────────────────────────────────────────────────────────── */
  .menyyriba {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 16px;
    block-size: var(--menyy);
    padding-inline: 12px;
    font-size: 12px;
    color: #23282d;
    text-shadow: var(--etsitud);
    background: linear-gradient(to bottom, rgb(255 255 255 / .96), rgb(226 226 226 / .93));
    border-block-end: 1px solid rgb(0 0 0 / .25);
    box-shadow: 0 1px 2px rgb(0 0 0 / .12);
    backdrop-filter: blur(8px) saturate(1.2);
    user-select: none;
  }
  .menyyriba .mark {
    inline-size: 11px; block-size: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #6d757d, #2b3036);
    flex: none;
  }
  .menyyriba b { font-weight: 700; }
  .menyyriba .parem { margin-inline-start: auto; display: flex; gap: 12px; align-items: center; }
  .menyyriba .parem span { font-variant-numeric: tabular-nums; }
  @media (width < 46rem) { .menyyriba .peida { display: none; } }

  /* Menüüriba "extras" — ribast täiskõrgused, aktiivsena sinine, nagu Lion. */
  .ekstra {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding-inline: 7px;
    font: inherit;
    color: inherit;
    text-shadow: var(--etsitud);
    cursor: pointer;
  }
  .ekstra[aria-pressed="true"] {
    color: #fff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / .35);
    background: linear-gradient(to bottom, #5c9ae8, #3a76c4);
  }

  /* riba-mõõdus segmentjuhtelement (ET/EN, liikumine) */
  .segment--riba { display: inline-flex; }
  .segment--riba button {
    min-block-size: 16px;
    padding: 0 8px;
    font: 11px var(--font);
    color: #2c3237;
    text-shadow: var(--etsitud);
    border: 1px solid #a6a6a6;
    border-inline-start-width: 0;
    background: linear-gradient(to bottom, #fff, #ededed 52%, #ddd);
    cursor: pointer;
  }
  .segment--riba button:first-child { border-inline-start-width: 1px; border-radius: 3px 0 0 3px; }
  .segment--riba button:last-child  { border-radius: 0 3px 3px 0; }
  .segment--riba [aria-pressed="true"] {
    background: linear-gradient(to bottom, #b9c3cd, #d3dae1 55%, #c9d1d9);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .28);
  }

  /* ── aken ──────────────────────────────────────────────────────────────── */
  .aken {
    max-inline-size: 62rem;
    margin-inline: auto;
    border-radius: 6px;
    background: var(--sisu);
    box-shadow: var(--vari-aken);
    overflow: clip;
  }
  /* Esseeleht vajab laiemat akent, et veeriseviited üldse mahuksid. */
  .aken--lugemine { max-inline-size: 72rem; }

  /* ühendatud tiitli- ja tööriistariba */
  .kroom {
    padding: 7px 10px;
    background: linear-gradient(to bottom, var(--kroom-1) 0, #ededed 52%, var(--kroom-2) 100%);
    border-block-end: 1px solid var(--kroom-serv);
    box-shadow: inset 0 1px 0 #fff;
  }
  .kroom .tiitel { display: flex; align-items: center; gap: 10px; min-block-size: 22px; }

  .foor { display: flex; gap: 8px; flex: none; }
  .foor > * {
    display: block;
    inline-size: 12px; block-size: 12px;
    padding: 0;
    border: 1px solid rgb(0 0 0 / .32);
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgb(255 255 255 / .75),
                inset 0 -2px 2px rgb(0 0 0 / .12);
    cursor: pointer;
    text-indent: -999em;
    overflow: hidden;
  }
  .foor .punane  { background: radial-gradient(circle at 40% 28%, #ff9b92, #e8483c 70%); }
  .foor .kollane { background: radial-gradient(circle at 40% 28%, #ffdd8e, #e9a01c 70%); }
  .foor .roheline{ background: radial-gradient(circle at 40% 28%, #a8f09a, #1eae3d 70%); }

  .kroom h1 {
    flex: 1 1 auto;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #3d4348;
    text-shadow: var(--etsitud);
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
  }

  /* ── Aqua nupp ─────────────────────────────────────────────────────────── */
  .nupp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-block-size: 22px;
    padding: 3px 11px;
    font: 12px var(--font);
    color: #2c3237;
    text-decoration: none;
    text-shadow: var(--etsitud);
    border: 1px solid #a6a6a6;
    border-radius: 4px;
    background: linear-gradient(to bottom, #ffffff, #f0f0f0 48%, #e0e0e0 52%, #d6d6d6);
    box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgb(0 0 0 / .12);
    cursor: pointer;
  }
  .nupp svg { inline-size: 13px; block-size: 13px; fill: currentColor; flex: none; }
  .nupp:visited { color: #2c3237; }
  .nupp:active {
    background: linear-gradient(to bottom, #c9c9c9, #dcdcdc);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / .2);
  }
  .nupp.esile {
    color: #fff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / .35);
    border-color: #2f68b0;
    background: linear-gradient(to bottom, #8dc0f5, #4b8dd6 48%, #3a78c4 52%, #2f6ab4);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 1px 1px rgb(0 0 0 / .18);
  }
  .nupp.esile:visited { color: #fff; }

  /* ── segmentjuhtelement ────────────────────────────────────────────────── */
  .segment { display: flex; }
  .segment a {
    padding: 3px 12px;
    min-block-size: 22px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #2c3237;
    text-decoration: none;
    text-shadow: var(--etsitud);
    border: 1px solid #a6a6a6;
    border-inline-start-width: 0;
    background: linear-gradient(to bottom, #fff, #f0f0f0 48%, #e0e0e0 52%, #d6d6d6);
    box-shadow: inset 0 1px 0 #fff;
  }
  .segment a:first-child { border-inline-start-width: 1px; border-radius: 4px 0 0 4px; }
  .segment a:last-child { border-radius: 0 4px 4px 0; }
  .segment a[aria-current="true"] {
    color: #1e2429;
    background: linear-gradient(to bottom, #b9c3cd, #d3dae1 55%, #c9d1d9);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .28);
  }

  /* ── otsingukast (dekoratiivne) ────────────────────────────────────────── */
  .otsing {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    padding: 2px 9px;
    min-block-size: 22px;
    font-size: 12px;
    color: var(--tekst-tuhm);
    background: #fff;
    border: 1px solid #a9a9a9;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / .18);
  }
  .otsing svg { inline-size: 12px; block-size: 12px; fill: #9aa1a8; }
  @media (width < 52rem) { .otsing { display: none; } }

  /* ── leivapuru: Finderi teeriba ────────────────────────────────────────── */
  .puru {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--tekst-tuhm);
    background: #f6f7f9;
    border-block-end: 1px solid var(--joon);
    box-shadow: inset 0 1px 0 #fff;
  }
  .puru li { display: flex; align-items: center; gap: 6px; }
  .puru li:not(:last-child)::after { content: "\203A"; color: #aeb5bc; }
  .puru a { color: var(--tekst-tuhm); text-decoration: none; }
  .puru [aria-current="page"] { color: var(--tekst); }

  /* ── keha: allikaloend + sisu ──────────────────────────────────────────── */
  .keha { display: grid; grid-template-columns: 13.5rem 1fr; }
  @media (width < 44rem) { .keha { grid-template-columns: 1fr; } }

  .allikaloend {
    padding: 10px 0 16px;
    background: linear-gradient(to bottom, var(--allikas), var(--allikas-2));
    border-inline-end: 1px solid #a9b2bd;
    box-shadow: inset -1px 0 0 rgb(255 255 255 / .5);
  }
  /* Telefonis võtaks püstine allikaloend terve ekraani ja sisuni jõudmiseks
     tuleks kerida läbi kogu navigatsiooni. Lion'i Finder tegi kitsal aknal
     sama: külgribast saab horisontaalne riba. Rühmapealkirjad kaovad —
     dokk kannab niikuinii samu sihtkohti. */
  @media (width < 44rem) {
    .allikaloend {
      display: flex;
      gap: 4px;
      padding: 7px 10px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      border-inline-end: 0;
      border-block-end: 1px solid #a9b2bd;
    }
    .allikaloend::-webkit-scrollbar { display: none; }
    .allikaloend h2 { display: none; }
    .allikaloend a {
      flex: none;
      padding: 3px 10px;
      border: 1px solid #b3bcc7;
      border-radius: 999px;
      background: linear-gradient(to bottom, rgb(255 255 255 / .75), rgb(255 255 255 / .3));
      white-space: nowrap;
    }
    .allikaloend a[aria-current="page"] { border-color: #2f68b0; }
  }
  .allikaloend h2 {
    padding: 8px 14px 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--allikas-pais);
    text-shadow: var(--etsitud);
  }
  .allikaloend a {
    display: flex;
    align-items: center;
    gap: 7px;
    min-block-size: 24px;
    padding: 3px 14px;
    font-size: 13px;
    color: var(--allikas-tekst);
    text-decoration: none;
    text-shadow: var(--etsitud);
  }
  .allikaloend a[aria-current="page"] {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 -1px 0 rgb(0 0 0 / .35);
    background: linear-gradient(to bottom, var(--valik-1), var(--valik-2));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45);
  }
  .allikaloend svg { inline-size: 15px; block-size: 15px; flex: none; opacity: .85; }
  .allikaloend a[aria-current="page"] svg { opacity: 1; }

  /* ── dokk ──────────────────────────────────────────────────────────────── */
  .dokk {
    position: fixed;
    inset: auto 0 0;
    z-index: 55;
    display: flex;
    justify-content: center;
    padding-block-end: 6px;
    pointer-events: none;
  }
  .dokk ul {
    display: flex;
    align-items: end;
    /* Dokil ei ole klassi, nii et reseti ul[class] reegel teda ei taba ja
       brauseri vaikemarkerid jäid alles: mobiilis paistsid mustad täpid
       ikoonide vahelt välja. */
    list-style: none;
    margin: 0;
    /* Voolav mõõt: ikoone on 9 ja need peavad mahtuma ka 320px ekraanile,
       ilma kerimiseta (Lion'i dokk ei kerinud). */
    gap: clamp(4px, 1.4vw, 10px);
    padding: clamp(6px, 1.6vw, 9px) clamp(6px, 1.8vw, 13px) clamp(5px, 1.4vw, 8px);
    border-radius: 13px 13px 9px 9px;
    /* klaasist riiul: matt plaat + peegeldav põrandaserv all */
    background:
      linear-gradient(to bottom,
        rgb(255 255 255 / .58) 0, rgb(238 242 246 / .34) 44%,
        rgb(150 162 175 / .30) 45%, rgb(120 132 146 / .42) 100%);
    border: 1px solid rgb(255 255 255 / .7);
    border-block-end-color: rgb(90 100 112 / .55);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .9),
      inset 0 -1px 0 rgb(255 255 255 / .35),
      0 -2px 16px rgb(0 0 0 / .3),
      0 6px 14px rgb(0 0 0 / .25);
    backdrop-filter: blur(11px) saturate(1.35);
    pointer-events: auto;
  }
  .dokk a {
    position: relative;
    display: grid;
    justify-items: center;
    padding-block-end: 7px;
    text-decoration: none;
    color: #1e2429;
  }
  .dokk .ruut {
    display: grid;
    place-items: center;
    inline-size: var(--dokk-ikoon);
    block-size: var(--dokk-ikoon);
    border-radius: clamp(6px, 1.4vw, 10px);
    /* materjal (geel) on sisu-kihis koos .kuul-iga, vt "kiirteed" */
    transition: translate .14s ease, scale .14s ease, --kiil 0s;
    --transition-reduced: none;
  }
  .dokk .ruut svg { inline-size: calc(var(--dokk-ikoon) * .6); block-size: calc(var(--dokk-ikoon) * .6); }
  .dokk a:focus-visible .ruut {
    translate: 0 -6px;
    --kiil: 130%;
    transition: translate .14s ease, scale .14s ease, --kiil .75s cubic-bezier(.45, .05, .4, 1);
  }
  /* jooksva rakenduse täpp — märgib praegust lehte */
  .dokk .taip {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 5px; block-size: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #7f96ad);
    box-shadow: 0 0 4px rgb(255 255 255 / .95);
  }
  .dokk .nimi {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }

}

/* ════════════════════════════════════════════════════════════════ 4. SISU */
@layer sisu {

  /* Konteiner on SISUVEERG, mitte aken. Aken on lukus 62rem = 992px peale,
     nii et @container aken (width >= 70rem) ei saaks kunagi tõene olla ja
     veeriseviited ei ilmuks mitte kunagi — vaikselt. */
  .sisu {
    container: sisu / inline-size;
    padding: 20px clamp(16px, 1rem + 1.4vw, 30px) 26px;
    min-inline-size: 0;
  }

  .juht { font-size: 15px; line-height: 1.6; color: #3a4046; }
  .sisu p + p { margin-block-start: 9px; }
  .sisu h2 { margin-block: 22px 8px; font-size: 15px; color: #2b3136; }
  .sisu h2 + p { color: var(--tekst-tuhm); margin-block-end: 8px; }
  .sisu h3 { margin-block: 16px 5px; font-size: 13.5px; color: #3d4348; }
  .sisu ul:not([class]), .sisu ol:not([class]) { margin-block: 8px; padding-inline-start: 1.5em; }
  .sisu ul:not([class]) li + li, .sisu ol:not([class]) li + li { margin-block-start: 3px; }

  .ikoon { inline-size: 1.15em; block-size: 1.15em; fill: currentColor; vertical-align: -.2em; flex: none; }

  /* ── tabelivaade ───────────────────────────────────────────────────────── */
  .tabel { border: 1px solid var(--joon); border-radius: 4px; overflow: clip; }
  .tabel .pais, .tabel a {
    display: grid;
    grid-template-columns: var(--veerud, 1fr 8rem 4.6rem);
    gap: 10px;
    align-items: center;
    padding: 5px 10px;
    font-size: 12.5px;
  }
  @container sisu (width < 34rem) {
    .tabel .pais, .tabel a { grid-template-columns: 1fr auto; }
    .tabel .teine { display: none; }
  }
  .tabel .pais {
    font-size: 11px;
    font-weight: 700;
    color: var(--pais-tuhm);
    text-shadow: var(--etsitud);
    background: linear-gradient(to bottom, #fdfdfd, #e9e9e9);
    border-block-end: 1px solid #ccd1d6;
  }
  .tabel a { min-block-size: 27px; color: var(--tekst); text-decoration: none; }
  .tabel li:nth-child(even) a { background: var(--triip); }
  .tabel .nimi { font-weight: 500; min-inline-size: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
  .tabel .teine, .tabel .kolmas { color: var(--tekst-tuhm); font-size: 11.5px; }
  .tabel .kolmas { text-align: end; font-variant-numeric: tabular-nums; }

  /* ── faililoend (punktiirjuhikuga) ─────────────────────────────────────── */
  .failid { border: 1px solid var(--joon); border-radius: 4px; overflow: clip; }
  .failid > li > a {
    display: grid;
    grid-template-columns: 1.35rem 1fr auto;
    gap: 8px;
    align-items: baseline;
    min-block-size: 27px;
    padding: 5px 10px;
    font-size: 12.5px;
    color: var(--tekst);
    text-decoration: none;
  }
  .failid > li:nth-child(even) > a { background: var(--triip); }
  .failid svg { inline-size: 15px; block-size: 15px; fill: currentColor; opacity: .7; align-self: center; }
  .failid .nimi { display: flex; align-items: baseline; gap: .4em; min-inline-size: 0; }
  .failid .nimi::after {
    content: "";
    flex: 1 1 auto;
    border-block-end: 1px dotted #c4cbd2;
    translate: 0 -.28em;
  }
  .failid .meta { color: var(--tekst-tuhm); font-size: 11.5px; font-variant-numeric: tabular-nums; }
  @container sisu (width < 30rem) {
    .failid > li > a { grid-template-columns: 1.35rem 1fr; }
    .failid .nimi::after { display: none; }
    .failid .meta { grid-column: 2; }
  }

  /* ── kaardid ───────────────────────────────────────────────────────────── */
  /* NB: .sisu-ga piiratud. Dokil on oma .dokk .ruut ja see kiht on hilisem
     kui kroom — piiramata .ruut kirjutaks doki ikoonid üle. */
  .sisu .ruut {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    gap: 10px;
    margin-block-start: 10px;
  }
  .kaart {
    padding: 11px 12px;
    border: 1px solid #d3d8dd;
    border-radius: 4px;
    background: linear-gradient(to bottom, #fff, #f4f6f9);
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / .09);
    transition: translate .15s ease, box-shadow .15s ease;
    --transition-reduced: none;
  }
  .kaart img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    margin-block-end: 9px;
    border: 1px solid var(--joon);
    border-radius: 4px;
    background: #f7f9fb;
  }
  .kaart h3 { margin-block: 0 3px; font-size: 13px; }
  .kaart h3 a { text-decoration: none; }
  .kaart p { font-size: 12px; color: var(--tekst-tuhm); }
  .kaart p.vaike { margin-block-start: 9px; }

  /* ── videod ───────────────────────────────────────────────────────────── */
  .videod {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
    gap: 14px;
    margin-block-start: 12px;
  }
  .video {
    display: grid;
    gap: 2px;
    padding: 9px 9px 11px;
    color: var(--tekst);
    text-decoration: none;
    border: 1px solid #d3d8dd;
    border-radius: 4px;
    background: linear-gradient(to bottom, #fff, #f4f6f9);
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / .09);
    transition: translate .15s ease, box-shadow .15s ease;
    --transition-reduced: none;
  }
  .video__pilt {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    margin-block-end: 8px;
    border-radius: 3px;
    overflow: clip;
    background: #1e2429;
  }
  .video__pilt img, .video__pilt iframe, video.video__pilt {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border: 0;
    display: block;
  }
  /* Aqua mängunupp pisipildi peal */
  .video__mang {
    position: absolute;
    inset-block-end: 8px;
    inset-inline-start: 8px;
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    border: 1px solid rgb(0 0 0 / .3);
    background:
      linear-gradient(to bottom, rgb(255 255 255 / .5) 0, rgb(255 255 255 / .05) 48%, rgb(0 0 0 / .06) 100%),
      linear-gradient(to bottom, #8dc0f5, #2f6ab4);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 2px 5px rgb(0 0 0 / .4);
  }
  .video__mang::after {
    content: "";
    inline-size: 0;
    block-size: 0;
    margin-inline-start: 3px;
    border-block: 7px solid transparent;
    border-inline-start: 11px solid #fff;
    filter: drop-shadow(0 1px 0 rgb(0 0 0 / .3));
  }
  .video__nimi { font-size: 12.5px; font-weight: 500; line-height: 1.35; }
  .video__meta { font-size: 11px; color: var(--tekst-tuhm); }
  .video--fail { margin: 0; }

  /* ── sildid ────────────────────────────────────────────────────────────── */
  .sildid { display: flex; flex-wrap: wrap; gap: 5px; margin-block-start: 8px; }
  .silt {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    font-size: 11px;
    color: #3d4348;
    text-shadow: var(--etsitud);
    border: 1px solid #b9bfc5;
    border-radius: 999px;
    background: linear-gradient(to bottom, #fff, #ececec);
    box-shadow: inset 0 1px 0 #fff;
  }
  .silt.keel { font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; }

  /* ── teade (Lion'i sheet) ──────────────────────────────────────────────── */
  .teade {
    margin-block: 14px;
    padding: 10px 13px;
    font-size: 12px;
    color: #4a4230;
    text-shadow: var(--etsitud);
    border: 1px solid #ddd0a0;
    border-radius: 4px;
    background: linear-gradient(to bottom, #fdf6df, #f7ecc9);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7);
  }
  .teade a { color: #8a6a12; }

  /* ── plaadid ───────────────────────────────────────────────────────────── */
  .plaadid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 8px;
    margin-block-start: 10px;
  }
  .plaat {
    padding: 9px;
    text-align: center;
    border: 1px solid #d3d8dd;
    border-radius: 5px;
    background: linear-gradient(to bottom, #fff, #f1f4f7);
    box-shadow: inset 0 1px 0 #fff;
  }
  .plaat b { display: block; font-size: 20px; font-weight: 300; color: #3a4046; }
  .plaat span { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-tuhm); }

  /* ── kiirteed (Lion'i Launchpad) ───────────────────────────────────────── */
  .kiirteed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 13px 8px;
    margin-block-start: 12px;
  }
  .kiirtee {
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--tekst);
    text-decoration: none;
  }
  /* Aqua geel, mitte plastik. Plastik on valgustatud ülalt: hele üleval,
     tume all. Geel on vastupidi: pealmine pool on klaasist läikekübar,
     selle all tume vöö ja põhjas valgus, mis tuleb läbi geeli tagasi
     (kaustika). Just see pööratud gradient teeb nupust "lakutava" —
     Aqua 2000. aasta tunnusmärk. Sinna peale üks teravate kiirtega
     peegeldussäde ja pisike teine säde kaustikas, nagu objektiivi
     kummitus.

     Kihid, pealt alla:
       ::after   säde (tähekujuline, virvendab harva)
       ::before  läikekübar (valge, allservas kumer kaar)
       svg       ikoon
       taust     läikejoon (hõljumisel) · kummitussäde · kaustika ·
                 servavari · põhivärv                                       */
  @property --kiil { syntax: "<percentage>"; inherits: false; initial-value: -30%; }

  .kuul {
    display: grid;
    place-items: center;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 22.5%;
    transition: translate .14s ease, --kiil 0s;
    --transition-reduced: none;
  }

  /* Sama geel kannab kolme kohta: avalehe kiirteed (.kuul), Lion'i dokk
     (.dokk .ruut) ja telefoni avaekraan (.avaekraan .rakendus__kest). Üks
     rakendus, üks ikoon. Suurus, raadius ja üleminekud jäävad igaühe enda
     kihti, siin on ainult materjal. Pseudoelementide mõõdud on protsentides,
     nii et geel skaleerub koos kastiga.

     --par-x / --par-y (-0,5 … 0,5) tulevad JS-ist: hiirega lauaarvutis,
     telefoni kallutamisega mobiilis. Valgus liigub nendega kaasa. Ilma
     JS-ita on nad nullis ja kõik seisab kenasti paigal. */
  .kuul, .dokk .ruut, .avaekraan .rakendus__kest {
    position: relative;
    isolation: isolate;
    color: #fff;
    /* serv on läbipaistev: selle all paistab kroomrõngas (viimane kiht,
       border-box), kõik muu on padding-box sees */
    border: 1.5px solid transparent;
    --kroomserv: conic-gradient(from 200deg,
      color-mix(in oklab, var(--k2, #2f6ab4) 55%, #000) 0deg,
      #fff 38deg,
      color-mix(in oklab, var(--k1, #6aa9ee) 65%, #fff) 70deg,
      color-mix(in oklab, var(--k2, #2f6ab4) 70%, #000) 140deg,
      #eaf6ff 196deg,
      #ffe6fa 222deg,
      #fff9d6 240deg,
      color-mix(in oklab, var(--k2, #2f6ab4) 55%, #000) 300deg,
      #fff 336deg,
      color-mix(in oklab, var(--k2, #2f6ab4) 55%, #000) 360deg);
    background:
      /* läikejoon: libiseb hõljumisel üle, muidu on ääre taga peidus */
      linear-gradient(115deg,
        transparent calc(var(--kiil) - 18%),
        rgb(255 255 255 / .6) var(--kiil),
        transparent calc(var(--kiil) + 18%)) padding-box,
      /* kummitussäde kaustikas, all paremal */
      radial-gradient(circle at 73% 80%, rgb(255 255 255 / .7) 0 .8px, rgb(255 255 255 / .18) 2px, transparent 4px) padding-box,
      /* kaustika: valgus tuleb läbi geeli põhja kaudu tagasi */
      radial-gradient(90% 62% at 50% 104%,
        color-mix(in oklab, var(--k1, #6aa9ee) 55%, #fff) 0%,
        color-mix(in oklab, var(--k1, #6aa9ee) 45%, transparent) 46%,
        transparent 76%) padding-box,
      /* servad tumenevad: annab ümaruse, mitte lame kleeps */
      radial-gradient(125% 115% at 50% 38%,
        transparent 60%,
        color-mix(in oklab, var(--k2, #2f6ab4) 68%, #000) 100%) padding-box,
      /* põhi: tume ülal (läike all), hele all */
      linear-gradient(to bottom,
        color-mix(in oklab, var(--k2, #2f6ab4) 82%, #000) 0%,
        var(--k2, #2f6ab4) 44%,
        var(--k1, #6aa9ee) 100%) padding-box,
      /* poleeritud kroomrõngas, kerge seebimulli vikerkaarega */
      var(--kroomserv) border-box;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .38),
      inset 0 -1px 1px rgb(255 255 255 / .4),
      inset 0 -7px 10px -5px color-mix(in oklab, var(--k1, #6aa9ee) 60%, #fff),
      0 1px 1px rgb(0 0 0 / .3),
      /* geel heidab oma värvi valgust, mitte halli varju */
      0 6px 14px -4px color-mix(in oklab, var(--k2, #2f6ab4) 72%, transparent);
  }

  /* läikekübar: pealmine pool, servast veidi sees, nii et värviline
     serv jääb ümberringi näha. Allserv on kumer kaar: kuppel, mitte aken.
     Sees on kuum laik, mis sõidab valgusega (hiir / kallutus) kaasa. */
  .kuul::before, .dokk .ruut::before, .avaekraan .rakendus__kest::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 4.5% 7.5% auto;
    block-size: 48%;
    border-radius: 20% 20% 50% 50% / 38% 38% 64% 64%;
    background:
      radial-gradient(38% 62% at calc(50% + var(--par-x, 0) * 90%) calc(24% + var(--par-y, 0) * 50%),
        rgb(255 255 255 / .6), transparent 72%),
      linear-gradient(to bottom,
        rgb(255 255 255 / .92), rgb(255 255 255 / .42) 55%, rgb(255 255 255 / .05));
    pointer-events: none;
  }

  /* Peegeldussäde koos anamorfse läätsekiirega: neljakiireline täht ja
     sellest läbi õhuke sinakas horisontaalne triip, mis ulatub üle ikooni
     ääre, nagu päris objektiivis. Nihkub valgusega kaasa. */
  .kuul::after, .dokk .ruut::after, .avaekraan .rakendus__kest::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset-block-start: 2%;
    inset-inline-start: -15.5%;
    inline-size: 90%;
    block-size: 37%;
    background:
      radial-gradient(circle, #fff 0 1.4px, rgb(255 255 255 / .55) 2.6px, transparent 5.5px),
      radial-gradient(21% 6% at 50% 50%, rgb(255 255 255 / .95), transparent),
      radial-gradient(3% 50% at 50% 50%, rgb(255 255 255 / .95), transparent),
      radial-gradient(50% 5% at 50% 50%, rgb(205 232 255 / .9), transparent);
    pointer-events: none;
    opacity: .8;
    scale: .8;
    translate: calc(var(--par-x, 0) * 9px) calc(var(--par-y, 0) * 6px);
    animation: kuul-sadelus 7s ease-in-out var(--sadelus-viide, 0s) infinite;
    --animation-reduced: none;
  }
  /* virvendus: harva ja hajutatult, mitte kõik korraga */
  @keyframes kuul-sadelus {
    0%, 84%, 100% { opacity: .8; scale: .8; }
    90%           { opacity: 1;  scale: 1.45; }
  }
  .kiirteed li:nth-child(2n) .kuul, .dokk li:nth-child(2n) .ruut,
  .avaekraan li:nth-child(2n) .rakendus__kest { --sadelus-viide: -2.4s; }
  .kiirteed li:nth-child(3n) .kuul, .dokk li:nth-child(3n) .ruut,
  .avaekraan li:nth-child(3n) .rakendus__kest { --sadelus-viide: -4.3s; }
  .kiirteed li:nth-child(5n) .kuul, .dokk li:nth-child(5n) .ruut,
  .avaekraan li:nth-child(5n) .rakendus__kest { --sadelus-viide: -5.7s; }

  /* ikoon on geeli sees: pehme vari alla, õhuke tume serv üles */
  .kuul svg, .dokk .ruut svg, .avaekraan .rakendus__kest svg {
    position: relative;
    z-index: 1;
    fill: currentColor;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / .38)) drop-shadow(0 -.5px 0 rgb(0 0 0 / .18));
  }
  .kuul svg { inline-size: 58%; block-size: 58%; }

  /* ── ÜLE VÕLLI ─────────────────────────────────────────────────────────
     Kõik see on lisa: ilma JS-ita on märgid ja peegeldus alles, aga säde,
     hüpe, käivitus ja värisemine on JS-i poolt tehtud. Vähendatud liikumise
     korral ei käivitu ükski neist. */

  /* märk: iOS-i punane number nurgas. Punane geel, valge serv, läige.
     Ilmub laadimisel väikese vetruva hüppega. */
  .teavitus {
    position: absolute;
    z-index: 6;
    inset-block-start: -8px;
    inset-inline-end: -9px;
    display: grid;
    place-items: center;
    min-inline-size: 22px;
    block-size: 22px;
    padding-inline: 6px;
    font: 700 12.5px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / .35);
    border: 2px solid #fff;
    border-radius: 999px;
    background:
      linear-gradient(to bottom, rgb(255 255 255 / .6), rgb(255 255 255 / .12) 48%, transparent 50%),
      radial-gradient(120% 90% at 50% 110%, #ff8a7a, transparent 70%),
      linear-gradient(to bottom, #f5554b, #c10b0f);
    box-shadow: 0 2px 4px rgb(0 0 0 / .45), 0 0 0 .5px rgb(0 0 0 / .25);
    animation: teavitus-ilmub .5s cubic-bezier(.3, 1.6, .5, 1) .5s both;
    --animation-reduced: none;
  }
  @keyframes teavitus-ilmub { from { scale: 0; } to { scale: 1; } }

  /* säde: pisikesed neljakiirelised tähed lendavad ikoonist välja
     (hiirega üle minnes ja käivitamisel). JS teeb ja koristab need.
     Valge säde valgel Lion'i aknal oleks nähtamatu, nii et iga ikoon
     sädeleb oma värvides, tumeda helendusega, ja iga teine täht on kuldne. */
  .sade {
    position: absolute;
    z-index: 5;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: var(--suurus, 8px);
    block-size: var(--suurus, 8px);
    margin: calc(var(--suurus, 8px) / -2);
    pointer-events: none;
    --s1: var(--k1, #6aa9ee);
    --s2: var(--k2, #2f6ab4);
    filter: drop-shadow(0 0 1px color-mix(in oklab, var(--s2) 75%, #000))
            drop-shadow(0 0 4px var(--s1));
    animation: sade-lend .75s cubic-bezier(.15, .7, .3, 1) var(--viide, 0s) both;
  }
  .sade:nth-of-type(even) { --s1: #ffe066; --s2: #d98a00; }
  .sade::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, #fff 18%, var(--s1) 55%, var(--s2));
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  }
  @keyframes sade-lend {
    0%   { transform: rotate(var(--nurk)) translateX(0) scale(.2); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: rotate(var(--nurk)) translateX(var(--kaugus)) scale(1) rotate(90deg); opacity: 0; }
  }

  /* Leopard'i dokk: ikoonid seisavad klaaspõrandal ja peegelduvad selles.
     -webkit-box-reflect on Chromiumis ja Safaris; Firefox jätab lihtsalt
     peegelduse ära. */
  .dokk .ruut {
    -webkit-box-reflect: below 2px linear-gradient(transparent 58%, rgb(255 255 255 / .28));
  }

  /* dokiikoon hüppab käivitamisel, nagu Mac OS X-is rakenduse avanemisel */
  .dokk a.hyppab .ruut {
    animation: doki-hype .72s cubic-bezier(.3, .55, .45, 1) both;
    --animation-reduced: none;
  }
  @keyframes doki-hype {
    0%   { translate: 0 0; }
    28%  { translate: 0 -24px; }
    54%  { translate: 0 0; }
    74%  { translate: 0 -10px; }
    100% { translate: 0 0; }
  }

  /* ── MUUSIKAMÄNGIJA: Lion'i minimängija ─────────────────────────────────
     Eraldi väike aken Finderi paremal küljel, iTunes 10 vaimus: ümarad
     hõbedased nupud, LCD-ekraan, Cover Flow must lava peegeldusega ja
     triibuline lugude loend. Sisemine paigutus sõltub mängija ENDA laiusest
     (konteineripäring): kitsana on ta püstine paneel, laiana iTunes'i
     horisontaalne minimängija riba akna kohal.

     Paigutus lehel:
       < 44rem   mängijat ei ole (telefonis on selle asemel vidin)
       44–60rem  riba akna kohal
       ≥ 60rem   paneel akna kõrval
     Esseelehel (72rem aken, veeriseviited) tuleb paneel alles ≥ 89rem,
     muidu sööks ta veeriseviidetelt ruumi ära. Seni on ta riba akna kohal. */
  .mangija { display: none; }

  @media (width >= 44rem) {
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    body > .aken { inline-size: 100%; }
    .mangija {
      display: block;
      order: -1;
      inline-size: 100%;
      max-inline-size: 62rem;
    }
    .aken--lugemine ~ .mangija { max-inline-size: 72rem; }
  }
  @media (width >= 60rem) {
    body:not(:has(> .aken--lugemine)) {
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      gap: 16px;
    }
    body:not(:has(> .aken--lugemine)) > .aken { flex: 0 1 62rem; min-inline-size: 0; margin-inline: 0; }
    body:not(:has(> .aken--lugemine)) > .mangija {
      order: 0;
      flex: none;
      inline-size: 14rem;
      position: sticky;
      inset-block-start: calc(var(--menyy) + 22px);
    }
  }
  @media (width >= 89rem) {
    body:has(> .aken--lugemine) {
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      gap: 16px;
    }
    body:has(> .aken--lugemine) > .aken { flex: 0 1 72rem; min-inline-size: 0; margin-inline: 0; }
    body:has(> .aken--lugemine) > .mangija {
      order: 0;
      flex: none;
      inline-size: 14rem;
      position: sticky;
      inset-block-start: calc(var(--menyy) + 22px);
    }
  }

  .mangija {
    container: mangija / inline-size;
    border-radius: 6px;
    background: var(--sisu);
    box-shadow: var(--vari-aken);
    overflow: clip;
    font-size: 11px;
  }
  .mangija__raam { display: flex; flex-direction: column; }

  /* tiitliriba: sama kroom mis Finderil, ainult väiksem */
  .mangija__tiitel {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 22px;
    padding: 4px 9px;
    background: linear-gradient(to bottom, var(--kroom-1) 0, #ededed 52%, var(--kroom-2) 100%);
    box-shadow: inset 0 1px 0 #fff;
  }
  .mangija__tiitel .foor > * { inline-size: 11px; block-size: 11px; cursor: default; }
  .mangija__tiitel h2 {
    flex: 1;
    margin-inline-end: 50px;       /* tuled vasakul, pealkiri keskel */
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #3d4348;
    text-shadow: var(--etsitud);
  }

  /* tööriistariba: nupud, helitugevus ja LCD samal kroomil */
  .mangija__juhtimine {
    padding: 2px 10px 10px;
    background: linear-gradient(to bottom, var(--kroom-2) 0, #cfcfcf 100%);
    border-block-end: 1px solid var(--kroom-serv);
  }
  .mangija__nupuriba {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-block: 4px 8px;
  }
  .mangija__nupud { display: flex; align-items: center; gap: 3px; }

  /* iTunes 10 nupp: ümar hõbedane klaas, must glüüf */
  .m-nupp {
    display: grid;
    place-items: center;
    inline-size: 26px;
    block-size: 26px;
    padding: 0;
    color: #25292d;
    border: 1px solid #6c7278;
    border-radius: 50%;
    background: linear-gradient(to bottom, #fdfdfd 0, #e6e6e6 48%, #cdcdcd 52%, #ececec 100%);
    box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgb(0 0 0 / .22);
    cursor: pointer;
  }
  .m-nupp--suur { inline-size: 32px; block-size: 32px; }
  .m-nupp:active {
    background: linear-gradient(to bottom, #bfc4c9, #dfe2e5);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / .4);
  }
  .m-nupp:focus-visible { outline: 2px solid var(--valik-2); outline-offset: 1px; }
  .m-ikoon { inline-size: 12px; block-size: 12px; fill: currentColor; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .7)); }
  .m-nupp--suur .m-ikoon { inline-size: 14px; block-size: 14px; }
  .m-ikoon--paus { display: none; }
  .mangib .m-ikoon--mangi { display: none; }
  .mangib .m-ikoon--paus { display: block; }

  .mangija__heli { display: flex; align-items: center; gap: 3px; color: #535b62; }
  .m-heli-ikoon { inline-size: 12px; block-size: 12px; fill: currentColor; flex: none; }
  .m-heli { inline-size: 62px; }

  /* Lion'i liugur: õhuke süvend, valge nupp. --taidetud tuleb JS-ist. */
  .m-heli, .m-kulg {
    -webkit-appearance: none;
    appearance: none;
    block-size: 14px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    --taidetud: 0%;
  }
  .m-heli { --taidetud: 80%; }
  .m-heli::-webkit-slider-runnable-track, .m-kulg::-webkit-slider-runnable-track {
    block-size: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, #5f6b78 var(--taidetud), #d6dbe0 var(--taidetud));
    box-shadow: inset 0 1px 1px rgb(0 0 0 / .35);
  }
  .m-heli::-moz-range-track, .m-kulg::-moz-range-track {
    block-size: 4px;
    border-radius: 2px;
    background: #d6dbe0;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / .35);
  }
  .m-heli::-moz-range-progress, .m-kulg::-moz-range-progress {
    block-size: 4px;
    border-radius: 2px;
    background: #5f6b78;
  }
  .m-heli::-webkit-slider-thumb, .m-kulg::-webkit-slider-thumb {
    -webkit-appearance: none;
    inline-size: 11px;
    block-size: 11px;
    margin-block-start: -3.5px;
    border: 1px solid #7d8388;
    border-radius: 50%;
    background: linear-gradient(to bottom, #fff, #dcdcdc);
    box-shadow: 0 1px 1px rgb(0 0 0 / .25);
  }
  .m-heli::-moz-range-thumb, .m-kulg::-moz-range-thumb {
    inline-size: 9px;
    block-size: 9px;
    border: 1px solid #7d8388;
    border-radius: 50%;
    background: linear-gradient(to bottom, #fff, #dcdcdc);
  }
  .m-heli:focus-visible, .m-kulg:focus-visible { outline: 2px solid var(--valik-2); outline-offset: 2px; }

  /* LCD: iTunes'i olekuekraan. Kahvatu, süvendatud, keskjoondatud. */
  .lcd {
    padding: 5px 8px 6px;
    text-align: center;
    color: #2d322c;
    border: 1px solid #969d90;
    border-radius: 4px;
    background: linear-gradient(to bottom, #f4f7ef, #dfe5d8);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / .2), 0 1px 0 rgb(255 255 255 / .75);
  }
  .lcd__nimi, .lcd__artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lcd__nimi { font-size: 11.5px; font-weight: 700; }
  .lcd__artist { font-size: 10.5px; color: #4d544b; }
  .lcd__kulg {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-block-start: 3px;
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
  }
  .lcd .m-kulg { flex: 1; min-inline-size: 0; }
  /* iTunes'i kerimisnupp oli väike tume romb */
  .lcd .m-kulg::-webkit-slider-runnable-track {
    block-size: 5px;
    border: 1px solid #5f665c;
    border-radius: 3px;
    box-shadow: none;
    background: linear-gradient(to right, #474e45 var(--taidetud), rgb(255 255 255 / .4) var(--taidetud));
  }
  .lcd .m-kulg::-webkit-slider-thumb {
    inline-size: 7px;
    block-size: 7px;
    margin-block-start: -2px;
    border: 0;
    border-radius: 1px;
    background: #2d322c;
    box-shadow: none;
    rotate: 45deg;
  }
  .mangija.viga .lcd__nimi { color: #a3261c; }

  /* Cover Flow: must lava, kaas peegeldub läikivas põrandas */
  .mangija__kaas {
    margin: 0;
    padding: 14px 18px 26%;
    background:
      radial-gradient(120% 60% at 50% 0%, #4a4d52, transparent 70%),
      linear-gradient(to bottom, #2b2d31, #0c0d0f);
  }
  .mangija__kaas img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    border-radius: 2px;
    box-shadow: 0 3px 10px rgb(0 0 0 / .6);
    -webkit-box-reflect: below 1px linear-gradient(transparent 68%, rgb(255 255 255 / .3));
  }

  /* lugude loend: Lion'i tabel, triibud, praegune rida sinine */
  .mangija__palad { border-block-start: 1px solid #1f2124; }
  .mangija__palad a {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    color: var(--tekst);
    text-decoration: none;
  }
  /* triip ei tohi mängiva loo sinist üle kirjutada (paarisrida võitis spetsiifilisusega) */
  .mangija__palad li:nth-child(even) a:not([aria-current="true"]) { background: var(--triip); }
  .mangija__palad a[aria-current="true"] {
    color: #fff;
    text-shadow: 0 -1px 0 rgb(0 0 0 / .3);
    background: linear-gradient(to bottom, var(--valik-1), var(--valik-2));
  }
  .mangija__palad a:focus-visible { outline: 2px solid var(--valik-2); outline-offset: -2px; }
  .m-nr { justify-self: end; color: var(--tekst-tuhm); font-variant-numeric: tabular-nums; }
  .m-kolar { display: none; inline-size: 12px; block-size: 12px; justify-self: end; fill: currentColor; }
  /* mängiva loo ees on kõlar, nagu iTunes'is */
  .mangib a[aria-current="true"] .m-nr { display: none; }
  .mangib a[aria-current="true"] .m-kolar { display: block; }
  .mangija__palad a[aria-current="true"] .m-nr { color: rgb(255 255 255 / .85); }
  .m-nimi { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .m-kestus { color: var(--tekst-tuhm); font-variant-numeric: tabular-nums; }
  .mangija__palad a[aria-current="true"] .m-kestus { color: rgb(255 255 255 / .85); }

  /* Laiana (riba akna kohal): iTunes 10 horisontaalne minimängija */
  @container mangija (width >= 30rem) {
    .mangija__raam {
      flex-direction: row;
      align-items: center;
      gap: 12px;
      padding: 6px 12px;
      background: linear-gradient(to bottom, var(--kroom-1) 0, #e4e4e4 50%, var(--kroom-2) 100%);
      box-shadow: inset 0 1px 0 #fff;
    }
    .mangija__tiitel { padding: 0; background: none; box-shadow: none; }
    .mangija__tiitel h2 {
      position: absolute;
      inline-size: 1px; block-size: 1px;
      overflow: hidden; clip-path: inset(50%);
      white-space: nowrap;
    }
    .mangija__kaas { order: 1; flex: none; padding: 0; background: none; }
    .mangija__kaas img {
      inline-size: 40px;
      box-shadow: 0 1px 3px rgb(0 0 0 / .45);
      -webkit-box-reflect: none;
    }
    .mangija__juhtimine {
      order: 2;
      flex: 1;
      min-inline-size: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0;
      background: none;
      border: 0;
    }
    .mangija__nupuriba { display: contents; }
    .mangija__nupud { order: 1; }
    .lcd { order: 2; flex: 1; min-inline-size: 0; }
    .mangija__heli { order: 3; }
    .mangija__palad { display: none; }
    /* viide artisti reale, et riba jääks madalaks */
    .lcd__artist, .lcd__allikas { display: inline; }
    .lcd__allikas::before { content: " · "; color: #4d544b; }
  }

  /* SoundCloudi tingimus: üleslaadija ja SoundCloud, nähtava lingiga loo lehele */
  .lcd__allikas { margin-block-start: 1px; font-size: 9.5px; line-height: 1.3; }
  .lcd__link { color: #4d544b; text-decoration: none; }
  .lcd__link:hover, .lcd__link:focus-visible { color: #ff5500; text-decoration: underline; }

  /* SoundCloudi raam, mis heli teeb: alati peidus ekraani all, nähtavaks ei
     tule kunagi. Meie nupud juhivad seda. Mitte display:none, sest peidetud
     raami ei pruugi brauser mängida lasta. */
  .sc-kiht {
    position: fixed;
    z-index: -1;
    inset: auto auto 0 0;
    inline-size: 320px;
    block-size: 166px;
    translate: 0 calc(100% + 40px);
    pointer-events: none;
  }
  .sc-kiht iframe { display: block; inline-size: 100%; block-size: 166px; border: 0; }

  /* lugemisrežiimis ja trükis ei ole mängijat */
  body.loe .mangija { display: none; }

  /* ── pildi kohahoidja ──────────────────────────────────────────────────── */
  .pilt-koht {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    padding: 10px;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tekst-tuhm);
    border: 1px dashed var(--joon);
    border-radius: 4px;
    background:
      repeating-linear-gradient(45deg, rgb(0 0 0 / .05) 0 1px, transparent 1px 10px),
      #f7f9fb;
  }

  /* ── õmmeldud nahkpaneel (2011 kalendri maneer) ────────────────────────── */
  .nahk {
    position: relative;
    margin-block-start: 22px;
    padding: 16px 18px;
    border-radius: 6px;
    color: #f2ece1;
    text-shadow: 0 1px 1px rgb(0 0 0 / .5);
    background-color: #6b4a32;
    background-image:
      repeating-linear-gradient(37deg, rgb(255 255 255 / .028) 0 2px, transparent 0 5px),
      repeating-linear-gradient(-52deg, rgb(0 0 0 / .05) 0 2px, transparent 0 6px),
      radial-gradient(120% 90% at 30% 0%, rgb(255 220 180 / .18), transparent 60%),
      linear-gradient(to bottom, #7a5638, #4e341f);
    box-shadow: inset 0 1px 0 rgb(255 226 190 / .28), 0 4px 12px rgb(0 0 0 / .35);
  }
  .nahk::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1.5px dashed rgb(245 232 210 / .55);
    border-radius: 4px;
    pointer-events: none;
  }
  .nahk h2 { margin-block: 0 6px; font-size: 14px; color: #fff6e6; }
  .nahk p { font-size: 12.5px; color: #eadfcd; }
  .nahk a { color: #ffd9a3; }

  /* ── jalus (akna sees, mitte linase peal) ──────────────────────────────── */
  .jalus {
    margin-block-start: 24px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--joon);
    font-size: 11.5px;
    color: var(--tekst-tuhm);
  }
  .nupurida { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
  .nupurida img { image-rendering: pixelated; border: 1px solid var(--joon); border-radius: 2px; }
  .nupu-koht {
    display: grid;
    place-items: center;
    inline-size: 88px;
    block-size: 31px;
    font-size: 10px;
    color: var(--tekst-tuhm);
    border: 1px dashed var(--joon);
    border-radius: 2px;
    background: #f4f6f8;
  }

  /* ── artikkel ──────────────────────────────────────────────────────────── */
  /* 13px on kroomi suurus, mitte proosa suurus. Pikk tekst hüppab 15px peale. */
  .artikkel {
    font-size: 15px;
    line-height: 1.62;
    max-inline-size: var(--mootlaius);
    margin-inline: auto;
  }
  .artikkel > * + * { margin-block-start: 1.05em; }
  .artikkel h2 { margin-block-start: 1.7em; font-size: 17px; color: #2b3136; }
  .artikkel h3 { margin-block-start: 1.4em; font-size: 15px; color: #3d4348; }
  .artikkel .juht { font-size: 16px; }

  .artikkel blockquote {
    margin-inline: 0;
    padding-inline-start: 1em;
    border-inline-start: 3px solid var(--valik-2);
    font-style: italic;
    color: var(--tekst-tuhm);
  }
  .artikkel figure { margin-inline: 0; }
  .artikkel figcaption { margin-block-start: 6px; font-size: 11.5px; color: var(--tekst-tuhm); }

  .artikkel table { inline-size: 100%; border-collapse: collapse; font-size: 13px; }
  .artikkel th {
    padding: 5px 9px;
    text-align: start;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pais-tuhm);
    text-shadow: var(--etsitud);
    background: linear-gradient(to bottom, #fdfdfd, #e9e9e9);
    border-block-end: 1px solid #ccd1d6;
  }
  .artikkel td { padding: 5px 9px; border-block-end: 1px solid var(--joon); }
  .artikkel tbody tr:nth-child(even) td { background: var(--triip); }

  .artikkel pre {
    padding: 10px 12px;
    overflow-x: auto;
    font: 11.5px/1.5 var(--mono);
    background: #f4f6f8;
    border: 1px solid var(--joon);
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / .12);
  }
  .artikkel code:not(pre code) {
    padding: .1em .35em;
    font: .88em var(--mono);
    background: #eef1f4;
    border: 1px solid var(--joon);
    border-radius: 3px;
  }
  .artikkel hr {
    block-size: 0;
    border: 0;
    border-block-start: 1px solid var(--joon);
    box-shadow: 0 1px 0 #fff;
  }

  /* veeriseviide: kitsal äärejoonega lõik, laial päris veeris */
  .veeris {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tekst-tuhm);
    padding-inline-start: .8rem;
    border-inline-start: 2px solid var(--joon);
    margin-block: .6rem;
  }
  /* Tufte-laadne veeris. Lävi on sisuveeru, mitte akna järgi: 64ch mõõt
     (~620px) + 12rem märkus (192px) + vahe vajab ~838px. Sellepärast on
     esseeleht .aken--lugemine (72rem). */
  @container sisu (width >= 52rem) {
    .artikkel { position: relative; margin-inline: 0; }
    .veeris {
      position: absolute;
      inline-size: 12rem;
      inset-inline-start: calc(100% + 1.6rem);
      margin-block-start: -1.4em;
      padding-inline-start: .7rem;
    }
  }

  /* joonealused märkused */
  /* Reset võtab klassiga loenditelt markerid, aga joonealused märkused
     VAJAVAD numbrit — muidu ei saa [12] ja märkust kokku viia. */
  .margid {
    font-size: 12px;
    line-height: 1.5;
    color: var(--tekst-tuhm);
    list-style: decimal;
    padding-inline-start: 2.4em;
  }
  .margid li + li { margin-block-start: 4px; }
  /* Tagasilink peab ümbritsevast tekstist eristuma ka ilma värvita:
     allakriipsutus jääb alles, ainult kaugus lisandub. */
  .margid a[href^="#v"] { margin-inline-start: .35em; }
  .margid li { padding: 2px 4px; border-radius: 3px; }
  .margid li:target { background: rgb(106 169 238 / .22); }
  a.viide {
    font-size: 10px;
    vertical-align: super;
    padding-inline: .12em;
    text-decoration: none;
    color: var(--link);
  }
}

/* ══════════════════════════════════════════════════════════ 5. LIIKUMINE */
/* ═════════════════════════════════════════ 5. iPod TOUCH AVAEKRAAN (mobiil) */
/* Kitsal ekraanil ei ole avalehel maandumislehte: esimene ekraan on
   rakenduste ruudustik, nagu iPod Touchil. Lion-i aken on endiselt olemas,
   aga peidus — "Minust" rakendus avab selle.

   Avamine ja sulgemine on :target, mitte JS: "Minust" viitab #sisu peale,
   kodunupp #avaekraan peale. Ilma skriptita töötab kõik täpselt sama moodi.

   Peitmine on @supports selector(:has(*)) sees MEELEGA: kui brauser :has()
   ei oska, ei peideta midagi ja avaekraan jääb lihtsalt lehe etteotsa. Sisu
   ei saa kaduda selle taha, mida brauser lahti teha ei oska. */
@layer ipod {

  .avaekraan, .kodutriip { display: none; }

  @media (width < 44rem) {

    /* ── kiht ise ────────────────────────────────────────────────────────── */
    .avaleht .avaekraan {
      --kest: clamp(48px, 15vw, 58px);
      display: flex;
      flex-direction: column;
      min-block-size: 100dvb;
      /* söö ära keha varu, et ekraan ulatuks servast servani */
      margin: calc(-1 * (var(--menyy) + 22px)) -16px calc(-1 * (var(--dokk) + 18px));
      color: #fff;
      /* .taust (fotod, z-index -2) jääb tapeediks; see on ainult tumendus,
         et valged sildid loeks. Mullid (z-index -1) jäävad ka näha. */
      background: linear-gradient(to bottom, rgb(8 14 24 / .34), rgb(6 11 20 / .62));
      -webkit-tap-highlight-color: transparent;
    }

    @supports selector(:has(*)) {
      .avaleht .avaekraan { position: fixed; inset: 0; z-index: 80; margin: 0; }

      .avaleht:not(:has(#sisu:target)) {
        padding: 0;
        min-block-size: 0;
      }
      .avaleht:not(:has(#sisu:target)) .menyyriba,
      .avaleht:not(:has(#sisu:target)) .aken,
      .avaleht:not(:has(#sisu:target)) .vahelejata { display: none; }

      .avaleht:has(#sisu:target) .avaekraan { display: none; }
      .avaleht:has(#sisu:target) { padding-block-end: calc(var(--dokk) + 18px); }

      /* rakendus avaneb, nagu iOS-is: kiire suumimine. Puhas CSS. */
      .avaleht:has(#sisu:target) .aken {
        animation: rakendus-avaneb .26s ease-out;
        --animation-reduced: none;
      }
      @keyframes rakendus-avaneb {
        from { opacity: 0; scale: .88; }
        to   { opacity: 1; scale: 1; }
      }
    }

    /* ── olekuriba ───────────────────────────────────────────────────────── */
    .avaekraan .olekuriba {
      flex: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      block-size: 20px;
      padding-inline: 7px;
      padding-block-start: env(safe-area-inset-top, 0px);
      box-sizing: content-box;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 1px rgb(0 0 0 / .55);
      background: linear-gradient(to bottom,
        rgb(0 0 0 / .66), rgb(0 0 0 / .40) 55%, rgb(0 0 0 / .58));
      box-shadow: inset 0 -1px 0 rgb(255 255 255 / .12);
    }
    .avaekraan .olekuriba__pool {
      display: flex;
      align-items: center;
      gap: 5px;
      flex: 1 1 0;
      min-inline-size: 0;
    }
    .avaekraan .olekuriba__pool--parem { justify-content: flex-end; }
    .avaekraan .olekuriba__kell { flex: none; font-variant-numeric: tabular-nums; }
    .avaekraan .kandja,
    .avaekraan .protsent { font-weight: 400; font-size: 10px; opacity: .92; }

    /* wifi: kolm kaart ja punkt, puhas gradient */
    .avaekraan .wifi {
      flex: none;
      inline-size: 14px;
      block-size: 10px;
      background:
        radial-gradient(circle at 50% 100%, #fff 0 13%, transparent 14%),
        radial-gradient(circle at 50% 100%, transparent 0 34%, #fff 35% 48%, transparent 49%),
        radial-gradient(circle at 50% 100%, transparent 0 68%, #fff 69% 82%, transparent 83%);
    }
    .avaekraan .aku {
      position: relative;
      flex: none;
      inline-size: 24px;
      block-size: 11px;
      padding: 1.5px;
      border: 1px solid rgb(255 255 255 / .85);
      border-radius: 3px;
      margin-inline-end: 3px;
    }
    .avaekraan .aku::after {
      content: "";
      position: absolute;
      inset-inline-start: 100%;
      inset-block-start: 3px;
      inline-size: 2px;
      block-size: 3px;
      background: rgb(255 255 255 / .85);
      border-radius: 0 1px 1px 0;
    }
    .avaekraan .aku b {
      display: block;
      block-size: 100%;
      inline-size: 100%;
      background: #fff;
      border-radius: 1px;
    }

    /* ── kaks ekraani ─────────────────────────────────────────────────────
       Horisontaalne haardekerimine, nagu iPod Touchil. Lehepunktid all on
       päris lingid (#ekraan-1, #ekraan-2), nii et lehte saab vahetada ka
       ilma JS-ita ja klaviatuurilt. JS teeb ainult seda, et punkt liigub
       sõrmega kaasa. */
    .avaekraan .ekraanid {
      flex: 1 1 auto;
      min-block-size: 0;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    .avaekraan .ekraanid::-webkit-scrollbar { display: none; }
    .avaekraan .ekraanid:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
    .avaekraan .ekraan {
      flex: 0 0 100%;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
    }
    .avaekraan .ekraan::-webkit-scrollbar { display: none; }

    /* Read algavad ülalt ja vahe kasvab ekraaniga: iOS jätab väheste
       ikoonide korral alla tapeeti, mitte ei venita ridu üle terve ekraani. */
    .avaekraan .ruudustik {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-items: center;
      align-content: start;
      --vahe: clamp(2px, 1.4vw, 10px);
      gap: clamp(14px, 4.4vh, 38px) var(--vahe);
      padding: clamp(12px, 4vh, 34px) clamp(6px, 2.6vw, 16px) 12px;
    }
    /* väga madal ekraan (iPod Touch 480 px): vidin + kaks rida peavad mahtuma
       ilma kerimiseta, nii et vahed tõmbuvad veidi kokku */
    @media (height < 34rem) {
      .avaekraan .ruudustik { row-gap: 12px; padding-block-start: 12px; }
    }

    /* ── rakendus ────────────────────────────────────────────────────────── */
    .avaekraan .rakendus {
      display: grid;
      justify-items: center;
      gap: 5px;
      text-decoration: none;
      color: #fff;
      transition: scale .12s ease;
      --transition-reduced: none;
    }
    .avaekraan .rakendus:active { scale: .9; }
    /* Lingi lohistamine käivitab brauseri enda lohistuse ja see TÜHISTAB
       pointer-sündmused (pointercancel). Ikoone ega kodutriipu ei lohistata. */
    .avaekraan .rakendus, .kodutriip {
      -webkit-user-drag: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .avaekraan .rakendus:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 3px;
      border-radius: 12px;
    }

    /* Plaadi materjal (geel, kroomrõngas, läige, säde) on sisu-kihis koos
       .kuul-i ja doki ikoonidega. Siin on ainult suurus ja kuju. */
    .avaekraan .rakendus__kest {
      display: grid;
      place-items: center;
      inline-size: var(--kest);
      aspect-ratio: 1;
      /* iOS 5 kumer ruut, mitte ring: 22,3 % küljest */
      border-radius: 22.3%;
    }
    .avaekraan .rakendus__kest svg { inline-size: 58%; block-size: 58%; }
    /* veebiklipp: iOS-i veebiklipi ikoon oli lehe enda pilt. Läige, säde ja
       kroomrõngas tulevad ikka peale, aga neutraalses toonis. */
    .avaekraan .rakendus--klipp { --k1: #eef2f6; --k2: #7d8894; }
    .avaekraan .rakendus--klipp .rakendus__kest {
      background: var(--pilt) top center / cover no-repeat padding-box,
                  var(--kroomserv) border-box #fff;
    }

    /* Silt on üks rida, nagu iOS-is: kahele reale murduv silt lõhkus
       ridade rütmi. Üle ääre jääv osa saab kolm punkti. */
    .avaekraan .rakendus__silt {
      max-inline-size: 100%;
      font-size: 11px;
      line-height: 1.25;
      text-align: center;
      text-shadow: 0 1px 2px rgb(0 0 0 / .9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ── lehepunktid ─────────────────────────────────────────────────────
       Nähtav punkt on 6 px, aga puutepind 24 px: sõrm peab tabama. */
    .avaekraan .punktid {
      flex: none;
      display: flex;
      justify-content: center;
      gap: 2px;
      padding-block: 2px 4px;
    }
    .avaekraan .punktid a {
      display: grid;
      place-items: center;
      inline-size: 24px;
      block-size: 24px;
      border-radius: 50%;
    }
    .avaekraan .punktid a::after {
      content: "";
      inline-size: 6px;
      block-size: 6px;
      border-radius: 50%;
      background: rgb(255 255 255 / .3);
      box-shadow: inset 0 1px 1px rgb(0 0 0 / .35);
      transition: background .2s ease;
      --transition-reduced: none;
    }
    .avaekraan .punktid a.on::after { background: rgb(255 255 255 / .95); }
    .avaekraan .punktid a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

    /* ── dokk ────────────────────────────────────────────────────────────── */
    .avaekraan .ios-dokk {
      flex: none;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
      padding: 10px clamp(6px, 2.6vw, 16px);
      padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
      background: linear-gradient(to bottom,
        rgb(255 255 255 / .26), rgb(255 255 255 / .08) 42%, rgb(0 0 0 / .14));
      border-block-start: 1px solid rgb(255 255 255 / .3);
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .24);
      backdrop-filter: blur(9px) saturate(1.3);
    }
    .avaekraan .ios-dokk .rakendus__silt { font-size: 10.5px; }

    /* ── kodutriip ────────────────────────────────────────────────────────
       Mobiilis on see üks kahest teest avaekraanile tagasi (teine on punane
       tuli tiitliribal), nii et ta on igal lehel.

       Vajutus ja ülespühkimine teevad sama asja. Element on tavaline <a>,
       nii et ilma JS-ita jääb vajutus alles. */
    .kodutriip {
      position: fixed;
      inset: auto 0 0;
      z-index: 58;
      display: flex;
      align-items: center;
      justify-content: center;
      block-size: 30px;
      padding-block-end: env(safe-area-inset-bottom, 0px);
      /* püstine liikumine peab jõudma meieni, mitte lehe kerimisse */
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
      background: linear-gradient(to bottom,
        rgb(18 24 32 / 0), rgb(18 24 32 / .34) 46%, rgb(12 17 24 / .62));
      backdrop-filter: blur(6px);
    }
    .kodutriip__pulk {
      inline-size: min(42%, 150px);
      block-size: 5px;
      border-radius: 999px;
      background: rgb(255 255 255 / .82);
      box-shadow: 0 0 6px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .9);
      transition: translate .18s ease, inline-size .18s ease;
      --transition-reduced: none;
    }
    .kodutriip:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
    .kodutriip:focus-visible .kodutriip__pulk,
    .kodutriip:active .kodutriip__pulk { translate: 0 -2px; inline-size: min(52%, 180px); }

    /* Pühkimise ajal tõmbub leht kokku, nagu iOS-is. --kodu-veel on 0..1 ja
       tuleb JS-ist; ilma JS-ita jääb ta nulli ja siin ei juhtu midagi. */
    .aken, .avaekraan .ekraanid {
      scale: calc(1 - .07 * var(--kodu-veel, 0));
      opacity: calc(1 - .45 * var(--kodu-veel, 0));
      transform-origin: 50% 40%;
    }
    .kodu-vabastas .aken, .kodu-vabastas .avaekraan .ekraanid {
      transition: scale .22s ease, opacity .22s ease;
      --transition-reduced: none;
    }

    /* ── muusikavidin (iOS 14 keskmine suurus, iOS 17 interaktiivne) ───────
       Neli ikooni lai ja kaks rida kõrge, servad joonduvad ikoonide
       servadega, mitte ruudustiku lahtritega. Taust on albumi kaas
       suureks uduseks venitatuna ja valge matt klaas peal: iOS-i vidin võtab
       oma värvi sisust. */
    .avaekraan .vidin {
      grid-column: 1 / -1;
      justify-self: stretch;
      display: grid;
      justify-items: center;
      gap: 5px;
      /* vahe ikooni serva ja lahtri serva vahel: (lahter - ikoon) / 2 */
      --taane: calc(((100% - 3 * var(--vahe)) / 4 - var(--kest)) / 2);
    }
    .avaekraan .vidin__kaart {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      box-sizing: border-box;
      inline-size: calc(100% - 2 * var(--taane));
      /* min, mitte fikseeritud: fikseeritud kõrgusega pigistas madalal telefonil
         (375×667) sisu kokku ja nupud jäid 6 px kaugusele alumisest servast */
      min-block-size: clamp(134px, 19svh, 156px);
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: 1fr auto auto;
      grid-template-areas: "kaas tekst" "kulg kulg" "nupud nupud";
      column-gap: 12px;
      row-gap: 4px;
      padding: 13px 15px 6px;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #1c1c1e;
      text-align: start;
      border-radius: 22px;
      background: rgb(255 255 255 / .58);
      box-shadow: 0 8px 24px rgb(0 0 0 / .35), inset 0 0 0 .5px rgb(255 255 255 / .7);
      backdrop-filter: blur(22px) saturate(1.8);
    }
    .avaekraan .vidin__udu {
      position: absolute;
      inset: -30%;
      z-index: -1;
      inline-size: 160%;
      block-size: 160%;
      max-inline-size: none;
      object-fit: cover;
      /* Udu on kaardi enda tausta PEAL (z-index -1 isoleeritud kaardis),
         nii et see ise peab olema hele: tumeda kaanega (juice) jääks hall
         tekst muidu kahvatuks. */
      filter: blur(26px) saturate(1.5) brightness(1.3);
      opacity: .55;
    }
    .avaekraan .vidin__kaas {
      grid-area: kaas;
      align-self: start;
      inline-size: clamp(50px, 16vw, 64px);
      block-size: auto;
      aspect-ratio: 1;
      border-radius: 9px;
      box-shadow: 0 2px 8px rgb(0 0 0 / .28);
    }
    .avaekraan .vidin__tekst { grid-area: tekst; align-self: center; min-inline-size: 0; }
    .avaekraan .vidin__nimi {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.2;
    }
    .avaekraan .vidin__nimi [data-m="nimi"] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .avaekraan .vidin__artist { margin-block-start: 2px; font-size: 13px; color: #48484e; }

    .avaekraan .vidin__allikas { margin-block-start: 2px; font-size: 11px; }
    .avaekraan .vidin__link { color: #48484e; text-decoration: none; }
    .avaekraan .vidin__link:focus-visible { outline: 2px solid #1c1c1e; outline-offset: 1px; }

    /* "mängib" tulbad, Apple Musicu punases. Seisavad, kui muusika ei mängi. */
    .avaekraan .vidin__eq { display: none; align-items: end; gap: 2px; block-size: 11px; flex: none; }
    .avaekraan .vidin.mangib .vidin__eq { display: inline-flex; }
    .avaekraan .vidin__eq i {
      inline-size: 3px;
      block-size: 100%;
      border-radius: 1px;
      background: #fa243c;
      transform-origin: bottom;
      animation: vidin-eq .9s ease-in-out infinite alternate;
      --animation-reduced: none;
    }
    .avaekraan .vidin__eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
    .avaekraan .vidin__eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; }
    @keyframes vidin-eq { from { scale: 1 .25; } to { scale: 1 1; } }

    .avaekraan .vidin__kulg {
      grid-area: kulg;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-variant-numeric: tabular-nums;
      color: #55555b;
    }
    /* iOS-i kerimisriba: nuppu ei ole, riba läheb puudutusel paksemaks */
    .avaekraan .vidin .m-kulg { touch-action: none; }
    .avaekraan .vidin .m-kulg::-webkit-slider-runnable-track {
      block-size: 4px;
      border-radius: 2px;
      box-shadow: none;
      background: linear-gradient(to right, #1c1c1e var(--taidetud), rgb(60 60 67 / .2) var(--taidetud));
      transition: block-size .15s;
    }
    .avaekraan .vidin .m-kulg:active::-webkit-slider-runnable-track { block-size: 7px; }
    .avaekraan .vidin .m-kulg::-webkit-slider-thumb {
      inline-size: 4px;
      block-size: 4px;
      margin-block-start: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .avaekraan .vidin .m-kulg::-moz-range-track { background: rgb(60 60 67 / .2); box-shadow: none; }
    .avaekraan .vidin .m-kulg::-moz-range-progress { background: #1c1c1e; }
    .avaekraan .vidin .m-kulg::-moz-range-thumb { inline-size: 4px; block-size: 4px; border: 0; background: transparent; }

    .avaekraan .vidin__nupud {
      grid-area: nupud;
      margin-block-end: 5px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    /* iOS 17: glüüfid ilma nupukeheta, 44 px puutepind */
    .avaekraan .vidin .m-nupp {
      inline-size: 44px;
      block-size: 34px;
      color: #1c1c1e;
      border: 0;
      border-radius: 10px;
      background: none;
      box-shadow: none;
      -webkit-tap-highlight-color: transparent;
      transition: scale .12s ease, opacity .12s ease;
      --transition-reduced: none;
    }
    .avaekraan .vidin .m-nupp:active { scale: .86; opacity: .55; background: none; box-shadow: none; }
    .avaekraan .vidin .m-nupp:focus-visible { outline: 2px solid #1c1c1e; outline-offset: -2px; }
    .avaekraan .vidin .m-ikoon { inline-size: 22px; block-size: 22px; filter: none; }
    .avaekraan .vidin .m-nupp--suur .m-ikoon { inline-size: 26px; block-size: 26px; }
    .avaekraan .vidin.viga .vidin__nimi { color: #c4221a; }


    /* ── üle võlli, telefonis ─────────────────────────────────────────── */
    /* Pikk vajutus ei tohi avada Safari lingi eelvaadet: see on meie oma
       värisemisrežiimi žest. */
    .avaekraan a { -webkit-touch-callout: none; }
    .avaekraan li { position: relative; }

    /* käivitus: puudutatud ikoon suumib ette ja lahustub valgesse, teised
       taanduvad. Valge sähvatus kasvab ikooni kohast (--kx, --ky tulevad JS-ist)
       ja sulandub järgmise lehe valgesse aknasse. */
    .avaekraan::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 9;
      background: radial-gradient(circle at var(--kx, 50%) var(--ky, 50%),
        rgb(255 255 255 / .95), rgb(255 255 255 / .7) 28%, rgb(255 255 255 / 0) 62%);
      opacity: 0;
      pointer-events: none;
    }
    .avaekraan.kaivitub::after { transition: opacity .3s ease-in; opacity: 1; }
    .avaekraan.kaivitub li:not(.see) {
      transition: opacity .26s ease-in, scale .26s ease-in;
      opacity: .15;
      scale: .82;
    }
    .avaekraan li.see .rakendus__kest {
      animation: rakendus-kaivitub .3s cubic-bezier(.5, 0, .8, .4) both;
    }
    .avaekraan li.see .rakendus__silt { transition: opacity .12s; opacity: 0; }
    @keyframes rakendus-kaivitub {
      0%   { scale: 1; }
      70%  { opacity: 1; }
      100% { scale: 2.8; opacity: 0; }
    }

    /* värisemisrežiim: pikk vajutus paneb ikoonid värisema, nagu iPhone OS-is
       2008. aastast. Iga ikoon väriseb oma rütmis. Ristid kustutavad ikooni
       ajutiselt; "Valmis" toob kõik tagasi. Midagi päriselt ei kustu. */
    /* "Valmis" on voos, lehepunktide kohal, mitte nurgas: nurgas kattis ta
       ülemise rea parempoolse ikooni risti. order paneb ta ekraanide ja
       punktide vahele, kuigi HTML-is on ta eespool. */
    .avaekraan .ekraanid { order: 0; }
    .avaekraan .valmis   { order: 1; }
    .avaekraan .punktid  { order: 2; }
    .avaekraan .ios-dokk { order: 3; }
    .avaekraan .valmis {
      position: relative;
      z-index: 8;
      flex: none;
      align-self: center;
      margin-block: 2px 4px;
      padding: 6px 22px;
      font: 700 13px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #fff;
      text-shadow: 0 -1px 0 rgb(0 0 0 / .4);
      border: 1px solid rgb(0 0 0 / .5);
      border-radius: 7px;
      background:
        linear-gradient(to bottom, rgb(255 255 255 / .5), rgb(255 255 255 / .08) 50%, transparent 51%),
        linear-gradient(to bottom, #5c9df2, #1f5fcf);
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 1px 3px rgb(0 0 0 / .45);
      animation: teavitus-ilmub .3s cubic-bezier(.3, 1.6, .5, 1) both;
      --animation-reduced: none;
    }
    .avaekraan .valmis[hidden] { display: none; }

    @keyframes vappumine {
      0%, 100% { rotate: -1.6deg; }
      50%      { rotate: 1.6deg; }
    }
    .avaekraan.vappub .ruudustik li, .avaekraan.vappub .ios-dokk li {
      animation: vappumine .26s ease-in-out infinite;
      --animation-reduced: none;
    }
    .avaekraan.vappub li:nth-child(2n) { animation-duration: .23s; animation-delay: -.08s; }
    .avaekraan.vappub li:nth-child(3n) { animation-duration: .29s; animation-delay: -.15s; }
    .avaekraan.vappub li:nth-child(5n) { animation-delay: -.21s; }

    /* rist: iPhone OS-i must geelnupp valge servaga ikooni vasakus ülanurgas */
    .avaekraan .kustuta {
      position: absolute;
      z-index: 7;
      inset-block-start: -8px;
      inset-inline-start: calc(50% - var(--kest) / 2 - 9px);
      display: grid;
      place-items: center;
      inline-size: 25px;
      block-size: 25px;
      padding: 0 0 2px;
      font: 700 17px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #fff;
      border: 2px solid #fff;
      border-radius: 50%;
      background:
        linear-gradient(to bottom, rgb(255 255 255 / .35), transparent 50%),
        radial-gradient(circle at 50% 30%, #777, #121212 72%);
      box-shadow: 0 2px 4px rgb(0 0 0 / .55);
      animation: teavitus-ilmub .25s cubic-bezier(.3, 1.6, .5, 1) both;
      --animation-reduced: none;
    }
    .avaekraan li.kadunud .rakendus { animation: rakendus-kustub .28s ease-in both; }
    .avaekraan li.kadunud .kustuta { display: none; }
    @keyframes rakendus-kustub { to { scale: 0; opacity: 0; } }
    .avaekraan li.tagasi .rakendus { animation: teavitus-ilmub .45s cubic-bezier(.3, 1.6, .5, 1) both; }

    /* Mobiilis on navigeerimine avaekraanil, mitte lehe sees. Lion'i dokk
       ja allikaloend kordasid mõlemad sedasama ja võtsid ruumi: dokk 76 px
       alt, allikaloend riba ülalt. Mõlemad lähevad ära.
       Tagasi avaekraanile saab kahest kohast: punane tuli tiitliribal
       (Lion'is oligi see "Sulge") ja kodutriip ekraani alaservas. */
    :root { --dokk: 30px; }
    .dokk, .allikaloend { display: none; }

    @supports selector(:has(*)) {
      /* Avaekraanil ollakse juba kodus. */
      .avaleht:not(:has(#sisu:target)) .kodutriip { display: none; }
    }
  }
}

@layer liikumine {

  /* Tüübitud omadused: getComputedStyle tagastab puhta arvu, ja
     --animation-reduced / --transition-reduced on maja konventsioon —
     iga animeeritud reegel ütleb ISE, mis temast vaikses režiimis saab. */
  @property --mull-arv { syntax: "<integer>"; inherits: true; initial-value: 9; }
  @property --animation-reduced  { syntax: "*"; inherits: false; }
  @property --transition-reduced { syntax: "*"; inherits: false; }

  @property --par-x { syntax: "<number>"; inherits: true; initial-value: 0; }
  @property --par-y { syntax: "<number>"; inherits: true; initial-value: 0; }

  :root {
    --mull-arv: 9;
    --par-taust: -10px;
    --mull-rimm: rgb(106 169 238 / .34);
    --mull-soe:  rgb(255 238 208 / .20);

    --ilmu-nihe: 6px;
    --ilmu-kestus: .34s;
    --ilmu-samm: 45ms;
  }

  /* Arvud elavad murdepunktides, mitte JS-is. */
  @media (width < 34rem)          { :root { --mull-arv: 5;  } }
  @media (34rem <= width < 60rem) { :root { --mull-arv: 7;  } }
  @media (width >= 90rem)         { :root { --mull-arv: 11; } }

  /* z-index:-1 -> linase (.taust, -2) peal, akna all. */
  .mullid {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
  }

  .mullid b {
    --s: 48px;
    position: absolute;
    inline-size: var(--s);
    aspect-ratio: 1;
    border-radius: 50%;
    /* Linasel, mitte taeval: pool alfat, nõrgem valge, soe vastupeegeldus
       all paremal, ja Aqua SERV — mitte keha. Täissinine ring hallil linasel
       näeb välja nagu ekraanisäästja. */
    background:
      radial-gradient(circle at 33% 27%, rgb(255 255 255 / .80) 0 6%, transparent 38%),
      radial-gradient(circle at 70% 76%, var(--mull-soe) 0 5%, transparent 30%),
      radial-gradient(circle at 50% 50%, rgb(255 255 255 / .03) 56%,
                      var(--mull-rimm) 84%, rgb(255 255 255 / .05) 100%);
    /* Kontaktivari on see üks muudatus, mis teeb plekist objekti. */
    box-shadow:
      inset 0 0 10px rgb(255 255 255 / .34),
      inset 0 -3px 6px rgb(106 169 238 / .16),
      0 1px 2px rgb(0 0 0 / .13);
    animation: touse var(--kestus, 26s) linear var(--viide, 0s) infinite;
    --animation-reduced: none;
    opacity: 0;
  }

  /* svh, mitte vh: vh keyframe'i sees lahendatakse vaate muutudes ümber, nii
     et mobiilis paneks iga URL-riba ilmumine kõik mullid hüppama. */
  @keyframes touse {
    0%   { transform: translate3d(0, 12svh, 0) scale(.72); opacity: 0; }
    14%  { opacity: .46; }
    86%  { opacity: .30; }
    100% { transform: translate3d(var(--nihe, 4vw), -104svh, 0) scale(1.06); opacity: 0; }
  }

  /* Peatab peidetud sakil. animation-play-state jätkab täpselt sealt, kus
     peatus — ilma taaskäivituse ja faasihüppeta. */
  .on-peidus .mullid b { animation-play-state: paused; }

  /* ── ilmumine kerimisel ────────────────────────────────────────────────── */
  /* .ilmu on stiililehes, aga RAKENDATAKSE ainult JS-iga. JS-i ei ole →
     klassi ei ole → kõik on täisläbipaistmatuses. See on arhitektuur, mitte
     varuvariant: opacity:0 stiililehte küpsetatuna teeks saidi nähtamatuks. */
  .ilmu {
    opacity: 0;
    transform: translate3d(0, var(--ilmu-nihe), 0);
    transition: opacity var(--ilmu-kestus) ease-out,
                transform var(--ilmu-kestus) ease-out;
    transition-delay: calc(min(var(--i, 0), 8) * var(--ilmu-samm));
    --transition-reduced: none;
  }
  .ilmu.on-ilmunud { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════ 6. UTILIIDID */
@layer utiliidid {

  .rida { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .virn-s { display: grid; gap: 4px; }
  .tuhm { color: var(--tekst-tuhm); }
  .vaike { font-size: 11.5px; }
  .mono { font-family: var(--mono); }
  .keskel { text-align: center; }

  .vaid-ekraanilugejale, .dokk .nimi {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Hüppa sisu juurde — peab menüüribast (z-index 60) ette jääma. */
  .vahelejata {
    position: fixed;
    z-index: 70;
    inset-block-start: calc(var(--menyy) + 6px);
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  .vahelejata:not(:focus) {
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ── lugemisrežiim: Lion'i täisekraan ──────────────────────────────────── */
  body.loe { padding-block: 0; }
  body.loe .menyyriba,
  body.loe .dokk,
  body.loe .allikaloend,
  body.loe .mullid,
  body.loe .puru { display: none; }
  body.loe .keha { grid-template-columns: 1fr; }
  body.loe .aken { max-inline-size: 46rem; border-radius: 0; box-shadow: none; }
  body.loe .artikkel { font-size: 16px; max-inline-size: 70ch; }

  /* ── hover ainult päris osutiga ────────────────────────────────────────── */
  /* Puutel jääb :hover pärast koputust KINNI — dokiikoon jääks tõstetuks ja
     tabelirida täissiniseks. (hover:hover) üksi ei piisa: puuteekraaniga
     sülearvuti hiirega raporteerib hover:hover; pointer:fine kirjeldab
     PEAMIST osutit, mis määrabki, kas :hover kinni jääb.
     Igal siin valvatud reeglil on valvamata :focus-visible kaksik. */
  @media (hover: hover) and (pointer: fine) {
    .dokk a:hover .ruut {
      translate: 0 -6px;
      scale: 1.1;
      --kiil: 130%;
      transition: translate .14s ease, scale .14s ease, --kiil .75s cubic-bezier(.45, .05, .4, 1);
    }
    .kiirtee:hover .kuul {
      translate: 0 -3px;
      --kiil: 130%;
      transition: translate .14s ease, --kiil .75s cubic-bezier(.45, .05, .4, 1);
    }
    .tabel a:hover {
      color: #fff;
      background: linear-gradient(to bottom, var(--valik-1), var(--valik-2));
    }
    .tabel a:hover .kolmas, .tabel a:hover .teine { color: rgb(255 255 255 / .8); }
    .failid > li > a:hover {
      color: #fff;
      background: linear-gradient(to bottom, var(--valik-1), var(--valik-2));
    }
    .failid > li > a:hover .meta { color: rgb(255 255 255 / .8); }
    .failid > li > a:hover .nimi::after { border-block-end-color: rgb(255 255 255 / .45); }
    .allikaloend a:hover { background: rgb(255 255 255 / .45); }
    .allikaloend a[aria-current="page"]:hover { background: linear-gradient(to bottom, var(--valik-1), var(--valik-2)); }
    .foor > *:hover { filter: brightness(1.12); }
    .nupp:hover { background: linear-gradient(to bottom, #fff, #e8e8e8 48%, #d8d8d8 52%, #cdcdcd); }
    .nupp.esile:hover { background: linear-gradient(to bottom, #9ecbf8, #5596db 48%, #4381c9 52%, #3873bb); }
    .kaart:hover, a.video:hover { translate: 0 -1px; box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgb(0 0 0 / .13); }
    a.video:hover .video__mang { filter: brightness(1.12); }
    .puru a:hover { color: var(--link); text-decoration: underline; }
  }
  /* klaviatuuri jaoks, ilma valvurita */
  .tabel a:focus-visible, .failid > li > a:focus-visible { background: var(--triip); }
  .kiirtee:focus-visible .kuul {
    translate: 0 -3px;
    --kiil: 130%;
    transition: translate .14s ease, --kiil .75s cubic-bezier(.45, .05, .4, 1);
  }

  /* ── vähendatud liikumine ──────────────────────────────────────────────── */
  /* Maja konventsioon: iga animeeritud reegel deklareerib ise oma tulemuse
     (--animation-reduced / --transition-reduced), mitte *{...!important}. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mullid b { animation: var(--animation-reduced) !important; }
    .aken { animation: var(--animation-reduced) !important; }
    .kuul::after, .dokk .ruut::after, .avaekraan .rakendus__kest::after,
    .teavitus, .dokk a.hyppab .ruut, .avaekraan .valmis, .avaekraan .kustuta,
    .avaekraan.vappub li, .avaekraan li.see .rakendus__kest,
    .avaekraan li.kadunud .rakendus, .avaekraan li.tagasi .rakendus,
    .avaekraan .vidin__eq i {
      animation: var(--animation-reduced) !important;
    }
    /* ilma animatsioonita peab eemaldatud ikoon ikkagi kaduma */
    .avaekraan li.kadunud .rakendus { opacity: 0; }
    .ilmu, .dokk .ruut, .kuul, .kaart, .tabel a, .nupp, .segment a,
    .allikaloend a, .plaat, .nahk, .video, .taust__pilt,
    .avaekraan .rakendus, .avaekraan .punktid a::after, .kodutriip__pulk {
      transition: var(--transition-reduced) !important;
    }
    /* Hüpe on samuti liikumine. transition:none + hover-reegel alles =
       ikoon HÜPPAKS 6px. Asenda tõuge heledusega. */
    .dokk a:hover .ruut, .dokk a:focus-visible .ruut,
    .kiirtee:hover .kuul, .kiirtee:focus-visible .kuul {
      translate: 0; scale: 1; filter: brightness(1.10);
    }
    .kaart:hover, a.video:hover { translate: 0; }
  }

  /* ── süsteemivärvid ────────────────────────────────────────────────────── */
  @media (forced-colors: active) {
    :root { --etsitud: none; }
    .mullid, .taust { display: none; }
    .aken, .kaart, .nupp, .tabel, .failid, .plaat, .teade, .silt {
      border: 1px solid CanvasText;
      background: Canvas;
      box-shadow: none;
    }
    .menyyriba, .dokk ul, .kroom, .puru, .allikaloend {
      background: Canvas;
      backdrop-filter: none;
      border: 1px solid CanvasText;
    }
    .allikaloend a[aria-current="page"], .tabel a:hover, .failid > li > a:hover {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
    .dokk .ruut, .kuul, .teavitus {
      background: ButtonFace;
      color: ButtonText;
      border: 1px solid ButtonText;
      box-shadow: none;
    }
    .kuul::before, .kuul::after, .dokk .ruut::before, .dokk .ruut::after,
    .avaekraan .rakendus__kest::before, .sade { display: none; }
    .dokk .ruut, .mangija__kaas img { -webkit-box-reflect: none; }
    .mangija, .lcd, .m-nupp, .mangija__tiitel, .mangija__juhtimine, .mangija__kaas,
    .avaekraan .vidin__kaart {
      background: Canvas;
      color: CanvasText;
      border: 1px solid CanvasText;
      box-shadow: none;
      backdrop-filter: none;
    }
    .avaekraan .vidin__udu { display: none; }
    .mangija__palad a[aria-current="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
    .kuul svg, .dokk .ruut svg, .avaekraan .rakendus__kest svg { filter: none; }
    .nahk { background: Canvas; color: CanvasText; }
    .avaekraan { background: Canvas; color: CanvasText; }
    .avaekraan .rakendus, .kodutriip { color: LinkText; }
    .avaekraan .rakendus__kest, .avaekraan .olekuriba,
    .avaekraan .ios-dokk, .kodutriip {
      background: Canvas;
      border: 1px solid CanvasText;
      box-shadow: none;
      backdrop-filter: none;
    }
    .avaekraan .rakendus__kest::after { display: none; }
    .avaekraan .rakendus__kest svg { fill: CanvasText; }
  }

  /* ── trükk ─────────────────────────────────────────────────────────────── */
  @media print {
    /* Ilmumine on puhas CSS-probleem — beforeprint kuulajat pole vaja. */
    .ilmu { opacity: 1 !important; transform: none !important; }
    .menyyriba, .dokk, .allikaloend, .mullid, .taust,
    .avaekraan, .kodutriip, .mangija, .sc-kiht,
    .otsing, .foor, .nupurida { display: none !important; }
    body { padding: 0; background: #fff; }
    .keha { grid-template-columns: 1fr; }
    .aken {
      max-inline-size: none;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }
    .kroom { background: none; border-block-end: 1px solid #000; }
    .artikkel { max-inline-size: none; }
    a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
    a[href^="#"]::after { content: ""; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}