/* =========================================================
   VAERO ENGINE HOME
   LIVING SYSTEM — PREMIUM VIEWPORT EDITION
   FINAL HOME VISUAL LAYER

   GOALS
   ---------------------------------------------------------
   • Apple-level visual cleanliness
   • VAERO-specific premium identity
   • No document/body vertical scroll
   • Home remains inside the Engine viewport
   • Internal areas scroll only when genuinely necessary
   • Desktop / tablet / mobile / short-height support
   • Existing HTML / JS class structure preserved
========================================================= */


/* =========================================================
   HOME TOKENS
========================================================= */

:root{
    --engine-home-bg:
        #06101a;

    --engine-home-bg-deep:
        #030910;

    --engine-home-surface:
        rgba(255,255,255,.026);

    --engine-home-surface-hover:
        rgba(255,255,255,.044);

    --engine-home-border:
        rgba(255,255,255,.06);

    --engine-home-border-hover:
        rgba(255,255,255,.105);

    --engine-home-text:
        #f6f4ef;

    --engine-home-text-soft:
        rgba(235,238,242,.54);

    --engine-home-text-muted:
        rgba(225,229,235,.34);

    --engine-home-gold:
        #d7ab63;

    --engine-home-gold-bright:
        #edc574;

    --engine-home-blue:
        #72b7ea;

    --engine-home-green:
        #62d9b8;

    --engine-home-purple:
        #b58bf2;

    --engine-home-radius-lg:
        26px;

    --engine-home-radius-md:
        20px;

    --engine-home-radius-sm:
        15px;

    --engine-home-ease:
        cubic-bezier(.22,.78,.2,1);
}


/* =========================================================
   VIEWPORT PROTECTION
========================================================= */

html,
body{
    width:100%;
    height:100%;
    min-height:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    overscroll-behavior:none;
}

body{
    position:fixed;

    inset:0;

    width:100%;
    height:100dvh;

    overflow:hidden;
}

#engine{
    width:100%;
    height:100%;
    min-height:0;

    overflow:hidden;
}


/* =========================================================
   VAERO ENGINE HOME ROOT
========================================================= */

.vaero-engine-home{
    position:relative;

    width:100%;
    max-width:1280px;

    height:100%;
    min-height:0;

    margin:0 auto;

    padding:
        2px
        4px
        4px;

    color:
        var(
            --text,
            var(--engine-home-text)
        );

    display:grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(280px,.85fr);

    grid-template-rows:
        44px
        minmax(176px,1.32fr)
        auto
        minmax(126px,.82fr);

    gap:11px;

    overflow:hidden;

    isolation:isolate;

    contain:
        layout
        paint
        style;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.vaero-engine-home::before{
    content:"";

    position:absolute;

    inset:-90px;

    z-index:-2;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 76% 10%,
            rgba(73,142,202,.085),
            transparent 27%
        ),

        radial-gradient(
            circle at 19% 39%,
            rgba(211,166,91,.037),
            transparent 31%
        ),

        radial-gradient(
            circle at 48% 97%,
            rgba(35,99,154,.035),
            transparent 34%
        );
}

.vaero-engine-home::after{
    content:"";

    position:absolute;

    top:14%;
    left:54%;

    width:580px;
    height:580px;

    z-index:-1;

    pointer-events:none;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(72,143,202,.03),
            rgba(72,143,202,.012) 32%,
            transparent 69%
        );

    filter:blur(22px);
}


/* =========================================================
   SHARED GRID PLACEMENT
========================================================= */

.engine-home-topbar,
.engine-hero,
.engine-shortcuts{
    grid-column:
        1 / -1;
}

.engine-home-topbar{
    grid-row:1;
}

.engine-hero{
    grid-row:2;
}

.engine-shortcuts{
    grid-row:3;
}

.engine-active-world{
    grid-column:1;

    grid-row:4;
}

.engine-activity{
    grid-column:2;

    grid-row:4;
}


/* =========================================================
   TOP BAR
========================================================= */

.engine-home-topbar{
    position:relative;

    z-index:20;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:18px;

    min-width:0;
    min-height:44px;

    padding:
        0
        4px;
}

.engine-brand{
    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;

    line-height:1;

    user-select:none;
}

.engine-brand-main{
    overflow:hidden;

    color:#f5f3ed;

    font-size:20px;
    font-weight:760;

    letter-spacing:.26em;

    line-height:1;

    text-overflow:ellipsis;
    white-space:nowrap;

    text-shadow:
        0 0 28px
        rgba(255,255,255,.025);
}

.engine-brand-sub{
    margin-top:5px;

    overflow:hidden;

    color:#cba05a;

    font-size:6px;
    font-weight:840;

    letter-spacing:.52em;

    line-height:1;

    text-overflow:ellipsis;
    white-space:nowrap;

    opacity:.82;
}


/* =========================================================
   TOP ACTIONS
========================================================= */

.engine-top-actions{
    display:flex;

    align-items:center;

    flex:0 0 auto;

    gap:7px;
}

.engine-icon-btn{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    flex:0 0 34px;

    margin:0;
    padding:0;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:50%;

    outline:none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.026),
            rgba(255,255,255,.012)
        );

    color:
        rgba(239,220,169,.69);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.018),

        0
        8px
        24px
        rgba(0,0,0,.08);

    font:inherit;
    font-size:14px;

    cursor:pointer;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    -webkit-tap-highlight-color:transparent;

    transition:
        transform
        .18s
        var(--engine-home-ease),

        background
        .18s
        ease,

        border-color
        .18s
        ease,

        color
        .18s
        ease,

        box-shadow
        .18s
        ease;
}

.engine-icon-btn::after{
    content:"";

    position:absolute;

    inset:4px;

    border:
        1px solid
        rgba(255,255,255,.018);

    border-radius:50%;

    pointer-events:none;
}

.engine-icon-btn:hover{
    color:
        var(--engine-home-gold-bright);

    border-color:
        rgba(222,180,102,.18);

    background:
        rgba(222,180,102,.045);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.028),

        0
        10px
        28px
        rgba(0,0,0,.13);

    transform:
        translateY(-1px);
}

.engine-icon-btn:active{
    transform:
        scale(.955);
}

.engine-icon-btn:focus-visible{
    outline:
        1px solid
        rgba(229,192,122,.5);

    outline-offset:3px;
}


/* =========================================================
   HERO
========================================================= */

.engine-hero{
    position:relative;

    isolation:isolate;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(172px,222px);

    align-items:center;

    gap:28px;

    width:100%;
    height:100%;
    min-width:0;
    min-height:0;

    padding:
        25px
        30px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.066);

    border-radius:
        var(--engine-home-radius-lg);

    background:
        radial-gradient(
            circle at 79% 45%,
            rgba(79,151,211,.155),
            transparent 27%
        ),

        radial-gradient(
            circle at 88% 51%,
            rgba(41,95,140,.09),
            transparent 43%
        ),

        radial-gradient(
            circle at 8% -4%,
            rgba(211,166,91,.052),
            transparent 31%
        ),

        linear-gradient(
            137deg,
            rgba(14,30,46,.99),
            rgba(7,17,28,.992) 52%,
            rgba(4,11,20,.997)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.035),

        inset
        0
        -1px
        0
        rgba(255,255,255,.011),

        0
        24px
        60px
        rgba(0,0,0,.19);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}


/* =========================================================
   HERO DECORATION
========================================================= */

.engine-hero::before{
    content:"";

    position:absolute;

    top:-82px;
    right:53px;

    width:288px;
    height:288px;

    z-index:-1;

    pointer-events:none;

    border:
        1px solid
        rgba(100,165,218,.057);

    border-radius:50%;

    box-shadow:
        0
        0
        0
        48px
        rgba(83,149,204,.018),

        0
        0
        0
        96px
        rgba(83,149,204,.01);
}

.engine-hero::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:49%;
    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(218,175,100,.32),
            rgba(218,175,100,.08) 42%,
            transparent
        );

    opacity:.46;
}


/* =========================================================
   HERO COPY
========================================================= */

.engine-hero-copy{
    position:relative;

    z-index:2;

    min-width:0;

    align-self:center;
}

.engine-welcome{
    display:flex;

    align-items:center;

    gap:8px;

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

    margin:
        0
        0
        9px;

    color:
        var(--engine-home-gold);

    font-size:10px;
    font-weight:720;

    letter-spacing:.02em;

    line-height:1.2;
}

.engine-welcome::before{
    content:"";

    width:18px;
    height:1px;

    flex:
        0
        0
        18px;

    background:
        linear-gradient(
            90deg,
            #d5aa62,
            rgba(213,170,98,.18)
        );
}

.engine-hero h1{
    max-width:620px;

    margin:0;

    color:
        var(--engine-home-text);

    font-size:
        clamp(
            34px,
            4.2vw,
            51px
        );

    font-weight:570;

    line-height:.95;

    letter-spacing:-.052em;

    text-wrap:balance;
}

.engine-hero h1 strong{
    font-weight:650;
}

.engine-hero-copy > p{
    max-width:438px;

    margin:
        12px
        0
        0;

    color:
        rgba(225,229,235,.49);

    font-size:12px;

    font-weight:420;

    line-height:1.55;

    letter-spacing:-.005em;
}


/* =========================================================
   ENGINE STATUS
========================================================= */

.engine-status-pill{
    display:inline-flex;

    align-items:center;

    gap:8px;

    max-width:100%;

    margin-top:15px;

    padding:
        7px
        11px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:999px;

    background:
        rgba(0,8,15,.32);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.018);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.engine-status-dot{
    position:relative;

    width:6px;
    height:6px;

    flex:
        0
        0
        6px;

    border-radius:50%;

    background:
        var(--engine-home-green);

    box-shadow:
        0
        0
        0
        4px
        rgba(89,215,183,.055),

        0
        0
        15px
        rgba(89,215,183,.55);
}

.engine-status-dot::after{
    content:"";

    position:absolute;

    inset:-4px;

    border:
        1px solid
        rgba(98,217,184,.18);

    border-radius:50%;

    opacity:.5;

    animation:
        vaero-home-status-pulse
        2.8s
        ease-out
        infinite;
}

.engine-status-pill strong{
    min-width:0;

    overflow:hidden;

    color:
        rgba(243,245,244,.91);

    font-size:9px;
    font-weight:680;

    line-height:1;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.engine-status-separator{
    width:1px;
    height:11px;

    flex:0 0 1px;

    background:
        rgba(255,255,255,.1);
}

.engine-status-pill small{
    min-width:0;

    overflow:hidden;

    color:
        rgba(225,229,235,.35);

    font-size:8px;

    line-height:1;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   BRAIN — HERO CORE
========================================================= */

.engine-brain-orb{
    position:relative;

    z-index:3;

    display:flex;

    align-items:center;
    justify-content:center;

    justify-self:center;

    width:170px;
    height:170px;

    margin:auto;

    padding:0;

    border:0;

    border-radius:50%;

    outline:none;

    background:transparent;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform
        .28s
        var(--engine-home-ease),

        filter
        .28s
        ease;
}

.engine-brain-orb::before{
    content:"";

    position:absolute;

    inset:17%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(87,151,203,.11),
            rgba(87,151,203,.035) 48%,
            transparent 70%
        );

    filter:blur(18px);

    opacity:.76;

    transition:
        transform
        .3s
        ease,

        opacity
        .3s
        ease;
}

.engine-brain-orb::after{
    content:"";

    position:absolute;

    width:5px;
    height:5px;

    top:20px;
    right:43px;

    border-radius:50%;

    background:
        rgba(237,196,111,.82);

    box-shadow:
        0
        0
        11px
        rgba(237,196,111,.6);
}


/* =========================================================
   BRAIN ORBITS
========================================================= */

.brain-orbit{
    position:absolute;

    border:
        1px solid
        rgba(219,177,104,.15);

    border-radius:50%;

    pointer-events:none;

    transition:
        transform
        .48s
        var(--engine-home-ease),

        border-color
        .25s
        ease,

        opacity
        .25s
        ease;
}

.brain-orbit-1{
    width:100%;
    height:100%;

    opacity:.46;

    transform:
        rotate(-8deg)
        scaleY(.93);
}

.brain-orbit-2{
    width:76%;
    height:76%;

    border-color:
        rgba(104,164,215,.23);

    opacity:.74;

    transform:
        rotate(33deg)
        scaleY(.82);
}

.brain-orbit-3{
    width:52%;
    height:52%;

    border-color:
        rgba(228,187,113,.25);

    opacity:.9;

    transform:
        rotate(-28deg)
        scaleY(.9);
}


/* =========================================================
   BRAIN CORE
========================================================= */

.brain-core{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:16px;

    width:70px;
    height:70px;

    border:
        1px solid
        rgba(125,181,227,.35);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 49% 40%,
            rgba(55,91,119,.98),
            rgba(9,24,38,.99) 52%,
            rgba(3,11,20,1) 76%
        );

    box-shadow:
        inset
        0
        0
        24px
        rgba(111,171,220,.14),

        inset
        0
        1px
        0
        rgba(255,255,255,.06),

        0
        0
        38px
        rgba(67,130,181,.12),

        0
        0
        0
        7px
        rgba(67,130,181,.018);
}

.brain-core::before{
    content:"";

    position:absolute;

    inset:8px;

    border:
        1px solid
        rgba(255,255,255,.027);

    border-radius:50%;
}

.brain-core::after{
    content:"";

    position:absolute;

    top:15px;
    left:20px;

    width:18px;
    height:8px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.06),
            transparent 70%
        );

    transform:rotate(-21deg);
}


/* =========================================================
   BRAIN EYES
========================================================= */

.brain-eye{
    position:relative;

    z-index:2;

    width:11px;
    height:11px;

    border-radius:50%;

    background:
        var(--engine-home-gold-bright);

    box-shadow:
        0
        0
        7px
        rgba(237,196,111,.8),

        0
        0
        18px
        rgba(237,196,111,.33);
}

.brain-eye::after{
    content:"";

    position:absolute;

    top:2px;
    left:2px;

    width:3px;
    height:3px;

    border-radius:50%;

    background:
        rgba(255,255,255,.66);
}


/* =========================================================
   BRAIN INTERACTION
========================================================= */

.engine-brain-orb:hover{
    transform:
        scale(1.035);

    filter:
        brightness(1.05);
}

.engine-brain-orb:hover::before{
    transform:
        scale(1.12);

    opacity:.92;
}

.engine-brain-orb:hover
.brain-orbit-1{
    transform:
        rotate(14deg)
        scale(1.025)
        scaleY(.92);

    border-color:
        rgba(219,177,104,.26);
}

.engine-brain-orb:hover
.brain-orbit-2{
    transform:
        rotate(-20deg)
        scale(.98)
        scaleY(.84);

    border-color:
        rgba(111,175,226,.34);
}

.engine-brain-orb:hover
.brain-orbit-3{
    transform:
        rotate(19deg)
        scale(1.03)
        scaleY(.88);
}

.engine-brain-orb:active{
    transform:
        scale(.97);
}

.engine-brain-orb:focus-visible{
    outline:
        1px solid
        rgba(228,187,113,.55);

    outline-offset:8px;
}


/* =========================================================
   BRAIN INTRO
========================================================= */

.engine-brain-intro{
    position:absolute;

    right:18px;
    bottom:15px;

    z-index:5;

    width:
        min(
            292px,
            calc(100% - 36px)
        );

    padding:
        10px
        13px;

    border:
        1px solid
        rgba(218,178,105,.14);

    border-radius:14px;

    outline:none;

    background:
        linear-gradient(
            145deg,
            rgba(7,17,28,.94),
            rgba(3,10,17,.89)
        );

    color:
        rgba(242,238,230,.7);

    box-shadow:
        0
        16px
        38px
        rgba(0,0,0,.24),

        inset
        0
        1px
        0
        rgba(255,255,255,.018);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    font:inherit;

    font-size:9px;
    font-weight:420;

    line-height:1.45;

    appearance:none;

    text-align:left;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        background
        .18s
        ease,

        border-color
        .18s
        ease,

        transform
        .18s
        var(--engine-home-ease);
}

.engine-brain-intro strong{
    display:block;

    margin-bottom:3px;

    color:#ddb16a;

    font-size:9px;
    font-weight:680;
}

.engine-brain-intro:hover{
    border-color:
        rgba(218,178,105,.22);

    background:
        rgba(7,17,29,.96);

    transform:
        translateY(-1px);
}

.engine-brain-intro:active{
    transform:
        scale(.985);
}

.engine-brain-intro:focus-visible{
    outline:
        1px solid
        rgba(218,178,105,.45);

    outline-offset:3px;
}

.engine-hero.has-brain-intro{
    padding-bottom:72px;
}


/* =========================================================
   ENGINE APPS / SHORTCUTS
========================================================= */

.engine-shortcuts{
    position:relative;

    min-width:0;
    min-height:0;

    margin:0;
}

.engine-section-label{
    display:block;

    margin:
        0
        0
        6px;

    color:
        rgba(229,232,237,.36);

    font-size:7px;
    font-weight:820;

    letter-spacing:.24em;

    line-height:1.2;

    text-transform:uppercase;
}

.engine-shortcuts-grid{
    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:8px;

    min-width:0;
}


/* =========================================================
   SHORTCUT CARD
========================================================= */

.engine-shortcut-card{
    position:relative;

    isolation:isolate;

    display:grid;

    grid-template-columns:
        35px
        minmax(0,1fr)
        25px;

    grid-template-rows:
        auto
        auto;

    align-items:center;

    column-gap:10px;
    row-gap:3px;

    min-width:0;
    min-height:62px;

    margin:0;

    padding:
        10px
        11px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.058);

    border-radius:17px;

    outline:none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.036),
            rgba(255,255,255,.009)
        );

    color:
        var(
            --text,
            var(--engine-home-text)
        );

    text-align:left;

    cursor:pointer;

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.014),

        0
        8px
        24px
        rgba(0,0,0,.06);

    -webkit-tap-highlight-color:transparent;

    transition:
        transform
        .2s
        var(--engine-home-ease),

        border-color
        .18s
        ease,

        background
        .18s
        ease,

        box-shadow
        .18s
        ease;
}

