/* Fuel Results Classic Guide.
   A self-contained 4:3 recreation of a late-1990s digital television guide.
   It uses no third-party names, marks, logos or image assets. */

:root {
    --ff-guide-ink: #001457;
    --ff-guide-row: #062e89;
    --ff-guide-row-alt: #073596;
    --ff-guide-line: #8db7df;
    --ff-guide-yellow: #ffd316;
    --ff-guide-orange: #f5a900;
    --ff-guide-red: #ff321d;
    --ff-guide-green: #37b851;
    --ff-guide-blue: #001a82;
}

html.ff-classic-guide,
html.ff-classic-guide body,
html.ff-classic-guide-playing,
html.ff-classic-guide-playing body {
    overflow: hidden !important;
}

html.ff-classic-guide .publift-widget-Sticky_Footer-container,
html.ff-classic-guide .ff-mobile-footer-ad-backdrop,
html.ff-classic-guide-playing .publift-widget-Sticky_Footer-container,
html.ff-classic-guide-playing .ff-mobile-footer-ad-backdrop {
    display: none !important;
}

html.ff-classic-guide-playing body {
    background: #090909 !important;
}

html.ff-classic-guide-playing .ff-desktop-sidebar {
    display: none !important;
}

html.ff-classic-guide-playing .ff-home-map-stage {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 13000 !important;
    width: min(100vw, calc(100vh * 4 / 3), 1024px) !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    flex: none !important;
    transform: translate(-50%, -50%);
}

html.ff-classic-guide-playing .ff-home-map-stage > :not(#map):not(#map-skeleton) {
    visibility: hidden !important;
    pointer-events: none !important;
}

html.ff-classic-guide-playing #map {
    pointer-events: none !important;
}

html.ff-classic-guide-playing #map .leaflet-control-zoom {
    display: none !important;
}

html.ff-classic-guide-playing #map .leaflet-control-attribution {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    opacity: .72;
    font-size: 8px;
}

