* { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }
    
    body, html {
        width: 100%;
        height: 100%;
        font-family: 'Manrope', sans-serif;
        background-color: transparent; 
        color: var(--text-main);
        overflow-x: hidden; 
        transition: color 1.2s ease;
    }

    /*
     * Body hyperlinks — CI: accent foreground with a soft underline (dual contrast like the wordmark).
     * Excludes logo + button-styled anchors so nav, hero CTAs and chip buttons keep their layouts.
     */
    a:where(:not(.logo-home-link):not(.btn-text):not(.btn-solid):not(.btn-ghost)) {
        color: var(--link-color);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
        text-decoration-color: var(--link-underline);
        transition:
            color 0.2s ease,
            text-decoration-color 0.2s ease,
            text-decoration-thickness 0.2s ease;
    }
    a:where(:not(.logo-home-link):not(.btn-text):not(.btn-solid):not(.btn-ghost)):visited {
        color: var(--link-color-visited);
    }
    a:where(:not(.logo-home-link):not(.btn-text):not(.btn-solid):not(.btn-ghost)):hover {
        color: var(--link-color-hover);
        text-decoration-thickness: 1.5px;
        text-decoration-color: var(--link-underline-hover);
    }
    a:where(:not(.logo-home-link):not(.btn-text):not(.btn-solid):not(.btn-ghost)):focus-visible {
        outline: 2px solid var(--accent-border);
        outline-offset: 3px;
        border-radius: 3px;
    }

    html {
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        scrollbar-width: auto;
    }

    body,
    .shader-lab-scroll,
    .media-dock-scroll,
    .media-stage,
    .media-playlist,
    .media-viewer-card,
    .drawer-card,
    .glass-curtain__inner,
    .submit-preview-card {
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        scrollbar-width: auto;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .shader-lab-scroll::-webkit-scrollbar,
    .media-dock-scroll::-webkit-scrollbar,
    .media-stage::-webkit-scrollbar,
    .media-playlist::-webkit-scrollbar,
    .media-viewer-card::-webkit-scrollbar,
    .drawer-card::-webkit-scrollbar,
    .glass-curtain__inner::-webkit-scrollbar,
    .submit-preview-card::-webkit-scrollbar {
        width: 15px;
        height: 15px;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track,
    .shader-lab-scroll::-webkit-scrollbar-track,
    .media-dock-scroll::-webkit-scrollbar-track,
    .media-stage::-webkit-scrollbar-track,
    .media-playlist::-webkit-scrollbar-track,
    .media-viewer-card::-webkit-scrollbar-track,
    .drawer-card::-webkit-scrollbar-track,
    .glass-curtain__inner::-webkit-scrollbar-track,
    .submit-preview-card::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
        border-radius: 999px;
    }

    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    .shader-lab-scroll::-webkit-scrollbar-thumb,
    .media-dock-scroll::-webkit-scrollbar-thumb,
    .media-stage::-webkit-scrollbar-thumb,
    .media-playlist::-webkit-scrollbar-thumb,
    .media-viewer-card::-webkit-scrollbar-thumb,
    .drawer-card::-webkit-scrollbar-thumb,
    .glass-curtain__inner::-webkit-scrollbar-thumb,
    .submit-preview-card::-webkit-scrollbar-thumb {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--scrollbar-thumb) 74%, white 6%), var(--scrollbar-thumb));
        border: 2px solid transparent;
        border-radius: 999px;
        background-clip: padding-box;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--card-border) 60%, transparent),
            0 0 0 1px color-mix(in srgb, var(--brand-blue) 10%, transparent);
    }

    html::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover,
    .shader-lab-scroll::-webkit-scrollbar-thumb:hover,
    .media-dock-scroll::-webkit-scrollbar-thumb:hover,
    .media-stage::-webkit-scrollbar-thumb:hover,
    .media-playlist::-webkit-scrollbar-thumb:hover,
    .media-viewer-card::-webkit-scrollbar-thumb:hover,
    .drawer-card::-webkit-scrollbar-thumb:hover,
    .glass-curtain__inner::-webkit-scrollbar-thumb:hover,
    .submit-preview-card::-webkit-scrollbar-thumb:hover {
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--scrollbar-thumb-hover) 78%, white 8%), var(--scrollbar-thumb-hover));
    }

    html::-webkit-scrollbar-corner,
    body::-webkit-scrollbar-corner,
    .shader-lab-scroll::-webkit-scrollbar-corner,
    .media-dock-scroll::-webkit-scrollbar-corner,
    .media-stage::-webkit-scrollbar-corner,
    .media-playlist::-webkit-scrollbar-corner,
    .media-viewer-card::-webkit-scrollbar-corner,
    .drawer-card::-webkit-scrollbar-corner,
    .glass-curtain__inner::-webkit-scrollbar-corner,
    .submit-preview-card::-webkit-scrollbar-corner {
        background: transparent;
    }

    /* --- LAYER 1: WEBGL FRACTAL CANVAS --- */
    #fractal-canvas {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        z-index: -1;
        pointer-events: none;
        image-rendering: auto;
    }

    /* --- CUSTOM AVANT-GARDE CURSOR (Difference Blended) --- */
    @media (pointer: fine) {
        body, html, button { cursor: none; }
        
        #cursor {
            position: fixed;
            top: 0; left: 0;
            width: 10px; height: 10px;
            background: var(--cursor-difference-color); /* Pure white — inverts with mix-blend-mode */
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
            transition: transform 0.2s ease;
        }
        
        #cursor-follower {
            position: fixed;
            top: 0; left: 0;
            width: 44px; height: 44px;
            border: 1px solid var(--cursor-difference-color);
            border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9998;
            mix-blend-mode: difference;
            transition: opacity 0.15s ease-out, transform 0.3s ease;
            animation: spinOrganic 6s linear infinite;
        }

        body.clicking #cursor { transform: translate(-50%, -50%) scale(0.5); }
        body.clicking #cursor-follower { transform: translate(-50%, -50%) scale(2.0); opacity: 0.2; }
    }
    @keyframes spinOrganic {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* --- FULLY OPAQUE NAVIGATION --- */
    .site-nav {
        position: fixed;
        top: 0; left: 0; width: 100%;
        padding: 0 var(--nav-pad-x);
        height: var(--nav-height);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: clamp(16px, 2vw, 28px);
        z-index: 100;
        background-color: var(--bg-color); /* 100% Solid Background */
        border-bottom: 1px solid var(--card-border);
        transition: background-color 1.2s ease, border-color 1.2s ease;
    }

    .logo-container {
        display: flex;
        align-items: center;
        gap: clamp(4px, 0.45vw, 8px);
        min-width: 0;
        max-width: min(52vw, 760px);
        flex: 0 1 auto;
        height: 100%;
    }

    .logo-cluster {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: max-content;
        max-width: 100%;
        padding-right: 0.62em;
    }

    .logo-home-link {
        display: flex;
        align-items: center;
        gap: clamp(10px, 1.4vw, 18px);
        min-width: 0;
        flex: 0 1 auto;
        text-decoration: none;
        color: inherit;
        outline-offset: 4px;
    }
    .logo-home-link:focus-visible {
        outline: 2px solid var(--accent-soft);
        border-radius: 8px;
    }

    .logo-svg {
        width: clamp(34px, 3.8vw, 56px);
        height: clamp(34px, 3.8vw, 56px);
        flex: 0 0 auto;
        animation: rotateSlow 60s linear infinite;
    }
    .logo-svg path { transition: fill 1.2s ease; }
    @keyframes rotateSlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    .logomark {
        font-size: clamp(22px, 2.6vw, 34px);
        letter-spacing: -1px;
        display: flex;
        align-items: center;
        gap: clamp(5px, 0.7vw, 10px);
        line-height: 0.92;
        white-space: nowrap;
        min-width: 0;
    }
    .logomark .seldon { font-weight: 800; transition: color 1.2s ease; }
    .logomark .trevize { font-weight: 300; color: var(--text-muted); transition: color 1.2s ease; }
    .logomark-brand {
        display: inline-flex;
        align-items: flex-end;
        gap: clamp(0.16em, 0.45vw, 0.26em);
        white-space: nowrap;
    }
    .logo-container .info-indicator {
        position: absolute;
        top: 0.5em;
        right: -0.4em;
        transform: translateX(18%);
        width: 0.56em;
        height: 0.56em;
        min-width: 14px;
        min-height: 14px;
        z-index: 1;
    }

    .nav-controls {
        display: flex;
        align-items: center;
        gap: clamp(18px, 2.8vw, 40px);
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .btn-text {
        background: none; border: none;
        font-family: 'Manrope', sans-serif;
        font-size: calc(11px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(4px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-main);
        position: relative;
        overflow: hidden;
        padding-bottom: calc(4px * var(--ui-scale, 1));
        transition: color 1.2s ease;
    }
    .btn-text::after {
        content: ''; position: absolute;
        bottom: 0; left: 0; width: 100%; height: 2px;
        background: var(--text-main);
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 1.2s ease;
    }
    .btn-text:hover::after { transform: translateX(0); }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .nav-icon-btn,
    .shader-lab > summary {
        appearance: none;
        width: var(--nav-icon-size);
        height: var(--nav-icon-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--card-border);
        border-radius: 999px;
        background: var(--card-bg);
        color: var(--text-main);
        box-shadow: var(--card-shadow);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }

    .nav-icon-btn:hover,
    .shader-lab > summary:hover,
    .shader-lab[open] > summary {
        transform: translateY(-1px);
        border-color: var(--accent-border);
        background: var(--accent-soft);
        color: var(--accent);
    }

    .nav-icon-btn svg,
    .shader-lab > summary svg {
        width: 20px;
        height: 20px;
        display: block;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .theme-toggle .theme-sun,
    .theme-toggle .theme-moon {
        transform-origin: 12px 12px;
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .theme-toggle[data-mode="dark"] .theme-sun {
        opacity: 0;
        transform: scale(0.72) rotate(-50deg);
    }

    .theme-toggle[data-mode="dark"] .theme-moon {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    .theme-toggle[data-mode="light"] .theme-sun {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    .theme-toggle[data-mode="light"] .theme-moon {
        opacity: 0;
        transform: scale(0.72) rotate(50deg);
    }

    .nav-fx {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: calc(6px * var(--ui-scale, 1));
        min-width: 132px;
    }
    .nav-fx-label-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        width: 100%;
        gap: calc(10px * var(--ui-scale, 1));
    }
    .nav-fx-label {
        font-size: calc(9px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
        transition: color 1.2s ease;
    }
    .nav-fx-hint {
        font-size: calc(7px * var(--ui-scale, 1));
        font-weight: 600;
        letter-spacing: calc(2px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
        opacity: 0.55;
        text-align: right;
        max-width: 190px;
        line-height: 1.35;
        transition: color 1.2s ease;
    }
    .nav-fx input[type="range"] {
        width: 100%;
        max-width: 156px;
        height: 3px;
        -webkit-appearance: none;
        appearance: none;
        background: var(--text-muted);
        opacity: 0.28;
        border-radius: 2px;
        cursor: pointer;
    }
    [data-theme="dark"] .nav-fx input[type="range"] { opacity: 0.35; }
    .nav-fx input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--text-main);
        border: 1px solid var(--card-border);
        box-shadow: var(--control-thumb-shadow);
    }
    .nav-fx input[type="range"]::-moz-range-thumb {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--text-main);
        border: 1px solid var(--card-border);
    }

    /* --- SHADER LAB (appearance / motion controls) --- */
    .shader-lab {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + ((var(--nav-height) - var(--nav-icon-size)) / 2));
        right: var(--nav-pad-x);
        z-index: 200;
        width: auto;
        font-family: 'Manrope', sans-serif;
        pointer-events: auto;
    }
    body.insight-drawer-open .shader-lab {
        z-index: 140;
        pointer-events: none;
    }
    .shader-lab[open] {
        overflow: visible;
    }
    .shader-lab:not([open]) {
        overflow: hidden;
        background: transparent;
    }
    .shader-lab > summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
    }
    .shader-lab[open] > summary {
        border-radius: 999px;
    }
    .shader-lab > summary::-webkit-details-marker { display: none; }
    .shader-lab-body {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 14px);
        right: 0;
        width: min(380px, calc(100vw - 32px));
        padding: 0;
        border: 1px solid var(--card-border);
        border-radius: 18px;
        background: var(--card-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: var(--card-shadow);
        overflow: hidden;
        overscroll-behavior: contain;
        max-height: min(62vh, calc(100dvh - var(--nav-height) - 44px));
    }
    .lab-meter-dock {
        flex-shrink: 0;
        padding: calc(14px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
        background: var(--card-bg);
        border-bottom: 1px solid var(--card-border);
        z-index: 1;
    }
    .lab-meter-dock .lab-group {
        margin-bottom: 0;
    }
    .shader-lab-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: calc(14px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));
        -webkit-overflow-scrolling: touch;
    }
    .media-dock {
        position: fixed;
        left: max(16px, calc(env(safe-area-inset-left, 0px) + 16px));
        bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 16px));
        z-index: 200;
        font-family: 'Manrope', sans-serif;
        pointer-events: auto;
    }
    .media-dock[open] {
        overflow: visible;
    }
    .media-dock > summary {
        list-style: none;
        cursor: pointer;
        width: var(--nav-icon-size);
        height: var(--nav-icon-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--card-border);
        border-radius: 999px;
        background: var(--card-bg);
        color: var(--text-main);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: var(--card-shadow);
        user-select: none;
        transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }
    .media-dock > summary:hover,
    .media-dock[open] > summary {
        transform: translateY(-1px);
        border-color: var(--accent-border);
        background: var(--accent-soft);
        color: var(--accent);
    }
    .media-dock > summary svg {
        width: 20px;
        height: 20px;
        display: block;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .media-dock > summary::-webkit-details-marker { display: none; }
    /* Absolutely positioned panel — same pattern as .shader-lab-body.
       Escapes ::details-content so the flex/scroll chain is self-contained. */
    .media-dock-body {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        width: min(560px, calc(100vw - 32px));
        display: flex;
        flex-direction: column;
        max-height: min(74vh, calc(100dvh - 112px));
        border-radius: 20px;
        border: 1px solid var(--card-border);
        background: var(--card-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: var(--card-shadow);
        overflow: hidden;
        overscroll-behavior: contain;
    }
    /* Fixed header row inside the panel */
    .media-dock-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        padding: calc(14px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));
        border-bottom: 1px solid var(--card-border);
    }
    .media-dock-summary-leading {
        display: inline-flex;
        align-items: center;
        gap: calc(12px * var(--ui-scale, 1));
        min-width: 0;
    }
    .media-dock-summary-label {
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 800;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
    }
    .media-dock-header svg {
        width: 20px;
        height: 20px;
        display: block;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .media-dock-header .media-dock-close.drawer-close {
        position: static;
        transform: none;
        width: calc(38px * var(--ui-scale, 1));
        height: calc(38px * var(--ui-scale, 1));
        font-size: calc(18px * var(--ui-scale, 1));
    }
    /* Scrollable grid — flex: 1 + min-height: 0 give it a real height budget */
    .media-dock-scroll {
        flex: 1 1 0%;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
        align-content: start;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }
    .media-stage {
        display: grid;
        gap: calc(16px * var(--ui-scale, 1));
        align-content: start;
        padding: calc(24px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1));
        border-right: 1px solid var(--card-border);
        min-width: 0;
        overflow: visible;
    }
    .media-stage h3 {
        font-size: calc(28px * var(--ui-scale, 1));
        font-weight: 800;
        letter-spacing: -1px;
        line-height: 1.1;
    }
    .media-stage p,
    .media-playlist-intro {
        font-size: calc(14px * var(--ui-scale, 1));
        line-height: 1.75;
        color: var(--text-muted);
    }
    .media-frame {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--card-border);
        border-radius: 22px;
        background: var(--media-frame-bg);
        aspect-ratio: 16 / 9;
    }
    [data-theme="dark"] .media-frame {
        background: var(--media-frame-bg-dark-theme);
    }
    html[data-monochrome="on"] .media-frame {
        background: var(--media-frame-bg-mono);
    }
    .media-stage[data-media-type="audio"] .media-frame {
        aspect-ratio: auto;
        min-height: 230px;
    }
    .media-stage[data-media-type="embed"] .media-frame,
    .media-stage[data-media-type="document"] .media-frame {
        aspect-ratio: auto;
        min-height: 230px;
    }
    .media-frame video,
    .media-frame audio {
        width: 100%;
        display: block;
    }
    .media-frame video {
        height: 100%;
        object-fit: cover;
        background: var(--video-letterbox-bg);
    }
    .media-audio-shell {
        display: none;
        height: 100%;
        padding: calc(24px * var(--ui-scale, 1));
        align-content: end;
        background:
            radial-gradient(circle at 20% 20%, var(--media-audio-shell-radial), transparent 40%),
            linear-gradient(180deg, var(--media-audio-shell-fade), transparent 60%);
    }
    .media-stage[data-media-type="audio"] #media-video {
        display: none;
    }
    .media-stage[data-media-type="embed"] #media-video,
    .media-stage[data-media-type="embed"] .media-audio-shell,
    .media-stage[data-media-type="document"] #media-video,
    .media-stage[data-media-type="document"] .media-audio-shell {
        display: none;
    }
    .media-stage[data-media-type="video"] .media-audio-shell {
        display: none;
    }
    .media-stage[data-media-type="audio"] .media-audio-shell {
        display: grid;
    }
    .media-embed-shell {
        display: none;
        height: 100%;
    }
    .media-stage[data-media-type="embed"] .media-embed-shell,
    .media-stage[data-media-type="document"] .media-embed-shell {
        display: block;
    }
    .media-embed-shell iframe {
        width: 100%;
        height: 100%;
        min-height: 230px;
        border: 0;
        display: block;
        background: var(--video-letterbox-bg);
    }
    .media-stage[data-media-type="document"] .media-embed-shell iframe {
        background: var(--embed-document-bg);
    }
    .media-audio-mark {
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: calc(14px * var(--ui-scale, 1));
    }
    .media-stage-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(12px * var(--ui-scale, 1));
        flex-wrap: wrap;
    }
    .media-stage-actions,
    .media-viewer-actions {
        display: flex;
        align-items: center;
        gap: calc(10px * var(--ui-scale, 1));
        flex-wrap: wrap;
    }
    .media-meta {
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2.5px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .media-open-link {
        text-decoration: none;
    }
    .media-playlist {
        display: grid;
        gap: calc(12px * var(--ui-scale, 1));
        align-content: start;
        padding: calc(24px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1));
        min-width: 0;
        overflow: visible;
    }
    .media-item {
        appearance: none;
        width: 100%;
        text-align: left;
        border: 1px solid var(--card-border);
        border-radius: 18px;
        padding: calc(14px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
        background: transparent;
        color: var(--text-main);
        cursor: pointer;
        transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    }
    .media-item:hover {
        transform: translateY(-1px);
        border-color: var(--accent-border);
    }
    .media-item.is-active {
        background: var(--accent-soft);
        border-color: var(--accent-border);
    }
    .media-item-kind,
    .media-item-meta {
        display: block;
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2.2px * var(--ui-scale, 1));
        text-transform: uppercase;
    }
    .media-item-kind {
        color: var(--accent);
    }
    .media-item-title {
        display: block;
        margin-top: calc(8px * var(--ui-scale, 1));
        font-size: calc(15px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: -0.2px;
        line-height: 1.35;
    }
    .media-item-meta {
        margin-top: calc(8px * var(--ui-scale, 1));
        color: var(--text-muted);
        line-height: 1.6;
    }
    .media-external-link {
        width: fit-content;
        font-size: calc(11px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2px * var(--ui-scale, 1));
        text-transform: uppercase;
    }
    .media-reference-bar {
        display: flex;
        gap: calc(10px * var(--ui-scale, 1));
        flex-wrap: wrap;
        align-items: center;
        margin-top: calc(26px * var(--ui-scale, 1));
    }
    .card-bottom-media {
        margin-top: calc(34px * var(--ui-scale, 1));
        padding-top: calc(8px * var(--ui-scale, 1));
    }

    @media (min-width: 901px) {
        .card-bottom-media {
            margin-top: clamp(52px, 5vw, 88px);
            padding-top: 12px;
        }
    }
    .card-bottom-media .media-reference-bar {
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
        gap: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        align-items: stretch;
    }

    .card-bottom-media .media-reference-label {
        grid-column: 1 / -1;
        margin-right: 0;
    }

    .card-bottom-media .media-reference-bar > .btn-ghost,
    .card-bottom-media .media-reference-bar > .media-ref-btn {
        justify-self: stretch;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.25;
    }
    .card-bottom-actions {
        margin-top: calc(34px * var(--ui-scale, 1));
        padding-top: calc(8px * var(--ui-scale, 1));
    }
    .card-bottom-actions .contact-links {
        margin-top: 0;
    }
    .media-reference-label {
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: calc(2px * var(--ui-scale, 1));
    }
    .media-ref-btn.is-active {
        background: var(--accent-soft);
        border-color: var(--accent-border);
        color: var(--accent);
    }
    .media-viewer-backdrop {
        position: fixed;
        inset: 0;
        background: var(--media-viewer-backdrop-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 205;
    }
    .media-viewer-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    .media-viewer {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        padding: max(94px, calc(env(safe-area-inset-top, 0px) + 82px)) clamp(14px, 2.6vw, 28px) clamp(14px, 2.6vw, 28px);
        box-sizing: border-box;
        transform: translateY(24px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        z-index: 210;
    }
    .media-viewer.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .media-viewer-card {
        display: grid;
        gap: calc(18px * var(--ui-scale, 1));
        width: min(1240px, calc(100vw - clamp(28px, 5vw, 72px)));
        max-height: calc(100dvh - max(108px, calc(env(safe-area-inset-top, 0px) + 96px)));
        padding: clamp(20px, 2.6vw, 28px) clamp(18px, 2.8vw, 28px) clamp(18px, 2.2vw, 24px);
        overflow-y: auto;
        border: 1px solid var(--card-border);
        border-radius: 28px;
        background: var(--card-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: var(--card-shadow);
    }
    .media-viewer-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: calc(18px * var(--ui-scale, 1));
    }
    .media-viewer-header h3 {
        font-size: clamp(30px, 3.5vw, 42px);
        font-weight: 800;
        letter-spacing: -1.1px;
        line-height: 1.05;
    }
    .media-viewer-body {
        font-size: calc(15px * var(--ui-scale, 1));
        line-height: 1.8;
        color: var(--text-muted);
        max-width: 58rem;
    }
    .media-viewer-frame {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--card-border);
        border-radius: 24px;
        background: var(--media-viewer-frame-bg);
        aspect-ratio: 16 / 9;
        min-height: clamp(260px, 46vh, 720px);
    }
    [data-theme="dark"] .media-viewer-frame {
        background: var(--media-viewer-frame-bg-dark-theme);
    }
    html[data-monochrome="on"] .media-viewer-frame {
        background: var(--media-viewer-frame-bg-mono);
    }
    .media-viewer-card[data-media-type="audio"] .media-viewer-frame,
    .media-viewer-card[data-media-type="embed"] .media-viewer-frame,
    .media-viewer-card[data-media-type="document"] .media-viewer-frame {
        aspect-ratio: auto;
        min-height: clamp(340px, 58vh, 860px);
    }
    .media-viewer-video,
    .media-viewer-audio {
        width: 100%;
        display: block;
    }
    .media-viewer-video {
        height: 100%;
        object-fit: cover;
        background: var(--video-letterbox-bg);
    }
    .media-viewer-audio-shell,
    .media-viewer-embed-shell {
        display: none;
        height: 100%;
    }
    .media-viewer-card[data-media-type="audio"] .media-viewer-video,
    .media-viewer-card[data-media-type="embed"] .media-viewer-video,
    .media-viewer-card[data-media-type="document"] .media-viewer-video {
        display: none;
    }
    .media-viewer-card[data-media-type="audio"] .media-viewer-audio-shell {
        display: grid;
        align-content: end;
        padding: calc(36px * var(--ui-scale, 1));
        background:
            radial-gradient(circle at 18% 18%, var(--media-viewer-audio-radial), transparent 38%),
            linear-gradient(180deg, var(--media-viewer-audio-fade), transparent 70%);
    }
    .media-viewer-card[data-media-type="embed"] .media-viewer-embed-shell,
    .media-viewer-card[data-media-type="document"] .media-viewer-embed-shell {
        display: block;
    }
    .media-viewer-audio-mark {
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: calc(18px * var(--ui-scale, 1));
    }
    .media-viewer-embed {
        width: 100%;
        height: clamp(320px, 58vh, 860px);
        border: 0;
        display: block;
        background: var(--video-letterbox-bg);
    }
    .media-viewer-card[data-media-type="document"] .media-viewer-embed {
        background: var(--embed-document-bg);
        min-height: clamp(420px, 70vh, 1100px);
    }
    .media-viewer-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(16px * var(--ui-scale, 1));
        flex-wrap: wrap;
    }
    .lab-meter-note {
        font-size: calc(9px * var(--ui-scale, 1));
        color: var(--text-muted);
        line-height: 1.45;
        margin-bottom: calc(8px * var(--ui-scale, 1));
        opacity: 0.9;
    }
    .lab-gauge-wrap {
        width: 100%;
        max-width: 240px;
        margin: 2px auto 4px;
    }
    .lab-gauge-svg {
        width: 100%;
        height: auto;
        display: block;
        color: var(--text-main);
    }
    .lab-gauge-svg .lab-gauge-needle {
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .lab-gauge-status {
        text-align: center;
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 800;
        letter-spacing: calc(2.5px * var(--ui-scale, 1));
        text-transform: uppercase;
        margin: calc(4px * var(--ui-scale, 1)) 0 calc(10px * var(--ui-scale, 1));
        min-height: 1.35em;
        transition: color 0.35s ease;
    }
    .lab-gauge-status--ok { color: var(--meter-ok); }
    .lab-gauge-status--mid { color: var(--meter-warn); }
    .lab-gauge-status--bad { color: var(--meter-bad); }
    .lab-meter-stats {
        font-size: calc(10px * var(--ui-scale, 1));
        color: var(--text-muted);
        margin-top: calc(10px * var(--ui-scale, 1));
        line-height: 1.55;
        font-variant-numeric: tabular-nums;
    }
    .lab-meter-stats strong { color: var(--text-main); font-weight: 700; }
    .lab-group {
        margin-bottom: calc(18px * var(--ui-scale, 1));
    }
    .lab-group h4 {
        font-size: calc(9px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: calc(10px * var(--ui-scale, 1));
    }
    .lab-row {
        display: grid;
        grid-template-columns: 1fr 52px;
        gap: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
        align-items: center;
        margin-bottom: calc(8px * var(--ui-scale, 1));
        font-size: calc(11px * var(--ui-scale, 1));
        color: var(--text-main);
    }
    .lab-row label { opacity: 0.9; }
    .lab-row input[type="range"] {
        grid-column: 1 / -1;
        width: 100%;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: var(--text-muted);
        opacity: 0.28;
        border-radius: 2px;
    }
    .lab-row .lab-val {
        font-variant-numeric: tabular-nums;
        font-size: calc(10px * var(--ui-scale, 1));
        text-align: right;
        color: var(--text-muted);
    }
    .lab-row.check {
        grid-template-columns: 1fr;
    }
    .lab-row.check label {
        display: flex;
        align-items: center;
        gap: calc(8px * var(--ui-scale, 1));
        cursor: pointer;
    }
    .lab-actions {
        display: flex;
        flex-wrap: wrap;
        gap: calc(8px * var(--ui-scale, 1));
        margin-top: calc(8px * var(--ui-scale, 1));
    }
    .lab-actions button, .lab-actions label.lab-file {
        font-family: 'Manrope', sans-serif;
        font-size: calc(9px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2px * var(--ui-scale, 1));
        text-transform: uppercase;
        padding: calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
        border-radius: 8px;
        border: 1px solid var(--card-border);
        background: var(--bg-color);
        color: var(--text-main);
        cursor: pointer;
    }
    .lab-actions label.lab-file { display: inline-block; }
    .lab-actions input[type="file"] { display: none; }
    .lab-actions button.is-active {
        background: var(--accent-soft);
        border-color: var(--accent-border);
        color: var(--accent);
    }
    .lab-camera-readout {
        margin-top: calc(8px * var(--ui-scale, 1));
        padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
        border: 1px solid var(--card-border);
        border-radius: 10px;
        background: var(--lab-camera-readout-bg);
        color: var(--text-main);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        font-size: calc(11px * var(--ui-scale, 1));
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-word;
    }
    html[data-monochrome="on"] .lab-camera-readout {
        background: var(--lab-camera-readout-bg-mono);
    }
    /* --- GLASSMORPHIC RATIONAL CARDS --- */
    .glass-card {
        background: var(--card-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--card-border);
        border-radius: var(--glass-card-radius);
        padding: var(--glass-card-padding);
        box-shadow: var(--card-shadow);
        transition: background-color 1.2s ease, border-color 1.2s ease, box-shadow 1.2s ease;
    }

    /* --- LAYOUT TYPOGRAPHY & SECTIONS --- */
    .content-wrapper {
        position: relative;
        z-index: 10;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 5vw;
        pointer-events: none; /* Allow clicks to reach the fractal void */
    }
    
    .content-wrapper > * {
        pointer-events: auto; /* Re-enable clicks for actual content */
    }

    section {
        padding: var(--section-pad-top) 0 var(--section-pad-bottom);
        scroll-margin-top: var(--section-scroll-margin);
    }

    .hero {
        min-height: var(--hero-min-height);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: var(--hero-padding-top);
        pointer-events: none;
    }

    .eyebrow {
        font-size: calc(11px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(6px * var(--ui-scale, 1));
        text-transform: uppercase;
        margin-bottom: calc(24px * var(--ui-scale, 1));
        display: flex;
        align-items: center;
        gap: calc(20px * var(--ui-scale, 1));
    }
    .eyebrow::before,.eyebrow::after {
        content: ''; width: calc(40px * var(--ui-scale, 1)); height: calc(2px * var(--ui-scale, 1)); background: var(--text-main);
        transition: background-color 1.2s ease;
    }

    .hero-title {
        display: flex;
        flex-direction: column;
        line-height: 0.85;
        margin-bottom: calc(60px * var(--ui-scale, 1));
    }

    .hero-title span {
        font-size: clamp(60px, 11vw, 180px); 
        letter-spacing: -4px;
    }
    .title-seldon { font-weight: 800; }
    .title-trevize { font-weight: 300; color: var(--text-muted); margin-left: 8vw; margin-top: 1vh; transition: color 1.2s ease;}

    .hero-panel {
        max-width: min(980px, calc(100% - 2vw));
        margin-left: clamp(0px, 5vw, 64px);
        pointer-events: auto;
    }

    .hero-panel p {
        font-size: clamp(18px, 2.2vw, 24px);
        font-weight: 400;
        line-height: 1.6;
    }
    .highlight { font-weight: 800; }

    /** Emphasis without brand color — matches surrounding copy (muted or main, per parent). */
    .highlight-subtle {
        font-weight: 700;
        color: inherit;
    }

    #twinx .highlight {
        color: var(--brand-blue);
        font-weight: 700;
    }

    /* Manifesto Layout (Refined, Logo Removed) */
    .manifesto-panel {
        max-width: 1280px;
        margin: 0 auto;
    }

    .manifesto-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: clamp(28px, 3.8vw, 52px);
        align-items: start;
    }

    .manifesto-grid h2 {
        font-size: clamp(36px, 4vw, 48px);
        font-weight: 800;
        letter-spacing: -1.5px;
        line-height: 1.1;
        margin-bottom: calc(32px * var(--ui-scale, 1));
    }

    .manifesto-grid p {
        font-size: calc(18px * var(--ui-scale, 1)); 
        line-height: 1.85;
        margin-bottom: calc(24px * var(--ui-scale, 1));
        color: var(--text-muted);
        transition: color 1.2s ease;
    }

    /* Protocol Architecture Layout */
    .protocol { margin-bottom: calc(120px * var(--ui-scale, 1)); }
    
    .protocol-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.26fr) minmax(220px, 0.74fr);
        gap: clamp(24px, 3.8vw, 56px);
        align-items: start;
    }

    .protocol-content h2 {
        font-size: clamp(40px, 5vw, 56px);
        font-weight: 800;
        letter-spacing: -1.5px;
        margin-bottom: calc(32px * var(--ui-scale, 1));
        line-height: 1.1;
    }
    
    .protocol-content p {
        font-size: calc(18px * var(--ui-scale, 1)); line-height: 1.85; margin-bottom: calc(24px * var(--ui-scale, 1));
        color: var(--text-muted); transition: color 1.2s ease;
    }
    .protocol-content p:first-of-type { color: var(--text-main); font-weight: 500; }

    .feature-list { list-style: none; margin-top: calc(32px * var(--ui-scale, 1)); }
    .feature-list li {
        font-size: calc(14px * var(--ui-scale, 1)); font-weight: 700; letter-spacing: calc(2px * var(--ui-scale, 1));
        text-transform: uppercase; margin-bottom: calc(16px * var(--ui-scale, 1));
        display: flex; align-items: center; gap: calc(16px * var(--ui-scale, 1));
    }
    .feature-list li::before {
        content: ''; width: calc(8px * var(--ui-scale, 1)); height: calc(8px * var(--ui-scale, 1));
        background: var(--text-main); border-radius: 50%;
        transition: background-color 1.2s ease;
    }

    .protocol-visual {
        width: 100%; display: flex; justify-content: center; align-items: center; padding: calc(20px * var(--ui-scale, 1));
    }
    .protocol-visual svg {
        width: 100%; max-width: 450px; animation: spin 60s linear infinite;
    }
    .protocol-visual path, .protocol-visual circle {
        transition: stroke 1.2s ease, fill 1.2s ease;
    }

    .nav-controls {
        display: flex;
        align-items: center;
        gap: clamp(16px, 2.2vw, 28px);
        flex-wrap: nowrap;
        justify-content: flex-end;
        min-width: 0;
        flex: 1 1 auto;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: clamp(12px, 1.6vw, 22px);
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
    }

    .nav-links .btn-text {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }
    /* Fully hide inactive underlines (avoids a 1px “dot” from transform + subpixel rounding) */
    .nav-links .btn-text::after {
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 1.2s ease, opacity 0.25s ease;
    }

    .nav-links .btn-text.btn-accent {
        color: var(--accent);
    }
    .nav-links .btn-text.btn-accent::after {
        background: var(--accent);
        opacity: 0.45;
    }
    .nav-links .btn-text.is-active:not(.btn-accent) {
        color: var(--accent);
    }
    .nav-links .btn-text.is-active:not(.btn-accent)::after {
        background: var(--accent);
        transform: translateX(0);
        opacity: 0.65;
    }
    /* TwinX uses btn-accent; scroll-spy still sets is-active, so show the same marker as other links */
    .nav-links .btn-text.btn-accent.is-active::after {
        transform: translateX(0);
        opacity: 0.65;
    }
    /* After accent opacity rules: fully hide inactive underlines (fixes stray 1px dot from transform rounding) */
    .nav-links .btn-text:not(:hover):not(.is-active)::after {
        opacity: 0;
    }

    .nav-toggle-group {
        display: flex;
        align-items: center;
        gap: calc(10px * var(--ui-scale, 1));
        flex-wrap: nowrap;
        justify-content: flex-end;
        flex-shrink: 0;
        padding-right: calc(var(--nav-icon-size) + 12px);
    }

    .nav-menu-btn {
        display: none;
    }

    .nav-menu-bars {
        width: 18px;
        height: 14px;
        position: relative;
        display: block;
    }

    .nav-menu-bars span {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        transition: transform 0.22s ease, opacity 0.22s ease, top 0.22s ease;
    }

    .nav-menu-bars span:nth-child(1) {
        top: 0;
    }

    .nav-menu-bars span:nth-child(2) {
        top: 6px;
    }

    .nav-menu-bars span:nth-child(3) {
        top: 12px;
    }

    .site-nav.nav--menu-open .nav-menu-bars span:nth-child(1) {
        top: 6px;
        transform: rotate(45deg);
    }

    .site-nav.nav--menu-open .nav-menu-bars span:nth-child(2) {
        opacity: 0;
    }

    .site-nav.nav--menu-open .nav-menu-bars span:nth-child(3) {
        top: 6px;
        transform: rotate(-45deg);
    }

    .nav-menu-backdrop {
        position: fixed;
        inset: 0;
        background: var(--nav-menu-backdrop-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        z-index: 98;
    }

    .nav-menu-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    @media (min-width: 901px) {
        .nav-menu-backdrop {
            display: none !important;
        }
    }

    .section-kicker {
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(4px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: calc(18px * var(--ui-scale, 1));
    }

    .subtle-note {
        font-size: calc(11px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
        line-height: 1.6;
    }

    .hero-actions,
    .drawer-links,
    .contact-links {
        display: flex;
        align-items: center;
        gap: calc(14px * var(--ui-scale, 1));
        flex-wrap: wrap;
        margin-top: calc(30px * var(--ui-scale, 1));
    }

    /* TwinX: even rows — 4-up on wide screens, 2×2 on medium, single column on narrow */
    .twinx-card .drawer-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        align-items: stretch;
    }

    .twinx-card .drawer-links .drawer-trigger {
        width: 100%;
        box-sizing: border-box;
    }

    @media (min-width: 900px) {
        .twinx-card .drawer-links {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (max-width: 520px) {
        .twinx-card .drawer-links {
            grid-template-columns: 1fr;
        }
    }

    .btn-solid,
    .btn-ghost,
    .drawer-trigger,
    .switcher-btn {
        appearance: none;
        border: 1px solid var(--card-border);
        border-radius: 999px;
        padding: calc(14px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1));
        font-family: 'Manrope', sans-serif;
        font-size: calc(11px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2.5px * var(--ui-scale, 1));
        text-transform: uppercase;
        text-decoration: none;
        transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }

    .btn-solid {
        background: var(--accent);
        color: var(--accent-text);
        border-color: var(--accent);
        box-shadow: var(--btn-solid-glow-shadow);
    }

    .btn-ghost,
    .drawer-trigger,
    .switcher-btn {
        background: transparent;
        color: var(--text-main);
    }

    .btn-ghost:hover,
    .btn-solid:hover,
    .drawer-trigger:hover,
    .switcher-btn:hover {
        transform: translateY(-1px);
    }

    .btn-ghost:hover,
    .drawer-trigger:hover,
    .switcher-btn:hover {
        border-color: var(--accent-border);
        color: var(--accent);
        background: var(--accent-soft);
    }

    .hero-panel p {
        max-width: 56rem;
    }

    .hero-meta {
        display: flex;
        gap: calc(18px * var(--ui-scale, 1));
        flex-wrap: wrap;
        margin-top: calc(26px * var(--ui-scale, 1));
    }

    .hero-meta span {
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .twinx-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.28fr) minmax(220px, 0.72fr);
        gap: clamp(24px, 3.8vw, 56px);
        align-items: start;
    }

    /* index1: brief wizard + aside */
    .contact-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.34fr) minmax(220px, 0.66fr);
        gap: clamp(24px, 3.8vw, 56px);
        align-items: start;
    }

    .contact-intro {
        display: block;
        margin-bottom: calc(44px * var(--ui-scale, 1));
    }

    .contact-main-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr);
        gap: clamp(24px, 3.6vw, 48px);
        align-items: start;
    }

    .contact-main-grid .contact-visual {
        align-items: flex-start;
        justify-content: center;
        min-height: 0;
        padding-top: 0;
    }

    .contact-data-column {
        min-width: 0;
        display: grid;
        gap: clamp(10px, 1.4vw, 14px);
        align-content: start;
    }

    #contact #contact-body {
        font-size: calc(17px * var(--ui-scale, 1));
        font-weight: 400;
        line-height: 1.85;
        color: var(--text-muted);
    }

    #contact #contact-points.signal-list li {
        font-size: calc(17px * var(--ui-scale, 1));
        font-weight: 400;
        line-height: 1.45;
        color: var(--text-muted);
    }
    #contact #contact-points.signal-list {
        margin-top: 0;
        gap: calc(8px * var(--ui-scale, 1));
    }

    #contact .contact-hybrid-lead {
        font-size: calc(17px * var(--ui-scale, 1));
        font-weight: 400;
        line-height: 1.85;
        color: var(--text-muted);
    }

    .trust-header {
        display: block;
        margin-bottom: calc(44px * var(--ui-scale, 1));
    }

    .trust-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.24fr) minmax(260px, 0.76fr);
        gap: clamp(24px, 3.8vw, 56px);
        align-items: start;
    }

    .trust-grid .trust-visual {
        align-items: flex-start;
        justify-content: center;
        min-height: 0;
        padding-top: 0;
    }

    .trust-grid .trust-matrix {
        min-width: 0;
    }

    /* Thesis: full-width kicker + note; body copy wraps a left-floated diagram (TwinX-style sizing) */
    .thesis-intro {
        width: 100%;
        margin-bottom: clamp(26px, 3vw, 40px);
    }

    .thesis-intro h2 {
        font-size: clamp(36px, 4vw, 48px);
        font-weight: 800;
        letter-spacing: -1.5px;
        line-height: 1.1;
        margin-bottom: 0;
    }

    .thesis-copy {
        min-width: 0;
    }

    .thesis-diagram {
        position: relative;
        isolation: isolate;
    }

    .thesis-diagram svg * {
        transition: fill 0.3s ease, stroke 0.3s ease, opacity 0.3s ease;
    }

    .thesis-diagram svg .thesis-part,
    .thesis-diagram svg .thesis-hit-area {
        cursor: pointer;
    }

    .thesis-diagram svg .thesis-hit-area {
        pointer-events: all;
    }

    .thesis-diagram svg .thesis-part[tabindex],
    .thesis-diagram svg .thesis-part[tabindex]:focus,
    .thesis-diagram svg .thesis-part[tabindex]:focus-visible {
        outline: none !important;
    }

    .thesis-diagram svg .diagram-label {
        font-family: 'Manrope', sans-serif;
        dominant-baseline: middle;
    }

    .thesis-diagram svg .thesis-chip-label {
        dominant-baseline: central;
        alignment-baseline: central;
    }

    .thesis-diagram svg .thesis-formula-text {
        font-family: "Times New Roman", Georgia, serif;
        font-size: calc(15px * var(--ui-scale, 1));
        font-style: italic;
        letter-spacing: 0.01em;
        fill: color-mix(in srgb, var(--text-main) 84%, var(--brand-blue) 16%);
    }

    .thesis-diagram svg .thesis-formula-text .formula-accent {
        fill: var(--brand-blue);
    }

    .thesis-diagram svg .thesis-part.is-hovered .diagram-chip {
        fill: var(--diagram-chip-hover-fill);
        stroke: var(--brand-blue);
        opacity: 1;
    }

    .thesis-diagram svg .thesis-part.is-hovered .diagram-label,
    .thesis-diagram svg .thesis-part.is-hovered .thesis-chip-label,
    .thesis-diagram svg .thesis-part.is-hovered .thesis-formula-text,
    .thesis-diagram svg .thesis-part.is-hovered .thesis-formula-text .formula-accent {
        fill: var(--brand-blue);
        opacity: 1;
    }

    .thesis-diagram svg .thesis-part.is-hovered .diagram-link,
    .thesis-diagram svg .thesis-part.is-hovered .diagram-divider,
    .thesis-diagram svg .thesis-part.is-hovered .diagram-flow {
        stroke: var(--brand-blue);
        opacity: 1;
    }

    .thesis-diagram svg .thesis-part.is-hovered .diagram-node {
        fill: var(--brand-blue);
        stroke: var(--brand-blue);
        opacity: 1;
        transform: scale(1.12);
    }

    .thesis-diagram svg .thesis-part.is-hovered .diagram-ring {
        stroke: var(--brand-blue);
        opacity: 1;
    }

    .thesis-diagram-hint {
        margin-top: calc(8px * var(--ui-scale, 1));
        text-align: center;
        font-size: calc(7.8px * var(--ui-scale, 1));
        font-weight: 600;
        letter-spacing: calc(1.45px * var(--ui-scale, 1));
        font-style: italic;
        text-transform: uppercase;
        color: var(--text-muted);
        opacity: 0.62;
        user-select: none;
    }

    @media (min-width: 901px) {
        .thesis-copy::after {
            content: '';
            display: block;
            clear: both;
        }
        .thesis-diagram {
            float: left;
            width: clamp(230px, 29%, 376px);
            min-height: 0;
            padding: calc(20px * var(--ui-scale, 1)) calc(34px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1)) 0;
            margin: calc(8px * var(--ui-scale, 1)) 0 calc(12px * var(--ui-scale, 1)) 0;
            margin-right: clamp(18px, 2.2vw, 34px);
            shape-outside: ellipse(46% 48% at 38% 42%);
            shape-margin: clamp(18px, 2.2vw, 26px);
            display: block;
        }
        .thesis-diagram svg {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
            overflow: visible;
        }
    }

    @media (max-width: 900px) {
        .thesis-diagram {
            float: none;
            width: 120%;
            max-width: 120%;
            margin: 0 0 clamp(14px, 3.5vw, 22px);
            padding: 0;
            shape-outside: none;
            display: block;
            margin-left: -10%;
        }
        .thesis-diagram svg {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
        }

        .thesis-diagram svg .thesis-formula-text {
            font-size: calc(13px * var(--ui-scale, 1));
        }
    }

    .thesis-copy p,
    .twinx-card p,
    .trust-header p,
    .contact-data-column p,
    .architecture-intro {
        font-size: calc(17px * var(--ui-scale, 1));
        line-height: 1.85;
        color: var(--text-muted);
    }

    .signal-list {
        list-style: none;
        margin-top: calc(26px * var(--ui-scale, 1));
        display: grid;
        gap: calc(14px * var(--ui-scale, 1));
    }

    .signal-list li {
        position: relative;
        padding-left: calc(22px * var(--ui-scale, 1));
        font-size: calc(14px * var(--ui-scale, 1));
        line-height: 1.7;
        color: var(--text-main);
    }

    .signal-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.68em;
        width: calc(8px * var(--ui-scale, 1));
        height: calc(8px * var(--ui-scale, 1));
        border-radius: 50%;
        background: var(--accent);
        opacity: 0.9;
        transform: translateY(-50%);
    }

    .signal-list.compact {
        gap: calc(12px * var(--ui-scale, 1));
        margin-top: calc(20px * var(--ui-scale, 1));
    }

    .thesis-copy .signal-list li,
    .twinx-card .signal-list li {
        font-size: calc(17px * var(--ui-scale, 1));
        line-height: 1.85;
        font-weight: 400;
        color: var(--text-muted);
    }

    .field-copy .signal-list li {
        font-size: calc(17px * var(--ui-scale, 1));
        line-height: 1.85;
        font-weight: 400;
        color: var(--text-muted);
    }

    .architecture-card,
    .fields-card,
    .trust-card,
    .contact-card,
    .twinx-card {
        max-width: 1360px;
        margin: 0 auto;
    }

    .architecture-header,
    .fields-header {
        display: block;
        margin-bottom: calc(44px * var(--ui-scale, 1));
    }

    .fields-header .architecture-intro {
        margin: 0;
        max-width: none;
    }

    .architecture-header h2,
    .fields-header h2,
    .trust-header h2,
    .contact-intro h2,
    .twinx-card h2 {
        font-size: clamp(31px, 3.75vw, 44px);
        font-weight: 800;
        letter-spacing: -1.35px;
        line-height: 1.18;
        margin-bottom: calc(26px * var(--ui-scale, 1));
    }

    .architecture-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
        gap: clamp(24px, 3.6vw, 48px);
        align-items: start;
    }

    .architecture-visual-column {
        display: flex;
        flex-direction: column;
        gap: clamp(18px, 2.6vw, 30px);
        align-items: stretch;
        min-width: 0;
    }

    .architecture-visual-column .architecture-intro {
        margin: 0;
    }

    .module-stack {
        display: grid;
        gap: calc(18px * var(--ui-scale, 1));
    }

    .module-row {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: calc(18px * var(--ui-scale, 1));
        padding: calc(18px * var(--ui-scale, 1)) 0;
        border-top: 1px solid var(--card-border);
    }

    .architecture-card .module-row {
        margin: 0 -14px;
        padding: calc(18px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        border-radius: calc(20px * var(--ui-scale, 1));
        transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
    }

    .architecture-card .module-row.is-active {
        background: var(--module-row-active-bg);
        box-shadow: var(--module-row-active-inset-shadow);
        border-top-color: transparent;
        transform: translateY(-2px);
    }

    .module-row:last-child {
        border-bottom: 1px solid var(--card-border);
    }

    .module-index {
        font-size: calc(12px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        color: var(--accent);
    }

    .module-row h3 {
        font-size: calc(22px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: -0.5px;
        margin-bottom: calc(6px * var(--ui-scale, 1));
    }

    .module-row p {
        font-size: calc(15px * var(--ui-scale, 1));
        line-height: 1.75;
        color: var(--text-muted);
    }

    .architecture-card .module-row .module-index,
    .architecture-card .module-row h3,
    .architecture-card .module-row p {
        transition: color 220ms ease;
    }

    .architecture-card .module-row.is-active .module-index,
    .architecture-card .module-row.is-active h3 {
        color: var(--brand-blue);
    }

    .architecture-card .module-row.is-active p {
        color: var(--text-main);
    }

    .architecture-visual,
    .field-map,
    .twinx-visual,
    .trust-visual,
    .contact-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        padding: calc(10px * var(--ui-scale, 1)) 0;
    }

    .twinx-card p {
        margin-bottom: calc(20px * var(--ui-scale, 1));
    }

    .architecture-visual svg,
    .field-map svg,
    .twinx-visual svg,
    .trust-visual svg,
    .contact-visual svg {
        width: 100%;
        max-width: 360px;
        height: auto;
        overflow: visible;
    }

    .architecture-visual svg { max-width: 452px; }
    .field-map svg { max-width: 452px; }
    .twinx-visual svg { max-width: 376px; }
    .trust-visual svg { max-width: 596px; }
    .contact-visual svg { max-width: 580px; }

    .field-map {
        min-height: 344px;
    }

    .contact-visual {
        min-height: 360px;
        padding: calc(14px * var(--ui-scale, 1)) 0 calc(18px * var(--ui-scale, 1));
    }

    .architecture-visual svg *,
    .field-map svg *,
    .twinx-visual svg *,
    .trust-visual svg *,
    .contact-visual svg * {
        transition: fill 0.3s ease, stroke 0.3s ease, opacity 0.3s ease;
    }

    .architecture-visual svg .diagram-label,
    .field-map svg .field-label-svg,
    .trust-visual svg .diagram-label,
    .contact-visual svg .contact-label-svg,
    .contact-visual svg .diagram-note {
        font-family: 'Manrope', sans-serif;
        font-size: calc(9px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(1.8px * var(--ui-scale, 1));
        text-transform: uppercase;
    }

    .architecture-visual svg .diagram-chip,
    .field-map svg .diagram-chip,
    .trust-visual svg .diagram-chip,
    .contact-visual svg .diagram-chip {
        fill: var(--diagram-chip-fill);
        opacity: 1;
        stroke: var(--card-border);
        stroke-width: 1;
    }

    .architecture-visual svg .diagram-label,
    .field-map svg .field-label-svg,
    .trust-visual svg .diagram-label,
    .contact-visual svg .contact-label-svg,
    .contact-visual svg .diagram-note {
        dominant-baseline: middle;
    }

    .field-map svg .field-label-svg {
        font-size: calc(12.8px * var(--ui-scale, 1));
    }

    .field-map svg .diagram-label {
        font-size: calc(20px * var(--ui-scale, 1));
        letter-spacing: calc(1.65px * var(--ui-scale, 1));
        font-weight: 500;
    }

    .architecture-visual svg .architecture-core-label {
        font-size: calc(20px * var(--ui-scale, 1));
        letter-spacing: calc(1.65px * var(--ui-scale, 1));
        font-weight: 500;
    }

    .architecture-visual svg .architecture-outer-label {
        font-size: calc(10.8px * var(--ui-scale, 1));
    }

    .contact-visual svg .contact-label-svg {
        font-size: calc(10.8px * var(--ui-scale, 1));
    }

    .contact-visual svg .contact-core-label {
        font-size: calc(20px * var(--ui-scale, 1));
        letter-spacing: calc(1.65px * var(--ui-scale, 1));
        font-weight: 500;
    }

    .contact-visual svg .contact-note-svg {
        font-size: calc(10.6px * var(--ui-scale, 1));
        letter-spacing: calc(1.45px * var(--ui-scale, 1));
    }

    .contact-visual svg .contact-label-group {
        animation: none !important;
        cursor: pointer;
        transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease;
        transform-box: fill-box;
        transform-origin: center;
        will-change: transform;
    }

    .contact-visual svg .contact-label-group .diagram-chip,
    .contact-visual svg .contact-label-group .contact-label-svg {
        transition: fill 220ms ease, stroke 220ms ease, opacity 220ms ease;
    }

    .contact-visual svg .contact-label-group.is-active {
        transform: scale(1.16);
    }

    .contact-visual svg .contact-label-group.is-active .diagram-chip {
        fill: var(--diagram-chip-accent-fill);
        stroke: var(--brand-blue);
        opacity: 1;
    }

    .contact-visual svg .contact-label-group.is-active .contact-label-svg {
        fill: var(--brand-blue);
        opacity: 1;
    }

    .architecture-visual svg .architecture-label-group {
        animation: none !important;
        cursor: pointer;
        transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease;
        transform-box: fill-box;
        transform-origin: center;
        will-change: transform;
    }

    .architecture-visual svg .architecture-label-group .diagram-chip,
    .architecture-visual svg .architecture-label-group .architecture-outer-label {
        transition: fill 220ms ease, stroke 220ms ease, opacity 220ms ease;
    }

    .architecture-visual svg .architecture-label-group.is-active {
        transform: scale(1.18);
    }

    .architecture-visual svg .architecture-label-group.is-active .diagram-chip {
        fill: var(--diagram-chip-accent-fill);
        stroke: var(--brand-blue);
        opacity: 1;
    }

    .architecture-visual svg .architecture-label-group.is-active .architecture-outer-label {
        fill: var(--brand-blue);
        opacity: 1;
    }

    .architecture-visual svg .architecture-link.is-active {
        stroke: var(--brand-blue);
        opacity: 1;
    }

    .architecture-visual svg .architecture-node.is-active {
        fill: var(--brand-blue);
        opacity: 1;
        transform: scale(1.14);
    }

    .trust-visual svg .trust-core-label {
        font-size: calc(16px * var(--ui-scale, 1));
        font-weight: 500;
        letter-spacing: calc(1.05px * var(--ui-scale, 1));
    }

    .trust-visual svg .trust-outer-label {
        font-size: calc(10.5px * var(--ui-scale, 1));
    }

    .trust-visual svg .trust-label-group {
        animation: none;
        cursor: pointer;
        transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease;
        transform-box: fill-box;
        transform-origin: center;
    }

    .trust-visual svg .trust-label-group .diagram-chip,
    .trust-visual svg .trust-label-group .trust-outer-label {
        transition: fill 220ms ease, stroke 220ms ease, opacity 220ms ease;
    }

    .trust-visual svg .trust-label-group.is-active {
        transform: scale(1.12);
    }

    .trust-visual svg .trust-label-group.is-active .diagram-chip {
        fill: var(--diagram-chip-accent-fill);
        stroke: var(--brand-blue);
        opacity: 1;
    }

    .trust-visual svg .trust-label-group.is-active .trust-outer-label {
        fill: var(--brand-blue);
        opacity: 1;
    }

    .architecture-visual svg .diagram-link,
    .field-map svg .field-link,
    .twinx-visual svg .diagram-link,
    .trust-visual svg .diagram-link,
    .contact-visual svg .diagram-link {
        animation: diagramBreath 7.4s ease-in-out infinite;
    }

    .architecture-visual svg .diagram-path-flow,
    .field-map svg .diagram-path-flow,
    .twinx-visual svg .diagram-path-flow,
    .trust-visual svg .diagram-path-flow,
    .contact-visual svg .diagram-path-flow {
        animation: diagramDash 16s linear infinite;
    }

    .architecture-visual svg .diagram-node,
    .field-map svg .field-node,
    .twinx-visual svg .diagram-node,
    .trust-visual svg .diagram-node,
    .contact-visual svg .contact-node {
        transform-box: fill-box;
        transform-origin: center;
        animation: diagramPulse 5.8s ease-in-out infinite;
    }

    .architecture-visual svg .diagram-node-delay-2,
    .field-map svg .diagram-node-delay-2,
    .twinx-visual svg .diagram-node-delay-2,
    .trust-visual svg .diagram-node-delay-2,
    .contact-visual svg .diagram-node-delay-2 {
        animation-delay: 0.85s;
    }

    .architecture-visual svg .diagram-node-delay-3,
    .field-map svg .diagram-node-delay-3,
    .twinx-visual svg .diagram-node-delay-3,
    .trust-visual svg .diagram-node-delay-3,
    .contact-visual svg .diagram-node-delay-3 {
        animation-delay: 1.65s;
    }

    .architecture-visual svg .diagram-node-delay-4,
    .field-map svg .diagram-node-delay-4,
    .trust-visual svg .diagram-node-delay-4,
    .contact-visual svg .diagram-node-delay-4 {
        animation-delay: 2.35s;
    }

    .architecture-visual svg .diagram-node-delay-5,
    .field-map svg .diagram-node-delay-5 {
        animation-delay: 3.1s;
    }

    .architecture-visual svg .diagram-core,
    .field-map svg .diagram-core,
    .twinx-visual svg .diagram-core,
    .trust-visual svg .diagram-core,
    .contact-visual svg .diagram-core {
        transform-box: fill-box;
        transform-origin: center;
        animation: diagramCorePulse 7.8s ease-in-out infinite;
    }

    .architecture-visual svg .diagram-outer-rotor,
    .field-map svg .diagram-outer-rotor,
    .twinx-visual svg .diagram-outer-rotor,
    .contact-visual svg .diagram-outer-rotor {
        transform-box: fill-box;
        transform-origin: center;
        animation: diagramSpinSlow 40s linear infinite;
    }

    .architecture-visual svg .diagram-inner-rotor,
    .twinx-visual svg .diagram-inner-rotor,
    .contact-visual svg .diagram-inner-rotor {
        transform-box: fill-box;
        transform-origin: center;
        animation: diagramSpinReverse 32s linear infinite;
    }

    .architecture-visual svg .diagram-label-group,
    .field-map svg .diagram-label-group,
    .trust-visual svg .diagram-label-group,
    .contact-visual svg .diagram-label-group {
        transform-box: fill-box;
        transform-origin: center;
        animation: diagramFloat 10s ease-in-out infinite;
    }

    .field-map svg .diagram-label-group {
        animation: none;
        opacity: 1;
        transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 340ms ease;
    }

    .field-map svg .diagram-label-group.is-active {
        opacity: 1;
    }

    .field-map svg .diagram-label-group .diagram-chip,
    .field-map svg .diagram-label-group .field-label-svg {
        transition: fill 300ms ease, stroke 300ms ease, opacity 300ms ease;
    }

    .field-map svg .diagram-core {
        opacity: 1;
        filter: var(--field-map-diagram-core-shadow);
    }

    .field-map svg .field-link.is-active {
        stroke: var(--brand-blue);
        opacity: 1;
    }

    .field-map svg .field-node.is-active {
        fill: var(--brand-blue);
        opacity: 1;
        transform: scale(1.12);
    }

    .field-map svg [data-field-group],
    .field-map svg [data-field-node],
    .contact-visual svg [data-contact-group],
    .contact-visual svg [data-contact-node] {
        cursor: pointer;
    }

    .architecture-visual svg [tabindex],
    .field-map svg [tabindex],
    .trust-visual svg [tabindex],
    .contact-visual svg [tabindex] {
        outline: none !important;
    }

    .architecture-visual svg [tabindex]:focus,
    .architecture-visual svg [tabindex]:focus-visible,
    .field-map svg [tabindex]:focus,
    .field-map svg [tabindex]:focus-visible,
    .trust-visual svg [tabindex]:focus,
    .trust-visual svg [tabindex]:focus-visible,
    .contact-visual svg [tabindex]:focus,
    .contact-visual svg [tabindex]:focus-visible {
        outline: none !important;
    }

    .architecture-visual svg .diagram-label-group.delay-2,
    .field-map svg .diagram-label-group.delay-2,
    .trust-visual svg .diagram-label-group.delay-2,
    .contact-visual svg .diagram-label-group.delay-2 {
        animation-delay: 1.2s;
    }

    .architecture-visual svg .diagram-label-group.delay-3,
    .field-map svg .diagram-label-group.delay-3,
    .trust-visual svg .diagram-label-group.delay-3,
    .contact-visual svg .diagram-label-group.delay-3 {
        animation-delay: 2.2s;
    }

    .architecture-visual svg .diagram-label-group.delay-4,
    .field-map svg .diagram-label-group.delay-4,
    .trust-visual svg .diagram-label-group.delay-4,
    .contact-visual svg .diagram-label-group.delay-4 {
        animation-delay: 3.1s;
    }

    .architecture-visual svg .diagram-label-group.delay-5,
    .field-map svg .diagram-label-group.delay-5 {
        animation-delay: 4s;
    }

    @keyframes diagramSpinSlow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes diagramSpinReverse {
        from { transform: rotate(360deg); }
        to { transform: rotate(0deg); }
    }

    @keyframes diagramPulse {
        0%, 100% { transform: scale(1); opacity: 0.88; }
        50% { transform: scale(1.08); opacity: 1; }
    }

    @keyframes diagramCorePulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.025); }
    }

    @keyframes diagramFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
    }

    @keyframes diagramDash {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: -64; }
    }

    @keyframes diagramBreath {
        0%, 100% { opacity: 0.72; }
        50% { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .architecture-visual svg .diagram-link,
        .field-map svg .field-link,
        .twinx-visual svg .diagram-link,
        .trust-visual svg .diagram-link,
        .contact-visual svg .diagram-link,
        .architecture-visual svg .diagram-path-flow,
        .field-map svg .diagram-path-flow,
        .twinx-visual svg .diagram-path-flow,
        .trust-visual svg .diagram-path-flow,
        .contact-visual svg .diagram-path-flow,
        .architecture-visual svg .diagram-node,
        .field-map svg .field-node,
        .twinx-visual svg .diagram-node,
        .trust-visual svg .diagram-node,
        .contact-visual svg .contact-node,
        .architecture-visual svg .diagram-core,
        .field-map svg .diagram-core,
        .twinx-visual svg .diagram-core,
        .trust-visual svg .diagram-core,
        .contact-visual svg .diagram-core,
        .architecture-visual svg .diagram-outer-rotor,
        .field-map svg .diagram-outer-rotor,
        .twinx-visual svg .diagram-outer-rotor,
        .contact-visual svg .diagram-outer-rotor,
        .architecture-visual svg .diagram-inner-rotor,
        .twinx-visual svg .diagram-inner-rotor,
        .contact-visual svg .diagram-inner-rotor,
        .architecture-visual svg .diagram-label-group,
        .field-map svg .diagram-label-group,
        .trust-visual svg .diagram-label-group,
        .contact-visual svg .diagram-label-group {
            animation: none !important;
        }
    }

    .trust-visual {
        min-height: 318px;
        padding: calc(10px * var(--ui-scale, 1)) 0 calc(14px * var(--ui-scale, 1));
    }

    .architecture-visual {
        min-height: 336px;
    }

    .field-detail {
        display: grid;
        grid-template-columns: minmax(0, 1.28fr) minmax(220px, 0.72fr);
        gap: clamp(24px, 3.6vw, 48px);
        align-items: start;
    }

    .field-detail .field-copy {
        min-width: 0;
    }

    .field-detail .field-map {
        align-items: flex-start;
        justify-content: center;
        min-height: 0;
        padding-top: 0;
    }

    .field-switcher {
        display: flex;
        gap: calc(10px * var(--ui-scale, 1));
        flex-wrap: wrap;
        margin-bottom: clamp(40px, 5vw, 56px);
    }

    .switcher-btn.is-active {
        background: var(--accent-soft);
        border-color: var(--accent-border);
        color: var(--accent);
    }

    .field-switcher .switcher-btn.is-active {
        background: var(--field-switcher-active-bg);
        border-color: var(--field-switcher-active-border);
        color: var(--brand-blue);
        box-shadow: var(--field-switcher-active-inset);
    }

    .contact-switcher .switcher-btn.is-active {
        background: var(--field-switcher-active-bg);
        border-color: var(--brand-blue);
        color: var(--brand-blue);
        box-shadow: var(--field-switcher-active-inset);
    }

    .field-copy h3,
    .contact-data-column h3 {
        font-size: calc(28px * var(--ui-scale, 1));
        font-weight: 800;
        letter-spacing: -1px;
        line-height: 1.15;
        margin-bottom: calc(16px * var(--ui-scale, 1));
    }

    .field-label {
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: calc(12px * var(--ui-scale, 1));
    }

    .field-copy p {
        font-size: calc(17px * var(--ui-scale, 1));
        line-height: 1.85;
        color: var(--text-muted);
    }

    .trust-matrix {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(18px * var(--ui-scale, 1));
    }

    .trust-item {
        border-top: 1px solid var(--card-border);
        padding-top: calc(18px * var(--ui-scale, 1));
    }

    .trust-matrix .trust-item {
        border-radius: 20px;
        padding: calc(18px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
        cursor: pointer;
    }

    .trust-matrix .trust-item.is-active {
        background: var(--trust-item-active-bg);
        box-shadow: var(--trust-item-active-inset);
        border-top-color: transparent;
        transform: translateY(-2px);
    }

    .trust-matrix .trust-item h3,
    .trust-matrix .trust-item p {
        transition: color 220ms ease;
    }

    .trust-matrix .trust-item.is-active h3 {
        color: var(--brand-blue);
    }

    .trust-matrix .trust-item.is-active p {
        color: var(--text-main);
    }

    .trust-item h3 {
        font-size: calc(18px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: -0.4px;
        margin-bottom: calc(8px * var(--ui-scale, 1));
    }

    .trust-item p {
        font-size: calc(14px * var(--ui-scale, 1));
        line-height: 1.75;
        color: var(--text-muted);
    }

    @media (min-width: 901px) {
        .twinx-grid {
            display: block;
        }

        .twinx-card::after {
            content: '';
            display: block;
            clear: both;
        }

        .twinx-visual {
            float: right;
            width: clamp(230px, 29%, 340px);
            min-height: 0;
            padding: calc(10px * var(--ui-scale, 1)) 0 calc(20px * var(--ui-scale, 1)) calc(34px * var(--ui-scale, 1));
            margin: calc(4px * var(--ui-scale, 1)) 0 calc(14px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1));
            shape-outside: circle(48% at 52% 44%);
            shape-margin: 26px;
            align-items: flex-start;
        }

        .twinx-visual svg {
            max-width: 100%;
        }

        .twinx-card .hero-actions,
        .twinx-card .drawer-links,
        .twinx-card .media-reference-bar {
            clear: both;
        }
    }

    .contact-switcher {
        display: flex;
        gap: calc(10px * var(--ui-scale, 1));
        flex-wrap: wrap;
        margin-top: clamp(32px, 4vw, 48px);
        margin-bottom: clamp(22px, 3vw, 32px);
        padding-bottom: clamp(18px, 2.4vw, 26px);
        border-bottom: 1px solid var(--brand-blue);
    }

    .contact-data-column .contact-info-block {
        margin-top: clamp(6px, 1vw, 12px);
        padding-top: clamp(20px, 2.2vw, 26px);
    }

    .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: calc(6px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
        margin-top: calc(12px * var(--ui-scale, 1));
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 500;
        letter-spacing: calc(2px * var(--ui-scale, 1));
        text-transform: none;
        line-height: 1.8;
    }

    .footer-nav-sep {
        opacity: 0.75;
        user-select: none;
    }

    .insight-backdrop {
        position: fixed;
        inset: 0;
        background: var(--insight-backdrop-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 150;
    }

    .insight-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .insight-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: min(460px, 100vw);
        height: 100vh;
        padding: calc(120px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1));
        transform: translateX(104%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 160;
        pointer-events: none;
    }

    .insight-drawer.is-open {
        transform: translateX(0);
        pointer-events: auto;
    }

    .drawer-card {
        position: relative;
        height: 100%;
        overflow-y: auto;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 28px 0 0 28px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: var(--card-shadow);
        padding: calc(34px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1)) calc(32px * var(--ui-scale, 1));
    }

    .drawer-close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid var(--card-border);
        background: transparent;
        color: var(--text-main);
        font-size: calc(16px * var(--ui-scale, 1));
        cursor: pointer;
    }

    .drawer-card h3 {
        font-size: calc(32px * var(--ui-scale, 1));
        font-weight: 800;
        letter-spacing: -1px;
        line-height: 1.22;
        margin-bottom: calc(18px * var(--ui-scale, 1));
        max-width: none;
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding-right: 72px;
    }

    .drawer-card p,
    .drawer-card li {
        font-size: calc(15px * var(--ui-scale, 1));
        line-height: 1.8;
        color: var(--text-muted);
    }

    .drawer-card ul {
        list-style: none;
        margin-top: calc(20px * var(--ui-scale, 1));
        display: grid;
        gap: calc(12px * var(--ui-scale, 1));
    }

    .drawer-card ul li {
        position: relative;
        padding-left: calc(18px * var(--ui-scale, 1));
    }

    .drawer-card ul li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.72em;
        width: calc(6px * var(--ui-scale, 1));
        height: calc(6px * var(--ui-scale, 1));
        border-radius: 50%;
        background: var(--accent);
        transform: translateY(-50%);
    }

    /* Contact inquiry guides: space before “Intention” and before closing note */
    .drawer-card p.contact-brief-intention {
        margin-top: clamp(1.35rem, 3.4vw, 2.1rem);
    }

    .drawer-card p.contact-brief-close {
        margin-top: clamp(1.35rem, 3.4vw, 2.1rem);
    }

    /* Field drawers: breathing room before the external-sources line */
    .drawer-card p.field-drawer-sources {
        margin-top: clamp(1.35rem, 3.2vw, 2rem);
        padding-top: clamp(0.85rem, 2vw, 1.25rem);
        border-top: 1px solid color-mix(in srgb, var(--card-border) 88%, transparent);
    }

    footer {
        padding: calc(40px * var(--ui-scale, 1)) 0 calc(80px * var(--ui-scale, 1));
        text-align: center;
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
        transition: color 1.2s ease;
    }


    @media (max-width: 1360px) and (min-width: 901px) {
        :root {
            --nav-height: 86px;
            --nav-pad-x: clamp(16px, 3vw, 28px);
            --nav-icon-size: 44px;
        }

        .site-nav {
            gap: calc(14px * var(--ui-scale, 1));
        }

        .logo-container {
            max-width: min(44vw, 560px);
        }

        .logo-svg {
            width: clamp(32px, 3.2vw, 48px);
            height: clamp(32px, 3.2vw, 48px);
        }

        .logomark {
            font-size: clamp(18px, 2.1vw, 28px);
            gap: calc(6px * var(--ui-scale, 1));
        }

        .nav-controls {
            gap: clamp(10px, 1.8vw, 20px);
        }

        .nav-links {
            flex-wrap: nowrap;
            gap: clamp(8px, 1vw, 14px);
        }

        .btn-text {
            font-size: calc(10px * var(--ui-scale, 1));
            letter-spacing: calc(3px * var(--ui-scale, 1));
            padding-bottom: 3px;
        }

        .nav-toggle-group {
            gap: calc(8px * var(--ui-scale, 1));
            padding-right: calc(var(--nav-icon-size) + 8px);
        }
    }

    @media (max-width: 1180px) and (min-width: 901px) {
        .logo-container {
            max-width: min(40vw, 480px);
        }

        .logomark {
            font-size: clamp(17px, 1.85vw, 24px);
        }

        .nav-controls {
            gap: calc(12px * var(--ui-scale, 1));
        }

        .nav-links {
            gap: calc(8px * var(--ui-scale, 1));
        }

        .btn-text {
            font-size: calc(9.5px * var(--ui-scale, 1));
            letter-spacing: calc(2.4px * var(--ui-scale, 1));
        }
    }

    /* Responsive */
    @media (max-width: 900px) {
        :root {
            --nav-icon-size: 32px;
        }
        .site-nav { height: auto; min-height: 0; padding: calc(12px * var(--ui-scale, 1)) 4vw calc(14px * var(--ui-scale, 1)); flex-wrap: nowrap; align-items: center; gap: calc(10px * var(--ui-scale, 1)); }
        .logo-container { max-width: min(48vw, 240px); min-width: 0; flex-shrink: 1; }
        .logo-cluster {
            padding-right: 0.46em;
        }
        .logo-container .info-indicator {
            top: 0.1em;
            right: -0.9em;
            transform: none;
            width: 0.7em;
            height: 0.7em;
            min-width: 16px;
            min-height: 16px;
        }
        .logo-svg { width: clamp(30px, 5.4vw, 42px); height: clamp(30px, 5.4vw, 42px); }
        .logomark { font-size: clamp(18px, 4.6vw, 24px); }
        .nav-controls {
            width: auto;
            flex: 0 0 auto;
            min-width: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: calc(8px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
            justify-content: flex-end;
        }
        .nav-menu-btn {
            display: inline-flex;
        }
        .nav-links {
            display: none;
        }
        .site-nav.nav--menu-open .nav-links {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 0;
            min-width: 0;
            overflow-x: visible;
            overflow-y: auto;
            white-space: normal;
            padding-bottom: 0;
            position: fixed;
            left: 0;
            right: 0;
            top: var(--nav-panel-top, 80px);
            bottom: 0;
            z-index: 101;
            padding: calc(12px * var(--ui-scale, 1)) 5vw max(calc(20px * var(--ui-scale, 1)), env(safe-area-inset-bottom));
            background: var(--bg-color);
            border-top: 1px solid var(--card-border);
            box-shadow: var(--nav-mobile-panel-shadow);
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .site-nav.nav--menu-open .nav-links .btn-text {
            flex: 0 0 auto;
            padding: calc(16px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1));
            border-bottom: 1px solid var(--card-border);
        }
        .site-nav.nav--menu-open .nav-links .btn-text:last-child {
            border-bottom: none;
        }
        .nav-toggle-group {
            flex-shrink: 0;
            flex-wrap: nowrap;
            justify-content: flex-end;
            gap: calc(5px * var(--ui-scale, 1));
            padding-right: 0;
            margin-left: 0;
        }
        .site-nav .nav-icon-btn svg {
            width: 17px;
            height: 17px;
        }
        .nav-menu-bars {
            width: 15px;
            height: 11px;
        }
        .nav-menu-bars span:nth-child(2) {
            top: 4px;
        }
        .nav-menu-bars span:nth-child(3) {
            top: 8px;
        }
        .site-nav.nav--menu-open .nav-menu-bars span:nth-child(1) {
            top: 4px;
        }
        .site-nav.nav--menu-open .nav-menu-bars span:nth-child(3) {
            top: 4px;
        }
        .hero-title span { letter-spacing: -2px; }
        .title-trevize { margin-left: 0; }
        .hero-panel { margin-left: 0; padding: var(--glass-card-padding); }
        .manifesto-grid, .protocol-grid, .twinx-grid, .trust-grid, .contact-grid, .contact-main-grid, .architecture-header, .architecture-grid, .field-detail { grid-template-columns: 1fr; gap: calc(40px * var(--ui-scale, 1)); }
        .trust-matrix { grid-template-columns: 1fr; }
        .field-switcher, .contact-switcher, .hero-actions, .drawer-links, .contact-links { gap: calc(10px * var(--ui-scale, 1)); }
        .architecture-visual, .field-map, .twinx-visual, .trust-visual, .contact-visual { min-height: 300px; padding: 0; }
        .twinx-card { display: flex; flex-direction: column; }
        .twinx-card .section-kicker { order: 1; }
        .twinx-card h2 { order: 2; }
        .twinx-card .twinx-visual {
            order: 3;
            float: none;
            width: min(100%, 280px);
            min-height: 0;
            padding: 0;
            margin: calc(8px * var(--ui-scale, 1)) auto calc(20px * var(--ui-scale, 1));
            shape-outside: none;
            shape-margin: 0;
            align-self: center;
        }
        .twinx-card p,
        .twinx-card .signal-list,
        .twinx-card .hero-actions,
        .twinx-card .drawer-links,
        .twinx-card .media-reference-bar { order: 4; }
        .module-row { grid-template-columns: 36px 1fr; gap: calc(14px * var(--ui-scale, 1)); }
        .protocol-visual { padding: 0; }
        .contact-main-grid .contact-visual { order: -1; }
        .insight-drawer { width: 100vw; padding: calc(90px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)); }
        .drawer-card { border-radius: 24px; }
        /* Sit shader left of theme + hamburger (right end); does not cover mode switch */
        .shader-lab {
            top: calc(env(safe-area-inset-top, 0px) + 10px);
            left: auto;
            right: calc(var(--nav-pad-x) + 2 * var(--nav-icon-size) + 10px);
        }
        .shader-lab-body {
            position: fixed;
            left: 0;
            right: 0;
            top: var(--nav-panel-top, 80px);
            bottom: 0;
            width: 100%;
            max-width: none;
            max-height: none;
            border-radius: 0;
            border-left: none;
            border-right: none;
            border-top: 1px solid var(--card-border);
        }
        .media-dock {
            bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
            left: 14px;
        }
        .media-dock-body {
            width: min(calc(100vw - 28px), 560px);
        }
        .media-dock-scroll {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;
        }
        .media-stage {
            border-right: 0;
            border-bottom: 1px solid var(--card-border);
        }
        .media-stage-footer { align-items: flex-start; }
        .media-reference-bar { align-items: flex-start; }
        .card-bottom-media .media-reference-bar {
            align-items: stretch;
        }
        .media-viewer {
            padding: max(74px, calc(env(safe-area-inset-top, 0px) + 62px)) 6px 6px;
        }
        .media-viewer-card {
            width: calc(100vw - 12px);
            max-height: calc(100dvh - 80px);
            padding: calc(16px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
            border-radius: 20px;
        }
        .media-viewer-header {
            flex-direction: column;
        }
        .media-viewer-frame {
            min-height: clamp(220px, 42vh, 520px);
            border-radius: 18px;
        }
        .media-viewer-card[data-media-type="audio"] .media-viewer-frame,
        .media-viewer-card[data-media-type="embed"] .media-viewer-frame,
        .media-viewer-card[data-media-type="document"] .media-viewer-frame {
            min-height: clamp(260px, 50vh, 640px);
        }
        .media-viewer-card[data-media-type="audio"] .media-viewer-audio-shell {
            padding: calc(22px * var(--ui-scale, 1));
        }
        .media-viewer-embed {
            height: clamp(260px, 50vh, 640px);
        }
        .glass-curtain {
            padding: max(74px, calc(env(safe-area-inset-top, 0px) + 62px)) 6px 6px;
        }
        .glass-curtain__inner {
            width: calc(100vw - 12px);
            max-height: calc(100dvh - 80px);
            padding: calc(18px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
            border-radius: 20px;
        }
        .glass-curtain__header {
            flex-direction: column;
        }
    }

    @media (max-width: 520px) {
        .glass-curtain {
            padding: max(70px, calc(env(safe-area-inset-top, 0px) + 58px)) 4px 4px;
        }

        .glass-curtain__inner {
            width: calc(100vw - 8px);
            max-height: calc(100dvh - 74px);
            padding: calc(16px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
            border-radius: 18px;
        }

        .logo-cluster {
            padding-right: 0.42em;
        }

        .logo-container .info-indicator {
            top: -0.1em;
            right: -1.7em;
            width: 0.6em;
            height: 0.6em;
            min-width: 14px;
            min-height: 14px;
        }
    }

    /* Manifesto curtain — foundational principles */
    body.principles-curtain-open,
    body.submit-preview-open,
    body.imprint-curtain-open,
    body.privacy-curtain-open,
    body.cookie-curtain-open {
        overflow: hidden;
    }

    .info-indicator {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.35em;
        height: 1.35em;
        min-width: 14px;
        min-height: 14px;
        padding: 0;
        margin: 0;
        border: 1px solid var(--info-indicator-border);
        border-radius: 50%;
        background: var(--info-indicator-bg);
        color: var(--text-muted);
        cursor: pointer;
        line-height: 0;
        transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .info-indicator__glyph {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
    }
    .info-indicator:hover,
    .info-indicator:focus-visible {
        color: var(--brand-blue);
        background: var(--info-indicator-hover-bg);
        border-color: var(--info-indicator-hover-border);
        outline: none;
    }
    .info-indicator:focus-visible {
        box-shadow: 0 0 0 2px var(--accent-soft);
        border-radius: 50%;
    }

    /* Same curtain treatment as .media-viewer-backdrop + .media-viewer-card (see media viewer) */
    .glass-curtain {
        position: fixed;
        inset: 0;
        z-index: 300;
        display: grid;
        place-items: center;
        padding: max(116px, calc(env(safe-area-inset-top, 0px) + 104px)) 36px 36px;
        box-sizing: border-box;
        background: transparent;
        transform: translateY(24px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    }
    .glass-curtain::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--media-viewer-backdrop-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 0;
    }
    .glass-curtain.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .glass-curtain__inner {
        position: relative;
        z-index: 2;
        width: min(980px, calc(100vw - 72px));
        max-height: min(78vh, calc(100dvh - 148px));
        overflow-y: auto;
        overflow-x: hidden;
        padding: calc(26px * var(--ui-scale, 1)) calc(28px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1));
        border: 1px solid var(--card-border);
        border-radius: 28px;
        background: var(--card-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: var(--card-shadow);
        box-sizing: border-box;
    }

    .principles-formula-cloud {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 1;
    }

    .principles-formula-cloud span {
        position: absolute;
        display: block;
        font-family: "Times New Roman", Georgia, serif;
        font-style: italic;
        font-weight: 400;
        letter-spacing: 0.03em;
        color: color-mix(in srgb, var(--text-main) 16%, transparent);
        opacity: 0.34;
        white-space: nowrap;
        transform-origin: center;
        filter: blur(0.2px);
        will-change: transform, opacity;
    }

    .principles-formula-cloud span strong {
        font-weight: 400;
        color: color-mix(in srgb, var(--brand-blue) 42%, transparent);
    }

    .principles-formula-cloud .formula-psi-primary {
        top: 6%;
        right: 2%;
        font-size: clamp(88px, 12vw, 176px);
        transform: rotate(-8deg);
        animation: principlesFormulaDriftA 14s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
    }

    .principles-formula-cloud .formula-psi-secondary {
        left: 8%;
        bottom: 10%;
        font-size: clamp(58px, 8vw, 112px);
        transform: rotate(5deg);
        opacity: 0.22;
        animation: principlesFormulaDriftB 17s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
    }

    .principles-formula-cloud .formula-psi-tertiary {
        top: 42%;
        left: 12%;
        font-size: clamp(40px, 5.8vw, 86px);
        transform: rotate(-11deg);
        opacity: 0.14;
        animation: principlesFormulaDriftC 12s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
    }

    @keyframes principlesFormulaDriftA {
        0% {
            transform: translate3d(0, 0, 0) rotate(-8deg) scale(0.98);
            opacity: 0.22;
        }
        32% {
            opacity: 0.34;
        }
        68% {
            opacity: 0.28;
        }
        100% {
            transform: translate3d(-28px, 24px, 0) rotate(-2deg) scale(1.04);
            opacity: 0.4;
        }
    }

    @keyframes principlesFormulaDriftB {
        0% {
            transform: translate3d(0, 0, 0) rotate(5deg) scale(0.96);
            opacity: 0.14;
        }
        40% {
            opacity: 0.24;
        }
        100% {
            transform: translate3d(32px, -26px, 0) rotate(9deg) scale(1.05);
            opacity: 0.28;
        }
    }

    @keyframes principlesFormulaDriftC {
        0% {
            transform: translate3d(0, 0, 0) rotate(-11deg) scale(0.94);
            opacity: 0.08;
        }
        45% {
            opacity: 0.18;
        }
        100% {
            transform: translate3d(48px, -28px, 0) rotate(-4deg) scale(1.12);
            opacity: 0.2;
        }
    }

    .glass-curtain__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: clamp(16px, 3vw, 28px);
        margin-bottom: clamp(20px, 3vw, 32px);
        position: relative;
        z-index: 1;
    }
    .glass-curtain__header > div:first-child {
        min-width: 0;
        padding-right: calc(48px * var(--ui-scale, 1));
    }
    .glass-curtain__title {
        font-family: 'Manrope', sans-serif;
        font-size: clamp(20px, 2.4vw, 32px);
        font-weight: 800;
        letter-spacing: -0.5px;
        line-height: 1.22;
        color: var(--text-main);
        margin: 0;
    }

    .principles-intro {
        font-family: 'Manrope', sans-serif;
        font-size: calc(15px * var(--ui-scale, 1));
        line-height: 1.85;
        color: var(--text-muted);
        margin-bottom: clamp(24px, 4vw, 36px);
        position: relative;
        z-index: 1;
    }

    .principles-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: clamp(20px, 3vw, 28px);
        margin-bottom: clamp(28px, 4vw, 44px);
        position: relative;
        z-index: 1;
    }

    .principles-card {
        padding: clamp(1.1rem, 2.2vw, 1.55rem);
        border-radius: 20px;
        border: 1px solid var(--card-border);
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
    }

    .principles-card__label {
        font-family: 'Manrope', sans-serif;
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(3px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--brand-blue);
        margin-bottom: calc(10px * var(--ui-scale, 1));
    }

    .principles-card h3 {
        font-family: 'Manrope', sans-serif;
        font-size: clamp(17px, 1.35vw, 21px);
        font-weight: 800;
        letter-spacing: -0.3px;
        color: var(--text-main);
        margin: 0 0 12px;
    }

    .principles-card p {
        font-family: 'Manrope', sans-serif;
        font-size: calc(14px * var(--ui-scale, 1));
        line-height: 1.75;
        color: var(--text-muted);
        margin: 0;
    }

    .principles-card p + p {
        margin-top: calc(10px * var(--ui-scale, 1));
    }

    .principles-closing {
        font-family: 'Manrope', sans-serif;
        font-size: calc(15px * var(--ui-scale, 1));
        line-height: 1.8;
        color: var(--text-main);
        font-weight: 600;
        padding-top: clamp(16px, 2.5vw, 24px);
        border-top: 1px solid var(--card-border);
        position: relative;
        z-index: 1;
    }

    .principles-closing .highlight,
    .principles-card .highlight {
        color: var(--brand-blue);
        font-weight: 700;
    }

    #foundational-principles {
        display: grid;
        place-items: center;
        padding: max(84px, calc(env(safe-area-inset-top, 0px) + 72px)) clamp(8px, 1.4vw, 18px) clamp(8px, 1.4vw, 18px);
    }

    #foundational-principles .principles-formula-cloud {
        inset: 0;
    }

    #foundational-principles .glass-curtain__inner {
        width: min(1520px, calc(100vw - clamp(16px, 2.8vw, 36px)));
        max-height: calc(100dvh - max(102px, calc(env(safe-area-inset-top, 0px) + 90px)));
        padding: clamp(20px, 2.6vw, 34px) clamp(16px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px);
        border-radius: clamp(20px, 2.1vw, 30px);
        margin: 0;
    }

    #foundational-principles .glass-curtain__title {
        font-size: clamp(24px, 3vw, 44px);
        max-width: 24ch;
    }

    #foundational-principles .principles-intro {
        max-width: min(96ch, 100%);
    }

    #foundational-principles .principles-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    }

    #legal-notice,
    #privacy-policy,
    #cookie-preferences {
        display: grid;
        place-items: center;
        padding: max(92px, calc(env(safe-area-inset-top, 0px) + 80px)) clamp(12px, 1.8vw, 24px) clamp(12px, 1.8vw, 24px);
    }

    #legal-notice .glass-curtain__inner,
    #privacy-policy .glass-curtain__inner,
    #cookie-preferences .glass-curtain__inner {
        width: min(980px, calc(100vw - clamp(24px, 4vw, 64px)));
        max-height: calc(100dvh - max(108px, calc(env(safe-area-inset-top, 0px) + 96px)));
        padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2.8vw, 30px) clamp(20px, 2.4vw, 28px);
        border-radius: 26px;
        margin: 0;
    }

    @media (min-width: 1200px) {
        #privacy-policy {
            padding: calc(20px * var(--ui-scale, 1));
        }

        #privacy-policy .glass-curtain__inner {
            width: min(1360px, calc(100vw - 40px));
            max-height: calc(100dvh - 40px);
            padding: clamp(24px, 2.4vw, 34px) clamp(22px, 2.4vw, 34px) clamp(22px, 2.2vw, 30px);
            border-radius: 28px;
        }
    }

    .legal-intro {
        font-size: calc(15px * var(--ui-scale, 1));
        line-height: 1.8;
        color: var(--text-muted);
        margin-bottom: calc(24px * var(--ui-scale, 1));
    }

    .legal-stack {
        display: grid;
        gap: calc(20px * var(--ui-scale, 1));
    }

    .legal-block {
        padding: calc(18px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
        border: 1px solid var(--card-border);
        border-radius: 20px;
        background: color-mix(in srgb, var(--card-bg) 92%, transparent);
        box-shadow: var(--card-shadow);
    }

    .legal-block h3 {
        font-size: calc(17px * var(--ui-scale, 1));
        font-weight: 800;
        letter-spacing: -0.3px;
        color: var(--text-main);
        margin: 0 0 calc(10px * var(--ui-scale, 1));
    }

    .legal-block p {
        margin: 0;
        font-size: calc(14px * var(--ui-scale, 1));
        line-height: 1.8;
        color: var(--text-muted);
    }

    .legal-block p + p {
        margin-top: calc(10px * var(--ui-scale, 1));
    }

    .legal-kv {
        display: grid;
        grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
        gap: calc(10px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
        align-items: start;
    }

    .legal-kv dt {
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2.6px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--brand-blue);
    }

    .legal-kv dd {
        margin: 0;
        font-size: calc(14px * var(--ui-scale, 1));
        line-height: 1.8;
        color: var(--text-muted);
    }

    .legal-kv dd a {
        color: inherit;
        text-decoration: none;
        font-weight: inherit;
    }

    /* Imprint — company block: tighter rows and multiline address/register lines */
    #legal-notice .legal-block--company h3 {
        margin-bottom: calc(16px * var(--ui-scale, 1));
    }

    #legal-notice .legal-block--company .legal-kv {
        gap: calc(6px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        row-gap: calc(6px * var(--ui-scale, 1));
    }

    #legal-notice .legal-block--company .legal-kv dt {
        line-height: 1.1;
    }

    #legal-notice .legal-block--company .legal-kv dd {
        line-height: 1.2;
    }

    .legal-updated {
        margin-top: calc(14px * var(--ui-scale, 1)) !important;
        font-size: calc(10px * var(--ui-scale, 1)) !important;
        font-weight: 600;
        letter-spacing: calc(1.6px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
    }

    #cookie-preferences {
        z-index: 290;
    }

    .cookie-banner {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        z-index: 95;
        display: block;
        pointer-events: none;
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.25s ease, transform 0.3s ease;
    }

    .cookie-banner.is-open {
        pointer-events: auto;
        opacity: 1;
        transform: translateY(0);
    }

    .cookie-banner[hidden] {
        display: none;
    }

    .cookie-banner__card {
        width: 100%;
        padding: clamp(14px, 1.6vw, 18px) clamp(18px, 3vw, 34px);
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid var(--card-border);
        border-left: 0;
        border-radius: 0;
        background: color-mix(in srgb, var(--bg-color) 92%, transparent);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    }

    .cookie-banner__content {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) auto;
        gap: calc(14px * var(--ui-scale, 1)) calc(26px * var(--ui-scale, 1));
        align-items: center;
        max-width: 1680px;
        margin: 0 auto;
    }

    .cookie-banner__title {
        font-size: calc(15px * var(--ui-scale, 1));
        font-weight: 800;
        letter-spacing: 0.02em;
        color: var(--text-main);
        margin-bottom: calc(6px * var(--ui-scale, 1));
    }

    .cookie-banner__body {
        font-size: calc(13px * var(--ui-scale, 1));
        line-height: 1.65;
        color: var(--text-muted);
        max-width: 92ch;
    }

    .cookie-banner__body a,
    .cookie-helper-link,
    #privacy-policy .legal-block a:not([href^="mailto:"]),
    #privacy-policy .legal-kv dd a:not([href^="mailto:"]) {
        color: var(--text-main);
        text-decoration: none;
        border-bottom: 1px solid color-mix(in srgb, var(--text-main) 18%, transparent);
    }

    .cookie-banner__body a:hover,
    .cookie-helper-link:hover,
    #privacy-policy .legal-block a:not([href^="mailto:"]):hover,
    #privacy-policy .legal-kv dd a:not([href^="mailto:"]):hover {
        border-bottom-color: color-mix(in srgb, var(--brand-blue) 45%, transparent);
        color: var(--brand-blue);
    }

    #privacy-policy .legal-block a[href^="mailto:"],
    #privacy-policy .legal-kv dd a[href^="mailto:"] {
        color: inherit;
        text-decoration: none;
        border-bottom: 0;
        font-weight: inherit;
    }

    .cookie-banner__actions,
    .cookie-settings__actions {
        display: flex;
        align-items: center;
        gap: calc(10px * var(--ui-scale, 1));
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .cookie-settings-intro {
        font-size: clamp(13px, 1.05vw, 15px);
        line-height: clamp(1.7, 1.7, 1.8);
        color: var(--text-muted);
        margin-bottom: calc(24px * var(--ui-scale, 1));
    }

    .cookie-settings-grid {
        display: grid;
        gap: calc(16px * var(--ui-scale, 1));
        margin-bottom: calc(22px * var(--ui-scale, 1));
    }

    .cookie-setting {
        display: grid;
        gap: calc(10px * var(--ui-scale, 1));
        padding: calc(18px * var(--ui-scale, 1));
        border: 1px solid var(--card-border);
        border-radius: 20px;
        background: color-mix(in srgb, var(--card-bg) 92%, transparent);
        box-shadow: var(--card-shadow);
    }

    .cookie-setting__head {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        gap: calc(16px * var(--ui-scale, 1));
    }

    .cookie-setting__title {
        font-size: clamp(14px, 1.1vw, 16px);
        font-weight: 800;
        color: var(--text-main);
    }

    .cookie-setting__meta {
        font-size: clamp(9px, 0.7vw, 10px);
        font-weight: 700;
        letter-spacing: calc(2.2px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--brand-blue);
    }

    .cookie-setting__body {
        font-size: clamp(14px, 1.08vw, 15px);
        line-height: 1.75;
        color: var(--text-muted);
    }

    .cookie-switch {
        display: inline-flex;
        align-items: center;
        gap: calc(10px * var(--ui-scale, 1));
        justify-content: flex-start;
        align-self: flex-start;
        font-size: clamp(11px, 0.9vw, 12px);
        font-weight: 700;
        letter-spacing: calc(2px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-main);
        user-select: none;
    }

    .cookie-switch input {
        accent-color: var(--brand-blue);
        width: 18px;
        height: 18px;
    }

    .cookie-switch input[disabled] {
        opacity: 0.72;
    }

    .cookie-settings-note {
        margin-top: calc(4px * var(--ui-scale, 1));
        font-size: clamp(13px, 1vw, 14px);
        line-height: 1.7;
        color: var(--text-muted);
    }

    .cookie-settings__actions {
        margin-top: calc(20px * var(--ui-scale, 1));
    }

    @media (max-width: 900px) {
        .glass-curtain {
            display: block;
            padding: max(68px, calc(env(safe-area-inset-top, 0px) + 56px)) 3px 3px;
        }

        .glass-curtain__inner {
            width: calc(100vw - 6px);
            max-height: calc(100dvh - 74px);
            padding: calc(16px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));
            border-radius: 18px;
            margin: 0 auto;
        }

        .glass-curtain__header {
            margin-bottom: calc(18px * var(--ui-scale, 1));
        }

        #foundational-principles {
            display: grid;
            place-items: center;
            padding: max(64px, calc(env(safe-area-inset-top, 0px) + 52px)) 3px 3px;
        }

        #foundational-principles .glass-curtain__inner {
            width: calc(100vw - 6px);
            max-height: calc(100dvh - 70px);
            padding: calc(14px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
            border-radius: 18px;
        }

        #legal-notice,
        #privacy-policy,
        #cookie-preferences {
            display: block;
            padding: 0;
        }

        #legal-notice .glass-curtain__inner,
        #privacy-policy .glass-curtain__inner,
        #cookie-preferences .glass-curtain__inner {
            width: 100vw;
            max-width: 100vw;
            min-height: 100dvh;
            max-height: 100dvh;
            padding: max(72px, calc(env(safe-area-inset-top, 0px) + 60px)) 14px max(16px, calc(env(safe-area-inset-bottom, 0px) + 14px));
            border-radius: 0;
            border-left: 0;
            border-right: 0;
            margin: 0;
        }

        .cookie-banner {
            top: var(--nav-height);
        }

        .cookie-banner__card {
            width: 100%;
            padding: calc(12px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        }

        .cookie-banner__content {
            grid-template-columns: 1fr;
            align-items: start;
        }

        .cookie-banner__actions,
        .cookie-settings__actions {
            justify-content: stretch;
        }

        .cookie-banner__actions > *,
        .cookie-settings__actions > * {
            width: 100%;
        }

        .cookie-setting {
            padding: calc(16px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        }

        .legal-kv {
            grid-template-columns: 1fr;
            gap: calc(4px * var(--ui-scale, 1)) 0;
        }
    }

    @media (max-width: 520px) {
        .media-viewer {
            padding: max(70px, calc(env(safe-area-inset-top, 0px) + 58px)) 4px 4px;
        }

        .media-viewer-card {
            width: calc(100vw - 8px);
            max-height: calc(100dvh - 74px);
            padding: calc(14px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
            border-radius: 18px;
        }

        .media-viewer-frame {
            min-height: clamp(210px, 38vh, 420px);
            border-radius: 16px;
        }

        .media-viewer-card[data-media-type="audio"] .media-viewer-frame,
        .media-viewer-card[data-media-type="embed"] .media-viewer-frame,
        .media-viewer-card[data-media-type="document"] .media-viewer-frame {
            min-height: clamp(240px, 46vh, 520px);
        }

        .media-viewer-embed {
            height: clamp(240px, 46vh, 520px);
        }

        .media-viewer-card[data-media-type="document"] .media-viewer-embed {
            min-height: clamp(280px, 52vh, 620px);
        }

        .glass-curtain {
            padding: max(64px, calc(env(safe-area-inset-top, 0px) + 52px)) 1px 1px;
        }

        .glass-curtain__inner {
            width: calc(100vw - 2px);
            max-height: calc(100dvh - 66px);
            padding: calc(14px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
            border-radius: 16px;
        }

        #foundational-principles {
            display: grid;
            place-items: center;
            padding: max(60px, calc(env(safe-area-inset-top, 0px) + 48px)) 1px 1px;
        }

        #foundational-principles .glass-curtain__inner {
            width: calc(100vw - 2px);
            max-height: calc(100dvh - 62px);
            padding: calc(12px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
            border-radius: 14px;
        }

        #legal-notice,
        #privacy-policy,
        #cookie-preferences {
            padding: 0;
        }

        #legal-notice .glass-curtain__inner,
        #privacy-policy .glass-curtain__inner,
        #cookie-preferences .glass-curtain__inner {
            width: 100vw;
            max-width: 100vw;
            min-height: 100dvh;
            max-height: 100dvh;
            padding: max(68px, calc(env(safe-area-inset-top, 0px) + 56px)) 12px max(14px, calc(env(safe-area-inset-bottom, 0px) + 12px));
            border-radius: 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .glass-curtain {
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        .principles-formula-cloud span {
            animation: none;
        }
    }

    .submit-preview-backdrop {
        position: fixed;
        inset: 0;
        z-index: 305;
        background: var(--submit-preview-backdrop);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s ease;
    }
    .submit-preview-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    .submit-preview {
        position: fixed;
        inset: 0;
        z-index: 306;
        display: grid;
        place-items: center;
        padding: clamp(18px, 4vw, 40px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s ease;
    }
    .submit-preview.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    .submit-preview-card {
        position: relative;
        width: min(720px, 100%);
        max-height: min(82vh, 860px);
        overflow: auto;
        padding: calc(24px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));
        border-radius: 28px;
        border: 1px solid var(--card-border);
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
        backdrop-filter: blur(26px);
        -webkit-backdrop-filter: blur(26px);
    }
    .submit-preview-card h3 {
        margin: 0 calc(72px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) 0;
        font-size: clamp(22px, 2.35vw, 34px);
        line-height: 1.24;
    }
    .submit-preview-meta {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: calc(12px * var(--ui-scale, 1));
        margin-bottom: calc(16px * var(--ui-scale, 1));
    }
    .submit-preview-meta-card {
        padding: calc(14px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1));
        border-radius: 18px;
        border: 1px solid var(--card-border);
        background: var(--submit-preview-muted-surface);
    }
    .submit-preview-meta-label {
        display: block;
        margin-bottom: calc(7px * var(--ui-scale, 1));
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2.4px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .submit-preview-meta-value {
        font-size: calc(14px * var(--ui-scale, 1));
        line-height: 1.5;
        color: var(--text-main);
        word-break: break-word;
    }
    .submit-preview-body {
        margin: 0;
        padding: calc(16px * var(--ui-scale, 1)) calc(17px * var(--ui-scale, 1));
        border-radius: 20px;
        border: 1px solid var(--card-border);
        background: var(--submit-preview-muted-surface);
        color: var(--text-main);
        font-family: 'Manrope', sans-serif;
        font-size: calc(14px * var(--ui-scale, 1));
        line-height: 1.7;
        white-space: pre-wrap;
        word-break: break-word;
    }
    [data-theme="dark"] .submit-preview-body,
    [data-theme="dark"] .submit-preview-meta-card {
        background: var(--submit-preview-muted-surface-dark);
    }
    .submit-preview-note {
        margin: calc(14px * var(--ui-scale, 1)) 0 0;
        font-size: calc(13px * var(--ui-scale, 1));
        line-height: 1.65;
        color: var(--text-muted);
    }
    .submit-preview-status {
        margin: calc(14px * var(--ui-scale, 1)) 0 0;
        font-size: calc(13px * var(--ui-scale, 1));
        line-height: 1.65;
        color: var(--brand-blue);
        font-weight: 600;
    }
    .submit-preview-actions {
        margin-top: calc(18px * var(--ui-scale, 1));
        display: flex;
        flex-wrap: wrap;
        gap: calc(12px * var(--ui-scale, 1));
    }
    @media (max-width: 720px) {
        .submit-preview-meta {
            grid-template-columns: 1fr;
        }
        .submit-preview-card {
            padding: calc(22px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));
            border-radius: 24px;
        }
    }

    @media (max-width: 620px) {
        .logo-container {
            max-width: min(46vw, 200px);
        }

        .logomark {
            font-size: clamp(16px, 5vw, 22px);
        }
    }

    /* Contact — hybrid: route (diagram) + case + reach */
    .contact-hybrid {
        margin-top: clamp(8px, 1.4vw, 16px);
        padding-top: calc(6px * var(--ui-scale, 1));
    }
    .contact-hybrid-lead {
        margin: 0 0 calc(30px * var(--ui-scale, 1));
    }
    .contact-hybrid-step + .contact-hybrid-step {
        margin-top: calc(18px * var(--ui-scale, 1));
    }
    .contact-hybrid-step label {
        display: block;
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2.5px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: calc(8px * var(--ui-scale, 1));
    }
    .contact-hybrid-step .optional {
        font-weight: 600;
        letter-spacing: calc(0.5px * var(--ui-scale, 1));
        text-transform: none;
        font-size: calc(12px * var(--ui-scale, 1));
        color: var(--text-muted);
        opacity: 0.85;
    }
    .contact-hybrid-step textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
        border-radius: 16px;
        border: 1px solid var(--card-border);
        background: var(--contact-input-surface);
        color: var(--text-main);
        font-family: 'Manrope', sans-serif;
        font-size: calc(17px * var(--ui-scale, 1));
        line-height: 1.65;
        min-height: 120px;
        resize: vertical;
    }
    [data-theme="dark"] .contact-hybrid-step textarea {
        background: var(--contact-input-surface-dark);
    }
    .contact-hybrid-step input {
        width: 100%;
        box-sizing: border-box;
        padding: calc(11px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        border-radius: 12px;
        border: 1px solid var(--card-border);
        background: var(--bg-color);
        color: var(--text-main);
        font-family: 'Manrope', sans-serif;
        font-size: calc(17px * var(--ui-scale, 1));
        margin-bottom: calc(12px * var(--ui-scale, 1));
    }
    .contact-hybrid-step .brief-field input,
    .contact-hybrid-step .brief-field textarea {
        margin-bottom: 0;
    }
    .contact-hybrid-step input:last-child {
        margin-bottom: 0;
    }
    .contact-hybrid-panel[hidden] {
        display: none !important;
    }
    .contact-hybrid-panel .brief-field {
        margin-bottom: calc(14px * var(--ui-scale, 1));
    }
    .contact-hybrid-panel .brief-field:last-child {
        margin-bottom: 0;
    }
    .contact-hybrid-panel .brief-field label {
        display: block;
        font-size: calc(10px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: calc(2.5px * var(--ui-scale, 1));
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: calc(8px * var(--ui-scale, 1));
    }
    .contact-hybrid-panel .brief-field input,
    .contact-hybrid-panel .brief-field textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: calc(12px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
        border-radius: 14px;
        border: 1px solid var(--card-border);
        background: var(--contact-input-surface);
        color: var(--text-main);
        font-family: 'Manrope', sans-serif;
        font-size: calc(17px * var(--ui-scale, 1));
        line-height: 1.5;
    }
    [data-theme="dark"] .contact-hybrid-panel .brief-field input,
    [data-theme="dark"] .contact-hybrid-panel .brief-field textarea {
        background: var(--contact-input-surface-dark);
    }
    .contact-hybrid-panel .brief-field textarea {
        min-height: 100px;
        resize: vertical;
    }

    .contact-field-hint {
        margin: 0 0 calc(8px * var(--ui-scale, 1));
        font-size: calc(13px * var(--ui-scale, 1));
        line-height: 1.55;
        color: var(--text-muted);
        font-weight: 500;
    }

    .contact-field-error {
        margin: calc(8px * var(--ui-scale, 1)) 0 0;
        font-size: calc(13px * var(--ui-scale, 1));
        line-height: 1.45;
        font-weight: 600;
        color: var(--meter-bad);
    }

    .contact-field-error[hidden] {
        display: none !important;
    }

    .brief-field.has-error input,
    .brief-field.has-error textarea {
        border-color: color-mix(in srgb, var(--meter-bad) 65%, var(--card-border));
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--meter-bad) 28%, transparent);
    }

    .contact-form-status {
        margin: calc(12px * var(--ui-scale, 1)) 0 calc(28px * var(--ui-scale, 1));
        padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));
        border-radius: 14px;
        font-size: calc(14px * var(--ui-scale, 1));
        line-height: 1.5;
        font-weight: 600;
        color: var(--meter-bad);
        background: color-mix(in srgb, var(--meter-bad) 10%, var(--card-bg));
        border: 1px solid color-mix(in srgb, var(--meter-bad) 32%, transparent);
    }

    .contact-form-status[hidden] {
        display: none !important;
    }

    .contact-hp {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .contact-hybrid-step .brief-field {
        margin-bottom: calc(12px * var(--ui-scale, 1));
    }

    .contact-hybrid-step .brief-field:last-child {
        margin-bottom: 0;
    }

    .contact-form-title {
        font-size: calc(22px * var(--ui-scale, 1));
        font-weight: 700;
        letter-spacing: -0.35px;
        line-height: 1.22;
        margin: 0 0 calc(18px * var(--ui-scale, 1));
        color: var(--text-main);
    }
    #contact-hybrid-form .contact-hybrid-actions {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: calc(12px * var(--ui-scale, 1));
        margin-top: calc(20px * var(--ui-scale, 1));
        width: 100%;
        max-width: 100%;
        align-items: stretch;
    }
    #contact-hybrid-submit,
    #contact-hybrid-brief-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex: 1 1 auto;
    }
    @media (min-width: 720px) {
        #contact-hybrid-form .contact-hybrid-actions {
            flex-direction: row;
            align-items: center;
        }
        #contact-hybrid-submit,
        #contact-hybrid-brief-btn {
            width: auto;
            min-width: min(100%, 220px);
            flex: 1 1 0;
        }
    }