.engine-shortcut-card::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 12% 50%,
            rgba(211,170,98,.025),
            transparent 35%
        );

    opacity:0;

    transition:
        opacity
        .2s
        ease;
}

.engine-shortcut-card::after{
    content:"";

    position:absolute;

    top:0;
    left:16%;

    width:68%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.075),
            transparent
        );

    opacity:.42;
}

.engine-shortcut-card:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(255,255,255,.108);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.053),
            rgba(255,255,255,.017)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.02),

        0
        12px
        30px
        rgba(0,0,0,.11);
}

.engine-shortcut-card:hover::before{
    opacity:1;
}

.engine-shortcut-card:active{
    transform:
        scale(.985);
}

.engine-shortcut-card:focus-visible{
    border-color:
        rgba(218,177,104,.3);

    outline:
        1px solid
        rgba(218,177,104,.26);

    outline-offset:2px;
}


/* =========================================================
   SHORTCUT ICONS
========================================================= */

.engine-shortcut-icon{
    grid-row:
        1 / 3;

    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    width:33px;
    height:33px;

    flex:0 0 33px;

    border-radius:11px;

    border:
        1px solid
        rgba(219,177,104,.09);

    background:
        rgba(219,177,104,.055);

    color:#d5aa62;

    font-size:17px;

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.018);
}

.engine-shortcut-icon::after{
    content:"";

    position:absolute;

    inset:4px;

    border:
        1px solid
        rgba(255,255,255,.015);

    border-radius:8px;
}

.engine-shortcut-card:nth-child(2)
.engine-shortcut-icon{
    color:#79b6ed;

    border-color:
        rgba(105,169,245,.09);

    background:
        rgba(105,169,245,.055);
}

.engine-shortcut-card:nth-child(3)
.engine-shortcut-icon{
    color:#b28af3;

    border-color:
        rgba(166,106,255,.09);

    background:
        rgba(166,106,255,.055);
}

.engine-shortcut-card:nth-child(4)
.engine-shortcut-icon{
    color:#72d7ba;

    border-color:
        rgba(97,220,185,.09);

    background:
        rgba(97,220,185,.055);
}


/* =========================================================
   SHORTCUT TEXT
========================================================= */

.engine-shortcut-card strong{
    align-self:end;

    min-width:0;

    overflow:hidden;

    color:
        rgba(246,243,236,.94);

    font-size:11px;
    font-weight:650;

    line-height:1.15;

    letter-spacing:-.01em;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.engine-shortcut-card small{
    align-self:start;

    min-width:0;

    overflow:hidden;

    color:
        rgba(226,230,236,.35);

    font-size:7px;

    line-height:1.2;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   SHORTCUT ARROW
========================================================= */

.engine-shortcut-arrow{
    grid-column:3;
    grid-row:
        1 / 3;

    display:flex;

    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;

    border:
        1px solid
        rgba(218,177,104,.16);

    border-radius:50%;

    color:
        rgba(218,177,104,.79);

    font-size:11px;

    transition:
        transform
        .2s
        var(--engine-home-ease),

        background
        .18s
        ease,

        border-color
        .18s
        ease;
}

.engine-shortcut-card:hover
.engine-shortcut-arrow{
    transform:
        translateX(2px);

    background:
        rgba(218,177,104,.045);

    border-color:
        rgba(218,177,104,.23);
}

.engine-shortcut-card:nth-child(2)
.engine-shortcut-arrow{
    color:#79b6ed;

    border-color:
        rgba(105,169,245,.16);
}

.engine-shortcut-card:nth-child(3)
.engine-shortcut-arrow{
    color:#b28af3;

    border-color:
        rgba(166,106,255,.16);
}

.engine-shortcut-card:nth-child(4)
.engine-shortcut-arrow{
    color:#72d7ba;

    border-color:
        rgba(97,220,185,.16);
}


/* =========================================================
   ACTIVE WORLD
========================================================= */

.engine-active-world{
    position:relative;

    isolation:isolate;

    width:100%;
    height:100%;
    min-width:0;
    min-height:0;

    margin:0;

    padding:
        18px
        20px;

    overflow:hidden;

    border:
        1px solid
        rgba(87,151,206,.14);

    border-radius:
        var(--engine-home-radius-md);

    background:
        radial-gradient(
            circle at 83% 20%,
            rgba(69,151,219,.25),
            transparent 28%
        ),

        radial-gradient(
            circle at 96% 90%,
            rgba(27,92,142,.14),
            transparent 39%
        ),

        linear-gradient(
            112deg,
            rgba(12,42,68,.97),
            rgba(5,21,37,.995)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.022),

        0
        10px
        30px
        rgba(0,0,0,.06);
}

.engine-active-world::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.022),
            transparent 31%
        );
}

.engine-active-world::after{
    content:"";

    position:absolute;

    left:18px;
    bottom:0;

    width:130px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(83,167,228,.43),
            transparent
        );
}


/* =========================================================
   ACTIVE WORLD COPY
========================================================= */

.engine-active-world-copy{
    position:relative;

    z-index:3;

    max-width:68%;

    min-width:0;
}

.engine-active-world
.engine-section-label{
    margin-bottom:0;
}

.engine-active-world h2{
    margin:
        8px
        0
        0;

    overflow:hidden;

    color:#f2f4f6;

    font-size:
        clamp(
            22px,
            2.8vw,
            31px
        );

    font-weight:560;

    line-height:.98;

    letter-spacing:-.042em;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.engine-active-count{
    display:block;

    margin-top:7px;

    color:
        var(--engine-home-green);

    font-size:9px;
    font-weight:600;

    line-height:1.15;
}


/* =========================================================
   WORLD ENTER
========================================================= */

.engine-world-enter{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    margin-top:12px;

    padding:
        7px
        12px;

    border:
        1px solid
        rgba(255,255,255,.095);

    border-radius:999px;

    outline:none;

    background:
        rgba(2,10,18,.3);

    color:
        rgba(250,250,250,.9);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.018);

    font:inherit;

    font-size:8px;
    font-weight:660;

    line-height:1;

    cursor:pointer;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    -webkit-tap-highlight-color:transparent;

    transition:
        background
        .18s
        ease,

        border-color
        .18s
        ease,

        transform
        .18s
        var(--engine-home-ease);
}

.engine-world-enter:hover{
    border-color:
        rgba(108,177,229,.2);

    background:
        rgba(7,26,41,.58);

    transform:
        translateY(-1px);
}

.engine-world-enter:active{
    transform:
        scale(.97);
}

.engine-world-enter:focus-visible{
    outline:
        1px solid
        rgba(108,177,229,.45);

    outline-offset:3px;
}


/* =========================================================
   WORLD VISUAL
========================================================= */

.engine-world-visual{
    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;
}

.engine-world-glow{
    position:absolute;

    top:-16%;
    right:-1%;

    width:210px;
    height:210px;

    border-radius:50%;

    background:
        rgba(68,146,213,.15);

    filter:blur(35px);
}

.engine-world-planet{
    position:absolute;

    top:-47px;
    right:-35px;

    width:200px;
    height:200px;

    border:
        1px solid
        rgba(116,184,236,.16);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 31% 28%,
            rgba(133,204,246,.28),
            rgba(44,102,145,.2) 21%,
            rgba(24,65,96,.22) 38%,
            rgba(5,23,39,.93) 70%
        );

    box-shadow:
        inset
        14px
        0
        32px
        rgba(75,151,208,.11),

        inset
        -15px
        -20px
        42px
        rgba(0,6,13,.32),

        0
        0
        45px
        rgba(50,126,187,.09);
}

.engine-world-planet::before{
    content:"";

    position:absolute;

    left:21px;
    top:50px;

    width:115px;
    height:38px;

    border-top:
        1px solid
        rgba(139,204,244,.08);

    border-radius:50%;

    transform:
        rotate(-18deg);
}

.engine-world-planet::after{
    content:"";

    position:absolute;

    inset:-14px;

    border:
        1px solid
        rgba(93,169,224,.055);

    border-radius:50%;
}


/* =========================================================
   ACTIVITY
========================================================= */

.engine-activity{
    position:relative;

    width:100%;
    height:100%;
    min-width:0;
    min-height:0;

    margin:0;

    padding:
        15px
        16px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:
        var(--engine-home-radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.012),

        0
        10px
        28px
        rgba(0,0,0,.05);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}


/* =========================================================
   ACTIVITY LIST
========================================================= */

.engine-activity-list{
    display:grid;

    min-width:0;
    min-height:0;

    max-height:
        calc(
            100% - 13px
        );

    overflow-y:auto;
    overflow-x:hidden;

    overscroll-behavior:contain;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}

.engine-activity-list::-webkit-scrollbar{
    width:0;
    height:0;

    display:none;
}

.engine-activity-item{
    display:grid;

    grid-template-columns:
        6px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:8px;

    min-width:0;

    padding:
        7px
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.038);
}

.engine-activity-item:last-child{
    border-bottom:0;
}

.activity-dot{
    width:5px;
    height:5px;

    border-radius:50%;

    background:#c99e58;

    box-shadow:
        0
        0
        8px
        rgba(201,158,88,.17);
}

.engine-activity-item:nth-child(2)
.activity-dot{
    background:
        var(--engine-home-blue);

    box-shadow:
        0
        0
        8px
        rgba(114,183,234,.16);
}

.engine-activity-item:nth-child(3)
.activity-dot{
    background:
        var(--engine-home-purple);

    box-shadow:
        0
        0
        8px
        rgba(181,139,242,.16);
}

.engine-activity-item:nth-child(4)
.activity-dot{
    background:
        var(--engine-home-green);

    box-shadow:
        0
        0
        8px
        rgba(98,217,184,.16);
}