/* A classic clipped corner ribbon hides the guide in Map Options. */
.ff-retro-tv-corner-ribbon {
    position: absolute;
    z-index: 20;
    right: -67px;
    display: flex;
    width: 252px;
    min-height: 43px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    overflow: hidden;
    padding: 6px 46px;
    border: 2px solid #fff377;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px),
        linear-gradient(180deg, #174dc1 0%, #082b87 58%, #061d5e 100%);
    box-shadow: 0 0 0 2px #04184c, 0 5px 10px rgba(15, 23, 42, .38);
    color: #fff36d;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px 0 #02143e;
    text-transform: uppercase;
    transform: rotate(-43deg);
    animation: ff-retro-corner-ribbon-flash 1.8s steps(2, end) infinite;
}

.ff-retro-tv-corner-ribbon::after {
    content: "";
    position: absolute;
    inset: 2px 0;
    border-block: 1px solid rgba(255,255,255,.32);
    pointer-events: none;
}

.ff-retro-tv-corner-ribbon:hover,
.ff-retro-tv-corner-ribbon:focus-visible {
    filter: brightness(1.14);
    transform: rotate(-43deg) scale(1.025);
}

.ff-retro-tv-corner-ribbon:focus-visible {
    outline: 3px solid var(--ff-guide-yellow);
    outline-offset: 3px;
}

.ff-retro-tv-corner-ribbon:active {
    transform: rotate(-43deg) translateY(2px);
    box-shadow: 0 0 0 2px #04184c, 0 2px 5px rgba(15, 23, 42, .38);
}

.ff-retro-tv-corner-ribbon strong {
    white-space: nowrap;
    font: 900 13px/1 Arial, Helvetica, sans-serif;
    letter-spacing: -.015em;
}

.ff-retro-tv-corner-ribbon__new {
    padding: 3px 4px 2px;
    border: 1px solid #fff8aa;
    background: #ef2d2d;
    color: #fff;
    font: 900 8px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .05em;
}

@keyframes ff-retro-corner-ribbon-flash {
    0%, 74% { border-color: #fff377; }
    75%, 100% { border-color: #fff; }
}

/* The guide always remains a television screen. Portrait phones see genuine
   letterboxing instead of a stretched mobile reinterpretation. */
.ff-guide {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #090909;
    color: var(--ff-guide-ink);
    font-family: Arial, Helvetica, sans-serif;
    animation: ff-guide-tune-in 150ms steps(2, end) both;
}

.ff-guide__screen {
    position: relative;
    display: grid;
    width: min(100vw, calc(100vh * 4 / 3), 1024px);
    aspect-ratio: 4 / 3;
    grid-template-rows: 14% minmax(0, 1fr);
    overflow: hidden;
    container-type: inline-size;
    background:
        radial-gradient(ellipse at 51% 62%, rgba(232, 247, 255, .72) 0%, rgba(177, 218, 247, .55) 45%, transparent 76%),
        linear-gradient(180deg, #6da8eb 0%, #a5d5f2 58%, #80c1e9 100%);
}

.ff-guide__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: .055;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 1px, transparent 1px 3px);
    mix-blend-mode: soft-light;
}

.ff-guide__masthead {
    display: grid;
    grid-template-columns: 16cqw minmax(0, 1fr);
    align-items: end;
    gap: 2.2cqw;
    padding: 2.2cqw 7.2cqw 1.2cqw;
}

.ff-guide__wordmark {
    display: flex;
    align-self: center;
    flex-direction: column;
    color: rgba(245, 250, 255, .92);
    font-weight: 400;
    line-height: .68;
    text-shadow: 0 .14cqw .16cqw rgba(0, 38, 104, .35);
}

.ff-guide__wordmark strong {
    font-size: 4.45cqw;
    font-weight: 400;
    letter-spacing: -.12em;
}

.ff-guide__wordmark span {
    margin-top: 1.15cqw;
    font-size: 2.75cqw;
    letter-spacing: -.05em;
}

.ff-guide__wordmark small {
    margin-top: 1.25cqw;
    color: rgba(245, 250, 255, .88);
    font: 800 1.5cqw/1 Arial, Helvetica, sans-serif;
    letter-spacing: .035em;
}

.ff-guide__primary-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 1.6cqw;
}

.ff-guide__primary-nav button {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: .45cqw;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.94);
    font: 900 1.95cqw/1 Arial, Helvetica, sans-serif;
    white-space: nowrap;
    text-shadow: .08cqw .08cqw rgba(0, 32, 101, .7);
}

.ff-guide__primary-nav i {
    display: grid;
    width: 5.2cqw;
    height: 3.8cqw;
    place-items: center;
    border: .4cqw solid rgba(255,255,255,.85);
    background: rgba(255,255,255,.08);
    font-size: 2.25cqw;
}

