/* Official fox puppet. Parts are the flat sit, cut apart.
   Motion is transform-only so it stays on the compositor. */

.fox-mount { display: block; width: 100%; line-height: 0; }
.fox-rig {
    position: relative;
    width: 100%;
    aspect-ratio: 450 / 670;
    display: block;
}
.fox-rig .fox-body img,
.fox-rig .fox-tail img,
.fox-rig .fox-arm img,
.fox-rig .fox-ear img {
    width: 100%; height: 100%; display: block; pointer-events: none;
}
.fox-rig .fox-face { display: block; pointer-events: none; }
.fox-root, .fox-tail, .fox-body, .fox-head, .fox-arm, .fox-ear, .fox-face, .fox-eye, .fox-lid, .fox-smile, .fox-shadow {
    position: absolute;
}
.fox-root { inset: 0; transform-origin: 50% 92%; }
.fox-shadow {
    left: 18%; right: 28%; bottom: 1.6%; height: 3.6%;
    background: rgba(36, 24, 20, 0.13);
    border-radius: 50%;
    z-index: 0;
}
/* Head fills the stage so every part uses the same coordinate space. */
.fox-head { inset: 0; transform-origin: calc(186 / 450 * 100%) calc(304 / 670 * 100%); z-index: 4; }
.fox-body {
    left: calc(28 / 450 * 100%); top: calc(261 / 670 * 100%);
    width: calc(402 / 450 * 100%); height: calc(388 / 670 * 100%);
    transform-origin: 50% 62%; z-index: 2;
}
.fox-tail {
    left: calc(192 / 450 * 100%); top: calc(475 / 670 * 100%);
    width: calc(237 / 450 * 100%); height: calc(173 / 670 * 100%);
    transform-origin: calc(86 / 237 * 100%) calc(45 / 173 * 100%);
    z-index: 3;
}
.fox-face {
    left: calc(16 / 450 * 100%); top: calc(32 / 670 * 100%);
    width: calc(335 / 450 * 100%); height: calc(273 / 670 * 100%);
}
.fox-ear-l {
    left: calc(31 / 450 * 100%); top: calc(13 / 670 * 100%);
    width: calc(110 / 450 * 100%); height: calc(153 / 670 * 100%);
    transform-origin: 58% 92%;
}
.fox-ear-r {
    left: calc(234 / 450 * 100%); top: calc(20 / 670 * 100%);
    width: calc(113 / 450 * 100%); height: calc(134 / 670 * 100%);
    transform-origin: 42% 92%;
}
/* Flat wave arm. Shoulder pivot sits inside the chest; the body paints over it. */
.fox-arm {
    left: calc(10.15 / 450 * 100%);
    top: calc(120.6 / 670 * 100%);
    width: calc(193.43 / 450 * 100%);
    height: calc(300 / 670 * 100%);
    transform-origin: 67.13% 93.13%;
    transform: rotate(-28deg);
    opacity: 0;
    z-index: 1;
    transition: transform 320ms ease, opacity 220ms ease;
}
.fox-ear, .fox-tail, .fox-head {
    transition: transform 420ms ease;
}
.fox-smile { transition: opacity 220ms ease; }
.fox-lid { transition: transform 120ms ease; }
/* Eyelids slide over the open eyes. The eye art itself never scales. */
.fox-eye {
    overflow: hidden;
    border-radius: 50%;
    z-index: 5;
    pointer-events: none;
}
.fox-eye-l {
    left: calc(74 / 450 * 100%);
    top: calc(174 / 670 * 100%);
    width: calc(62 / 450 * 100%);
    height: calc(72 / 670 * 100%);
}
.fox-eye-r {
    left: calc(192 / 450 * 100%);
    top: calc(180 / 670 * 100%);
    width: calc(72 / 450 * 100%);
    height: calc(74 / 670 * 100%);
}
.fox-lid {
    left: -20%;
    width: 140%;
    top: 0;
    height: 108%;
    background: #fb7c13;
    transform: translateY(-130%);
    border-bottom: 3.5px solid #3a2418;
    border-radius: 0 0 90% 90%;
    transition: none;
}
.fox-smile {
    width: calc(88 / 450 * 100%);
    height: calc(44 / 670 * 100%);
    object-fit: contain;
    opacity: 0;
    z-index: 6;
    pointer-events: none;
}
.fox-smile-l { left: calc(60 / 450 * 100%); top: calc(186 / 670 * 100%); }
.fox-smile-r { left: calc(184 / 450 * 100%); top: calc(192 / 670 * 100%); }

.fox-mark { width: 1.15em; height: 1.15em; display: block; flex: 0 0 auto; object-fit: contain; }

/* ── Planted fox. Feet never travel. The chest breathes. ── */
.fox-rig, .fox-root, .fox-mount, .loading-fox { overflow: visible; }
.fox-root, .fox-body, .fox-shadow { animation: none !important; transform: none; }
.fox-body .fox-breath {
    position: absolute;
    inset: 0;
    transform-origin: 50% 46%;
    clip-path: inset(0 0 54% 0);
    animation: fox-breath 4.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes fox-breath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
}
.fox-rig .fox-head { animation: fox-look 8.5s ease-in-out infinite; }
.fox-rig .fox-tail { animation: fox-drift 4.6s ease-in-out infinite; }
.fox-rig .fox-ear-l { animation: fox-flick 7.2s ease-in-out infinite; }
.fox-rig .fox-ear-r { animation: fox-flick 7.2s ease-in-out 2.8s infinite; animation-direction: reverse; }
@keyframes fox-look {
    0%, 22% { transform: rotate(0deg); }
    34%, 58% { transform: rotate(-4deg); }
    72%, 100% { transform: rotate(3.5deg); }
}
@keyframes fox-drift {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(3deg); }
}
@keyframes fox-flick {
    0%, 78%, 100% { transform: rotate(0deg); }
    84% { transform: rotate(-6deg); }
    90% { transform: rotate(1deg); }
}
@keyframes fox-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Greeting only. Two slow raises, then the paw lowers onto the chest and fades
   into the body's own arm. It does not stop halfway up. */
@keyframes fox-wave-soft {
    0% { transform: rotate(-28deg); opacity: 0; }
    8% { transform: rotate(-27deg); opacity: 1; }
    22% { transform: rotate(-16deg); opacity: 1; }
    36% { transform: rotate(-27deg); opacity: 1; }
    50% { transform: rotate(-16deg); opacity: 1; }
    64% { transform: rotate(-22deg); opacity: 1; }
    78% { transform: rotate(-28deg); opacity: 1; }
    90% { transform: rotate(-28deg); opacity: 1; }
    100% { transform: rotate(-28deg); opacity: 0; }
}
.fox-rig[data-state="dance"],
.fox-rig[data-state="wave"] { animation: fox-enter 0.55s ease both; }
.fox-rig[data-state="dance"] .fox-arm,
.fox-rig[data-state="wave"] .fox-arm {
    animation: fox-wave-soft 7.6s ease-in-out 0.35s forwards;
    transition: none;
}

/* Listen is the same planted fox, head a little toward the voice. */
.fox-rig[data-state="listen"] .fox-head { animation: none; transform: rotate(-4deg); }
.fox-rig[data-state="listen"] .fox-ear-r { animation: none; transform: rotate(4deg); }

/* Delight and sleep change the face and the paw. The body does not jump. */
.fox-rig[data-state="delight"] .fox-head { animation: none; transform: rotate(-4deg); }
.fox-rig[data-state="delight"] .fox-ear-l { animation: none; transform: rotate(-8deg); }
.fox-rig[data-state="delight"] .fox-ear-r { animation: none; transform: rotate(6deg); }
.fox-rig[data-state="delight"] .fox-tail { animation: none; transform: rotate(4deg); }
.fox-rig[data-state="delight"] .fox-arm { opacity: 1; animation: none; transform: rotate(-20deg); }

