/* totaleclipse2026 — "almanach o zmierzchu"
   Strona jest niebem w chwili maksimum: granatowa u góry, ciepła tuż nad
   horyzontem. Fraunces (szeryf zmienny) niesie nagłówki jak rytowany atlas
   nieba, IBM Plex Sans obsługuje dane. Oba hostowane lokalnie, bo produkt
   obiecuje zero zewnętrznego śledzenia. */

@font-face{
  font-family:Fraunces; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/static/fonts/fraunces-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Fraunces; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/static/fonts/fraunces-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Plex Sans"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/static/fonts/plex-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Sans"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/static/fonts/plex-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#080a12; --surface:#10141f; --surface2:#171d2b; --line:#242c3e;
  --text:#f2f4f9; --muted:#aab5c9; --faint:#8b98ae;
  /* --warn jest wyraźnie głębszy od --accent: „stan graniczny" nie może
     wyglądać identycznie jak zwykły akcent marki. */
  --ok:#57d69a; --warn:#f5972b; --bad:#ff6f61;
  --sun:#ffc247; --accent:#ffc247; --accent-ink:#201604;
  --display:Fraunces,Georgia,"Times New Roman",serif;
  --body:"Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* clip, nie hidden: overflow ustawiony na body propaguje się do viewportu i
   samo body zostaje `visible`, więc korona i tak rozpychała dokument. `clip`
   na elemencie głównym przycina bez tworzenia kontenera przewijania. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0; color:var(--text); font:17px/1.65 var(--body);
  background:
    radial-gradient(125% 62% at 50% 100%, rgb(255 168 62 / .13), transparent 62%),
    radial-gradient(95% 55% at 50% 0%, rgb(78 98 170 / .15), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  overflow-x:clip;
}
/* Ziarno — niebo o zmierzchu nigdy nie jest płaską płaszczyzną koloru. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:26px 20px 80px}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;
  margin:0 0 .45em;text-wrap:balance;font-variation-settings:"opsz" 96}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);letter-spacing:-.021em;font-weight:700;
  font-variation-settings:"opsz" 144}
h2{font-size:clamp(1.5rem,2.7vw,2rem);margin-top:1.5em;letter-spacing:-.012em}
h3{font-size:1.2rem;margin-top:1.6em;color:var(--text)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:34px 0 30px;margin-bottom:30px;
  border-bottom:1px solid var(--line)}
.hero > *{position:relative;z-index:1}
.eyebrow{font-family:var(--body);color:var(--sun);font-size:.9rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;margin:0 0 .9em;
  font-variant-numeric:tabular-nums}
.lede{color:var(--muted);font-size:1.1rem;max-width:60ch;margin-bottom:0}
.lede strong{color:var(--text);font-weight:600}

/* Zaćmienie CAŁKOWITE rysowane w CSS — czarna tarcza, pierścień i korona.
   Wcześniejszy sierp czytał się jak zwykły Księżyc; a to zjawisko jest
   całkowite i właśnie korona jest jego rozpoznawalnym obrazem. */
/* Kolejność malowania jest tu istotna: tło elementu ze stackingiem rysuje się
   PRZED potomkami o ujemnym z-index, więc smugi korony prześwitywały przez
   tarczę. Dlatego korona to ::before, a nieprzezroczysty dysk ::after. */
.eclipse{position:absolute;top:40px;right:2px;width:150px;height:150px;
  pointer-events:none}
.eclipse::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:#05070d;
  box-shadow:0 0 0 2px rgb(255 233 178 / .92), 0 0 22px 5px rgb(255 201 105 / .5),
    0 0 76px 22px rgb(255 178 70 / .17)}
/* Promieniste smugi korony: konik daje strukturę, maska wygasza ją na zewnątrz,
   blur zbija paski w świetlistą poświatę. */
