/* Site chrome. Edit this file; do not inline in templates. */
:root {
    --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ink: #171717;
    --ink-soft: #5c5c5c;
    --foam: #f4f4f1;
    --mist: #b0b0aa;
    --teal: #1e6b38;
    --teal-deep: #16532b;
    --teal-text: #1a5c30;
    --apricot: #e3943a;
    --glass: rgba(255, 255, 255, 0.88);
    --line: rgba(23, 23, 23, 0.10);
    --good: #17803d;
    --bad: #dc2626;
    --danger: #b91c1c;
    --on-ink: #f7f7f4;
    --on-accent: #ffffff;
    --on-apricot: #1a1208;
    --warn-text: #b45309;
    --paper: #fafaf8;
    --panel: rgba(255, 255, 255, 0.92);
    --user-bg: #d2e6d6;
    --bot-bg: #f6f6f3;
    --sidebar: #141414;
    --sidebar-2: #181818;
    --sidebar-text: #c6c6c6;
    --sidebar-muted: #8a8a8a;
    --sidebar-active: #2a2a2a;
    --sidebar-width: 220px;
    --sidebar-collapsed: 52px;
    --ai-rail-width: 50%;
    --create-min-width: 18.75rem;
    --nav-indent: 0.95rem;
    --nav-indent-2: 0.8rem;
    --page-pad: clamp(1rem, 3.5vw, 2.25rem);
    --content-max: 720px;
    --content-wide: 960px;
    --content-narrow: 520px;
    --page-bg: #e3ebe4;
    --card: #ffffff;
    --scroll-thumb: rgba(23, 23, 23, 0.28);
    --scroll-thumb-hover: rgba(23, 23, 23, 0.42);
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-lg: rgba(0, 0, 0, 0.16);
    --accent-soft: color-mix(in srgb, var(--teal) 12%, transparent);
    --accent-ring: color-mix(in srgb, var(--teal) 22%, transparent);
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 12px;
    --r-2xl: 14px;
    --r-pill: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    margin: 8px;
    background: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--scroll-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: padding-box;
}
.fc-sidebar,
.fc-main.is-dark {
    --scroll-thumb: rgba(255, 255, 255, 0.28);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.42);
}
html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    background: var(--page-bg);
}
html.night {
    color-scheme: dark;
    --ink: #ededed;
    --ink-soft: #a3a3a3;
    --foam: #e8e8e8;
    --mist: #8d8d8d;
    --teal: #4caf6e;
    --teal-deep: #3d9a5c;
    --teal-text: #9ee0b4;
    --apricot: #f0a45c;
    --glass: rgba(28, 28, 28, 0.92);
    --line: rgba(255, 255, 255, 0.10);
    --good: #4ade80;
    --bad: #f87171;
    --danger: #f87171;
    --on-ink: #141414;
    --on-accent: #ffffff;
    --on-apricot: #1a1208;
    --warn-text: #f0c48a;
    --paper: #1a1a1a;
    --panel: rgba(28, 28, 28, 0.94);
    --user-bg: #262626;
    --bot-bg: #222222;
    --page-bg: #121814;
    --card: #1c1c1c;
    --scroll-thumb: rgba(255, 255, 255, 0.28);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.42);
    --shadow: rgba(0, 0, 0, 0.45);
    --shadow-lg: rgba(0, 0, 0, 0.55);
    --accent-soft: color-mix(in srgb, var(--teal) 18%, transparent);
    --accent-ring: color-mix(in srgb, var(--teal) 28%, transparent);
}
/* Section themes share the home (forest) color scape — no per-mode accent overrides. */
html, body.fc-body {
    min-height: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: auto;
}
body.fc-body {
    font-family: var(--font-ui);
    color: var(--ink);
    background: var(--page-bg);
}
.brand, .headline, h1, h2, h3, .fc-brand, .fc-main-brand,
.mode-title, .face-text, .prompt-text, .score-hero .big {
    font-family: var(--font-ui);
    letter-spacing: -0.015em;
}
html[dir="rtl"] .mode-grid,
html[dir="rtl"] .hero-content { text-align: center; }
html[dir="rtl"] textarea,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"] { text-align: right; }
.fc-app {
    display: flex;
    position: relative;
    height: 100%;
    height: 100dvh;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}
