:root {




    --clr-accent: #0A84FF;
    --clr-accent-hover: #3AA0FF;
    --clr-white: #ffffff;






    --clr-mark: #1F7F91;




    --clr-text-muted: #a3aebf;




    --clr-sky-top: #070c16;
    --clr-sky-mid: #0a1322;
    --clr-sky-deep: #0d1e3a;
    --clr-ground: #070b14;




    --clr-body-text: #aeb9c9;
    --clr-body-lead: #ced9e7;
    --clr-body-heading: #f1f5fb;
    --clr-hairline: rgba(255, 255, 255, 0.08);





    --clr-refusal: #f0a58c;



















    --type-display: clamp(34px, 28px + 1.42vw, 56px);
    --type-statement: clamp(27px, 22px + 0.95vw, 40px);
    --type-lead: clamp(17px, 15px + 0.3vw, 21px);
    --type-body: 17px;
    --type-eyebrow: 13px;




















    --trim-display: -0.186em;

    --pad-side: clamp(20px, 3.4vw, 48px);
    --measure: 980px;

    --radius-lg: 10px;
    --radius-card: 16px;
    --radius-pill: 999px;
    --transition-fast: 0.1s;




    --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
}





html {
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

::selection {
    background: rgba(10, 132, 255, 0.34);
    color: var(--clr-white);
}




:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 3px;
}

* { box-sizing: border-box; }






[hidden] { display: none !important; }





html {
    background: var(--clr-ground);
}

body {
    margin: 0;
    background: transparent;
    color: var(--clr-body-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--type-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}









.page-sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:

        radial-gradient(ellipse 50% 22% at 85% 2%, rgba(94, 92, 230, 0.28), transparent 60%),



        radial-gradient(ellipse 130% 30% at 50% 102%, rgba(16, 110, 220, 0.34), transparent 72%),
        radial-gradient(ellipse 70% 18% at 22% 98%, rgba(70, 180, 255, 0.16), transparent 70%),
        linear-gradient(180deg,
            var(--clr-sky-top) 0%,
            var(--clr-sky-mid) 30%,
            #0b1930 74%,
            var(--clr-sky-deep) 100%);
}















.hero {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: grid;




























    grid-template-rows: 46fr auto minmax(var(--fold-air, 16px), 54fr) auto;








    grid-template-columns: 100%;













    padding-top: var(--fold-pad, 0px);
    justify-items: center;
    overflow: hidden;
}
























.hero-wall {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0 62%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 62%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
}







.hero-wall-grid {






    --wall-card: 190px;
    position: absolute;
    inset: -24% -14%;
    display: flex;



    justify-content: center;
    gap: clamp(10px, 1.2vw, 18px);
    transform: rotate(9deg);
    animation: hero-wall-drift 80s ease-in-out infinite alternate;
}

.hero-wall-col {



    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 18px);



    transform: translateY(var(--shift, 0px));
}









.hero-wall-card {
    position: relative;
    flex: none;
    aspect-ratio: 5 / 7;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.022) 70%);
}




.hero-wall-col:nth-child(odd) .hero-wall-card:nth-child(3n),
.hero-wall-col:nth-child(even) .hero-wall-card:nth-child(3n + 2) {
    background: linear-gradient(165deg, rgba(10, 132, 255, 0.17), rgba(255, 255, 255, 0.026) 72%);
}

.hero-wall-col:nth-child(3n) .hero-wall-card:nth-child(4n + 1) {
    background: linear-gradient(165deg, rgba(94, 92, 230, 0.17), rgba(255, 255, 255, 0.026) 72%);
}












.hero-wall-col:nth-child(odd) .hero-wall-card:nth-child(3n)::after,
.hero-wall-col:nth-child(even) .hero-wall-card:nth-child(3n + 2)::after,
.hero-wall-col:nth-child(3n) .hero-wall-card:nth-child(4n + 1)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 18px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.09);
    clip-path: path('M 3 1.7 L 13 7.3 Q 16 9 13 10.7 L 3 16.3 Q 0 18 0 14.5 L 0 3.5 Q 0 0 3 1.7 Z');
}





.hero-wall-col:nth-child(odd) .hero-wall-card:nth-child(3n)::before,
.hero-wall-col:nth-child(even) .hero-wall-card:nth-child(3n + 2)::before,
.hero-wall-col:nth-child(3n) .hero-wall-card:nth-child(4n + 1)::before {
    content: '';
    position: absolute;
    left: 11%;
    right: 11%;
    bottom: 11%;
    height: 14px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.145), rgba(255, 255, 255, 0.145)) left top / 72% 4px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09)) left bottom / 44% 4px no-repeat;
}



.hero-wall::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62% 55% at 50% 44%, rgba(7, 12, 22, 0.68), transparent 78%),
        linear-gradient(180deg, rgba(7, 12, 22, 0.60), rgba(7, 12, 22, 0.34) 42%, rgba(7, 12, 22, 0.60));
}




@keyframes hero-wall-drift {
    from { transform: rotate(9deg) translate3d(0, 0, 0); }
    to   { transform: rotate(9deg) translate3d(-2.5%, -3%, 0); }
}


.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 50% at 50% 45%, rgba(6, 10, 18, 0.45), transparent 75%);
    pointer-events: none;
    z-index: 1;
}











.hero-content {
    grid-row: 2;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
















    gap: 0;





    --hero-gap: 44px;











    --hero-lead-claim: 1.18;
    --hero-trim-claim: calc((0.708em - var(--hero-lead-claim) * 1em) / 2);












    --fold-measure: calc(var(--type-lead) * 30);




    max-width: min(90%, 760px);
    text-align: center;
    line-height: 1.2;


    transform-origin: top center;
}






