.eclipse::before{content:"";position:absolute;inset:-40%;border-radius:50%;
  background:conic-gradient(rgb(255 208 128 / .34),rgb(255 186 84 / .05) 7%,
    rgb(255 214 140 / .3) 15%,rgb(255 186 84 / .04) 23%,rgb(255 205 120 / .32) 33%,
    rgb(255 186 84 / .05) 42%,rgb(255 216 145 / .28) 52%,rgb(255 186 84 / .04) 61%,
    rgb(255 205 120 / .33) 71%,rgb(255 186 84 / .05) 80%,rgb(255 212 136 / .3) 90%,
    rgb(255 208 128 / .34) 100%);
  -webkit-mask:radial-gradient(circle,#000 34%,rgb(0 0 0 / .35) 52%,transparent 70%);
  mask:radial-gradient(circle,#000 34%,rgb(0 0 0 / .35) 52%,transparent 70%);
  filter:blur(5px);animation:corona 9s ease-in-out infinite}
@keyframes corona{50%{transform:scale(1.05) rotate(4deg);opacity:.8}}

/* Kolumna tekstu i ozdobnik nie dzielą przestrzeni — nagłówek nigdy nie
   wchodzi pod tarczę, zamiast liczyć na to, że się akurat zmieści. */
@media (min-width:761px){
  .hero .eyebrow,.hero h1,.hero .lede{max-width:calc(100% - 196px)}
}

/* ── formularz i mapa ─────────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px;margin-bottom:26px}
.controls{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.field{position:relative;flex:1 1 260px}
label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:6px}
input[type=text],select{
  width:100%;padding:12px 14px;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:10px;font:inherit;font-size:1rem}
input[type=text]::placeholder{color:var(--faint)}
input[type=text]:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
select{width:auto}
.btn,.btn-ghost{padding:12px 18px;border-radius:10px;font:inherit;font-size:.98rem;
  font-weight:600;cursor:pointer;border:1px solid var(--line);
  background:var(--surface2);color:var(--text);
  transition:transform .18s ease,border-color .18s ease,color .18s ease}
.btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}
.btn[disabled],.btn-ghost[disabled]{opacity:.55;cursor:progress;transform:none}
.hint{color:var(--faint);font-size:.9rem;margin:.85em 0}

.suggest{position:absolute;z-index:1200;top:100%;left:0;right:0;margin:5px 0 0;padding:5px;
  list-style:none;background:var(--surface2);border:1px solid var(--line);
  border-radius:10px;max-height:280px;overflow:auto;box-shadow:0 18px 44px rgb(0 0 0 / .55)}
.suggest li{padding:9px 11px;border-radius:7px;cursor:pointer;font-size:.96rem}
.suggest li:hover,.suggest li[aria-selected=true]{background:var(--line)}
.suggest .cc{color:var(--faint);font-size:.88rem;margin-left:7px}

#map{height:380px;border-radius:12px;margin-top:14px;border:1px solid var(--line);
  background:var(--surface2)}
.leaflet-container{background:#070a11;font-family:var(--body)}
/* Kafle OSM są jasne i gryzły się z resztą. Filtr obejmuje wyłącznie warstwę
   kafli — gradient widzialności i oś pasa siedzą w overlayPane, więc same w
   sobie zostają nietknięte.
   grayscale() MUSI iść przed invert(): gradient ma tylko 60% krycia, więc
   barwa podkładu przebija i przesuwa odczyt. Inwersja bez odbarwienia robiła
   ze złota oliwkę i mapa przestawała się zgadzać z legendą. Neutralna szarość
   pod spodem żadnej barwy nie dodaje. */
.leaflet-tile-pane{filter:grayscale(1) invert(1) brightness(.92) contrast(.86)}
/* Kontrolki Leafletu przychodzą jasne i zostawały świecącym rusztowaniem. */
/* `.leaflet-touch .leaflet-bar` narzuca border 2px, więc goła klasa przegrywa. */
.leaflet-bar,.leaflet-touch .leaflet-bar{border:1px solid var(--line);
  box-shadow:0 2px 10px rgb(0 0 0 / .4)}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--surface2);color:var(--text);
  border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:var(--line);color:var(--accent)}