html.is-pinch-zoomed,
html.is-pinch-zoomed body.fc-body {
    overscroll-behavior: auto;
}
html.is-pinch-zoomed .fc-app,
html.is-pinch-zoomed .fc-main,
html.is-pinch-zoomed .fc-main-scroll,
html.is-pinch-zoomed .fc-sidebar {
    overflow: auto !important;
    overscroll-behavior: auto !important;
    max-width: none;
}
html.is-pinch-zoomed * {
    overscroll-behavior: auto !important;
}
.fc-ai-rail {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: max(var(--ai-rail-width), var(--create-min-width));
    min-width: var(--create-min-width);
    max-width: 72%;
    z-index: 35;
    flex-direction: column;
    min-height: 0;
    background: var(--paper);
    color: var(--ink);
    border-left: 1px solid var(--line);
    box-shadow: none;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.45, 0, 0.25, 1), visibility 0s linear 0.55s;
}
.fc-app.is-ai-open .fc-ai-rail {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.55s cubic-bezier(0.45, 0, 0.25, 1), visibility 0s;
}
.fc-main {
    contain: layout;
    transition: margin-right 0.55s cubic-bezier(0.45, 0, 0.25, 1);
}
@media (min-width: 861px) {
    .fc-app.is-ai-open .fc-main {
        margin-right: max(var(--ai-main-gutter, var(--ai-rail-width)), var(--create-min-width));
    }
}
@media (max-width: 860px), (min-width: 861px) and (pointer: coarse) {
    .fc-ai-rail {
        position: fixed;
        inset: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        z-index: 50;
        padding-top: env(safe-area-inset-top);
        box-shadow: none;
    }
}
.fc-app.is-ai-resizing {
    cursor: ew-resize;
    user-select: none;
}
.fc-app.is-ai-live-resize .fc-ai-rail,
.fc-app.is-ai-live-resize .fc-main,
.fc-app.is-ai-resizing .fc-ai-rail,
.fc-app.is-ai-resizing .fc-main {
    transition: none !important;
}
.fc-app.is-ai-live-resize .fc-ai-rail {
    will-change: width;
    box-shadow: none;
}
.fc-app.is-ai-resizing .fc-ai-rail {
    box-shadow: none;
}
.ai-rail-resizer {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -7px;
    width: 14px;
    z-index: 45;
    cursor: default;
    touch-action: none;
    background: transparent;
    pointer-events: none;
}
.ai-rail-resizer::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 6px;
    width: 2px;
    background: var(--line);
}
.ai-rail-nub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 2.75rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: none;
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
}
.ai-rail-resizer:has(.ai-rail-nub:hover)::before,
.fc-app.is-ai-resizing .ai-rail-resizer::before {
    background: var(--teal);
}
.ai-rail-nub:hover,
.fc-app.is-ai-resizing .ai-rail-nub {
    border-color: var(--teal);
    background: var(--foam);
}
@media (min-width: 861px) {
    .fc-app.is-ai-open .ai-rail-resizer { display: block; }
}
.fc-sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-2) 100%);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.06);
    z-index: 30;
    overflow-x: hidden;
    transition: width 0.24s ease, box-shadow 0.24s ease;
}
/* Desktop mouse: small icon bar; icons stay put; labels fade; logo stays left */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
    .fc-app { position: relative; }
    .fc-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sidebar-collapsed);
        flex: none;
        z-index: 40;
        overflow-x: hidden !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .fc-sidebar::-webkit-scrollbar:horizontal {
        height: 0;
        display: none;
    }
    .fc-sidebar:hover,
    .fc-sidebar:focus-within,
    .fc-sidebar.is-expanded,
    html.fc-keep-rail .fc-sidebar {
        width: var(--sidebar-width);
        box-shadow: 10px 0 28px rgba(0, 0, 0, 0.28);
    }
    html.fc-keep-rail .fc-sidebar,
    html.fc-keep-rail .fc-brand-compact,
    html.fc-keep-rail .fc-brand-full,
    .fc-sidebar.is-no-rail-motion,
    .fc-sidebar.is-no-rail-motion .fc-brand-compact,
    .fc-sidebar.is-no-rail-motion .fc-brand-full {
        transition: none;
    }
    .fc-main {
        position: relative;
        z-index: 1;
        margin-left: var(--sidebar-collapsed);
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }
    .fc-sidebar-top,
    .fc-sidebar-nav,
    .fc-sidebar-foot {
        width: var(--sidebar-width);
        max-width: var(--sidebar-width);
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0.55rem;
    }
    .fc-sidebar-top {
        justify-content: flex-start;
        align-items: center;
        min-height: 2.6rem;
        padding: 0.55rem 0 0.45rem;
        overflow: visible;
    }
    .fc-sidebar-nav { padding-top: 0.4rem; padding-bottom: 0.4rem; }
    .fc-sidebar-foot {
        padding-top: 0.4rem;
        padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
    }
    .fc-brand {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        width: var(--sidebar-collapsed);
        flex: 0 0 var(--sidebar-collapsed);
        min-height: 1.5rem;
        overflow: visible;
        background: transparent;
        text-decoration: none;
        color: #f4f4f1;
        box-sizing: border-box;
        font-family: var(--font-ui);
        font-weight: 650;
        font-size: 1.02rem;
        letter-spacing: -0.03em;
        line-height: 1.15;
        cursor: pointer;
    }
    .fc-sidebar:hover .fc-brand,
    .fc-sidebar:focus-within .fc-brand,
    .fc-sidebar.is-expanded .fc-brand,
    html.fc-keep-rail .fc-brand {
        width: var(--sidebar-width);
        flex-basis: var(--sidebar-width);
    }
    .fc-brand-rail {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--sidebar-collapsed);
        flex: 0 0 var(--sidebar-collapsed);
        overflow: visible;
        pointer-events: none;
    }
    .fc-brand-stack {
        position: relative;
        display: block;
        width: max-content;
        pointer-events: none;
    }
    .fc-brand-compact,
    .fc-brand-full {
        color: inherit;
        font-family: inherit;
        font-weight: inherit;
        font-size: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        white-space: nowrap;
        background: transparent;
        pointer-events: none;
    }
    .fc-brand-compact {
        display: block;
        opacity: 1;
        transition: opacity 0.24s ease;
    }
    .fc-brand-full {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 0.24s ease;
    }
    .fc-sidebar:hover .fc-brand-compact,
    .fc-sidebar:focus-within .fc-brand-compact,
    .fc-sidebar.is-expanded .fc-brand-compact {
        opacity: 0;
    }
    .fc-sidebar:hover .fc-brand-full,
    .fc-sidebar:focus-within .fc-brand-full,
    .fc-sidebar.is-expanded .fc-brand-full {
        opacity: 1;
    }
    .fc-nav-group { margin-bottom: 0.5rem; }
    .fc-nav-item {
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        padding: 0.4rem 0.45rem 0.4rem 0;
        min-height: 2.2rem;
        border-radius: 8px;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
    .fc-nav-ico {
        flex: 0 0 var(--sidebar-collapsed);
        width: var(--sidebar-collapsed);
        text-align: center;
        font-size: 0.95rem;
        transform: none !important;
    }
    /* Text collapses to a short bar, then fades — no icon scaling */
    .fc-nav-item span:not(.fc-nav-ico) {
        display: inline-block;
        max-width: 0.55rem;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        transform: none !important;
        transition: max-width 0.22s ease, opacity 0.16s ease;
    }
    .fc-sidebar:hover .fc-nav-item span:not(.fc-nav-ico),
    .fc-sidebar:focus-within .fc-nav-item span:not(.fc-nav-ico),
    .fc-sidebar.is-expanded .fc-nav-item span:not(.fc-nav-ico) {
        max-width: 11rem;
        opacity: 1;
        transition-delay: 0.06s;
    }
    .fc-nav-tree { gap: 0.05rem; }
    /* Collapsed rail: keep every icon in the same column. Indent only when open. */
    .fc-sidebar .fc-nav-children,
    .fc-sidebar .fc-nav-children .fc-nav-children {
        padding-left: 0;
        transition: padding-left 0.24s ease;
    }
    .fc-sidebar:hover .fc-nav-children,
    .fc-sidebar:focus-within .fc-nav-children,
    .fc-sidebar.is-expanded .fc-nav-children {
        padding-left: var(--nav-indent);
    }
    .fc-sidebar:hover .fc-nav-children .fc-nav-children,
    .fc-sidebar:focus-within .fc-nav-children .fc-nav-children,
    .fc-sidebar.is-expanded .fc-nav-children .fc-nav-children {
        padding-left: var(--nav-indent-2);
    }
    .fc-nav-item.is-open {
        color: #fff;
    }
    .fc-nav-leaf {
        display: flex;
        align-items: center;
        gap: 0;
        margin: 0 0 0.1rem;
        padding: 0.25rem 0.45rem 0.25rem 0;
        min-height: 1.7rem;
        color: var(--sidebar-muted);
        font-size: 0.78rem;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        border-radius: 8px;
    }
    .fc-nav-leaf .fc-nav-ico {
        font-size: 0.7rem;
        opacity: 0.65;
    }
    .fc-nav-leaf span:not(.fc-nav-ico) {
        display: inline-block;
        max-width: 0.55rem;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: max-width 0.22s ease, opacity 0.16s ease;
    }
    .fc-sidebar:hover .fc-nav-leaf span:not(.fc-nav-ico),
    .fc-sidebar:focus-within .fc-nav-leaf span:not(.fc-nav-ico),
    .fc-sidebar.is-expanded .fc-nav-leaf span:not(.fc-nav-ico) {
        max-width: 10rem;
        opacity: 1;
        transition-delay: 0.06s;
    }
    .fc-sidebar:hover .fc-nav-leaf:hover,
    .fc-sidebar.is-expanded .fc-nav-leaf:hover {
        color: #e8e8e8;
        background: rgba(255,255,255,0.04);
    }
    .fc-sidebar:hover .fc-nav-item:hover,
    .fc-sidebar:focus-within .fc-nav-item:hover,
    .fc-sidebar.is-expanded .fc-nav-item:hover {
        background: rgba(255,255,255,0.05) !important;
    }
    .fc-sidebar:hover .fc-nav-item.is-active,
    .fc-sidebar:focus-within .fc-nav-item.is-active,
    .fc-sidebar.is-expanded .fc-nav-item.is-active {
        background: var(--sidebar-active) !important;
        border-color: transparent !important;
        color: #fff;
    }
    .fc-sidebar-collapse { display: none !important; }
}
/* Wide mouse desktops: no open button (hover rail) */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
    .fc-mobile-menu { display: none !important; }
}
.fc-app.is-collapsed .fc-sidebar {
    width: var(--sidebar-collapsed);
    flex-basis: var(--sidebar-collapsed);
}
.fc-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 0.75rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    min-height: 3.25rem;
}
.fc-brand {
    color: #f4f4f1;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    background: transparent;
    font-family: var(--font-ui);
    font-weight: 650;
    font-size: 1.02rem;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.fc-brand-rail { display: contents; }
.fc-brand-compact { display: none; }
.fc-brand-stack { display: contents; }
.fc-brand-full {
    display: inline;
    white-space: nowrap;
    background: transparent;
}
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
    .fc-sidebar-top {
        justify-content: flex-start;
        padding: 0.55rem 0 0.45rem;
        overflow: visible;
    }
    .fc-brand {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        width: var(--sidebar-collapsed);
        flex: 0 0 var(--sidebar-collapsed);
        margin: 0;
        padding: 0;
        overflow: visible;
        font-size: 1.02rem;
        letter-spacing: -0.03em;
        cursor: pointer;
    }
    .fc-sidebar:hover .fc-brand,
    .fc-sidebar:focus-within .fc-brand,
    .fc-sidebar.is-expanded .fc-brand,
    html.fc-keep-rail .fc-brand {
        width: var(--sidebar-width);
        flex-basis: var(--sidebar-width);
    }
    .fc-brand-rail {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--sidebar-collapsed);
        flex: 0 0 var(--sidebar-collapsed);
        overflow: visible;
        pointer-events: none;
    }
    .fc-brand-stack {
        display: block;
        position: relative;
        width: max-content;
        pointer-events: none;
    }
    .fc-brand-compact,
    .fc-brand-full {
        pointer-events: none;
    }
    .fc-brand-compact {
        display: block;
        opacity: 1;
        font-size: inherit;
        letter-spacing: inherit;
        transition: opacity 0.24s ease;
    }
    .fc-brand-full {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        font-size: inherit;
        letter-spacing: inherit;
        opacity: 0;
        transition: opacity 0.24s ease;
    }
    .fc-sidebar:hover .fc-brand-compact,
    .fc-sidebar:focus-within .fc-brand-compact,
    .fc-sidebar.is-expanded .fc-brand-compact {
        opacity: 0;
    }
    .fc-sidebar:hover .fc-brand-full,
    .fc-sidebar:focus-within .fc-brand-full,
    .fc-sidebar.is-expanded .fc-brand-full {
        opacity: 1;
    }
}
.fc-sidebar-collapse {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    display: grid;
    place-content: center;
    gap: 3px;
    cursor: pointer;
    padding: 0;
    color: var(--sidebar-text);
    flex: 0 0 auto;
}
.fc-sidebar-collapse span {
    display: block;
    width: 0.7rem;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
}
.fc-sidebar-collapse:hover {
    background: rgba(255,255,255,0.08);
    transform: none;
    border-color: rgba(255,255,255,0.18);
}
.fc-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 0.55rem;
}
.fc-sidebar-foot {
    padding: 0.55rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
}
.fc-nav-tree {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.fc-nav-branch {
    display: flex;
    flex-direction: column;
}
.fc-nav-children {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding-left: var(--nav-indent);
}
.fc-nav-children .fc-nav-children {
    padding-left: var(--nav-indent-2);
}
.fc-nav-children[data-branch-children],
.fc-nav-children[data-nested-children] {
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transform-origin: top center;
}
.fc-nav-children-inner {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.fc-nav-children.is-ghost { pointer-events: none; }
.fc-sidebar.is-branch-enter [data-branch-children]:not(.is-ghost),
.fc-sidebar.is-nested-enter [data-nested-children]:not(.is-ghost) {
    height: 0;
    opacity: 0;
    transform: translateY(-0.4rem);
    pointer-events: none;
}
.fc-app.is-collapsed .fc-nav-sub,
.fc-app.is-collapsed .fc-nav-item span:not(.fc-nav-ico),
.fc-app.is-collapsed .fc-nav-leaf span:not(.fc-nav-ico) {
    display: none;
}
.fc-nav-leaf {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--sidebar-muted);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.35rem 0.6rem 0.35rem 0.6rem;
    margin: 0 0 0.1rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2rem;
}
.fc-nav-leaf:hover { color: #e8e8e8; background: rgba(255,255,255,0.04); }
.fc-nav-item.is-open {
    color: #fff;
}
.fc-nav-sub {
    padding: 0.15rem 0.45rem 0.55rem 0.6rem;
}
.fc-nav-deck-select {
    width: 100%;
    appearance: none;
    background: rgba(255,255,255,0.06);
    color: #e8e8e8;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 0.45rem 1.75rem 0.45rem 0.55rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c6c6c6' d='M1.4.3 6 4.9 10.6.3 12 1.7 6 7.7 0 1.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
}
.fc-nav-deck-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--teal) 70%, transparent);
}
.fc-nav-deck-select option {
    color: #171717;
    background: #fff;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.mlh-select {
    position: relative;
    display: inline-block;
    min-width: 11rem;
    max-width: 100%;
    vertical-align: middle;
    z-index: 1;
}
.mlh-select.is-open {
    z-index: 50;
}
.panel:has(.mlh-select.is-open),
.night-option:has(.mlh-select.is-open) {
    position: relative;
    z-index: 8;
    overflow: visible;
}
.field .mlh-select,
.match-grid .mlh-select,
.create-body .mlh-select {
    display: block;
    width: 100%;
    min-width: 0;
}
.language-row .mlh-select {
    flex: 1 1 12rem;
    min-width: min(14rem, 100%);
}
select.mlh-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    background: none !important;
    min-width: 0 !important;
}
.mlh-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    width: 100%;
    min-height: 2.55rem;
    padding: 0.62rem 0.9rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transform: none !important;
    touch-action: manipulation;
}
.mlh-select-btn:hover {
    border-color: var(--teal);
    transform: none;
}
.mlh-select-btn:focus-visible {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
    transform: none;
}
.mlh-select-btn-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mlh-select-btn::after {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.62;
}
.mlh-select.is-open .mlh-select-btn {
    border-color: var(--teal);
}
.mlh-select.is-open .mlh-select-btn::after {
    margin-top: 0.2rem;
    transform: rotate(225deg);
}
.mlh-select.is-disabled .mlh-select-btn {
    opacity: 0.45;
    cursor: not-allowed;
}
.mlh-select-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 140;
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: 100%;
    max-width: min(22rem, 90vw);
    max-height: 16.5rem;
    overflow: hidden;
    padding: 0;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}