.hero-content.fitted {
    transform: scale(var(--fold-fit));
    margin-bottom: calc((var(--fold-fit) - 1) * var(--fold-natural));
}























.hero-title {









    font-size: calc(var(--type-display) * 0.86);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;



    margin: var(--trim-display) 0 var(--trim-display);
    overflow-wrap: anywhere;
    text-wrap: balance;
    background: linear-gradient(100deg, var(--clr-white), var(--clr-accent-hover));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;



    filter: drop-shadow(0 2px 14px rgba(4, 13, 27, 0.55));
}













.hero-claim {










    font-size: calc(var(--type-lead) * 1.1);
    font-weight: 400;

    line-height: var(--hero-lead-claim);



    color: var(--clr-body-lead);














    margin: calc(32px + var(--hero-trim-claim))
            0
            var(--hero-trim-claim);








    max-width: min(100%, var(--fold-measure));
    text-wrap: balance;
}









.hero-actions {


    align-self: stretch;







    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}














.hero-actions .hero-btn { flex-shrink: 0; }






.hero-actions .hero-btn.secondary { flex-basis: auto; }

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;







    flex: 0 1 196px;
    height: 50px;
    padding: 0 26px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast) ease,
                border-color var(--transition-fast) ease,
                box-shadow 0.25s ease,
                transform var(--transition-fast) ease;
}

.hero-btn-icon {
    width: 19px;
    height: 19px;
    flex: none;
}

.hero-btn:hover { transform: translateY(-1px); }
.hero-btn:active { transform: translateY(0); }

.hero-btn.primary {
    background: var(--clr-accent);
    color: var(--clr-white);
    box-shadow: 0 8px 26px rgba(10, 132, 255, 0.32);
}



.hero-btn.primary:focus-visible { outline-color: var(--clr-white); }

.hero-btn.primary:hover {
    background: var(--clr-accent-hover);
    box-shadow: 0 12px 34px rgba(10, 132, 255, 0.45);
}





.hero-btn.secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--clr-white);
}

.hero-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--clr-accent);
    text-decoration: none;
    cursor: pointer;
}

.hero-link:hover {
    color: var(--clr-accent-hover);
    text-decoration: underline;
}










