@font-face {
    font-family: "Montserrat";
    src: url("../assets/fonts/Montserrat-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../assets/fonts/Archivo.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "EB Garamond";
    src: url("../assets/fonts/EBGaramond.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../assets/fonts/Inter.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Junicode";
    src: url("../assets/fonts/Junicode.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Baskerville";
    src: url("../assets/fonts/LibreBaskerville.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Merriweather";
    src: url("../assets/fonts/Merriweather.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OpenDyslexic";
    src: url("../assets/fonts/OpenDyslexic-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../assets/fonts/Roboto.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-top: env(safe-area-inset-top, 0px);
        --tb-mobile-nav-height: 68px;
        --tb-mobile-nav-offset: calc(
            var(--tb-mobile-nav-height) + var(--safe-bottom)
        );
        --tb-app-header-height: 64px;
        --background: 0 0% 100%; /* Light mode background - white */
        --foreground: 222.2 84% 4.9%; /* Light mode text */

        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        --primary: 221.2 83.2% 53.3%; /* Sky blue */
        --primary-foreground: 210 40% 98%;

        --secondary: 210 40% 96.1%; /* Light gray for active explore panel item */
        --secondary-foreground: 222.2 47.4% 11.2%; /* Text for active explore panel item */

        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%; /* Muted text */

        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;

        --border: 214.3 31.8% 91.4%; /* Light border, e.g., stone-200 */
        --input: 214.3 31.8% 91.4%;
        --ring: 221.2 83.2% 53.3%; /* Sky blue for focus rings */

        --radius: 0.5rem;

        /* Reader Typography & Rhythm Tokens */
        --reader-font-scale: 1;
        --reader-font-size-base: 1.05rem;
        --reader-font-size: calc(
            var(--reader-font-size-base) * var(--reader-font-scale)
        );
        --reader-line-height: 1.6;
        --reader-max-width: 72ch;
        --reader-block-gap-xs: 4px;
        --reader-block-gap-sm: 8px;
        --reader-block-gap-md: 12px;
        --reader-block-gap-lg: 16px;
        --reader-block-gap-xl: 24px;
        --reader-verse-gap: var(--reader-block-gap-sm);
        --reader-verse-number-size: 0.85em;
        --reader-verse-number-baseline-shift: 0px;
        --reader-poetry-indent-1: 12px;
        --reader-poetry-indent-2: 24px;
        --reader-poetry-line-gap: 0px;
        --reader-poetry-stanza-gap: var(--reader-block-gap-sm);
        --reader-heading-size: 0.75em;
        --reader-heading-letter-spacing: 0.08em;
        --reader-heading-gap-above: var(--reader-block-gap-lg);
        --reader-heading-gap-below: var(--reader-block-gap-sm);
        --reader-footnote-size: 0.75em;
        --reader-footnote-superscript-shift: super;
        --tb-skeleton-base: hsl(var(--muted) / 0.64);
        --tb-skeleton-highlight: hsl(var(--accent) / 0.74);
        --tb-skeleton-radius: 0.38rem;
    }

    .dark {
        --background: 224 71.4% 4.1%; /* Dark mode background - slate-900 */
        --foreground: 210 20% 98%; /* Dark mode text - slate-50 */

        --card: 222.2 47.4% 11.2%;
        --card-foreground: 210 20% 98%;

        --popover: 222.2 47.4% 11.2%;
        --popover-foreground: 210 20% 98%;

        --primary: 217.2 91.2% 59.8%; /* Brighter sky blue for dark mode */
        --primary-foreground: 222.2 47.4% 11.2%;

        --secondary: 217.2 32.6% 17.5%; /* Darker gray for active explore panel item */
        --secondary-foreground: 210 20% 98%; /* Text for active explore panel item */

        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%; /* Lighter muted text for dark */

        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 20% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 20% 98%;

        --border: 217.2 32.6% 25.5%; /* Darker border, e.g., slate-700 */
        --input: 217.2 32.6% 25.5%;
        --ring: 217.2 91.2% 59.8%;
        --tb-skeleton-base: hsl(var(--secondary) / 0.68);
        --tb-skeleton-highlight: hsl(var(--secondary) / 0.78);
    }
}

@layer utilities {
    .tb-sparkle-shimmer {
        transition:
            transform 200ms ease,
            filter 200ms ease;
    }

    .tb-sparkle-trigger:hover .tb-sparkle-shimmer {
        animation: tb-sparkle-shimmer 1.2s ease-in-out infinite;
    }
}

@keyframes tb-sparkle-shimmer {
    0% {
        transform: translateX(-1px) rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0));
    }
    50% {
        transform: translateX(1px) rotate(12deg) scale(1.06);
        filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.65));
    }
    100% {
        transform: translateX(-1px) rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0));
    }
}