.mlh-select-menu.is-ported {
    position: fixed;
    z-index: 25;
}
.mlh-select-menu-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1 1 auto;
    min-height: 0;
    max-height: inherit;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.35rem;
}
.mlh-select-menu[hidden] { display: none !important; }
.mlh-select-option {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.35;
    padding: 0.52rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    transform: none !important;
}
.mlh-select-option:hover,
.mlh-select-option.is-active {
    background: color-mix(in srgb, var(--teal) 12%, transparent);
    color: var(--ink);
    transform: none;
}
.mlh-select-option.is-selected {
    background: var(--teal);
    color: #fff;
}
.mlh-select-option.is-selected:hover,
.mlh-select-option.is-selected.is-active {
    background: var(--teal-deep);
    color: #fff;
}
.mlh-select-option:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.fc-main.is-dark .mlh-select-btn,
.fc-main.is-dark .mlh-select-menu {
    background: var(--glass);
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.35);
}
html.night .mlh-select-btn,
html.night .mlh-select-menu {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}
html.night .mlh-select-option:hover,
html.night .mlh-select-option.is-active {
    background: color-mix(in srgb, var(--teal) 18%, transparent);
}
html.night .mlh-select-btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 28%, transparent);
}
.fc-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--sidebar-text);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    margin-bottom: 0.15rem;
    border: 1px solid transparent;
    min-height: 2.6rem;
}
.fc-nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}
.fc-nav-item.is-active {
    background: var(--sidebar-active);
    color: #fff;
    border-color: transparent;
}
.fc-nav-leaf.is-active {
    color: #fff;
    background: var(--sidebar-active);
}
.fc-nav-ico {
    width: 1.1rem;
    text-align: center;
    opacity: 0.85;
    flex: 0 0 auto;
}
.fc-app.is-collapsed .fc-nav-item {
    justify-content: center;
    padding: 0.65rem 0.35rem;
}
.fc-backdrop { display: none; }
.fc-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--page-bg);
}
.fc-main.is-dark {
    background: #141414;
    --mist: #c8c8c2;
}
body.theme-forest .fc-main.is-dark {
    background: #132418;
}
html.night .fc-main {
    background: var(--page-bg);
}
html.night .fc-main.is-dark {
    background: #141414;
    --mist: #c8c8c2;
}
html.night body.theme-forest .fc-main.is-dark {
    background: #121814;
}
.fc-main-bar {
    display: none;
    align-items: center;
    gap: 0.75rem;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    flex: 0 0 auto;
    pointer-events: none;
}
.fc-mobile-menu {
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--card);
    place-content: center;
    gap: 3px;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    touch-action: manipulation;
    pointer-events: auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.fc-main.is-dark .fc-mobile-menu {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}