.hero-nothing {
    max-width: 46ch;
    margin: 0;
    color: var(--clr-text-muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
























.hero-more {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    --trim: -0.346em;
    margin: calc(14px + var(--trim)) 0 var(--trim);
    transition: color var(--transition-fast) ease;
}

.hero-more:hover {
    color: var(--clr-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}
















.hero-components {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.28);
    text-underline-offset: 3px;
}

.hero-components:hover { text-decoration-color: currentColor; }


























.hero-fig {
    position: relative;





    --fig-dim: rgba(255, 255, 255, 0.22);

















    width: calc(min(100vw, var(--measure)) - var(--pad-side) * 2);















    line-height: 1.2;


    margin-top: var(--hero-gap);
}


























.hero-fig-stage {
    --fit-min: 884px;
    position: relative;
}






.hero-fig-canvas {
    position: relative;
    width: var(--fit-w, 884px);














    height: 268px;
    margin: 0 auto;
    text-align: left;
    transform-origin: top left;
    transform: scale(var(--fit-scale, 1));
}














.hero-fig-canvas::before {
    content: '';
    position: absolute;
    inset: -40px -30px;
    z-index: -1;
    background:
        radial-gradient(170px 140px at 158px 190px, rgba(6, 10, 18, 0.5), transparent 70%),
        radial-gradient(170px 140px at 472px 193px, rgba(6, 10, 18, 0.5), transparent 70%),
        radial-gradient(170px 140px at 786px 193px, rgba(6, 10, 18, 0.5), transparent 70%);
}













.hero-fig-say,
.hero-fig-stack-name {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-fig-say {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.55);
}









.hero-fig-stack {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    flex-direction: column;



    gap: 8px;
    width: 80px;
}





.hero-fig-stack-name {
    margin-bottom: 3px;
    color: var(--fig-dim);
    text-align: center;
}














.hero-fig-stack .hero-fig-blank {
    position: static;




    opacity: 0.8;








    transform: translateX(var(--dx, 0px)) rotate(var(--r, 0deg));
}



















.hero-fig-stack--more {
    width: 46px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
    mask-image: linear-gradient(90deg, transparent, #000 32px);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 60px 100%;
    mask-size: 60px 100%;
    -webkit-mask-clip: no-clip;
    mask-clip: no-clip;
}

.hero-fig-stack--more .hero-fig-blank {
    width: 80px;
    margin-left: -34px;
}




















.hero-fig-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 58px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}



.hero-fig-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 11px;
    align-items: start;
}














.hero-fig-step-num {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    border: 1px solid rgba(58, 160, 255, 0.42);
    border-radius: 6px;
    background: rgba(58, 160, 255, 0.14);
    color: rgba(198, 226, 255, 0.9);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.hero-fig-step-said { display: block; }







.hero-fig-step-title {
    color: var(--clr-white);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

.hero-fig-step-say {
    display: block;
    margin-top: 3px;
    color: var(--clr-text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}






@media (max-width: 720px) {
    .hero-fig-steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
















.hero-fig-app .scene-refresh {
    width: 18px;
    height: 18px;
    margin-right: -3px;
}

.hero-fig-app .scene-refresh::before { font-size: 12px; }

























.hero-fig-note {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    margin: 0;
    color: rgba(212, 169, 74, 0.92);
    font-size: 12.5px;
    font-style: italic;
    line-height: 1.35;
    text-align: right;
    transform: rotate(1deg);
}












.hero-fig-note--left {
    text-align: left;
    white-space: nowrap;
    transform: rotate(-1deg);
}





.hero-fig-note-star {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    font-style: normal;
}






.hero-fig-hand {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    fill: none;
    pointer-events: none;
}

.hero-fig-hand-run,
.hero-fig-hand-tip {
    stroke: rgba(212, 169, 74, 0.7);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}



















.hero-fig-flow {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    fill: none;
    pointer-events: none;
}

.hero-fig-flow-run {




    stroke: url(#hero-fig-beam);
    stroke-width: 1.3;
}





.hero-fig-flow .layer-link { stroke: rgba(255, 255, 255, 0.13); }









.hero-fig-flow-pulse {
    stroke: rgba(160, 210, 255, 0.9);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 14 86;
    filter: drop-shadow(0 0 3px rgba(58, 160, 255, 0.8));
    animation: hero-fig-pulse 2.6s linear infinite;
    animation-delay: var(--pd, 0s);
}

@keyframes hero-fig-pulse {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}









.hero-fig .hero-fig-app {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    display: flex;
    flex-direction: column;
    margin: 0;














    background: linear-gradient(170deg, rgba(13, 22, 40, 0.72), rgba(6, 11, 22, 0.8));
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 28px -12px rgba(2, 6, 14, 0.6);
}







.hero-fig-app .catalog-window-bar {
    gap: 3px;
    padding: 6px 8px;
}

.hero-fig-app .window-tab {
    padding: 2px 6px;
    font-size: 9px;
    line-height: 1.35;
}









.hero-fig-app .window-tab:not(.window-tab-active) {
    color: var(--fig-dim);
}







.hero-fig-board {
    flex: 1;
    overflow: hidden;
    padding: 10px;
    -webkit-mask-image: linear-gradient(#000 86%, transparent);
    mask-image: linear-gradient(#000 86%, transparent);
}

.hero-fig-board .catalog-board-title {
    margin: 0 0 4px;
    font-size: 8.5px;
    letter-spacing: 0.09em;
}








.hero-fig-board-row + .catalog-board-title { margin-top: 14px; }




.hero-fig-board-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}








.hero-fig-board .catalog-board-item {
    flex: 0 0 48px;
    max-width: 48px;
}

.hero-fig-board .catalog-board-path {
    margin-top: 3px;
    font-size: 7.5px;
}

.hero-fig-board .catalog-board-kind { font-size: 6.5px; }









.hero-fig-board .catalog-board-folder {
    background: rgba(255, 255, 255, 0.028);
}





.hero-fig-board .catalog-board-card::before { height: 9px; }








.hero-fig-board .catalog-board-card--bare::before { content: none; }

.hero-fig-board .catalog-board-card-play::after {
    transform: translate(-50%, -50%) scale(0.52);
}





.hero-fig-board .catalog-board-folder::before {
    transform: translate(-50%, -50%) scale(0.42);
}







.hero-fig-zones {
    flex: 1;
    display: flex;
    gap: 9px;
    min-height: 0;
    padding: 7px;
}












.hero-fig-col {
    flex: 0 0 88px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
}










.hero-fig .hero-fig-zone {
    gap: 0;
    justify-content: flex-start;
    min-height: 0;
    overflow: hidden;
    padding: 18px 6px 4px;
    border-radius: 8px;
}























.hero-fig-zone > .hero-fig-btn {
    position: absolute;
    top: 3px;
    right: 6px;
    padding-inline: 9px;
}



.hero-fig-doc-head {
    display: flex;
    margin-top: 3px;
}

.hero-fig-doc-head > .hero-fig-btn,
.hero-fig-run > .hero-fig-btn {
    flex: 1 1 auto;
    text-align: center;
}







.hero-fig-col > .hero-fig-zone { flex: 1 1 auto; }



.hero-fig-zone--data { flex: 1; }






.hero-fig-zone .study-zone-label {
    top: 5px;
    left: 7px;
    color: var(--clr-text-muted);
    font-size: 7.5px;
    letter-spacing: 0.09em;
}





.hero-fig-file {
    color: rgba(255, 255, 255, 0.5);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 8px;



    line-height: 1.4;
    white-space: nowrap;
}













.hero-fig-file--hot {
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.95);
}





.hero-fig-doc {
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0;
    transition: opacity 220ms ease;
}

















.hero-fig-doc-name {
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.34);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 7.5px;
    line-height: 1.45;
    white-space: nowrap;
}

.hero-fig-code {
    color: rgba(255, 255, 255, 0.42);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 7.5px;
    line-height: 1.45;
    white-space: pre;
}




.hero-fig-code--hot {
    background: rgba(58, 160, 255, 0.24);
    color: rgba(214, 232, 255, 0.95);
}






.hero-fig-run {
    display: flex;
    flex-direction: column;
    gap: 3px;
}





























.hero-fig-btn {
    flex: none;
    padding: 1px 5px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 1px 2px rgba(4, 12, 28, 0.35);
    color: rgba(255, 255, 255, 0.92);
    font-size: 7.5px;
    font-weight: 600;




    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 160ms ease, border-color 160ms ease,
                transform 160ms ease;
}

.hero-fig-down {
    background: rgba(58, 160, 255, 0.38);
    border-color: rgba(120, 185, 255, 0.55);
    transform: scale(0.9);
}



.hero-fig-bar {
    overflow: hidden;
    margin-top: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.hero-fig-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: rgba(58, 160, 255, 0.75);
}
















.hero-fig .hero-fig-bandbox {
    flex: none;
    padding: 2px 0;
}







.hero-fig-bandbox--held .data-strip-band { animation-play-state: paused; }




.hero-fig .data-pill {
    padding: 2px 7px;
    font-size: 8.5px;
}









.hero-fig .data-pill--inline {
    padding: 1px 2px;
    font-size: 7.5px;
}








.hero-fig .hero-fig-eqbox {
    flex: none;
    margin-top: 5px;
    height: 30px;



    padding: 4px 3px;
    border-radius: 8px;
}















.hero-fig-eqbox .data-eq-line {
    flex: 1;
    justify-content: flex-end;
    overflow: hidden;







    font-size: 9.5px;
    word-spacing: -4px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6px);
    mask-image: linear-gradient(90deg, transparent, #000 6px);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.hero-fig .hero-fig-plotbox {
    flex: none;
    margin-top: 5px;








    height: 94px;
    padding: 5px 7px;
    border-radius: 8px;
}


.hero-fig .hero-fig-plotbox polyline { stroke-width: 1.6; }













.hero-btn.pending {
    animation: hero-pending 0.42s ease;
}

@keyframes hero-pending {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    45%      { transform: translateX(3px); }
    70%      { transform: translateX(-2px); }
}
































.panel-eyebrow {
    margin: 0 0 16px;
    color: var(--clr-accent);
    font-size: var(--type-eyebrow);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}












.panel-statement {
    margin: 0 0 30px;
    max-width: 20ch;
    color: var(--clr-body-heading);
    font-size: var(--type-statement);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.panel-lead {
    margin: 0 0 38px;



    max-width: 34ch;
    font-size: var(--type-lead);
    line-height: 1.5;
    color: var(--clr-body-lead);
}













.page {
    position: relative;


    z-index: 1;
    width: min(100%, var(--measure));
    margin: 0 auto;
    padding: clamp(110px, 16vh, 170px) var(--pad-side) 48px;
}












































.page-entry-block {
    display: flex;
    flex-direction: column;


    align-items: flex-start;
    gap: 14px;
    margin-bottom: clamp(18px, 2.4vh, 26px);
}





.page-entry-block > .hero-more,
.page-entry-block > .hero-nothing {
    margin: var(--trim) 0;
}

.page-entry {
    display: flex;


    width: max-content;
    max-width: 100%;



    flex-wrap: wrap;
    gap: 10px;
}






.page-entry-btn {
    flex: none;
    height: 40px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 14px;
}





.page-entry-video {
    gap: 8px;
    padding-left: 18px;
}





.page-entry-more {
    display: block;
    text-align: left;
}






.page-entry-nothing {
    --trim: calc((0.708em - 1.5em) / 2);
    text-align: left;
}




.page-head { padding-bottom: clamp(34px, 5vh, 54px); }






.page-head:has(+ .page-entry-block) { padding-bottom: clamp(14px, 2vh, 20px); }

.page-head .panel-statement {
    max-width: none;
    margin-bottom: 18px;
}

.page-head .panel-lead {
    max-width: none;
    margin-bottom: 0;
}



.page-updated {
    margin: 14px 0 0;
    color: var(--clr-text-muted);
    font-size: 14px;
}



.page-section {
    padding: clamp(34px, 5vh, 54px) 0;
    border-top: 1px solid var(--clr-hairline);
}

.page-section h2 {
    margin: 0 0 18px;
    color: var(--clr-body-heading);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.015em;
}




















.page-section > .hero-fig { margin-top: 0; }
.page-section .hero-fig-step { margin: 0; }



.page-section p { margin: 0 0 16px; }
.page-section p:last-child { margin-bottom: 0; }

.page-section ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.page-section li { margin: 4px 0; }






.page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px 48px;
    margin: 26px 0 16px;
}

.page-grid h3 {
    margin: 0 0 10px;
    color: var(--clr-body-heading);
    font-size: 18px;
    font-weight: 600;
}

.page-grid p { margin: 0; }





.page-section > h3 {
    margin: 30px 0 10px;
    color: var(--clr-body-heading);
    font-size: 18px;
    font-weight: 600;
}
















.pill {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;


    line-height: 1.4;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.pill--doing {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: var(--clr-white);
}

.pill--dup {
    border-color: rgba(94, 92, 230, 0.55);
    background: rgba(94, 92, 230, 0.30);
    color: #cfceff;
}

.pill--remote {
    border-color: rgba(48, 209, 88, 0.50);
    background: rgba(48, 209, 88, 0.22);
    color: #b9f2c6;
}



.pill--priv {
    background: #D4A94A;
    color: #0B1526;
}











.page-section > h3 .pill {
    font-size: 11px;
    padding: 4px 11px;
}






.heading-ai {
    display: flex;
    align-items: center;


    gap: 6px;
}

.heading-ai-mark {
    width: 21px;
    height: 21px;


    flex: none;
    fill: var(--clr-accent);




    filter: drop-shadow(0 0 7px rgba(10, 132, 255, 0.75));
}

















.catalog-window {
    position: relative;
    overflow: hidden;
    margin: 26px 0 22px;
    border: 1px solid var(--clr-hairline);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.025);
}





.catalog-window-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--clr-hairline);
}

.window-tab {
    padding: 4px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--clr-text-muted);
    font-size: 11.5px;
    text-transform: capitalize;
    white-space: nowrap;
    transition: color 350ms ease, background-color 350ms ease, border-color 350ms ease;
}

.window-tab-active {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: var(--clr-white);
}

.catalog-board {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 18px;
}

.catalog-board-title {
    margin: 0 0 10px;
    color: var(--clr-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}




.catalog-board-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}



.catalog-board-item {
    flex: 0 0 126px;
    max-width: 126px;
}





.catalog-board-card {
    position: relative;
    aspect-ratio: 5 / 7;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.022) 70%);
    transition: opacity 300ms ease;
}

