.max-h-\[85vh\]{max-height:85vh}.max-h-\[94vh\]{max-height:94vh}.max-h-\[calc\(85vh-7rem\)\]{max-height:calc(85vh - 7rem)}.max-h-\[calc\(94vh-2rem\)\]{max-height:calc(94vh - 2rem)}.w-\[96vw\]{width:96vw}.max-w-\[1120px\]{max-width:1120px}.max-w-\[96vw\]{max-width:96vw}.text-\[10px\]{font-size:10px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.leading-\[1\.15rem\]{line-height:1.15rem}.leading-\[1\.1rem\]{line-height:1.1rem}.tracking-\[0\.10em\]{letter-spacing:.1em}.\!delay-\[0ms\]{transition-delay:0ms!important}.\!duration-\[0ms\]{transition-duration:0ms!important}.hover\:z-\[40\]:hover{z-index:3}.hover\:z-\[30\]:hover{z-index:2}.hover\:z-\[20\]:hover{z-index:1}@media (min-width:640px){.sm\:max-w-\[1200px\]{max-width:1200px}}
.csp {
                --primary: #00a7e7;
                --csp-primary-700: color-mix(in oklab, var(--primary) 78%, black);
                --csp-ink: #111827;
                --csp-ink-muted: #475569;
                --csp-ink-mute2: #64748b;
                --csp-ink-border: var(--border, color-mix(in oklab, var(--primary) 16%, #f1f5f9));
            }

            .csp h1, .csp h2, .csp h3 {
                overflow-wrap: anywhere;
                hyphens: auto;
            }

            .csp .font-heading {
                font-family: "Heading-Font", "Inter Tight", "Inter", system-ui, sans-serif;
                letter-spacing: -0.02em;
            }

            .csp .prose {
                --tw-prose-body: var(--csp-ink-muted);
                --tw-prose-headings: var(--csp-ink);
                color: var(--csp-ink-muted);
            }

            .csp .text-ink { color: var(--csp-ink); }
            .csp .text-ink-muted { color: var(--csp-ink-muted); }
            .csp .text-ink-mute2 { color: var(--csp-ink-mute2); }
            .csp .text-primary { color: var(--primary); }

            .csp .text-primary-700,
            .csp .hover\:text-primary-700:hover,
            .csp .group:hover .group-hover\:text-primary { color: var(--csp-primary-700); }

            .csp .border-ink-border { border-color: var(--csp-ink-border); }
            .csp .bg-ink-border { background-color: var(--csp-ink-border); }

            .csp .border-primary\/25 { border-color: color-mix(in oklab, var(--primary) 25%, transparent); }
            .csp .border-primary\/30 { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
            .csp .hover\:border-primary\/40:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }

            .csp .bg-primary\/5,
            .csp .hover\:bg-primary\/5:hover { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
            .csp .bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }

            /* Shadow scale mirrors the host template: cards rest on shadow-sm and
               only gain depth on hover (paired with a small translate lift). */
            .csp .shadow-mse-soft,
            .csp .hover\:shadow-mse-soft:hover {
                box-shadow: 0 1px 2px 0 rgb(15 23 42 / .05);
            }

            .csp .hover\:shadow-mse-md:hover {
                box-shadow:
                    0 4px 6px -1px rgb(15 23 42 / .08),
                    0 2px 4px -2px rgb(15 23 42 / .05);
            }

            .csp .hover\:shadow-mse-card:hover {
                box-shadow:
                    0 20px 25px -5px rgb(15 23 42 / .08),
                    0 8px 10px -6px rgb(15 23 42 / .05);
            }

            /* Hover-lift transitions like the template's
               "transform transition-all hover:-translate-y-1" cards. */
            .csp-card {
                transition: transform .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
            }

            .csp-card:hover {
                transform: translateY(-4px);
            }

            .csp-row {
                transition: transform .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
            }

            .csp-row:hover {
                transform: translateY(-1px);
            }

            /* Section wells: rounded-3xl + border-border + bg-primary/5, and the
               gradient accent variant used for highlighted asides. */
            .csp-well {
                border-radius: 1.5rem;
                border: 1px solid var(--csp-ink-border);
                background-color: color-mix(in oklab, var(--primary) 5%, transparent);
            }

            .csp-well--accent {
                border-color: color-mix(in oklab, var(--primary) 30%, transparent);
                background: linear-gradient(to bottom right, color-mix(in oklab, var(--primary) 8%, transparent), color-mix(in oklab, var(--primary) 4%, transparent) 55%, transparent);
            }

            .csp-chip {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                width: 3rem;
                height: 3rem;
                border-radius: 10px;
                background: color-mix(in oklab, var(--primary) 10%, transparent);
                color: var(--primary);
                font-size: 1rem;
            }

            .csp-chip--sm {
                width: 2.5rem;
                height: 2.5rem;
                font-size: .85rem;
            }

            .csp-facts {
                background: color-mix(in oklab, var(--primary) 14%, white);
            }

            .csp-eyebrow {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                border-radius: 999px;
                border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
                background: color-mix(in oklab, var(--primary) 5%, transparent);
                padding: .3rem .75rem;
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .10em;
                color: var(--primary);
            }

            .csp .csp-eyebrow-hero {
                background: rgba(255, 255, 255, .3);
                -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px);
            }

            .csp-mono-label {
                font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: 10px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .16em;
                color: var(--csp-ink-mute2);
            }

            .csp-mono-label--primary {
                color: var(--primary);
            }

            .csp-hero {
                position: relative;
                overflow: hidden;
                border-radius: 1.5rem 1.5rem 0 0;
                background: linear-gradient(to bottom, #fff 0%, #fff 72%, transparent 100%);
            }

            .csp-hero::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                z-index: 7;
                background: linear-gradient(90deg, transparent, var(--primary) 18%, color-mix(in oklab, var(--primary) 55%, white) 50%, var(--primary) 82%, transparent);
            }

            /* Top + side hairline that fades out toward the bottom (no bottom edge),
               so the hero reads as an open continuation rather than a closed card. */
            .csp-hero::after {
                content: '';
                position: absolute;
                inset: 0;
                border: 1px solid var(--csp-ink-border);
                border-bottom: 0;
                border-radius: inherit;
                pointer-events: none;
                z-index: 6;
                -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 96%);
                mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 96%);
            }

            .csp-hero-bg {
                position: absolute;
                inset: 0;
                -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, .5) 55%, transparent 95%);
                mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, .5) 55%, transparent 95%);
            }

            .csp-hero-bg img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .csp-hero-scrim {
                position: absolute;
                inset: 0;
                background: linear-gradient(to bottom, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .9) 55%, rgba(255, 255, 255, .99) 100%);
            }

            .csp-hero-glow {
                position: absolute;
                inset: 0;
                pointer-events: none;
                background:
                    radial-gradient(40rem 22rem at 4% 20%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 70%),
                    radial-gradient(24rem 16rem at 96% 4%, color-mix(in oklab, var(--primary) 16%, transparent), transparent 72%);
            }

            .csp-hero-tagline {
                margin-top: .75rem;
                max-width: 62ch;
                font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.2rem);
                font-weight: 500;
                line-height: 1.55;
                color: var(--csp-primary-700);
                text-wrap: pretty;
            }

            .csp-panel {
                border-radius: 1rem;
                border: 1px solid var(--csp-ink-border);
                background: rgba(255, 255, 255, .92);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                overflow: hidden;
            }

            .csp-btn-primary {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                border-radius: .7rem;
                font-weight: 600;
                color: #fff;
                background: var(--primary);
                box-shadow: 0 12px 30px -10px color-mix(in oklab, var(--primary) 60%, transparent);
                transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
                text-decoration: none;
            }

            .csp-btn-primary:hover {
                background: var(--csp-primary-700);
                color: #fff;
                transform: translateY(-2px);
                box-shadow: 0 16px 34px -10px color-mix(in oklab, var(--primary) 55%, transparent);
            }

            .csp-btn-ghost {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                border-radius: .7rem;
                font-weight: 600;
                color: var(--csp-primary-700);
                background: rgba(255, 255, 255, .9);
                border: 1.5px solid color-mix(in oklab, var(--primary) 55%, transparent);
                transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
                text-decoration: none;
            }

            .csp-btn-ghost:hover {
                border-color: var(--primary);
                background: color-mix(in oklab, var(--primary) 6%, white);
                color: var(--csp-primary-700);
                transform: translateY(-2px);
            }

            .csp-person-avatar {
                position: relative;
                flex-shrink: 0;
                overflow: hidden;
                border-radius: 999px;
                background: color-mix(in oklab, var(--primary) 10%, transparent);
            }

            .csp-person-avatar img {
                position: relative;
                z-index: 1;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .csp-tab-scroll-target {
                scroll-margin-top: 1rem;
            }

            .csp-tabfade-enter-from,
            .csp-tabfade-leave-to {
                opacity: 0;
                transform: translateY(6px);
            }

            .csp-tabfade-enter-to,
            .csp-tabfade-leave-from {
                opacity: 1;
                transform: translateY(0);
            }

            .csp-tabfade-enter-active {
                transition:
                    opacity 350ms linear(0, 0.3772, 0.8604, 1.0738, 1.0846, 1.0353, 1.0006, 0.991, 0.9941, 0.9985, 1.0006, 1),
                    transform 350ms linear(0, 0.3772, 0.8604, 1.0738, 1.0846, 1.0353, 1.0006, 0.991, 0.9941, 0.9985, 1.0006, 1);
            }

            .csp-tabfade-leave-active {
                transition:
                    opacity 150ms cubic-bezier(.4, 0, 1, 1),
                    transform 150ms cubic-bezier(.4, 0, 1, 1);
            }

            .csp-tabnav {
                position: sticky;
                top: .5rem;
                z-index: 40;
                display: flex;
                gap: .4rem;
                overflow-x: auto;
                overscroll-behavior-x: contain;
                scrollbar-width: none;
                padding: .35rem;
                border-radius: .8rem;
                background: rgba(255, 255, 255, .88);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                box-shadow:
                    0 10px 30px -18px color-mix(in oklab, var(--csp-ink) 42%, transparent),
                    0 1px 0 color-mix(in oklab, var(--csp-ink) 4%, transparent);
            }

            .csp-tabnav::-webkit-scrollbar {
                display: none;
            }

            .csp-tab {
                display: inline-flex;
                align-items: center;
                gap: .4rem;
                white-space: nowrap;
                border-radius: .55rem;
                padding: .5rem 1rem;
                font-size: 13px;
                font-weight: 600;
                color: var(--csp-ink-muted);
                cursor: pointer;
                transition: background-color .2s ease, color .2s ease;
                text-decoration: none;
            }

            .csp-tab:hover {
                color: var(--csp-ink);
            }

            .csp-tab-on {
                background: var(--primary);
                color: #fff !important;
                box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--primary) 60%, transparent);
            }

            /* Two-column events layout — auto-fit keeps it responsive without any
               media-query rule (the runtime template parser drops this whole style
               tag when it sees one) and without relying on host-page utilities. */
            .csp-events-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 1.5rem;
                align-items: start;
            }

            /* Retint the shared committee-sub-list partial (structure tab) to the .csp
               token palette — scoped plain rules only, so the runtime keeps the tag. */
            .csp .opacity-75 { opacity: 1; }
            .csp .text-gray-900 { color: var(--csp-ink); }
            .csp .text-gray-500 { color: var(--csp-ink-muted); }
            .csp .text-gray-400 { color: var(--csp-ink-mute2); }
            .csp .ring-gray-200 { --tw-ring-color: var(--csp-ink-border); }
            .csp .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--csp-ink-border); }
            .csp .bg-primary-100 { background-color: color-mix(in oklab, var(--primary) 12%, transparent); }
            .csp .hover\:bg-gray-50:hover { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }

            /* ---- Structure tree (scoped; a nicer view of the committee hierarchy) ---- */
            .csp-tree-chip {
                display: flex;
                align-items: flex-start;
                gap: .6rem;
                border-radius: .75rem;
                border: 1px solid var(--csp-ink-border);
                background: #fff;
                padding: .5rem .7rem;
                text-decoration: none;
            }

            .csp-tree-meeting {
                display: flex;
                align-items: flex-start;
                gap: .3rem;
                margin-top: .2rem;
                font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: .02em;
                line-height: 1.4;
                color: var(--csp-primary-700);
            }

            .csp-tree-meeting i {
                flex-shrink: 0;
                margin-top: 1.5px;
                font-size: 9px;
                color: var(--primary);
            }

            .csp-tree-badge {
                align-self: center;
            }

            a.csp-tree-chip {
                transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
            }

            a.csp-tree-chip:hover {
                border-color: color-mix(in oklab, var(--primary) 40%, transparent);
                box-shadow: 0 10px 26px -16px color-mix(in oklab, var(--csp-ink) 40%, transparent);
                transform: translateY(-1px);
            }

            .csp-tree-chip--root {
                border-color: color-mix(in oklab, var(--primary) 30%, transparent);
                background: color-mix(in oklab, var(--primary) 6%, transparent);
            }

            .csp-tree-chip--current {
                border-color: var(--primary);
                background: color-mix(in oklab, var(--primary) 12%, transparent);
                box-shadow: 0 0 0 1px var(--primary), 0 10px 26px -16px color-mix(in oklab, var(--primary) 55%, transparent);
            }

            .csp-tree-chip-icon {
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 1.9rem;
                height: 1.9rem;
                border-radius: .55rem;
                background: color-mix(in oklab, var(--primary) 10%, transparent);
                color: var(--csp-primary-700);
                font-size: .8rem;
            }

            .csp-tree-chip--current .csp-tree-chip-icon {
                background: var(--primary);
                color: #fff;
            }

            .csp-tree-badge {
                flex-shrink: 0;
                border-radius: 999px;
                background: var(--primary);
                color: #fff;
                font-size: 9px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .08em;
                padding: .14rem .5rem;
            }

            .csp-tree-children {
                position: relative;
                margin-left: .5rem;
                padding-left: 1.1rem;
            }

            .csp-tree-item {
                position: relative;
                padding-top: .5rem;
            }

            .csp-tree-item::after {
                content: "";
                position: absolute;
                left: -1.1rem;
                top: -0.15rem;
                width: 2px;
                height: 100%;
                background: color-mix(in oklab, var(--primary) 22%, transparent);
            }

            .csp-tree-item:last-child::after {
                height: 2.1rem;
            }

            .csp-tree-item::before {
                content: "";
                position: absolute;
                left: -1.1rem;
                top: 1.95rem;
                width: 1.1rem;
                height: 2px;
                background: color-mix(in oklab, var(--primary) 22%, transparent);
                border-radius: 2px;
            }