:root{
        --bg: #0E1117;           
        --text: #E6E9F0;        
        --tri-1: #3B82F6;       
        --tri-2: #1E40AF;       
        --pill-left:  #14B8A6;   
        --pill-right: #6366F1;   
        --pill-btm:   #F59E0B;   
        --pill-text:  #FFFFFF;   
        --ring: #60A5FA;         
    }

    .tri-nav{
        position:relative;
        width:min(640px, 92vw);
        aspect-ratio:1/1;
        background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
        background-size:20px 20px;
        border-radius:24px;

        /* triangle insets */
        --tri-top: 12%;
        --tri-left: 10%;
        --tri-right: 10%;
        --tri-bottom: 18%;

        --gap-left: clamp(26px, 6%, 70px);
        --gap-right: clamp(26px, 6%, 70px);
        --gap-bottom: clamp(8px, 6%, 24px);

        --base-y: calc(100% - var(--tri-bottom));
        --mid-side-y: calc((var(--tri-top) + var(--base-y)) / 2);
        --mid-left-x:  calc((50% + var(--tri-left)) / 2);
        --mid-right-x: calc((50% + (100% - var(--tri-right))) / 2);

        --side-raise: clamp(0px, 8%, 32px);

        --logo-shift: clamp(18%, 10vw, 35%);
        --logo-size: clamp(22%, 28vw, 28%);

        display: block; 
        margin-inline: auto;
        align-self: center; 
        place-self: center; 
        max-width: 100%; 
    }

    .triangle{
        position:absolute;
        inset: var(--tri-top) var(--tri-right) var(--tri-bottom) var(--tri-left);
        background: linear-gradient(180deg, var(--tri-1), var(--tri-2));
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        box-shadow: 0 24px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
        display:grid; place-items:center;
    }
    
    .triangle .logo{
        width: var(--logo-size);
        aspect-ratio: 1 / 1;
        display: grid; place-items: center;
        transform: translateY(var(--logo-shift)); 
        background: color-mix(in srgb, #ffffff 16%, var(--tri-1));
        color: #fff; font-weight: 800; letter-spacing: .5px; border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
        user-select: none;
    }
    .pill{
        position:absolute;
        display:flex; align-items:center; justify-content:center;
        width:min(58%, 380px);
        height:58px; border-radius:999px;
        color:var(--pill-text); text-decoration:none; font-weight:700; letter-spacing:.2px;
        filter:saturate(0.98);
        box-shadow:0 14px 28px rgba(0,0,0,.25);
        --lift: 0px;
        transform: var(--base, none) translateY(var(--lift)) scale(var(--scale, 1));
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    .tri-nav .pill:hover{ --lift:-4px; filter:saturate(1.08);--scale: 1.03;  color: var(--pill-text) }
    .pill:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--ring), 0 14px 28px rgba(0,0,0,.25); }
    .pill .inner{ display:inline-flex; align-items:center; gap:10px; transform: rotate(var(--counter, 0deg)); }
    .pill svg{ width:18px; height:18px; opacity:.95; }

    /* Left pill: anchor at midpoint of left edge, push outward perpendicular to edge
    Perpendicular to a 60° edge is 30° → cos(30)=0.866, sin(30)=0.5 */
    .pill.left{
        left: calc(var(--mid-left-x) - (var(--gap-left) * 0.866));
        top:  calc(var(--mid-side-y)  + (var(--gap-left) * 0.5)  - var(--side-raise) );
        --base: translate(-50%, -50%) rotate(-60deg);
        --counter: 0deg;
        background: linear-gradient(180deg, color-mix(in srgb, var(--pill-left) 92%, #fff 8%), var(--pill-left));
    }

    /* Right pill: symmetric math */
    .pill.right{
        left: calc(var(--mid-right-x) + (var(--gap-right) * 0.866));
        top:  calc(var(--mid-side-y)   + (var(--gap-right) * 0.5)  - var(--side-raise)  );
        --base: translate(-50%, -50%) rotate(60deg);
        --counter: 0deg;
        background: linear-gradient(180deg, color-mix(in srgb, var(--pill-right) 92%, #fff 8%), var(--pill-right));
    }

    /* Bottom pill: center it below the base line by the same gap */
    .pill.bottom{
        left: 50%;
        top:  calc(var(--base-y) + var(--gap-bottom) - var(--side-raise) + 15px);
        --base: translate(-50%, 0);
        --counter: 0deg;
        background: linear-gradient(180deg, color-mix(in srgb, var(--pill-btm) 92%, #fff 8%), var(--pill-btm)); 
    }


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

    .tri-nav .pill:hover{
        color: var(--pill-text);
        text-decoration: none; 
        filter: saturate(1.15) brightness(1.05);
        box-shadow: 0 18px 36px rgba(0,0,0,.32),
        0 0 0 3px color-mix(in srgb, var(--ring) 60%, transparent);
    }

    .tri-nav .pill:focus-visible{
        outline: 0;
        box-shadow: 0 0 0 3px var(--ring), 0 18px 36px rgba(0,0,0,.32);
    }