.catalog-board-card--blue {
    background: linear-gradient(165deg, rgba(10, 132, 255, 0.17), rgba(255, 255, 255, 0.026) 72%);
}

.catalog-board-card--violet {
    background: linear-gradient(165deg, rgba(94, 92, 230, 0.17), rgba(255, 255, 255, 0.026) 72%);
}

.catalog-board-card::before {
    content: '';
    position: absolute;
    left: 11%;
    right: 11%;
    bottom: 11%;
    height: 14px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.145), rgba(255, 255, 255, 0.145)) left top / 72% 4px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09)) left bottom / 44% 4px no-repeat;
}




.catalog-board-card-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 19px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.30);
    clip-path: path('M 3 1.7 L 13 7.3 Q 16 9 13 10.7 L 3 16.3 Q 0 18 0 14.5 L 0 3.5 Q 0 0 3 1.7 Z');
}



.catalog-fly {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    margin: 0;
    pointer-events: none;
    will-change: transform, opacity;
}








.study-zones {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr;
    gap: 12px;
    padding: 14px;
}

.study-zone-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.study-zone-left .study-zone { flex: 1; }

.study-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    min-height: 88px;
    padding: 30px 14px 14px;
    border: 1px solid var(--clr-hairline);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}



.study-zone-label {
    position: absolute;
    top: 10px;
    left: 14px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}