/* Swoistość musi dorównać Leafletowi — on celuje w `.leaflet-container
   .leaflet-control-attribution`, więc goła klasa przegrywa mimo kolejności.
   Atrybucja OSM jest wymogiem licencyjnym i ma pozostać czytelna. */
.leaflet-container .leaflet-control-attribution{background:rgb(8 10 18 / .82);
  color:var(--faint)}
.leaflet-container .leaflet-control-attribution a{color:var(--muted)}
/* Domyślna pinezka jest błękitna; markerPane nie podlega filtrowi kafli. */
.leaflet-marker-icon{filter:hue-rotate(194deg) saturate(1.35)}

/* ── karta werdyktu ───────────────────────────────────────────────────── */
/* Werdykt niosą nagłówek i odznaka, nie kolorowy pasek przy krawędzi. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px;margin-bottom:26px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap}
.card-head h2{margin:0;font-size:1.5rem}
.coords{color:var(--faint);font-size:.9rem;margin:.25em 0 0;font-variant-numeric:tabular-nums}
.headline{font-family:var(--display);font-size:1.35rem;font-weight:600;
  line-height:1.25;margin-top:.85em;text-wrap:balance}
.verdict-clear .headline{color:var(--ok)}
.verdict-marginal .headline,.verdict-partly_blocked .headline{color:var(--warn)}
.verdict-blocked .headline,.verdict-below_horizon .headline{color:var(--bad)}
.detail{color:var(--muted);max-width:64ch}

.badge{display:inline-block;padding:6px 13px;border-radius:999px;font-size:.88rem;
  font-weight:600;white-space:nowrap;border:1px solid}
.b-clear{color:var(--ok);border-color:rgb(87 214 154 / .4);background:rgb(87 214 154 / .1)}
.b-marginal,.b-partly_blocked{color:var(--warn);border-color:rgb(245 151 43 / .45);
  background:rgb(245 151 43 / .12)}
.b-blocked,.b-below_horizon{color:var(--bad);border-color:rgb(255 111 97 / .4);
  background:rgb(255 111 97 / .1)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin:1.3em 0}
/* Wartości trzymają wspólną linię bazową także wtedy, gdy sąsiednia etykieta
   łamie się na dwa wiersze. */
.stat{background:var(--surface2);padding:13px 15px;display:flex;
  flex-direction:column;justify-content:space-between;gap:3px}
.stat .k{display:block;font-size:.88rem;color:var(--muted)}
.stat .v{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;
  font-variant-numeric:tabular-nums;margin-top:3px;letter-spacing:-.01em}
.v.bad{color:var(--bad)} .v.warn{color:var(--warn)}
td.bad{color:var(--bad);font-weight:600} td.warn{color:var(--warn);font-weight:600}

.cap{color:var(--faint);font-size:.92rem;max-width:70ch}
.lg-vis{color:var(--sun);font-weight:600}
.lg-hid{color:var(--faint);font-weight:600}