.fox-rig[data-state="sleep"] .fox-lid { transform: translateY(-4%); border-bottom-color: transparent; }
.fox-rig[data-state="sleep"] .fox-smile { opacity: 1; }
.fox-rig[data-state="sleep"] .fox-head { animation: none; transform: rotate(4deg); }
.fox-rig[data-state="sleep"] .fox-tail { animation: none; transform: rotate(3deg); }
.fox-rig[data-state="sleep"] .fox-ear-l,
.fox-rig[data-state="sleep"] .fox-ear-r { animation: none; transform: rotate(0deg); }

.fox-rig[data-state="error"] .fox-head { animation: none; transform: rotate(-3deg); }
.fox-rig[data-state="error"] .fox-ear-l { animation: none; transform: rotate(4deg); }
.fox-rig[data-state="error"] .fox-ear-r { animation: none; transform: rotate(-3deg); }
.fox-rig[data-state="error"] .fox-tail { animation: none; transform: rotate(-3deg); }

/* Official flat poses stay where they were drawn. No bob. */
.brand-magic-fox,
.brand-magic-cat,
.fox-hero-img {
    animation: none !important;
    transform: translate(-50%, -50%);
}
.fox-hero-img { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .fox-rig, .fox-rig * { animation: none !important; transition: none !important; }
    .fox-rig[data-state="sleep"] .fox-lid { transform: translateY(-4%); }
    .fox-rig[data-state="sleep"] .fox-smile { opacity: 1; }
    .fox-rig[data-state="delight"] .fox-ear-l { transform: rotate(-8deg); }
    .fox-rig[data-state="delight"] .fox-ear-r { transform: rotate(6deg); }
    .fox-rig[data-state="error"] .fox-head { transform: rotate(-3deg); }
    .fox-arm { opacity: 0 !important; }
    .fox-hero,
    .sent-screen,
    .sent-tuck,
    #sent-stay-card,
    .reminder-idea-card,
    .recorder-panel-inner,
    .fox-bubble { animation: none !important; transition: none !important; }
}

