html {
        scroll-behavior: smooth;
    }

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

    button {
        border: none;
        cursor: pointer;
        height: 50px;
        width: 175px;
        transition: all;
        transition-duration: 250ms;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    button svg{
        margin-right: 8px;
        width: 18px;
        height: 18px;
    }

    a {
        text-decoration: none;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        background-color: #f5f5f7;
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .site-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
        height: 64px;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(245, 245, 247, 0.85);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .site-logo {
        font-size: 18px;
        font-weight: 600;
        color: #73787d;
        letter-spacing: 0.5px;
        transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
        cursor: default;
    }

    .site-logo:hover {
        opacity: 0.55;
    }

    .header-nav {
        display: flex;
        flex-direction: row;
        gap: 32px;
    }

    .header-nav a {
        position: relative;
        color: #73787d;
        font-size: 15px;
        font-weight: 500;
        transition: color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }

    .header-nav a::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 100%;
        height: 1.5px;
        background: #3a3d40;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .header-nav a:hover {
        color: #3a3d40;
        transform: translateY(-1px);
    }

    .header-nav a:hover::after {
        transform: scaleX(1);
    }

    /* ── Breadcrumb Navigation ── */
    .breadcrumb-bar {
        display: none;
        align-items: center;
        padding: 9px 40px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.2px;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .breadcrumb__link {
        color: #8a8f94;
        text-decoration: none;
        transition: color 200ms ease;
    }

    .breadcrumb__link:hover {
        color: #1d2024;
    }

    .breadcrumb__sep {
        color: #c0c4ca;
        margin: 0 9px;
        font-size: 10px;
        font-weight: 400;
        user-select: none;
    }

    .breadcrumb__current {
        color: #3a3d40;
        font-weight: 600;
    }

    body.dark .breadcrumb-bar {
        border-bottom-color: rgba(255, 255, 255, 0.05);
    }

    body.dark .breadcrumb__link  { color: #6a7080; }
    body.dark .breadcrumb__link:hover { color: #dde1ec; }
    body.dark .breadcrumb__sep   { color: #3a4060; }
    body.dark .breadcrumb__current { color: #9298a8; }

    /* ── Home Hero ── */
    .home-hero {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 64px;
        padding: 64px 56px 72px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    .home-hero__left {
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex-shrink: 0;
        width: 280px;
    }

    .home-hero__img-panel {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: -5px -5px 14px rgba(255, 255, 255, 0.82),
                    5px 5px 14px rgba(0, 0, 0, 0.18);
    }

    .home-hero__img-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .home-hero__info-panel {
        background: #e8ecf2;
        border-radius: 16px;
        padding: 24px 28px;
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.82),
                    4px 4px 10px rgba(0, 0, 0, 0.14);
    }

    .home-hero__dl {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        row-gap: 10px;
        font-size: 13px;
    }

    .home-hero__dl dt {
        color: #8a8f94;
        font-weight: 600;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .home-hero__dl dd {
        color: #1d2024;
        font-weight: 400;
    }

    .home-hero__right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 12px;
    }

    .home-hero__eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #86868b;
        margin-bottom: 20px;
    }

    .home-hero__name {
        font-size: 96px;
        font-weight: 800;
        letter-spacing: -4px;
        line-height: 0.92;
        color: #1d2024;
        margin-bottom: 36px;
    }

    .home-hero__tagline {
        font-size: 17px;
        line-height: 1.7;
        color: #5a5f65;
        max-width: 560px;
        font-weight: 400;
    }

    .main-content {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .side-nav-container {
        position: relative;
        width: 264px;
        height: 480px;
        margin: 25px;
        isolation: isolate;
    }

    .side-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        height: 100%;
        gap: 12px;
    }

    .side-nav.fading {
        pointer-events: none;
    }

    .side-nav a {
        will-change: transform, opacity;
        transition: opacity 460ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .side-nav.fading a:nth-child(1) {
        opacity: 0;
        transform: scale(0.91) translateY(-14px);
        transition-delay: 0ms;
    }

    .side-nav.fading a:nth-child(2) {
        opacity: 0;
        transform: scale(0.91) translateY(-14px);
        transition-delay: 55ms;
    }

    .side-nav.fading a:nth-child(3) {
        opacity: 0;
        transform: scale(0.91) translateY(-14px);
        transition-delay: 110ms;
    }

    .side-nav-merged {
        position: absolute;
        inset: 0;
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.94) translateY(18px);
        will-change: transform, opacity;
        transition: opacity 580ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 580ms cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: 90ms;
        background-color: #f5f5f7;
        border-radius: 16px;
        border: 4px solid #f5f5f7;
        box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.8),
            5px 5px 10px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .side-nav-merged.active {
        opacity: 1;
        transform: scale(1) translateY(0);
        pointer-events: auto;
    }

    .merged-stripe {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 44px;
        background: rgba(0, 122, 255, 0.13);
        z-index: 0;
    }

    .side-nav-merged img {
        position: relative;
        z-index: 1;
        width: 70%;
        height: 70%;
        object-fit: cover;
        border-radius: 10px;
    }

    .merged-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        color: #fff;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
        white-space: nowrap;
        pointer-events: none;
    }

    .side-nav a {
        flex: 1;
        display: flex;
    }

    .side-nav .neu-btn {
        flex: 1;
        width: 264px;
        height: auto;
        margin: 0;
        border-radius: 16px;
    }

    .project-panel {
        position: relative;
        margin: 25px;
        background-color: #e8ecf2;
        border-radius: 24px;
        border: 6px solid #e8ecf2;
        box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.8),
            5px 5px 10px rgba(0, 0, 0, 0.25);
        width: 720px;
        height: 480px;
        overflow: hidden;
    }

    .project-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 800ms ease-in-out;
    }

    .slide.active {
        opacity: 1;
    }

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

    .slide-title {
        position: absolute;
        bottom: 12px;
        left: 16px;
        width: 50%;
        color: #fff;
        font-size: 48px;
        font-weight: 100;
        letter-spacing: 1px;
        line-height: 1;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    }

    .slide-title::first-letter {
        font-size: 1.35em;
        font-weight: 300;
    }

    .slide-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 3px solid rgba(245, 245, 247, 0.72);
        background: rgba(245, 245, 247, 0.72);
        backdrop-filter: blur(6px);
        box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.28),
                     2px  2px 5px rgba(0, 0, 0, 0.18);
        color: #73787d;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 240ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
        padding: 0;
    }

    .project-panel:hover .slide-arrow {
        opacity: 1;
    }

    .slide-arrow--prev { left: 10px; }
    .slide-arrow--next { right: 10px; }

    .slide-arrow:hover {
        color: #585b5f;
        box-shadow: -1px -1px 4px rgba(255, 255, 255, 0.22),
                     1px  1px 4px rgba(0, 0, 0, 0.24),
                    inset -2px -2px 4px rgba(255, 255, 255, 0.45),
                    inset  2px  2px 4px rgba(0, 0, 0, 0.18);
        transform: translateY(-50%) scale(1.08);
    }

    .slide-arrow:active {
        transform: translateY(-50%) scale(0.93);
    }

    .neu-btn{
        margin: 25px;
        background-color:#f5f5f7;
        color: #73787d;

        border-radius: 9999px;
        border: 4px solid #f5f5f7;

        box-shadow: -5px -5px 10px rgba(255, 255,255, 0.8),
            5px 5px 10px rgba(0,0,0,0.25);
    }

    .neu-btn:hover:hover {
        color:#585b5f;
        box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.6),
            1px 1px 5px rgba(0, 0, 0, 0.3),
            inset -2px -2px 5px rgba(255, 255, 255, 0.8),
            inset 2px 2px 4px rgba(0, 0, 0, 0.3);
    }


    .calc-btn{
        color: gray;
    }

    .calc-btn:hover{
        color: red;
    }

    .neu-btn-t2{
        margin: 25px;
        background-color:#f5f5f7;
        color: #73787d;

        border-radius: 9999px;
        border: 4px solid #f5f5f7;

        box-shadow: -5px -5px 10px rgba(0,0,0,0.25),
            5px 5px 10px rgba(255, 255,255, 0.8);
    }

    .neu-btn-t2:hover{
        color: rgb(211, 24, 24);
        box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.6),
            1px 1px 5px rgba(0, 0, 0, 0.3),
            inset -2px -2px 5px rgba(255, 255, 255, 0.8),
            inset 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    /* ── Scrollable pages (experience, resume, etc.) ── */
    .page-scrollable {
        height: auto;
        min-height: 100vh;
    }

    /* ── Home page — allow scrolling past the hero ── */
    .home-page {
        height: auto;
        min-height: 100vh;
    }

    .home-page .main-content {
        flex: none;
        padding: 24px 0 80px;
    }

    /* ── Home hero ── */
    .home-hero {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr) 240px;
        gap: 56px;
        padding: 48px 64px 56px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
        align-items: start;
    }

    .home-hero__left {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .home-hero__img-panel {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        background-color: #e8ecf2;
        border-radius: 50%;
        border: 6px solid #e8ecf2;
        box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.8),
                    5px 5px 10px rgba(0, 0, 0, 0.25);
        overflow: hidden;
    }

    .home-hero__img-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .home-hero__info-panel {
        background-color: #e8ecf2;
        border-radius: 24px;
        border: 6px solid #e8ecf2;
        box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.8),
                    5px 5px 10px rgba(0, 0, 0, 0.25);
        padding: 24px 28px;
    }

    .home-hero__dl {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        row-gap: 10px;
    }

    .home-hero__dl dt {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #86868b;
        line-height: 1.8;
    }

    .home-hero__dl dd {
        font-size: 13px;
        color: #3a3d40;
        font-weight: 400;
        line-height: 1.8;
    }

    .home-hero__eyebrow {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #8a8f94;
        margin-bottom: 20px;
    }

    .home-hero__name {
        font-size: 96px;
        font-weight: 800;
        letter-spacing: -4px;
        line-height: 0.92;
        color: #1d2024;
        margin-bottom: 32px;
    }

    .home-hero__tagline {
        font-size: 17px;
        line-height: 1.7;
        color: #5a5f65;
        max-width: 520px;
        font-weight: 400;
    }

    .home-hero__languages-panel {
        align-self: center;
        background-color: #e8ecf2;
        border: 6px solid #e8ecf2;
        border-radius: 24px;
        padding: 26px 24px;
        box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.8),
                    5px 5px 10px rgba(0, 0, 0, 0.25);
    }

    .home-hero__languages-eyebrow {
        margin-bottom: 8px;
        color: #8a8f94;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }

    .home-hero__languages-title {
        margin-bottom: 20px;
        color: #1d2024;
        font-size: 20px;
        line-height: 1.2;
    }

    .home-hero__languages-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .home-hero__languages-list li {
        padding: 11px 14px;
        border-radius: 12px;
        color: #3a3d40;
        font-size: 13px;
        font-weight: 700;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.10),
                    inset -2px -2px 5px rgba(255, 255, 255, 0.75);
    }

    /* ── Projects page ── */
    .projects-page {
        padding: 48px 56px 80px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .projects-stage {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 64px 80px;
        overflow: hidden;
        border-radius: 18px;
        width: 100%;
        box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.8),
                    5px 5px 10px rgba(0, 0, 0, 0.25);
    }

    /* Soft colour orbs that give the glass something to refract */
    .projects-stage__orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(64px);
        pointer-events: none;
        z-index: 0;
    }

    .projects-stage__orb--a {
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.36), transparent 70%);
        bottom: 20px;
        left: -60px;
    }

    .projects-stage__orb--b {
        width: 360px;
        height: 360px;
        background: radial-gradient(circle, rgba(20, 184, 166, 0.30), transparent 70%);
        bottom: 0px;
        right: -40px;
    }

    .projects-stage__title {
        position: relative;
        z-index: 1;
        font-size: 72px;
        font-weight: 800;
        letter-spacing: -3px;
        line-height: 1;
        color: #1d2024;
        margin-bottom: 16px;
    }

    .projects-stage__sub {
        position: relative;
        z-index: 1;
        font-size: 16px;
        color: #5a5f65;
        line-height: 1.6;
        margin-bottom: 40px;
    }

    /* ── Liquid glass button ── */
    @keyframes glass-shimmer {
        from { transform: translateX(-160%) skewX(-18deg); }
        to   { transform: translateX(340%)  skewX(-18deg); }
    }

    .liquid-glass-btn {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 15px 40px;
        border-radius: 9999px;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.1px;
        /* Dark text — glass is clear, page shows through */
        color: rgba(18, 18, 30, 0.88);
        text-decoration: none;
        cursor: pointer;
        overflow: hidden;

        /* Nearly clear — colour comes from backdrop, not the fill */
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(40px) saturate(300%) brightness(1.14) contrast(0.90);
        -webkit-backdrop-filter: blur(40px) saturate(300%) brightness(1.14) contrast(0.90);

        /* Crisp luminous rim */
        border: 1px solid rgba(255, 255, 255, 0.62);

        /* Drop shadow + ambient glow from orbs + inner edge lights */
        box-shadow:
            0 0  24px rgba(110, 90, 255, 0.22),
            0 8px 28px rgba(0,   0,   0,  0.11),
            inset 0  1.5px 0 rgba(255, 255, 255, 0.88),
            inset 0 -1px  0 rgba(255, 255, 255, 0.22),
            inset 1px  0  0 rgba(255, 255, 255, 0.10),
            inset -1px 0  0 rgba(255, 255, 255, 0.10);

        transition: background  320ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow  320ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform   400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Specular dome — curved bright highlight, like light on convex glass */
    .liquid-glass-btn::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 50%;
        border-radius: 9999px 9999px 50% 50% / 9999px 9999px 36% 36%;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.76) 0%,
            rgba(255, 255, 255, 0.18) 55%,
            transparent 100%
        );
        pointer-events: none;
        transition: opacity 320ms ease;
    }

    /* Shimmer sweep — fires on hover, sweeps once then stops */
    .liquid-glass-btn::after {
        content: '';
        position: absolute;
        top: -20%; left: 0;
        width: 42%; height: 140%;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.12) 25%,
            rgba(255, 255, 255, 0.52) 50%,
            rgba(255, 255, 255, 0.12) 75%,
            transparent
        );
        transform: translateX(-160%) skewX(-18deg);
        pointer-events: none;
    }

    .liquid-glass-btn:hover {
        background: rgba(255, 255, 255, 0.18);
        transform: translateY(-4px) scale(1.04);
        box-shadow:
            0 0  36px rgba(110,  90, 255, 0.36),
            0 14px 40px rgba(0,   0,   0,  0.14),
            inset 0  1.5px 0 rgba(255, 255, 255, 0.96),
            inset 0 -1px  0 rgba(255, 255, 255, 0.30),
            inset 1px  0  0 rgba(255, 255, 255, 0.16),
            inset -1px 0  0 rgba(255, 255, 255, 0.16);
    }

    .liquid-glass-btn:hover::after {
        animation: glass-shimmer 0.62s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .liquid-glass-btn:hover::before {
        opacity: 1.0;
    }

    .liquid-glass-btn:active {
        transform: translateY(-1px) scale(1.01);
        background: rgba(255, 255, 255, 0.07);
        box-shadow:
            0 0  14px rgba(110, 90, 255, 0.16),
            0 3px 10px rgba(0,   0,  0,  0.08),
            inset 0  1.5px 0 rgba(255, 255, 255, 0.70),
            inset 0 -1px  0 rgba(255, 255, 255, 0.15);
    }

    /* ── Project grid ── */
    .projects-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .project-card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        background: #f5f5f7;
        box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.8),
                    5px 5px 10px rgba(0, 0, 0, 0.25);
        min-height: 220px;
        transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
        cursor: default;
    }

    .project-card:hover {
        transform: translateY(-3px);
        box-shadow: -3px -3px 8px rgba(255, 255, 255, 0.9),
                    4px 4px 10px rgba(0, 0, 0, 0.28);
    }

    /* Media slot — left 1/3 */
    .project-card__media {
        flex: 0 0 33.33%;
        position: relative;
        z-index: 1;
        overflow: hidden;
        background: #d4d8e3;
    }

    .project-card__img,
    .project-card__video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .project-card__video {
        opacity: 0;
        transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .project-card:hover .project-card__video {
        opacity: 1;
    }

    /* Title area — right 2/3, centered */
    .project-card__body {
        flex: 1;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 36px;
    }

    .project-card__orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(52px);
        pointer-events: none;
        z-index: 0;
    }

    .project-card__orb--a {
        width: 260px;
        height: 260px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.30), transparent 70%);
        bottom: -40px;
        right: -20px;
    }

    .project-card__orb--b {
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(20, 184, 166, 0.24), transparent 70%);
        top: -30px;
        right: 30px;
    }

    .project-card__title {
        position: relative;
        z-index: 1;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: #1d2024;
        line-height: 1;
        text-align: center;
    }

    /* Resume page — neumorphic base with fixed ambient orbs from projects style */
    .resume-page {
        background-color: #e8ecf2;
        background-image:
            radial-gradient(ellipse 700px 600px at 15% 10%,  rgba(99,  102, 241, 0.16) 0%, transparent 65%),
            radial-gradient(ellipse 650px 550px at 88% 42%,  rgba(20,  184, 166, 0.13) 0%, transparent 62%),
            radial-gradient(ellipse 580px 500px at 42% 78%,  rgba(168,  85, 247, 0.11) 0%, transparent 58%);
        background-attachment: fixed;
    }

    .experience-hero {
        position: relative;
        width: 100%;
        height: 400px;
        overflow: visible;
        flex-shrink: 0;
    }

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

    .experience-hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 140px;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.28));
        pointer-events: none;
    }

    .experience-hero-title {
        position: absolute;
        bottom: 0;
        left: 56px;
        transform: translateY(50%);
        color: #fff;
        font-size: 108px;
        font-weight: 800;
        letter-spacing: -3px;
        line-height: 1;
        text-shadow: 0 4px 32px rgba(0, 0, 0, 0.3);
        z-index: 2;
        pointer-events: none;
    }

    .experience-content {
        padding-top: 140px;
        padding-left: 56px;
        padding-right: 56px;
        padding-bottom: 80px;
    }

    .exp-row {
        display: flex;
        flex-direction: row;
        gap: 64px;
        align-items: flex-start;
    }

    .exp-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .exp-heading {
        font-size: 28px;
        font-weight: 700;
        color: #3a3d40;
        letter-spacing: -0.5px;
    }

    .exp-body {
        font-size: 15px;
        font-weight: 400;
        color: #5a5f65;
        line-height: 1.75;
    }

    .exp-body--right {
        color: #5a5f65;
    }

    .exp-side-img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 18px;
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.7),
                    4px 4px 12px rgba(0, 0, 0, 0.18);
    }

    .exp-inline-img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 18px;
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.7),
                    4px 4px 12px rgba(0, 0, 0, 0.18);
    }

    /* ─────────────────────────────────────────────────────────
       RESUME PAGE
       ───────────────────────────────────────────────────────── */

    /* Hero (mirrors experience-hero but kept separate in case we
       want to diverge later) */
    .resume-hero {
        position: relative;
        width: 100%;
        height: 480px;
        overflow: visible;
        flex-shrink: 0;
    }

    .resume-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: brightness(0.88) saturate(1.1);
    }

    .resume-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            160deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.10) 40%,
            rgba(0, 0, 0, 0.52) 100%
        );
        pointer-events: none;
    }

    .resume-hero-title {
        position: absolute;
        bottom: 0;
        left: 56px;
        transform: translateY(50%);
        color: #fff;
        font-size: 100px;
        font-weight: 700;
        letter-spacing: -3.5px;
        line-height: 1;
        text-shadow: 0 2px 24px rgba(0, 0, 0, 0.22);
        z-index: 2;
        pointer-events: none;
        -webkit-font-smoothing: antialiased;
    }

    /* Intro: summary + contact */
    .resume-intro {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 48px;
        padding: 192px 64px 110px;
        align-items: start;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    .resume-intro__summary,
    .resume-intro__contact {
        background: #e8ecf2;
        border-radius: 24px;
        padding: 44px 48px;
        box-shadow: -6px -6px 18px rgba(255, 255, 255, 0.82),
                    6px 6px 18px rgba(0, 0, 0, 0.18);
        transition: box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .resume-intro__summary:hover,
    .resume-intro__contact:hover {
        box-shadow: -3px -3px 10px rgba(255, 255, 255, 0.9),
                    3px 3px 10px rgba(0, 0, 0, 0.22),
                    inset -2px -2px 6px rgba(255, 255, 255, 0.75),
                    inset 2px 2px 5px rgba(0, 0, 0, 0.1);
    }

    .resume-intro__eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #86868b;
        margin-bottom: 18px;
    }

    .resume-intro__body {
        font-size: 28px;
        line-height: 1.48;
        color: #1d1d1f;
        font-weight: 400;
        letter-spacing: -0.5px;
        max-width: 620px;
    }

    .contact-list {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 28px;
        row-gap: 14px;
        font-size: 15px;
        color: #1d1d1f;
    }

    .contact-list dt {
        color: #86868b;
        font-weight: 500;
    }

    .contact-list dd {
        color: #1d1d1f;
        font-weight: 400;
    }

    .contact-list a {
        color: #0071e3;
        transition: opacity 200ms ease;
    }

    .contact-list a:hover {
        opacity: 0.75;
    }

    /* ── Work History ── */
    .work-stage {
        padding: 120px 56px 80px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    .work-stage .section-title {
        margin-bottom: 16px;
    }

    .work-stage__caption {
        font-size: 15px;
        line-height: 1.65;
        color: #5a5f65;
        max-width: 600px;
        margin-bottom: 56px;
    }

    .work-stage__deck {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Role card — pill shaped, mirrors skill-chip style */
    .role-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 48px;
        background: #e8ecf2;
        border-radius: 9999px;
        padding: 28px 72px;
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.8),
                    4px 4px 10px rgba(0, 0, 0, 0.14);
        transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
        cursor: default;
    }

    .role-card:hover {
        transform: translateY(-2px);
        box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.9),
                    3px 3px 8px rgba(0, 0, 0, 0.18),
                    inset -1px -1px 3px rgba(255, 255, 255, 0.8),
                    inset 1px 1px 3px rgba(0, 0, 0, 0.12);
    }

    .role-card__head {
        flex: 0 0 240px;
        border-right: 1.5px solid rgba(0, 0, 0, 0.07);
        padding-right: 48px;
    }

    .role-card__right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .role-card__dates {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #8a8f94;
        margin-bottom: 8px;
    }

    .role-card__role {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.3px;
        color: #1d2024;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .role-card__company {
        font-size: 14px;
        font-weight: 500;
        color: #5a5f65;
        letter-spacing: -0.1px;
    }

    .role-card__bullets {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .role-card__bullets li {
        position: relative;
        padding-left: 18px;
        font-size: 14px;
        line-height: 1.6;
        color: #3a3d40;
    }

    .role-card__bullets li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.35;
    }

    .role-card__flag {
        font-size: 13px;
        font-weight: 600;
        color: #5a5f65;
        letter-spacing: 0.1px;
    }

    /* ── Skills ── */
    .skills-section {
        padding: 120px 56px 80px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .section-eyebrow {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #8a8f94;
        margin-bottom: 18px;
    }

    .section-title {
        font-size: 56px;
        font-weight: 800;
        letter-spacing: -2px;
        line-height: 1;
        color: #1d2024;
        margin-bottom: 56px;
    }

    .skills-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .skill-chip {
        padding: 14px 22px;
        background: #e8ecf2;
        color: #3a3d40;
        font-size: 15px;
        font-weight: 500;
        border-radius: 9999px;
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.8),
                    4px 4px 10px rgba(0, 0, 0, 0.14);
        transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
                    color 300ms ease;
        cursor: default;
    }

    .skill-chip:hover {
        transform: translateY(-2px);
        color: #1d2024;
        box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.9),
                    3px 3px 8px rgba(0, 0, 0, 0.18),
                    inset -1px -1px 3px rgba(255, 255, 255, 0.8),
                    inset 1px 1px 3px rgba(0, 0, 0, 0.12);
    }

    /* ── Education ── */
    .education-section {
        padding: 80px 56px 120px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .education-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .edu-card {
        background: #e8ecf2;
        border-radius: 20px;
        padding: 36px 40px 40px;
        box-shadow: -5px -5px 14px rgba(255, 255, 255, 0.82),
                    5px 5px 14px rgba(0, 0, 0, 0.16);
        transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .edu-card:hover {
        transform: translateY(-3px);
        box-shadow: -3px -3px 8px rgba(255, 255, 255, 0.9),
                    3px 3px 9px rgba(0, 0, 0, 0.2),
                    inset -1px -1px 4px rgba(255, 255, 255, 0.75),
                    inset 1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .edu-card__dates {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #8a8f94;
        margin-bottom: 12px;
    }

    .edu-card__school {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: #1d2024;
        margin-bottom: 4px;
    }

    .edu-card__meta {
        font-size: 15px;
        color: #5a5f65;
        margin-bottom: 20px;
    }

    .edu-card__bullets {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .edu-card__bullets li {
        position: relative;
        padding-left: 20px;
        font-size: 15px;
        line-height: 1.6;
        color: #3a3d40;
    }

    .edu-card__bullets li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 9px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.4;
    }

    /* ── Outro / CTA ── */
    .resume-outro {
        padding: 40px 56px 120px;
        text-align: center;
    }

    .resume-outro__lead {
        font-size: 30px;
        font-weight: 600;
        letter-spacing: -0.5px;
        color: #1d2024;
        margin-bottom: 28px;
    }

    .resume-outro__actions {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .resume-outro .neu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 52px;
        padding: 0 32px;
        width: auto;
        margin: 0;
        text-decoration: none;
    }

    /* ── Responsive ── */
    @media (max-width: 960px) {
        .home-hero {
            grid-template-columns: 240px minmax(0, 1fr);
            gap: 40px;
            padding-right: 32px;
            padding-left: 32px;
        }
        .home-hero__languages-panel {
            grid-column: 2;
            width: 100%;
        }
        .resume-intro {
            grid-template-columns: 1fr;
            gap: 48px;
            padding: 120px 32px 80px;
        }
        .resume-intro__body { font-size: 22px; }
        .work-stage {
            padding: 80px 32px 60px;
        }
        .role-card {
            flex-direction: column;
            align-items: flex-start;
            border-radius: 40px;
            padding: 28px 36px;
            gap: 20px;
        }
        .role-card__head {
            flex: none;
            border-right: none;
            border-bottom: 1.5px solid rgba(0, 0, 0, 0.07);
            padding-right: 0;
            padding-bottom: 16px;
            width: 100%;
        }
        .role-card__role { font-size: 16px; }
        .resume-hero-title { font-size: 72px; left: 32px; }
        .skills-section, .education-section { padding-left: 32px; padding-right: 32px; }
        .section-title { font-size: 40px; }
        .education-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 680px) {
        .home-hero {
            grid-template-columns: 1fr;
        }

        .home-hero__left,
        .home-hero__right,
        .home-hero__languages-panel {
            grid-column: 1;
        }

        .home-hero__left {
            width: 100%;
        }

        .home-hero__img-panel {
            width: min(280px, 100%);
            margin: 0 auto;
        }
    }

    /* ── Dark Mode Toggle ── */
    .dark-toggle {
        position: relative;
        width: 50px;
        height: 28px;
        border-radius: 9999px;
        background: #e8ecf2;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.14),
                    inset -2px -2px 5px rgba(255, 255, 255, 0.80);
        transition: background 350ms ease, box-shadow 350ms ease;
    }

    .dark-toggle__thumb {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #f5f5f7;
        box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.90),
                     2px  2px 5px rgba(0, 0, 0, 0.20);
        transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 350ms ease,
                    box-shadow 350ms ease;
    }

    body.dark .dark-toggle {
        background: #1e2230;
        box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.55),
                    inset -2px -2px 5px rgba(255, 255, 255, 0.04);
    }

    body.dark .dark-toggle__thumb {
        transform: translateX(22px);
        background: #3d4458;
        box-shadow: -1px -1px 3px rgba(255, 255, 255, 0.06),
                     2px  2px 6px rgba(0, 0, 0, 0.55);
    }

    /* ── Dark Mode Overrides ── */
    body.dark,
    body.dark.page-scrollable {
        background-color: #161920;
        color: #d4d8e4;
    }

    body.dark .site-header {
        background: rgba(20, 22, 28, 0.90);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    body.dark .site-logo,
    body.dark .header-nav a {
        color: #9298a8;
    }

    body.dark .header-nav a:hover {
        color: #d4d8e4;
    }

    body.dark .header-nav a::after {
        background: #d4d8e4;
    }

    /* Shared neumorphic base */
    body.dark .neu-btn,
    body.dark .home-hero__img-panel,
    body.dark .home-hero__info-panel,
    body.dark .home-hero__languages-panel,
    body.dark .project-panel,
    body.dark .role-card,
    body.dark .skill-chip,
    body.dark .edu-card,
    body.dark .resume-intro__summary,
    body.dark .resume-intro__contact {
        background: #1e2230;
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.04),
                     4px  4px 10px rgba(0, 0, 0, 0.50);
    }

    body.dark .neu-btn {
        color: #9298a8;
        border-color: #1e2230;
    }

    body.dark .neu-btn:hover {
        color: #d4d8e4;
        box-shadow: -1px -1px 4px rgba(255, 255, 255, 0.04),
                     1px  1px 4px rgba(0, 0, 0, 0.60),
                    inset -2px -2px 4px rgba(255, 255, 255, 0.03),
                    inset  2px  2px 4px rgba(0, 0, 0, 0.50);
    }

    body.dark .home-hero__dl dt { color: #6a7080; }
    body.dark .home-hero__dl dd { color: #b0b6c4; }

    body.dark .home-hero__eyebrow { color: #6a7080; }
    body.dark .home-hero__name    { color: #dde1ec; }
    body.dark .home-hero__tagline { color: #8a909e; }
    body.dark .home-hero__languages-eyebrow { color: #6a7080; }
    body.dark .home-hero__languages-title { color: #dde1ec; }
    body.dark .home-hero__languages-list li {
        color: #b0b6c4;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.45),
                    inset -2px -2px 5px rgba(255, 255, 255, 0.04);
    }

    body.dark .slide-arrow {
        background: rgba(30, 34, 48, 0.80);
        border-color: rgba(255, 255, 255, 0.10);
        box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.04),
                     3px  3px 7px rgba(0, 0, 0, 0.50);
        color: #9298a8;
    }

    body.dark .slide-arrow:hover {
        color: #d4d8e4;
        box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.03),
                    inset  2px  2px 4px rgba(0, 0, 0, 0.50);
    }

    /* Projects page */
    body.dark .projects-page { background-color: #161920; }

    body.dark .projects-stage {
        background: #1e2230;
        box-shadow: -5px -5px 14px rgba(255, 255, 255, 0.04),
                     5px  5px 14px rgba(0, 0, 0, 0.50);
    }

    body.dark .projects-stage__title { color: #dde1ec; }
    body.dark .projects-stage__sub   { color: #8a909e; }

    body.dark .project-card {
        background: #1e2230;
        box-shadow: -5px -5px 14px rgba(255, 255, 255, 0.04),
                     5px  5px 14px rgba(0, 0, 0, 0.50);
    }

    body.dark .project-card__media { background: #12141a; }

    body.dark .project-card__title { color: #d4d8e4; }

    /* Resume page */
    body.dark .resume-page { background-color: #161920; }

    body.dark .resume-hero-title    { color: #fff; }
    body.dark .resume-intro__eyebrow { color: #6a7080; }
    body.dark .resume-intro__body   { color: #9298a8; }

    body.dark .contact-list dt { color: #6a7080; }
    body.dark .contact-list dd,
    body.dark .contact-list a  { color: #b0b6c4; }

    body.dark .section-eyebrow { color: #6a7080; }
    body.dark .section-title   { color: #dde1ec; }
    body.dark .work-stage__caption { color: #8a909e; }

    body.dark .role-card__dates   { color: #6a7080; }
    body.dark .role-card__role    { color: #dde1ec; }
    body.dark .role-card__company { color: #8a909e; }
    body.dark .role-card__bullets li { color: #9298a8; }
    body.dark .role-card__flag    { color: #7c8494; }

    body.dark .role-card__head {
        border-right-color: rgba(255, 255, 255, 0.07);
    }

    body.dark .skill-chip { color: #9298a8; }

    body.dark .edu-card__dates  { color: #6a7080; }
    body.dark .edu-card__school { color: #dde1ec; }
    body.dark .edu-card__meta   { color: #8a909e; }
    body.dark .edu-card__bullets li { color: #9298a8; }

    body.dark .resume-outro__lead { color: #8a909e; }

    /* ── Contact Page ── */
    .contact-page {
        background-color: #e8ecf2;
    }

    .contact-wrap {
        min-height: calc(100vh - 64px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 56px 40px;
    }

    .contact-panel {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        padding: 88px 72px;
        width: 100%;
        max-width: 1180px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: #e8ecf2;
        box-shadow: -8px -8px 20px rgba(255, 255, 255, 0.82),
                     8px  8px 20px rgba(0, 0, 0, 0.18);
    }

    .contact-panel__orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        pointer-events: none;
        z-index: 0;
    }

    .contact-panel__orb--a {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.30), transparent 70%);
        top: -80px;
        left: -100px;
    }

    .contact-panel__orb--b {
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, rgba(20, 184, 166, 0.24), transparent 70%);
        bottom: -60px;
        right: -80px;
    }

    .contact-panel__eyebrow {
        position: relative;
        z-index: 1;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #8a8f94;
        margin-bottom: 14px;
    }

    .contact-panel__title {
        position: relative;
        z-index: 1;
        font-size: 88px;
        font-weight: 800;
        letter-spacing: -4px;
        line-height: 1;
        color: #1d2024;
        margin-bottom: 20px;
    }

    .contact-panel__sub {
        position: relative;
        z-index: 1;
        font-size: 16px;
        color: #5a5f65;
        line-height: 1.6;
        max-width: 480px;
        margin-bottom: 64px;
    }

    .contact-panel__grid {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .contact-primary-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 16px;
    }

    .contact-icon-row {
        display: flex;
        flex-direction: row;
        gap: 24px;
        justify-content: center;
        padding-top: 4px;
    }

    .contact-item {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        padding: 28px 26px;
        border-radius: 22px;
        /* near-transparent base — lets the blurred orb colors bleed through */
        background: rgba(255, 255, 255, 0.09);
        backdrop-filter: blur(48px) saturate(220%) brightness(1.08);
        -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.08);
        /* glass rim: slightly brighter on top-left, fades around */
        border: 1px solid rgba(255, 255, 255, 0.50);
        box-shadow:
            /* hard top specular rim */
            inset 0 1.5px 0 rgba(255, 255, 255, 0.88),
            /* left rim */
            inset 1px 0 0 rgba(255, 255, 255, 0.30),
            /* bottom inner shadow (depth) */
            inset 0 -1px 0 rgba(0, 0, 0, 0.06),
            /* soft outer drop shadow */
            0 6px 24px rgba(0, 0, 0, 0.09),
            0 1px 3px rgba(0, 0, 0, 0.05);
        text-align: left;
        text-decoration: none;
        overflow: hidden;
        transition: transform 380ms cubic-bezier(0.34, 1.4, 0.64, 1),
                    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
                    backdrop-filter 300ms ease;
    }

    /* bright specular band — the defining liquid glass highlight */
    .contact-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 48%;
        border-radius: 22px 22px 60% 60% / 22px 22px 36px 36px;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.52) 0%,
            rgba(255, 255, 255, 0.10) 60%,
            rgba(255, 255, 255, 0.00) 100%
        );
        pointer-events: none;
        z-index: 0;
    }

    /* subtle bottom reflection */
    .contact-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 22%;
        border-radius: 0 0 22px 22px;
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.00) 100%
        );
        pointer-events: none;
        z-index: 0;
    }

    .contact-item:hover {
        transform: translateY(-6px) scale(1.018);
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
            inset 1px 0 0 rgba(255, 255, 255, 0.40),
            inset 0 -1px 0 rgba(0, 0, 0, 0.07),
            0 20px 52px rgba(0, 0, 0, 0.13),
            0 4px 10px rgba(0, 0, 0, 0.07);
        background: rgba(255, 255, 255, 0.14);
    }

    .contact-item__label {
        position: relative;
        z-index: 1;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: rgba(80, 85, 95, 0.80);
    }

    .contact-item__value {
        position: relative;
        z-index: 1;
        font-size: 14px;
        font-weight: 600;
        color: rgba(20, 22, 28, 0.88);
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Icon inside primary contact buttons */
    .contact-item__icon {
        position: relative;
        z-index: 1;
        width: 22px;
        height: 22px;
        margin-bottom: 16px;
        color: rgba(60, 65, 75, 0.70);
        flex-shrink: 0;
    }

    /* Subtle brand tints on primary buttons */
    .contact-item--email {
        background: linear-gradient(135deg, rgba(99, 180, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%);
    }
    .contact-item--email::before {
        background: linear-gradient(175deg, rgba(180, 220, 255, 0.38) 0%, rgba(255, 255, 255, 0.00) 55%);
    }

    .contact-item--github {
        background: linear-gradient(135deg, rgba(120, 100, 200, 0.08) 0%, rgba(255, 255, 255, 0.06) 100%);
    }
    .contact-item--github::before {
        background: linear-gradient(175deg, rgba(200, 190, 255, 0.32) 0%, rgba(255, 255, 255, 0.00) 55%);
    }

    .contact-item--linkedin {
        background: linear-gradient(135deg, rgba(10, 102, 194, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
    }
    .contact-item--linkedin::before {
        background: linear-gradient(175deg, rgba(160, 210, 255, 0.38) 0%, rgba(255, 255, 255, 0.00) 55%);
    }

    /* ── Social icon circle buttons ── */
    .contact-icon-btn {
        position: relative;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.09);
        backdrop-filter: blur(48px) saturate(220%) brightness(1.08);
        -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.08);
        border: 1px solid rgba(255, 255, 255, 0.50);
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.88),
            inset 1px 0 0 rgba(255, 255, 255, 0.30),
            inset 0 -1px 0 rgba(0, 0, 0, 0.06),
            0 6px 24px rgba(0, 0, 0, 0.09),
            0 1px 3px rgba(0, 0, 0, 0.05);
        transition: transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1),
                    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
        text-decoration: none;
    }

    /* top sheen */
    .contact-icon-btn::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 50%;
        border-radius: 50% 50% 60% 60% / 50% 50% 36px 36px;
        background: linear-gradient(to bottom, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.00) 100%);
        pointer-events: none;
    }

    .contact-icon-btn svg {
        position: relative;
        z-index: 1;
        width: 20px;
        height: 20px;
    }

    .contact-icon-btn:hover {
        transform: translateY(-5px) scale(1.10);
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
            inset 1px 0 0 rgba(255, 255, 255, 0.40),
            inset 0 -1px 0 rgba(0, 0, 0, 0.07),
            0 16px 36px rgba(0, 0, 0, 0.14),
            0 4px 10px rgba(0, 0, 0, 0.07);
    }

    /* Brand tints */
    .contact-icon-btn--linkedin {
        background: linear-gradient(135deg, rgba(10, 102, 194, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
        color: rgba(10, 102, 194, 0.85);
    }
    .contact-icon-btn--linkedin::before {
        background: linear-gradient(to bottom, rgba(160, 210, 255, 0.38) 0%, rgba(255, 255, 255, 0.00) 100%);
    }

    .contact-icon-btn--instagram {
        background: linear-gradient(135deg, rgba(225, 48, 108, 0.12) 0%, rgba(255, 220, 128, 0.08) 100%);
        color: rgba(200, 50, 100, 0.85);
    }
    .contact-icon-btn--instagram::before {
        background: linear-gradient(to bottom, rgba(255, 180, 200, 0.38) 0%, rgba(255, 255, 255, 0.00) 100%);
    }

    .contact-icon-btn--x {
        background: linear-gradient(135deg, rgba(40, 40, 40, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
        color: rgba(30, 30, 35, 0.80);
    }
    .contact-icon-btn--x::before {
        background: linear-gradient(to bottom, rgba(220, 220, 225, 0.42) 0%, rgba(255, 255, 255, 0.00) 100%);
    }

    .contact-icon-btn--discord {
        background: linear-gradient(135deg, rgba(88, 101, 242, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
        color: rgba(88, 101, 242, 0.90);
    }
    .contact-icon-btn--discord::before {
        background: linear-gradient(to bottom, rgba(180, 185, 255, 0.38) 0%, rgba(255, 255, 255, 0.00) 100%);
    }

    /* Dark mode — contact page */
    body.dark .contact-page { background-color: #161920; }

    body.dark .contact-panel {
        background: #1e2230;
        box-shadow: -8px -8px 20px rgba(255, 255, 255, 0.04),
                     8px  8px 20px rgba(0, 0, 0, 0.55);
    }

    body.dark .contact-panel__eyebrow { color: #6a7080; }
    body.dark .contact-panel__title   { color: #dde1ec; }
    body.dark .contact-panel__sub     { color: #8a909e; }

    body.dark .contact-item {
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
            inset 1px 0 0 rgba(255, 255, 255, 0.08),
            inset 0 -1px 0 rgba(0, 0, 0, 0.30),
            0 8px 32px rgba(0, 0, 0, 0.40),
            0 2px 6px rgba(0, 0, 0, 0.25);
    }

    body.dark .contact-item:hover {
        background: rgba(255, 255, 255, 0.09);
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.30),
            inset 1px 0 0 rgba(255, 255, 255, 0.12),
            inset 0 -1px 0 rgba(0, 0, 0, 0.35),
            0 22px 56px rgba(0, 0, 0, 0.55),
            0 4px 12px rgba(0, 0, 0, 0.30);
    }

    body.dark .contact-item__label { color: rgba(160, 165, 185, 0.65); }
    body.dark .contact-item__value { color: rgba(220, 225, 240, 0.90); }
    body.dark .contact-item__icon  { color: rgba(180, 185, 200, 0.60); }

    body.dark .contact-icon-btn {
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow:
            inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
            inset 1px 0 0 rgba(255, 255, 255, 0.08),
            inset 0 -1px 0 rgba(0, 0, 0, 0.30),
            0 6px 24px rgba(0, 0, 0, 0.40);
    }
    body.dark .contact-icon-btn--linkedin {
        background: linear-gradient(135deg, rgba(10, 102, 194, 0.20) 0%, rgba(255, 255, 255, 0.04) 100%);
        color: rgba(100, 170, 255, 0.90);
    }
    body.dark .contact-icon-btn--instagram {
        background: linear-gradient(135deg, rgba(225, 48, 108, 0.18) 0%, rgba(255, 200, 80, 0.08) 100%);
        color: rgba(255, 100, 140, 0.90);
    }
    body.dark .contact-icon-btn--x {
        background: linear-gradient(135deg, rgba(200, 200, 200, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%);
        color: rgba(220, 220, 225, 0.85);
    }
    body.dark .contact-icon-btn--discord {
        background: linear-gradient(135deg, rgba(88, 101, 242, 0.22) 0%, rgba(255, 255, 255, 0.04) 100%);
        color: rgba(150, 160, 255, 0.90);
    }

    /* ── Project card → page transition cover ── */
    .page-transition-cover {
        position: fixed;
        z-index: 9999;
        background-size: cover;
        background-position: center;
        pointer-events: none;
        will-change: top, left, width, height;
    }

    /* ── Project Detail Pages ── */
    .proj-page {
        background-color: #e8ecf2;
    }

    .proj-content {
        max-width: 1100px;
        margin: 0 auto;
        padding: 56px 48px 100px;
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    .proj-back {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: #8a8f94;
        text-decoration: none;
        margin-bottom: 20px;
        transition: color 200ms ease;
    }

    .proj-back:hover { color: #1d2024; }

    .proj-hero { display: flex; flex-direction: column; }

    .proj-title {
        font-size: 80px;
        font-weight: 800;
        letter-spacing: -3.5px;
        line-height: 1;
        color: #1d2024;
        margin-bottom: 16px;
    }

    .proj-project-subtitle {
        margin-bottom: 10px;
        color: #30353a;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.4px;
    }

    .proj-subtitle {
        font-size: 17px;
        color: #5a5f65;
        line-height: 1.6;
        max-width: 620px;
    }

    /* Cover image */
    .proj-cover {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: -5px -5px 14px rgba(255, 255, 255, 0.82),
                     5px  5px 14px rgba(0, 0, 0, 0.18);
        aspect-ratio: 16 / 7;
    }

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

    /* Three stat blocks */
    .proj-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
    }

    .proj-stat {
        background: #e8ecf2;
        border-radius: 14px;
        padding: 32px 28px;
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.80),
                     4px  4px 10px rgba(0, 0, 0, 0.14);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .proj-stat__label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #8a8f94;
    }

    .proj-stat__value {
        font-size: 15px;
        font-weight: 600;
        color: #1d2024;
        line-height: 1.55;
    }

    /* Design process */
    .proj-process {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .proj-process__step {
        min-height: 0;
        padding: 18px 24px;
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    .proj-process__step > div {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .proj-process__number {
        flex: 0 0 48px;
        height: 48px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: #dce1e8;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.10),
                    inset -2px -2px 5px rgba(255, 255, 255, 0.75);
        color: #1d2024;
        font-size: 20px;
        font-weight: 800;
    }

    /* Gallery */
    .proj-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .proj-gallery__item {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .proj-gallery__item img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 14px;
        display: block;
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.80),
                     4px  4px 10px rgba(0, 0, 0, 0.14);
    }

    /* Performance result images match the height of their grid row on wide screens */
    .proj-results .proj-gallery__item,
    .proj-results .proj-gallery__item img {
        height: 100%;
    }

    .proj-results .proj-gallery__item img {
        aspect-ratio: auto;
    }

    .proj-gallery__caption {
        font-size: 14px;
        color: #73787d;
        line-height: 1.6;
        padding: 0 4px;
    }

    /* Project card <a> reset */
    a.project-card {
        text-decoration: none;
        cursor: pointer;
    }

    /* Dark mode — project detail */
    body.dark .proj-page { background-color: #161920; }

    body.dark .proj-back  { color: #6a7080; }
    body.dark .proj-back:hover { color: #dde1ec; }

    body.dark .proj-title    { color: #dde1ec; }
    body.dark .proj-project-subtitle { color: #c4c9d6; }
    body.dark .proj-subtitle { color: #8a909e; }

    body.dark .proj-cover {
        box-shadow: -5px -5px 14px rgba(255, 255, 255, 0.04),
                     5px  5px 14px rgba(0, 0, 0, 0.55);
    }

    body.dark .proj-stat {
        background: #1e2230;
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.04),
                     4px  4px 10px rgba(0, 0, 0, 0.50);
    }

    body.dark .proj-stat__label { color: #6a7080; }
    body.dark .proj-stat__value { color: #d4d8e4; }

    body.dark .proj-process__number {
        background: #191d28;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.45),
                    inset -2px -2px 5px rgba(255, 255, 255, 0.04);
        color: #dde1ec;
    }

    body.dark .proj-gallery__item img {
        box-shadow: -4px -4px 10px rgba(255, 255, 255, 0.04),
                     4px  4px 10px rgba(0, 0, 0, 0.50);
    }

    body.dark .proj-gallery__caption { color: #6a7080; }

    @media (max-width: 800px) {
        .proj-results {
            grid-template-columns: 1fr;
        }

        .proj-results .proj-gallery__item,
        .proj-results .proj-gallery__item img {
            height: auto;
        }

        .proj-results .proj-gallery__item img {
            aspect-ratio: 4 / 3;
        }
    }

/* ══════════════════════════════════════════════════════════════════════════
   MARATHON / GRAPHIC REALISM — approved 5A, 5B and 6A design layer
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --ink: #17191c;
    --paper: #eff0ec;
    --paper-band: #e6e8e1;
    --blue: #24c8ff;
    --blue-dark: #0f9ecf;
    --green: #c6f211;
    --green-dark: #7a9a00;
    --orange: #ff5500;
    --orange-dark: #d94100;
    --muted: #5a5f65;
    --mono-muted: #9ba098;
    --hairline: #d6d8d0;
    --panel: #fff;
    --shadow-panel: -5px -5px 12px rgba(255,255,255,.85),
                    5px 5px 12px rgba(0,0,0,.16);
    --shadow-large: -6px -6px 14px rgba(255,255,255,.85),
                    7px 7px 16px rgba(0,0,0,.32);
    --barcode: repeating-linear-gradient(
        90deg,
        var(--ink) 0 2px,
        transparent 2px 5px,
        var(--ink) 5px 8px,
        transparent 8px 12px,
        var(--ink) 12px 13px,
        transparent 13px 17px
    );
    --telemetry: repeating-linear-gradient(
        90deg,
        var(--ink) 0 2px,
        transparent 2px 5px,
        var(--ink) 5px 7px,
        transparent 7px 11px
    );
    --dots: radial-gradient(#c3c6bc 1.6px, transparent 1.6px);
}

.proj-page .section-band--viewport {
    box-sizing: border-box;
    width: calc(100vw - 26px);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw + 26px);
    padding-right: clamp(24px, 6.5vw, 88px);
    padding-left: clamp(24px, 6.5vw, 88px);
}

.proj-page .proj-results--compact .proj-stat:nth-child(1),
.proj-page .proj-results--compact .proj-stat:nth-child(2) {
    min-height: 240px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-large);
}

.proj-page .proj-results--compact .proj-stat:nth-child(1)::after,
.proj-page .proj-results--compact .proj-stat:nth-child(2)::after {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    background-image: radial-gradient(rgba(36,200,255,.25) 1.5px, transparent 1.5px);
    background-size: 11px 11px;
    pointer-events: none;
}

.proj-page .proj-results--compact .proj-stat:nth-child(1)::after {
    top: 0;
    right: 0;
}

.proj-page .proj-results--compact .proj-stat:nth-child(2)::after {
    bottom: 0;
    left: 0;
    background-image: radial-gradient(rgba(198,242,17,.25) 1.5px, transparent 1.5px);
}

.proj-page .proj-results--compact .proj-stat:nth-child(1) .proj-stat__label {
    color: var(--blue);
}

.proj-page .proj-results--compact .proj-stat:nth-child(2) .proj-stat__label {
    color: var(--green);
}

.proj-page .proj-results--compact .proj-stat:nth-child(1) .proj-stat__value,
.proj-page .proj-results--compact .proj-stat:nth-child(2) .proj-stat__value {
    position: relative;
    z-index: 1;
    color: rgba(239,240,236,.75);
}

body.dark .proj-page .proj-results--compact .proj-stat:nth-child(1),
body.dark .proj-page .proj-results--compact .proj-stat:nth-child(2) {
    background: #08090a;
}

.proj-page .proj-results--compact .proj-stat:nth-child(3),
.proj-page .proj-results--compact .proj-stat:nth-child(4) {
    padding-top: 28px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow-panel);
}

.proj-page .proj-results--compact .proj-stat:nth-child(3)::after,
.proj-page .proj-results--compact .proj-stat:nth-child(4)::after {
    content: none;
}

.proj-page .proj-results--compact .proj-stat:nth-child(3)::before,
.proj-page .proj-results--compact .proj-stat:nth-child(4)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--blue);
}

.proj-page .proj-results--compact .proj-stat:nth-child(4)::before {
    background: var(--green);
}

.proj-page .proj-results--compact .proj-stat:nth-child(3) .proj-stat__label {
    color: var(--blue);
}

.proj-page .proj-results--compact .proj-stat:nth-child(4) .proj-stat__label {
    color: var(--green);
}

.proj-page .proj-results--compact .proj-stat:nth-child(3) .proj-stat__value,
.proj-page .proj-results--compact .proj-stat:nth-child(4) .proj-stat__value {
    color: var(--muted);
}

.proj-page .proj-results--compact .proj-stat__label {
    font-size: clamp(15px, 1.15vw, 19px);
    line-height: 1.15;
}

body {
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Archivo', sans-serif;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

.site-header {
    min-height: 64px;
    padding: 0 40px;
    background: rgba(239, 240, 236, .94);
    border-bottom: 1px solid var(--ink);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #3a3d40;
    font-size: 17px;
    font-weight: 600;
}

.site-logo::before {
    content: 'AG—28';
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--blue);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.header-nav {
    align-items: center;
    gap: 28px;
}

.header-nav a {
    padding: 6px 0;
    color: var(--muted);
    font-size: 15px;
}

.header-nav a::after {
    bottom: 0;
    background: var(--blue);
}

.home-page .header-nav a[href="index.html"],
.projects-index .header-nav a[href="projects.html"],
.proj-page .header-nav a[href="projects.html"] {
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--ink);
    font-weight: 600;
}

.home-page .header-nav a[href="index.html"]::after,
.projects-index .header-nav a[href="projects.html"]::after,
.proj-page .header-nav a[href="projects.html"]::after {
    display: none;
}

.dark-toggle {
    width: 44px;
    height: 26px;
    background: var(--paper-band);
    border: 1px solid var(--ink);
    box-shadow: none;
}

.dark-toggle__thumb {
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background: var(--ink);
}

.system-band {
    display: flex;
    min-height: 35px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 40px;
    background: var(--paper-band);
    border-bottom: 1px solid var(--ink);
    color: var(--muted);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.system-band--home {
    padding-left: 66px;
}

.system-band__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.system-band__breadcrumb a {
    color: #565b5f;
    text-decoration: none;
}

.system-band__breadcrumb a:hover,
.system-band__breadcrumb a:focus-visible {
    color: var(--ink);
}

.system-band__breadcrumb a[aria-current="page"] {
    color: var(--ink);
    font-weight: 700;
}

.system-band__breadcrumb > span {
    color: #7a7f83;
}

.system-band__readout,
.system-band__status,
.system-band__status > span {
    display: flex;
    align-items: center;
    gap: 14px;
}

.system-barcode {
    display: inline-block;
    width: 130px;
    height: 16px;
    flex: 0 0 auto;
    background: var(--barcode);
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.status-dot--orange { background: var(--orange); }
.status-dot--green { background: var(--green); }
.status-dot--blue { background: var(--blue); }

.texture-band {
    width: 100%;
    height: 14px;
    flex: 0 0 auto;
    background: repeating-linear-gradient(
        90deg,
        var(--ink) 0 14px,
        var(--paper) 14px 28px
    );
}

.hud-corner {
    position: absolute;
    z-index: 8;
    width: 26px;
    height: 26px;
    pointer-events: none;
}

.hud-corner--tl {
    top: 14px;
    left: 14px;
    border-top: 2px solid var(--blue);
    border-left: 2px solid var(--blue);
    border-top-left-radius: 10px;
}

.hud-corner--tr {
    top: 14px;
    right: 14px;
    border-top: 2px solid var(--blue);
    border-right: 2px solid var(--blue);
    border-top-right-radius: 10px;
}

.hud-corner--bl {
    bottom: 14px;
    left: 14px;
    border-bottom: 2px solid var(--blue);
    border-left: 2px solid var(--blue);
    border-bottom-left-radius: 10px;
}

.hud-corner--br {
    right: 14px;
    bottom: 14px;
    border-right: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    border-bottom-right-radius: 10px;
}

/* Home — 5A */
.home-page {
    position: relative;
    background: var(--paper);
}

.home-page::before,
.proj-page::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 99px;
    bottom: 14px;
    left: 0;
    width: 26px;
    border-right: 1px solid var(--hairline);
    background: repeating-linear-gradient(
        180deg,
        #b9bcb2 0 1px,
        transparent 1px 18px
    );
    pointer-events: none;
}

.home-page::after {
    content: 'RVA // 37.54°N 77.43°W';
    position: absolute;
    z-index: 2;
    top: 340px;
    left: -56px;
    padding: 2px 10px;
    transform: rotate(-90deg);
    background: var(--paper);
    color: var(--mono-muted);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 3px;
    pointer-events: none;
}

.home-hero {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 1360px;
    grid-template-columns: 280px minmax(380px, 1fr) 260px;
    align-items: center;
    gap: 56px;
    margin: 0 auto;
    padding: 60px 56px 64px 88px;
}

.home-hero::before {
    content: '28';
    position: absolute;
    z-index: 0;
    top: 6px;
    right: 300px;
    color: transparent;
    font-size: 340px;
    font-weight: 900;
    letter-spacing: -14px;
    line-height: 1;
    -webkit-text-stroke: 1.5px var(--hairline);
    pointer-events: none;
}

.home-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    bottom: 18px;
    left: 570px;
    width: 300px;
    height: 76px;
    background-image: var(--dots);
    background-size: 12px 12px;
    pointer-events: none;
}

.home-hero__left,
.home-hero__right,
.home-hero__languages-panel {
    position: relative;
    z-index: 2;
}

.home-hero__left {
    width: 280px;
    gap: 24px;
}

.home-hero__left::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -22px;
    left: -22px;
    width: 324px;
    height: 324px;
    border: 1px solid #c3c6bc;
    border-radius: 50%;
    background: conic-gradient(
        var(--blue) 0 74deg,
        transparent 74deg 118deg,
        var(--green) 118deg 152deg,
        transparent 152deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}

.home-hero__left::after {
    content: none;
    display: none;
    position: absolute;
    z-index: 4;
    top: 256px;
    left: 50%;
    padding: 5px 14px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--ink);
    color: var(--green);
    font: 9.5px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
    white-space: nowrap;
}

.home-hero__img-panel {
    position: relative;
    z-index: 1;
    width: 280px;
    height: 280px;
    aspect-ratio: 1;
    background: var(--panel);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-panel);
}

.home-hero__img-panel::after {
    content: '';
    position: absolute;
    top: -28px;
    right: 34px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--orange);
}

.home-hero__info-panel {
    position: relative;
    overflow: hidden;
    padding: 22px 24px;
    border: 0;
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--shadow-panel);
}

.home-hero__info-panel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: repeating-linear-gradient(
        90deg,
        var(--blue) 0 18px,
        var(--ink) 18px 22px
    );
}

.home-hero__dl {
    margin-top: 6px;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 14px;
}

.home-hero__dl dt {
    align-self: center;
    color: transparent;
    font: 0 'IBM Plex Mono', monospace;
}

.home-hero__dl dt::after {
    color: var(--blue-dark);
    font: 10.5px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
}

.home-hero__dl dt:nth-of-type(1)::after { content: 'UNI'; }
.home-hero__dl dt:nth-of-type(2)::after { content: 'DEG'; }
.home-hero__dl dt:nth-of-type(3)::after { content: 'NET'; }

.home-hero__dl dd {
    min-width: 0;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 500;
}

.home-hero__dl dd:last-of-type {
    width: max-content;
    max-width: 100%;
    border-bottom: 2px solid var(--green);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.home-hero__right {
    align-self: center;
}

.home-hero__eyebrow {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 12px;
    margin-bottom: 18px;
    padding: 4px 12px;
    border-radius: 3px;
    background: var(--blue);
    color: var(--ink);
    font: 10.5px 'IBM Plex Mono', monospace;
    letter-spacing: 3px;
}

.home-hero__eyebrow span {
    position: absolute;
    left: 170px;
    color: var(--mono-muted);
    white-space: nowrap;
}

.home-hero__name {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    color: var(--ink);
    font-size: clamp(72px, 7vw, 96px);
    font-weight: 800;
    letter-spacing: -4px;
    line-height: .92;
}

.accent-period {
    color: var(--orange);
}

.home-hero__tagline {
    position: relative;
    z-index: 1;
    max-width: 540px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

.home-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.home-hero__chips span {
    padding: 6px 14px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    font: 10.5px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.home-hero__languages-panel {
    align-self: start;
    overflow: hidden;
    padding: 24px 26px;
    border: 0;
    border-radius: 16px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-large);
}

.home-hero__languages-panel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    background-image: radial-gradient(rgba(198,242,17,.4) 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    pointer-events: none;
}

.home-hero__languages-eyebrow {
    position: relative;
    color: var(--green);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 2.5px;
}

.home-hero__languages-title {
    position: relative;
    margin: 10px 0 18px;
    color: var(--paper);
    font-size: 19px;
    line-height: 1.2;
}

.home-hero__languages-list {
    position: relative;
    gap: 14px;
}

.home-hero__languages-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    padding: 0;
    color: var(--paper);
    font-size: 13.5px;
    box-shadow: none;
}

.home-hero__languages-list li small {
    color: #8b9083;
    font: 10px 'IBM Plex Mono', monospace;
}

.home-hero__languages-list li i {
    position: relative;
    display: block;
    height: 6px;
    grid-column: 1 / -1;
    overflow: hidden;
    border-radius: 3px;
    background: #2c2f33;
}

.home-hero__languages-list li i::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--skill);
    border-radius: inherit;
    background: var(--skill-color);
}

.toolkit-barcode {
    height: 14px;
    margin-top: 18px;
    background: repeating-linear-gradient(
        90deg,
        var(--green) 0 2px,
        transparent 2px 5px,
        var(--green) 5px 7px,
        transparent 7px 11px
    );
}

.toolkit-note {
    margin: 8px 0 0;
    color: #8b9083;
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.selected-work-band {
    display: flex;
    align-items: center;
    gap: 22px;
    justify-content: flex-start;
    min-height: 44px;
    padding: 12px 56px 12px 88px;
    background: var(--blue);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font: 600 11.5px 'IBM Plex Mono', monospace;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.selected-work-band > i {
    opacity: .45;
    font-style: normal;
}

.selected-work-band__arrows {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.selected-work-band__arrows b {
    width: 10px;
    height: 18px;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.selected-work-band__arrows b:nth-child(2) { opacity: .55; }
.selected-work-band__arrows b:nth-child(3) { opacity: .25; }

.home-page .main-content {
    position: relative;
    min-height: 548px;
    padding: 14px 0 40px;
}

.home-page .main-content::after {
    content: '';
    position: absolute;
    top: 40px;
    right: 40px;
    width: 110px;
    height: 190px;
    background-image: var(--dots);
    background-size: 12px 12px;
    pointer-events: none;
}

.side-nav-container,
.project-panel {
    position: relative;
    z-index: 1;
}

.side-nav .neu-btn {
    position: relative;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 20px;
    border: 0;
    border-radius: 16px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow-panel);
    font-weight: 600;
}

.side-nav .neu-btn::before {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    font: 600 11px 'IBM Plex Mono', monospace;
}

.side-nav a:nth-child(1) .neu-btn::before { content: '01'; background: var(--blue); }
.side-nav a:nth-child(2) .neu-btn::before { content: '02'; background: var(--green); }
.side-nav a:nth-child(3) .neu-btn::before { content: '03'; background: var(--orange); color: #fff; }

.side-nav .neu-btn::after {
    content: '→';
    margin-left: auto;
    font-size: 17px;
    font-weight: 700;
}

.side-nav .neu-btn:hover {
    transform: translateY(-2px);
    color: var(--ink);
    box-shadow: -3px -3px 9px rgba(255,255,255,.9),
                4px 4px 10px rgba(0,0,0,.2);
}

.side-nav-merged {
    border: 0;
    background: var(--panel);
    box-shadow: var(--shadow-large);
}

.merged-stripe {
    background: rgba(36,200,255,.25);
}

.project-panel {
    border: 0;
    background: var(--ink);
    box-shadow: var(--shadow-large);
}

.project-panel::after {
    content: '';
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    height: 105px;
    background: linear-gradient(transparent, rgba(23,25,28,.92));
    pointer-events: none;
}

.project-panel .slide-title {
    z-index: 5;
    bottom: 22px;
    left: 24px;
    width: auto;
    max-width: 60%;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1.2;
}

.project-panel .slide-title::first-letter {
    font-size: inherit;
    font-weight: inherit;
}

.project-panel__meta {
    position: absolute;
    z-index: 9;
    top: 22px;
    left: 50%;
    padding: 5px 14px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(23,25,28,.85);
    color: var(--blue);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.project-panel__progress {
    position: absolute;
    z-index: 9;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-panel__progress > span {
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.4);
}

.project-panel__progress > span.is-active {
    background: var(--blue);
}

.project-panel__progress b {
    margin-left: 6px;
    color: var(--blue);
    font: 11px 'IBM Plex Mono', monospace;
}

.slide-arrow {
    z-index: 10;
    border: 0;
    background: rgba(239,240,236,.92);
    color: var(--ink);
}

.slide-arrow--prev { left: 22px; }
.slide-arrow--next { right: 22px; background: var(--blue); }

/* Project index — 5B */
.projects-index {
    background: var(--paper);
}

.projects-page {
    width: 100%;
    max-width: 1360px;
    gap: 34px;
    padding: 36px 56px 48px;
}

.projects-stage {
    display: grid;
    min-height: 270px;
    grid-template-columns: 400px minmax(0, 1fr);
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 24px;
    background: none;
    text-align: left;
    box-shadow: var(--shadow-large);
}

.projects-stage__left,
.projects-stage__right {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 44px 36px;
}

.projects-stage__left {
    flex-direction: column;
    justify-content: space-between;
    background: var(--blue);
}

.projects-stage__right {
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 44px 42px;
    background: var(--ink);
    color: var(--paper);
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    overflow: visible;
}

.projects-stage__right::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(36,200,255,.16) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    pointer-events: none;
}

.projects-stage__index,
.projects-stage__filter {
    position: relative;
    z-index: 1;
    color: var(--ink);
    font: 10.5px 'IBM Plex Mono', monospace;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.projects-stage__numeral {
    position: absolute;
    right: -30px;
    bottom: -60px;
    color: transparent;
    font-size: 260px;
    font-weight: 900;
    letter-spacing: -10px;
    line-height: 1;
    -webkit-text-stroke: 2px rgba(23,25,28,.28);
    pointer-events: none;
}

.projects-stage__title {
    position: relative;
    margin: 0;
    color: var(--ink);
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -3px;
    line-height: .95;
}

.projects-stage__status {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 22px;
    display: flex;
    gap: 5px;
}

.projects-stage__status i,
.project-file-footer__dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.projects-stage__status i:nth-child(1),
.project-file-footer__dots i:nth-child(1) { background: var(--green); }
.projects-stage__status i:nth-child(2),
.project-file-footer__dots i:nth-child(2) { background: var(--blue); }
.projects-stage__status i:nth-child(3),
.project-file-footer__dots i:nth-child(3) { background: var(--orange); }

.projects-stage__sub {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0;
    color: rgba(239,240,236,.8);
    font-size: 17px;
    line-height: 1.7;
}

.projects-stage__actions {
    position: relative;
    z-index: 20;
    display: flex;
    gap: 12px;
}

.liquid-glass-btn {
    padding: 12px 24px;
    border: 0;
    background: var(--blue);
    color: var(--ink);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 14px;
    font-weight: 700;
}

.liquid-glass-btn::before,
.liquid-glass-btn::after {
    display: none;
}

.liquid-glass-btn:hover {
    background: var(--green);
    box-shadow: none;
    transform: translateY(-3px);
}

.projects-stage__filter {
    display: inline-flex;
    align-items: center;
}

.project-filter {
    position: relative;
    z-index: 30;
    padding: 0;
}

.project-filter__button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(239,240,236,.72);
    box-shadow: inset 0 0 0 1px rgba(239,240,236,.32);
    cursor: pointer;
    font: 700 12px 'IBM Plex Mono', monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.project-filter__button:hover,
.project-filter__button:focus-visible {
    color: var(--paper);
    box-shadow: inset 0 0 0 1px var(--blue), 0 0 18px rgba(36,200,255,.22);
}

.project-filter__menu {
    position: absolute;
    z-index: 999;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    min-width: 220px;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(239,240,236,.28);
    border-radius: 16px;
    background: rgba(23,25,28,.96);
    box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 0 0 1px rgba(36,200,255,.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.project-filter.is-open .project-filter__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.project-filter__menu button {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(239,240,236,.72);
    cursor: pointer;
    font: 700 11px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    text-align: left;
    text-transform: uppercase;
}

.project-filter__menu button:hover,
.project-filter__menu button:focus-visible,
.project-filter__menu button.is-active {
    background: var(--blue);
    color: var(--ink);
}

.projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.project-card {
    min-width: 0;
    min-height: 160px;
    height: 160px;
    border: 0;
    border-radius: 18px;
    background: var(--panel);
    box-shadow: var(--shadow-panel);
    cursor: pointer;
}

.project-card--hidden {
    display: none;
}

.project-card--filter-hidden {
    display: none;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: -4px -4px 12px rgba(255,255,255,.92),
                7px 7px 16px rgba(0,0,0,.2);
}

.project-card__orb {
    display: none;
}

.project-card__media {
    width: 240px;
    flex: 0 0 240px;
    background: var(--hairline);
}

.project-card__body {
    min-width: 0;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 18px 22px 16px;
    flex-direction: column;
}

.project-card__tag {
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--ink);
    font: 600 9.5px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.project-card:nth-child(3n + 1) .project-card__tag { background: var(--green); }
.project-card:nth-child(3n) .project-card__tag { background: var(--orange); color: #fff; }

.project-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.project-card__footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    color: var(--mono-muted);
    font: 9.5px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.project-card__footer b {
    color: var(--ink);
    font: 700 17px 'Archivo', sans-serif;
}

/* NeuralVector project — 6A */
.proj-page {
    position: relative;
    background: var(--paper);
}

.proj-page::before {
    top: 100px;
}

.proj-page .breadcrumb-bar {
    position: relative;
    display: flex;
    min-height: 36px;
    padding: 8px 188px 8px 40px;
    background: var(--paper-band);
    border-bottom: 1px solid var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.proj-page .breadcrumb-bar::after {
    content: 'FILE // 001';
    position: absolute;
    top: 50%;
    right: 40px;
    padding-left: 128px;
    transform: translateY(-50%);
    background-image: var(--barcode);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 110px 16px;
    color: var(--ink);
    white-space: nowrap;
}

.proj-page .breadcrumb__link {
    color: var(--muted);
}

.proj-page .breadcrumb__sep {
    margin: 0 14px;
    color: transparent;
    font-size: 0;
}

.proj-page .breadcrumb__sep::after {
    content: '▸';
    color: var(--blue);
    font-size: 16px;
}

.proj-page .breadcrumb__current {
    color: var(--ink);
}

.edge-ruler-tag {
    position: absolute;
    z-index: 3;
    top: 300px;
    left: -40px;
    padding: 2px 10px;
    transform: rotate(-90deg);
    background: var(--paper);
    color: var(--mono-muted);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.proj-content {
    width: 100%;
    max-width: 1360px;
    gap: 36px;
    padding: 0 88px 52px;
}

.proj-hero {
    position: relative;
    align-items: center;
    min-height: 340px;
    padding: 60px 32px 40px;
    text-align: center;
}

.proj-hero::before {
    content: '+';
    position: absolute;
    top: 62px;
    right: 40px;
    color: #c4c8cc;
    font: 13px 'IBM Plex Mono', monospace;
}

.proj-hero::after {
    content: '';
    position: absolute;
    right: 40px;
    bottom: 20px;
    width: 220px;
    height: 64px;
    background-image: var(--dots);
    background-size: 12px 12px;
    pointer-events: none;
}

.proj-hero__numeral {
    position: absolute;
    top: 40px;
    left: -40px;
    color: transparent;
    font-size: 220px;
    font-weight: 900;
    letter-spacing: -10px;
    line-height: 1;
    -webkit-text-stroke: 1.5px var(--hairline);
    pointer-events: none;
}

.proj-hero__meta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font: 10.5px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.proj-hero__meta > span:first-child {
    padding: 4px 12px;
    border-radius: 3px;
    background: var(--blue);
    letter-spacing: 3px;
}

.proj-hero__meta > span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
}

.proj-title {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    color: var(--ink);
    font-size: clamp(54px, 6.2vw, 76px);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: .95;
}

.proj-project-subtitle {
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
    color: var(--blue-dark);
    font: 12.5px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.proj-subtitle {
    position: relative;
    z-index: 1;
    max-width: 680px;
    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.7;
}

.telemetry-divider {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 510px;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
}

.telemetry-divider i {
    height: 12px;
    flex: 1;
    background: var(--telemetry);
}

.telemetry-divider span {
    color: var(--muted);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.proj-cover {
    position: relative;
    width: 100%;
    height: 420px;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--shadow-large);
}

.proj-cover::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(36,200,255,.05) 0 2px,
        transparent 2px 6px
    );
    pointer-events: none;
}

.proj-cover__figure {
    position: absolute;
    z-index: 6;
    top: 24px;
    left: 50%;
    padding: 5px 14px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(23,25,28,.85);
    color: var(--blue);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.proj-cover__reticle {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    transform: translate(-50%, -50%);
    border: 1.5px solid rgba(36,200,255,.75);
    border-radius: 50%;
}

.proj-cover__reticle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--blue);
}

.proj-cover__readout {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 34px 56px 12px;
    background: linear-gradient(transparent, rgba(23,25,28,.88));
    color: rgba(239,240,236,.7);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.proj-cover__readout > span:first-child { color: var(--blue); }
.proj-cover__readout > span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--orange);
}

.proj-page .proj-stats {
    gap: 22px;
}

.proj-page .proj-stat {
    position: relative;
    overflow: hidden;
    padding: 24px 26px;
    border: 0;
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--shadow-panel);
}

.proj-page .proj-content > .proj-stats:not(.proj-results) .proj-stat::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 7px;
    background: repeating-linear-gradient(
        -45deg,
        var(--blue) 0 10px,
        var(--panel) 10px 20px
    );
}

.proj-page .proj-content > .proj-stats:not(.proj-results) .proj-stat:nth-child(2)::before {
    background: repeating-linear-gradient(
        -45deg,
        var(--green) 0 10px,
        var(--panel) 10px 20px
    );
}

.proj-page .proj-content > .proj-stats:not(.proj-results) .proj-stat:nth-child(3)::before {
    background: repeating-linear-gradient(
        -45deg,
        var(--orange) 0 10px,
        var(--panel) 10px 20px
    );
}

.proj-page .proj-content > .proj-stats:not(.proj-results) .proj-stat {
    transition: transform 260ms cubic-bezier(.16, 1, .3, 1),
                box-shadow 260ms cubic-bezier(.16, 1, .3, 1);
}

.proj-page .proj-content > .proj-stats:not(.proj-results) .proj-stat:hover {
    transform: translateY(-4px);
    box-shadow: -6px -6px 14px rgba(255,255,255,.9),
                7px 7px 16px rgba(0,0,0,.2);
}

.proj-page .proj-content > .proj-stats:not(.proj-results) .proj-stat:nth-child(2)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 100px;
    background-image: radial-gradient(rgba(122,154,0,.22) 2px, transparent 2px);
    background-size: 16px 16px;
    pointer-events: none;
}

.proj-page .proj-content > .proj-stats:not(.proj-results) .proj-stat > * {
    position: relative;
    z-index: 1;
}

.proj-page .proj-content > .proj-stats:not(.proj-results) .proj-stat__label {
    font-size: 12px;
}

.proj-overview-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.proj-overview-metrics strong {
    display: flex;
    flex-direction: column;
    color: var(--ink);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}

.proj-overview-metrics small {
    margin-top: 5px;
    color: var(--orange-dark);
    font: 8px 'IBM Plex Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.proj-page .proj-stat__label {
    margin-top: 4px;
    color: var(--blue-dark);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 2.5px;
}

.proj-page .proj-stat:nth-child(2) .proj-stat__label { color: var(--green-dark); }
.proj-page .proj-stat:nth-child(3) .proj-stat__label { color: var(--orange-dark); }

.proj-page .proj-stat__value {
    color: #3a3d40;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.65;
}

.proj-page .tech-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.proj-page .tech-stack span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.proj-page .tech-stack span:not(:last-child)::after {
    content: '•';
    color: var(--green-dark);
    font-size: 20px;
    font-weight: 700;
    line-height: .6;
}

.section-band {
    margin-right: -88px;
    margin-left: -88px;
    padding: 12px 88px;
    background: var(--blue);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font: 600 11.5px 'IBM Plex Mono', monospace;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.proj-gallery {
    gap: 22px;
}

.proj-gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: var(--shadow-panel);
}

.proj-gallery__item img {
    border-radius: 18px;
    box-shadow: none;
}

.proj-content > .proj-gallery .proj-gallery__item::before,
.proj-results .proj-gallery__item::before {
    position: absolute;
    z-index: 4;
    bottom: 10px;
    left: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(23,25,28,.85);
    color: var(--blue);
    font: 9.5px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    pointer-events: none;
}

.proj-content > .proj-gallery .proj-gallery__item:nth-child(1)::before { content: 'FIG. 02 // SENSOR ARRAY'; }
.proj-content > .proj-gallery .proj-gallery__item:nth-child(2)::before { content: 'FIG. 03 // LIVE INFERENCE'; }
.proj-content > .proj-gallery--network {
    grid-template-columns: 1fr;
}

.proj-content > .proj-gallery--network .proj-gallery__item:nth-child(1)::before {
    content: 'FIG. 02 // NEURAL NETWORK';
}

.proj-content > .proj-gallery--network .proj-gallery__item img {
    aspect-ratio: auto;
    object-fit: contain;
}

.proj-results .proj-gallery__item:nth-child(1)::before { content: 'TEST RUN // 147'; }
.proj-results .proj-gallery__item:nth-child(4)::before { content: 'SENSOR FUSION // LIVE'; }

.proj-gallery__caption {
    padding: 0 4px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.65;
}

.proj-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ink);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
}

.proj-heading::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--hairline);
}

.proj-heading small {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.proj-heading--process {
    position: relative;
}

.proj-heading--process::before {
    content: '05';
    position: absolute;
    z-index: -1;
    top: -72px;
    right: 70px;
    color: transparent;
    font-size: 150px;
    font-weight: 900;
    -webkit-text-stroke: 1.5px var(--hairline);
}

.proj-process {
    position: relative;
    gap: 14px;
    padding-left: 36px;
}

.proj-process::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 2px;
    background: repeating-linear-gradient(
        180deg,
        var(--hairline) 0 7px,
        transparent 7px 13px
    );
}

.proj-page .proj-process__step {
    min-height: 112px;
    padding: 0;
    gap: 0;
    align-items: stretch;
    overflow: hidden;
}

.proj-process__number {
    position: relative;
    display: flex;
    width: 96px;
    height: auto;
    min-height: 112px;
    flex: 0 0 96px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 0;
    background: var(--ink);
    color: var(--ink);
    box-shadow: none;
    font: 600 0 'IBM Plex Mono', monospace;
}

.proj-process__number::before {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--blue);
    color: var(--ink);
    font-size: 12.5px;
}

.proj-process__number::after {
    color: var(--blue);
    font-size: 8.5px;
    letter-spacing: 2px;
}

.proj-process__step:nth-child(1) .proj-process__number::before { content: '01'; }
.proj-process__step:nth-child(1) .proj-process__number::after { content: 'PLAN'; }
.proj-process__step:nth-child(2) .proj-process__number::before { content: '02'; background: var(--green); }
.proj-process__step:nth-child(2) .proj-process__number::after { content: 'DETECT'; color: var(--green); }
.proj-process__step:nth-child(3) .proj-process__number::before { content: '03'; }
.proj-process__step:nth-child(3) .proj-process__number::after { content: 'FEATURE'; }
.proj-process__step:nth-child(4) .proj-process__number::before { content: '04'; background: var(--green); }
.proj-process__step:nth-child(4) .proj-process__number::after { content: 'CALIB'; color: var(--green); }
.proj-process__step:nth-child(5) .proj-process__number::before { content: '05'; }
.proj-process__step:nth-child(5) .proj-process__number::after { content: 'DATA'; }
.proj-process__step:nth-child(6) .proj-process__number::before { content: '06'; background: var(--green); }
.proj-process__step:nth-child(6) .proj-process__number::after { content: 'TRAIN'; color: var(--green); }
.proj-process__step:nth-child(7) .proj-process__number::before { content: '07'; }
.proj-process__step:nth-child(7) .proj-process__number::after { content: 'LIVE'; }
.proj-process__step:nth-child(8) .proj-process__number::before { content: '08'; background: var(--orange); color: #fff; }
.proj-process__step:nth-child(8) .proj-process__number::after { content: 'TEST'; color: var(--orange); }

.proj-process__step > div {
    position: relative;
    min-width: 0;
    flex: 1;
    justify-content: center;
    padding: 18px 120px 16px 24px;
}

.proj-process__step > div::before {
    position: absolute;
    top: 20px;
    right: 24px;
    color: var(--mono-muted);
    font: 9px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
}

.proj-process__step:nth-child(1) > div::before { content: 'SEQ 01/08'; }
.proj-process__step:nth-child(2) > div::before { content: 'SEQ 02/08'; }
.proj-process__step:nth-child(3) > div::before { content: 'SEQ 03/08'; }
.proj-process__step:nth-child(4) > div::before { content: 'SEQ 04/08'; }
.proj-process__step:nth-child(5) > div::before { content: 'SEQ 05/08'; }
.proj-process__step:nth-child(6) > div::before { content: 'SEQ 06/08'; }
.proj-process__step:nth-child(7) > div::before { content: 'SEQ 07/08'; }
.proj-process__step:nth-child(8) > div::before { content: 'SEQ 08/08'; }

.proj-process__step > div::after {
    content: '';
    width: 98px;
    height: 5px;
    margin-top: 4px;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        var(--step-color, var(--blue)) 0 var(--step-progress, 20%),
        #e2e4de var(--step-progress, 20%) 100%
    );
}

.proj-process__step:nth-child(1) { --step-progress: 12.5%; --step-color: var(--blue); }
.proj-process__step:nth-child(2) { --step-progress: 25%; --step-color: var(--green); }
.proj-process__step:nth-child(3) { --step-progress: 37.5%; --step-color: var(--blue); }
.proj-process__step:nth-child(4) { --step-progress: 50%; --step-color: var(--green); }
.proj-process__step:nth-child(5) { --step-progress: 62.5%; --step-color: var(--blue); }
.proj-process__step:nth-child(6) { --step-progress: 75%; --step-color: var(--green); }
.proj-process__step:nth-child(7) { --step-progress: 87.5%; --step-color: var(--blue); }
.proj-process__step:nth-child(8) { --step-progress: 100%; --step-color: var(--orange); }

.proj-process__step .proj-stat__label {
    margin: 0;
    color: var(--ink);
    font: 700 15px 'Archivo', sans-serif;
    letter-spacing: 0;
    text-transform: none;
}

.proj-process__step .proj-stat__value {
    color: var(--muted);
}

.proj-heading--results small {
    background: transparent;
    color: var(--ink);
}

.proj-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.proj-results .proj-gallery__item {
    min-height: 240px;
}

.proj-results .proj-gallery__item img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
}

.proj-results .proj-stat {
    min-height: 240px;
    justify-content: center;
}

.proj-results .proj-stat:nth-child(2),
.proj-results .proj-stat:nth-child(3) {
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-large);
}

.proj-results .proj-stat:nth-child(2)::after,
.proj-results .proj-stat:nth-child(3)::after {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    background-image: radial-gradient(rgba(36,200,255,.25) 1.5px, transparent 1.5px);
    background-size: 11px 11px;
    pointer-events: none;
}

.proj-results .proj-stat:nth-child(2)::after {
    top: 0;
    right: 0;
}

.proj-results .proj-stat:nth-child(3)::after {
    bottom: 0;
    left: 0;
    background-image: radial-gradient(rgba(198,242,17,.25) 1.5px, transparent 1.5px);
}

.proj-results .proj-stat:nth-child(2) .proj-stat__label { color: var(--blue); }
.proj-results .proj-stat:nth-child(3) .proj-stat__label { color: var(--green); }

.proj-results .proj-stat:nth-child(2) .proj-stat__value,
.proj-results .proj-stat:nth-child(3) .proj-stat__value {
    position: relative;
    z-index: 1;
    color: rgba(239,240,236,.75);
}

.proj-result__metric {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: var(--paper);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -2px;
}

.proj-result__metric small {
    color: #8b9083;
    font: 11px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.proj-results .proj-stat:nth-child(5),
.proj-results .proj-stat:nth-child(6) {
    padding-top: 28px;
}

.proj-results .proj-stat:nth-child(5)::before,
.proj-results .proj-stat:nth-child(6)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--blue);
}

.proj-results .proj-stat:nth-child(6)::before {
    background: var(--green);
}

.project-file-footer {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
    padding: 14px 88px;
    background: var(--paper-band);
    border-top: 1px solid var(--ink);
    color: var(--muted);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.project-file-footer__dots {
    display: flex;
    gap: 5px;
}

/* Prediction Market Model */
.prediction-page .proj-cover img {
    object-position: center;
}

.prediction-page .proj-cover::after {
    display: block;
    background: repeating-linear-gradient(
        180deg,
        rgba(239,240,236,.08) 0 2px,
        transparent 2px 6px
    );
}

.prediction-page .prediction-process .proj-process__step:nth-child(1) .proj-process__number::after {
    content: 'SCOPE';
}

.prediction-page .prediction-process .proj-process__step:nth-child(2) .proj-process__number::after {
    content: 'DATA';
}

.prediction-page .prediction-process .proj-process__step:nth-child(3) .proj-process__number::after {
    content: 'FEAT';
}

.prediction-page .prediction-process .proj-process__step:nth-child(4) .proj-process__number::after {
    content: 'TRAIN';
}

.prediction-page .prediction-process .proj-process__step:nth-child(5) .proj-process__number::after {
    content: 'TEST';
}

.prediction-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prediction-result__metric {
    color: var(--ink);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1;
}

.prediction-results .proj-stat:nth-child(1) .prediction-result__metric {
    color: var(--blue-dark);
}

.prediction-results .proj-stat:nth-child(2) .prediction-result__metric {
    color: var(--green-dark);
}

.prediction-results .proj-stat:nth-child(3) .prediction-result__metric {
    color: var(--orange-dark);
}

.prediction-results .proj-stat:nth-child(4) .prediction-result__metric {
    color: var(--blue-dark);
}

.prediction-project-results {
    position: relative;
    overflow: hidden;
    padding: 34px 30px 28px;
}

.prediction-project-results::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 7px;
    background: repeating-linear-gradient(
        -45deg,
        var(--orange) 0 10px,
        var(--panel) 10px 20px
    );
}

.prediction-project-results > * {
    position: relative;
    z-index: 1;
}

.prediction-chart-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.prediction-chart {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 240px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 20px;
    border-radius: 14px;
    overflow: hidden;
    background: #17191c;
    color: #eff0ec;
    text-align: center;
    box-shadow: inset 2px 2px 8px rgba(0,0,0,.55),
                inset -2px -2px 7px rgba(255,255,255,.04);
}

.prediction-chart::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 72px;
    background-image: radial-gradient(rgba(36,200,255,.16) 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    pointer-events: none;
}

.prediction-chart--ratio::before {
    top: auto;
    bottom: 0;
}

.prediction-chart--ratio::after {
    content: '%';
    position: absolute;
    top: -16px;
    right: -4px;
    color: transparent;
    font-size: 104px;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 1.5px rgba(36,200,255,.2);
    pointer-events: none;
}

.prediction-chart--profit::before {
    top: 18px;
    right: 18px;
    width: 92px;
    height: 14px;
    background: repeating-linear-gradient(
        90deg,
        var(--blue) 0 2px,
        transparent 2px 5px,
        var(--blue) 5px 8px,
        transparent 8px 12px
    );
    opacity: .5;
}

.prediction-chart--profit::after {
    content: '$';
    position: absolute;
    right: 18px;
    bottom: -26px;
    color: transparent;
    font-size: 150px;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 1.5px rgba(36,200,255,.2);
    pointer-events: none;
}

.prediction-chart__label {
    position: relative;
    z-index: 2;
    margin-bottom: 18px;
    color: var(--blue);
    font: 600 10px 'IBM Plex Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.prediction-donut {
    position: relative;
    display: grid;
    width: 128px;
    height: 128px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(
        var(--blue) 0 3deg,
        #34383b 3deg 177deg,
        var(--green) 177deg 180deg,
        #34383b 180deg 357deg,
        var(--orange) 357deg 360deg
    );
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.prediction-donut::before {
    content: '';
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #17191c;
}

.prediction-donut > span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
    color: #eff0ec;
    font-size: 21px;
    font-weight: 800;
}

.prediction-donut small,
.prediction-gauge small {
    margin-top: 4px;
    color: var(--mono-muted);
    font: 8px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.prediction-chart__legend {
    display: flex;
    gap: 18px;
    margin-top: 16px;
    color: var(--muted);
    font: 9px 'IBM Plex Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.prediction-chart__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.prediction-chart__legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
}

.prediction-chart__legend span:last-child i {
    background: var(--orange);
}

.prediction-calendar__visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

.prediction-calendar__tally {
    position: absolute;
    top: 0;
    right: calc(50% + 110px);
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.prediction-calendar__tally > span {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1;
}

.prediction-calendar__tally strong {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
}

.prediction-calendar__tally small {
    font-size: 11px;
    font-weight: 700;
}

.prediction-calendar__wins {
    color: var(--green);
}

.prediction-calendar__losses {
    color: var(--orange);
}

.prediction-calendar {
    display: grid;
    width: min(100%, 180px);
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
}

.prediction-game {
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--orange);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
                0 1px 3px rgba(0,0,0,.3);
    cursor: help;
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.prediction-game--win {
    background: var(--green);
}

.prediction-game--loss {
    background: var(--orange);
}

.prediction-game:hover,
.prediction-game:focus-visible {
    z-index: 3;
    outline: none;
    filter: brightness(1.18);
    transform: scale(1.38);
    box-shadow: 0 0 0 2px #17191c,
                0 0 0 3px var(--blue),
                0 4px 10px rgba(0,0,0,.4);
}

.prediction-calendar__tooltip {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    color: var(--mono-muted);
    font: 8.5px/1.45 'IBM Plex Mono', monospace;
    letter-spacing: .5px;
    text-align: center;
}

.prediction-chart--ratio {
    overflow: visible;
}

.prediction-chart--ratio.has-active-game {
    z-index: 5;
}

.prediction-calendar__detail {
    --detail-accent: var(--blue);
    --detail-wash: rgba(36,200,255,.08);
    --detail-glow: rgba(36,200,255,.16);
    --detail-scan: rgba(36,200,255,.1);
    position: absolute;
    z-index: 8;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: flex;
    width: auto;
    min-height: 112px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 18px;
    border: 1px solid var(--detail-accent);
    border-left: 5px solid var(--detail-accent);
    border-radius: 3px 12px 12px 3px;
    background:
        linear-gradient(110deg, var(--detail-wash), transparent 68%),
        rgba(18,21,24,.97);
    box-shadow: 0 14px 30px rgba(0,0,0,.42),
                0 0 20px var(--detail-glow),
                inset 0 0 24px var(--detail-wash);
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translateY(14px) scale(.97);
    transform-origin: bottom center;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1),
                border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.prediction-calendar__detail::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 4px,
        var(--detail-scan) 4px 5px
    );
    pointer-events: none;
    animation: prediction-detail-scan 2.6s linear infinite;
}

.prediction-calendar__detail > * {
    position: relative;
    z-index: 1;
}

.prediction-calendar__detail.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.prediction-calendar__detail span,
.prediction-calendar__detail small {
    color: var(--detail-accent);
    font: 600 8px 'IBM Plex Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.prediction-calendar__detail.is-win span,
.prediction-calendar__detail.is-win small {
    color: var(--green);
}

.prediction-calendar__detail.is-win {
    --detail-accent: var(--green);
    --detail-wash: rgba(198,242,17,.09);
    --detail-glow: rgba(198,242,17,.2);
    --detail-scan: rgba(198,242,17,.1);
    background:
        linear-gradient(110deg, rgba(198,242,17,.09), transparent 68%),
        rgba(8,18,14,.985);
}

.prediction-calendar__detail.is-loss span,
.prediction-calendar__detail.is-loss small {
    color: var(--orange);
}

.prediction-calendar__detail.is-loss {
    --detail-accent: var(--orange);
    --detail-wash: rgba(255,85,0,.1);
    --detail-glow: rgba(255,85,0,.2);
    --detail-scan: rgba(255,85,0,.1);
    background:
        linear-gradient(110deg, rgba(255,85,0,.1), transparent 68%),
        rgba(25,9,9,.985);
}

.prediction-calendar__detail strong {
    margin: 9px 0 7px;
    color: #eff0ec;
    font: 700 14px 'IBM Plex Mono', monospace;
}

@keyframes prediction-detail-scan {
    from { background-position: 0 0; }
    to { background-position: 0 15px; }
}

.prediction-calendar__ratio {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 8px;
}

.prediction-calendar__ratio strong {
    color: var(--green);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
}

.prediction-calendar__ratio small {
    color: var(--blue);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.prediction-profit__value {
    position: relative;
    z-index: 2;
    color: var(--green);
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    text-shadow: 0 0 14px rgba(198,242,17,.16);
}

.prediction-profit__value.is-seeded {
    animation: prediction-profit-pulse 320ms ease-out;
}

.prediction-profit__seed {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prediction-profit__seed-moving {
    display: inline-flex;
    align-items: center;
    margin-left: 14px;
}

.prediction-profit__seed-arrow {
    position: absolute;
    top: 7px;
    left: 3px;
    width: 2px;
    height: 8px;
    background: var(--blue);
    box-shadow: 0 0 7px rgba(36,200,255,.35);
    transform-origin: top;
}

.prediction-profit__seed-arrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -3px;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: translateY(1px) rotate(45deg);
}

.prediction-profit__seed-amount {
    color: var(--green);
    font: 700 18px 'IBM Plex Mono', monospace;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(198,242,17,.25);
}

.prediction-profit__seed-label {
    color: var(--mono-muted);
    font: 600 8px 'IBM Plex Mono', monospace;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.prediction-chart--profit.is-running .prediction-profit__seed-moving {
    animation: prediction-profit-seed-drop 2800ms linear forwards;
}

.prediction-chart--profit.is-running .prediction-profit__seed-arrow {
    animation: prediction-profit-arrow-grow 2800ms linear forwards;
}

.prediction-chart--profit.is-running .prediction-profit__seed-label {
    animation: prediction-profit-seed-label-fade 2800ms ease forwards;
}

.prediction-chart--profit.is-complete .prediction-profit__seed {
    display: none;
}

.prediction-profit__status {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    color: var(--mono-muted);
    font: 9px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.prediction-profit__multiplier {
    position: absolute;
    z-index: 3;
    bottom: 18px;
    left: 18px;
    color: var(--blue);
    font: 700 30px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 320ms ease, transform 320ms ease;
}

.prediction-profit__multiplier.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.prediction-profit__glyph {
    position: relative;
    display: inline-grid;
    width: .68em;
    height: 1em;
    place-items: center;
}

.prediction-profit__glyph--prefix {
    width: .5em;
}

.prediction-profit__glyph--prefix .prediction-profit__glyph-final {
    font-size: .62em;
}

.prediction-profit__glyph-final,
.prediction-profit__ascii-cloud {
    grid-area: 1 / 1;
}

.prediction-profit__glyph-final {
    opacity: 0;
    transform: scale(.7);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1.25);
}

.prediction-profit__ascii-cloud {
    width: 18px;
    height: 19px;
    overflow: hidden;
    color: var(--blue);
    font: 700 6px/6px 'IBM Plex Mono', monospace;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    opacity: .72;
    text-shadow: 0 0 5px rgba(36,200,255,.5);
    animation: prediction-ascii-flicker 180ms steps(2, end) infinite;
    transition: clip-path 220ms ease, opacity 180ms ease;
}

.prediction-profit__glyph.is-resolved .prediction-profit__glyph-final {
    opacity: 1;
    transform: scale(1);
}

.prediction-profit__glyph.is-resolved .prediction-profit__ascii-cloud {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
}

@keyframes prediction-profit-seed-drop {
    0%,
    64% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate3d(0, var(--seed-drop-distance, 108px), 0) scale(1);
    }
    84% {
        opacity: 0;
        transform: translate3d(0, var(--seed-drop-distance, 108px), 0) scale(.72);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, var(--seed-drop-distance, 108px), 0) scale(.72);
    }
}

@keyframes prediction-profit-arrow-grow {
    0%,
    64% {
        height: 8px;
        opacity: 1;
    }
    80% {
        height: calc(var(--seed-drop-distance, 108px) + 9px);
        opacity: 1;
    }
    84% {
        height: calc(var(--seed-drop-distance, 108px) + 9px);
        opacity: 0;
    }
    100% {
        height: calc(var(--seed-drop-distance, 108px) + 9px);
        opacity: 0;
    }
}

@keyframes prediction-ascii-flicker {
    0% {
        opacity: .45;
        transform: translateY(-1px);
    }
    100% {
        opacity: .9;
        transform: translateY(1px);
    }
}

@keyframes prediction-profit-seed-label-fade {
    0%,
    80% {
        opacity: 1;
    }
    90%,
    100% {
        opacity: 0;
    }
}

@keyframes prediction-profit-pulse {
    0% { transform: scale(.92); filter: brightness(1.45); }
    100% { transform: scale(1); filter: brightness(1); }
}

.prediction-profit__scale,
.prediction-gauge__scale {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
    color: var(--mono-muted);
    font: 8px 'IBM Plex Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.prediction-gauge {
    position: relative;
    width: 210px;
    height: 108px;
    overflow: hidden;
}

.prediction-gauge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 270deg,
        var(--blue) 0 7deg,
        #111518 7deg 12deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 21px), #000 calc(100% - 21px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 21px), #000 calc(100% - 21px));
    filter: drop-shadow(0 0 2px rgba(36,200,255,.42));
}

.prediction-gauge::after {
    --gauge-fill: 0deg;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 270deg,
        var(--green) 0 7deg,
        transparent 7deg 12deg
    );
    -webkit-mask:
        radial-gradient(farthest-side, transparent calc(100% - 21px), #000 calc(100% - 21px)),
        conic-gradient(from 270deg, #000 0 var(--gauge-fill), transparent var(--gauge-fill) 360deg);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(farthest-side, transparent calc(100% - 21px), #000 calc(100% - 21px)),
        conic-gradient(from 270deg, #000 0 var(--gauge-fill), transparent var(--gauge-fill) 360deg);
    mask-composite: intersect;
    filter: drop-shadow(0 0 2px rgba(198,242,17,.38));
}

.prediction-gauge i {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    width: 3px;
    height: 82px;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: 50% 100%;
    border-radius: 3px;
    background: #eff0ec;
    box-shadow: 0 0 8px rgba(239,240,236,.35);
}

.prediction-gauge i::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 15px;
    height: 15px;
    transform: translateX(-50%);
    border: 4px solid #17191c;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px rgba(198,242,17,.45);
}

.prediction-gauge__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    color: #eff0ec;
    font-size: 14px;
    font-weight: 800;
}

.prediction-gauge__value strong {
    color: var(--green);
    font-size: 24px;
    font-weight: 800;
}

.prediction-gauge__value small {
    color: var(--blue);
    font: 10px 'IBM Plex Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.prediction-chart--gauge {
    --gauge-end-angle: 144deg;
}

.prediction-chart--gauge.is-running .prediction-gauge::after {
    animation: prediction-gauge-fill 1800ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.prediction-chart--gauge.is-running .prediction-gauge i {
    animation: prediction-gauge-needle 1800ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.prediction-chart--gauge.is-complete .prediction-gauge::after {
    --gauge-fill: var(--gauge-end-angle);
}

.prediction-chart--gauge.is-complete .prediction-gauge i {
    transform: translateX(-50%) rotate(calc(-90deg + var(--gauge-end-angle)));
}

@property --gauge-fill {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes prediction-gauge-fill {
    from { --gauge-fill: 0deg; }
    to { --gauge-fill: var(--gauge-end-angle); }
}

@keyframes prediction-gauge-needle {
    from { transform: translateX(-50%) rotate(-90deg); }
    to { transform: translateX(-50%) rotate(calc(-90deg + var(--gauge-end-angle))); }
}

.prediction-gauge__scale {
    justify-content: center;
    width: 210px;
    margin-top: 16px;
}

/* Dark equivalents */
body.dark {
    --paper: #17191c;
    --paper-band: #202327;
    --ink: #eff0ec;
    --hairline: #34383b;
    --panel: #22262a;
    --muted: #aeb3b6;
    --mono-muted: #858b8d;
    --shadow-panel: -5px -5px 12px rgba(255,255,255,.035),
                    5px 5px 12px rgba(0,0,0,.46);
    --shadow-large: -6px -6px 14px rgba(255,255,255,.04),
                    7px 7px 16px rgba(0,0,0,.62);
    background: var(--paper);
    color: var(--ink);
}

body.dark .site-header {
    background: rgba(23,25,28,.94);
    border-bottom-color: var(--hairline);
}

body.dark .site-logo,
body.dark .header-nav a,
body.dark .home-hero__name,
body.dark .projects-stage__title,
body.dark .project-card__title,
body.dark .project-card__footer b,
body.dark .proj-title,
body.dark .proj-heading,
body.dark .proj-heading--results small {
    color: var(--ink);
}

body.dark .site-logo::before {
    background: #08090a;
}

body.dark .system-band,
body.dark .selected-work-band,
body.dark .section-band,
body.dark .project-file-footer,
body.dark .proj-page .breadcrumb-bar {
    border-color: var(--hairline);
}

body.dark .home-page::after,
body.dark .edge-ruler-tag {
    background: var(--paper);
}

body.dark .home-hero__dl dd,
body.dark .home-hero__chips span,
body.dark .side-nav .neu-btn,
body.dark .proj-page .breadcrumb__current {
    color: var(--ink);
}

body.dark .home-hero__info-panel,
body.dark .side-nav .neu-btn,
body.dark .side-nav-merged,
body.dark .project-card,
body.dark .proj-page .proj-stat {
    background: var(--panel);
}

body.dark .home-hero__languages-panel,
body.dark .projects-stage__right,
body.dark .project-panel,
body.dark .proj-results .proj-stat:nth-child(2),
body.dark .proj-results .proj-stat:nth-child(3),
body.dark .proj-process__number {
    background: #08090a;
}

body.dark .proj-page .proj-stat__value,
body.dark .proj-process__step .proj-stat__label {
    color: #d6dadc;
}

body.dark .proj-page .proj-content > .proj-stats:not(.proj-results) .proj-stat:hover {
    box-shadow: -6px -6px 14px rgba(255,255,255,.05),
                7px 7px 16px rgba(0,0,0,.62);
}

body.dark .project-card__tag,
body.dark .liquid-glass-btn,
body.dark .home-page .header-nav a[href="index.html"],
body.dark .projects-index .header-nav a[href="projects.html"],
body.dark .proj-page .header-nav a[href="projects.html"] {
    color: #17191c;
}

body.dark .texture-band {
    background: repeating-linear-gradient(
        90deg,
        #eff0ec 0 14px,
        #17191c 14px 28px
    );
}

/* Responsive degradation */
@media (max-width: 1180px) {
    .home-hero {
        grid-template-columns: 250px minmax(340px, 1fr) 230px;
        gap: 36px;
        padding-right: 40px;
        padding-left: 60px;
    }

    .home-hero__left,
    .home-hero__img-panel {
        width: 250px;
    }

    .home-hero__img-panel {
        height: 250px;
    }

    .home-hero__left::before {
        width: 294px;
        height: 294px;
    }

    .home-hero__left::after {
        top: 226px;
    }

    .home-hero__name {
        font-size: 78px;
    }

    .projects-stage {
        grid-template-columns: 340px minmax(0, 1fr);
    }

    .project-card__media {
        width: 190px;
        flex-basis: 190px;
    }
}

@media (max-width: 960px) {
    .system-band {
        gap: 20px;
        padding-right: 24px;
        padding-left: 24px;
    }

    .system-barcode {
        width: 90px;
    }

    .home-hero {
        grid-template-columns: 250px minmax(0, 1fr);
        padding-right: 32px;
        padding-left: 48px;
    }

    .home-hero__languages-panel {
        width: 100%;
        grid-column: 2;
    }

    .home-hero::before {
        right: 20px;
        font-size: 280px;
    }

    .home-hero::after {
        left: 470px;
    }

    .selected-work-band {
        padding-left: 48px;
    }

    .projects-stage {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .contact-panel {
        max-width: 920px;
        padding-right: 48px;
        padding-left: 48px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-card__media {
        width: 240px;
        flex-basis: 240px;
    }

    .proj-content {
        padding-right: 48px;
        padding-left: 64px;
    }

    .section-band {
        margin-right: -48px;
        margin-left: -64px;
        padding-right: 48px;
        padding-left: 64px;
    }

    .proj-page .proj-stats:not(.proj-results) {
        grid-template-columns: 1fr;
    }

    .proj-cover__readout > span:nth-child(2) {
        display: none;
    }
}

@media (max-width: 760px) {
    .site-header {
        padding: 0 20px;
    }

    .site-logo {
        font-size: 0;
    }

    .site-logo::before {
        font-size: 10px;
    }

    .header-nav {
        gap: 10px;
    }

    .header-nav a {
        display: none;
    }

    .header-nav a:first-child,
    .header-nav a:nth-child(2) {
        display: block;
        font-size: 13px;
    }

    .system-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .system-band__readout {
        width: 100%;
    }

    .system-band__readout .system-barcode {
        width: 64px;
    }

    .home-page::before,
    .home-page::after,
    .proj-page::before,
    .edge-ruler-tag {
        display: none;
    }

    .home-hero {
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 52px 24px;
    }

    .home-hero__left,
    .home-hero__right,
    .home-hero__languages-panel {
        width: 100%;
        grid-column: 1;
    }

    .home-hero__left {
        align-items: center;
    }

    .home-hero__info-panel {
        width: min(100%, 360px);
    }

    .home-hero::before {
        top: 300px;
        right: -20px;
        font-size: 240px;
    }

    .home-hero::after {
        display: none;
    }

    .home-hero__eyebrow span {
        display: none;
    }

    .home-hero__name {
        font-size: clamp(62px, 18vw, 82px);
    }

    .selected-work-band {
        flex-wrap: wrap;
        gap: 8px 14px;
        padding: 14px 24px;
        line-height: 1.5;
    }

    .selected-work-band__arrows {
        display: none;
    }

    .home-page .main-content {
        flex-direction: column;
    }

    .project-panel {
        width: calc(100vw - 48px);
        height: min(65vw, 480px);
        margin: 12px 24px 32px;
    }

    .side-nav-container {
        width: calc(100vw - 48px);
        height: 300px;
        margin: 24px;
    }

    .side-nav .neu-btn {
        width: 100%;
    }

    .projects-page {
        padding: 28px 24px 40px;
    }

    .projects-stage {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .contact-primary-row {
        grid-template-columns: 1fr;
    }

    .projects-stage__left {
        min-height: 220px;
    }

    .projects-stage__right {
        padding: 36px 28px;
    }

    .project-card {
        height: auto;
        min-height: 280px;
        flex-direction: column;
    }

    .project-card__media {
        width: 100%;
        min-height: 150px;
        flex-basis: 150px;
    }

    .proj-page .breadcrumb-bar {
        overflow: hidden;
        padding-right: 24px;
        padding-left: 24px;
        white-space: nowrap;
    }

    .proj-page .breadcrumb-bar::after {
        display: none;
    }

    .proj-content {
        gap: 28px;
        padding: 0 24px 40px;
    }

    .proj-hero {
        min-height: 0;
        padding: 48px 0 32px;
    }

    .proj-hero__numeral {
        left: -20px;
        font-size: 160px;
    }

    .proj-title {
        font-size: clamp(48px, 14vw, 68px);
    }

    .telemetry-divider i {
        display: none;
    }

    .telemetry-divider {
        justify-content: center;
    }

    .proj-cover {
        height: min(64vw, 420px);
        min-height: 250px;
    }

    .section-band {
        margin-right: -24px;
        margin-left: -24px;
        padding-right: 24px;
        padding-left: 24px;
    }

    .proj-page .section-band--viewport {
        width: 100vw;
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
        padding-right: 24px;
        padding-left: 24px;
    }

    .proj-gallery,
    .proj-results {
        grid-template-columns: 1fr;
    }

    .proj-heading {
        flex-wrap: wrap;
    }

    .proj-heading::after {
        order: 2;
        min-width: 40px;
    }

    .proj-process {
        padding-left: 0;
    }

    .proj-process::before {
        display: none;
    }

    .proj-process__number {
        width: 78px;
        flex-basis: 78px;
    }

    .proj-process__step > div {
        padding-right: 18px;
    }

    .proj-process__step > div::before {
        display: none;
    }

    .proj-results .proj-gallery__item {
        min-height: 260px;
    }

    .prediction-results {
        grid-template-columns: 1fr;
    }

    .prediction-chart-grid {
        grid-template-columns: 1fr;
    }

    .prediction-calendar__detail {
        top: auto;
        right: 14px;
        bottom: 14px;
        left: 14px;
        width: auto;
        transform: translateY(14px) scale(.97);
        transform-origin: bottom center;
    }

    .prediction-calendar__detail.is-active {
        transform: translateY(0) scale(1);
    }

    .project-file-footer {
        flex-wrap: wrap;
        gap: 12px;
        padding: 18px 24px;
    }
}