.engine-activity-item
> span:nth-child(2){
    min-width:0;

    overflow:hidden;

    color:
        rgba(237,239,242,.65);

    font-size:8px;

    line-height:1.3;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.engine-activity-item small{
    color:
        rgba(233,236,240,.29);

    font-size:6px;

    line-height:1;

    white-space:nowrap;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.engine-empty-state{
    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:72px;
}

.engine-empty-state strong{
    color:
        rgba(255,255,255,.69);

    font-size:10px;
    font-weight:620;
}

.engine-empty-state span{
    margin-top:4px;

    color:
        rgba(255,255,255,.31);

    font-size:7px;

    line-height:1.35;
}


/* =========================================================
   BOTTOM NAV HOME OVERRIDES
========================================================= */

.bottom-nav.engine-bottom-nav{
    bottom:
        max(
            8px,
            env(
                safe-area-inset-bottom,
                0px
            )
        );

    width:
        min(
            520px,
            calc(100% - 22px)
        );

    height:62px;

    padding:
        0
        7px;

    border-radius:22px;
}

.engine-bottom-nav
.nav-btn{
    display:flex;

    flex:1;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    min-width:0;

    height:52px;

    padding:2px;
}

.engine-bottom-nav
.nav-icon{
    width:27px;
    height:27px;

    margin:
        0
        auto
        2px;
}


/* =========================================================
   NAV BRAIN
========================================================= */

.engine-bottom-nav
.nav-brain-btn{
    position:relative;

    align-self:flex-start;

    display:flex;

    flex:
        0
        0
        64px;

    align-items:center;
    justify-content:center;

    width:64px;
    height:64px;

    margin-top:-18px;

    padding:0;

    border:
        1px solid
        rgba(218,176,98,.22);

    border-radius:50%;

    outline:none;

    background:
        linear-gradient(
            145deg,
            #0d1b29,
            #06111c
        );

    box-shadow:
        0
        12px
        34px
        rgba(0,0,0,.25),

        inset
        0
        1px
        0
        rgba(255,255,255,.027),

        inset
        0
        0
        20px
        rgba(70,133,181,.035);

    transition:
        transform
        .2s
        var(--engine-home-ease),

        border-color
        .2s
        ease;
}

.engine-bottom-nav
.nav-brain-btn:hover{
    border-color:
        rgba(218,176,98,.33);

    transform:
        translateY(-1px);
}

.engine-bottom-nav
.nav-brain-btn:active{
    transform:
        scale(.97);
}


/* =========================================================
   NAV BRAIN ORBIT
========================================================= */

.nav-brain-orbit{
    position:absolute;

    inset:6px;

    border:
        1px solid
        rgba(218,176,98,.28);

    border-radius:50%;

    pointer-events:none;
}

.nav-brain-orbit::before{
    content:"";

    position:absolute;

    inset:7px;

    border:
        1px solid
        rgba(111,171,219,.12);

    border-radius:50%;
}


/* =========================================================
   NAV BRAIN CORE
========================================================= */

.nav-brain-core{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    width:38px;
    height:38px;

    border:
        1px solid
        rgba(111,171,219,.26);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 48% 38%,
            #1b3953,
            #0a1825 66%
        );

    box-shadow:
        inset
        0
        0
        13px
        rgba(98,161,211,.08);
}

.nav-brain-eye{
    position:relative;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#eac16f;

    box-shadow:
        0
        0
        8px
        rgba(234,193,111,.62);
}

.nav-brain-eye::after{
    content:"";

    position:absolute;

    top:1px;
    left:1px;

    width:2px;
    height:2px;

    border-radius:50%;

    background:
        rgba(255,255,255,.6);
}

.nav-brain-label{
    position:absolute;

    top:46px;
    left:50%;

    width:118px;

    transform:
        translateX(-50%);

    overflow:hidden;

    color:
        rgba(222,179,101,.61);

    font-size:6px;
    font-weight:520;

    line-height:1;

    text-align:center;

    text-overflow:ellipsis;
    white-space:nowrap;

    pointer-events:none;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1400px){

    .vaero-engine-home{
        max-width:1320px;

        grid-template-columns:
            minmax(0,1.58fr)
            minmax(300px,.82fr);

        grid-template-rows:
            46px
            minmax(185px,1.34fr)
            auto
            minmax(132px,.82fr);

        gap:12px;
    }

    .engine-hero{
        padding:
            28px
            34px;

        grid-template-columns:
            minmax(0,1fr)
            230px;
    }

    .engine-brain-orb{
        width:178px;
        height:178px;
    }

}


/* =========================================================
   TABLET / NARROW DESKTOP
========================================================= */

@media (max-width:900px){

    .vaero-engine-home{
        grid-template-columns:
            minmax(0,1.4fr)
            minmax(240px,.9fr);

        grid-template-rows:
            40px
            minmax(158px,1.25fr)
            auto
            minmax(116px,.8fr);

        gap:9px;
    }

    .engine-home-topbar{
        min-height:40px;
    }

    .engine-brand-main{
        font-size:18px;
    }

    .engine-hero{
        grid-template-columns:
            minmax(0,1fr)
            150px;

        gap:18px;

        padding:
            20px
            23px;
    }

    .engine-hero h1{
        font-size:
            clamp(
                31px,
                4.8vw,
                44px
            );
    }

    .engine-brain-orb{
        width:135px;
        height:135px;
    }

    .brain-core{
        width:60px;
        height:60px;
    }

    .engine-shortcut-card{
        grid-template-columns:
            30px
            minmax(0,1fr)
            22px;

        min-height:58px;

        padding:
            8px
            9px;
    }

    .engine-shortcut-icon{
        width:28px;
        height:28px;

        flex-basis:28px;

        font-size:15px;
    }

    .engine-shortcut-arrow{
        width:21px;
        height:21px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px){

    .vaero-engine-home{
        width:100%;
        max-width:none;

        height:100%;
        min-height:0;

        padding:
            max(
                1px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            0
            1px;

        grid-template-columns:
            minmax(0,1.28fr)
            minmax(0,.92fr);

        grid-template-rows:
            36px
            minmax(142px,1.18fr)
            auto
            minmax(102px,.8fr);

        gap:7px;

        overflow:hidden;
    }


    /* =====================================================
       MOBILE TOP BAR
    ===================================================== */

    .engine-home-topbar{
        min-height:36px;

        padding:
            0
            2px;
    }

    .engine-brand-main{
        font-size:17px;

        letter-spacing:.235em;
    }

    .engine-brand-sub{
        margin-top:4px;

        font-size:5px;

        letter-spacing:.45em;
    }

    .engine-top-actions{
        gap:5px;
    }

    .engine-icon-btn{
        width:29px;
        height:29px;

        flex-basis:29px;

        font-size:12px;
    }


    /* =====================================================
       MOBILE HERO
    ===================================================== */

    .engine-hero{
        display:block;

        height:100%;
        min-height:0;

        padding:
            16px
            15px;

        border-radius:19px;
    }

    .engine-hero::before{
        top:-58px;
        right:-20px;

        width:170px;
        height:170px;

        box-shadow:
            0
            0
            0
            30px
            rgba(83,149,204,.014),

            0
            0
            0
            58px
            rgba(83,149,204,.008);
    }

    .engine-hero::after{
        width:58%;
    }

    .engine-hero-copy{
        padding-right:92px;
    }

    .engine-welcome{
        gap:5px;

        margin-bottom:6px;

        font-size:8px;
    }

    .engine-welcome::before{
        width:12px;

        flex-basis:12px;
    }

    .engine-hero h1{
        max-width:220px;

        font-size:
            clamp(
                26px,
                8vw,
                31px
            );

        line-height:.97;

        letter-spacing:-.047em;
    }

    .engine-hero-copy > p{
        max-width:205px;

        margin-top:7px;

        font-size:9px;

        line-height:1.38;
    }


    /* =====================================================
       MOBILE STATUS
    ===================================================== */

    .engine-status-pill{
        gap:6px;

        margin-top:9px;

        padding:
            5px
            8px;
    }

    .engine-status-pill strong{
        font-size:7px;
    }

    .engine-status-pill small,
    .engine-status-separator{
        display:none;
    }

    .engine-status-dot{
        width:5px;
        height:5px;

        flex-basis:5px;
    }


    /* =====================================================
       MOBILE BRAIN
    ===================================================== */

    .engine-brain-orb{
        position:absolute;

        top:24px;
        right:5px;

        width:92px;
        height:92px;
    }

    .engine-brain-orb::after{
        top:9px;
        right:22px;

        width:3px;
        height:3px;
    }

    .brain-core{
        width:43px;
        height:43px;

        gap:9px;
    }

    .brain-core::before{
        inset:5px;
    }

    .brain-core::after{
        top:8px;
        left:11px;

        width:11px;
        height:5px;
    }

    .brain-eye{
        width:7px;
        height:7px;
    }


    /* =====================================================
       MOBILE SHORTCUTS
    ===================================================== */

    .engine-shortcuts{
        min-height:0;
    }

    .engine-section-label{
        margin-bottom:4px;

        font-size:6px;

        letter-spacing:.2em;
    }

    .engine-shortcuts-grid{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

        gap:5px;
    }

    .engine-shortcut-card{
        display:flex;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        min-width:0;
        min-height:60px;

        padding:
            6px
            3px;

        border-radius:14px;

        text-align:center;
    }

    .engine-shortcut-card::after,
    .engine-shortcut-card::before{
        display:none;
    }

    .engine-shortcut-icon{
        width:26px;
        height:26px;

        flex:
            0
            0
            26px;

        border-radius:9px;

        font-size:14px;
    }

    .engine-shortcut-card strong{
        width:100%;

        margin-top:4px;

        font-size:7px;

        line-height:1;

        text-align:center;

        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .engine-shortcut-card small,
    .engine-shortcut-arrow{
        display:none;
    }


    /* =====================================================
       MOBILE ACTIVE WORLD
    ===================================================== */

    .engine-active-world{
        min-width:0;

        padding:
            12px
            12px;

        border-radius:17px;
    }

    .engine-active-world-copy{
        max-width:78%;
    }

    .engine-active-world h2{
        margin-top:6px;

        font-size:
            clamp(
                17px,
                5vw,
                21px
            );
    }

    .engine-active-count{
        margin-top:5px;

        font-size:7px;
    }

    .engine-world-enter{
        gap:9px;

        margin-top:8px;

        padding:
            5px
            8px;

        font-size:6px;
    }

    .engine-world-glow{
        width:120px;
        height:120px;
    }

    .engine-world-planet{
        top:-9px;
        right:-60px;

        width:135px;
        height:135px;

        opacity:.74;
    }


    /* =====================================================
       MOBILE ACTIVITY
    ===================================================== */

    .engine-activity{
        min-width:0;

        padding:
            10px
            9px;

        border-radius:17px;
    }

    .engine-activity
    .engine-section-label{
        margin-bottom:2px;
    }

    .engine-activity-list{
        max-height:
            calc(
                100% - 10px
            );
    }

    .engine-activity-item{
        grid-template-columns:
            5px
            minmax(0,1fr);

        gap:5px;

        padding:
            4px
            0;
    }

    .engine-activity-item
    > span:nth-child(2){
        font-size:6px;
    }

    .engine-activity-item small{
        display:none;
    }


    /* =====================================================
       MOBILE BRAIN INTRO
    ===================================================== */

    .engine-brain-intro{
        right:8px;
        bottom:7px;
        left:8px;

        width:auto;

        padding:
            7px
            9px;

        border-radius:11px;

        font-size:7px;

        line-height:1.35;
    }

    .engine-brain-intro strong{
        margin-bottom:2px;

        font-size:7px;
    }

    .engine-hero.has-brain-intro{
        padding-bottom:54px;
    }


    /* =====================================================
       MOBILE NAV
    ===================================================== */

    .bottom-nav.engine-bottom-nav{
        bottom:
            max(
                6px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        width:
            calc(
                100% - 14px
            );

        height:58px;

        padding:
            0
            3px;

        border-radius:20px;
    }

    .engine-bottom-nav
    .nav-btn{
        height:49px;

        font-size:7px;
    }

    .engine-bottom-nav
    .nav-icon{
        width:24px;
        height:24px;

        margin-bottom:1px;
    }

    .engine-bottom-nav
    .nav-brain-btn{
        flex-basis:58px;

        width:58px;
        height:58px;

        margin-top:-17px;
    }

    .nav-brain-core{
        width:34px;
        height:34px;
    }

    .nav-brain-label{
        top:43px;

        width:96px;

        font-size:5px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:390px){

    .vaero-engine-home{
        grid-template-columns:
            minmax(0,1.3fr)
            minmax(0,.9fr);

        grid-template-rows:
            34px
            minmax(128px,1.1fr)
            auto
            minmax(94px,.72fr);

        gap:6px;
    }

    .engine-home-topbar{
        min-height:34px;
    }

    .engine-brand-main{
        font-size:15px;
    }

    .engine-brand-sub{
        font-size:4.5px;
    }

    .engine-icon-btn{
        width:27px;
        height:27px;

        flex-basis:27px;
    }

    .engine-hero{
        padding:
            13px
            12px;
    }

    .engine-hero-copy{
        padding-right:76px;
    }

    .engine-hero h1{
        font-size:24px;
    }

    .engine-hero-copy > p{
        max-width:175px;

        font-size:8px;
    }

    .engine-brain-orb{
        top:22px;
        right:2px;

        width:78px;
        height:78px;
    }

    .brain-core{
        width:37px;
        height:37px;

        gap:7px;
    }

    .brain-eye{
        width:6px;
        height:6px;
    }

    .engine-shortcut-card{
        min-height:54px;

        padding:
            5px
            2px;
    }

    .engine-shortcut-icon{
        width:22px;
        height:22px;

        flex-basis:22px;

        font-size:12px;
    }

    .engine-shortcut-card strong{
        font-size:6px;
    }

    .engine-active-world{
        padding:10px;
    }

    .engine-active-world h2{
        font-size:16px;
    }

    .engine-world-enter{
        margin-top:6px;
    }

    .engine-activity{
        padding:
            8px
            7px;
    }

    .engine-activity-item{
        padding:
            3px
            0;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width:350px){

    .vaero-engine-home{
        grid-template-columns:
            minmax(0,1.34fr)
            minmax(0,.86fr);

        gap:5px;
    }

    .engine-brand-main{
        font-size:14px;

        letter-spacing:.2em;
    }

    .engine-top-actions{
        gap:3px;
    }

    .engine-icon-btn{
        width:25px;
        height:25px;

        flex-basis:25px;

        font-size:11px;
    }

    .engine-hero{
        padding:
            12px
            10px;
    }

    .engine-hero-copy{
        padding-right:69px;
    }

    .engine-hero h1{
        max-width:180px;

        font-size:22px;
    }

    .engine-hero-copy > p{
        max-width:156px;

        font-size:7px;
    }

    .engine-brain-orb{
        width:70px;
        height:70px;
    }

    .brain-core{
        width:34px;
        height:34px;
    }

}


/* =========================================================
   SHORT HEIGHT
   LAPTOP / SMALL MOBILE VIEWPORT
========================================================= */

@media (max-height:720px){

    .vaero-engine-home{
        grid-template-rows:
            34px
            minmax(120px,1fr)
            auto
            minmax(88px,.68fr);

        gap:6px;
    }

    .engine-home-topbar{
        min-height:34px;
    }

    .engine-hero{
        padding-top:14px;
        padding-bottom:14px;
    }

    .engine-hero h1{
        font-size:
            clamp(
                27px,
                3.8vw,
                42px
            );
    }

    .engine-hero-copy > p{
        margin-top:7px;
    }

    .engine-status-pill{
        margin-top:8px;
    }

    .engine-brain-orb{
        width:125px;
        height:125px;
    }

    .brain-core{
        width:54px;
        height:54px;
    }

    .engine-shortcut-card{
        min-height:52px;
    }

    .engine-active-world{
        padding-top:10px;
        padding-bottom:10px;
    }

    .engine-world-enter{
        margin-top:6px;
    }

    .engine-activity-item{
        padding-top:4px;
        padding-bottom:4px;
    }

}


/* =========================================================
   VERY SHORT HEIGHT
========================================================= */

@media (max-height:620px){

    .vaero-engine-home{
        grid-template-rows:
            32px
            minmax(108px,.9fr)
            auto
            minmax(78px,.6fr);

        gap:5px;
    }

    .engine-brand-main{
        font-size:16px;
    }

    .engine-brand-sub{
        margin-top:3px;
    }

    .engine-icon-btn{
        width:28px;
        height:28px;

        flex-basis:28px;
    }

    .engine-hero{
        padding-top:11px;
        padding-bottom:11px;
    }

    .engine-welcome{
        margin-bottom:5px;
    }

    .engine-hero h1{
        font-size:
            clamp(
                24px,
                3.4vw,
                36px
            );
    }

    .engine-hero-copy > p{
        max-width:390px;

        margin-top:5px;

        font-size:9px;

        line-height:1.35;
    }

    .engine-status-pill{
        margin-top:6px;

        padding-top:5px;
        padding-bottom:5px;
    }

    .engine-brain-orb{
        width:108px;
        height:108px;
    }

    .brain-core{
        width:48px;
        height:48px;
    }

    .engine-shortcut-card{
        min-height:48px;

        padding-top:6px;
        padding-bottom:6px;
    }

    .engine-active-world{
        padding-top:8px;
        padding-bottom:8px;
    }

    .engine-active-world h2{
        margin-top:5px;
    }

    .engine-active-count{
        margin-top:4px;
    }

    .engine-world-enter{
        margin-top:5px;

        padding-top:5px;
        padding-bottom:5px;
    }

    .engine-activity{
        padding-top:8px;
        padding-bottom:8px;
    }

    .engine-activity-item{
        padding:
            3px
            0;
    }

}


/* =========================================================
   MOBILE + SHORT HEIGHT
========================================================= */

@media
(
    max-width:650px
)
and
(
    max-height:720px
){

    .engine-hero{
        padding-top:11px;
        padding-bottom:11px;
    }

    .engine-welcome{
        margin-bottom:4px;
    }

    .engine-hero h1{
        font-size:23px;
    }

    .engine-hero-copy > p{
        margin-top:5px;
    }

    .engine-status-pill{
        margin-top:6px;
    }

    .engine-brain-orb{
        top:18px;

        width:76px;
        height:76px;
    }

    .brain-core{
        width:36px;
        height:36px;
    }

    .engine-shortcut-card{
        min-height:51px;
    }

    .engine-active-world h2{
        font-size:16px;
    }

}


/* =========================================================
   MOBILE + VERY SHORT HEIGHT
========================================================= */

@media
(
    max-width:650px
)
and
(
    max-height:620px
){

    .vaero-engine-home{
        grid-template-rows:
            30px
            minmax(100px,.88fr)
            auto
            minmax(72px,.58fr);
    }

    .engine-home-topbar{
        min-height:30px;
    }

    .engine-brand-main{
        font-size:14px;
    }

    .engine-icon-btn{
        width:25px;
        height:25px;

        flex-basis:25px;
    }

    .engine-hero{
        padding:
            9px
            10px;
    }

    .engine-hero-copy{
        padding-right:68px;
    }

    .engine-welcome{
        font-size:6px;
    }

    .engine-hero h1{
        font-size:20px;
    }

    .engine-hero-copy > p{
        max-width:170px;

        font-size:7px;
    }

    .engine-status-pill{
        padding:
            4px
            6px;
    }

    .engine-status-pill strong{
        font-size:6px;
    }

    .engine-brain-orb{
        top:14px;
        right:2px;

        width:66px;
        height:66px;
    }

    .brain-core{
        width:31px;
        height:31px;

        gap:6px;
    }

    .brain-eye{
        width:5px;
        height:5px;
    }

    .engine-shortcut-card{
        min-height:46px;
    }

    .engine-shortcut-icon{
        width:20px;
        height:20px;

        flex-basis:20px;
    }

    .engine-active-world{
        padding:
            7px
            8px;
    }

    .engine-active-world h2{
        margin-top:4px;

        font-size:14px;
    }

    .engine-active-count{
        font-size:6px;
    }

    .engine-world-enter{
        margin-top:4px;

        padding:
            4px
            6px;
    }

    .engine-activity{
        padding:
            6px;
    }

    .engine-activity-item{
        padding:
            2px
            0;
    }

}


/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media
(
    orientation:landscape
)
and
(
    max-height:520px
){

    .vaero-engine-home{
        max-width:1100px;

        grid-template-columns:
            minmax(0,1.5fr)
            minmax(220px,.85fr);

        grid-template-rows:
            30px
            minmax(92px,.92fr)
            auto
            minmax(66px,.56fr);

        gap:5px;
    }

    .engine-hero{
        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            90px;

        padding:
            9px
            14px;
    }

    .engine-hero-copy{
        padding-right:0;
    }

    .engine-hero h1{
        max-width:480px;

        font-size:
            clamp(
                22px,
                4vw,
                30px
            );
    }

    .engine-hero-copy > p{
        max-width:380px;

        font-size:7px;
    }

    .engine-brain-orb{
        position:relative;

        top:auto;
        right:auto;

        width:72px;
        height:72px;
    }

    .brain-core{
        width:34px;
        height:34px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover:none){

    .engine-icon-btn:hover,
    .engine-shortcut-card:hover,
    .engine-world-enter:hover,
    .engine-brain-intro:hover,
    .engine-brain-orb:hover,
    .engine-bottom-nav
    .nav-brain-btn:hover{
        transform:none;
    }

    .engine-brain-orb:hover
    .brain-orbit-1{
        transform:
            rotate(-8deg)
            scaleY(.93);
    }

    .engine-brain-orb:hover
    .brain-orbit-2{
        transform:
            rotate(33deg)
            scaleY(.82);
    }

    .engine-brain-orb:hover
    .brain-orbit-3{
        transform:
            rotate(-28deg)
            scaleY(.9);
    }

}


/* =========================================================
   STATUS ANIMATION
========================================================= */

@keyframes vaero-home-status-pulse{

    0%{
        transform:scale(.55);

        opacity:.6;
    }

    60%{
        transform:scale(1.45);

        opacity:0;
    }

    100%{
        transform:scale(1.45);

        opacity:0;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    .engine-status-dot::after{
        animation:none;
    }

    .engine-icon-btn,
    .engine-brain-orb,
    .brain-orbit,
    .engine-brain-intro,
    .engine-shortcut-card,
    .engine-shortcut-arrow,
    .engine-world-enter,
    .engine-bottom-nav
    .nav-brain-btn{
        transition:none;
    }

}


/* =========================================================
   HIGH CONTRAST SUPPORT
========================================================= */

@media (prefers-contrast:more){

    .engine-hero,
    .engine-shortcut-card,
    .engine-active-world,
    .engine-activity,
    .engine-icon-btn{
        border-color:
            rgba(255,255,255,.15);
    }

    .engine-hero-copy > p,
    .engine-shortcut-card small,
    .engine-activity-item
    > span:nth-child(2){
        color:
            rgba(240,242,245,.68);
    }

}


/* =========================================================
   HOME VIEWPORT SAFETY
   ---------------------------------------------------------
   Final protection layer:
   - body never scrolls
   - home never escapes engine
   - activity becomes its own scroll area when needed
========================================================= */

.vaero-engine-home,
.engine-hero,
.engine-shortcuts,
.engine-shortcuts-grid,
.engine-active-world,
.engine-activity{
    box-sizing:border-box;
}

.vaero-engine-home > *{
    min-width:0;
}

.engine-hero,
.engine-active-world,
.engine-activity{
    min-height:0;
}

.engine-activity-list{
    overscroll-behavior-y:contain;
}

/* =========================================================
   ENGINE APPLICATION SHELF
========================================================= */

.engine-app-shelf{
    min-width:0;
    margin-top:9px;
}

.engine-app-shelf .engine-section-label{
    margin-bottom:5px;
}

.engine-app-shelf-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(132px,1fr);
    gap:6px;

    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;

    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.engine-app-shelf-grid::-webkit-scrollbar{
    display:none;
}

.engine-app-shelf-item{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    align-items:center;
    gap:8px;

    min-width:0;
    min-height:48px;

    margin:0;
    padding:7px 9px;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:14px;

    outline:none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.028),
            rgba(255,255,255,.008)
        );

    color:var(--engine-home-text);

    font:inherit;
    text-align:left;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform .18s var(--engine-home-ease),
        border-color .18s ease,
        background .18s ease;
}

.engine-app-shelf-item:hover{
    transform:translateY(-1px);

    border-color:
        rgba(215,171,99,.15);

    background:
        rgba(255,255,255,.038);
}

.engine-app-shelf-item:active{
    transform:scale(.985);
}

.engine-app-shelf-item:focus-visible{
    outline:
        1px solid
        rgba(215,171,99,.45);

    outline-offset:2px;
}

.engine-app-shelf-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    border:
        1px solid
        rgba(215,171,99,.1);

    border-radius:10px;

    background:
        rgba(215,171,99,.045);

    color:
        rgba(237,197,116,.88);

    font-size:14px;
}

.engine-app-shelf-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;
}

.engine-app-shelf-copy strong{
    overflow:hidden;

    color:
        rgba(246,243,236,.92);

    font-size:9px;
    font-weight:650;
    line-height:1.15;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.engine-app-shelf-copy small{
    margin-top:3px;
    overflow:hidden;

    color:
        rgba(226,230,236,.38);

    font-size:7px;
    line-height:1.15;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   APPLICATION SHELF — MOBILE
========================================================= */

@media (max-width:650px){

    .engine-app-shelf{
        margin-top:6px;
    }

    .engine-app-shelf-grid{
        grid-auto-columns:
            minmax(
                118px,
                42vw
            );

        gap:5px;
    }

    .engine-app-shelf-item{
        grid-template-columns:
            28px
            minmax(0,1fr);

        min-height:46px;

        padding:
            6px
            7px;

        border-radius:12px;
    }

    .engine-app-shelf-icon{
        width:28px;
        height:28px;

        border-radius:9px;

        font-size:13px;
    }

    .engine-app-shelf-copy strong{
        font-size:8px;
    }

    .engine-app-shelf-copy small{
        font-size:6.5px;
    }

}


/* =========================================================
   APPLICATION SHELF — TOUCH / MOTION
========================================================= */

@media (hover:none){

    .engine-app-shelf-item:hover{
        transform:none;
    }

}

@media (prefers-reduced-motion:reduce){

    .engine-app-shelf-item{
        transition:none;
    }

}


/* =========================================================
   END — VAERO ENGINE HOME
========================================================= */


/* =========================================================
   SPATIAL HOME — WORLD STAGE
========================================================= */

.engine-spatial-home{
    position:relative;

    width:100%;
    height:100%;
    min-height:0;

    overflow:hidden;

    border-radius:
        var(--engine-home-radius-lg);

    background:
        radial-gradient(
            circle at 50% 78%,
            rgba(38,98,145,.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 16%,
            rgba(102,151,191,.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #020711 0%,
            #06101a 48%,
            #071521 100%
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.035),

        0
        24px
        70px
        rgba(0,0,0,.24);

    isolation:isolate;
}


.engine-world-stage{
    position:relative;

    width:100%;
    height:100%;
    min-height:0;

    overflow:hidden;

    isolation:isolate;
}


.engine-space-field{
    position:absolute;

    inset:0;

    z-index:-4;

    pointer-events:none;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 92%,
            rgba(75,143,194,.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(3,8,15,.2),
            rgba(2,7,13,.58)
        );
}


.engine-star-field{
    position:absolute;

    inset:-10%;

    opacity:.8;

    background-repeat:repeat;
}


.engine-star-field-a{
    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.72) 0 1px,
            transparent 1.25px
        );

    background-size:
        92px
        92px;

    transform:
        rotate(4deg);
}


.engine-star-field-b{
    background-image:
        radial-gradient(
            circle,
            rgba(135,189,229,.5) 0 1px,
            transparent 1.25px
        );

    background-size:
        141px
        141px;

    transform:
        rotate(-5deg)
        scale(1.04);
}


.engine-star-field-c{
    background-image:
        radial-gradient(
            circle,
            rgba(213,170,98,.36) 0 1px,
            transparent 1.3px
        );

    background-size:
        213px
        213px;

    transform:
        translateY(20px);
}


.engine-stage-welcome{
    position:absolute;

    top:28px;
    left:32px;

    z-index:8;

    display:flex;
    flex-direction:column;

    gap:4px;

    pointer-events:none;
}


.engine-stage-welcome span{
    color:
        var(--engine-home-gold);

    font-size:11px;
    font-weight:720;

    letter-spacing:.015em;
}


.engine-stage-welcome small{
    color:
        rgba(230,235,240,.38);

    font-size:9px;

    letter-spacing:.03em;
}


.engine-world-globe{
    position:absolute;

    left:50%;
    bottom:-22%;

    z-index:1;

    width:
        min(
            76vw,
            860px
        );

    aspect-ratio:1;

    transform:
        translateX(-50%);

    padding:0;
    margin:0;

    border:0;
    outline:0;

    border-radius:50%;

    overflow:visible;

    cursor:pointer;

    background:
        radial-gradient(
            circle at 38% 30%,
            rgba(132,190,225,.34),
            transparent 16%
        ),
        radial-gradient(
            circle at 61% 36%,
            rgba(68,127,166,.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 47% 53%,
            #18445c 0%,
            #0d2c42 38%,
            #071d2d 62%,
            #03101c 100%
        );

    box-shadow:
        inset
        -40px
        -58px
        100px
        rgba(0,0,0,.55),

        inset
        34px
        20px
        80px
        rgba(90,166,209,.08),

        0
        -18px
        80px
        rgba(73,145,194,.16),

        0
        0
        0
        1px
        rgba(147,202,232,.08);

    transition:
        transform
        .5s
        var(--engine-home-ease),

        filter
        .5s
        ease;
}


.engine-world-globe:hover{
    transform:
        translateX(-50%)
        scale(1.015);

    filter:
        brightness(1.06);
}


.engine-world-atmosphere{
    position:absolute;

    inset:-1.5%;

    border-radius:50%;

    pointer-events:none;

    box-shadow:
        0
        -8px
        48px
        rgba(111,180,222,.22),

        0
        -1px
        0
        rgba(187,225,244,.18);

    opacity:.8;
}


.engine-world-surface{
    position:absolute;

    inset:5%;

    overflow:hidden;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at 24% 34%,
            rgba(132,160,104,.19) 0 12%,
            transparent 13%
        ),
        radial-gradient(
            ellipse at 66% 31%,
            rgba(94,132,94,.17) 0 10%,
            transparent 11%
        ),
        radial-gradient(
            ellipse at 54% 61%,
            rgba(82,115,84,.18) 0 13%,
            transparent 14%
        ),
        radial-gradient(
            ellipse at 76% 58%,
            rgba(103,142,106,.14) 0 9%,
            transparent 10%
        ),
        radial-gradient(
            ellipse at 38% 72%,
            rgba(74,107,82,.16) 0 12%,
            transparent 13%
        );

    opacity:.8;

    filter:
        blur(1px);
}


.engine-world-light{
    position:absolute;

    top:13%;
    left:18%;

    width:42%;
    height:26%;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(180,219,241,.12),
            transparent 70%
        );

    filter:
        blur(18px);

    transform:
        rotate(-17deg);

    pointer-events:none;
}


.engine-world-identity{
    position:absolute;

    left:50%;
    bottom:21%;

    z-index:5;

    transform:
        translateX(-50%);

    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;

    pointer-events:none;
}


.engine-world-kicker{
    margin-bottom:6px;

    color:
        rgba(217,180,110,.72);

    font-size:8px;
    font-weight:760;

    letter-spacing:.24em;
}


.engine-world-identity strong{
    color:
        rgba(247,248,249,.94);

    font-size:
        clamp(
            18px,
            2.2vw,
            28px
        );

    font-weight:560;

    letter-spacing:-.025em;
}


.engine-world-identity small{
    margin-top:5px;

    color:
        rgba(228,233,238,.42);

    font-size:9px;
}


.engine-brain-presence{
    position:absolute;

    top:50%;
    left:50%;

    z-index:10;

    transform:
        translate(
            -50%,
            -56%
        );

    display:flex;

    flex-direction:column;

    align-items:center;

    width:
        min(
            560px,
            calc(100% - 60px)
        );

    text-align:center;
}


.engine-brain-presence .engine-brain-orb{
    width:118px;
    height:118px;

    margin:0 0 12px;

    filter:
        drop-shadow(
            0
            0
            28px
            rgba(87,151,203,.17)
        );
}


.engine-brain-invitation{
    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;
}


.engine-brain-invitation > span{
    color:
        var(--engine-home-gold);

    font-size:9px;
    font-weight:740;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.engine-brain-invitation h1{
    margin:
        7px
        0
        11px;

    color:
        rgba(247,248,249,.96);

    font-size:
        clamp(
            24px,
            3.4vw,
            42px
        );

    font-weight:540;

    line-height:1.02;

    letter-spacing:-.045em;
}


.engine-brain-prompt{
    display:flex;

    align-items:center;
    justify-content:space-between;

    width:
        min(
            430px,
            100%
        );

    min-height:42px;

    padding:
        0
        14px
        0
        16px;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius:999px;

    background:
        rgba(4,12,20,.58);

    color:
        rgba(231,235,239,.48);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.02),

        0
        14px
        38px
        rgba(0,0,0,.16);

    font:inherit;

    font-size:10px;

    cursor:pointer;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:
        border-color
        .2s
        ease,

        background
        .2s
        ease,

        color
        .2s
        ease;
}


.engine-brain-prompt:hover{
    border-color:
        rgba(218,179,108,.22);

    background:
        rgba(8,18,28,.72);

    color:
        rgba(242,244,246,.72);
}


.engine-brain-prompt span{
    color:
        var(--engine-home-gold-bright);
}


.engine-intent-dock{
    position:absolute;

    left:50%;
    bottom:55px;

    z-index:11;

    transform:
        translateX(-50%);

    display:flex;

    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:6px;

    width:
        min(
            760px,
            calc(100% - 250px)
        );
}


.engine-intent-dock button{
    min-height:28px;

    padding:
        0
        10px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:999px;

    background:
        rgba(3,10,18,.48);

    color:
        rgba(226,231,235,.55);

    font:inherit;

    font-size:8px;
    font-weight:560;

    cursor:pointer;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    transition:
        transform
        .18s
        ease,

        border-color
        .18s
        ease,

        color
        .18s
        ease,

        background
        .18s
        ease;
}


.engine-intent-dock button:hover{
    transform:
        translateY(-1px);

    border-color:
        rgba(215,171,99,.18);

    color:
        rgba(242,230,203,.88);

    background:
        rgba(19,22,24,.62);
}


.engine-now-panel{
    position:absolute;

    right:24px;
    top:50%;

    z-index:9;

    transform:
        translateY(-50%);

    width:190px;

    padding:
        14px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:
        18px;

    background:
        rgba(3,10,17,.44);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.018),

        0
        18px
        46px
        rgba(0,0,0,.14);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


.engine-now-heading{
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-bottom:10px;

    color:
        rgba(233,235,238,.68);

    font-size:8px;
    font-weight:760;

    letter-spacing:.14em;
}


.engine-now-live{
    width:6px;
    height:6px;

    border-radius:50%;

    background:
        var(--engine-home-green);

    box-shadow:
        0
        0
        12px
        rgba(98,217,184,.65);
}


.engine-now-item{
    display:flex;

    flex-direction:column;

    gap:3px;

    padding:
        8px
        0;

    border-top:
        1px solid
        rgba(255,255,255,.045);
}


.engine-now-item small{
    color:
        rgba(221,226,231,.3);

    font-size:7px;

    letter-spacing:.04em;
}


.engine-now-item strong{
    overflow:hidden;

    color:
        rgba(239,241,243,.72);

    font-size:9px;
    font-weight:570;

    line-height:1.3;

    text-overflow:ellipsis;
    white-space:nowrap;
}


.engine-world-bridge{
    position:absolute;

    left:24px;
    bottom:22px;

    z-index:12;

    display:flex;

    align-items:center;

    gap:7px;
}


.engine-world-bridge button{
    min-height:31px;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:999px;

    background:
        rgba(2,9,16,.5);

    color:
        rgba(227,231,235,.47);

    font:inherit;

    font-size:8px;
    font-weight:580;

    cursor:pointer;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.engine-world-bridge button:hover{
    color:
        var(--engine-home-gold-bright);

    border-color:
        rgba(215,171,99,.16);
}


@media (max-width: 900px){

    .engine-now-panel{
        display:none;
    }

    .engine-intent-dock{
        width:
            calc(100% - 40px);
    }

    .engine-world-globe{
        width:
            min(
                105vw,
                760px
            );

        bottom:-13%;
    }

}


@media (max-width: 620px){

    .engine-stage-welcome{
        top:18px;
        left:18px;
    }

    .engine-brain-presence{
        top:46%;

        width:
            calc(100% - 34px);
    }

    .engine-brain-presence .engine-brain-orb{
        width:94px;
        height:94px;
    }

    .engine-intent-dock{
        bottom:68px;

        width:
            calc(100% - 24px);
    }

    .engine-world-bridge{
        left:50%;
        bottom:18px;

        transform:
            translateX(-50%);

        width:
            calc(100% - 24px);

        justify-content:center;
    }

    .engine-world-identity{
        bottom:26%;
    }

}


/* =========================================================
   ENGINE SHELL IDENTITY
========================================================= */

.engine-shell-identity{
    position:relative;

    z-index:30;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:18px;

    width:100%;

    min-height:48px;

    padding:
        0
        6px
        0
        8px;
}


.engine-shell-identity > div{
    display:flex;

    align-items:baseline;

    gap:10px;
}


.engine-shell-identity > div > span{
    color:
        rgba(247,246,242,.96);

    font-size:12px;
    font-weight:760;

    letter-spacing:.18em;
}


.engine-shell-identity > div > small{
    color:
        rgba(215,171,99,.68);

    font-size:8px;
    font-weight:650;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.engine-system-view-btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:32px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:999px;

    background:
        rgba(4,11,19,.46);

    color:
        rgba(234,237,240,.64);

    font:inherit;

    font-size:8px;
    font-weight:650;

    letter-spacing:.02em;

    cursor:pointer;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    transition:
        transform
        .18s
        ease,

        color
        .18s
        ease,

        border-color
        .18s
        ease,

        background
        .18s
        ease;
}


.engine-system-view-btn:hover{
    transform:
        translateY(-1px);

    color:
        var(--engine-home-gold-bright);

    border-color:
        rgba(215,171,99,.2);

    background:
        rgba(12,20,28,.68);
}


.engine-system-view-btn span{
    font-size:11px;
}


@media (max-width: 620px){

    .engine-shell-identity{
        min-height:42px;

        padding:
            0
            2px;
    }


    .engine-shell-identity > div > small{
        display:none;
    }


    .engine-system-view-btn{
        min-height:29px;

        padding:
            0
            10px;
    }

}

/* =========================================================
   SPATIAL HOME — FINAL GRID OVERRIDE
========================================================= */

.vaero-engine-home{
    grid-template-columns:
        minmax(0,1fr) !important;

    grid-template-rows:
        44px
        48px
        minmax(0,1fr) !important;

    gap:8px !important;
}

.engine-home-topbar{
    grid-column:1 !important;
    grid-row:1 !important;
}

.engine-shell-identity{
    grid-column:1 !important;
    grid-row:2 !important;
}

.engine-spatial-home{
    grid-column:1 !important;
    grid-row:3 !important;

    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
}

/* =========================================================
   SPATIAL HOME — WORLD / BRAIN COMPOSITION
========================================================= */

.engine-world-globe{
    left:37% !important;
    top:50% !important;
    bottom:auto !important;

    width:min(55vw,680px) !important;

    transform:
        translate(-50%,-50%) !important;
}

.engine-world-globe:hover{
    transform:
        translate(-50%,-50%)
        scale(1.018) !important;
}

.engine-world-surface{
    background:
        radial-gradient(
            ellipse at 27% 29%,
            rgba(122,156,100,.34) 0 10%,
            transparent 11%
        ),
        radial-gradient(
            ellipse at 59% 24%,
            rgba(87,132,92,.29) 0 13%,
            transparent 14%
        ),
        radial-gradient(
            ellipse at 71% 49%,
            rgba(111,143,94,.26) 0 11%,
            transparent 12%
        ),
        radial-gradient(
            ellipse at 43% 62%,
            rgba(75,115,83,.3) 0 15%,
            transparent 16%
        ),
        radial-gradient(
            ellipse at 68% 75%,
            rgba(73,104,77,.2) 0 9%,
            transparent 10%
        ),
        radial-gradient(
            circle at 48% 48%,
            rgba(24,79,105,.2),
            rgba(7,32,50,.08) 62%,
            transparent 63%
        ) !important;

    opacity:.92 !important;
}

.engine-world-light{
    top:10% !important;
    left:14% !important;

    width:47% !important;
    height:32% !important;

    opacity:.9;
}

.engine-world-identity{
    left:37% !important;
    bottom:8% !important;

    transform:
        translateX(-50%) !important;
}

.engine-brain-presence{
    top:43% !important;
    left:auto !important;
    right:5.5% !important;

    transform:
        translateY(-50%) !important;

    width:min(360px,30vw) !important;

    align-items:flex-start !important;
    text-align:left !important;
}

.engine-brain-presence .engine-brain-orb{
    width:104px !important;
    height:104px !important;

    margin:
        0
        0
        12px
        10px !important;
}

.engine-brain-invitation{
    align-items:flex-start !important;
}

.engine-brain-invitation h1{
    font-size:
        clamp(
            25px,
            2.8vw,
            38px
        ) !important;

    text-align:left !important;
}

.engine-brain-prompt{
    width:100% !important;
}

.engine-now-panel{
    right:5.5% !important;
    top:auto !important;
    bottom:78px !important;

    transform:none !important;

    width:min(360px,30vw) !important;
}

.engine-intent-dock{
    left:37% !important;
    bottom:24px !important;

    width:min(720px,60vw) !important;
}

.engine-world-bridge{
    left:22px !important;
    bottom:22px !important;
}

.engine-stage-welcome{
    top:24px !important;
    left:26px !important;
}

@media (max-width: 980px){

    .engine-world-globe{
        left:50% !important;
        width:min(76vw,650px) !important;
    }

    .engine-world-identity{
        left:50% !important;
    }

    .engine-brain-presence{
        right:24px !important;
        width:300px !important;
    }

    .engine-now-panel{
        display:none !important;
    }

    .engine-intent-dock{
        left:50% !important;
        width:calc(100% - 40px) !important;
    }

}

/* =========================================================
   WORLD RENDERER V1
========================================================= */

.engine-world-system{
    position:absolute;

    left:37%;
    top:50%;

    z-index:3;

    width:min(48vw,620px);
    aspect-ratio:1;

    transform:
        translate(-50%,-50%);
}


/* ---------- PLANET ---------- */

.engine-world-system .engine-world-globe{
    position:absolute !important;

    inset:0 !important;

    left:0 !important;
    top:0 !important;
    bottom:auto !important;

    width:100% !important;
    height:100% !important;

    transform:none !important;

    overflow:hidden !important;

    background:
        radial-gradient(
            circle at 32% 24%,
            rgba(122,190,226,.22),
            transparent 17%
        ),
        radial-gradient(
            circle at 53% 48%,
            #17506a 0%,
            #0d3951 40%,
            #08273b 68%,
            #03131f 100%
        ) !important;

    box-shadow:
        inset
        -72px
        -48px
        110px
        rgba(0,0,0,.64),

        inset
        24px
        12px
        70px
        rgba(111,183,222,.12),

        0
        0
        0
        1px
        rgba(151,210,238,.10),

        0
        0
        60px
        rgba(62,139,185,.18),

        0
        26px
        80px
        rgba(0,0,0,.30) !important;

    transition:
        transform
        .45s
        var(--engine-home-ease),

        filter
        .45s
        ease !important;
}


.engine-world-system .engine-world-globe:hover{
    transform:
        scale(1.015) !important;

    filter:
        brightness(1.05);
}


/* ---------- OCEAN ---------- */

.engine-world-system .engine-world-surface{
    position:absolute;

    inset:0 !important;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at 35% 30%,
            rgba(93,165,202,.17),
            transparent 24%
        ),
        radial-gradient(
            ellipse at 68% 63%,
            rgba(30,95,129,.14),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(26,82,109,.15),
            rgba(2,20,32,.08)
        ) !important;

    opacity:1 !important;

    filter:none !important;
}


/* ---------- CONTINENTS ---------- */

.engine-world-land{
    position:absolute;

    z-index:3;

    display:block;

    pointer-events:none;

    background:
        linear-gradient(
            145deg,
            rgba(91,128,88,.92),
            rgba(49,91,78,.88)
        );

    box-shadow:
        inset
        8px
        5px
        18px
        rgba(164,186,128,.10),

        inset
        -12px
        -10px
        22px
        rgba(8,38,33,.32),

        0
        0
        12px
        rgba(38,82,69,.15);

    filter:
        saturate(.82);
}


.engine-world-land-a{
    left:15%;
    top:20%;

    width:34%;
    height:29%;

    clip-path:
        polygon(
            4% 34%,
            18% 11%,
            43% 4%,
            63% 15%,
            82% 10%,
            95% 31%,
            80% 44%,
            73% 66%,
            55% 72%,
            48% 94%,
            28% 86%,
            20% 63%,
            6% 56%
        );

    transform:
        rotate(-11deg);
}


.engine-world-land-b{
    left:48%;
    top:27%;

    width:37%;
    height:28%;

    clip-path:
        polygon(
            3% 30%,
            20% 10%,
            45% 7%,
            58% 16%,
            77% 11%,
            96% 30%,
            85% 47%,
            65% 48%,
            60% 73%,
            39% 94%,
            29% 70%,
            9% 61%
        );

    transform:
        rotate(8deg);
}


.engine-world-land-c{
    left:38%;
    top:57%;

    width:27%;
    height:25%;

    clip-path:
        polygon(
            19% 3%,
            61% 10%,
            91% 28%,
            78% 49%,
            88% 66%,
            60% 91%,
            37% 83%,
            20% 96%,
            11% 66%,
            2% 47%
        );

    transform:
        rotate(14deg);
}


/* ---------- CITY LIGHTS ---------- */

.engine-world-city-lights{
    position:absolute;

    inset:10%;

    z-index:4;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 27% 35%,
            rgba(247,208,123,.96) 0 1.1px,
            transparent 1.8px
        ),
        radial-gradient(
            circle at 35% 30%,
            rgba(246,192,96,.8) 0 1px,
            transparent 1.7px
        ),
        radial-gradient(
            circle at 58% 36%,
            rgba(255,215,132,.92) 0 1.2px,
            transparent 1.9px
        ),
        radial-gradient(
            circle at 66% 43%,
            rgba(244,190,89,.78) 0 1px,
            transparent 1.8px
        ),
        radial-gradient(
            circle at 53% 66%,
            rgba(255,206,107,.9) 0 1.15px,
            transparent 1.9px
        ),
        radial-gradient(
            circle at 42% 69%,
            rgba(242,186,88,.75) 0 1px,
            transparent 1.7px
        );

    filter:
        drop-shadow(
            0
            0
            5px
            rgba(239,183,82,.6)
        );

    opacity:.9;
}


/* ---------- CLOUDS ---------- */

.engine-world-clouds{
    position:absolute;

    inset:4%;

    z-index:5;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at 29% 28%,
            rgba(232,242,247,.12),
            transparent 22%
        ),
        radial-gradient(
            ellipse at 63% 20%,
            rgba(233,242,248,.11),
            transparent 19%
        ),
        radial-gradient(
            ellipse at 68% 61%,
            rgba(225,239,247,.09),
            transparent 20%
        ),
        radial-gradient(
            ellipse at 32% 70%,
            rgba(225,239,247,.08),
            transparent 17%
        );

    filter:
        blur(8px);

    opacity:.86;

    transform:
        rotate(-8deg);
}


/* ---------- ATMOSPHERE ---------- */

.engine-world-system .engine-world-atmosphere{
    inset:-1.2% !important;

    z-index:8;

    box-shadow:
        inset
        0
        0
        28px
        rgba(96,170,214,.12),

        0
        0
        0
        1px
        rgba(155,211,240,.12),

        0
        0
        42px
        rgba(84,162,208,.28),

        0
        -8px
        62px
        rgba(108,185,224,.18) !important;
}


.engine-world-system .engine-world-light{
    z-index:7;

    top:7% !important;
    left:9% !important;

    width:48% !important;
    height:35% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(206,235,250,.18),
            transparent 69%
        ) !important;

    filter:
        blur(22px) !important;
}


/* =========================================================
   LIVE WORLD NODES
========================================================= */

.engine-world-node{
    position:absolute;

    z-index:14;

    display:grid;

    grid-template-columns:
        9px
        auto;

    grid-template-rows:
        auto
        auto;

    column-gap:8px;

    min-width:118px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(157,208,235,.12);

    border-radius:13px;

    background:
        rgba(3,13,22,.72);

    color:
        rgba(240,244,246,.86);

    box-shadow:
        0
        12px
        30px
        rgba(0,0,0,.25),

        inset
        0
        1px
        0
        rgba(255,255,255,.035);

    font:inherit;

    text-align:left;

    cursor:pointer;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transition:
        transform
        .2s
        ease,

        border-color
        .2s
        ease,

        background
        .2s
        ease;
}


.engine-world-node:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(118,191,229,.30);

    background:
        rgba(6,22,34,.88);
}


.engine-world-node i{
    grid-column:1;
    grid-row:1 / span 2;

    align-self:center;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        #79d7ff;

    box-shadow:
        0
        0
        0
        4px
        rgba(92,193,236,.08),

        0
        0
        14px
        rgba(92,193,236,.72);
}


.engine-world-node span{
    grid-column:2;
    grid-row:1;

    font-size:9px;
    font-weight:680;

    white-space:nowrap;
}


.engine-world-node small{
    grid-column:2;
    grid-row:2;

    margin-top:2px;

    color:
        rgba(221,230,235,.38);

    font-size:7px;

    white-space:nowrap;
}


.engine-world-node-community{
    left:-3%;
    top:42%;
}


.engine-world-node-explore{
    right:-7%;
    top:30%;
}


.engine-world-node-active{
    right:2%;
    bottom:13%;
}


.engine-world-node-active i{
    background:
        var(--engine-home-gold-bright);

    box-shadow:
        0
        0
        0
        4px
        rgba(218,179,108,.08),

        0
        0
        14px
        rgba(218,179,108,.62);
}


/* ---------- WORLD LABEL ---------- */

.engine-world-identity{
    left:37% !important;

    bottom:6% !important;

    z-index:16;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 980px){

    .engine-world-system{
        left:46%;

        width:
            min(
                62vw,
                570px
            );
    }

    .engine-world-node{
        transform:
            scale(.92);
    }

}


@media (max-width: 720px){

    .engine-world-system{
        left:50%;

        top:44%;

        width:
            min(
                82vw,
                520px
            );
    }

    .engine-world-node{
        display:none;
    }

}

/* =========================================================
   WORLD RENDERER V1
========================================================= */

.engine-world-system{
    position:absolute;

    left:37%;
    top:50%;

    z-index:3;

    width:min(48vw,620px);
    aspect-ratio:1;

    transform:
        translate(-50%,-50%);
}


/* ---------- PLANET ---------- */

.engine-world-system .engine-world-globe{
    position:absolute !important;

    inset:0 !important;

    left:0 !important;
    top:0 !important;
    bottom:auto !important;

    width:100% !important;
    height:100% !important;

    transform:none !important;

    overflow:hidden !important;

    background:
        radial-gradient(
            circle at 32% 24%,
            rgba(122,190,226,.22),
            transparent 17%
        ),
        radial-gradient(
            circle at 53% 48%,
            #17506a 0%,
            #0d3951 40%,
            #08273b 68%,
            #03131f 100%
        ) !important;

    box-shadow:
        inset
        -72px
        -48px
        110px
        rgba(0,0,0,.64),

        inset
        24px
        12px
        70px
        rgba(111,183,222,.12),

        0
        0
        0
        1px
        rgba(151,210,238,.10),

        0
        0
        60px
        rgba(62,139,185,.18),

        0
        26px
        80px
        rgba(0,0,0,.30) !important;

    transition:
        transform
        .45s
        var(--engine-home-ease),

        filter
        .45s
        ease !important;
}


.engine-world-system .engine-world-globe:hover{
    transform:
        scale(1.015) !important;

    filter:
        brightness(1.05);
}


/* ---------- OCEAN ---------- */

.engine-world-system .engine-world-surface{
    position:absolute;

    inset:0 !important;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at 35% 30%,
            rgba(93,165,202,.17),
            transparent 24%
        ),
        radial-gradient(
            ellipse at 68% 63%,
            rgba(30,95,129,.14),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(26,82,109,.15),
            rgba(2,20,32,.08)
        ) !important;

    opacity:1 !important;

    filter:none !important;
}


/* ---------- CONTINENTS ---------- */

.engine-world-land{
    position:absolute;

    z-index:3;

    display:block;

    pointer-events:none;

    background:
        linear-gradient(
            145deg,
            rgba(91,128,88,.92),
            rgba(49,91,78,.88)
        );

    box-shadow:
        inset
        8px
        5px
        18px
        rgba(164,186,128,.10),

        inset
        -12px
        -10px
        22px
        rgba(8,38,33,.32),

        0
        0
        12px
        rgba(38,82,69,.15);

    filter:
        saturate(.82);
}


.engine-world-land-a{
    left:15%;
    top:20%;

    width:34%;
    height:29%;

    clip-path:
        polygon(
            4% 34%,
            18% 11%,
            43% 4%,
            63% 15%,
            82% 10%,
            95% 31%,
            80% 44%,
            73% 66%,
            55% 72%,
            48% 94%,
            28% 86%,
            20% 63%,
            6% 56%
        );

    transform:
        rotate(-11deg);
}


.engine-world-land-b{
    left:48%;
    top:27%;

    width:37%;
    height:28%;

    clip-path:
        polygon(
            3% 30%,
            20% 10%,
            45% 7%,
            58% 16%,
            77% 11%,
            96% 30%,
            85% 47%,
            65% 48%,
            60% 73%,
            39% 94%,
            29% 70%,
            9% 61%
        );

    transform:
        rotate(8deg);
}


.engine-world-land-c{
    left:38%;
    top:57%;

    width:27%;
    height:25%;

    clip-path:
        polygon(
            19% 3%,
            61% 10%,
            91% 28%,
            78% 49%,
            88% 66%,
            60% 91%,
            37% 83%,
            20% 96%,
            11% 66%,
            2% 47%
        );

    transform:
        rotate(14deg);
}


/* ---------- CITY LIGHTS ---------- */

.engine-world-city-lights{
    position:absolute;

    inset:10%;

    z-index:4;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 27% 35%,
            rgba(247,208,123,.96) 0 1.1px,
            transparent 1.8px
        ),
        radial-gradient(
            circle at 35% 30%,
            rgba(246,192,96,.8) 0 1px,
            transparent 1.7px
        ),
        radial-gradient(
            circle at 58% 36%,
            rgba(255,215,132,.92) 0 1.2px,
            transparent 1.9px
        ),
        radial-gradient(
            circle at 66% 43%,
            rgba(244,190,89,.78) 0 1px,
            transparent 1.8px
        ),
        radial-gradient(
            circle at 53% 66%,
            rgba(255,206,107,.9) 0 1.15px,
            transparent 1.9px
        ),
        radial-gradient(
            circle at 42% 69%,
            rgba(242,186,88,.75) 0 1px,
            transparent 1.7px
        );

    filter:
        drop-shadow(
            0
            0
            5px
            rgba(239,183,82,.6)
        );

    opacity:.9;
}


