:root {
    color-scheme: light dark;

    --bg: #f6f6f3;
    --surface: #ffffff;
    --text: #141414;
    --muted: #5c5c58;
    --border: #dcdcd6;
    --accent: #fff200;   /* logo yellow, always paired with --on-accent */
    --on-accent: #141414;
    --focus: #141414;
    --icon-theme: var(--icon-moon);   /* the mode the switch goes to */
    --meter-normal: #2e9e4f;
    --meter-high: #d9a800;
    --meter-clip: #d93025;

    --radius: 12px;
    --gutter: clamp(1rem, 4vw, 2rem);
    /* Keep content clear of the notch in landscape (with viewport-fit=cover). */
    --gutter-left: max(var(--gutter), env(safe-area-inset-left));
    --gutter-right: max(var(--gutter), env(safe-area-inset-right));

    --icon-play: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>');
    --icon-stop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>');
    --icon-external: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>');
    --icon-globe: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>');
    --icon-sun: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>');
    --icon-moon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>');
    --icon-user: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
    --icon-mute: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 9a5 5 0 0 1 .95 2.293"/><path d="M19.364 5.636a9 9 0 0 1 1.889 9.96"/><path d="m2 2 20 20"/><path d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"/><path d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686"/></svg>');
    --icon-close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
    --icon-help: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 8.5a3.5 3.5 0 0 1 6.8 1.2c0 2.3-3.3 3.3-3.3 3.3v1"/><path d="M12 18.5h.01"/></svg>');
}

/* Dark mode follows the browser, unless the listener chose a mode with the
   switch in the header (data-theme on <html>, see js/theme.js). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #121212;
        --surface: #1d1d1b;
        --text: #f3f3ee;
        --muted: #a8a8a0;
        --border: #34342f;
        --focus: #fff200;
        --icon-theme: var(--icon-sun);
        --meter-normal: #3fbf63;
        --meter-high: #f5c400;
        --meter-clip: #ff5a4f;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #121212;
    --surface: #1d1d1b;
    --text: #f3f3ee;
    --muted: #a8a8a0;
    --border: #34342f;
    --focus: #fff200;
    --icon-theme: var(--icon-sun);
    --meter-normal: #3fbf63;
    --meter-high: #f5c400;
    --meter-clip: #ff5a4f;
}
:root[data-theme="light"] {color-scheme: light;}

[hidden] {display: none !important;}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

*, *::before, *::after {box-sizing: border-box;}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    /* Native UI font per platform: San Francisco (iOS/macOS), Segoe UI (Windows),
       Roboto (Android/ChromeOS), Noto/Ubuntu/Cantarell (Linux desktops). */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
                 "Helvetica Neue", Arial, system-ui, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    font-size: 1rem;
    line-height: 1.5;
    /* Header, content and footer; the footer stays at the bottom of short pages. */
    min-height: 100dvh;
    display: grid; grid-template-rows: auto 1fr auto;
}

a {color: inherit;}
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}


/* Header */