.study-line {
    height: 5px;
    width: var(--w, 60%);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.10);
    transition: width 500ms ease;
}

.study-line--dim { background: rgba(255, 255, 255, 0.055); }



.study-zone-plot svg {
    flex: 1;
    width: 100%;
    min-height: 120px;
    fill: none;
}



.study-zone-plot line {
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}



.study-zone-plot polyline {
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}


@media (max-width: 640px) {
    .study-zones { grid-template-columns: 1fr; }
}



.catalog-board-path {
    margin: 6px 0 0;
    overflow: hidden;
    color: var(--clr-text-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 10.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}






.catalog-board-folder {
    position: relative;
    aspect-ratio: 5 / 7;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
}



.catalog-board-kind {
    position: absolute;
    top: 7%;
    left: 10%;
    color: rgba(255, 255, 255, 0.35);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}





.catalog-item-collapsing {
    max-width: 0 !important;
    min-width: 0 !important;
    margin-right: -16px;
    opacity: 0;
    overflow: hidden;
    transition: max-width 800ms ease, margin-right 800ms ease, opacity 400ms ease;
}

.catalog-item-spacer {
    max-width: 0;
    min-width: 0;
    margin-right: -16px;
    transition: max-width 800ms ease, margin-right 800ms ease;
}

.catalog-item-spacer.catalog-item-grown {
    max-width: 126px;
    margin-right: 0;
}





.catalog-row-overflow::before {
    content: '';
    position: absolute;
    top: 0;
    right: -18px;
    bottom: 0;
    z-index: 2;
    width: 56px;
    background: linear-gradient(90deg, transparent, rgba(9, 15, 27, 0.85));
    pointer-events: none;
}

.catalog-row-overflow::after {
    content: '›';
    position: absolute;
    top: 50%;
    right: -12px;
    z-index: 3;
    transform: translateY(-64%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 22px;
    pointer-events: none;
}















.catalog-board-folder::before {
    content: '';
    position: absolute;
    top: 46%;
    left: 50%;
    width: 52px;
    height: 40px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.13);
    clip-path: path('M 0 3 Q 0 0 3 0 L 17 0 Q 20 0 20 3 L 20 4.5 Q 20 7 22.5 7 L 49 7 Q 52 7 52 10 L 52 37 Q 52 40 49 40 L 3 40 Q 0 40 0 37 Z');
}

.catalog-board-ghost {
    position: absolute;
    left: 26%;
    right: 26%;
    bottom: 16%;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
}






















































.data-funnel-scene {


    --fit-min: 620px;
    position: relative;






    margin-bottom: 8px;
}

.data-funnel {
    position: relative;
    width: var(--fit-w, 620px);
    height: 342px;
    margin: 0 auto;
    transform-origin: top left;
    transform: scale(var(--fit-scale, 1));
}

.data-funnel-walls {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}




.data-funnel-wall {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
}












.data-funnel-exit {
    fill: none;
    stroke: rgba(58, 160, 255, 0.75);
    stroke-width: 1.6;
    stroke-dasharray: 6 5;
    stroke-linecap: butt;
}

.data-funnel-jamb {
    fill: none;
    stroke: rgba(58, 160, 255, 0.75);
    stroke-width: 1.6;
    stroke-linecap: round;
}









.data-funnel-say {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--y);
    transform: translateY(-50%);
    text-align: center;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.data-funnel-say--files { color: rgba(255, 255, 255, 0.45); }



.data-funnel-say--detect { color: rgba(96, 175, 255, 0.88); }






.funnel-file,
.hero-fig-plate {
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%) rotate(var(--r));








    gap: 2px;
    padding: 5px 8px;
    border-radius: 6px;
}

.funnel-file .layer-item-kind,
.hero-fig-plate .layer-item-kind { font-size: 8px; }
.funnel-file .layer-item-name,
.hero-fig-plate .layer-item-name { font-size: 9.5px; }






.data-strip {
    position: relative;
    overflow: hidden;
    margin: 26px 0 22px;
}