@keyframes tb-skeleton-shimmer {
    0% {
        transform: translateX(-108%);
    }
    100% {
        transform: translateX(108%);
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
        font-family: "Montserrat", "Segoe UI", sans-serif;
        letter-spacing: 0.05em;
        font-size: 18px;
        font-feature-settings:
            "rlig" 1,
            "calt" 1;
    }
    body.font-dyslexia {
        font-family: "OpenDyslexic", sans-serif;
    }
    body.font-dyslexia h1,
    body.font-dyslexia h2,
    body.font-dyslexia h3,
    body.font-dyslexia h4,
    body.font-dyslexia h5,
    body.font-dyslexia h6,
    body.font-dyslexia button,
    body.font-dyslexia [role="button"],
    body.font-dyslexia input,
    body.font-dyslexia select,
    body.font-dyslexia textarea,
    body.font-dyslexia label {
        font-family: "OpenDyslexic", sans-serif;
        font-weight: 400;
    }
    body.reduce-motion *,
    body.reduce-motion *::before,
    body.reduce-motion *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Montserrat", sans-serif;
        font-weight: 500;
    }
    button,
    [role="button"],
    input,
    select,
    textarea,
    label {
        font-family: "Montserrat", sans-serif;
        font-weight: 500;
    }
}

@layer components {
    .tb-skeleton {
        position: relative;
        overflow: hidden;
        border-radius: var(--tb-skeleton-radius);
        background: var(--tb-skeleton-base);
    }

    .tb-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-108%);
        background: linear-gradient(
            102deg,
            transparent 22%,
            var(--tb-skeleton-highlight) 50%,
            transparent 80%
        );
        opacity: 0.5;
        animation: tb-skeleton-shimmer 2.2s ease-in-out infinite;
    }

    .tb-skeleton--line {
        height: max(0.62rem, calc(var(--reader-font-size) * 0.5));
    }

    .tb-skeleton--block {
        min-height: 3.25rem;
    }

    .tb-chapter-skeleton {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        max-width: var(--reader-max-width);
        margin-left: auto;
        margin-right: auto;
        padding: 0.15rem 0.5rem;
    }

    .tb-reader-body .tb-chapter-skeleton {
        padding-left: 0;
        padding-right: 0;
    }

    .tb-chapter-skeleton__title-pill {
        height: 2.15rem;
        display: flex;
        align-items: center;
        border-radius: 0.42rem;
        padding-inline: 0.65rem;
        margin-bottom: 0.12rem;
        background: hsl(var(--muted) / 0.5);
    }

    .dark .tb-chapter-skeleton__title-pill {
        background: hsl(var(--secondary) / 0.7);
    }

    .tb-chapter-skeleton__title {
        height: max(0.76rem, calc(var(--reader-font-size) * 0.56));
        border-radius: 999px;
    }

    .tb-chapter-skeleton__groups {
        display: flex;
        flex-direction: column;
        gap: var(--reader-verse-gap);
    }

    .tb-chapter-skeleton__verse-group {
        --tb-skeleton-line-step: calc(
            var(--reader-font-size) * var(--reader-line-height)
        );
        --tb-skeleton-line-height: max(
            0.6rem,
            calc(var(--reader-font-size) * 0.52)
        );
        display: grid;
        grid-template-columns: 1.62rem minmax(0, 1fr);
        align-items: flex-start;
        column-gap: 0.58rem;
        padding-inline-start: 2.15rem;
    }

    .tb-chapter-skeleton__verse-number {
        width: 0.62rem;
        height: 0.62rem;
        margin-top: calc(
            (var(--tb-skeleton-line-step) - var(--tb-skeleton-line-height)) / 2
        );
        border-radius: 999px;
    }

    .tb-chapter-skeleton__verse-lines {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: calc(
            var(--tb-skeleton-line-step) - var(--tb-skeleton-line-height)
        );
    }

    .tb-chapter-skeleton__line {
        height: var(--tb-skeleton-line-height);
    }

    .tb-chapter-skeleton__verse-group--poetry {
        padding-inline-start: 2.55rem;
    }

    .tb-chapter-skeleton__verse-group--poetry .tb-chapter-skeleton__line {
        max-width: 90%;
    }

    .tb-chapter-skeleton--compact .tb-chapter-skeleton__groups {
        gap: max(0.36rem, calc(var(--reader-verse-gap) * 0.68));
    }

    .tb-chapter-skeleton--compact .tb-chapter-skeleton__verse-group {
        column-gap: 0.52rem;
        padding-inline-start: 1.85rem;
    }

    .tb-chapter-skeleton--compact .tb-chapter-skeleton__verse-group--poetry {
        padding-inline-start: 2.2rem;
    }

    .tb-chapter-skeleton--compact .tb-chapter-skeleton__verse-lines {
        gap: max(0.16rem, calc(var(--tb-skeleton-line-step) * 0.2));
    }

    .tb-chapter-skeleton-inline {
        width: 100%;
    }

    .tb-chapter-skeleton-inline--top {
        padding: 0.2rem 0.5rem;
    }

    .tb-chapter-skeleton-inline--bottom {
        padding: 0.2rem 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .tb-skeleton::after {
            animation: none;
            opacity: 0.2;
            transform: translateX(0);
        }
    }

    @media (min-width: 640px) {
        .tb-chapter-skeleton {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }
    }

    .tb-reader-content {
        max-width: var(--reader-max-width) !important;
        margin-left: auto;
        margin-right: auto;
        line-height: var(--reader-line-height);
        font-size: calc(
            var(--reader-font-size-base) * var(--reader-font-scale)
        );
    }

    .tb-reader-body {
        line-height: var(--reader-line-height);
        font-size: calc(
            var(--reader-font-size-base) * var(--reader-font-scale)
        );
    }

    .tb-reader-chapter-block {
        margin-bottom: var(--reader-block-gap-xl);
    }

    .tb-reader-footnotes-section {
        margin-top: var(--reader-block-gap-xl);
        padding-top: var(--reader-block-gap-md);
    }

    [data-verse-wrapper="true"] {
        margin-bottom: var(--reader-verse-gap);
    }

    [data-verse-wrapper="true"]:last-child {
        margin-bottom: 0;
    }

    [data-reader-mode="classic"] .tb-reader-content {
        --reader-max-width: 72ch;
        letter-spacing: 0;
    }

    [data-reader-mode="structured"] .tb-reader-content {
        --reader-max-width: 72ch;
    }

    [data-reader-mode="parallel"] .tb-reader-content,
    [data-reader-mode="commentary"] .tb-reader-content {
        --reader-max-width: 68ch;
    }

    [data-reader-mode="focused"] .tb-reader-content {
        --reader-max-width: 74ch;
        letter-spacing: 0.002em;
    }

    .verse-text {
        word-break: normal;
        overflow-wrap: normal;
        white-space: normal;
        hanging-punctuation: allow-end;
    }

    [data-reader-mode="structured"] .tb-strong-word {
        /* Preserve reader typography exactly; global [role="button"] styles would otherwise change font rendering. */
        font: inherit;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        color: inherit;
        text-transform: inherit;
        -webkit-font-smoothing: inherit;
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        display: inline;
        vertical-align: baseline;
        cursor: pointer;
        border-radius: 4px;
        text-decoration: none;
        outline: none;
        transition:
            text-decoration-color 120ms ease,
            background-color 120ms ease;
    }

    [data-reader-mode="structured"] .tb-strong-word:hover,
    [data-reader-mode="structured"] .tb-strong-word:focus-visible {
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        text-decoration-color: currentColor;
        background-color: rgb(15 23 42 / 0.03);
    }

    [data-reader-mode="structured"] .tb-strong-word:active {
        background-color: rgb(15 23 42 / 0.09);
    }

    .dark [data-reader-mode="structured"] .tb-strong-word:hover,
    .dark [data-reader-mode="structured"] .tb-strong-word:focus-visible {
        background-color: rgb(148 163 184 / 0.14);
    }

    .dark [data-reader-mode="structured"] .tb-strong-word:active {
        background-color: rgb(148 163 184 / 0.2);
    }

    .footnotes-anim {
        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity 180ms ease-out,
            transform 180ms ease-out;
        will-change: opacity, transform;
    }

    .footnotes-anim.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
        .footnotes-anim {
            transition: none;
            transform: none;
            will-change: auto;
        }
    }

    .footnote-scripture-link {
        color: rgb(3 105 161);
        text-decoration: underline;
        text-underline-offset: 2px;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        font: inherit;
    }

    .footnote-scripture-link:hover,
    .footnote-scripture-link:focus-visible {
        color: rgb(2 132 199);
        outline: none;
    }

    .dark .footnote-scripture-link {
        color: rgb(125 211 252);
    }

    .dark .footnote-scripture-link:hover,
    .dark .footnote-scripture-link:focus-visible {
        color: rgb(186 230 253);
    }

    .footnote-marker {
        font-size: var(--reader-footnote-size);
        line-height: 0;
        vertical-align: var(--reader-footnote-superscript-shift);
        margin-left: 0.08em;
        display: inline-block;
        white-space: nowrap;
    }

    .footnote-marker__button {
        padding: 0;
        border: none;
        background: transparent;
        color: rgb(3 105 161);
        opacity: 0.88;
        font-weight: 500;
        cursor: pointer;
        line-height: 0;
        transition:
            opacity 140ms ease,
            color 140ms ease,
            text-shadow 140ms ease;
    }

    .dark .footnote-marker__button {
        color: rgb(56 189 248);
    }

    .footnote-marker__button:hover,
    .footnote-marker__button:focus-visible {
        opacity: 1;
        color: rgb(2 132 199);
        text-shadow: 0 0 0.2rem rgb(56 189 248 / 0.2);
        outline: none;
    }

    .dark .footnote-marker__button:hover,
    .dark .footnote-marker__button:focus-visible {
        color: rgb(125 211 252);
        text-shadow: 0 0 0.26rem rgb(125 211 252 / 0.28);
    }

    .footnote-marker--tight {
        margin-left: 0.02em;
    }

    .tb-secondary-action {
        opacity: 0.78;
    }

    .tb-secondary-action:hover,
    .tb-secondary-action:focus-visible {
        opacity: 1;
    }

    .tb-structured-chapter-title {
        border-bottom: 1px solid rgb(148 163 184 / 0.35);
    }

    .dark .tb-structured-chapter-title {
        border-bottom-color: rgb(100 116 139 / 0.55);
    }

    .tb-structured-heading {
        border-bottom: 1px solid rgb(148 163 184 / 0.28);
        margin-top: var(--reader-heading-gap-above);
        margin-bottom: var(--reader-heading-gap-below);
        font-size: var(--reader-heading-size);
        letter-spacing: var(--reader-heading-letter-spacing);
    }

    .dark .tb-structured-heading {
        border-bottom-color: rgb(100 116 139 / 0.45);
    }

    .tb-structured-heading + .tb-structured-heading {
        margin-top: var(--reader-block-gap-sm);
    }

    .tb-structured-error-banner {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border: 1px solid rgba(220, 38, 38, 0.25);
        background: rgba(220, 38, 38, 0.08);
        color: rgb(190 24 24);
    }

    .dark .tb-structured-error-banner {
        border-color: rgba(190, 18, 60, 0.45);
        background: rgba(136, 19, 55, 0.35);
        color: rgb(253 164 175);
    }

    .tb-user-signin-panel-header h2 {
        font-size: 1.15rem;
        opacity: 0.72;
    }

    .tb-header-logo-link,
    .tb-header-logo-image {
        user-select: none;
        -webkit-user-select: none;
    }

    .tb-header-logo-image {
        -webkit-user-drag: none;
        user-drag: none;
    }

    .tb-poetry-line {
        display: block;
        line-height: var(--reader-line-height);
        padding-top: var(--reader-poetry-line-gap);
        padding-bottom: var(--reader-poetry-line-gap);
    }

    .tb-poetry-line[data-poetry-level] {
        margin-inline-start: calc(
            var(--reader-poetry-indent-1) * var(--tb-poetry-level, 0)
        );
    }

    .tb-poetry-stanza-break {
        height: var(--reader-poetry-stanza-gap);
    }

    .tb-verse-number {
        font-size: var(--reader-verse-number-size);
        transform: translateY(var(--reader-verse-number-baseline-shift));
    }

    .tb-audio-follow-verse {
        background-color: rgba(56, 189, 248, 0.13);
        border-radius: 0.4rem;
        box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.28);
        transition:
            background-color 180ms ease,
            box-shadow 180ms ease;
    }

    .dark .tb-audio-follow-verse {
        background-color: rgba(56, 189, 248, 0.18);
        box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.36);
    }

    .tb-verse-jump-highlight {
        border-radius: 0.5rem;
        background-color: rgba(56, 189, 248, 0);
        box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0);
        transition:
            background-color 190ms ease-out,
            box-shadow 190ms ease-out;
    }

    .tb-verse-jump-highlight.is-active {
        background-color: rgba(56, 189, 248, 0.16);
        box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.24);
    }

    .dark .tb-verse-jump-highlight.is-active {
        background-color: rgba(56, 189, 248, 0.23);
        box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.34);
    }

    @media (prefers-reduced-motion: reduce) {
        .tb-verse-jump-highlight {
            transition: none;
        }
    }

    .toolViewport {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .toolRoot {
        height: var(--sheetViewportH, 100%);
        display: flex;
        flex-direction: column;
        /* Critical for flex children overflow scrolling to work on mobile sheets. */
        min-height: 0;
    }

    .toolHeader {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 30;
        background: inherit;
        border-bottom: 1px solid hsl(var(--border));
    }

    .toolBody {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
    }

    .toolBody * {
        -webkit-tap-highlight-color: transparent;
    }

    .toolBodyInner {
        min-height: 100%;
        padding-bottom: calc(12px + var(--safe-bottom));
    }

    .resultsList > *:last-child {
        margin-bottom: 0 !important;
    }

    /* Backwards-compatible aliases for existing tool class names. */
    .toolSheetRoot {
        height: 100%;
        display: flex;
        flex-direction: column;
        /* Critical for flex children overflow scrolling to work on mobile sheets. */
        min-height: 0;
    }

    .toolSheetHeader {
        position: sticky;
        top: 0;
        z-index: 30;
        background: inherit;
        border-bottom: 1px solid hsl(var(--border));
    }

    .toolSheetBody {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: calc(12px + var(--safe-bottom));
        -webkit-tap-highlight-color: transparent;
    }

    .toolSheetBody * {
        -webkit-tap-highlight-color: transparent;
    }

    @media (min-width: 640px) {
        .toolBodyInner {
            padding-bottom: 12px;
        }
        .toolSheetBody {
            padding-bottom: 12px;
        }
    }

    @media (max-width: 639px) {
        .toolViewport input,
        .toolViewport textarea,
        .toolViewport [role="combobox"],
        .tb-sheet-scroll input,
        .tb-sheet-scroll textarea,
        .tb-sheet-scroll select,
        .tb-sheet-scroll [role="combobox"] {
            font-size: 16px;
        }
    }

    .confetti-piece {
        position: absolute;
        top: -12px;
        width: 8px;
        height: 14px;
        border-radius: 2px;
        background: linear-gradient(135deg, #60b1f4, #34d399);
        opacity: 0.9;
        animation: confettiFall 2.7s ease-in infinite;
    }

    .confetti-piece:nth-child(2n) {
        background: linear-gradient(135deg, #f59e0b, #f472b6);
    }

    .confetti-piece:nth-child(3n) {
        background: linear-gradient(135deg, #a78bfa, #38bdf8);
    }

    .welcome-firework {
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 999px;
        opacity: 0;
        background:
            radial-gradient(
                circle,
                rgba(59, 130, 246, 0.35) 0%,
                rgba(59, 130, 246, 0) 60%
            ),
            radial-gradient(
                circle,
                rgba(236, 72, 153, 0.35) 0%,
                rgba(236, 72, 153, 0) 55%
            );
        animation: fireworkPop 3.2s ease-out infinite;
    }

    .welcome-firework--left {
        top: 16px;
        left: 12px;
        animation-delay: 0.3s;
    }

    .welcome-firework--right {
        top: 24px;
        right: 12px;
        animation-delay: 1s;
    }
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(220px) rotate(160deg);
        opacity: 0;
    }
}

@keyframes fireworkPop {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    70% {
        transform: scale(1);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Custom scrollbar styles for a more modern look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-stone-100 dark:bg-slate-700;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    @apply bg-stone-300 dark:bg-slate-500;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-stone-400 dark:bg-slate-400;
}

/* Ensure html and body take full height for sticky footer and panel */
html,
body,
#root {
    height: 100%;
    overflow: hidden;
}

/* Custom shadow for elements fixed at the top or bottom */
.shadow-top-lg {
    box-shadow:
        0 -4px 6px -1px rgb(0 0 0 / 0.1),
        0 -2px 4px -2px rgb(0 0 0 / 0.1);
}

@keyframes app-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app-fade-in {
    animation: app-fade-in 320ms ease-out;
}

body.reduce-motion .app-fade-in {
    animation: none;
}

@keyframes tutorial-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.6);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(14, 165, 233, 0);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
        transform: scale(1);
    }
}