/* Stays at the top, keeping the status bar and Dynamic Island area clear. */
.site-header {
    position: sticky; top: 0; z-index: 10;
    padding-top: env(safe-area-inset-top);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.site-header .inner {
    display: flex; align-items: center; gap: .875rem;
    max-width: 72rem; margin: 0 auto;
    padding: .75rem var(--gutter-right) .75rem var(--gutter-left);
}
.brand {
    display: flex; align-items: center; gap: .875rem;
    min-width: 0; margin-right: auto;
    text-decoration: none;
}
.brand img {
    width: 3rem; height: 3rem;
    border-radius: 8px;
    flex: none;
}
.brand h1 {
    margin: 0;
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}
/* A native select, invisible on top of a pill showing the language code. */
.language {
    position: relative; flex: none;
    display: flex; align-items: center; gap: .375rem;
    padding: .4rem .75rem;
    border: 1px solid var(--border); border-radius: 999px;
    font-size: .875rem; font-weight: 600; color: var(--muted);
}
.language::before {
    content: ""; width: 1rem; height: 1rem;
    background: currentColor;
    -webkit-mask: var(--icon-globe) center/contain no-repeat;
    mask: var(--icon-globe) center/contain no-repeat;
}
.language select {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
    font-size: 1rem;
}
.language:hover, .language:focus-within {border-color: var(--text); color: var(--text);}
.language:has(select:focus-visible) {outline: 3px solid var(--focus); outline-offset: 2px;}

.theme-toggle {
    flex: none;
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem; padding: 0;
    border: 1px solid var(--border); border-radius: 999px;
    background: none; color: var(--muted);
    cursor: pointer;
}
.theme-toggle::before {
    content: ""; width: 1rem; height: 1rem;
    background: currentColor;
    -webkit-mask: var(--icon-theme) center/contain no-repeat;
    mask: var(--icon-theme) center/contain no-repeat;
}
.theme-toggle:hover {border-color: var(--text); color: var(--text);}

@media (max-width: 28rem) {
    .site-header .inner {gap: .5rem;}
    .brand {gap: .5rem;}
    .brand img {width: 2.5rem; height: 2.5rem;}
    .brand h1 {font-size: 1.125rem;}
    .language {padding: .4rem .625rem;}
    .language::before {display: none;}
}
@media (max-width: 22rem) {
    .brand img {width: 2.25rem; height: 2.25rem;}
    .brand h1 {font-size: .9375rem;}
    .language {padding: .375rem .5rem;}
    .theme-toggle {width: 2.125rem; height: 2.125rem;}
}


/* In the c3lingo app (html.in-app), the app shows its own name and language:
   the header only keeps the status bar clear. Wherever the safe areas put the
   status bar, the header and the content gutters follow it. */
.in-app .site-header {border-bottom: none;}
.in-app .site-header .inner {display: none;}
.in-app .app-teaser {display: none;}

/* Content */

main {
    width: 100%; max-width: 72rem; margin: 0 auto;
    padding: 1.5rem var(--gutter-right) 9rem var(--gutter-left);
}

/* Below the space kept for the miniplayer, which may cover it. */
.site-footer {
    width: 100%; max-width: 72rem; margin: 0 auto;
    padding: 0 var(--gutter-right) calc(.75rem + env(safe-area-inset-bottom)) var(--gutter-left);
    display: flex; flex-wrap: wrap; gap: 0 1rem;
    font-size: .75rem; color: var(--muted);
}
.site-footer a {text-decoration: none;}
@media (hover: hover) {
    .site-footer a:hover {color: var(--text); text-decoration: underline;}
}

.greeter {
    display: grid; gap: .5rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin-bottom: 1.5rem;
}
.greeter section {min-width: 0;}
.greeter h2 {
    margin: 0 0 .25rem;
    font-size: 1.25rem; font-weight: 700;
    hyphens: auto;
}
.greeter p {margin: 0; color: var(--muted);}

/* A link or button at the end of the headline's row (soundcheck, start meters). */
.intro {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem 1rem;
}
.intro h2 {margin: 0;}
.intro .actions {display: flex; gap: .5rem;}
.intro p {grid-column: 1 / -1;}
.pill {
    padding: .4rem .8rem;
    border: 1px solid var(--border); border-radius: 999px;
    background: none;
    font: inherit; font-size: .875rem; color: var(--muted);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.pill:hover {background: var(--accent); color: var(--on-accent); border-color: var(--accent);}
/* Round, with a question mark as tall as the other pills' text. */
.pill.help-button {display: grid; place-items: center; padding: .4rem;}
.pill.help-button::before {
    content: ""; width: 1.3125rem; height: 1.3125rem;
    background: currentColor;
    -webkit-mask: var(--icon-help) center/contain no-repeat;
    mask: var(--icon-help) center/contain no-repeat;
}
/* The one action the page waits for (start meters). */
.pill.primary {
    padding: .6rem 1.25rem;
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
    font-size: 1rem; font-weight: 700;
    box-shadow: 0 2px 8px rgb(0 0 0 / .2);
}
.pill.primary:hover {border-color: var(--text);}

/* Teaser for the apps (js/app-teaser.js): text, store links, dismiss button. */
.app-teaser {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
    margin-bottom: 1.5rem;
    padding: .625rem .625rem .625rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: var(--radius);
}
.app-teaser p {margin: 0; font-weight: 600;}
.app-teaser .stores {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 0; padding: 0; list-style: none;
}
.app-teaser .dismiss, .help .close {
    flex: none;
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem; margin-left: auto; padding: 0;
    border: none; border-radius: 999px;
    background: none; color: var(--muted);
    cursor: pointer;
}
.app-teaser .dismiss::before, .help .close::before {
    content: ""; width: 1.125rem; height: 1.125rem;
    background: currentColor;
    -webkit-mask: var(--icon-close) center/contain no-repeat;
    mask: var(--icon-close) center/contain no-repeat;
}
.app-teaser .dismiss:hover, .help .close:hover {color: var(--text); background: var(--bg);}


/* Help (js/help.js): title and close button, which stay at the top when the
   text scrolls, and the text. Padding only inside, so that a click on the
   dialog itself is one on the backdrop. */
.help {
    width: min(40rem, 100% - 2rem);
    max-height: min(100% - 2rem, 48rem);
    padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    box-shadow: 0 4px 24px rgb(0 0 0 / .14);
}
.help::backdrop {background: rgb(0 0 0 / .4);}
.help-header {
    position: sticky; top: 0;
    display: flex; align-items: start; gap: 1rem;
    padding: 1rem 1rem .25rem 1.25rem;
    background: var(--surface);
}
.help-header h2 {
    margin: .25rem auto 0 0;
    font-size: 1.25rem; font-weight: 700;
    hyphens: auto;
}
.help-body {padding: 0 1.25rem 1.25rem;}
.help-body h3 {margin: 1.25rem 0 .25rem; font-size: 1rem; font-weight: 700;}
.help-body p, .help-body ul {margin: .5rem 0;}
.help-body ul {padding-left: 1.25rem;}
.help-body li + li {margin-top: .25rem;}

.message .greeter section {
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.25rem;
}
.message .greeter p {color: var(--text);}


/* Hall grid */

#grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.hall {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.125rem;
}
/* The hall a link pointed to, see highlightHall() in js/hall-grid.js. The
   ring is in the text colour, as the yellow alone is too faint on white. */
.hall.linked {
    border-color: var(--text);
    box-shadow: 0 0 0 1px var(--text), inset 0 5px 0 var(--accent);
}
.hall h2 {
    margin: 0;
    font-size: 1.5rem; font-weight: 700;
}
.talkinfo {
    margin: .25rem 0 1rem;
    min-height: 1.5em;
    font-size: .9375rem; color: var(--muted);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
}
.talkinfo .when {font-weight: 600; color: var(--text);}

/* Links that open in a new tab: underlined, with an icon after the text. */
a.external {
    text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: .15em;
}
a.external:hover {color: var(--text);}
/* The talk line clips overflow (line clamp), which would cut off the focus ring. */
.talkinfo a.external:focus-visible {
    outline: none;
    background: var(--accent); color: var(--on-accent);
}
a.external::after {
    content: "";
    display: inline-block; vertical-align: -.1em;
    width: .9em; height: .9em; margin-left: .25em;
    background: currentColor;
    -webkit-mask: var(--icon-external) center/contain no-repeat;
    mask: var(--icon-external) center/contain no-repeat;
}

.channels {
    list-style: none; margin: auto 0 0; padding: 0;
    display: grid; gap: .5rem;
}
.channels a {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    min-height: 3rem;
    padding: .625rem .875rem;
    border: 1px solid var(--border); border-radius: 8px;
    font-weight: 600; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.channels a::after {
    content: ""; flex: none;
    width: 1.25rem; height: 1.25rem;
    background: currentColor;
    -webkit-mask: var(--icon-play) center/contain no-repeat;
    mask: var(--icon-play) center/contain no-repeat;
    opacity: .5;
}
/* Touch screens keep a tapped link hovered (iOS) or focused (Android), which
   would leave the highlight on after Stop: only real pointers get the hover
   style, and only keyboard focus the focus style. */
.channels a:focus-visible, .channels a[aria-current] {
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.channels a:focus-visible::after, .channels a[aria-current]::after {opacity: 1;}
@media (hover: hover) {
    .channels a:hover {
        background: var(--accent); color: var(--on-accent); border-color: var(--accent);
    }
    .channels a:hover::after {opacity: 1;}
}


/* Audio level meters (public-meters.html, see js/meters.js): number, bar with
   the current level and a mark at the peak, the peak or the state, and the
   number of listeners. */

.levels {
    display: grid; align-items: center; gap: .75rem;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    margin: 1rem 0 0; padding: 0;
    list-style: none;
}
.levels li {
    display: grid; grid-column: 1 / -1;
    grid-template-columns: subgrid; align-items: center;
}
.levels .number {font-weight: 700; font-variant-numeric: tabular-nums;}
.levels .bar {
    --level: 0%; --peak: 0%; --color: var(--meter-normal);
    position: relative; height: .75rem;
    border-radius: 999px; background: var(--border);
    overflow: hidden;
}
.levels .bar[data-zone="high"] {--color: var(--meter-high);}
.levels .bar[data-zone="clip"] {--color: var(--meter-clip);}
.levels .level {
    position: absolute; inset: 0 auto 0 0;
    width: var(--level);
    background: var(--color);
    transition: width .1s linear;
}
.levels .peak {
    position: absolute; top: 0; bottom: 0; left: var(--peak);
    width: 2px; margin-left: -2px;
    background: var(--text);
}
.levels li:not([data-state="playing"]) .peak {display: none;}
.levels .value {
    min-width: 4.5rem;
    font-size: .875rem; font-variant-numeric: tabular-nums;
    text-align: right; white-space: nowrap;
    color: var(--muted);
}
.levels li[data-state="playing"] .value {color: var(--text);}
.levels .listeners {
    display: flex; align-items: center; justify-content: flex-end; gap: .25rem;
    min-width: 3rem;
    font-size: .875rem; font-variant-numeric: tabular-nums;
    color: var(--muted);
}
.levels .listeners::before {
    content: ""; width: .875rem; height: .875rem;
    background: currentColor;
    -webkit-mask: var(--icon-user) center/contain no-repeat;
    mask: var(--icon-user) center/contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .levels .level {transition: none;}
}


/* Player controls, see js/player-controls.js for the state attributes */

/* A card across the content column: state, hall and language, and talk on the
   left, buttons on the right. When narrow, state and hall and language are
   stacked above the talk and the buttons. */
#miniplayer {
    position: fixed; z-index: 10;
    left: 0; right: 0; bottom: calc(1rem + env(safe-area-inset-bottom));
    width: calc(min(100%, 72rem) - var(--gutter-left) - var(--gutter-right));
    margin: 0 auto;
    display: grid; align-items: center; gap: 0 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "status status"
        "title title"
        "message message"
        "talk buttons";
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 4px 24px rgb(0 0 0 / .14);
}
@media (min-width: 36rem) {
    #miniplayer {
        bottom: calc(1.5rem + env(safe-area-inset-bottom));
        gap: 0 1.5rem;
        grid-template-areas:
            "status buttons"
            "title buttons"
            "talk buttons"
            "message buttons";
        padding: 1rem 1.25rem;
    }
}
#playerstatus {
    grid-area: status;
    margin: 0;
    font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted);
}
#playertitle {
    grid-area: title;
    margin: 0;
    font-size: 1.125rem; font-weight: 700; line-height: 1.3;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}