.data-strip-window {
    overflow: hidden;
    padding: 4px 0 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.data-strip-band {
    display: flex;
    gap: 8px;
    width: max-content;
    animation: data-strip-scroll 20s linear infinite;
}



@keyframes data-strip-scroll {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.data-pill {
    flex: none;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: linear-gradient(165deg, rgba(10, 132, 255, 0.14), rgba(255, 255, 255, 0.03));
    color: var(--clr-text-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    white-space: nowrap;
}











.data-strip-targets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
}



@media (max-width: 960px) {
    .data-strip-targets { grid-template-columns: 1fr; }
}

.data-target {
    position: relative;
}

.data-target-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 86px;
    padding: 10px 14px;
    border: 1px solid var(--clr-hairline);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}

.data-target-plot svg {
    width: 100%;
    height: 100%;
    fill: none;
}

.data-target-plot line {
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
}





.data-target-plot polyline {
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}





.data-eq-line {
    display: flex;
    align-items: center;
    color: var(--clr-text-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 14px;
    white-space: pre;
}







.data-target-code {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
    padding-right: 8px;
    padding-left: 8px;
}

.data-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 19px;
}

.data-code-num {
    flex: none;
    width: 12px;
    color: rgba(255, 255, 255, 0.25);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11px;
    text-align: right;
}







.data-code-text {
    display: flex;
    align-items: center;
    color: var(--clr-text-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    white-space: pre;
}

.data-target-caption {
    margin: 8px 0 0;
    color: var(--clr-text-muted);
    font-size: 12.5px;
    text-align: center;
}


.data-pill--inline {
    padding: 2px 10px;
    font-size: 11.5px;
}



.data-flyer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: inline-flex;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.data-flyer .data-pill {
    border-color: rgba(255, 255, 255, 0.30);
    color: var(--clr-white);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}




.scene-cursor {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    width: 15px;
    height: 15px;
    fill: var(--clr-white);
    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 1;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.scene-cursor--shown {
    left: auto;
    right: -6px;
    top: auto;
    bottom: -12px;
    opacity: 1;
}


.scene-caret {
    color: rgba(255, 255, 255, 0.55);
    animation: scene-caret-blink 1s steps(2, start) infinite;
}

@keyframes scene-caret-blink {
    50% { opacity: 0; }
}





.scene-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--clr-text-muted);
    cursor: pointer;
    transition: color 200ms ease, background-color 200ms ease;
}

.scene-refresh::before {
    content: '↻';
    font-size: 14px;
    line-height: 1;
}

.scene-refresh:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--clr-white);
}



.scene-refresh--float {
    position: absolute;
    top: 4px;
    right: 0;
    z-index: 4;
    margin: 0;
    background: rgba(9, 15, 27, 0.75);
}































.layer-scene {



    --fit-min: 780px;
    position: relative;
    margin: 26px 0 22px;



}








.layer-compare {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    --cut: 52%;


    width: var(--fit-w, 100%);
    transform-origin: top left;
    transform: scale(var(--fit-scale, 1));
}

.layer-pane {
    position: relative;
    padding-top: 148px;

}

.layer-pane--before {
    clip-path: inset(0 calc(100% - var(--cut)) 0 0);
}

.layer-pane--after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--cut));
}




.layer-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}




.layer-head-title {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}





.layer-plate {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 76%;
    min-width: fit-content;

    padding: 10px 0;
    border: 1px solid rgba(58, 160, 255, 0.40);
    border-radius: 999px;
    background: rgba(10, 132, 255, 0.10);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}



.layer-plate-name {
    color: var(--clr-white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}






.layer-plate-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
}





.layer-plate-row {
    display: contents;
}



















.layer-priv {
    position: absolute;
    top: 107px;
    left: 0;
    right: 0;
    z-index: 1;

    border-top: 1px dashed #2C4A6E;
}



















.layer-priv-chip {
    position: absolute;
    left: calc((100% + var(--cut)) / 2);
    top: 0;
    transform: translate(-50%, -50%);
    padding: 4px 11px;




    font-size: 11.5px;
    letter-spacing: 0.06em;
}







.layer-arms {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    pointer-events: none;
}

.layer-arm {
    stroke: rgba(58, 160, 255, 0.45);
    stroke-width: 1.5;
    stroke-linecap: round;
}







.layer-link {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1.5;
    stroke-linecap: round;
}





.layer-tie {
    stroke: rgba(58, 160, 255, 0.30);
    stroke-width: 1.5;
    stroke-linecap: round;
}





.layer-dup {
    stroke: rgba(94, 92, 230, 0.70);
    stroke-width: 1.5;
    stroke-linecap: round;
}




.layer-remote {
    stroke: rgba(48, 209, 88, 0.55);
    stroke-width: 1.5;
    stroke-linecap: round;
}












.layer-desk {
    position: relative;
    height: 400px;
}










.layer-row {
    position: absolute;
    left: 8px;
    right: 8px;
    top: var(--y);
    height: 68px;
    border-radius: 12px;
    transform: translateY(-50%);
}




.layer-pane--before .layer-row {
    border: 1px solid rgba(255, 255, 255, 0.09);
}






.layer-pane--after .layer-row {
    border: 1px dashed rgba(255, 255, 255, 0.13);
    opacity: 0.38;
}

.layer-row-label {
    position: absolute;
    left: 71px;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transform: translate(-50%, -50%);
}





.layer-item--win svg {
    width: 64px;
    height: 13px;
    fill: none;
}

.layer-item--win line {
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
}

.layer-item--win polyline {
    stroke: rgba(255, 255, 255, 0.50);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}









.layer-item,
.funnel-file,
.hero-fig-plate {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
}




.layer-item {
    left: calc(71px + var(--col) * (100% - 128px) / 5);
    top: var(--y);
    transform: translate(-50%, -50%);
}





