@import url('https://fonts.googleapis.com/css2?family=Inter:wght=300;400;600&family=Noto+Sans+SC&family=Noto+Sans+JP&display=swap');
        body { font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif; transition: background-color 0.3s, color 0.3s; overflow-x: hidden; }

        /* ── Page background images ───────────────────────────────────────
           Set these two URLs to your images. Left as empty/none by default
           (falls back cleanly to the existing solid background colors
           below) until real image URLs are filled in. */
        :root {
            --bg-image-light: url('bg/light_bg.png'); /* soft abstract gradient — Milad Fakurian, free Unsplash license */
            --bg-image-dark: url('bg/dark_bg.png');
        }
        body {
            background-image: var(--bg-image-light);
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }
        .dark body { background-image: var(--bg-image-dark); }
        /* A light tint over the image everywhere except the hero overlay
           below, so the rest of the page ("tutto il resto sarà chiaro")
           stays readable and close to the original light/dark palette even
           with a busy photo behind it — cards keep their own opaque
           backgrounds on top of this regardless. */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -1;
            background: rgba(250, 246, 239, 0.88);
            pointer-events: none;
        }
        .dark body::before { background: rgba(18, 23, 40, 0.88); }

        /* Header-through-preview area: a darker, translucent panel over the
           image for contrast — this part always uses light text/icons,
           regardless of the site's own light/dark mode, matching the
           classic "dark scrim over hero photo" pattern. */
        .hero-overlay {
            position: relative;
            z-index: 20;
            width: 100vw !important;
            max-width: 100vw !important;
            margin-left: calc(50% - 50vw) !important;
            margin-right: calc(50% - 50vw) !important;
            margin-top: -1rem !important; /* cancels body's own p-4 top padding */
            box-sizing: border-box;
            backdrop-filter: blur(3px);
            border-radius: 0;
            padding: 2rem 1rem;
            /* #main-layout-wrapper (its parent) is itself flex-grow so it
               always fills the full remaining height of the viewport. By
               also making the header a growable flex item, the header's
               own colored panel claims all of that space and the screen is
               fully covered without scrolling — with nothing rendered
               below it (dynamic-results-section is display:none pre-calc,
               so it doesn't compete for space). Once results appear they
               have their own natural (large) height, there's no leftover
               space to grow into, and the header quietly goes back to its
               normal compact size — no JS toggling required. */
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-grow: 1;
        }
        @media (min-width: 768px) {
            .hero-overlay { margin-top: -2.5rem !important; } /* cancels body's md:p-10 top padding */
        }
        /* Opaque scrim tint: warm terracotta over the light background,
           deep indigo over the dark one — same glassy effect, different
           mood per theme. Text stays light on both since the scrim is
           always dark enough underneath. */
        .light .hero-overlay { background: rgba(138, 82, 46, 0.58); }
        .dark .hero-overlay { background: rgba(32, 27, 61, 0.72); }
        .hero-overlay, .hero-overlay #ui-title {
            color: #f7f2e7 !important;
        }
        .hero-overlay .latex-preview-box span {
            color: #56514a !important;
            opacity: 0.75 !important;
        }
        .hero-overlay #latexPreview {
            color: #2a251f !important; /* stays dark: it sits on its own white preview card, unaffected by the hero's dark backdrop */
        }
        /* Dark mode: the preview card itself goes dark (see .dark .latex-preview-box
           below), so its label and formula need to flip to a warm white instead
           of the dark ink used on the light theme's white card. */
        .dark .hero-overlay .latex-preview-box span {
            color: #f7f2e7 !important;
            opacity: 0.75 !important;
        }
        .dark .hero-overlay #latexPreview {
            color: #f7f2e7 !important;
        }

        /* On mobile, #main-layout-wrapper vertically centers its content
           (justify-center) whenever the page is shorter than the viewport,
           which leaves empty space above the hero instead of letting it
           reach the very top edge. Pin it to the top there so the negative
           margin above can do its job and the scrim runs edge-to-edge. */
        @media (max-width: 767px) {
            #main-layout-wrapper { justify-content: flex-start !important; }
        }

        /* Footer band: same full-bleed technique and same terracotta/indigo
           tint as the hero, so the footer reads as a matching bookend that
           visually separates itself from the body content above it. */
        .site-footer {
            position: relative;
            width: 100vw !important;
            max-width: 100vw !important;
            margin-left: calc(50% - 50vw) !important;
            margin-right: calc(50% - 50vw) !important;
            margin-bottom: -1rem !important; /* cancels body's own p-4 bottom padding */
            box-sizing: border-box;
            backdrop-filter: blur(3px);
        }
        @media (min-width: 768px) {
            .site-footer { margin-bottom: -2.5rem !important; } /* cancels body's md:p-10 bottom padding */
        }
        .light .site-footer { background: rgba(138, 82, 46, 0.58); }
        .dark .site-footer { background: rgba(32, 27, 61, 0.72); }

        /* Light Theme — warm ivory paper, matches the terracotta hero */
        .light body { background-color: #faf6ef; color: #211c17; }
        .light .card { background-color: #ffffff; border-color: #e8ddc9; }

        /* Dark Theme — deep indigo, matches the plum hero */
        .dark body { background-color: #1c2338; color: #eef1f8; }
        .dark .card { background-color: #12172a; border-color: #2f3a56; }
        .dark input { background-color: #1a2036; color: #eef1f8; border-color: #2f3a56; }
        .dark input::placeholder { color: #8791ab; }
        .dark .latex-preview-box { background-color: #12172a !important; border-color: #2f3a56 !important; }
        
        .fade-in-content { animation: fadeIn 0.6s ease-out forwards; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .latex-preview-box mjx-container { margin: 0 !important; text-align: center; }
        .flag-icon { width: 20px; height: 20px; object-fit: cover; border-radius: 2px; display: inline-block; }

        /* Dock buttons: an elastic "pill" background behind each icon that
           pops in with a springy bounce when its layer is toggled active. */
        .dock-btn { position: relative; }
        .dock-pill {
            position: absolute;
            inset: -6px -12px;
            border-radius: 9999px;
            background: color-mix(in srgb, currentColor 16%, transparent);
            opacity: 0;
            transform: scale(0.7);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
            z-index: 0;
            pointer-events: none;
        }
        .dock-pill.is-active { opacity: 1; transform: scale(1); }
        .dock-btn:hover .dock-pill:not(.is-active) { opacity: 0.5; transform: scale(0.9); }
        .dock-icon-wrap { position: relative; z-index: 1; }
        .dock-btn > span:last-child { position: relative; z-index: 1; }

        /* Custom signal dropdown (Studio della Risposta Temporale): fade + scale
           transition instead of an abrupt show/hide, kept out of layout flow via
           opacity/pointer-events so it never causes a reflow while animating. */
        .signal-menu {
            opacity: 0;
            transform: translateY(-8px) scale(0.98);
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .signal-menu.open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        .signal-option { transition: background-color 0.15s ease; }

        /* Input/Output legend pills above the temporal response chart —
           big, fully rounded buttons matching the dock's rounded-full look.
           Active (visible) state gets a soft tinted background; clicking
           toggles the corresponding dataset on the chart. */
        .legend-pill {
            background: transparent;
            color: var(--legend-color, #6b7280);
            border: 1.5px solid transparent;
            cursor: pointer;
        }
        .legend-pill.active {
            background: color-mix(in srgb, var(--legend-color, #6b7280) 14%, transparent);
            border-color: color-mix(in srgb, var(--legend-color, #6b7280) 35%, transparent);
        }
        .legend-pill.inactive { opacity: 0.4; }

        /* Marks a chart as "active": clicking a chart enables mouse-wheel
           zoom just for that one (so scrolling the page elsewhere never
           accidentally zooms a chart) — this ring is the visual cue. */
        canvas.chart-zoom-active {
            outline: 2px solid #6366f1;
            outline-offset: 2px;
            border-radius: 8px;
        }

        /* Compact per-chart mini-dock (duplicated Reale/Asintoti/Contributi
           controls inside the magnitude and phase cards) — same active-color
           convention as the main floating dock (amber in light mode, blue
           in dark mode), just smaller. */
        .mini-dock-btn {
            color: #8a8377;
            background: transparent;
            border: 1px solid transparent;
        }
        .dark .mini-dock-btn { color: #7c87a3; }
        .mini-dock-btn.mini-dock-active {
            color: #f59e0b;
            background: rgba(245, 158, 11, 0.12);
            border-color: rgba(245, 158, 11, 0.3);
        }
        .dark .mini-dock-btn.mini-dock-active {
            color: #3b82f6;
            background: rgba(59, 130, 246, 0.12);
            border-color: rgba(59, 130, 246, 0.3);
        }

        /* ── Live LaTeX "nuvoletta" preview ─────────────────────────────────
           Small floating speech-bubble, absolutely anchored to the bottom
           edge of the input+CALCOLA row (#tf-input-wrapper is its
           positioning context). Because it sits fully below that row and
           is taken out of normal flow, it can never overlap the search
           bar itself, on any screen size. It is hidden by default and only
           toggled visible from JS while the user types (see
           updateLatexPreview / the 3s auto-hide timer in script.js) —
           much narrower than the old always-on "Anteprima G(s)" panel. */
        .latex-bubble {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            z-index: 30;
            width: max-content;
            max-width: min(88vw, 320px);
            background-color: #ffffff;
            border: 1px solid rgba(232, 221, 201, 0.7);
            border-radius: 1.35rem;
            box-shadow: 0 10px 25px -8px rgba(0,0,0,0.18), 0 4px 8px -2px rgba(0,0,0,0.08);
            padding: 0.9rem 1.2rem;
            opacity: 0;
            transform: translateY(-6px) scale(0.94);
            pointer-events: none;
            transform-origin: top left;
            transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @media (min-width: 640px) {
            .latex-bubble {
                max-width: 400px;
                padding: 1.1rem 1.5rem;
            }
        }
        .latex-bubble.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .dark .latex-bubble {
            background-color: #12172a;
            border-color: #2f3a56;
        }
        .latex-bubble.bubble-pulse { animation: bubblePulse 0.28s ease-out; }
        @keyframes bubblePulse {
            0% { transform: scale(0.985); }
            60% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }
        .latex-bubble-inner {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.2rem;
        }
        /* Small triangular pointer aimed back up at the input field it
           describes, reinforcing the "tooltip/popover" reading without any
           risk of overlapping content. */
        .latex-bubble-arrow {
            position: absolute;
            top: -7px;
            left: 1.5rem;
            width: 14px;
            height: 14px;
            background: inherit;
            border-left: 1px solid rgba(232, 221, 201, 0.7);
            border-top: 1px solid rgba(232, 221, 201, 0.7);
            transform: rotate(45deg);
            border-radius: 3px 0 0 0;
        }
        .dark .latex-bubble-arrow { border-color: #2f3a56; }
        /* Same treatment the old .latex-preview-box label/formula had inside
           the hero scrim (see .hero-overlay rules above), re-targeted at
           the new bubble's ids so contrast stays identical: the label
           stays a muted ink tone on its own white/dark card regardless of
           the cream text color the hero scrim forces on everything else. */
        .hero-overlay #lbl-latex-preview { color: #56514a !important; opacity: 0.75 !important; }
        .dark .hero-overlay #lbl-latex-preview { color: #f7f2e7 !important; opacity: 0.75 !important; }

        /* ── Action buttons (Storico Funzioni / Esempi Suggeriti) ───────────
           Deliberately smaller and narrower than the main CALCOLA button,
           with their own dedicated colors instead of reusing the blue CTA
           palette, but the exact same interaction language (hover scale,
           active scale, shadow, transition). Both the buttons and their
           dropdown menus below share one single border-radius value so the
           whole component reads as one consistent shape language. */
        :root { --action-radius: 0.85rem; }
        .action-btn {
            border-radius: var(--action-radius);
        }
        .action-btn--history {
            background-color: #7a2e35;
        }
        .dark .action-btn--history {
            background-color: #93404a;
        }
        .action-btn--examples {
            background-color: #1f5d57;
        }
        .dark .action-btn--examples {
            background-color: #2c7b73;
        }
        .action-menu {
            border-radius: var(--action-radius);
        }

        /* Thin, unobtrusive scrollbar for the Storico/Esempi dropdowns —
           tracks the same rounded shape as the menu itself and never
           spills outside of it (overflow-y + matching border-radius on the
           very same element clips the thumb/track to the rounded card). */
        .simple-menu-scroll {
            scrollbar-width: thin;
            scrollbar-color: rgba(120, 113, 108, 0.4) transparent;
        }
        .simple-menu-scroll::-webkit-scrollbar { width: 6px; }
        .simple-menu-scroll::-webkit-scrollbar-track { background: transparent; }
        .simple-menu-scroll::-webkit-scrollbar-thumb {
            background-color: rgba(120, 113, 108, 0.4);
            border-radius: 9999px;
        }
        .dark .simple-menu-scroll { scrollbar-color: rgba(148, 163, 184, 0.4) transparent; }
        .dark .simple-menu-scroll::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, 0.4); }


        /* ── CALCOLA split-button ────────────────────────────────────────────
           Two independent clickable zones (main "CALCOLA" text + the small
           arrow zone that opens "Esempi Suggeriti") inside one visually
           unified pill. Each zone gets its own hover/active feedback
           (brightness shift + slight scale-down) so it's always clear
           which of the two the user is pressing, without affecting the
           other zone. */
        .calc-btn-zone {
            transition: filter 0.15s ease, transform 0.12s ease;
        }
        .calc-btn-zone:hover { filter: brightness(1.14); }
        .calc-btn-zone:active { filter: brightness(0.82); transform: scale(0.95); }

        /* ── History chips (ultime funzioni digitate) ────────────────────────
           Small, unobtrusive pills shown right below the input/CALCOLA row,
           replacing the old "Storico Funzioni" dropdown button. */
        .history-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.4rem 0.85rem;
            border-radius: 9999px;
            font-size: 0.72rem;
            font-family: inherit;
            font-weight: 600;
            letter-spacing: 0.02em;
            background-color: rgba(255, 255, 255, 0.55);
            border: 1px solid rgba(232, 221, 201, 0.8);
            color: #56514a;
            cursor: pointer;
            transition: background-color 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
            white-space: nowrap;
        }
        .history-chip:hover {
            background-color: rgba(255, 255, 255, 0.85);
            border-color: rgba(122, 46, 53, 0.5);
        }
        .history-chip:active { transform: scale(0.95); }
        .dark .history-chip {
            background-color: rgba(18, 23, 42, 0.55);
            border-color: rgba(47, 58, 86, 0.9);
            color: #cfd6e8;
        }
        .dark .history-chip:hover {
            background-color: rgba(18, 23, 42, 0.9);
            border-color: rgba(147, 64, 74, 0.6);
        }
        .hero-overlay .history-chip { color: #56514a; }
        .dark .hero-overlay .history-chip { color: #cfd6e8; }

        .site-footer img{
            height: 80px;
            width: 80px;
            border-radius: 100%;
        }

        /* ── Esempi Suggeriti: modale a tutto schermo (sostituisce il dropdown) ── */
.examples-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(20, 16, 12, 0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.examples-modal-backdrop.hidden { display: none; }
.examples-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.dark .examples-modal-backdrop { background: rgba(5, 8, 18, 0.72); }

.examples-modal-card {
    background-color: #ffffff;
    border: 1px solid rgba(232, 221, 201, 0.8);
    border-radius: 1.5rem;
    box-shadow: 0 25px 60px -15px rgba(0,0,0,0.35);
    width: min(100%, 900px);
    aspect-ratio: 4 / 3;      /* PC */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.94);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.examples-modal-backdrop.open .examples-modal-card { transform: scale(1); }
.dark .examples-modal-card { background-color: #12172a; border-color: #2f3a56; }

@media (max-width: 639px) {
    .examples-modal-card { aspect-ratio: 9 / 16; width: 100%; }  /* Smartphone */
}

.examples-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(232, 221, 201, 0.6);
    flex-shrink: 0;
}
.dark .examples-modal-header { border-color: #2f3a56; }
.examples-modal-title { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.examples-modal-close {
    color: #8a8377; background: transparent; border: none; cursor: pointer;
    padding: 0.35rem; border-radius: 9999px; transition: background-color 0.15s ease;
}
.examples-modal-close:hover { background-color: rgba(120,113,108,0.12); }
.dark .examples-modal-close { color: #7c87a3; }

.examples-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0.75rem 1rem;
}
.examples-modal-category {
    font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: #a8825f; padding: 0.9rem 0.6rem 0.4rem;
}
.dark .examples-modal-category { color: #7ea0e0; }
.examples-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.4rem;
    padding: 0 0.4rem 0.2rem;
}
.examples-modal-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
    text-align: left; padding: 0.55rem 0.75rem; border-radius: 0.75rem;
    background: transparent; border: 1px solid transparent; cursor: pointer;
    color: inherit; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.examples-modal-item:hover { background-color: rgba(120,113,108,0.08); border-color: rgba(232,221,201,0.8); }
.dark .examples-modal-item:hover { background-color: rgba(255,255,255,0.05); border-color: #2f3a56; }
.examples-modal-item-expr { font-family: monospace; font-weight: 700; font-size: 0.9rem; }
.examples-modal-item-label { font-size: 0.75rem; color: #8a8377; }
.dark .examples-modal-item-label { color: #9aa5c0; }