.fc-main.is-dark .fc-mobile-menu span { background: var(--foam); }
.fc-mobile-menu span {
    display: block;
    width: 0.95rem;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
}
.fc-main-brand {
    font-family: var(--font-ui);
    font-weight: 650;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Compact screens and tablets: in-flow top bar so the menu button does not overlap content */
@media (max-width: 860px), (min-width: 861px) and (pointer: coarse) {
    .fc-main-bar {
        display: flex;
        position: relative;
        z-index: 20;
        align-items: center;
        gap: 0.75rem;
        min-height: calc(3.25rem + env(safe-area-inset-top, 0px));
        padding: calc(0.4rem + env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right)) 0.4rem max(0.55rem, env(safe-area-inset-left));
        border-bottom: 1px solid var(--line);
        background: var(--glass);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        pointer-events: auto;
    }
    .fc-mobile-menu {
        display: inline-grid !important;
    }
    .fc-main.is-dark .fc-main-bar {
        background: rgba(0, 0, 0, 0.92);
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }
    .fc-main.is-dark .fc-main-brand {
        color: var(--foam);
    }
}
.fc-main-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
    padding: var(--page-pad);
    padding-bottom: max(var(--page-pad), env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fc-main-scroll.is-flush {
    padding: 0;
    align-items: stretch;
}
.fc-main-scroll > main {
    width: 100%;
}
.wrap {
    width: min(var(--content-max), 100%);
    max-width: 100%;
    margin: 0 auto;
    animation: rise 0.45s ease;
}
.wrap.wide { width: min(var(--content-wide), 100%); }
.wrap.narrow { width: min(640px, 100%); }
.wrap.auth {
    width: min(var(--content-narrow), 100%);
    margin-top: auto;
    margin-bottom: auto;
}
/* Tool shell — shared flush/paper language (also defined in flashcards.css) */
.library-screen {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    padding-bottom: max(clamp(0.75rem, 2vw, 1.25rem), env(safe-area-inset-bottom));
    box-sizing: border-box;
}
.library-screen-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(min-content, 1fr);
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.4rem;
    flex: 0 0 auto;
    margin-bottom: 0.55rem;
    min-width: 0;
}
.library-screen-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
}
.library-screen-bar h1 {
    margin: 0;
    flex: 0 0 auto;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-ui);
    font-weight: 650;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.library-screen-bar > .sub,