.layer-item--gone {
    border-style: dashed;
    opacity: 0.38;
}

.layer-item--gone .layer-item-name { text-decoration: line-through; }









.layer-badge {
    position: absolute;
    bottom: -9px;
    right: -8px;
    padding: 1px 7px;
    font-size: 8.5px;
    letter-spacing: 0.06em;
}

.layer-item-kind {
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.layer-item-name {
    color: var(--clr-text-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 10.5px;
    white-space: nowrap;
}






.layer-split {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--cut);
    z-index: 5;
    width: 0;
    cursor: ew-resize;






    touch-action: none;
}

.layer-split::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    background: rgba(255, 255, 255, 0.35);
}


.layer-split::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    right: -16px;
}

.layer-split-knob {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    background: rgba(9, 15, 27, 0.85);
    transform: translate(-50%, -50%);
}

.layer-split-knob::before {
    content: '↔';
    color: var(--clr-white);
    font-size: 13px;
    line-height: 1;
}














@media (prefers-reduced-motion: reduce) {
    .data-strip-band { animation: none; }



    .hero-fig-flow-pulse { display: none; }
    .data-flyer { display: none; }
    .scene-cursor { display: none; }
    .scene-caret { display: none; }
    .scene-refresh { display: none; }
}












.contact-direct {
    margin: 0;
    font-size: 17px;
    color: var(--clr-text-muted);
}

.site-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px clamp(22px, 3vw, 40px);
    padding: 30px var(--pad-side) 36px;
    border-top: 1px solid var(--clr-hairline);
    color: var(--clr-text-muted);
    font-size: 14px;
}






.hero .site-footer {
    grid-row: 4;

    justify-self: stretch;
    position: relative;
    z-index: 1;
    padding: 18px var(--pad-side) 22px;
}






.site-footer-link {
    font-weight: 500;
    color: var(--clr-text-muted);
}

.site-footer-link:hover {
    color: var(--clr-white);
    text-decoration: underline;
}








@media (max-width: 720px) {
    .site-footer {
        gap: 9px clamp(14px, 4.4vw, 24px);
        padding: 24px var(--pad-side) 28px;
        font-size: 13px;
    }



    .hero .site-footer { padding: 14px var(--pad-side) 18px; }


    .site-footer > span {
        flex-basis: 100%;
        text-align: center;
    }
}












[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s var(--ease-arrive) var(--d, 0ms),
                transform 0.75s var(--ease-arrive) var(--d, 0ms);
}

[data-reveal].in {
    opacity: 1;
    transform: none;
}
























.site-bar {
    position: absolute;
    top: 23px;
    left: 48px;
    right: 48px;
    z-index: 21;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 32px);

    min-height: 28px;
}



















.site-corner {
    flex: none;
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 26px);
    min-height: 28px;
}







.site-corner-slot {
    position: relative;
    display: flex;
    align-items: center;
}



















.site-nav-link,
.site-corner-link,
.site-corner-btn {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    color: var(--clr-text-muted);
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;



    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast) ease;
}

.site-nav-link:hover,
.site-corner-link:hover,
.site-corner-btn:hover { color: var(--clr-white); }





















.site-nav {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(18px, 2.4vw, 34px);
    min-height: 28px;
}








.site-nav-link[aria-current] { color: var(--clr-white); }


















.site-home {




    --mark-size: 1.36em;
    gap: calc(var(--mark-size) * 0.2073);
    color: var(--clr-white);
    transition: opacity var(--transition-fast) ease;
}

.site-home:hover { opacity: 0.78; }











@media (max-width: 720px) {



    .site-bar {
        left: var(--pad-side);
        right: var(--pad-side);
        gap: clamp(12px, 2.2vw, 16px);





        align-items: flex-start;
    }

    .site-nav { gap: 8px clamp(10px, 2.5vw, 18px); }
    .site-corner { gap: clamp(11px, 1.95vw, 14px); }




    .site-nav-link,
    .site-corner-link,
    .site-corner-btn { font-size: clamp(12.5px, 1.95vw, 14px); }









    #site-lang .site-corner-label,
    #site-account .site-corner-label { display: none; }









    .site-home .noeqa-word { display: none; }


    .site-corner-slot { min-width: 0; }
}





.site-corner-btn,
.site-corner-link { gap: 7px; }



.site-lang-globe,
.site-account-person { width: 19px; height: 19px; flex: none; }

.site-lang-chevron {
    width: 13px;
    height: 13px;
    flex: none;
    transition: transform 0.2s ease;
}


.site-corner-slot.open .site-lang-chevron { transform: rotate(180deg); }

.site-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 190px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    background: rgba(24, 26, 32, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    font-size: 14px;
}

.site-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--clr-body-heading);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.site-menu-item:hover { background: rgba(255, 255, 255, 0.08); }







.site-menu-item:disabled {
    color: var(--clr-text-muted);
    opacity: 0.45;
    cursor: default;
}

.site-menu-item:disabled:hover { background: none; }








.site-menu-who {
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--clr-body-heading);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    cursor: default;
}






.site-menu-note {
    padding: 7px 10px 7px 32px;
    color: var(--clr-text-muted);
    font-size: 13px;
    line-height: 1.45;
    cursor: default;
}










.site-menu-icon {
    width: 16px;
    height: 16px;
    flex: none;
}


.site-menu-item::before {
    content: '';
    width: 14px;
    flex: none;
    color: var(--clr-accent);
}

.site-menu-item.checked::before { content: '✓'; }










.site-menu-plain .site-menu-item::before { display: none; }
.site-menu-plain .site-menu-note { padding-left: 10px; }