.ff-guide__primary-nav button[aria-current="page"] { color: #12408f; text-shadow: none; }
.ff-guide__primary-nav button[aria-current="page"] i { border-color: #174597; background: #174597; color: #8bc0ed; }

.ff-guide__content,
.ff-guide__panel {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.ff-guide__panel {
    height: 100%;
}

/* Numbered category screen. */
.ff-guide__panel--categories {
    padding: 3.35cqw 15.8cqw 2cqw;
}

.ff-guide__menu {
    display: grid;
    gap: .28cqw;
}

.ff-guide__menu button {
    position: relative;
    display: grid;
    min-height: 3.25cqw;
    grid-template-columns: 9cqw minmax(0, 1fr);
    align-items: center;
    padding: 0;
    border: 0;
    background: var(--ff-guide-row);
    color: #fff;
    font: 900 2.45cqw/1 Arial, Helvetica, sans-serif;
    text-align: left;
}

.ff-guide__menu button b {
    color: #80a9d7;
    font-weight: 400;
    text-align: center;
}

.ff-guide__menu button.is-selected,
.ff-guide__menu button:focus-visible {
    outline: 0;
    background: var(--ff-guide-yellow);
    color: #001152;
}

.ff-guide__menu button.is-selected b,
.ff-guide__menu button:focus-visible b { color: #001152; }

.ff-guide__menu button.is-selected::after,
.ff-guide__menu button:focus-visible::after {
    content: "";
    position: absolute;
    right: -1.8cqw;
    bottom: -.8cqw;
    border-top: .8cqw solid var(--ff-guide-orange);
    border-right: .9cqw solid transparent;
    border-left: .9cqw solid transparent;
}

.ff-guide__category-keys,
.ff-guide__remote-keys {
    display: flex;
    justify-content: center;
    gap: 4.8cqw;
}

.ff-guide__category-keys { margin-top: 1.35cqw; }

.ff-guide__category-keys button,
.ff-guide__remote-keys button {
    display: inline-flex;
    align-items: center;
    gap: .7cqw;
    padding: 0;
    border: 0;
    background: transparent;
    color: #001153;
    font: 900 1.8cqw/1 Arial, Helvetica, sans-serif;
}

.ff-guide__category-keys i,
.ff-guide__remote-keys i {
    display: block;
    width: 2.4cqw;
    height: 1.8cqw;
}

.ff-guide i.is-red { background: var(--ff-guide-red); }
.ff-guide i.is-green { background: var(--ff-guide-green); }
.ff-guide i.is-yellow { background: var(--ff-guide-yellow); }
.ff-guide i.is-blue { background: var(--ff-guide-blue); }

/* Search uses the same flat numbered-menu language rather than a modern card. */
.ff-guide__panel--search {
    padding: 6cqw 16cqw;
}

.ff-guide__panel--search h2 {
    margin: 0 0 2cqw;
    color: #001153;
    font-size: 3.2cqw;
}

.ff-guide__panel--search form {
    padding: 2.2cqw;
    background: var(--ff-guide-row);
}

.ff-guide__panel--search label {
    display: block;
    margin-bottom: 1.1cqw;
    color: #fff;
    font-size: 1.7cqw;
    font-weight: 900;
}

.ff-guide__panel--search form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11cqw;
}

.ff-guide__panel--search input,
.ff-guide__panel--search form button {
    height: 5cqw;
    border: .35cqw solid var(--ff-guide-yellow);
    border-radius: 0;
    font: 900 2cqw/1 Arial, Helvetica, sans-serif;
}

.ff-guide__panel--search input {
    min-width: 0;
    padding: 0 1.2cqw;
    background: #fff;
    color: #001153;
    outline: 0;
}

.ff-guide__panel--search form button {
    border-left: 0;
    background: var(--ff-guide-yellow);
    color: #001153;
}

.ff-guide__panel--search p {
    margin: 1.6cqw 0 0;
    color: #001153;
    font-size: 1.7cqw;
    font-weight: 700;
}

/* Programme listings screen. */
.ff-guide__panel--listings {
    display: grid;
    height: 100%;
    grid-template-rows: 7.2cqw 3.2cqw auto 8.6cqw;
    align-content: start;
    padding: 0 7.2cqw 1.5cqw;
}

.ff-guide__listings-heading {
    display: grid;
    grid-template-columns: 16cqw minmax(0, 1fr);
    align-items: center;
}

.ff-guide__guide-label {
    display: flex;
    flex-direction: column;
    color: rgba(244,250,255,.92);
    line-height: .95;
}

.ff-guide__guide-label span { font-size: 2.2cqw; }
.ff-guide__guide-label strong { color: #001153; font-size: 1.65cqw; white-space: nowrap; }

.ff-guide__listings-heading h2 {
    margin: 0;
    color: #001153;
    font-size: 3cqw;
    line-height: 1;
    letter-spacing: .03em;
}

.ff-guide__grid-heading {
    display: grid;
    grid-template-columns: 32% 68%;
    align-items: end;
    color: #001153;
    font-size: 1.65cqw;
    font-weight: 900;
    text-align: center;
}

.ff-guide__grid-heading span:first-child { text-align: left; }

.ff-guide__timeline-heading {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    font-variant-numeric: tabular-nums;
}

.ff-guide__timeline-heading span { text-align: left; }

.ff-guide__grid {
    display: grid;
    min-height: 0;
    grid-auto-rows: 3.15cqw;
    gap: .25cqw;
}

.ff-guide__row {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    --ff-guide-price-span: 5;
    --ff-guide-distance-span: 3;
    --ff-guide-updated-span: 4;
    grid-template-columns: 32% 68%;
    align-items: stretch;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: 900 1.8cqw/1 Arial, Helvetica, sans-serif;
    text-align: left;
}

.ff-guide__channel,
.ff-guide__programme {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 0 .75cqw;
    border-right: .25cqw solid var(--ff-guide-line);
    background: var(--ff-guide-row);
    overflow: hidden;
    white-space: nowrap;
}

.ff-guide__channel { gap: .65cqw; }
.ff-guide__channel b { flex: 0 0 4.2cqw; font-variant-numeric: tabular-nums; }
.ff-guide__station-name { overflow: hidden; text-overflow: ellipsis; }

.ff-guide__schedule {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    overflow: hidden;
}

.ff-guide__programme {
    padding-inline: .45cqw;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
}

.ff-guide__programme--updated { font-size: 1.55cqw; }

.ff-guide__programme--price { grid-column: span var(--ff-guide-price-span); }
.ff-guide__programme--distance { grid-column: span var(--ff-guide-distance-span); }
.ff-guide__programme--updated { grid-column: span var(--ff-guide-updated-span); }

.ff-guide__row:nth-child(6n + 2) {
    --ff-guide-price-span: 4;
    --ff-guide-distance-span: 4;
    --ff-guide-updated-span: 4;
}

.ff-guide__row:nth-child(6n + 3) {
    --ff-guide-price-span: 6;
    --ff-guide-distance-span: 3;
    --ff-guide-updated-span: 3;
}

.ff-guide__row:nth-child(6n + 4) {
    --ff-guide-price-span: 4;
    --ff-guide-distance-span: 3;
    --ff-guide-updated-span: 5;
}

.ff-guide__row:nth-child(6n + 5) {
    --ff-guide-price-span: 5;
    --ff-guide-distance-span: 4;
    --ff-guide-updated-span: 3;
}

.ff-guide__row:nth-child(6n) {
    --ff-guide-price-span: 4;
    --ff-guide-distance-span: 3;
    --ff-guide-updated-span: 5;
}

.ff-guide__row.is-selected .ff-guide__channel,
.ff-guide__row.is-selected .ff-guide__programme,
.ff-guide__row:focus-visible .ff-guide__channel,
.ff-guide__row:focus-visible .ff-guide__programme {
    background: var(--ff-guide-yellow);
    color: #001153;
}

.ff-guide__row.is-selected::before,
.ff-guide__row:focus-visible::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: calc(32% - .95cqw);
    border-top: .72cqw solid transparent;
    border-right: .95cqw solid var(--ff-guide-orange);
    border-bottom: .72cqw solid transparent;
    transform: translateY(-50%);
}

.ff-guide__row.is-selected::after,
.ff-guide__row:focus-visible::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -.95cqw;
    border-top: .72cqw solid transparent;
    border-bottom: .72cqw solid transparent;
    border-left: .95cqw solid var(--ff-guide-orange);
    transform: translateY(-50%);
}

.ff-guide__row:focus-visible { outline: 0; }

.ff-guide__empty {
    display: grid;
    min-width: 0;
    grid-row: span 2;
    place-items: center;
    box-sizing: border-box;
    gap: .65cqw;
    padding: .75cqw 1.25cqw;
    background: var(--ff-guide-row);
    color: #fff;
    font-size: 1.8cqw;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: center;
}

.ff-guide__empty--retry {
    grid-row: span 3;
    font-size: 1.65cqw;
}

.ff-guide__empty--retry button {
    border: .18cqw solid #001153;
    border-radius: 0;
    padding: .55cqw 1.4cqw;
    background: var(--ff-guide-yellow);
    color: #001153;
    font: inherit;
    font-size: 1.45cqw;
    font-weight: 900;
    cursor: pointer;
}

.ff-guide__empty--retry button:focus-visible {
    outline: .28cqw solid var(--ff-guide-orange);
    outline-offset: .2cqw;
}

.ff-guide__listings-footer {
    padding-top: 1.1cqw;
}

.ff-guide__remote-keys {
    justify-content: space-between;
    gap: 1cqw;
}

.ff-guide__remote-keys button { font-size: 1.7cqw; }
.ff-guide__remote-keys button:disabled { opacity: .42; }

.ff-guide__listings-footer p {
    margin: 1.05cqw 0 0;
    color: #001153;
    font-size: 1.75cqw;
    font-weight: 900;
}

.ff-guide__listings-footer p b {
    padding: 0 .45cqw;
    background: var(--ff-guide-yellow);
}

.ff-guide__listings-footer p span { float: right; }

/* Selecting a listing tunes the map as though it were the television
   programme, with a period search-and-scan information banner. */
.ff-guide-playback {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    animation: ff-guide-tune-in 150ms steps(2, end) both;
}

.ff-guide-playback__screen {
    position: relative;
    width: min(100vw, calc(100vh * 4 / 3), 1024px);
    aspect-ratio: 4 / 3;
    container-type: inline-size;
    box-shadow: 0 0 0 100vmax #090909;
    pointer-events: none;
}

.ff-guide-playback__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .045;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 1px, transparent 1px 3px);
    mix-blend-mode: soft-light;
}