/* ---------- CLOUDS ---------- */

.engine-world-clouds{
    position:absolute;

    inset:4%;

    z-index:5;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at 29% 28%,
            rgba(232,242,247,.12),
            transparent 22%
        ),
        radial-gradient(
            ellipse at 63% 20%,
            rgba(233,242,248,.11),
            transparent 19%
        ),
        radial-gradient(
            ellipse at 68% 61%,
            rgba(225,239,247,.09),
            transparent 20%
        ),
        radial-gradient(
            ellipse at 32% 70%,
            rgba(225,239,247,.08),
            transparent 17%
        );

    filter:
        blur(8px);

    opacity:.86;

    transform:
        rotate(-8deg);
}


/* ---------- ATMOSPHERE ---------- */

.engine-world-system .engine-world-atmosphere{
    inset:-1.2% !important;

    z-index:8;

    box-shadow:
        inset
        0
        0
        28px
        rgba(96,170,214,.12),

        0
        0
        0
        1px
        rgba(155,211,240,.12),

        0
        0
        42px
        rgba(84,162,208,.28),

        0
        -8px
        62px
        rgba(108,185,224,.18) !important;
}


.engine-world-system .engine-world-light{
    z-index:7;

    top:7% !important;
    left:9% !important;

    width:48% !important;
    height:35% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(206,235,250,.18),
            transparent 69%
        ) !important;

    filter:
        blur(22px) !important;
}


