/* ── Epistemic status marker ──────────────────────────────────────────
   A small, set-once confidence pill placed under a section heading. Flags
   ONLY the exceptions - open-frontier, contested, or speculative material;
   settled / consensus content carries no badge (the default). Rendered by
   the <EpistemicStatus> component, whose tooltip explains itself. */
.epistemic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -6px 0 20px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: help;
    user-select: none;
    vertical-align: middle;
}
.epistemic:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.epistemic-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background-color: currentColor;
}
/* Open frontier - blue (live research, unconfirmed) */
.epistemic-frontier {
    color: #0a6bbf;
    background-color: rgba(10, 107, 191, 0.10);
    border-color: rgba(10, 107, 191, 0.22);
}
/* Genuinely contested - amber (well-informed experts disagree) */
.epistemic-contested {
    color: #97650a;
    background-color: rgba(214, 158, 46, 0.13);
    border-color: rgba(214, 158, 46, 0.30);
}
/* Informed speculation - violet (beyond what is currently testable) */
.epistemic-speculative {
    color: #7c3aed;
    background-color: rgba(124, 58, 237, 0.10);
    border-color: rgba(124, 58, 237, 0.22);
}
[data-theme="dark"] .epistemic-frontier {
    color: #6fb7f2;
    background-color: rgba(111, 183, 242, 0.13);
    border-color: rgba(111, 183, 242, 0.26);
}
[data-theme="dark"] .epistemic-contested {
    color: #e8bd6a;
    background-color: rgba(232, 189, 106, 0.14);
    border-color: rgba(232, 189, 106, 0.30);
}
[data-theme="dark"] .epistemic-speculative {
    color: #b794f6;
    background-color: rgba(183, 148, 246, 0.15);
    border-color: rgba(183, 148, 246, 0.28);
}
/* Tooltip body (renders inside MudBlazor's dark popover) */
.epistemic-tip {
    max-width: 280px;
    text-align: left;
}
.epistemic-tip-title {
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.epistemic-tip-text {
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.5;
}

:root, [data-theme="light"] {
    --apple-bg: #ffffff;
    --apple-text: #1d1d1f;
    --apple-gray: #f5f5f7;
    --apple-gray-2: #e8e8ed;
    --apple-blue: #0071e3;
    --apple-purple: #bf5af2;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.1);
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --nav-bg: rgba(255, 255, 255, 0.8);
    --nav-border: rgba(0, 0, 0, 0.1);
    --breadcrumb-bg: rgba(255, 255, 255, 0.9);
    --card-text: #ffffff;
    --section-bg: #f5f5f7;
    --footer-glass: rgba(255, 255, 255, 0.85);
    --footer-text: #424245;
    --content-bg: #ffffff;
    --story-text: #1d1d1f;
    --story-h3: #1d1d1f;
}
[data-theme="dark"] {
    --apple-bg: #0a0a0a;
    --apple-text: #f0f0f0;
    --apple-gray: #1a1a1e;
    --apple-gray-2: #2a2a2e;
    --apple-blue: #2997ff;
    --apple-purple: #bf5af2;
    --glass-bg: rgba(0, 0, 0, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --nav-bg: rgba(20, 20, 20, 0.85);
    --nav-border: rgba(255, 255, 255, 0.06);
    --breadcrumb-bg: rgba(20, 20, 20, 0.9);
    --card-text: #ffffff;
    --section-bg: #111114;
    --footer-glass: rgba(20, 20, 20, 0.85);
    --footer-text: #a1a1a6;
    --content-bg: #0a0a0a;
    --story-text: #d1d1d6;
    --story-h3: #f0f0f0;
}

body {
    background-color: var(--apple-bg);
    color: var(--apple-text);
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Loading Spinner */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--apple-bg);
    color: var(--apple-text);
    font-family: 'Inter', sans-serif;
    flex-direction: column;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #0071e3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

*:focus-visible {
    outline: 2px solid rgba(100, 160, 255, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Glassmorphism Utility */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Apple Nav Styles */
.apple-nav {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.apple-nav-link {
    color: var(--apple-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.01em;
    opacity: 0.8;
    transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
    display: flex;
    align-items: center;
}

.apple-nav-link:hover {
    opacity: 1;
    color: var(--apple-blue);
    text-shadow: 0 0 10px rgba(0, 113, 227, 0.4);
}

.logo-link {
    opacity: 1;
    /* Logo always visible */
}

/* MudBlazor Overrides for Apple Style */
.mud-typography {
    font-family: var(--font-family) !important;
    color: var(--apple-text) !important;
}

.mud-paper {
    background-color: var(--apple-gray) !important;
    color: var(--apple-text) !important;
    border: 1px solid var(--glass-border);
    box-shadow: none !important;
    border-radius: 12px;
}

/* Scrollbar customization */
::-webkit-scrollbar {
    width: 0px;
    /* Hide scrollbar for cleaner look, typical on Mac */
    background: transparent;
}

/* Canvas Container */
#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    outline: none;
    border-radius: 12px;
}

/* =========================================
   COMPONENT STYLES (Refactored from Razor)
   ========================================= */

/* --- Hero Section (Home) --- */
.hero-section {
    height: 100vh;
    width: 100%;
    background-color: var(--apple-bg);
    margin-top: -44px;
    /* Pull up behind nav */
    padding-top: 44px;
    /* Respect notched-phone safe areas */
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.hero-title-gradient {
    font-weight: 700;
    font-size: clamp(2rem, 8vw, 4rem);
    letter-spacing: -0.02em;
    background: -webkit-linear-gradient(45deg, #0071e3, #bf5af2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
}

.hero-subtitle-text {
    font-weight: 500;
    color: var(--apple-text);
    max-width: 800px;
    display: inline-block;
    line-height: 1.2;
    margin-bottom: 40px;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
}

/* --- Where to Begin Section --- */
.where-to-begin-section {
    padding: clamp(40px, 8vw, 100px) 0;
}

.fade-in-up {
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Apple Cards (Home) ---
   Now rendered as <a class="apple-card" href="...">. The link styles
   (text-decoration / color) below keep the <a> visually identical to
   the old <div>; cursor + flex layout drive the card geometry. */
.apple-card {
    background: #111111;
    border-radius: 18px;
    padding: 0;
    height: 420px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /* When rendered as <a>, kill the default link chrome. */
    text-decoration: none;
    color: inherit;
}

.apple-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    height: 60%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.apple-card:hover .card-image {
    transform: scale(1.05);
}

.card-content {
    padding: 24px;
    background-color: #111111;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}

/* Override MudBlazor typography inside dark cards */
.card-content .mud-typography.mud-typography-h5 {
    color: #ffffff !important;
}

.card-content .mud-typography.mud-typography-body2 {
    color: #a1a1a6 !important;
}

/* --- Story Pages (Hydrogen, etc.) --- */
.content-wrapper {
    background: var(--apple-bg);
    min-height: 100vh;
    padding-top: 40px;
    position: relative;
}

.intro-box {
    padding: 60px 20px;
    /* Respect notched-phone safe areas */
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    text-align: center;
}

.story-text {
    /* Fluid: 1.05rem at narrow widths up to 1.25rem at desktop */
    font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.25rem);
    line-height: 1.8;
    color: #424245;
    margin-bottom: 2rem;
}

/* Section headings inside story content scale fluidly with the viewport
   (like the hero title) so they never overflow on narrow phones. Each
   clamp caps at MudBlazor's default desktop size, so wide screens are
   pixel-identical to before and only narrower widths shrink. */
.content-wrapper .mud-container .mud-typography-h2 {
    font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.75rem) !important;
}
.content-wrapper .mud-container .mud-typography-h3 {
    font-size: clamp(1.6rem, 1.1rem + 2.6vw, 3rem) !important;
}
.content-wrapper .mud-container .mud-typography-h4 {
    font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.125rem) !important;
}
.content-wrapper .mud-container .mud-typography-h5 {
    font-size: clamp(1.15rem, 0.95rem + 1.1vw, 1.5rem) !important;
}

.story-text a,
.inline-link {
    color: var(--apple-blue);
    text-decoration: none;
    position: relative;
    transition: all 0.2s ease;
}

.story-text a:hover,
.inline-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Canvas Containers --- */
/* Hide animations on devices without WebGL2 */
.no-webgl .canvas-container { display: none !important; }

/* Inline message for unsupported devices */
.webgl-notice {
    display: none;
    text-align: center;
    padding: 12px 20px;
    margin: 8px auto 0;
    max-width: 600px;
    background: rgba(80, 80, 100, 0.25);
    border: 1px solid rgba(120, 120, 150, 0.3);
    border-radius: 8px;
    color: #999;
    font-size: 0.82rem;
    line-height: 1.4;
}
.no-webgl .webgl-notice { display: block; }

.canvas-container {
    width: 100%;
    height: 400px;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    margin: 40px 0;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Canvas loading pulse -visible until Babylon scene renders */
.canvas-container canvas {
    position: relative;
    z-index: 1;
}

.canvas-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(40, 40, 80, 0.3) 0%, transparent 70%);
    animation: canvasPulse 2.5s ease-in-out infinite;
    transition: opacity 0.45s ease;
}

@keyframes canvasPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Skeleton loading text - shows over the dark canvas while shaders compile.
   Fades out via the .canvas-ready class flip applied by babylonManager when
   the scene resolves. The pulse ::before keeps doing its thing underneath. */
.canvas-container::after {
    content: 'Loading scene…';
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(220, 220, 240, 0.55);
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    pointer-events: none;
    transition: opacity 0.45s ease;
    opacity: 1;
}

.canvas-container.canvas-ready::after,
.canvas-container.canvas-ready::before {
    opacity: 0;
    pointer-events: none;
    animation: none; /* stop pulse so opacity:0 wins over keyframes */
}

.canvas-container.large {
    height: 500px;
}

.canvas-container.extra-large {
    height: 600px;
}

@media (max-width: 960px) {
    .canvas-container {
        height: 350px;
    }

    .canvas-container.large {
        height: 400px;
    }

    .canvas-container.extra-large {
        height: 450px;
    }
}

/* iPad-portrait gap: intermediate canvas heights between 600px and 960px */
@media (max-width: 768px) {
    .canvas-container {
        height: 320px;
    }

    .canvas-container.large {
        height: 360px;
    }

    .canvas-container.extra-large {
        height: 400px;
    }
}

@media (max-width: 600px) {
    .canvas-container {
        margin: 20px 0;
        height: 250px;
    }

    .canvas-container.large {
        margin: 20px 0;
        height: 300px;
    }

    .canvas-container.extra-large {
        margin: 20px 0;
        height: 350px;
    }
}

canvas {
    width: 100%;
    height: 100%;
    outline: none;
}

.caption {
    position: absolute;
    bottom: 4px;
    left: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
    font-family: 'Inter', sans-serif;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    border-radius: 99px;
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 2;
}

.read-time {
    position: fixed;
    /* Clear iOS notch / dynamic island via safe-area inset */
    top: max(78px, calc(env(safe-area-inset-top) + 60px));
    right: max(24px, env(safe-area-inset-right));
    z-index: 98;
    background: rgba(50, 50, 50, 0.85);
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.read-time.scrolled {
    opacity: 0;
}
.last-updated {
    position: absolute;
    top: 48px;
    left: 24px;
    font-size: 11px;
    font-weight: 400;
    color: #b0b0b5;
    letter-spacing: 0.3px;
    font-family: var(--font-family);
}
@media (max-width: 600px) {
    .last-updated {
        display: none;
    }
}

.caption-top {
    position: absolute;
    top: 15px;
    left: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.15rem;
    font-family: 'Inter', sans-serif;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    border-radius: 99px;
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 2;
}

.image-container {
    position: relative;
}

.image-caption {
    position: absolute;
    bottom: 20px;
    left: 16px;
    color: rgba(255, 255, 255, 0.85);
    /* Fluid: 0.85rem on narrow phones, 1rem at desktop widths */
    font-size: clamp(0.85rem, 0.8rem + 0.4vw, 1rem);
    font-family: 'Inter', sans-serif;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 14px;
    border-radius: 99px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* --- Mobile-friendly caption overlay (AnimCaption component) -----------
   Collapses to a small "i" icon on phones to reclaim canvas/image area; the
   full pill is one tap away.  Desktop renders it as a normal always-visible
   caption pill (compatible with the legacy .caption / .image-caption look).
   Pure CSS — uses a hidden checkbox + sibling selectors so the toggle works
   without JS and survives prerender. */
.anim-caption {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
}
.anim-caption--bottom { bottom: 10px; left: 12px; right: 12px; }
.anim-caption--top    { top: 12px;    left: 12px; right: 12px; }
.anim-caption--image.anim-caption--bottom { bottom: 16px; }

/* Hidden checkbox carries the open/closed state (visually-hidden pattern) */
.anim-caption-toggle {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Compact "i" icon — the only affordance visible when collapsed on mobile */
.anim-caption-icon {
    pointer-events: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Times New Roman', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    font-weight: 700;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, transform 0.15s ease;
}
.anim-caption-icon:hover { background: rgba(0, 0, 0, 0.78); transform: scale(1.06); }
.anim-caption-toggle:focus-visible + .anim-caption-icon {
    outline: 2px solid #4fc3f7;
    outline-offset: 2px;
}

/* Expanded body pill */
.anim-caption-body {
    display: none;
    pointer-events: auto;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 18px;
    font-size: 0.88rem;
    line-height: 1.35;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    max-width: 100%;
}
.anim-caption-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Close × inside the expanded pill */
.anim-caption-close {
    flex: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1;
    user-select: none;
    transition: background 0.15s ease;
}
.anim-caption-close:hover { background: rgba(255, 255, 255, 0.3); }

/* Toggle state: checked => body visible, icon hidden */
.anim-caption-toggle:checked + .anim-caption-icon { display: none; }
.anim-caption-toggle:checked ~ .anim-caption-body { display: inline-flex; }

/* Desktop: always-on, toggle and close hidden, classic pill geometry */
@media (min-width: 768px) {
    .anim-caption-icon { display: none; }
    .anim-caption-body {
        display: inline-flex;
        padding: 6px 16px;
        border-radius: 99px;
        font-size: 1.05rem;
    }
    .anim-caption-close { display: none; }
    .anim-caption--canvas.anim-caption--bottom { left: 20px; right: auto; bottom: 6px; }
    .anim-caption--canvas.anim-caption--top    { left: 20px; right: auto; top: 15px; }
    .anim-caption--image.anim-caption--bottom  { left: 16px; right: auto; bottom: 20px; }
}

/* --- Hydrogen Spectrum Barcode (High Contrast Neon) --- */
.spectrum-container {
    width: 100%;
    height: 80px;
    /* Neutral dark background to let colors pop */
    background: linear-gradient(to bottom, #111, #000);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.spectrum-line {
    position: absolute;
    top: 10%;
    bottom: 25%;
    /* Leave room for labels/glow reflection */
    width: 12px;
    border-radius: 4px;

    /* Intense Glow Effect */
    box-shadow:
        0 0 5px currentColor,
        0 0 15px currentColor,
        0 0 30px currentColor;
    /* Multi-layered glow */

    opacity: 1;
    z-index: 10;
}

/* Reflection/Fade at bottom */
.spectrum-line::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, currentColor, transparent);
    opacity: 0.3;
    filter: blur(4px);
}

.spectrum-label {
    position: absolute;
    bottom: -2px;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Balmer Series approximate lines - BRIGHTER COLORS */
.line-red {
    left: 80%;
    background-color: #ff5555;
    /* Brighter Red */
    color: #ff0000;
    /* Deep red glow */
}

.line-teal {
    left: 45%;
    background-color: #00ffff;
    /* Brighter Cyan */
    color: #00cccc;
}

.line-blue {
    left: 25%;
    background-color: #5599ff;
    /* Brighter Blue */
    color: #0044ff;
}

.line-violet {
    left: 10%;
    background-color: #cc66ff;
    /* Brighter Violet */
    color: #8800cc;
}

/* --- Luxury Next Link Block --- */
.luxury-next-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1b1e2e 0%, #2d324d 100%);
    border: 1px solid rgba(138, 180, 248, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.luxury-next-tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at right center, rgba(138, 180, 248, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.luxury-next-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(27, 30, 46, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(138, 180, 248, 0.4);
}

.luxury-next-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    z-index: 1;
}

.next-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.next-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.luxury-next-text-group {
    display: flex;
    flex-direction: column;
}

.luxury-next-label {
    color: #a4c8ff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
    font-weight: 500;
}

.luxury-next-title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.fiber-container {
    flex-grow: 1;
    height: 48px;
    margin: 0 40px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.fiber-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fiber-base {
    stroke: rgba(138, 180, 248, 0.08);
    stroke-width: 1px;
    fill: none;
}

.fiber-path {
    fill: none;
    stroke-linecap: round;
    animation: fiberFlow linear infinite;
}

.fiber-path-1 {
    stroke: #b392f0;
    /* Soft purple */
    stroke-width: 2px;
    stroke-dasharray: 40 60;
    animation-duration: 8s;
    /* Slower */
    opacity: 0.7;
    filter: drop-shadow(0 0 6px #b392f0);
}

.fiber-path-2 {
    stroke: #aecbfa;
    /* Lighter soft blue */
    stroke-width: 1.5px;
    stroke-dasharray: 25 75;
    animation-duration: 12s;
    /* Slower */
    opacity: 0.7;
    filter: drop-shadow(0 0 8px #aecbfa);
}

.fiber-path-3 {
    stroke: #669df6;
    /* Deeper calming blue */
    stroke-width: 2.5px;
    stroke-dasharray: 60 40;
    animation-duration: 10s;
    /* Slower */
    opacity: 0.5;
    filter: drop-shadow(0 0 10px #669df6);
}

.fiber-path-4 {
    stroke: #e8f0fe;
    /* Nearly white blue */
    stroke-width: 1px;
    stroke-dasharray: 15 85;
    animation-duration: 14s;
    /* Slower */
    opacity: 0.8;
    filter: drop-shadow(0 0 4px #e8f0fe);
}

@keyframes fiberFlow {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* --- Floating Dust Particles --- */
.dust-particle {
    position: absolute;
    background: var(--apple-bg);
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0;
    animation: floatDust linear infinite;
}

@keyframes floatDust {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 0.4;
    }

    80% {
        opacity: 0.4;
    }

    100% {
        transform: translate(30px, -15px);
        opacity: 0;
    }
}

.luxury-next-arrow {
    color: #8ab4f8;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

.luxury-next-tile:hover .luxury-next-arrow {
    transform: translateX(8px);
    color: #ffffff;
}

/* --- Shared Utility Styles --- */
.hero-title {
    font-weight: 700;
}

.hero-subtitle {
    color: #86868b;
    font-weight: 300;
}

.section-title {
    font-weight: 600;
}

.caption-note {
    color: #86868b;
    max-width: 600px;
    margin: 0 auto;
}

.inline-link {
    color: #0071e3;
    text-decoration: none;
}

.pill-button {
    border-radius: 99px;
    text-transform: none;
}

/* Search Results */
.search-result-item:hover {
    background-color: var(--section-bg);
}

/* Single highlight rule used by both the in-dialog snippet (rendered
   by SearchDialog.razor) and the on-page landing highlight (injected
   by index.html's highlightSearchTerm when navigating with ?h=...).
   One class, one look, one source of truth. */
.search-highlight {
    color: #0071e3;
    font-weight: 800;
    background-color: rgba(0, 113, 227, 0.1);
    padding: 2px 4px;
    border-radius: 4px;
}

/* Breadcrumb */
.breadcrumb-nav a:hover {
    color: #0071e3;
    text-decoration: none;
}

/* --- Dark Tiles (Shared) --- */
.dark-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    border-radius: 20px;
    background-color: #111111;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 240px;
    overflow: hidden;
}

.dark-tile:hover {
    transform: translateY(-6px);
    background-color: #1a1a1c;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.dark-tile .mud-typography {
    color: inherit !important;
}

.dark-tile-content {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
}

.tile-image-wrapper {
    margin-bottom: 0px;
    border-radius: 0;
    width: 100%;
    height: 140px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tile-title {
    font-weight: 600 !important;
    margin-bottom: 8px;
    color: #ffffff !important;
}

.tile-desc {
    color: #86868b !important;
    line-height: 1.4;
}

/* --- Static Ambient Footer --- */
.luxury-footer-static {
    position: relative;
    overflow: hidden;
    padding-bottom: 40px;
    background: transparent;
    min-height: 120px;
}

.footer-divider {
    border-color: rgba(138, 180, 248, 0.1) !important;
}

/* --- Mobile Responsive Overrides --- */
@media (max-width: 600px) {
    .intro-box {
        padding: 30px 12px;
    }

    .intro-box .mud-typography-h1 {
        font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
    }

    .intro-box .mud-typography-h4 {
        font-size: clamp(0.95rem, 3.5vw, 1.25rem) !important;
    }

    /* .story-text uses clamp() at the rule itself - no override needed here */

    .luxury-next-title {
        font-size: 18px;
    }

    .luxury-next-tile {
        padding: 16px;
    }

    .fiber-container {
        display: none;
    }

    .apple-card {
        height: 320px;
    }

    .dark-tile {
        min-height: 180px;
    }

    .read-time {
        top: max(68px, calc(env(safe-area-inset-top) + 50px));
        right: max(12px, env(safe-area-inset-right));
    }
}

/* --- Project Cards --- */
.project-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #1b1e2e 0%, #2d324d 100%);
    border: 1px solid rgba(138, 180, 248, 0.15);
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.project-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at right center, rgba(0, 113, 227, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(27, 30, 46, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    border-color: rgba(138, 180, 248, 0.3);
}

.project-card-content {
    z-index: 1;
}

.project-card .mud-typography {
    color: inherit !important;
}

@media (max-width: 960px) {
    .intro-box .mud-typography-h1 {
        font-size: clamp(1.8rem, 6vw, 3rem) !important;
    }
}

/* ── Break Room ──────────────────────────────────────────────────────── */
/* Cards always dark to match /topics, same visual language */
.breakroom-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 20px;
    background-color: #111111;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 300px;
    overflow: hidden;
    cursor: pointer;
}
.breakroom-card:hover {
    transform: translateY(-6px);
    background-color: #1a1a1c;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25), 0 0 24px rgba(191, 90, 242, 0.08);
}
.breakroom-card .mud-typography {
    color: inherit !important;
}
.breakroom-card-image {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background-color: #000000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.breakroom-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: radial-gradient(ellipse at center, #1a0f2e 0%, #000000 70%);
    display: block;
    transition: transform 0.4s ease;
}
.breakroom-card:hover .breakroom-card-image img {
    transform: scale(1.05);
}
.breakroom-card-emoji {
    font-size: 60px;
    line-height: 1;
}
.breakroom-card-content {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: #ffffff;
}
.breakroom-card-title {
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: #ffffff !important;
}
.breakroom-card-desc {
    color: #86868b !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}
.breakroom-card-hs {
    color: var(--apple-purple) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    margin-top: 10px !important;
    display: block !important;
    letter-spacing: 0.3px;
}

/* Nav joystick icon */
.apple-nav-link.breakroom-nav {
    font-size: 18px !important;
    opacity: 0.7;
    padding: 0 4px;
    transition: opacity 0.2s, transform 0.2s;
}
.apple-nav-link.breakroom-nav:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Fullscreen game overlay - theme-aware */
:root, [data-theme="light"] {
    --breakroom-overlay-bg: #f5f5f7;
    --breakroom-overlay-canvas-bg: #fafafa;
    --breakroom-header-bg: rgba(255, 255, 255, 0.92);
    --breakroom-header-border: rgba(0, 0, 0, 0.08);
    --breakroom-header-text: #1d1d1f;
    --breakroom-close-hover: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
    --breakroom-overlay-bg: #000;
    --breakroom-overlay-canvas-bg: #000;
    --breakroom-header-bg: rgba(18, 18, 22, 0.95);
    --breakroom-header-border: rgba(191, 90, 242, 0.15);
    --breakroom-header-text: #f0f0f0;
    --breakroom-close-hover: rgba(255, 255, 255, 0.1);
}

.breakroom-overlay {
    /* Break Room is always dark themed, regardless of the site's [data-theme].
       Override the breakroom theme variables locally so chrome (header, banner,
       canvas bg) matches the dark game scene that getTheme() forces. */
    --breakroom-overlay-bg: #000;
    --breakroom-overlay-canvas-bg: #000;
    --breakroom-header-bg: rgba(18, 18, 22, 0.95);
    --breakroom-header-border: rgba(191, 90, 242, 0.15);
    --breakroom-header-text: #f0f0f0;
    --breakroom-close-hover: rgba(255, 255, 255, 0.1);

    /* Pinned to viewport with explicit dimensions. position:fixed alone isn't
       reliable here: an ancestor in MainLayout (likely a MudBlazor wrapper
       with a transform/filter) creates a containing block, making "top:0;
       bottom:0" span the parent (MudMainContent + footer) instead of the
       viewport. Explicit 100vw/100vh + overflow:hidden bypasses that and
       guarantees the canvas can't exceed viewport bounds. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 10001;
    background: var(--breakroom-overlay-bg);
    display: flex;
    flex-direction: column;
}
.breakroom-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--breakroom-header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--breakroom-header-border);
    height: 44px;
    flex-shrink: 0;
}
.breakroom-overlay-title {
    color: var(--breakroom-header-text);
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}
.breakroom-score {
    color: var(--apple-purple);
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', monospace;
    letter-spacing: 0.5px;
}
.breakroom-close-btn {
    background: none;
    border: none;
    color: var(--breakroom-header-text);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.breakroom-close-btn:hover {
    background: var(--breakroom-close-hover);
}
.breakroom-overlay canvas {
    /* min-height: 0 is critical here. <canvas> has an intrinsic aspect ratio
       from its width/height attributes; without min-height: 0 the browser
       refuses to shrink it below that aspect-derived natural height, even
       inside a flex column. Result: canvas overflows the overlay vertically
       and Babylon scales game pieces for the larger area. */
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    touch-action: none;
    outline: none;
    background: var(--breakroom-overlay-canvas-bg);
}

/* Mobile-only "designed for tablets/desktops" notice. Hidden at >= 768px so
   only phone users see it. Sits between the overlay header and the canvas
   inside .breakroom-overlay. White text on a rich green background so it
   reads clearly in both light and dark themes. */
.mobile-game-banner {
    display: none;
}
@media (max-width: 767px) {
    .mobile-game-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 8px 12px 4px;
        padding: 10px 14px;
        background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
        border-radius: 10px;
        color: #ffffff;
        font-family: Inter, sans-serif;
        font-size: 12.5px;
        line-height: 1.35;
        font-weight: 500;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(21, 128, 61, 0.25);
    }
    .mobile-game-banner-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        color: #ffffff;
        font-weight: 700;
        font-style: italic;
        font-family: Georgia, serif;
        font-size: 13px;
    }
    .mobile-game-banner-text {
        flex: 1;
    }
    /* Dark theme: same green brand but slightly deeper so it doesn't glare
       against a dark page. White text reads just as well. */
    [data-theme="dark"] .mobile-game-banner {
        background: linear-gradient(135deg, #14532d 0%, #166534 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}

/* Work-in-progress banner. Shown above pages that are still being reviewed
   for accuracy and completeness. Visible at every breakpoint (not hidden on
   desktop like the mobile-game-banner). Amber palette to distinguish it from
   the green Break Room notice. Placed immediately below the breadcrumb so it
   is the first thing a reader sees on unreviewed pages. */
.wip-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px auto;
    padding: 12px 16px;
    max-width: 900px;
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
    color: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    box-shadow: 0 2px 10px rgba(180, 83, 9, 0.25);
}
.wip-banner-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    color: #ffffff;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    font-size: 14px;
}
.wip-banner-text { flex: 1; }
.wip-banner strong { font-weight: 600; }
[data-theme="dark"] .wip-banner {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
    .wip-banner {
        margin: 10px 12px;
        font-size: 13px;
        padding: 10px 14px;
    }
}