.ff-guide-playback__brand {
    position: absolute;
    top: 3.2cqw;
    right: 4.2cqw;
    z-index: 2;
    padding: .7cqw .9cqw;
    border: .12cqw solid rgba(255, 255, 255, .52);
    background: rgba(0, 24, 82, .62);
    box-shadow: .18cqw .18cqw 0 rgba(0, 10, 48, .55);
    color: rgba(255, 255, 255, .94);
    font: 900 2cqw/1 Arial, Helvetica, sans-serif;
    letter-spacing: .025em;
    pointer-events: none;
    text-shadow: .1cqw .1cqw rgba(0, 16, 64, .8);
}

.ff-guide-playback__banner {
    position: absolute;
    z-index: 2;
    right: 6.8cqw;
    bottom: 4.2cqw;
    left: 6.8cqw;
    pointer-events: auto;
    background: #062e89;
    box-shadow: .45cqw .45cqw 0 rgba(0, 16, 75, .75);
    font-weight: 900;
}

.ff-guide-playback__header {
    display: grid;
    grid-template-columns: 8.2cqw minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 5.2cqw;
    border-bottom: .28cqw solid var(--ff-guide-line);
}

.ff-guide-playback__channel {
    display: grid;
    place-items: center;
    border-right: .28cqw solid var(--ff-guide-line);
    color: #fff;
    font-size: 2.45cqw;
    font-variant-numeric: tabular-nums;
}