/* =========================================================
   LIVE WORLD NODES
========================================================= */

.engine-world-node{
    position:absolute;

    z-index:14;

    display:grid;

    grid-template-columns:
        9px
        auto;

    grid-template-rows:
        auto
        auto;

    column-gap:8px;

    min-width:118px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(157,208,235,.12);

    border-radius:13px;

    background:
        rgba(3,13,22,.72);

    color:
        rgba(240,244,246,.86);

    box-shadow:
        0
        12px
        30px
        rgba(0,0,0,.25),

        inset
        0
        1px
        0
        rgba(255,255,255,.035);

    font:inherit;

    text-align:left;

    cursor:pointer;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transition:
        transform
        .2s
        ease,

        border-color
        .2s
        ease,

        background
        .2s
        ease;
}


.engine-world-node:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(118,191,229,.30);

    background:
        rgba(6,22,34,.88);
}


.engine-world-node i{
    grid-column:1;
    grid-row:1 / span 2;

    align-self:center;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        #79d7ff;

    box-shadow:
        0
        0
        0
        4px
        rgba(92,193,236,.08),

        0
        0
        14px
        rgba(92,193,236,.72);
}


.engine-world-node span{
    grid-column:2;
    grid-row:1;

    font-size:9px;
    font-weight:680;

    white-space:nowrap;
}


.engine-world-node small{
    grid-column:2;
    grid-row:2;

    margin-top:2px;

    color:
        rgba(221,230,235,.38);

    font-size:7px;

    white-space:nowrap;
}


.engine-world-node-community{
    left:-3%;
    top:42%;
}


.engine-world-node-explore{
    right:-7%;
    top:30%;
}


.engine-world-node-active{
    right:2%;
    bottom:13%;
}


.engine-world-node-active i{
    background:
        var(--engine-home-gold-bright);

    box-shadow:
        0
        0
        0
        4px
        rgba(218,179,108,.08),

        0
        0
        14px
        rgba(218,179,108,.62);
}


/* ---------- WORLD LABEL ---------- */

.engine-world-identity{
    left:37% !important;

    bottom:6% !important;

    z-index:16;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 980px){

    .engine-world-system{
        left:46%;

        width:
            min(
                62vw,
                570px
            );
    }

    .engine-world-node{
        transform:
            scale(.92);
    }

}


@media (max-width: 720px){

    .engine-world-system{
        left:50%;

        top:44%;

        width:
            min(
                82vw,
                520px
            );
    }

    .engine-world-node{
        display:none;
    }

}

/* =========================================================
   WORLD RENDERER V1.1 — COMPOSITION POLISH
========================================================= */

.engine-world-system{
    left:34% !important;
    top:49% !important;

    width:min(42vw,520px) !important;
}

.engine-world-land{
    opacity:.62;

    background:
        linear-gradient(
            145deg,
            rgba(74,112,86,.72),
            rgba(30,68,64,.76)
        ) !important;

    filter:
        saturate(.62)
        contrast(.92)
        blur(.25px);
}

.engine-world-city-lights{
    opacity:.62;
}

.engine-world-clouds{
    opacity:.52;
}

.engine-world-node{
    min-width:106px;

    padding:
        7px
        9px;

    background:
        rgba(3,13,22,.60);

    border-color:
        rgba(157,208,235,.10);
}

.engine-world-node-community{
    left:0%;
    top:40%;
}

.engine-world-node-explore{
    right:-2%;
    top:28%;
}

.engine-world-node-active{
    right:4%;
    bottom:17%;
}

.engine-world-identity{
    left:34% !important;
    bottom:11% !important;
}

/* =========================================================
   WORLD RENDERER V2 — SVG PLANET SURFACE
========================================================= */

.engine-world-map{
    position:absolute;

    inset:0;

    z-index:3;

    width:100%;
    height:100%;

    pointer-events:none;

    overflow:visible;

    transform:
        scale(.96)
        rotate(-3deg);

    transform-origin:center;

    opacity:.88;

    filter:
        drop-shadow(
            0
            8px
            15px
            rgba(0,0,0,.22)
        );
}


.engine-world-continents{
    transform-origin:center;
}


.engine-world-continent{
    fill:
        rgba(70,112,92,.74);

    stroke:
        rgba(157,195,165,.11);

    stroke-width:2;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0
            2px
            4px
            rgba(2,20,24,.34)
        );

    transition:
        fill
        .35s
        ease,

        opacity
        .35s
        ease;
}


/* subtle geographic variation */

.engine-world-north-america{
    fill:
        rgba(73,112,91,.73);
}

.engine-world-south-america{
    fill:
        rgba(57,103,83,.76);
}

.engine-world-europe{
    fill:
        rgba(82,119,92,.72);
}

.engine-world-africa{
    fill:
        rgba(76,108,78,.78);
}

.engine-world-asia{
    fill:
        rgba(66,106,85,.75);
}

.engine-world-australia{
    fill:
        rgba(66,101,80,.70);
}

.engine-world-greenland{
    fill:
        rgba(112,143,137,.58);
}


/* soften land into the planet instead of floating shapes */

.engine-world-system .engine-world-globe::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:6;

    border-radius:50%;

    pointer-events:none;

    background:
        linear-gradient(
            112deg,
            rgba(176,220,239,.12),
            transparent 28%,
            transparent 62%,
            rgba(0,8,14,.35) 100%
        ),
        radial-gradient(
            circle at 47% 45%,
            transparent 48%,
            rgba(2,13,21,.20) 76%,
            rgba(0,6,11,.46) 100%
        );
}