#playertalk {
    grid-area: talk;
    margin: 0;
    font-size: .875rem; color: var(--muted);
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}
#playertalk .when {font-weight: 600; color: var(--text);}
#playermessage {
    grid-area: message;
    margin: .25rem 0 0;
    font-size: .875rem;
}
#buttons, #playertalk {margin-top: .5rem;}
#buttons {grid-area: buttons; display: flex; gap: .5rem;}
@media (min-width: 36rem) {
    #buttons, #playertalk {margin-top: 0;}
}
#buttons button {
    width: 3rem; height: 3rem; padding: 0;
    border: 1px solid var(--border); border-radius: 50%;
    background: transparent; color: var(--text);
    cursor: pointer;
    display: grid; place-items: center;
}
#buttons button::before {
    content: "";
    width: 1.375rem; height: 1.375rem;
    background: currentColor;
    -webkit-mask: var(--icon) center/contain no-repeat;
    mask: var(--icon) center/contain no-repeat;
}
#buttons #mute {--icon: var(--icon-mute);}
#buttons #stop {--icon: var(--icon-stop);}
#buttons #play {--icon: var(--icon-play); display: none;}
#buttons #play, #miniplayer[data-muted] #mute {
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
#buttons button:hover {border-color: var(--text);}

#miniplayer[data-state="stopped"] #mute {display: none;}
#miniplayer[data-state="stopped"] #stop {display: none;}
#miniplayer[data-state="stopped"] #play {display: grid;}
#miniplayer[data-state="connecting"] #stop {animation: pulse 1s ease-in-out infinite alternate;}

@keyframes pulse {
    from {opacity: 1;}
    to {opacity: .4;}
}

@media (prefers-reduced-motion: reduce) {
    #miniplayer[data-state="connecting"] #stop {animation: none; opacity: .6;}
}

/* Windows high contrast: draw the mask icons in the button text colour. */
@media (forced-colors: active) {
    .channels a::after, #buttons button::before {
        forced-color-adjust: none;
        background: ButtonText;
    }
    #buttons button {border-color: ButtonText;}
    .channels a[aria-current] {outline: 2px solid Highlight; outline-offset: -2px;}
    .hall.linked {outline: 3px solid Highlight;}
}

@media (forced-colors: active) {
    .language::before, .theme-toggle::before, .app-teaser .dismiss::before, .help .close::before {forced-color-adjust: none; background: ButtonText;}
    .levels .listeners::before {forced-color-adjust: none; background: CanvasText;}
    a.external::after {forced-color-adjust: none; background: LinkText;}
}