/* Wordmark lockup */
a.brand-magic-word.lockup,
.brand-magic-word.lockup,
.logo.lockup,
.fox-wordmark.lockup,
.lockup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28em;
    line-height: 1;
}
.brand-magic-word.lockup { display: flex; }
.lockup-word {
    font-family: Nunito, sans-serif;
    font-weight: 800;
    letter-spacing: -0.045em;
    color: var(--fox, #F8431C);
}
.logo .lockup { gap: 0.22em; }
.brand-magic-word.lockup { font-size: inherit; }

/* Loading is the fox, not a logo with a bounce taped on. */
.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 400;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
    background: var(--cream, #FFF6EA);
}
.loading-word { margin: 0; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.045em; color: var(--fox, #F8431C); }
.loading-fox { width: min(220px, 62vw); margin: 0 auto 0.25rem; }
/* The puppet is taller than the old square logo. Give it its own height
   so the headline sits under the fox instead of running through his legs. */
.brand-magic:has(.fox-rig) {
    width: min(200px, 56vw);
    height: auto;
    aspect-ratio: 450 / 670;
    margin: 0.15rem auto 0.15rem;
    overflow: visible;
}
.brand-magic-sm:has(.fox-rig) {
    width: 92px;
    height: auto;
    aspect-ratio: 450 / 670;
}
.loading-screen .lockup-word { font-size: 1.85rem; }
.loading-text {
    margin: 0.35rem 0 0;
    color: var(--mute, #8A7568);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

/* Story-writing wait */
.story-writing-card {
    background: var(--cream, #FFF6EA) !important;
    border: 2px solid var(--line, #F0E2D4) !important;
    box-shadow: 0 4px 0 var(--line, #F0E2D4) !important;
    animation: none !important;
}
.story-writing-card::before { display: none !important; }
.story-writing-fox { width: 148px; margin: 0 auto 0.25rem; }
.story-spark { display: none !important; }
.story-writing-orb { display: none !important; }
.story-writing-headline { color: var(--ink, #241814) !important; font-family: Nunito, sans-serif !important; }
.story-writing-tip { color: var(--mute, #8A7568) !important; }

/* Send */
.send-overlay { background: var(--cream, #FFF6EA); }
.send-fox { width: min(220px, 64vw); }
.send-text {
    font-size: 2rem !important;
    letter-spacing: -0.04em;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    margin-top: 0.25rem !important;
}
.send-subtext {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Hero on the night flow */
.fox-hero-rig { width: min(200px, 52vw); margin: 0 auto; }
body.fox-night .fox-hero { min-height: 0; }

/* Sent */
.sent-fox-mount { width: min(220px, 64vw); margin: 0 auto; }
.stay-card:empty { display: none !important; }

/* Teller room joins the cream house */
html,
html[data-teller-theme="dark"],
html[data-teller-theme="light"] {
    --teller-ink: #FFF6EA;
    --teller-ink-lift: #FFFFFF;
    --teller-gold: #F8431C;
    --teller-gold-line: #F0E2D4;
    --teller-gold-line-hover: #E7C9B4;
    --teller-gold-glow: rgba(248, 67, 28, 0.08);
    --teller-cream: #241814;
    --teller-cream-muted: #8A7568;
    --teller-card: #ffffff;
    --teller-input: #FFFCF7;
    --teller-on-gold: #ffffff;
    --teller-inset: none;
    --teller-shadow: 0 4px 0 #F0E2D4;
    --teller-shadow-pressed: 0 2px 0 #E7C9B4;
}
.teller-overlay,
body.record-path-teller,
body.record-path-teller .teller-overlay {
    background: var(--cream, #FFF6EA) !important;
    background-image: none !important;
}
body.record-path-teller .teller-progress-track { background: #F0E2D4 !important; }
body.record-path-teller .teller-progress-fill,
body.record-path-teller .teller-progress-knob { background: #F8431C !important; }
body.record-path-teller .record-tile,
.record-tile { font-family: Nunito, sans-serif; }
.record-tile-title,
.landing-footer span {
    font-family: Nunito, sans-serif !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit;
}
.landing-footer span { color: var(--fox, #F8431C); }

/* Flat covers are cream. The title sits on a light strip, not over the picture. */
.record-cover {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    border: 2px solid #F0E2D4;
    border-radius: 16px;
    background: #FFF1E4;
    color: #241814;
    box-shadow: 0 4px 0 #E7D3C4;
    aspect-ratio: auto !important;
}
.record-cover.tint-teal { background: #E7F6F2; }
.record-cover.theme-moon,
.record-cover.theme-caterpillar,
.record-cover.theme-pigs,
.record-cover.theme-bears,
.record-cover.theme-gingerbread,
.record-cover.theme-beanstalk,
.record-cover.theme-personal,
.record-cover.theme-digger,
.record-cover.theme-truck,
.record-cover.theme-pups,
.record-cover.theme-dino,
.record-cover.theme-woods,
.record-cover.theme-pond,
.record-cover.theme-stars,
.record-cover.theme-princess,
.record-cover.theme-cinderella,
.record-cover.theme-elves,
.record-cover.theme-rabbit,
.record-cover.cover-live {
    aspect-ratio: auto;
}
.record-cover-art {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 2 / 3;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: none;
}
.record-cover-art::after,
.record-cover.cover-official .record-cover-art::after {
    content: none;
    background: none;
}
.record-cover-title {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin: 0;
    padding: 0.55rem 0.7rem 0.65rem;
    background: #FFF6EA !important;
    color: #241814 !important;
    -webkit-text-fill-color: #241814 !important;
    font-family: Nunito, sans-serif !important;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-shadow: none;
}
.record-cover.tint-teal .record-cover-title { background: #E7F6F2 !important; }
.record-cover.tint-orange .record-cover-title { background: #FFF1E4 !important; }
.record-cover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 #E7D3C4;
}
.record-cover:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #E7D3C4;
}

.btn-generate {
    background: #F8431C !important;
    box-shadow: 0 5px 0 #C23010;
    border-radius: 16px;
    font-weight: 800;
}
#story-helper-input:has(.story-mode.is-own) .btn-generate {
    background: #1AA88A !important;
    box-shadow: 0 5px 0 #0E7A64;
}
.nav-fab {
    background: #F8431C !important;
    box-shadow: 0 4px 0 #C23010 !important;
    overflow: visible;
}
.nav-fab img,
.nav-fab .fox-mark { display: none !important; }
.nav-fab .nav-mic {
    width: 28px;
    height: 28px;
    display: block;
}
.nav-fab:active {
    transform: translateY(4px) !important;
    box-shadow: 0 0 0 #C23010 !important;
}
.nav-fab.recording .nav-mic,
.nav-fab.paused .nav-mic { display: none; }
.logo > img { display: none; }
.credits-dialog-logo.fox-mount { width: 64px; height: auto; }
.bottom-nav {
    background: #fff;
    border-top: 2px solid var(--line, #F0E2D4);
    box-shadow: none;
}
body.has-nav { padding-bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px)); }
/* The raised mic sits above the bar. The record slab has to clear it. */
body.has-nav .recorder-panel:not(.recording-active):not(.counting-down) {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.top-bar, .header { background: transparent; }

/* Dialogs and toasts sit on the same paper */
.app-dialog,
.credits-dialog,
.dialog-animated {
    border-radius: 20px;
    border: 2px solid #F0E2D4;
    box-shadow: 0 8px 0 #F0E2D4;
}
.status.error, .status.err {
    color: #C23010;
    font-weight: 800;
}

/* ── Duolingo-style chrome, in the bedtime palette ──
   One primary (fox), one secondary (teal), white cards, a real lip. */

.equip-heading {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.12;
    color: var(--ink, #241814);
}
.sent-title, .loading-word {
    font-weight: 800;
    letter-spacing: -0.045em;
}

.card {
    border: 2px solid var(--line, #F0E2D4);
    border-radius: 20px;
    box-shadow: 0 4px 0 var(--line, #F0E2D4);
}

.btn,
.btn-submit,
.btn-generate,
.welcome-btn.account-btn,
.byb-ready-btn,
.btn-reminder,
.btn-another {
    border-radius: 16px;
    font-weight: 800;
    box-shadow: 0 4px 0 var(--fox-lip, #C23010);
    min-height: 52px;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover,
.btn-submit:hover,
.btn-generate:hover,
.welcome-btn:hover,
.btn-g:hover {
    opacity: 1;
}
.btn:active,
.btn-submit:active,
.btn-generate:active,
.welcome-btn.account-btn:active,
.byb-ready-btn:active,
.btn-reminder:active,
.btn-another:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--fox-lip, #C23010);
}
.btn-g {
    background: var(--teal, #1AA88A);
    box-shadow: 0 4px 0 var(--teal-lip, #0E7A64);
    border-radius: 16px;
    font-weight: 800;
}
.btn-g:active { transform: translateY(4px); box-shadow: 0 0 0 var(--teal-lip, #0E7A64); }
#story-helper-input:has(.story-mode.is-own) .btn-generate {
    box-shadow: 0 4px 0 var(--teal-lip, #0E7A64);
}
#story-helper-input:has(.story-mode.is-own) .btn-generate:active {
    box-shadow: 0 0 0 var(--teal-lip, #0E7A64);
}

.btn-s,
.btn-secondary,
a.btn-secondary,
a.welcome-btn.btn-secondary,
.sent-another {
    background: #fff;
    color: var(--ink, #241814);
    border: 2px solid var(--line, #F0E2D4);
    border-radius: 16px;
    box-shadow: 0 4px 0 #E7D3C4;
    font-weight: 800;
    min-height: 48px;
}
.btn-s:hover,
.btn-secondary:hover,
a.btn-secondary:hover,
.sent-another:hover { opacity: 1; background: #fff; }
.btn-s:active,
.btn-secondary:active,
a.btn-secondary:active,
.sent-another:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #E7D3C4;
}

.recorder-panel-inner,
body.sound-board-mode .sound-board-stage .recorder-panel-inner {
    background: #F8431C !important;
    background-image: none !important;
    box-shadow: 0 4px 0 #C23010 !important;
    border-radius: 16px;
}
.recorder-panel.recording-active .recorder-panel-inner,
.recorder-panel.counting-down .recorder-panel-inner,
body.sound-board-mode .sound-board-stage .recorder-panel.recording-active .recorder-panel-inner,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down .recorder-panel-inner,
body.fox-night .recorder-panel.recording-active .recorder-panel-inner,
body.fox-night .recorder-panel.counting-down .recorder-panel-inner {
    background: #1AA88A !important;
    background-image: none !important;
    box-shadow: 0 4px 0 #0E7A64 !important;
}
.recorder-panel-inner:active:not(.expanded) {
    transform: translateY(4px) !important;
    box-shadow: 0 0 0 #C23010 !important;
}
.recorder-panel.recording-active .recorder-panel-inner:active:not(.expanded),
.recorder-panel.counting-down .recorder-panel-inner:active:not(.expanded) {
    box-shadow: 0 0 0 #0E7A64 !important;
}
body.sound-board-mode .sound-board-stage .recorder-panel.recording-active:not(.is-paused):not(.counting-down) .recorder-panel-inner {
    transform: none !important;
}

.recorder-keep {
    background: #fff !important;
    color: #F8431C !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 0 #C23010 !important;
    min-height: 48px;
    font-weight: 800;
}
.recorder-keep:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #C23010 !important;
}
.recorder-again {
    background: #fff !important;
    color: var(--ink, #241814) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 0 #E7D3C4 !important;
    min-height: 48px;
    font-weight: 800;
}
.recorder-again:hover { background: #fff; }
.recorder-again:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #E7D3C4 !important;
}

body.fox-night .fox-steps {
    display: flex;
    gap: 6px;
    margin: 2px 0 8px;
}
.fox-steps { display: none; }
.fox-steps span {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: #F0E2D4;
}
body.fox-night .fox-steps span:first-child { background: #F8431C; }
body.fox-night.fox-counting .fox-steps span:nth-child(-n+2),
body.fox-night.fox-recording .fox-steps span:nth-child(-n+2),
body.fox-night.fox-review .fox-steps span { background: #F8431C; }

body.fox-night .fox-bubble {
    position: relative;
    background: #fff;
    border: 2px solid var(--line, #F0E2D4);
    border-radius: 18px 18px 18px 6px;
    box-shadow: 0 3px 0 var(--line, #F0E2D4);
    font-weight: 800;
    font-size: 16px;
    max-width: 168px;
    transition: opacity 250ms ease, transform 250ms ease;
}
body.fox-night .fox-bubble::before {
    content: "";
    position: absolute;
    left: -8px;
    bottom: 12px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 2px solid var(--line, #F0E2D4);
    border-bottom: 2px solid var(--line, #F0E2D4);
    border-radius: 0 0 0 3px;
    transform: rotate(45deg);
}
body.fox-night.fox-recording .fox-bubble,
body.fox-night.fox-review .fox-bubble {
    display: block !important;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    position: absolute;
}
body.fox-night .fox-hero { align-items: center; }
.fox-hero-rig { width: min(188px, 52vw); }

/* One fox. The card peek was a second character beside the hero. */
.fox-card-peek { display: none !important; }

/* Steps ease in. The fox stays put and changes pose; the card and the button travel. */
@keyframes fox-step-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
body.fox-stepping .recorder-panel:not(.dimmed-out):not(.counting-down),
body.fox-stepping #playback,
body.fox-stepping .fox-rec-idea,
body.fox-stepping .sound-board-stage .recorder-keep,
body.fox-stepping .sound-board-stage .recorder-again {
    animation: fox-step-in 250ms ease both;
}
/* The step-in fill was pinning the hub's record slab back on screen, over the mic. */
body.record-on-hub .recorder-panel,
.recorder-panel.dimmed-out {
    transform: translateY(calc(100% + 4rem)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}
body.record-on-hub.has-nav #main > [data-tab="record"] {
    padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)) !important;
}
body.fox-night .reminder-idea-card:not(.hidden):not([hidden]) {
    max-height: 480px;
    overflow: hidden;
    transition: opacity 250ms ease, transform 250ms ease, max-height 250ms ease, margin 250ms ease, padding 250ms ease;
}
body.fox-night.fox-recording .reminder-idea-card:not(.hidden):not([hidden]),
body.fox-night.fox-review .reminder-idea-card:not(.hidden):not([hidden]) {
    display: block !important;
    opacity: 0;
    transform: translateY(14px);
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
    border-width: 0;
    box-shadow: none;
}
@keyframes fox-step-slide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
body.fox-night .recorder-panel.recording-active:not(.counting-down) .recorder-panel-inner {
    animation: fox-step-slide 250ms ease;
}
.sent-screen:not(.hidden) {
    background: #FFF6EA;
}
.sent-screen:not(.hidden) .sent-screen-inner {
    animation: fox-step-in 250ms ease both;
}

/* The number and the timer are the action. The sound grid must not push them off the phone. */
body.fox-counting .sound-board-corner,
body.fox-recording .sound-board-corner,
body.fox-counting .sound-board-pads,
body.fox-recording .sound-board-pads,
body.fox-night.fox-counting .reminder-idea-card,
body.fox-night.fox-recording .reminder-idea-card,
body.fox-night.fox-counting .reminder-idea-card:not(.hidden):not([hidden]),
body.fox-night.fox-recording .reminder-idea-card:not(.hidden):not([hidden]) {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
body.fox-counting .recorder-panel,
body.fox-recording .recorder-panel {
    position: sticky;
    bottom: 12px;
    z-index: 6;
}

/* Countdown number is the action. White, heavy, and bigger than the slab. */
.recorder-panel.counting-down .recorder-panel-inner,
body.fox-night .recorder-panel.counting-down .recorder-panel-inner,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down .recorder-panel-inner {
    min-height: 148px !important;
    height: auto !important;
    overflow: visible !important;
}
.recorder-panel.counting-down .hint,
.recorder-panel.counting-down .hint.countdown-pop,
body.fox-night .recorder-panel.counting-down .hint,
body.fox-night .recorder-panel.counting-down .hint.countdown-pop,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down .hint {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    font-weight: 800 !important;
    font-size: 96px !important;
    line-height: 0.85 !important;
    letter-spacing: -0.05em !important;
    text-shadow: none !important;
    min-height: 1em;
    margin: 0 !important;
    animation: none !important;
    transform: none !important;
}
body.fox-night .recorder-panel.recording-active:not(.is-paused) .timer {
    display: block;
    opacity: 1;
    visibility: visible;
    color: #fff;
}

/* Review sits under the fox. The sound toggle was floating in the gap. */
body.fox-night.fox-review .fox-sounds-toggle,
body.fox-night.fox-recording .fox-sounds-toggle,
body.fox-night.fox-counting .fox-sounds-toggle {
    display: none !important;
}
body.fox-night.fox-review:not(.fox-sounds-open) .sound-board-stage,
body.fox-night.fox-recording:not(.fox-sounds-open) .sound-board-stage {
    flex: 0 0 auto;
    margin-top: 6px;
}
body.fox-night.fox-review .fox-hero-rig {
    width: min(148px, 40vw);
}
body.fox-night.fox-review .fox-hero {
    margin-bottom: 0;
}
#submit-btn,
body.fox-night #submit-btn,
body.sound-board-mode .sound-board-stage .recorder-keep.btn-submit,
body.sound-board-mode .sound-board-stage #submit-btn {
    background: #F8431C !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 0 #C23010 !important;
    font-weight: 800;
}
#submit-btn:active,
body.fox-night #submit-btn:active,
body.sound-board-mode .sound-board-stage #submit-btn:active {
    box-shadow: 0 0 0 #C23010 !important;
    transform: translateY(4px);
}
/* Review is the story, not the sound shelf. */
body.fox-review .sound-board-corner,
body.fox-review .sound-board-pad,
body.fox-review .reminder-idea-card,
body.sound-board-mode.fox-review .fox-bubble,
body.fox-recording .fox-bubble,
body.fox-counting .fox-bubble {
    display: none !important;
}
body.sound-board-mode.fox-review .fox-hero-rig,
body.fox-recording .fox-hero-rig {
    width: min(132px, 34vw);
}

/* Tucked in. The sheet is solid so the headline cannot show through it. */
body.fox-sent .sent-screen-inner {
    padding-top: 36px !important;
}
body.fox-sent .sent-fox-mount,
.sent-fox-mount {
    width: min(120px, 32vw);
    margin: 8px auto 0;
    overflow: visible;
}
body.fox-sent .sent-screen-inner,
.sent-screen-inner {
    overflow: visible;
}
body.fox-sent .sent-title {
    margin-bottom: 4px;
}
body.fox-sent .sent-tuck {
    margin: 20px auto 18px;
}
/* An empty title is not a badge. The credits card is the same: no text, no box. */
.sent-tuck:not(:has(#sent-tuck-title:not(:empty))) {
    display: none !important;
}
#credits-info:not(:has(.gift-pack)):not(:has(#credits-info-text:not(:empty))) {
    display: none !important;
}
body.fox-sent .sent-tuck.is-in {
    animation: fox-badge-in 250ms ease both;
}
@keyframes fox-badge-in {
    from { opacity: 0; transform: translateY(8px) rotate(-4deg); }
    to { opacity: 1; transform: translateY(0) rotate(-4deg); }
}
body.fox-sent #sent-stay-card {
    position: relative;
    z-index: 3;
    background: #fff !important;
    border: 2px solid #F0E2D4;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(36, 24, 20, 0.14), 0 4px 0 #F0E2D4;
    animation: fox-sheet-up 250ms ease 80ms both;
}
@keyframes fox-sheet-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── The rest of the house: flat fills, a lip, one primary ── */

.member-trusted-badge {
    background: #E7F6F2 !important;
    color: #0E7A64 !important;
    border-radius: 999px;
    font-weight: 800;
}
button[style*="linear-gradient"],
.btn[style*="linear-gradient"],
.btn-g[style*="linear-gradient"] {
    background: #F8431C !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: 0 4px 0 #C23010 !important;
}
.card[style*="linear-gradient"],
div[style*="linear-gradient"] {
    background-image: none !important;
}
.story-producing-card,
.pricing-free-badge,
.stay-card-icon,
.path-card .path-icon,
.equip-option .equip-icon,
.equip-option .equip-icon.equip-icon-ready,
.equip-option .equip-icon.equip-icon-partial,
.equip-option .equip-icon.equip-icon-new {
    background-image: none !important;
}
.story-producing-card {
    background: #fff !important;
    border: 2px solid #F0E2D4 !important;
    box-shadow: 0 4px 0 #E7D3C4 !important;
}
.stay-card-icon,
.path-card .path-icon,
.equip-option .equip-icon {
    background: #FFF1E4 !important;
}
.sent-reminder-bar { background: #F8431C !important; }
.btn-reminder {
    background: #1AA88A !important;
    background-image: none !important;
    box-shadow: 0 4px 0 #0E7A64 !important;
}
body.blog-post {
    background: var(--cream) !important;
    background-image: none !important;
}
.guide-card {
    background: #fff !important;
    border: 2px solid #F0E2D4 !important;
    box-shadow: 0 4px 0 #E7D3C4 !important;
}
.landing-footer span {
    background: none !important;
    -webkit-text-fill-color: #F8431C !important;
    color: #F8431C !important;
}

/* Record chooser. One orange primary, the rest white lips. */
.record-tile {
    border-radius: 16px !important;
    font-family: Nunito, sans-serif !important;
}
.record-tile.tile-primary {
    min-height: 148px !important;
    background: #F8431C !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: 0 4px 0 #C23010 !important;
    color: #fff !important;
}
.record-tile.tile-primary .record-tile-art svg {
    width: 4.2rem !important;
    height: 4.2rem !important;
    opacity: 0.35 !important;
    right: -0.2rem !important;
    top: -0.2rem !important;
}
.record-tile.tile-primary .record-tile-title,
.record-tile.tile-primary .record-tile-sub {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
}
.record-tile:not(.tile-primary) {
    background: #fff !important;
    background-image: none !important;
    border: 2px solid #F0E2D4 !important;
    box-shadow: 0 4px 0 #E7D3C4 !important;
    color: #241814 !important;
}
.record-tile:not(.tile-primary) .record-tile-title,
.record-tile.tile-write .record-tile-title,
.record-tile.tile-write .record-tile-sub {
    color: #241814 !important;
    -webkit-text-fill-color: #241814 !important;
    background: none !important;
}
.record-tile.tile-write .record-tile-sub { color: #8A7568 !important; }
.record-tile.tile-help {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border-radius: 16px !important;
    color: #F8431C !important;
}
.record-tile:active { transform: translateY(4px); }

/* Send a Tonigram. Compact flat rooms, one record button, the fox beside you. */
body.sound-board-mode:not(.fox-night) .fox-hero {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin: 2px 0 8px;
}
body.sound-board-mode:not(.fox-night) .fox-hero-rig { width: min(128px, 34vw); }
body.sound-board-mode:not(.fox-night) .fox-bubble,
body.fox-night .fox-bubble {
    position: relative;
}
body.sound-board-mode:not(.fox-night) .fox-bubble {
    display: block;
    background: #fff;
    border: 2px solid #F0E2D4;
    border-radius: 18px 18px 18px 6px;
    box-shadow: 0 3px 0 #F0E2D4;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.25;
    max-width: 168px;
    margin-bottom: 10px;
    color: #241814;
}
body.sound-board-mode:not(.fox-night) .fox-bubble::before {
    content: "";
    position: absolute;
    left: -8px;
    bottom: 12px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 2px solid #F0E2D4;
    border-bottom: 2px solid #F0E2D4;
    border-radius: 0 0 0 3px;
    transform: rotate(45deg);
}
body.sound-board-mode:not(.fox-night) .sound-board-back {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    min-height: 40px;
    padding: 4px 2px 8px;
    color: #8A7568 !important;
}
body.sound-board-mode:not(.fox-night) .sound-board-back-title {
    color: #241814;
    font-weight: 800;
}
body.sound-board-mode:not(.fox-night) .sound-board-stage {
    flex: 0 0 auto !important;
    height: auto !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 10px !important;
    align-content: start;
}
body.sound-board-mode:not(.fox-night) .sound-board-stage:not(.has-pads) .sound-board-pads {
    display: none !important;
}
.sound-board-corner,
.sound-board-pad {
    background: #fff !important;
    background-image: none !important;
    border: 2px solid #F0E2D4 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 0 #E7D3C4 !important;
    color: #241814 !important;
    min-height: 72px;
    height: auto;
}
.sound-board-corner.is-on,
.sound-board-corner.is-on.feel-warm,
.sound-board-corner.is-on.feel-hearth,
.sound-board-corner.is-on.feel-silly,
.sound-board-corner.is-on.feel-big {
    background: #FFF1E4 !important;
    border-color: #F8431C !important;
    box-shadow: 0 4px 0 #C23010 !important;
    color: #F8431C !important;
}
.sound-board-corner-label,
.sound-board-pad-label {
    font-family: Nunito, sans-serif;
    font-weight: 800;
    color: inherit;
}
body.sound-board-mode:not(.fox-night) .sound-board-stage .recorder-panel {
    height: auto !important;
    min-height: 0 !important;
}
body.sound-board-mode:not(.fox-night) .sound-board-stage .recorder-panel:not(.recording-active):not(.counting-down) .recorder-panel-inner {
    flex: 0 0 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}
body.sound-board-mode:not(.fox-night) .sound-board-stage .recorder-panel.recording-active .recorder-panel-inner,
body.sound-board-mode:not(.fox-night) .sound-board-stage .recorder-panel.counting-down .recorder-panel-inner,
body.sound-board-mode:not(.fox-night) .sound-board-stage .recorder-panel-inner.expanded {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 72px !important;
}

/* The mic name is a setting, not a headline. Phones don't need it. */
.mic-picker {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #B7A79C !important;
}
.mic-picker select {
    color: #8A7568 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
@media (max-width: 820px) {
    .mic-picker,
    .mic-picker:not(.hidden),
    body.sound-board-mode .sound-board-stage .mic-picker,
    body.sound-board-mode .sound-board-stage .mic-picker:not(.hidden),
    .recorder-panel.recording-active .mic-picker:not(.hidden) {
        display: none !important;
    }
}

/* One fox in the wordmark. The old bright logo was sitting beside the mark. */
.top-bar .logo > img { display: none !important; }
.top-bar .fox-mark { width: 32px; height: 32px; }

/* The puppet is taller than the old square. Give him his own height
   so the wordmark sits clear of the ears. */
.brand-magic:has(.fox-mount) {
    width: min(156px, 42vw);
    height: auto;
    aspect-ratio: 450 / 670;
    margin: 12px auto 8px;
    overflow: visible;
}
.welcome-hero .brand-magic-word,
.equip-copy .brand-magic-word { margin-bottom: 2px; }
.bm-spark { display: none !important; }

/* Help is a question mark, not an empty white square. */
.record-tile.tile-help .record-tile-art,
.record-tile.tile-help .record-tile-art svg {
    color: #F8431C !important;
}
.record-avatar.has-new::before {
    background: #F8431C !important;
    animation: none;
}

/* Flat house. Gradients become a fill. Cards get a lip. */
.equip-vignette-ready { background: #FFF1E4 !important; }
.equip-vignette-partial { background: #E7F6F2 !important; }
.equip-vignette-new { background: #FFF6EA !important; }
.getting-started-card,
.story-mode,
.story-mode.is-own,
.story-tell-live,
.story-writing-card,
.story-producing-card,
.story-producing-card.is-ready,
.story-producing-card.is-failed,
.library-item.is-producing,
.byb-card,
.credits-celebrate,
.credits-balance,
.credits-empty-card,
.gift-card-cta,
.lib-toast,
.lib-theme-card,
.credits-entry.is-new,
.tweak-chip.working {
    background: #fff !important;
    background-image: none !important;
    border: 2px solid #F0E2D4 !important;
    box-shadow: 0 4px 0 #E7D3C4 !important;
    animation: none !important;
}
.story-producing-card.is-ready { background: #E7F6F2 !important; }
.story-mode.is-own { background: #E7F6F2 !important; }
.credits-empty-card { background: #FFF1E4 !important; }
.story-writing-card::before,
.btn-tell-story::before,
.avatar-card::before,
.celebrate-confetti,
.story-spark { display: none !important; }
.story-writing-orb,
.story-tell-live.is-working .story-tell-dot,
.story-length-fill,
.produce-progress-bar,
.contributor-bar-fill,
.teller-hero,
.teller-play,
.btn-tell-story,
.btn-tell-done,
.btn-dialog-confirm,
.btn-view-library,
.btn-retry-producing,
.btn-trust,
.celebrate-done,
.admin-avatar-fallback {
    background: #F8431C !important;
    background-image: none !important;
    color: #fff !important;
}
.btn-tell-story,
.btn-tell-done,
.btn-dialog-confirm,
.teller-hero,
.btn-view-library,
.btn-retry-producing,
.btn-trust,
.celebrate-done,
.byb-ready-btn {
    box-shadow: 0 4px 0 #C23010 !important;
}
.byb-ready-btn:hover:not(:disabled),
.byb-ready-btn:active:not(:disabled) {
    box-shadow: 0 0 0 #C23010 !important;
    transform: translateY(4px);
}
.teller-play { box-shadow: 0 4px 0 #C23010 !important; }
.story-writing-orb { box-shadow: 0 4px 0 #C23010 !important; }
.story-mode.is-own .story-length-fill,
.story-producing-card.is-ready .story-producing-actions .btn-view-library,
.btn-stay-primary,
.pricing-free-badge,
.allset-icon {
    background: #1AA88A !important;
    background-image: none !important;
    color: #fff !important;
}
.btn-stay-primary { box-shadow: 0 4px 0 #0E7A64 !important; }
.story-length-slider-wrap input[type="range"]::-webkit-slider-thumb,
.story-length-slider-wrap input[type="range"]::-moz-range-thumb,
.story-mode.is-own .story-length-slider-wrap input[type="range"]::-webkit-slider-thumb,
.story-mode.is-own .story-length-slider-wrap input[type="range"]::-moz-range-thumb {
    background: #F8431C !important;
    box-shadow: 0 2px 0 #C23010 !important;
}
.story-mode.is-own .story-length-slider-wrap input[type="range"]::-webkit-slider-thumb,
.story-mode.is-own .story-length-slider-wrap input[type="range"]::-moz-range-thumb {
    background: #1AA88A !important;
    box-shadow: 0 2px 0 #0E7A64 !important;
}
.byb-title,
.celebrate-count {
    background: none !important;
    -webkit-text-fill-color: #F8431C !important;
    color: #F8431C !important;
}
.teller-sfx-toy,
.story-output .story-text .story-sfx-clickable,
.story-output .story-text .story-sfx-clickable:hover,
.equip-vignette,
.path-card,
.equip-choice,
.hardware-card {
    background-image: none !important;
}
.teller-sfx-toy,
.story-output .story-text .story-sfx-clickable,
.story-output .story-text .story-sfx-clickable:hover {
    background: #FFF1E4 !important;
    color: #F8431C !important;
    border: 2px solid #F0E2D4 !important;
    box-shadow: 0 3px 0 #E7D3C4 !important;
}
.story-output .story-text .story-sfx-clickable.story-sfx-playing {
    background: #F8431C !important;
    color: #fff !important;
    box-shadow: 0 3px 0 #C23010 !important;
}
.path-card,
.equip-choice {
    background: #fff !important;
    border: 2px solid #F0E2D4 !important;
    box-shadow: 0 4px 0 #E7D3C4 !important;
}
.stay-card {
    border: 2px solid #F0E2D4 !important;
    box-shadow: 0 4px 0 #E7D3C4 !important;
}
.avatar-card-icon,
.bedtime-running-icon,
.credits-entry-icon,
.credits-entry-icon.spend,
.credits-entry-icon.add,
.credits-entry-icon.refund,
.btn-analytics,
.contributor-analytics-icon,
.contributor-rank,
.contributor-rank.gold,
.contributor-rank.silver,
.contributor-rank.bronze,
.member-phone-badge,
.tonie-switcher-item .ts-add-icon,
.tonie-switcher-item.active {
    background: #FFF1E4 !important;
    background-image: none !important;
    color: #F8431C !important;
}
.credits-entry-icon.add,
.member-phone-badge,
.contributor-analytics-icon { background: #E7F6F2 !important; color: #0E7A64 !important; }
.library-item.is-producing .library-title,
.library-item.is-producing .produce-progress-msg,
.story-producing-msg,
.story-tell-live.is-working .story-tell-timer { color: #241814 !important; }
.library-item.is-producing .producing-spinner,
.producing-spinner {
    border-color: #F0E2D4 !important;
    border-top-color: #F8431C !important;
}
.fox-empty { text-align: center; padding: 1.1rem 0.4rem 0.4rem; }
.fox-empty > img,
.fox-empty > .fox-mount {
    width: min(220px, 64vw);
    height: auto;
    max-height: 168px;
    object-fit: contain;
    display: block;
    margin: 0 auto 0.7rem;
}
.fox-empty > .fox-mount {
    width: 112px;
    aspect-ratio: 450 / 670;
    max-height: none;
}
.fox-empty strong {
    display: block; font-weight: 800; font-size: 1.05rem;
    color: #241814; margin-bottom: 0.3rem;
}
.fox-empty p {
    font-size: 0.88rem; font-weight: 700; color: #8A7568; line-height: 1.45; margin: 0;
}
.dialog-animated,
.app-dialog,
.trust-dialog,
.connect-modal-inner,
.qr-overlay-content,
#how-it-works-card,
#name-dialog-card,
#member-name-dialog-card,
#tonie-switcher-card {
    background: #fff !important;
    border: 2px solid #F0E2D4 !important;
    box-shadow: 0 6px 0 #E7D3C4 !important;
    border-radius: 24px !important;
}

/* Recording. The fox sits in the open space. The timer and Stop stay in the thumb. */
body.fox-night.fox-recording:not(.fox-sounds-open) .sound-board-stage,
body.fox-night.fox-counting:not(.fox-sounds-open) .sound-board-stage {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
}
body.fox-night.fox-recording .fox-hero,
body.fox-night.fox-counting .fox-hero {
    flex: 1 1 auto;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    margin: 0;
    position: relative;
}
body.fox-night.fox-recording .fox-hero-rig,
body.fox-night.fox-counting .fox-hero-rig,
body.fox-night .sound-board:has(.recorder-panel.counting-down) .fox-hero-rig,
body.fox-night .sound-board:has(.recorder-panel.recording-active) .fox-hero-rig {
    width: min(210px, 56vw) !important;
    position: relative;
    z-index: 1;
}
/* One ring, centered on the fox in both states. Level only scales it. */
body.fox-night.fox-recording .fox-hero-rig::before,
body.fox-night.fox-counting .fox-hero-rig::before,
body.fox-night .sound-board:has(.recorder-panel.counting-down) .fox-hero-rig::before,
body.fox-night .sound-board:has(.recorder-panel.recording-active) .fox-hero-rig::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(248px, 66vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid rgba(26, 168, 138, 0.7);
    background: rgba(26, 168, 138, 0.08);
    transform: translate(-50%, -50%) scale(calc(0.92 + var(--fox-level, 0) * 0.22));
    transform-origin: center center;
    box-shadow: 0 0 0 calc(8px + var(--fox-level, 0) * 26px) rgba(26, 168, 138, 0.16);
    animation: fox-level-rest 1.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
body.fox-night.fox-recording .fox-hero::before,
body.fox-night.fox-counting .fox-hero::before,
body.fox-night .sound-board:has(.recorder-panel.recording-active) .fox-hero::before {
    content: none;
}
@keyframes fox-level-rest {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}
body.fox-night.fox-recording .fox-listen,
body.fox-night.fox-recording .fox-rec-idea,
body.fox-night.fox-counting .fox-listen,
body.fox-night.fox-counting .fox-rec-idea {
    display: none !important;
}
body.fox-night.fox-recording .recorder-panel,
body.fox-night.fox-counting .recorder-panel {
    position: relative;
    bottom: auto;
}
body.fox-night.fox-recording .sound-board-stage .recorder-panel.recording-active .recorder-panel-inner,
body.fox-night.fox-recording .recorder-panel-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 8px;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
}
body.fox-night.fox-recording .recorder-panel-inner:active,
body.fox-night.fox-recording .recorder-panel-inner:active:not(.expanded) {
    transform: none !important;
    box-shadow: none !important;
}
body.fox-night.fox-recording .recorder-live {
    order: 1;
    flex: 0 0 auto !important;
    padding: 0 !important;
    min-height: 0 !important;
}
body.fox-night.fox-recording .fox-stop-label { order: 2; }
body.fox-night.fox-recording .recorder-clock {
    position: static !important;
    justify-content: center !important;
    width: 100%;
}
body.fox-night.fox-recording .recorder-pulse,
body.fox-night.fox-recording .recorder-string,
body.fox-night.fox-recording .recorder-tap-cue,
body.fox-night.fox-recording .recorder-paused-pill,
body.fox-night.fox-recording .hint {
    display: none !important;
}
body.fox-night.fox-recording .timer,
body.fox-night .recorder-panel.recording-active .timer {
    display: block !important;
    margin: 0 !important;
    font-size: 64px !important;
    font-weight: 800 !important;
    letter-spacing: -0.05em !important;
    line-height: 1 !important;
    color: #241814 !important;
    -webkit-text-fill-color: #241814 !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
body.fox-night.fox-recording .fox-stop-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 0 16px;
    background: #F8431C;
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 0 #C23010;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
}
body.fox-night.fox-recording .recorder-panel-inner:active .fox-stop-label {
    transform: translateY(4px);
    box-shadow: 0 0 0 #C23010;
}
@media (prefers-reduced-motion: reduce) {
    body.fox-night.fox-recording .fox-hero-rig::before,
    body.fox-night.fox-counting .fox-hero-rig::before { animation: none; }
}

/* Credits. The number leads. The list can breathe. */
.credits-dialog.credits-dialog-wide {
    padding: 1.35rem 1.2rem 1.15rem !important;
    text-align: left;
    max-height: calc(100dvh - 2rem) !important;
    overflow-y: auto !important;
}
.credits-dialog-header {
    gap: 0.85rem !important;
    margin-bottom: 1.15rem !important;
}
.credits-dialog h3,
#credits-dialog-title {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em;
    line-height: 1;
}
.credits-balance {
    padding: 1rem 1.1rem !important;
    margin-bottom: 1.2rem !important;
    border-radius: 18px !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
}
.credits-balance-num {
    font-size: 2.6rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.05em;
    color: #F8431C !important;
}
.credits-balance-lbl {
    font-size: 0.78rem !important;
    letter-spacing: 0.06em;
}
.credits-explainer {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    color: #5C4E46 !important;
}
.credits-packs { gap: 0.7rem !important; margin-bottom: 1.25rem !important; }
.credits-pack { padding: 1.15rem 0.55rem 1rem !important; border-radius: 18px !important; }
.credits-cost-card {
    background: #fff !important;
    border: 2px solid #F0E2D4 !important;
    box-shadow: 0 4px 0 #E7D3C4 !important;
    border-radius: 18px !important;
    padding: 1rem 1rem 0.85rem !important;
    margin-bottom: 1.2rem !important;
}
.credits-cost-card-title {
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 0.35rem !important;
    color: #8A7568 !important;
}
.credits-cost-row { padding: 0.6rem 0 !important; gap: 0.75rem !important; }
.credits-cost-row-text { font-size: 0.95rem !important; line-height: 1.35 !important; }
.credits-cost-row-cost { font-size: 1rem !important; padding: 0.2rem 0.6rem !important; }
.credits-cost-card-footnote { margin-top: 0.75rem !important; font-size: 0.78rem !important; }
.credits-dialog-tabs { margin-bottom: 1.15rem !important; padding: 0.3rem !important; }
.credits-dialog-close {
    margin-top: 0.35rem !important;
    min-height: 52px;
    font-weight: 800 !important;
    border-radius: 16px !important;
}

/* Countdown lock. The slab and the digit stay solid for the whole second.
   A fade, a pop, or a disabled wash reads as pale mint. */
body.fox-night .recorder-panel.counting-down,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down,
.recorder-panel.counting-down {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
}
body.fox-night .recorder-panel.counting-down .recorder-panel-inner,
body.fox-night .sound-board-stage .recorder-panel.counting-down .recorder-panel-inner,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down .recorder-panel-inner,
.recorder-panel.counting-down .recorder-panel-inner {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
    background: #1AA88A !important;
    background-color: #1AA88A !important;
    background-image: none !important;
    box-shadow: 0 4px 0 #0E7A64 !important;
    color: #fff !important;
    min-height: 168px !important;
    height: auto !important;
    max-height: none !important;
}
body.fox-night .recorder-panel.counting-down .recorder-live,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down .recorder-live,
body.fox-night .recorder-panel.counting-down .hint,
body.fox-night .recorder-panel.counting-down .hint.countdown-pop,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down .hint,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down .hint.countdown-pop,
.recorder-panel.counting-down .hint,
.recorder-panel.counting-down .hint.countdown-pop {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    font-weight: 800 !important;
    font-size: 96px !important;
    line-height: 0.9 !important;
}

/* Recording. Keyed off the panel, not only the body class, so the first
   paint is the listening room: planted fox, soft ring, large timer, Stop. */
body.fox-night .sound-board:has(.recorder-panel.recording-active:not(.counting-down)) .sound-board-stage,
body.fox-night.fox-recording:not(.fox-sounds-open) .sound-board-stage {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    height: auto !important;
}
body.fox-night .sound-board:has(.recorder-panel.recording-active:not(.counting-down)) .fox-hero,
body.fox-night.fox-recording .fox-hero {
    flex: 1 1 auto;
    min-height: 180px;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding-bottom: 4px;
    position: relative;
}
body.fox-night .sound-board-stage .recorder-panel.recording-active:not(.counting-down),
body.fox-night.fox-recording .recorder-panel {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}
body.fox-night .sound-board-stage .recorder-panel.recording-active:not(.counting-down) .recorder-panel-inner,
body.fox-night.fox-recording .sound-board-stage .recorder-panel.recording-active .recorder-panel-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 10px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
}
body.fox-night .sound-board-stage .recorder-panel.recording-active:not(.counting-down) .recorder-string,
body.fox-night .sound-board-stage .recorder-panel.recording-active:not(.counting-down) .recorder-pulse,
body.fox-night .sound-board-stage .recorder-panel.recording-active:not(.counting-down) .recorder-tap-cue,
body.fox-night .sound-board-stage .recorder-panel.recording-active:not(.counting-down) .hint,
body.fox-night.fox-recording .recorder-string {
    display: none !important;
}
body.fox-night .sound-board-stage .recorder-panel.recording-active .recorder-live,
body.fox-night.fox-recording .recorder-live {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
}
body.fox-night .sound-board-stage .recorder-panel.recording-active:not(.counting-down) .timer,
body.fox-night.fox-recording .timer {
    display: block !important;
    margin: 0 !important;
    font-size: 72px !important;
    font-weight: 800 !important;
    letter-spacing: -0.05em !important;
    line-height: 1 !important;
    color: #241814 !important;
    -webkit-text-fill-color: #241814 !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
    opacity: 1 !important;
}
body.fox-night .sound-board-stage .recorder-panel.recording-active:not(.counting-down) .fox-stop-label,
body.fox-night.fox-recording .fox-stop-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 0 16px;
    background: #F8431C !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 16px;
    box-shadow: 0 4px 0 #C23010;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    opacity: 1 !important;
}

/* The listening room is every take. Reminder night is not required.
   Hub, Story Builder, and a grandparent link all use these. */
body.fox-counting,
body.fox-recording {
    background: #FFF6EA !important;
    background-image: none !important;
}
body.fox-counting #recording-motivation,
body.fox-recording #recording-motivation,
body.fox-counting #sound-board,
body.fox-recording #sound-board {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
body.fox-counting #story-output,
body.fox-recording #story-output,
body.fox-counting #story-helper-input,
body.fox-recording #story-helper-input,
body.fox-counting #record-hub,
body.fox-recording #record-hub {
    display: none !important;
}
body.fox-counting .fox-hero,
body.fox-recording .fox-hero,
body.sound-board-mode:not(.fox-night).fox-counting .fox-hero,
body.sound-board-mode:not(.fox-night).fox-recording .fox-hero {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 200px;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
    position: relative;
}
body.fox-counting .fox-hero-rig,
body.fox-recording .fox-hero-rig,
body.sound-board-mode:not(.fox-night).fox-counting .fox-hero-rig,
body.sound-board-mode:not(.fox-night).fox-recording .fox-hero-rig {
    width: min(210px, 56vw) !important;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}
body.fox-counting .fox-hero-rig::before,
body.fox-recording .fox-hero-rig::before {
    content: "" !important;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(248px, 66vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid rgba(26, 168, 138, 0.7);
    background: rgba(26, 168, 138, 0.08);
    transform: translate(-50%, -50%) scale(calc(0.92 + var(--fox-level, 0) * 0.22));
    transform-origin: center center;
    box-shadow: 0 0 0 calc(8px + var(--fox-level, 0) * 26px) rgba(26, 168, 138, 0.16);
    animation: fox-level-rest 1.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
body.fox-counting .fox-bubble,
body.fox-recording .fox-bubble,
body.fox-counting .sound-board-corner,
body.fox-recording .sound-board-corner,
body.fox-counting .sound-board-pads,
body.fox-recording .sound-board-pads,
body.fox-counting .fox-sounds-toggle,
body.fox-recording .fox-sounds-toggle {
    display: none !important;
}
body.fox-counting .sound-board-stage,
body.fox-recording .sound-board-stage,
body.sound-board-mode:not(.fox-night).fox-counting .sound-board-stage,
body.sound-board-mode:not(.fox-night).fox-recording .sound-board-stage {
    flex: 0 0 auto !important;
    height: auto !important;
    margin-top: 0 !important;
}
body.fox-recording .recorder-string,
body.fox-recording .recorder-tap-cue,
body.fox-recording .recorder-pulse,
body.fox-counting .recorder-string,
body.fox-counting .recorder-tap-cue,
body.sound-board-mode .sound-board-stage .recorder-panel.recording-active .recorder-tap-cue,
body.sound-board-mode .sound-board-stage .recorder-panel.recording-active .recorder-string,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down .recorder-tap-cue,
body.sound-board-mode .sound-board-stage .recorder-panel.counting-down .recorder-string {
    display: none !important;
}
body.fox-recording .recorder-panel.recording-active:not(.counting-down) .recorder-panel-inner,
body.sound-board-mode .sound-board-stage .recorder-panel.recording-active:not(.counting-down) .recorder-panel-inner,
body.sound-board-mode:not(.fox-night) .sound-board-stage .recorder-panel.recording-active .recorder-panel-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
}
body.fox-recording .recorder-live,
body.sound-board-mode .sound-board-stage .recorder-panel.recording-active .recorder-live {
    order: 1;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
}
body.fox-recording .fox-stop-label,
body.sound-board-mode .recorder-panel.recording-active .fox-stop-label {
    order: 2;
}
body.fox-recording .recorder-clock,
body.sound-board-mode .sound-board-stage .recorder-panel.recording-active .recorder-clock {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    top: auto !important;
    right: auto !important;
}
body.fox-recording .timer,
body.sound-board-mode .sound-board-stage .recorder-panel.recording-active .timer,
body.fox-recording .recorder-panel.recording-active .timer {
    display: block !important;
    margin: 0 !important;
    font-size: 72px !important;
    font-weight: 800 !important;
    letter-spacing: -0.05em !important;
    line-height: 1 !important;
    color: #241814 !important;
    -webkit-text-fill-color: #241814 !important;
    text-align: center;
    opacity: 1 !important;
    text-shadow: none !important;
}
body.fox-recording .fox-stop-label,
body.sound-board-mode .recorder-panel.recording-active .fox-stop-label,
.recorder-panel.recording-active:not(.counting-down) .fox-stop-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 0 16px;
    background: #F8431C !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 16px;
    box-shadow: 0 4px 0 #C23010;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    opacity: 1 !important;
}
.recorder-panel.counting-down .recorder-panel-inner,
body.sound-board-mode:not(.fox-night) .sound-board-stage .recorder-panel.counting-down .recorder-panel-inner {
    background: #1AA88A !important;
    background-color: #1AA88A !important;
    background-image: none !important;
    box-shadow: 0 4px 0 #0E7A64 !important;
    opacity: 1 !important;
    min-height: 168px !important;
    height: auto !important;
    max-height: none !important;
}

/* Teller countdown is the same solid slab. The take keeps a large timer and Stop. */
.teller-countdown {
    background: #1AA88A !important;
    opacity: 1 !important;
    animation: none !important;
}
.teller-countdown-num,
.teller-countdown-num.is-pop,
body.record-path-teller .teller-countdown-num {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 96px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}
/* Story Builder and the teller cover the page. While a take is counting
   or recording, the listening room sits above that cover: fox, ring,
   countdown slab or timer, and Stop. record-on-hub and dimmed-out only
   hide the idle panel; they must not hide a live take. */
body.fox-counting .recorder-panel.dimmed-out,
body.fox-recording .recorder-panel.dimmed-out,
body.record-on-hub.fox-counting .recorder-panel,
body.record-on-hub.fox-recording .recorder-panel,
body.listening-room .recorder-panel,
body.listening-room.record-on-hub .recorder-panel,
body.listening-room .recorder-panel.dimmed-out,
body.teller-open.fox-counting .recorder-panel,
body.teller-open.fox-recording .recorder-panel {
    display: flex !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: none !important;
}
body.listening-room #recording-motivation {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 200;
    height: auto !important;
    min-height: 0;
    max-height: none;
    background: #FFF6EA !important;
    background-image: none !important;
    flex-direction: column;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    pointer-events: auto;
}
body.listening-room #sound-board {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    background: transparent !important;
    box-shadow: none !important;
}
body.listening-room .sound-board-back,
body.listening-room .fox-top,
body.listening-room .fox-steps,
body.listening-room .fox-bubble,
body.listening-room .fox-listen,
body.listening-room .fox-rec-idea,
body.listening-room .reminder-idea-card,
body.listening-room .fox-sounds-toggle,
body.listening-room .sound-board-corner,
body.listening-room .sound-board-pads {
    display: none !important;
}
body.listening-room .fox-hero {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
}
body.listening-room .fox-hero-rig {
    width: min(210px, 56vw) !important;
}
body.listening-room .sound-board-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    margin: 0 !important;
}
body.listening-room .recorder-panel,
body.listening-room .recorder-panel-inner,
body.listening-room .fox-stop-label,
body.listening-room .recorder-clock {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
}
@media (prefers-reduced-motion: reduce) {
    body.fox-counting .fox-hero-rig::before,
    body.fox-recording .fox-hero-rig::before { animation: none; }
}