.tutorial-pulse {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    background: #0ea5e9;
    animation: tutorial-pulse 1.8s ease-out infinite;
    pointer-events: none;
}

.tutorial-bubble {
    position: fixed;
    width: 260px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.2);
}

.dark .tutorial-bubble {
    background: #0f172a;
    border-color: #334155;
}

.tutorial-target-active {
    position: relative;
    z-index: 130;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.9);
    border-radius: 10px;
}

body.reduce-motion .tutorial-pulse {
    animation: none;
}

body.tb-sheet-dragging,
body.tb-sheet-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
}

.tb-sheet-dragging-panel {
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.12) !important;
}

.tb-sheet-root {
    z-index: 50;
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
    overflow: hidden;
}

.tb-sheet-header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 10;
    background: inherit;
    border-bottom: 1px solid hsl(var(--border));
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.tb-sheet-handle {
    touch-action: none;
}

.tb-sheet-body {
    flex: 1 1 auto;
    /* Critical for flex children overflow scrolling to work in constrained sheet heights. */
    min-height: 0;
    overflow: hidden;
}

.tb-sheet-scroll {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color: transparent;
}

/* In the mobile sheet, rely on .tb-sheet-scroll as the single scroller. */
.tb-sheet-scroll .toolViewport,
.tb-sheet-scroll .toolRoot,
.tb-sheet-scroll .toolBody,
.tb-sheet-scroll .toolBodyInner {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.tb-sheet-scroll .toolHeader {
    position: static !important;
}

body.tb-sheet-open .tb-mobile-nav-spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.tb-sheet-open .tb-mobile-nav {
    border-top-color: transparent !important;
}