.ff-guide-playback__station {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: .55cqw 1cqw;
}

.ff-guide-playback__station span {
    overflow: hidden;
    font-size: 2cqw;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-guide-playback__station small {
    display: flex;
    align-items: center;
    gap: .45cqw;
    margin-top: .25cqw;
    color: #a9cdf0;
    font-size: 1.25cqw;
    font-weight: 700;
}

.ff-guide-playback__station small b {
    color: #fff;
    font-weight: 900;
}

.ff-guide-playback__station small i {
    font-style: normal;
}

.ff-guide-playback__fuel {
    display: grid;
    min-width: 14cqw;
    place-items: center;
    padding: 0 1cqw;
    background: #073596;
    color: #a9cdf0;
    font-size: 1.55cqw;
}

.ff-guide-playback__programme {
    display: grid;
    grid-template-columns: 24cqw minmax(0, 1fr);
    min-height: 5.2cqw;
    background: var(--ff-guide-yellow);
    color: #001153;
}

.ff-guide-playback__programme > div {
    display: flex;
    align-items: baseline;
    gap: .8cqw;
    padding: .75cqw 1cqw;
    border-right: .28cqw solid var(--ff-guide-orange);
}

.ff-guide-playback__programme small { font-size: 1.15cqw; }
.ff-guide-playback__programme strong { font-size: 2.35cqw; font-variant-numeric: tabular-nums; }

.ff-guide-playback__programme p {
    display: flex;
    align-items: center;
    gap: .45cqw;
    margin: 0;
    padding: 0 1.1cqw;
    font-size: 1.65cqw;
}

.ff-guide-playback__details {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .35cqw;
    padding: 1cqw;
    border-bottom: .28cqw solid var(--ff-guide-line);
    color: #fff;
    font-size: 1.45cqw;
}

.ff-guide-playback__details p { margin: 0; }
.ff-guide-playback__address {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.ff-guide-playback__keys {
    display: flex;
    min-height: 4.2cqw;
    align-items: center;
    justify-content: space-between;
    gap: 1cqw;
    padding: .65cqw 1cqw;
    background: #b9ddf4;
}

.ff-guide-playback__keys button,
.ff-guide-playback__keys a {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .55cqw;
    padding: 0;
    border: 0;
    background: transparent;
    color: #001153;
    font: 900 1.3cqw/1 Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.ff-guide-playback__keys i {
    width: 2.1cqw;
    height: 1.55cqw;
    flex: 0 0 auto;
}

.ff-guide-playback__keys button:focus-visible,
.ff-guide-playback__keys a:focus-visible {
    outline: .3cqw solid #fff;
    outline-offset: .2cqw;
}

.ff-guide button:focus-visible,
.ff-guide input:focus-visible {
    outline: .35cqw solid #fff;
    outline-offset: .2cqw;
}

@keyframes ff-guide-tune-in {
    from { opacity: 0; filter: brightness(1.8); }
    to { opacity: 1; filter: brightness(1); }
}

@media (max-width: 700px) {
    .ff-guide__primary-nav button { font-size: 1.6cqw; }
    .ff-guide__menu button { min-height: 5.1cqw; font-size: 2.5cqw; }
    .ff-guide__panel--categories { padding-top: 2cqw; }
    .ff-guide__category-keys { margin-top: .8cqw; }
    .ff-guide__panel--listings { grid-template-rows: 6.8cqw 3.5cqw auto 9cqw; }
    .ff-guide__grid { grid-auto-rows: 5cqw; }
    .ff-guide__row { font-size: 2.05cqw; }
    .ff-guide__programme--updated { font-size: 1.7cqw; }
    .ff-guide__remote-keys button { font-size: 1.65cqw; }
    .ff-guide-playback__banner { right: 4cqw; bottom: 3cqw; left: 4cqw; }
    .ff-guide-playback__station span { font-size: 2.15cqw; }
    .ff-guide-playback__details { font-size: 1.7cqw; }
    .ff-guide-playback__keys button,
    .ff-guide-playback__keys a { font-size: 1.55cqw; }
}

@media (prefers-reduced-motion: reduce) {
    .ff-guide,
    .ff-guide-playback,
    .ff-retro-tv-corner-ribbon { animation: none !important; transition: none !important; }
}