.site-menu-item em {
    color: var(--clr-text-muted);
    font-style: normal;
    font-size: 12px;
}

















.noeqa-mark {








    width: var(--mark-size, 1.21em);
    height: var(--mark-size, 1.21em);
    fill: var(--clr-mark);
    flex: none;
}






.noeqa-word {
    height: var(--mark-size, 1.21em);
    width: auto;
    flex: none;
}






@media (prefers-reduced-motion: reduce) {
    .hero-wall-grid {
        animation: none;
    }
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}









.account-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
















.account-main {













    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(100%, 760px);
    margin-inline: auto;
    padding: 96px var(--pad-side) 72px;
}

.account-state .panel-statement { max-width: none; }



.account-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 26px 0 30px;
    color: var(--clr-body-text);
}

.account-points p { margin: 0; }

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 8px 0 18px;
}

.account-note {
    font-size: 15px;
    color: var(--clr-text-muted);
}



.account-block {
    padding: 28px 0;
    border-top: 1px solid var(--clr-hairline);
    margin-top: 28px;
}

.account-block h2 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
    color: var(--clr-body-heading);
}

.account-block > p {
    margin: 0 0 6px;
    color: var(--clr-body-text);
}

.account-machines {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.account-machines li {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid var(--clr-hairline);
}

.account-machine-name { color: var(--clr-body-heading); }

.account-machine-platform {
    flex: 1;
    color: var(--clr-text-muted);
    font-size: 14px;
}

.account-footer { margin-top: auto; }
















.site-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 14px 0 8px;
}

.site-field {
    flex: 1 1 260px;
    min-width: 0;
    height: 42px;
    padding: 0 14px;



    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    color: var(--clr-body-heading);
    font-family: inherit;
    font-size: 15px;
}






.site-field:focus-visible {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.24);
}

.site-field:disabled { opacity: 0.5; }





.account-note.is-wrong { color: var(--clr-refusal); }

















.page-sky.gate-sky {
    background:
        radial-gradient(ellipse 130% 100% at 50% 40%,
            transparent 45%, rgba(4, 6, 10, 0.88) 100%),
        radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.4px),
        radial-gradient(ellipse 85% 65% at 50% 38%, #0a1322, #05070c 82%);
    background-size: auto, 26px 26px, auto;
}


.gate {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 46fr auto 54fr;
    justify-items: center;
}

.gate-content {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 var(--pad-side);
    max-width: min(90%, 460px);
    text-align: center;
}



.gate-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    --mark-size: 46px;
    color: var(--clr-white);
    margin-bottom: 4px;
}


.gate-line {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    text-wrap: balance;
}




.gate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #e8edf4;
    color: #0b1220;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast) ease;
}

.gate-btn:hover { background: var(--clr-white); }



.gate-note {
    font-size: 14px;
    color: var(--clr-text-muted);
    margin: 0;
}


















.components-dialog {




    margin: auto;



    padding: clamp(16px, 3svh, 32px) var(--pad-side);
    border: none;
    background: none;
    max-width: 100vw;
    max-height: 100svh;
    overflow: auto;
    color: var(--clr-body-text);



    overscroll-behavior: contain;
}

.components-dialog::backdrop {
    background: rgba(4, 7, 13, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}





.components-sheet {
    position: relative;
    width: min(100%, 660px);
    margin-inline: auto;



    padding: clamp(20px, 3vw, 30px) clamp(24px, 4vw, 40px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-card);
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%,
            rgba(10, 132, 255, 0.14), transparent 70%),
        #0b1526;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}




.components-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--clr-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast) ease,
                color var(--transition-fast) ease;
}

.components-close svg { width: 18px; height: 18px; }

.components-close:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--clr-white);
}





.components-figure {



    margin: 4px 0 clamp(10px, 1.6vw, 16px);
    display: grid;
    place-items: center;
}






.components-art {
    width: min(100%, 430px, 42svh);
    height: auto;


    color: var(--clr-white);
}




.components-art .art-plate {
    fill: rgba(255, 255, 255, 0.035);
    stroke: currentColor;
    stroke-opacity: 0.17;
    stroke-width: 1.4;
}

.components-art .art-rule {
    stroke: currentColor;
    stroke-opacity: 0.12;
    stroke-width: 1.4;
}

.components-art .art-dot {
    fill: currentColor;
    fill-opacity: 0.2;
}



.components-art .art-card {
    fill: rgba(255, 255, 255, 0.05);
    stroke: currentColor;
    stroke-opacity: 0.1;
    stroke-width: 1.2;
}







.components-art .art-mark {
    fill: var(--clr-body-lead);
    stroke: none;
}





.components-art .art-link {
    stroke: var(--clr-accent);
    stroke-width: 1.8;
    fill: none;
}



.components-title {
    margin: 0 0 14px;
    font-size: clamp(22px, 18px + 0.8vw, 28px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--clr-body-heading);
    text-wrap: balance;
}



.components-lead {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--clr-body-lead);
    line-height: 1.6;
}





.components-site {
    margin: 0 0 20px;
    padding-left: 16px;
    border-left: 2px solid rgba(10, 132, 255, 0.4);
    font-size: 15px;
    line-height: 1.6;
    color: var(--clr-text-muted);
}

.components-pick {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}




.components-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 480px) {
    .components-grid { grid-template-columns: minmax(0, 1fr); }
}





.components-get {
    flex: none;
    justify-content: flex-start;
    gap: 10px;
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
}

.components-glyph {
    width: 17px;
    height: 17px;
    flex: none;
    opacity: 0.7;
}

.components-note {
    margin: 0;
    font-size: 13px;
    color: var(--clr-text-muted);
}