:root[data-palette=retro] {
  --top:#fff;
  --ground:#f2f3f3;
  --panel:#fff;
  --ink:#202428;
  --muted:#4f5860;
  --line:#b5bcc0;
  --accent:#096b9c;
  --accent-soft:#e2f1f8;
  --subtle:#f1f4f5;
  --shadow:none;
  --footer:#273036;
  --footer-ink:#f0f4f6;
  --footer-muted:#bdcbd2;
  --footer-line:#64737b;
  --accent-stripe-start:#096b9c;
  --accent-stripe-end:#096b9c;
  --retro-menu:#a63425;
  --retro-menu-ink:#fff;
  --retro-tab:#096b9c;
  --retro-tab-hover:#07577e;
  --retro-tab-ink:#fff;
  --retro-brick:#a63425;
  --retro-rain:#096b9c;
  --retro-olive:#cbd79e;
  --retro-olive-ink:#273016;
  --retro-map:#d0dd9f;
  --retro-map-edge:#667a37;
}

:root[data-palette=retro][data-theme=dark] {
  --top:#20262b;
  --ground:#171b1f;
  --panel:#242b31;
  --ink:#f4f5f5;
  --muted:#c2ccd1;
  --line:#606e76;
  --accent:#83c9ec;
  --accent-soft:#203e50;
  --subtle:#2e3840;
  --footer:#14191d;
  --footer-ink:#edf2f3;
  --footer-muted:#bdcbd2;
  --footer-line:#606e76;
  --accent-stripe-start:#83c9ec;
  --accent-stripe-end:#83c9ec;
  --retro-menu:#9b382d;
  --retro-tab:#9ad5f2;
  --retro-tab-hover:#bce5f8;
  --retro-tab-ink:#142630;
  --retro-brick:#ff9f8e;
  --retro-rain:#8cd1f2;
  --retro-olive:#444e2b;
  --retro-olive-ink:#edf4d3;
  --retro-map:#384525;
  --retro-map-edge:#a8ba72;
}

:root[data-palette=yellow] .appearance-controls--combined .palette-ball {background-image:url('/_in/appearance-v4/palette-yellow.png')}
:root[data-palette=blue] .appearance-controls--combined .palette-ball {background-image:url('/_in/appearance-v4/palette-blue.png')}
:root[data-palette=green] .appearance-controls--combined .palette-ball {background-image:url('/_in/appearance-v4/palette-green.png')}
:root[data-palette=red] .appearance-controls--combined .palette-ball {background-image:url('/_in/appearance-v4/palette-red.png')}
:root[data-palette=retro] .appearance-controls--combined .palette-ball {background-image:url('/_in/appearance-v4/palette-retro.png')}

:root[data-palette=retro] .main-nav {
  align-self:center;
  padding-inline:8px;
  background:var(--retro-menu);
}

:root[data-palette=retro] .main-nav a {
  min-height:40px;
  color:var(--retro-menu-ink);
}

:root[data-palette=retro] .main-nav a[aria-current=page]::after {
  bottom:5px;
  height:2px;
  background:currentColor;
}

:root[data-palette=retro] .main-nav a:focus-visible {
  outline:2px solid currentColor;
  outline-offset:-2px;
}

@media (max-width:760px) {
  :root[data-palette=retro] .main-nav {justify-content:center; margin:0;}
  :root[data-palette=retro] .location-title-row h1 {font-size:clamp(30px, 9.25vw, 40px);}
}

@media (max-width:360px) {
  :root[data-palette=retro] .main-nav {padding-inline-end:46px;}
  :root[data-palette=retro] .main-nav a {min-height:44px;}
}

:root[data-palette=retro] .weather-nav--locality a {
  background:var(--retro-tab);
  color:var(--retro-tab-ink);
  border-radius:3px;
}

:root[data-palette=retro] .weather-nav--locality a:hover {
  background:var(--retro-tab-hover);
  text-decoration:underline;
}

:root[data-palette=retro] .weather-nav--locality a[aria-current=page] {
  background:var(--panel);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--retro-tab),inset 0 -3px var(--retro-tab);
}

:root[data-palette=retro] .nearby-forecast a {
  padding:1px 3px;
  background:var(--retro-olive);
  color:var(--retro-olive-ink);
  text-decoration:underline;
  text-underline-offset:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

:root[data-palette=retro] .nearby-forecast a:hover {text-decoration-thickness:2px;}
:root[data-palette=retro] .slovakia-country {fill:var(--retro-map);}
:root[data-palette=retro] :is(.slovakia-outline,.slovakia-regions path) {stroke:var(--retro-map-edge);}

:root[data-palette=retro] :is(.content-band h2,.forecast-month-heading h3,.forecast-chart-heading h3) {color:var(--retro-brick);}
:root[data-palette=retro] :is(.current-weather,.forecast-chart,.forecast-month-scroll,.table-scroll--compact) {border-radius:3px;}
:root[data-palette=retro] .current-weather--foreca {background:var(--panel);}
:root[data-palette=retro] .forecast-table thead th {color:var(--ink); font-weight:650;}
:root[data-palette=retro] .forecast-table tbody tr:nth-child(even):not(.astronomy-event) {background:var(--subtle);}

:root[data-palette=retro] :is(.forecast-table--compact .forecast-front-temperature,.forecast-temperature-max,.day-temperature:not(.day-temperature--min)) {
  color:var(--retro-brick);
  font-weight:700;
}

:root[data-palette=retro] :is(.forecast-temperature-min,.day-temperature--min) {color:var(--ink); font-weight:650;}
:root[data-palette=retro] .forecast-temperature-separator {color:var(--muted);}
:root[data-palette=retro] :is(.monthly-precipitation .monthly-metric,.forecast-interval-rain .forecast-metric-value,.monthly-precipitation .measurement-symbol,.forecast-interval-rain .measurement-symbol) {color:var(--retro-rain);}

:root[data-palette=retro] .forecast-chart .chart-line:not(.chart-line-minimum),
:root[data-palette=retro] .forecast-chart .chart-dot:not(.chart-dot-minimum) {stroke:var(--ink);}
:root[data-palette=retro] .forecast-chart .chart-legend-max::before,
:root[data-palette=retro] .forecast-chart .chart-temperature-swatch {border-color:var(--ink);}