.engine-world-system .engine-world-globe::after{
    content:"";

    position:absolute;

    inset:3%;

    z-index:6;

    border-radius:50%;

    pointer-events:none;

    background:
        repeating-linear-gradient(
            8deg,
            transparent 0 31px,
            rgba(178,221,238,.018) 32px,
            transparent 33px
        );

    opacity:.75;

    mix-blend-mode:screen;
}


/* old polygon renderer disabled */

.engine-world-land{
    display:none !important;
}


/* city light layer becomes quieter */

.engine-world-city-lights{
    z-index:4;

    opacity:.48 !important;

    mix-blend-mode:screen;
}


/* clouds sit over SVG geography */

.engine-world-clouds{
    z-index:5;

    opacity:.58 !important;

    animation:
        engineWorldCloudDrift
        32s
        ease-in-out
        infinite
        alternate;
}


@keyframes engineWorldCloudDrift{

    from{
        transform:
            translate3d(-1%,0,0)
            rotate(-8deg);
    }

    to{
        transform:
            translate3d(1.5%,.8%,0)
            rotate(-5deg);
    }

}


/* slightly deeper ocean */

.engine-world-system .engine-world-surface{
    background:
        radial-gradient(
            circle at 31% 25%,
            rgba(91,172,211,.22),
            transparent 22%
        ),
        radial-gradient(
            circle at 58% 53%,
            rgba(19,79,108,.14),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            rgba(22,83,112,.20),
            rgba(3,25,39,.18)
        ) !important;
}


/* retain atmosphere above world surface */

.engine-world-system .engine-world-atmosphere{
    z-index:8;
}


/* world nodes remain above the planet */

.engine-world-node{
    z-index:14;
}

/* =========================================================
   WORLD RENDERER V2.1 — FILE BASED SVG MAP
========================================================= */

.engine-world-map{
    position:absolute;

    inset:14%;

    z-index:3;

    width:72%;
    height:72%;

    object-fit:contain;

    pointer-events:none;

    opacity:.34;

    filter:
        brightness(.78)
        sepia(.18)
        hue-rotate(58deg)
        saturate(.70)
        contrast(.92)
        drop-shadow(0 2px 4px rgba(2,20,24,.22));
}

.engine-world-continent,
.engine-world-continents{
    display:none !important;
}

/* =========================================================
   WORLD RENDERER V2.2 — MATERIAL PASS
========================================================= */

.engine-world-map{
    opacity:.72 !important;

    filter:
        brightness(.74)
        saturate(.78)
        contrast(.98)
        drop-shadow(
            0
            4px
            7px
            rgba(0,12,17,.28)
        ) !important;
}

.engine-world-system .engine-world-globe{
    background:
        radial-gradient(
            circle at 29% 22%,
            rgba(112,190,224,.17),
            transparent 18%
        ),
        radial-gradient(
            circle at 51% 47%,
            #124760 0%,
            #0b354b 43%,
            #062537 70%,
            #02131e 100%
        ) !important;
}

.engine-world-city-lights{
    opacity:.58 !important;
}

.engine-world-clouds{
    opacity:.43 !important;
}

.engine-world-system .engine-world-light{
    opacity:.66 !important;
}

/* =========================================================
   WORLD RENDERER V2.3 — GLOBE / MAP ALIGNMENT
========================================================= */

.engine-world-map{
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    transform:
        scale(1.053)
        rotate(-3deg) !important;

    transform-origin:center !important;
}

/* =========================================================
   VAERO WORLD SCENE SYSTEM V1
   HOME → WORLD → REGION → ISLAND
========================================================= */


/* =========================================================
   SHARED STAGE
========================================================= */

.engine-spatial-home{
    position:relative !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    overflow:hidden !important;
}

.engine-world-stage{
    position:relative !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    overflow:hidden !important;
}


/* =========================================================
   SHARED TRANSITIONS
========================================================= */

.engine-world-system,
.engine-brain-presence,
.engine-world-identity,
.engine-stage-welcome,
.engine-intent-dock,
.engine-now-panel,
.engine-world-bridge,
.engine-region-map-layer,
.engine-island-map-layer{
    transition:
        opacity .42s ease,
        transform .68s cubic-bezier(.2,.75,.2,1),
        filter .42s ease;
}


/* =========================================================
   HOME SCENE — DESKTOP
========================================================= */