/* ── wykres ścieżki Słońca ────────────────────────────────────────────── */
.sunpath{width:100%;height:auto;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;display:block}
.sunpath .grid{stroke:#1d2637;stroke-width:1}
.sunpath .axis0{stroke:#4a5a72;stroke-width:1.5;stroke-dasharray:5 4}
.sunpath .tick{fill:var(--faint);font-size:12px;font-family:var(--body)}
.sunpath .terrain{fill:#1b2434;stroke:#3a4c66;stroke-width:1.5}
.sunpath .track{fill:none;stroke:var(--sun);stroke-width:3;stroke-linecap:round}
.sunpath .track-hidden{fill:none;stroke:#67728a;stroke-width:2.5;stroke-dasharray:5 5}
.sunpath .dot{fill:var(--sun)}
.sunpath .dot-max{fill:#fff;stroke:var(--sun);stroke-width:2.5}
.sunpath .lbl{fill:var(--muted);font-size:12px;font-weight:600;font-family:var(--body)}

table{width:100%;border-collapse:collapse;font-size:.96rem}
/* Uwaga na zakres: sekcja na stronie głównej i tabelka kontaktów w karcie
   werdyktu mają tę samą klasę. Bez `table.` te reguły wyrównywały do prawej i
   pogrubiały także nazwy miast w dużej tabeli godzin. */
table.times th{text-align:left;font-weight:400;color:var(--muted);padding:9px 0;
  border-bottom:1px solid var(--line)}
table.times td{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;
  padding:9px 0;border-bottom:1px solid var(--line)}
table.times .max th,table.times .max td{color:var(--sun);font-weight:700}

/* Link, nie przycisk — prowadzi na zewnątrz, więc ma wyglądać na klikalny
   także bez najechania, ale nie udawać akcji wykonywanej na miejscu. */
.cal{display:inline-flex;align-items:center;gap:9px;margin-top:1.4em;
  text-decoration:none;color:var(--text)}
.cal svg{flex:none;color:var(--accent)}

/* ── ostrzeżenia ──────────────────────────────────────────────────────── */
.warnings{list-style:none;padding:0;margin:1.5em 0 0}
.warnings li{position:relative;padding:12px 15px 12px 44px;background:var(--surface2);
  border:1px solid var(--line);border-radius:10px;margin-bottom:9px;
  color:var(--muted);font-size:.96rem}
.warnings li::before{content:"!";position:absolute;left:14px;top:12px;width:20px;
  height:20px;line-height:19px;text-align:center;border-radius:50%;font-size:.82rem;
  font-weight:700;color:var(--accent-ink);background:var(--warn)}

.nearby-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.nearby-head h2{margin:0;flex:1 1 auto}
.radius{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.94rem}
.radius select{margin:0}
.nearby-table{background:var(--surface);border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.nearby-table th{text-align:left;padding:11px 13px;background:var(--surface2);
  color:var(--muted);font-size:.9rem;letter-spacing:.05em;text-transform:uppercase}
.nearby-table td{padding:11px 13px;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums}
/* Liczby do prawej razem z nagłówkami; ostatnia kolumna to odznaka, wyśrodkowana. */
.nearby-table th:nth-child(n+3),.nearby-table td:nth-child(n+3){text-align:right}
.nearby-table th:last-child,.nearby-table td:last-child{text-align:center}
.nearby-table tbody tr{cursor:pointer;transition:background .15s ease}
.nearby-table tbody tr:hover{background:var(--surface2)}
.row-here{background:rgb(255 194 71 / .07)}
.nearby-table .sub{display:block;color:var(--faint);font-size:.9rem;
  font-variant-numeric:tabular-nums}

.notes{border-top:1px solid var(--line);margin-top:52px;padding-top:14px}
.notes ul{padding-left:22px;color:var(--muted)}
.notes li{margin-bottom:.75em;max-width:68ch}
/* Ostrzeżenie o okularach — tu ramka jest treścią, nie ozdobą.
   MUSI być `p.warn`: gołe `.warn` łapało też `.stat .v.warn` i `td.warn`,
   czyli dorysowywało ramkę i tło wokół pojedynczej liczby w siatce statystyk. */
p.warn{background:rgb(245 151 43 / .1);border:1px solid rgb(245 151 43 / .42);
  padding:16px 18px;border-radius:12px;color:#ffdda4;max-width:68ch}

footer{border-top:1px solid var(--line);margin-top:48px;padding-top:20px;
  color:var(--faint);font-size:.9rem}

.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:-3px;margin-right:9px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{color:var(--muted);padding:16px 0}
.err{background:rgb(255 111 97 / .1);border:1px solid rgb(255 111 97 / .38);
  padding:14px 16px;border-radius:12px;color:#ffc0ba}

/* ── przełącznik języków ──────────────────────────────────────────────── */
.flag-sprite{position:absolute;width:0;height:0;overflow:hidden}
.langs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
  position:relative;z-index:2;margin-bottom:10px}
.lang{display:block;line-height:0;padding:3px;border-radius:6px;
  border:1px solid transparent;opacity:.8;
  transition:opacity .18s ease,border-color .18s ease,transform .18s ease}
.lang:hover,.lang:focus-visible{opacity:1;border-color:var(--line);transform:translateY(-2px)}
.lang.on{opacity:1;border-color:var(--accent)}
.flag{display:block;width:27px;height:auto;border-radius:2px;
  box-shadow:0 0 0 1px rgb(0 0 0 / .3) inset}

/* ── legenda widzialności ─────────────────────────────────────────────── */
.legend{margin-top:18px}
.legend-title{font-family:var(--display);font-size:1.1rem;font-weight:600;margin:0 0 9px}
.legend-bar{height:13px;border-radius:7px;border:1px solid var(--line);
  /* Zapasowa rampa na wypadek, gdyby /api/grid nie odpowiedziało — JS
     przemalowuje ten pasek kolorami policzonymi z faktycznych danych. */
  background:linear-gradient(90deg,#b65456 0%,#d4762e 50%,#ffd214 100%)}
.legend-ends{display:flex;justify-content:space-between;color:var(--faint);
  font-size:.9rem;margin-top:7px;gap:10px}
.legend-set{display:flex;align-items:center;gap:8px;color:var(--faint);
  font-size:.9rem;margin:.7em 0 0}
.legend-swatch{width:26px;height:13px;border-radius:4px;flex:none;
  border:1px solid var(--line);background:rgb(104 110 120 / .62)}
.legend-desc{color:var(--faint);font-size:.9rem;margin:.85em 0 0;max-width:70ch}

/* ── tabela godzin ────────────────────────────────────────────────────── */
section.times{margin-top:52px}
/* Kolumny liczbowe do prawej razem z własnymi nagłówkami. */
.times-table th:nth-child(n+3),.times-table td:nth-child(n+3){text-align:right}
.times-table{background:var(--surface);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-top:16px}
.times-table th{text-align:left;padding:11px 13px;background:var(--surface2);
  color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
.times-table td{padding:11px 13px;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.times-table tbody tr{cursor:pointer;transition:background .15s ease}
.times-table tbody tr:hover{background:var(--surface2)}
/* Wiersze, gdzie maksimum wypada po zachodzie, są wyciszone kolorem, nie
   opacity — opacity przygaszało też czerwoną wysokość Słońca, czyli jedyną
   liczbę, dla której ten wiersz w ogóle warto przeczytać. */
.times-table .row-set td{color:var(--faint)}
.times-table .row-set td.bad{color:var(--bad)}

/* ── wejście strony ───────────────────────────────────────────────────── */
/* Sam ruch, bez wygaszania. Animowanie opacity zostawiało 600 ms okna, w którym
   tekst jest półprzezroczysty — a audyty kontrastu (axe, Lighthouse) potrafią
   trafić dokładnie w nie i zgłosić naruszenie, którego użytkownik nie zobaczy. */
@keyframes rise{from{transform:translateY(14px)}to{transform:none}}
.hero,.panel,.times,.notes{animation:rise .6s cubic-bezier(.22,.8,.3,1) backwards}
.panel{animation-delay:.08s}
.times{animation-delay:.16s}
.notes{animation-delay:.22s}

@media (max-width:760px){
  /* Na wąskim ekranie ozdobnik nie ma prawa tłoczyć się z nagłówkiem —
     schodzi w róg i przygasa. */
  /* 72 px, nie 92: islandzki ma najdłuższy pierwszy wiersz nagłówka z siedmiu
     i jako jedyny sięgał glifami w tarczę przy 375 px. */
  .eclipse{width:66px;height:66px;top:-8px;right:-10px;opacity:.55}
  .lede{font-size:1.04rem}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:20px 16px 64px}
  .nearby-table,.times-table{display:block;overflow-x:auto}
  #map{height:300px}
}
@media (prefers-reduced-motion:reduce){
  .spinner{animation:none}
  .eclipse{animation:none}
  .hero,.panel,.times,.notes{animation:none}
  .btn:hover,.btn-ghost:hover,.lang:hover{transform:none}
}