.library-screen-heading .sub {
    margin: 0;
    max-width: 62ch;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ink-soft);
}
.library-screen-bar > .sub {
    grid-column: 1 / -1;
    grid-row: 2;
}
.library-screen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    flex: 0 0 auto;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
    max-width: 100%;
}
.library-screen-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.library-screen-body.is-bare {
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
}
.tool-stack {
    width: min(640px, 100%);
    max-width: 100%;
    margin: 0 auto;
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.15rem 0 1rem;
}
.tool-stack.is-narrow {
    width: min(var(--content-narrow), 100%);
}
.tool-stack.is-wide {
    width: min(42rem, 100%);
}
.tool-section {
    position: relative;
    background: linear-gradient(165deg, #ffffff 0%, #f4f4f1 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(1.15rem, 2.5vw, 1.45rem) clamp(1.05rem, 2.5vw, 1.35rem);
    margin-bottom: 0.85rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    overflow: visible;
}
.tool-section:last-child { margin-bottom: 0; }
.tool-section:has(.mlh-select.is-open) { z-index: 8; }
html.night .tool-section {
    background: linear-gradient(165deg, #242424 0%, #1c1c1c 100%);
    border-color: var(--line);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
@keyframes rise {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (max-width: 860px), (min-width: 861px) and (pointer: coarse) {
    .fc-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-105%);
        flex: 0 0 0 !important;
        width: min(18.5rem, 86vw) !important;
        max-width: 20rem;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.28);
        padding-top: env(safe-area-inset-top);
        overflow-x: hidden;
        overflow-y: auto;
    }
    .fc-app.is-collapsed .fc-sidebar {
        flex: 0 0 0 !important;
        width: min(18.5rem, 86vw) !important;
    }
    .fc-main {
        margin-left: 0;
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
    .fc-sidebar-top,
    .fc-sidebar-nav,
    .fc-sidebar-foot {
        width: auto;
        max-width: none;
    }
    .fc-brand {
        opacity: 1;
        width: auto !important;
        max-width: none !important;
        pointer-events: auto;
        padding-left: 0 !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        font-size: 1.02rem !important;
        letter-spacing: -0.03em !important;
    }
    .fc-brand-rail { display: contents; }
    .fc-brand-compact { display: none !important; }
    .fc-brand-stack { display: contents; }
    .fc-brand-full {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        font-size: inherit !important;
        letter-spacing: inherit !important;
        pointer-events: auto;
    }
    .fc-nav-leaf {
        gap: 0.65rem;
        padding: 0.35rem 0.6rem;
    }
    .fc-nav-leaf span:not(.fc-nav-ico) {
        max-width: none !important;
        opacity: 1 !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .fc-nav-item {
        justify-content: flex-start;
        gap: 0.65rem;
        padding: 0.55rem 0.6rem;
    }
    .fc-nav-ico {
        flex: 0 0 1.1rem;
        width: 1.1rem;
    }
    .fc-app.is-mobile-open .fc-sidebar { transform: translateX(0); }
    .fc-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 25;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .fc-app.is-mobile-open .fc-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .fc-sidebar-collapse { display: none !important; }
    .fc-mobile-menu {
        display: inline-grid !important;
    }
    .fc-main-scroll {
        padding-left: max(var(--page-pad), env(safe-area-inset-left));
        padding-right: max(var(--page-pad), env(safe-area-inset-right));
    }
    .fc-main-scroll.is-flush {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .wrap, .fc-sidebar, .fc-sidebar-top, .fc-backdrop { animation: none; transition: none; }
    .fc-ai-rail, .fc-main { transition: none; }
    .fc-brand, .fc-brand-compact, .fc-brand-full,
    .fc-nav-children,
    .fc-nav-item span:not(.fc-nav-ico),
    .fc-nav-leaf span:not(.fc-nav-ico),
    .library-segment-thumb { transition: none !important; }
}
html.night .fc-main {
    color: var(--ink);
}
html.night .tool-section,
html.night .panel,
html.night .auth-card,
html.night .chat-shell,
html.night .live-shell,
html.night .briefing-card,
html.night .folder-modal {
    background: linear-gradient(165deg, #242424 0%, #1c1c1c 100%);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
html.night .folder-layer:not(.is-front) .folder-modal {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}
html.night .session-item,
html.night .deck-card,
html.night .chip,
html.night .library-segment-thumb,
html.night .mode-card,
html.night .flash,
html.night .chat-shell,
html.night .auth-card,
html.night .live-shell,
html.night .page-frame {
    border-color: var(--line);
}
html.night .deck-card,
html.night .home-tile,
html.night .home-tile.is-folder,
html.night .drag-ghost,
html.night .drag-ghost.is-folder {
    background: linear-gradient(165deg, rgba(36, 36, 36, 0.96), rgba(28, 28, 28, 0.88));
    color: var(--ink);
}
html.night .deck-card.is-folder-card {
    background: linear-gradient(165deg, rgba(42, 42, 42, 0.96), rgba(24, 24, 24, 0.9));
}
html.night .chip,
html.night .fc-main:not(.is-dark) .mode-card {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
}
html.night .fc-main:not(.is-dark) .mode-card:hover,
html.night .fc-main:not(.is-dark) .mode-card:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.18);
}
html.night .library-segmented {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
html.night .library-segment-thumb {
    background: var(--teal-deep);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
html.night .library-segment {
    color: var(--mist);
}
html.night .library-segment.is-active,
html.night .library-segment.is-active:hover {
    background: transparent;
    color: var(--on-accent);
    box-shadow: none;
}
html.night .library-segment:hover {
    background: transparent;
    color: var(--ink);
}
html.night .library-screen-body {
    background: rgba(28, 28, 28, 0.72);
    border-color: var(--line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
html.night .library-screen-body.is-bare {
    background: transparent;
    border: 0;
    box-shadow: none;
}
html.night .search-pill,
html.night .search-settings,
html.night .public-filter-chip {
    background: var(--card);
    border-color: var(--line);
}
html.night .search-pill {
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
html.night .public-filter-chip.is-active,
html.night .public-lang-chip.is-active,
html.night .public-lang-chip:has(.mlh-select.is-open) {
    color: var(--teal-text);
    background: color-mix(in srgb, var(--teal) 18%, transparent);
    border-color: color-mix(in srgb, var(--teal) 40%, var(--line));
}
html.night .page-frame {
    background: var(--paper);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html.night .fc-main select,
html.night .fc-main input[type="text"],
html.night .fc-main input[type="email"],
html.night .fc-main input[type="password"],
html.night .fc-main input[type="number"],
html.night .fc-main textarea {
    background-color: var(--card);
    color: var(--ink);
    border-color: var(--line);
}
html.night .fc-main select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ededed' d='M1.4.3 6 4.9 10.6.3 12 1.7 6 7.7 0 1.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
}
html.night .session-item,
html.night .loading-dots,
html.night .briefing-lang-toggle,
html.night .obj-check {
    background: rgba(255, 255, 255, 0.04);
}
#mlh-toasts {
    position: fixed;
    top: max(0.85rem, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    width: min(28rem, calc(100vw - 2rem));
    pointer-events: none;
}
.flash {
    pointer-events: auto;
    padding: 0.7rem 0.95rem;
    border-radius: var(--r-md);
    font-size: 0.92rem;
    line-height: 1.4;
    border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent);
    background: color-mix(in srgb, var(--teal) 12%, var(--card));
    color: var(--teal-text);
    box-shadow: 0 10px 28px var(--shadow-lg);
    opacity: 0;
    transform: translateY(-0.55rem);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.flash.is-in {
    opacity: 1;
    transform: translateY(0);
}
.flash.error {
    border-color: rgba(180, 35, 24, 0.25);
    background: color-mix(in srgb, var(--bad) 10%, var(--card));
    color: var(--bad);
}
.flash.is-leaving {
    opacity: 0;
    transform: translateY(-0.45rem);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .flash {
        transition: none;
        transform: none;
    }
    .flash.is-leaving { opacity: 0; }
}
html.night #mlh-toasts .flash {
    background: color-mix(in srgb, var(--teal) 18%, var(--card));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}
html.night #mlh-toasts .flash.error {
    background: color-mix(in srgb, var(--bad) 16%, var(--card));
}
html.night .flash,
html.night .reveal,
html.night .status-pill,
html.night .chip.saved-badge,
html.night .back-to-set,
html.night .obj-label,
html.night .briefing-difficulty-value {
    color: var(--teal-text);
}
html.night .flash.error,
html.night .status-pill.is-error,
html.night .badge-bad {
    color: var(--bad);
}
html.night .status-pill.is-live,
html.night .star-btn.is-on {
    color: var(--warn-text);
}
html.night .practice-cta {
    background: var(--teal);
    color: var(--on-accent);
}
html.night .practice-cta:hover { background: var(--teal-deep); color: var(--on-accent); }
html.night .chat-input button.listening {
    color: var(--on-apricot);
}
html.night .chat-input button.ready-speak {
    background: var(--teal);
    color: var(--on-accent);
}
html.night .step-btn .n {
    color: var(--on-ink);
}
html.night .chat-header,
html.night .live-header,
html.night .chat-input,
html.night .objectives-rail {
    background: rgba(255, 255, 255, 0.04);
}