.engine-spatial-home:not(.is-world-focus)
.engine-world-system{
    left:36% !important;
    top:49% !important;

    width:
        min(
            46vw,
            600px
        ) !important;

    transform:
        translate(-50%,-50%) !important;

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-world-identity{
    left:36% !important;

    top:auto !important;
    bottom:7% !important;

    transform:
        translateX(-50%) !important;

    opacity:1 !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-brain-presence{
    left:auto !important;
    right:5.5% !important;

    top:43% !important;

    width:
        min(
            360px,
            30vw
        ) !important;

    transform:
        translateY(-50%) !important;

    opacity:1 !important;

    align-items:flex-start !important;
    text-align:left !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-brain-presence
.engine-brain-orb{
    width:104px !important;
    height:104px !important;

    margin:
        0
        0
        12px
        10px !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-brain-invitation{
    align-items:flex-start !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-brain-invitation h1{
    font-size:
        clamp(
            25px,
            2.8vw,
            38px
        ) !important;

    text-align:left !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-brain-prompt{
    width:100% !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-intent-dock{
    left:36% !important;

    bottom:22px !important;

    width:
        min(
            720px,
            60vw
        ) !important;

    transform:
        translateX(-50%) !important;

    opacity:1 !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-now-panel{
    right:5.5% !important;

    top:auto !important;
    bottom:76px !important;

    width:
        min(
            360px,
            30vw
        ) !important;

    transform:none !important;

    opacity:1 !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-world-bridge{
    left:22px !important;
    bottom:22px !important;

    opacity:1 !important;
}

.engine-spatial-home:not(.is-world-focus)
.engine-stage-welcome{
    top:24px !important;
    left:26px !important;

    opacity:1 !important;
}


/* =========================================================
   FOCUS CONTROLS
========================================================= */

.engine-world-focus-exit{
    position:absolute;

    top:22px;
    left:24px;

    z-index:64;

    display:flex;
    align-items:center;

    gap:8px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(174,214,235,.15);

    border-radius:999px;

    background:
        rgba(3,15,24,.74);

    color:
        rgba(238,245,248,.88);

    box-shadow:
        0
        14px
        34px
        rgba(0,0,0,.22);

    font:inherit;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(-7px);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transition:
        opacity .3s ease,
        transform .35s ease,
        visibility .3s ease;
}

.engine-world-focus-exit span{
    color:
        rgba(127,211,246,.94);

    font-size:14px;
}

.engine-world-focus-exit strong{
    font-size:8px;
    font-weight:650;
}


/* =========================================================
   WORLD FOCUS SCENE
========================================================= */

.engine-spatial-home.is-world-focus:not(.is-region-focus)
.engine-world-system{
    left:50% !important;
    top:50% !important;

    width:
        min(
            64vw,
            72vh,
            740px
        ) !important;

    transform:
        translate(-50%,-50%) !important;

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;
}

.engine-spatial-home.is-world-focus:not(.is-region-focus)
.engine-world-focus-exit{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0);
}

.engine-spatial-home.is-world-focus
.engine-stage-welcome,
.engine-spatial-home.is-world-focus
.engine-brain-presence,
.engine-spatial-home.is-world-focus
.engine-world-identity,
.engine-spatial-home.is-world-focus
.engine-intent-dock,
.engine-spatial-home.is-world-focus
.engine-now-panel,
.engine-spatial-home.is-world-focus
.engine-world-bridge{
    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;
}


/* =========================================================
   WORLD → REGION HOTSPOT
========================================================= */

.engine-region-hotspot{
    position:absolute;

    z-index:25;

    display:flex;
    align-items:center;

    gap:7px;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(139,218,246,.25);

    border-radius:999px;

    background:
        rgba(3,19,29,.82);

    color:
        rgba(244,248,249,.95);

    box-shadow:
        0
        12px
        34px
        rgba(0,0,0,.30);

    font:inherit;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
        translate(-50%,-50%)
        scale(.82);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transition:
        opacity .3s ease,
        transform .4s cubic-bezier(.2,.75,.2,1),
        visibility .3s ease;
}

.engine-region-hotspot-cyprus{
    left:58.8%;
    top:35.8%;
}

.engine-region-hotspot-pulse{
    position:relative;

    width:7px;
    height:7px;

    flex:
        0
        0
        7px;

    border-radius:50%;

    background:#86ddff;

    box-shadow:
        0
        0
        14px
        rgba(112,213,255,.88);
}

.engine-region-hotspot-pulse::after{
    content:"";

    position:absolute;

    inset:-6px;

    border:
        1px solid
        rgba(122,217,255,.38);

    border-radius:50%;

    animation:
        vaeroRegionPulse
        2.2s
        ease-out
        infinite;
}

@keyframes vaeroRegionPulse{

    0%{
        opacity:.75;
        transform:scale(.45);
    }

    70%{
        opacity:0;
        transform:scale(1.5);
    }

    100%{
        opacity:0;
        transform:scale(1.5);
    }
}

.engine-region-hotspot-copy{
    display:flex;
    flex-direction:column;

    align-items:flex-start;

    line-height:1.05;
}

.engine-region-hotspot-copy strong{
    font-size:8px;
    font-weight:720;
}

.engine-region-hotspot-copy small{
    margin-top:3px;

    color:
        rgba(205,222,230,.56);

    font-size:6px;
}

.engine-spatial-home.is-world-focus:not(.is-region-focus)
.engine-region-hotspot{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translate(-50%,-50%)
        scale(1);
}


/* =========================================================
   REGION / ISLAND HUD
========================================================= */

.engine-region-focus-panel,
.engine-island-focus-panel{
    position:absolute;

    top:20px;
    left:50%;

    z-index:70;

    display:flex;
    align-items:center;

    gap:16px;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
        translate(-50%,-8px);

    transition:
        opacity .3s ease,
        transform .4s cubic-bezier(.2,.75,.2,1),
        visibility .3s ease;
}

.engine-region-back{
    display:flex;
    align-items:center;

    gap:7px;

    min-height:36px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(174,214,235,.15);

    border-radius:999px;

    background:
        rgba(3,15,24,.78);

    color:
        rgba(238,245,248,.88);

    font:inherit;
    font-size:8px;

    cursor:pointer;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

.engine-region-back span{
    color:
        rgba(127,211,246,.94);

    font-size:14px;
}

.engine-region-focus-copy{
    display:flex;
    flex-direction:column;

    padding-left:14px;

    border-left:
        1px solid
        rgba(155,209,231,.14);
}

.engine-region-focus-copy > span{
    color:
        rgba(126,205,237,.62);

    font-size:6px;
    font-weight:750;

    letter-spacing:.18em;
}

.engine-region-focus-copy strong{
    margin-top:3px;

    color:
        rgba(245,248,249,.96);

    font-size:14px;
    font-weight:680;
}

.engine-region-focus-copy small{
    margin-top:2px;

    color:
        rgba(205,219,227,.48);

    font-size:7px;
}


/* =========================================================
   REGION SCENE
========================================================= */

.engine-region-map-layer{
    position:absolute !important;

    inset:0 !important;

    z-index:20 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;

    transform:none !important;

    background:
        radial-gradient(
            ellipse at 58% 52%,
            rgba(29,108,148,.18),
            transparent 50%
        ),
        linear-gradient(
            180deg,
            #0a3b53,
            #062b40 54%,
            #051a29
        ) !important;

    filter:none !important;
}

.engine-region-ocean{
    display:none !important;
}

.engine-region-map{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:center !important;

    transform:none !important;

    opacity:.88 !important;

    background:transparent !important;

    filter:
        brightness(.74)
        saturate(.80)
        contrast(1.04)
        drop-shadow(
            0
            3px
            7px
            rgba(0,10,16,.22)
        ) !important;
}

.engine-spatial-home.is-region-focus:not(.is-island-focus)
.engine-region-map-layer{
    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;
}

.engine-spatial-home.is-region-focus:not(.is-island-focus)
.engine-region-focus-panel{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translate(-50%,0);
}

.engine-spatial-home.is-region-focus
.engine-world-system{
    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;
}

.engine-spatial-home.is-region-focus
.engine-world-focus-exit{
    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;
}


/* =========================================================
   REGION MARKER
========================================================= */

.engine-region-marker{
    position:absolute;

    z-index:30;

    display:flex;
    align-items:center;

    gap:8px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(137,220,250,.25);

    border-radius:999px;

    background:
        rgba(3,20,30,.84);

    color:
        rgba(246,249,250,.96);

    box-shadow:
        0
        12px
        30px
        rgba(0,0,0,.28);

    font:inherit;

    cursor:pointer;

    transform:
        translate(-50%,-50%);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.engine-region-marker-cyprus{
    left:57.2% !important;
    top:53.1% !important;
}

.engine-region-marker > span{
    width:7px;
    height:7px;

    flex:
        0
        0
        7px;

    border-radius:50%;

    background:#88dcfb;

    box-shadow:
        0
        0
        16px
        rgba(110,215,255,.92);
}

.engine-region-marker > div{
    display:flex;
    flex-direction:column;

    line-height:1.05;
}

.engine-region-marker strong{
    font-size:8px;
    font-weight:720;
}

.engine-region-marker small{
    margin-top:3px;

    color:
        rgba(205,222,230,.58);

    font-size:6px;
}


/* =========================================================
   ISLAND SCENE
========================================================= */

.engine-island-map-layer{
    position:absolute !important;

    inset:0 !important;

    z-index:32 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;

    background:
        radial-gradient(
            ellipse at 50% 52%,
            rgba(37,123,164,.25),
            transparent 44%
        ),
        radial-gradient(
            ellipse at 50% 54%,
            rgba(18,72,103,.22),
            transparent 68%
        ),
        linear-gradient(
            180deg,
            #082e44,
            #061f31 58%,
            #04151f
        ) !important;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}

.engine-island-map{
    position:absolute !important;

    left:50% !important;
    top:52% !important;

    width:
        min(
            78%,
            920px
        ) !important;

    height:
        min(
            66%,
            560px
        ) !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:
        translate(-50%,-50%) !important;

    opacity:.96 !important;

    filter:
        brightness(.76)
        saturate(.82)
        contrast(1.05)
        drop-shadow(
            0
            20px
            42px
            rgba(0,0,0,.28)
        ) !important;
}

.engine-spatial-home.is-island-focus
.engine-region-map-layer{
    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;
}

.engine-spatial-home.is-island-focus
.engine-island-map-layer{
    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;
}

.engine-spatial-home.is-island-focus
.engine-region-focus-panel{
    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;
}

.engine-spatial-home.is-island-focus
.engine-island-focus-panel{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translate(-50%,0);
}


/* =========================================================
   FOCUSED BOTTOM NAV
========================================================= */

body:has(.engine-spatial-home.is-world-focus)
.engine-bottom-nav,
.vaero-engine-home:has(.engine-spatial-home.is-world-focus)
.engine-bottom-nav{
    opacity:.20 !important;

    filter:
        saturate(.55)
        brightness(.72);

    pointer-events:none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:980px) and (min-width:721px){

    .engine-spatial-home:not(.is-world-focus)
    .engine-world-system{
        left:43% !important;

        width:
            min(
                58vw,
                560px
            ) !important;
    }

    .engine-spatial-home:not(.is-world-focus)
    .engine-world-identity{
        left:43% !important;
    }

    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-presence{
        right:22px !important;

        width:
            min(
                300px,
                32vw
            ) !important;
    }

    .engine-spatial-home:not(.is-world-focus)
    .engine-now-panel{
        display:none !important;
    }

}


/* =========================================================
   MOBILE — HOME V3
   WORLD / BRAIN SEPARATED COMPOSITION
========================================================= */

@media (max-width:720px){

    .engine-stage-welcome{
        top:16px !important;
        left:18px !important;
    }


    /* =====================================================
       HOME — WORLD
    ===================================================== */

    .engine-spatial-home:not(.is-world-focus)
    .engine-world-system{
        left:50% !important;
        top:22% !important;

        width:
            min(
                58vw,
                240px
            ) !important;

        transform:
            translate(-50%,-50%) !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-world-node{
        display:none !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-world-identity{
        left:50% !important;

        top:39.5% !important;
        bottom:auto !important;

        width:88% !important;

        transform:
            translateX(-50%) !important;

        text-align:center !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-world-kicker{
        margin-bottom:4px !important;

        font-size:7px !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-world-identity strong{
        font-size:19px !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-world-identity small{
        display:none !important;
    }


    /* =====================================================
       HOME — BRAIN
    ===================================================== */

    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-presence{
        left:50% !important;
        right:auto !important;

        top:56.5% !important;

        width:
            calc(100% - 34px) !important;

        transform:
            translate(-50%,-50%) !important;

        align-items:center !important;

        text-align:center !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-presence
    .engine-brain-orb{
        width:50px !important;
        height:50px !important;

        margin:
            0
            0
            4px !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-presence
    .brain-core{
        transform:
            scale(.78) !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-invitation{
        align-items:center !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-invitation > span{
        font-size:7px !important;

        letter-spacing:.16em !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-invitation h1{
        max-width:330px !important;

        margin:
            4px
            auto
            9px !important;

        font-size:
            clamp(
                23px,
                6.5vw,
                27px
            ) !important;

        line-height:1.04 !important;

        text-align:center !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-prompt{
        width:
            min(
                92%,
                360px
            ) !important;

        min-height:42px !important;

        margin:
            0
            auto !important;

        font-size:9px !important;
    }


    /* =====================================================
       HOME — QUICK ACTIONS
    ===================================================== */

    .engine-now-panel,
    .engine-world-bridge{
        display:none !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-intent-dock{
        left:50% !important;

        bottom:86px !important;

        width:
            calc(100% - 28px) !important;

        gap:5px !important;

        transform:
            translateX(-50%) !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-intent-dock button{
        min-height:27px !important;

        padding:
            0
            9px !important;

        font-size:7px !important;
    }


    /* =====================================================
       WORLD FOCUS
    ===================================================== */

    .engine-spatial-home.is-world-focus:not(.is-region-focus)
    .engine-world-system{
        left:50% !important;
        top:51% !important;

        width:
            min(
                76vw,
                330px
            ) !important;

        transform:
            translate(-50%,-50%) !important;
    }


    .engine-spatial-home.is-world-focus:not(.is-region-focus)
    .engine-world-node{
        display:none !important;
    }


    .engine-spatial-home.is-world-focus:not(.is-region-focus)
    .engine-world-focus-exit{
        top:14px !important;
        left:14px !important;
    }


    .engine-spatial-home.is-world-focus:not(.is-region-focus)
    .engine-world-focus-exit strong{
        font-size:7px !important;
    }


    body:has(.engine-spatial-home.is-world-focus)
    .engine-bottom-nav,
    .vaero-engine-home:has(.engine-spatial-home.is-world-focus)
    .engine-bottom-nav{
        opacity:0 !important;
        visibility:hidden !important;

        pointer-events:none !important;

        transform:
            translateY(18px) !important;
    }


    /* =====================================================
       REGION
    ===================================================== */

    .engine-spatial-home.is-region-focus:not(.is-island-focus)
    .engine-region-map-layer{
        inset:0 !important;

        width:100% !important;
        height:100% !important;
    }


    .engine-spatial-home.is-region-focus
    .engine-region-map{
        object-position:
            56% center !important;
    }


    .engine-spatial-home.is-region-focus:not(.is-island-focus)
    .engine-region-marker-cyprus{
        left:80% !important;
        top:53% !important;
    }


    .engine-region-focus-panel,
    .engine-island-focus-panel{
        top:11px;

        width:
            calc(100% - 18px);

        gap:8px;

        justify-content:center;
    }


    .engine-region-back{
        min-height:34px;

        padding:
            0
            11px;

        font-size:7px;
    }


    .engine-region-focus-copy{
        padding-left:10px;
    }


    .engine-region-focus-copy strong{
        font-size:11px !important;
    }


    /* =====================================================
       ISLAND
    ===================================================== */

    .engine-island-map{
        left:50% !important;
        top:52% !important;

        width:94% !important;
        height:54% !important;

        transform:
            translate(-50%,-50%) !important;
    }

}


/* =========================================================
   SHORT MOBILE
========================================================= */

@media (max-width:720px) and (max-height:700px){

    .engine-spatial-home:not(.is-world-focus)
    .engine-world-system{
        top:20.5% !important;

        width:
            min(
                54vw,
                210px
            ) !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-world-identity{
        top:36.5% !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-presence{
        top:53.5% !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-presence
    .engine-brain-orb{
        width:44px !important;
        height:44px !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-brain-invitation h1{
        font-size:
            clamp(
                21px,
                6vw,
                25px
            ) !important;
    }


    .engine-spatial-home:not(.is-world-focus)
    .engine-intent-dock{
        bottom:72px !important;
    }


    .engine-spatial-home.is-world-focus:not(.is-region-focus)
    .engine-world-system{
        top:50% !important;

        width:
            min(
                72vw,
                300px
            ) !important;
    }


    .engine-island-map{
        width:92% !important;
        height:48% !important;
    }

}

/* =========================================================
   APPLICATIONS CAPABILITIES PEEK V1
   SMALL ENTRY / LARGE NETWORK
========================================================= */

.engine-applications-peek-scrim{
    position:absolute;

    inset:0;

    z-index:108;

    margin:0;
    padding:0;

    border:0;

    background:
        rgba(1,8,13,.28);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    cursor:default;

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);

    transition:
        opacity .28s ease,
        visibility .28s ease;
}


.engine-applications-peek{
    position:absolute;

    top:78px;
    right:24px;

    z-index:110;

    width:
        min(
            430px,
            calc(100% - 36px)
        );

    max-height:
        min(
            620px,
            calc(100vh - 110px)
        );

    display:flex;
    flex-direction:column;

    padding:18px;

    border:
        1px solid
        rgba(163,213,235,.14);

    border-radius:26px;

    background:
        radial-gradient(
            circle at 86% 8%,
            rgba(49,126,159,.18),
            transparent 32%
        ),
        linear-gradient(
            160deg,
            rgba(7,29,43,.96),
            rgba(3,17,27,.975)
        );

    box-shadow:
        0
        34px
        90px
        rgba(0,0,0,.46),

        inset
        0
        1px
        0
        rgba(255,255,255,.045);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(-10px)
        scale(.97);

    transform-origin:
        top right;

    backdrop-filter:
        blur(28px)
        saturate(1.12);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(1.12);

    transition:
        opacity .3s ease,
        transform .4s cubic-bezier(.2,.78,.2,1),
        visibility .3s ease;
}


.vaero-engine-home.is-applications-peek-open
.engine-applications-peek-scrim{
    opacity:1;
    visibility:visible;

    pointer-events:auto;
}


.vaero-engine-home.is-applications-peek-open
.engine-applications-peek{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0)
        scale(1);
}


.vaero-engine-home.is-applications-peek-open
.engine-applications-trigger{
    border-color:
        rgba(227,183,104,.34);

    background:
        rgba(227,183,104,.09);
}


.engine-applications-peek-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:14px;

    padding:
        2px
        2px
        15px;
}


.engine-applications-peek-head > div{
    display:flex;
    flex-direction:column;
}


.engine-applications-peek-head span{
    color:
        rgba(224,181,101,.82);

    font-size:7px;
    font-weight:760;

    letter-spacing:.19em;
}


.engine-applications-peek-head strong{
    margin-top:4px;

    color:
        rgba(247,250,251,.98);

    font-size:21px;
    font-weight:680;
}


.engine-applications-peek-head small{
    margin-top:5px;

    color:
        rgba(197,215,225,.48);

    font-size:8px;
}


.engine-applications-peek-close{
    width:31px;
    height:31px;

    flex:
        0
        0
        31px;

    display:grid;
    place-items:center;

    margin:0;
    padding:0;

    border:
        1px solid
        rgba(162,205,225,.12);

    border-radius:50%;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(228,239,244,.62);

    font:inherit;
    font-size:17px;

    cursor:pointer;
}


.engine-applications-peek-grid{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:8px;

    overflow:auto;

    padding:
        2px
        1px;
}


.engine-capability-card{
    position:relative;

    min-width:0;
    min-height:88px;

    display:grid;

    grid-template-columns:
        34px
        minmax(0,1fr);

    align-items:center;

    gap:10px;

    padding:
        12px;

    border:
        1px solid
        rgba(155,204,226,.095);

    border-radius:18px;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.038),
            rgba(255,255,255,.012)
        );

    color:
        rgba(244,248,250,.94);

    font:inherit;

    text-align:left;

    cursor:pointer;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}


.engine-capability-card:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(224,181,101,.24);

    background:
        linear-gradient(
            150deg,
            rgba(224,181,101,.075),
            rgba(255,255,255,.018)
        );
}


.engine-capability-icon{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(170,211,230,.12);

    border-radius:12px;

    background:
        rgba(7,28,42,.72);

    font-size:15px;
}


.engine-capability-copy{
    min-width:0;

    display:flex;
    flex-direction:column;
}


.engine-capability-copy strong{
    overflow:hidden;

    color:
        rgba(244,248,250,.96);

    font-size:10px;
    font-weight:680;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.engine-capability-copy small{
    display:-webkit-box;

    overflow:hidden;

    margin-top:4px;

    color:
        rgba(195,214,224,.46);

    font-size:7px;
    line-height:1.35;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


.engine-capability-live{
    position:absolute;

    top:10px;
    right:10px;

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        rgba(118,216,255,.78);

    box-shadow:
        0
        0
        11px
        rgba(104,209,255,.44);
}


.engine-applications-peek-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-top:14px;

    padding-top:13px;

    border-top:
        1px solid
        rgba(154,204,226,.09);
}


.engine-applications-peek-foot > div{
    display:flex;
    align-items:center;

    gap:7px;
}


.engine-applications-peek-foot small{
    color:
        rgba(185,207,217,.42);

    font-size:7px;
}


.engine-capability-network-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:
        rgba(226,184,105,.92);

    box-shadow:
        0
        0
        12px
        rgba(226,184,105,.44);
}


.engine-applications-open-all{
    display:flex;
    align-items:center;

    gap:9px;

    min-height:34px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(225,183,104,.19);

    border-radius:999px;

    background:
        rgba(225,183,104,.07);

    color:
        rgba(240,219,178,.92);

    font:inherit;
    font-size:8px;
    font-weight:650;

    cursor:pointer;
}


.engine-applications-open-all span{
    font-size:11px;
}


.engine-capabilities-empty{
    grid-column:
        1 / -1;

    padding:28px;

    color:
        rgba(194,211,220,.45);

    font-size:8px;

    text-align:center;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:720px){

    .engine-applications-peek{
        top:72px;
        left:12px;
        right:12px;

        width:auto;

        max-height:
            calc(100% - 96px);

        padding:15px;

        border-radius:23px;

        transform-origin:
            top center;
    }


    .engine-applications-peek-grid{
        gap:7px;
    }


    .engine-capability-card{
        min-height:82px;

        grid-template-columns:
            30px
            minmax(0,1fr);

        gap:8px;

        padding:10px;
    }


    .engine-capability-icon{
        width:30px;
        height:30px;

        border-radius:10px;

        font-size:13px;
    }


    .engine-applications-peek-head strong{
        font-size:18px;
    }


    .engine-applications-peek-head small{
        font-size:7px;
    }


    .engine-applications-peek-foot{
        align-items:flex-end;
    }

}

/* =========================================================
   WORLD INTERACTION LAYER V1
   ISLAND → CITY → LIVE SHARED WORLD
========================================================= */


/* =========================================================
   CYPRUS INTERACTION SURFACE
========================================================= */

.engine-island-surface{
    position:absolute;

    left:50%;
    top:52%;

    width:
        min(
            84%,
            920px
        );

    aspect-ratio:
        1000 / 550;

    transform:
        translate(-50%,-50%);
}


.engine-island-surface
.engine-island-map{
    position:absolute !important;

    inset:0 !important;

    left:0 !important;
    top:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:none !important;
}


.engine-island-guide{
    position:absolute;

    left:50%;
    bottom:7%;

    z-index:40;

    display:flex;
    flex-direction:column;
    align-items:center;

    width:
        min(
            520px,
            84%
        );

    text-align:center;

    transform:
        translateX(-50%);
}


.engine-island-guide > span{
    color:
        rgba(226,184,105,.82);

    font-size:7px;
    font-weight:760;

    letter-spacing:.20em;
}


.engine-island-guide strong{
    margin-top:5px;

    color:
        rgba(247,250,251,.97);

    font-size:
        clamp(
            18px,
            2vw,
            26px
        );

    font-weight:680;
}


.engine-island-guide small{
    margin-top:6px;

    color:
        rgba(199,216,224,.50);

    font-size:8px;
}


/* =========================================================
   CITY NODES
========================================================= */

.engine-city-node{
    position:absolute;

    z-index:42;

    display:flex;
    align-items:center;

    gap:6px;

    min-height:28px;

    padding:
        0
        9px;

    border:
        1px solid
        rgba(132,216,249,.20);

    border-radius:999px;

    background:
        rgba(3,18,28,.82);

    color:
        rgba(244,248,250,.94);

    box-shadow:
        0
        8px
        24px
        rgba(0,0,0,.25);

    font:inherit;

    cursor:pointer;

    transform:
        translate(-50%,-50%);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    transition:
        transform .24s ease,
        border-color .24s ease,
        background .24s ease;
}


.engine-city-node:hover{
    border-color:
        rgba(226,184,105,.36);

    background:
        rgba(8,32,45,.94);

    transform:
        translate(-50%,-50%)
        scale(1.045);
}


.engine-city-node > span{
    position:relative;

    width:6px;
    height:6px;

    flex:
        0
        0
        6px;

    border-radius:50%;

    background:
        #82dbff;

    box-shadow:
        0
        0
        12px
        rgba(112,214,255,.78);
}


.engine-city-node > span::after{
    content:"";

    position:absolute;

    inset:-5px;

    border:
        1px solid
        rgba(116,214,255,.24);

    border-radius:50%;

    animation:
        vaeroCityPulse
        2.4s
        ease-out
        infinite;
}


@keyframes vaeroCityPulse{

    0%{
        opacity:.8;
        transform:scale(.45);
    }

    75%{
        opacity:0;
        transform:scale(1.65);
    }

    100%{
        opacity:0;
        transform:scale(1.65);
    }

}


.engine-city-node strong{
    font-size:7px;
    font-weight:690;

    white-space:nowrap;
}


/*
 * Geographic positions inside
 * cyprus_10m.svg viewBox.
 */

.engine-city-node-lefkosa{
    left:47.1%;
    top:46.1%;
}

.engine-city-node-girne{
    left:45.4%;
    top:39%;
}

.engine-city-node-magusa{
    left:61%;
    top:48.9%;
}

.engine-city-node-larnaka{
    left:53.1%;
    top:58.1%;
}

.engine-city-node-limasol{
    left:38.6%;
    top:69.2%;
}

.engine-city-node-baf{
    left:23.2%;
    top:64.8%;
}


/* =========================================================
   CITY PANEL
========================================================= */

.engine-city-focus-panel{
    position:absolute;

    top:20px;
    left:50%;

    z-index:82;

    display:flex;
    align-items:center;

    gap:16px;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
        translate(-50%,-8px);

    transition:
        opacity .3s ease,
        transform .4s cubic-bezier(.2,.75,.2,1),
        visibility .3s ease;
}


/* =========================================================
   LIVE SHARED WORLD
========================================================= */

.engine-city-live-layer{
    position:absolute;

    inset:0;

    z-index:44;

    overflow:hidden;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(20,104,147,.18),
            transparent 28%
        ),
        radial-gradient(
            ellipse at 50% 55%,
            rgba(17,69,98,.18),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            #061a29 0%,
            #07283a 48%,
            #04141e 100%
        );

    transition:
        opacity .5s ease,
        visibility .5s ease;
}


.engine-city-live-grid{
    position:absolute;

    inset:-12%;

    opacity:.18;

    background-image:
        linear-gradient(
            rgba(117,194,225,.10)
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(117,194,225,.10)
            1px,
            transparent
            1px
        );

    background-size:
        46px
        46px;

    transform:
        perspective(620px)
        rotateX(62deg)
        translateY(28%);

    transform-origin:center bottom;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 70%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 70%
        );
}


.engine-city-signal{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:
        rgba(116,217,255,.92);

    box-shadow:
        0
        0
        0
        7px
        rgba(116,217,255,.05),

        0
        0
        24px
        rgba(116,217,255,.42);
}


.engine-city-signal-a{
    left:24%;
    top:38%;
}


.engine-city-signal-b{
    left:71%;
    top:31%;
}


.engine-city-signal-c{
    left:65%;
    top:68%;
}


.engine-city-signal-d{
    left:30%;
    top:72%;
}


.engine-city-live-core{
    position:absolute;

    left:50%;
    top:47%;

    z-index:48;

    width:
        min(
            520px,
            calc(100% - 48px)
        );

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    transform:
        translate(-50%,-50%);
}


.engine-city-live-core > span{
    color:
        rgba(225,182,101,.82);

    font-size:7px;
    font-weight:760;

    letter-spacing:.20em;
}


.engine-city-live-core > strong{
    margin-top:7px;

    color:
        rgba(247,250,251,.98);

    font-size:
        clamp(
            30px,
            5vw,
            58px
        );

    font-weight:650;

    letter-spacing:-.03em;
}


.engine-city-live-core > small{
    margin-top:7px;

    color:
        rgba(198,216,225,.52);

    font-size:9px;
}


.engine-city-brain-entry{
    width:
        min(
            440px,
            100%
        );

    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:22px;

    padding:
        0
        16px
        0
        18px;

    border:
        1px solid
        rgba(153,207,231,.14);

    border-radius:999px;

    background:
        rgba(3,17,27,.62);

    color:
        rgba(221,233,239,.70);

    box-shadow:
        0
        18px
        50px
        rgba(0,0,0,.22);

    font:inherit;

    cursor:pointer;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.engine-city-brain-entry span{
    font-size:9px;
}


.engine-city-brain-entry i{
    color:
        rgba(227,185,104,.94);

    font-size:12px;
    font-style:normal;
}


.engine-city-lenses{
    position:absolute;

    left:50%;
    bottom:8%;

    z-index:50;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    width:
        calc(100% - 32px);

    transform:
        translateX(-50%);
}


.engine-city-lenses button{
    min-height:30px;

    padding:
        0
        12px;

    border:
        1px solid
        rgba(154,205,227,.12);

    border-radius:999px;

    background:
        rgba(4,20,31,.60);

    color:
        rgba(215,229,236,.62);

    font:inherit;
    font-size:7px;

    cursor:pointer;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* =========================================================
   CITY ACTIVE STATE
========================================================= */

.engine-spatial-home.is-city-focus
.engine-island-map-layer{
    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;
}


.engine-spatial-home.is-city-focus
.engine-island-focus-panel{
    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;
}


.engine-spatial-home.is-city-focus
.engine-city-live-layer{
    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;
}


.engine-spatial-home.is-city-focus
.engine-city-focus-panel{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translate(-50%,0);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:720px){

    .engine-island-surface{
        top:50%;

        width:94%;
    }


    .engine-island-guide{
        bottom:8%;

        width:
            calc(100% - 38px);
    }


    .engine-island-guide strong{
        font-size:17px;
    }


    .engine-island-guide small{
        max-width:280px;

        font-size:7px;
    }


    .engine-city-node{
        min-height:24px;

        gap:4px;

        padding:
            0
            7px;
    }


    .engine-city-node > span{
        width:5px;
        height:5px;

        flex-basis:5px;
    }


    .engine-city-node strong{
        font-size:6px;
    }


    .engine-city-focus-panel{
        top:11px;

        width:
            calc(100% - 18px);

        gap:8px;

        justify-content:center;
    }


    .engine-city-live-core{
        top:46%;

        width:
            calc(100% - 32px);
    }


    .engine-city-live-core > strong{
        font-size:
            clamp(
                34px,
                11vw,
                48px
            );
    }


    .engine-city-live-core > small{
        font-size:8px;
    }


    .engine-city-brain-entry{
        width:
            min(
                94%,
                360px
            );

        min-height:46px;

        margin-top:18px;
    }


    .engine-city-lenses{
        bottom:8%;

        flex-wrap:wrap;

        gap:6px;
    }


    .engine-city-lenses button{
        min-height:28px;

        padding:
            0
            10px;

        font-size:6.5px;
    }

}


/* =========================================================
   WORLD INTERACTION LAYER V2
   LIVING CITY SURFACE
========================================================= */

.engine-island-surface .engine-city-node{
    min-height:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.engine-island-surface .engine-city-node:hover{
    background:transparent;
    transform:
        translate(-50%,-50%)
        scale(1.06);
}

.engine-island-surface .engine-city-node strong{
    padding:4px 7px;
    border:
        1px solid
        rgba(164,218,239,.12);
    border-radius:999px;
    background:
        rgba(3,21,31,.58);
    font-size:8px;
    text-shadow:
        0 2px 12px
        rgba(0,0,0,.45);
    backdrop-filter:
        blur(10px);
    -webkit-backdrop-filter:
        blur(10px);
}

.engine-city-live-layer{
    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(88,196,238,.12),
            transparent 24%
        ),
        radial-gradient(
            circle at 34% 62%,
            rgba(18,102,145,.22),
            transparent 34%
        ),
        linear-gradient(
            150deg,
            #04131d 0%,
            #062536 48%,
            #031019 100%
        );
}

.engine-city-live-atmosphere{
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 22% 32%,
            rgba(226,184,105,.07),
            transparent 14%
        ),
        radial-gradient(
            circle at 70% 66%,
            rgba(89,206,250,.08),
            transparent 20%
        );
}

.engine-city-live-grid{
    inset:-18%;
    opacity:.15;
    background-size:
        54px
        54px;

    transform:
        perspective(760px)
        rotateX(68deg)
        translateY(31%);
}

.engine-city-atlas{
    position:absolute;

    left:50%;
    top:55%;

    z-index:45;

    width:
        min(
            900px,
            82%
        );

    height:
        min(
            470px,
            66%
        );

    transform:
        translate(-50%,-50%)
        perspective(900px)
        rotateX(58deg)
        rotateZ(-7deg);

    transform-origin:center;

    pointer-events:none;
}

.engine-city-atlas::before{
    content:"";

    position:absolute;

    inset:5%;

    border:
        1px solid
        rgba(126,204,236,.10);

    border-radius:
        48% 52% 44% 56% /
        54% 46% 58% 42%;

    background:
        linear-gradient(
            135deg,
            rgba(39,117,151,.14),
            rgba(4,23,34,.02)
        );

    box-shadow:
        inset
        0
        0
        80px
        rgba(72,180,222,.05);
}

.engine-city-road{
    position:absolute;

    z-index:2;

    height:1px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(127,211,245,.36),
            rgba(226,184,105,.20),
            transparent
        );

    transform-origin:
        left center;
}

.engine-city-road-a{
    left:15%;
    top:43%;
    width:70%;
    transform:rotate(12deg);
}

.engine-city-road-b{
    left:23%;
    top:22%;
    width:58%;
    transform:rotate(46deg);
}

.engine-city-road-c{
    left:37%;
    top:77%;
    width:48%;
    transform:rotate(-37deg);
}

.engine-city-road-d{
    left:11%;
    top:68%;
    width:61%;
    transform:rotate(-16deg);
}

.engine-city-zone{
    position:absolute;

    z-index:3;

    border:
        1px solid
        rgba(125,207,238,.08);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(82,188,229,.08),
            transparent 68%
        );
}

.engine-city-zone-a{
    left:18%;
    top:24%;
    width:24%;
    height:29%;
}

.engine-city-zone-b{
    left:47%;
    top:19%;
    width:27%;
    height:31%;
}

.engine-city-zone-c{
    left:42%;
    top:55%;
    width:29%;
    height:31%;
}

.engine-city-trace{
    position:absolute;

    z-index:49;

    display:flex;
    align-items:center;

    gap:8px;

    padding:
        6px
        9px;

    border:
        1px solid
        rgba(142,208,233,.11);

    border-radius:12px;

    background:
        rgba(3,18,27,.58);

    color:
        rgba(240,247,250,.92);

    box-shadow:
        0
        14px
        36px
        rgba(0,0,0,.16);

    font:inherit;

    cursor:pointer;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    transition:
        opacity .3s ease,
        transform .3s ease,
        border-color .3s ease;
}

.engine-city-trace:hover{
    border-color:
        rgba(226,184,105,.28);

    transform:
        translateY(-2px);
}

.engine-city-trace > i{
    width:7px;
    height:7px;

    flex:
        0
        0
        7px;

    border-radius:50%;

    background:
        rgba(105,215,255,.95);

    box-shadow:
        0
        0
        0
        5px
        rgba(95,207,248,.06),
        0
        0
        18px
        rgba(91,207,248,.48);
}

.engine-city-trace > span{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.engine-city-trace strong{
    font-size:8px;
    font-weight:670;
}

.engine-city-trace small{
    font-size:6.5px;

    color:
        rgba(196,217,226,.46);
}

.engine-city-trace-oldcity{
    left:27%;
    top:43%;
}

.engine-city-trace-coast{
    right:18%;
    top:33%;
}

.engine-city-trace-campus{
    left:39%;
    bottom:22%;
}

.engine-city-trace-event{
    right:27%;
    bottom:25%;
}

.engine-city-trace-varosha{
    right:13%;
    top:57%;
}

.engine-city-live-core{
    left:10%;
    top:17%;

    width:
        min(
            410px,
            42%
        );

    align-items:flex-start;

    text-align:left;

    transform:none;
}

.engine-city-live-core > strong{
    font-size:
        clamp(
            30px,
            4vw,
            50px
        );
}

.engine-city-live-core > small{
    max-width:360px;

    line-height:1.5;
}

.engine-city-brain-entry{
    width:
        min(
            390px,
            100%
        );

    min-height:44px;

    margin-top:16px;

    background:
        rgba(2,17,26,.52);
}

.engine-city-lenses{
    bottom:6.5%;
    gap:6px;
}

.engine-city-lenses button{
    min-height:32px;

    padding:
        0
        13px;

    transition:
        .24s ease;
}

.engine-city-lenses button.is-active{
    border-color:
        rgba(226,184,105,.30);

    background:
        rgba(226,184,105,.09);

    color:
        rgba(248,239,221,.94);
}

.engine-spatial-home[data-city-lens="places"]
.engine-city-trace:not([data-kind="places"]),

.engine-spatial-home[data-city-lens="events"]
.engine-city-trace:not([data-kind="events"]),

.engine-spatial-home[data-city-lens="community"]
.engine-city-trace:not([data-kind="community"]),

.engine-spatial-home[data-city-lens="discovery"]
.engine-city-trace:not([data-kind="discovery"]){
    opacity:.12;
    transform:scale(.96);
    pointer-events:none;
}

.engine-spatial-home[data-city-lens="places"]
.engine-city-trace[data-kind="places"],

.engine-spatial-home[data-city-lens="events"]
.engine-city-trace[data-kind="events"],

.engine-spatial-home[data-city-lens="community"]
.engine-city-trace[data-kind="community"],

.engine-spatial-home[data-city-lens="discovery"]
.engine-city-trace[data-kind="discovery"]{
    border-color:
        rgba(226,184,105,.26);

    background:
        rgba(5,31,44,.78);
}

@media (max-width:720px){

    .engine-city-atlas{
        top:56%;
        width:112%;
        height:58%;
    }

    .engine-city-live-core{
        left:22px;
        top:14%;

        width:
            calc(
                100% - 44px
            );
    }

    .engine-city-live-core > strong{
        font-size:
            clamp(
                30px,
                10vw,
                42px
            );
    }

    .engine-city-trace{
        padding:
            5px
            7px;
    }

    .engine-city-trace strong{
        font-size:6.5px;
    }

    .engine-city-trace small{
        display:none;
    }

    .engine-city-trace-oldcity{
        left:12%;
        top:47%;
    }

    .engine-city-trace-coast{
        right:8%;
        top:42%;
    }

    .engine-city-trace-campus{
        left:25%;
        bottom:24%;
    }

    .engine-city-trace-event{
        right:28%;
        bottom:20%;
    }

    .engine-city-trace-varosha{
        right:7%;
        top:61%;
    }

    .engine-city-lenses{
        bottom:5%;

        width:
            calc(
                100% - 20px
            );

        flex-wrap:nowrap;

        gap:4px;
    }

    .engine-city-lenses button{
        min-height:29px;

        padding:
            0
            8px;

        font-size:6px;
    }

}

/* engine-city-v4-rebuild */
.engine-city-live-layer{
    background:
        radial-gradient(circle at 74% 18%, rgba(43,172,222,.16), transparent 25%),
        radial-gradient(circle at 20% 72%, rgba(15,89,128,.23), transparent 34%),
        linear-gradient(145deg, #03121d 0%, #06283a 52%, #020c14 100%);
}

.engine-city-live-grid{
    inset:-12%;
    opacity:.11;
    background-size:42px 42px;
    transform:perspective(900px) rotateX(66deg) translateY(28%);
}

.engine-city-atlas{
    top:59%;
    width:min(860px,80%);
    height:min(405px,54%);
    transform:translate(-50%,-50%) perspective(1100px) rotateX(52deg) rotateZ(-5deg);
}

.engine-city-atlas::before{
    inset:3%;
    border-radius:18px;
    border-color:rgba(115,207,238,.16);
    background:
        linear-gradient(127deg, transparent 0 42%, rgba(72,174,210,.10) 42.3% 43%, transparent 43.4%),
        linear-gradient(90deg, rgba(96,190,224,.045) 1px, transparent 1px),
        linear-gradient(rgba(96,190,224,.04) 1px, transparent 1px),
        linear-gradient(145deg, rgba(8,52,72,.78), rgba(3,19,29,.25));
    background-size:auto, 22px 22px, 22px 22px, auto;
    box-shadow:inset 0 0 75px rgba(49,175,220,.08), 0 22px 70px rgba(0,0,0,.20);
}

.engine-city-waterline,
.engine-city-quay,
.engine-city-district,
.engine-city-beacon{
    position:absolute;
    pointer-events:none;
}

.engine-city-waterline{
    z-index:1;
    left:4%;
    top:18%;
    width:92%;
    height:26%;
    border-top:1px solid rgba(91,205,239,.32);
    border-radius:50%;
    transform:rotate(-8deg);
    box-shadow:0 -10px 28px rgba(62,185,225,.07);
}

.engine-city-quay{
    z-index:2;
    right:12%;
    top:23%;
    width:21%;
    height:34%;
    border:1px solid rgba(226,184,105,.20);
    border-left:0;
    border-radius:0 26px 26px 0;
    transform:rotate(8deg);
}

.engine-city-road{
    z-index:3;
    height:2px;
    opacity:.88;
    background:linear-gradient(90deg, transparent, rgba(118,216,248,.52), rgba(226,184,105,.33), transparent);
}

.engine-city-road-a{ left:12%; top:49%; width:76%; transform:rotate(9deg); }
.engine-city-road-b{ left:26%; top:25%; width:53%; transform:rotate(42deg); }
.engine-city-road-c{ left:35%; top:73%; width:51%; transform:rotate(-28deg); }
.engine-city-road-d{ left:11%; top:66%; width:64%; transform:rotate(-11deg); }

.engine-city-zone{
    z-index:4;
    border-radius:12px;
    border-color:rgba(115,207,238,.16);
    background:linear-gradient(135deg, rgba(66,174,211,.11), rgba(5,30,43,.03));
}

.engine-city-zone-a{ left:17%; top:28%; width:22%; height:24%; transform:rotate(8deg); }
.engine-city-zone-b{ left:48%; top:25%; width:24%; height:27%; transform:rotate(-6deg); }
.engine-city-zone-c{ left:43%; top:57%; width:27%; height:23%; transform:rotate(7deg); }

.engine-city-district{
    z-index:5;
    width:9px;
    height:9px;
    border-radius:50%;
    background:rgba(241,226,183,.94);
    box-shadow:0 0 0 5px rgba(226,184,105,.09), 0 0 22px rgba(226,184,105,.72);
}

.engine-city-district-oldcity{ left:35%; top:47%; }
.engine-city-district-campus{ left:57%; top:68%; background:rgba(130,219,247,.95); box-shadow:0 0 0 5px rgba(98,211,247,.08), 0 0 22px rgba(98,211,247,.65); }
.engine-city-district-varosha{ left:77%; top:43%; background:rgba(130,219,247,.95); box-shadow:0 0 0 5px rgba(98,211,247,.08), 0 0 22px rgba(98,211,247,.65); }

.engine-city-beacon{
    z-index:4;
    border:1px solid rgba(124,213,244,.22);
    border-radius:50%;
    animation:engine-city-v4-pulse 4.2s ease-in-out infinite;
}

.engine-city-beacon-core{ left:27%; top:33%; width:36px; height:36px; }
.engine-city-beacon-port{ left:70%; top:20%; width:28px; height:28px; animation-delay:-1.3s; }
.engine-city-beacon-east{ left:67%; top:56%; width:31px; height:31px; animation-delay:-2.4s; }

.engine-city-trace{
    z-index:49;
    border-radius:999px;
    background:rgba(2,18,28,.78);
    border-color:rgba(126,214,241,.17);
}

.engine-city-trace-oldcity{ left:14%; top:48%; }
.engine-city-trace-coast{ right:11%; top:35%; }
.engine-city-trace-campus{ left:27%; bottom:22%; }
.engine-city-trace-event{ right:29%; bottom:24%; }
.engine-city-trace-varosha{ right:8%; top:58%; }

.engine-city-live-core{
    left:10%;
    top:16%;
    width:min(420px,42%);
}

.engine-city-live-core > small{ max-width:360px; line-height:1.55; }
.engine-city-lenses{ bottom:6%; }

@keyframes engine-city-v4-pulse{
    0%,100%{ transform:scale(.82); opacity:.38; }
    50%{ transform:scale(1.14); opacity:.9; }
}

@media (max-width:720px){
    .engine-city-atlas{
        top:57%;
        width:108%;
        height:43%;
        transform:translate(-50%,-50%) perspective(760px) rotateX(47deg) rotateZ(-4deg);
    }

    .engine-city-atlas::before{ inset:5%; border-radius:16px; }
    .engine-city-live-core{ left:22px; top:14%; width:calc(100% - 44px); }
    .engine-city-trace-oldcity{ left:10%; top:49%; }
    .engine-city-trace-coast{ right:7%; top:40%; }
    .engine-city-trace-campus{ left:24%; bottom:25%; }
    .engine-city-trace-event{ right:27%; bottom:21%; }
    .engine-city-trace-varosha{ right:6%; top:61%; }
}
/* engine-region-v2-atlas-refinement */
.engine-region-map-layer{
    isolation:isolate;
    background:
        radial-gradient(circle at 64% 48%, rgba(49,177,221,.16), transparent 18%),
        radial-gradient(circle at 31% 76%, rgba(9,72,108,.28), transparent 37%),
        linear-gradient(145deg, #03101a 0%, #062b40 52%, #020b13 100%);
}

.engine-region-ocean{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(ellipse at 64% 49%, rgba(67,190,230,.14), transparent 23%),
        repeating-linear-gradient(120deg, transparent 0 22px, rgba(126,212,239,.026) 23px 24px);
    pointer-events:none;
}

.engine-region-map{
    z-index:1;
    opacity:.82;
    object-fit:cover !important;
    object-position:55% 51% !important;
    filter:
        grayscale(.28)
        sepia(.10)
        hue-rotate(142deg)
        saturate(.72)
        brightness(.70)
        contrast(1.18)
        drop-shadow(0 18px 34px rgba(0,0,0,.32));
    transform:scale(1.035);
}

.engine-region-map-layer::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(5,24,35,.60), transparent 24%, transparent 77%, rgba(5,24,35,.48)),
        linear-gradient(180deg, rgba(2,12,19,.32), transparent 28%, transparent 78%, rgba(2,12,19,.52));
    mix-blend-mode:multiply;
}

.engine-region-map-layer::after{
    content:"";
    position:absolute;
    inset:7%;
    z-index:2;
    border:1px solid rgba(116,207,238,.11);
    border-radius:18px;
    pointer-events:none;
    background:
        linear-gradient(rgba(118,207,236,.042) 1px, transparent 1px),
        linear-gradient(90deg, rgba(118,207,236,.042) 1px, transparent 1px);
    background-size:34px 34px;
    box-shadow:
        inset 0 0 80px rgba(41,164,208,.07),
        0 22px 56px rgba(0,0,0,.18);
    opacity:.72;
}

.engine-region-marker{
    z-index:5;
}

.engine-spatial-home.is-region-focus:not(.is-island-focus)
.engine-region-marker-cyprus{
    left:67% !important;
    top:51% !important;
}

@media (max-width:720px){
    .engine-region-map{
        object-position:55% 50% !important;
        transform:scale(1.07);
    }

    .engine-region-map-layer::after{
        inset:4%;
        border-radius:16px;
        background-size:28px 28px;
    }

    .engine-spatial-home.is-region-focus:not(.is-island-focus)
    .engine-region-marker-cyprus{
        left:68% !important;
        top:53% !important;
    }
}

/* engine-island-v3-city-coordinates */
.engine-city-node-girne{
    left:47.2%;
    top:39.6%;
}

.engine-city-node-lefkosa{
    left:48.6%;
    top:46.7%;
}

.engine-city-node-magusa{
    left:63.4%;
    top:48.9%;
}

.engine-city-node-larnaka{
    left:57.3%;
    top:58.1%;
}

.engine-city-node-limasol{
    left:38.7%;
    top:68.9%;
}

.engine-city-node-baf{
    left:22.8%;
    top:64.5%;
}