:root{
    --zx_bg0:#05060b;
    --zx_bg1:#070a12;
    --zx_ink:#eafff8;
    --zx_dim:#9fb6b0;

    --zx_cyn:#87ffe6;
    --zx_grn:#7bff9f;
    --zx_mag:#caa2ff;
    --zx_ylw:#ffd38a;
    --zx_red:#ff6a8f;

    --zx_line: rgba(135,255,230,.14);
    --zx_glass: rgba(6,8,12,.72);
    --zx_glass2: rgba(6,8,12,.44);

    --zx_r: 18px;
    --zx_mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    --zx_shadow: 0 22px 90px rgba(0,0,0,.62);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation:none !important; transition:none !important; }
}

body{
    margin:0;
    font-family: var(--zx_mono);
    color: var(--zx_ink);
    background:
            radial-gradient(1100px 700px at 18% 8%, rgba(135,255,230,.12), transparent 60%),
            radial-gradient(900px 600px at 82% 18%, rgba(202,162,255,.10), transparent 62%),
            radial-gradient(800px 600px at 40% 92%, rgba(255,106,143,.08), transparent 64%),
            linear-gradient(180deg, var(--zx_bg0), var(--zx_bg1));
    min-height:100vh;
    overflow-x:hidden;
}

/* scanlines + subtle grain */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
            repeating-linear-gradient(
                    to bottom,
                    rgba(255,255,255,.06),
                    rgba(255,255,255,.06) 1px,
                    rgba(0,0,0,0) 4px,
                    rgba(0,0,0,0) 9px
            );
    opacity:.10;
    mix-blend-mode: overlay;
}
body::after{
    content:"";
    position:fixed;
    inset:-25%;
    pointer-events:none;
    opacity:.10;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.95%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3C/filter%3E%3Crect%20width%3D%27240%27%20height%3D%27240%27%20filter%3D%27url(%23n)%27%20opacity%3D%270.25%27/%3E%3C/svg%3E");
    background-size: 240px 240px;
    animation: zx_noise 6.8s steps(6) infinite;
}
@keyframes zx_noise{
    0%{ transform: translate3d(0,0,0) rotate(0deg); background-position: 0 0; }
    100%{ transform: translate3d(22px,-18px,0) rotate(1deg); background-position: 240px 480px; }
}

.zx_skip{
    position:absolute;
    left:-999px;
    top:12px;
    padding:10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,.45);
    border:1px solid var(--zx_line);
    color: var(--zx_ink);
    z-index:9999;
}
.zx_skip:focus{ left:12px; }

.zx_app{
    width: min(1120px, calc(100% - 28px));
    margin: 18px auto 60px;
    border-radius: calc(var(--zx_r) + 8px);
    border: 1px solid rgba(135,255,230,.18);
    background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.16));
    box-shadow: var(--zx_shadow);
    overflow:hidden;
    position:relative;
}

/* animated “energy border” */
.zx_app::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius: calc(var(--zx_r) + 10px);
    background: conic-gradient(from 140deg,
    rgba(135,255,230,.0),
    rgba(135,255,230,.18),
    rgba(202,162,255,.14),
    rgba(255,211,138,.12),
    rgba(255,106,143,.10),
    rgba(135,255,230,.0)
    );
    filter: blur(18px);
    opacity:.38;
    animation: zx_spin 8.5s linear infinite;
    pointer-events:none;
}
@keyframes zx_spin{ to{ transform: rotate(360deg); } }

.zx_titlebar{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(6,8,12,.92), rgba(6,8,12,.62));
    border-bottom: 1px solid rgba(135,255,230,.14);
    backdrop-filter: blur(10px);
}

.zx_titlebar__left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width: 0;
}
.zx_led{
    width:10px;height:10px;border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 18px rgba(135,255,230,.08);
}
.zx_led--r{ background: rgba(255,106,143,.65); }
.zx_led--y{ background: rgba(255,211,138,.70); }
.zx_led--g{ background: rgba(123,255,159,.65); }

.zx_titlebar__name{
    font-weight: 900;
    letter-spacing:.12em;
    text-transform: uppercase;
}
.zx_titlebar__meta{
    color: rgba(159,182,176,.92);
    font-size: 12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

.zx_titlebar__right{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.zx_chip{
    padding: 6px 8px;
    border-radius: 999px;
    border:1px solid rgba(135,255,230,.16);
    background: rgba(0,0,0,.22);
    color: rgba(234,255,248,.86);
    font-size: 11px;
    letter-spacing:.10em;
    text-transform: uppercase;
}
.zx_chip--hot{
    border-color: rgba(255,211,138,.22);
    background: rgba(255,211,138,.08);
    color: rgba(255,211,138,.92);
}

.zx_cmdrack{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(6,8,12,.62), rgba(6,8,12,.42));
    border-bottom: 1px solid rgba(135,255,230,.10);
}
.zx_cmdlink{
    text-decoration:none;
    color: rgba(234,255,248,.90);
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(0,0,0,.14);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.zx_cmdlink:hover{
    transform: translateY(-1px);
    border-color: rgba(135,255,230,.18);
    background: rgba(135,255,230,.05);
    box-shadow: 0 0 0 1px rgba(202,162,255,.10) inset;
}
.zx_prompt{
    color: rgba(135,255,230,.95);
}

.zx_out{
    position:relative;
    z-index:1;
    padding: 14px;
}

.zx_block{
    padding: 14px 14px 16px;
    border-radius: var(--zx_r);
    background: linear-gradient(180deg, var(--zx_glass), var(--zx_glass2));
    border: 1px solid rgba(135,255,230,.12);
    box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
    margin: 12px 0;
    scroll-margin-top: 18px;
}

/* anchor lock highlight */
.zx_block:target{
    border-color: rgba(135,255,230,.28);
    box-shadow: 0 0 0 1px rgba(202,162,255,.14) inset, 0 26px 120px rgba(135,255,230,.08);
}
.zx_block:target::before{
    content:"FOCUS";
    position:absolute;
    transform: translateY(-8px);
    right: 26px;
    margin-top: 10px;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(135,255,230,.16);
    background: rgba(135,255,230,.06);
    color: rgba(135,255,230,.92);
    font-size: 11px;
    letter-spacing:.16em;
    text-transform: uppercase;
}

.zx_line{
    display:flex;
    flex-wrap:wrap;
    gap: 6px;
    align-items:baseline;
    color: rgba(234,255,248,.90);
    margin-bottom: 10px;
}
.zx_user{ color: rgba(123,255,159,.92); }
.zx_path{ color: rgba(202,162,255,.92); }
.zx_dim{ color: rgba(159,182,176,.82); }
.zx_cmd{ color: rgba(255,211,138,.92); }
.zx_cursor{
    color: rgba(135,255,230,.92);
    animation: zx_blink 1.05s steps(2, start) infinite;
}
@keyframes zx_blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.zx_banner{
    margin: 10px 0 12px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(135,255,230,.12);
    background: rgba(0,0,0,.22);
    overflow:auto;
    color: rgba(234,255,248,.86);
    text-shadow: 0 0 18px rgba(135,255,230,.10);
}

.zx_grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}
@media (max-width: 980px){
    .zx_grid{ grid-template-columns: 1fr; }
}

.zx_panel{
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(135,255,230,.12);
    background: rgba(0,0,0,.18);
}
.zx_panel__h{
    font-size: 12px;
    letter-spacing:.14em;
    text-transform: uppercase;
    color: rgba(135,255,230,.92);
    margin-bottom: 8px;
}
.zx_panel__p{
    color: rgba(234,255,248,.86);
    line-height: 1.65;
    font-size: 13px;
}
.zx_panel--pulse{
    position:relative;
    overflow:hidden;
}
.zx_panel--pulse::after{
    content:"";
    position:absolute;
    inset:-40%;
    background: linear-gradient(110deg, transparent 40%, rgba(135,255,230,.10), transparent 60%);
    transform: translateX(-60%) rotate(10deg);
    animation: zx_sweep 3.2s infinite;
    pointer-events:none;
}
@keyframes zx_sweep{
    0%{ transform: translateX(-70%) rotate(10deg); opacity:0; }
    18%{ opacity:.55; }
    100%{ transform: translateX(70%) rotate(10deg); opacity:0; }
}

.zx_kbd{
    display:inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255,211,138,.16);
    background: rgba(255,211,138,.06);
    color: rgba(255,211,138,.92);
}

.zx_action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(123,255,159,.18);
    background: linear-gradient(90deg, rgba(123,255,159,.16), rgba(135,255,230,.08));
    color: rgba(234,255,248,.92);
    text-decoration:none;
    letter-spacing:.10em;
    text-transform: uppercase;
    font-size: 12px;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.zx_action:hover{
    transform: translateY(-2px);
    border-color: rgba(135,255,230,.24);
    box-shadow: 0 18px 70px rgba(0,0,0,.46), 0 0 0 1px rgba(202,162,255,.10) inset;
}
.zx_action--big{
    padding: 12px 14px;
    font-size: 15px;
    word-break: break-all;
}

.zx_inline{
    color: rgba(135,255,230,.95);
    text-decoration:none;
    border-bottom: 1px dashed rgba(135,255,230,.22);
}
.zx_inline:hover{ border-bottom-color: rgba(202,162,255,.40); }

.zx_small{
    margin-top: 8px;
    color: rgba(159,182,176,.90);
    font-size: 12px;
    line-height: 1.6;
}

.zx_note{
    margin-top: 12px;
    padding: 12px;
    border-radius: 16px;
    border: 1px dashed rgba(255,211,138,.22);
    background: rgba(255,211,138,.05);
    color: rgba(234,255,248,.86);
    line-height: 1.6;
    font-size: 13px;
}

.zx_box{
    border-radius: 16px;
    border: 1px solid rgba(135,255,230,.12);
    background: rgba(0,0,0,.18);
    overflow:hidden;
}
.zx_box__t{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(135,255,230,.10);
    background: rgba(6,8,12,.55);
    color: rgba(135,255,230,.92);
    letter-spacing:.14em;
    text-transform: uppercase;
    font-size: 12px;
}
.zx_box__c{
    padding: 12px;
}
.zx_box--glow{
    box-shadow: 0 0 0 1px rgba(202,162,255,.10) inset, 0 26px 120px rgba(135,255,230,.06);
}

.zx_kv{
    display:grid;
    grid-template-columns: 190px 1fr;
    gap: 8px 12px;
    margin: 8px 0 0;
}
@media (max-width: 720px){
    .zx_kv{ grid-template-columns: 1fr; }
}
.zx_kv__k{ color: rgba(159,182,176,.90); }
.zx_kv__v{ color: rgba(234,255,248,.90); }

.zx_warn{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,106,143,.18);
    background: rgba(255,106,143,.06);
    color: rgba(234,255,248,.86);
    line-height: 1.6;
}

.zx_split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
@media (max-width: 980px){
    .zx_split{ grid-template-columns: 1fr; }
}

.zx_list{
    margin: 10px 0 0;
    padding-left: 18px;
    line-height: 1.75;
    color: rgba(234,255,248,.86);
    font-size: 13px;
}

.zx_pre{
    margin: 8px 0 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(135,255,230,.12);
    background: rgba(0,0,0,.22);
    overflow:auto;
    color: rgba(234,255,248,.90);
}
code{ color: rgba(135,255,230,.95); }

.zx_cards{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 980px){
    .zx_cards{ grid-template-columns: 1fr; }
}
.zx_card{
    display:block;
    text-decoration:none;
    border-radius: 16px;
    border: 1px solid rgba(135,255,230,.12);
    background: rgba(0,0,0,.18);
    padding: 12px;
    color: rgba(234,255,248,.90);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.zx_card:hover{
    transform: translateY(-2px);
    border-color: rgba(202,162,255,.18);
    box-shadow: 0 24px 90px rgba(0,0,0,.46), 0 0 0 1px rgba(135,255,230,.10) inset;
}
.zx_card__k{
    color: rgba(255,211,138,.92);
    letter-spacing:.12em;
    text-transform: uppercase;
    font-size: 12px;
}
.zx_card__v{
    margin-top: 8px;
    color: rgba(159,182,176,.92);
    line-height: 1.6;
    font-size: 13px;
}
.zx_card__u{
    margin-top: 10px;
    color: rgba(135,255,230,.92);
    font-size: 12px;
    border-top: 1px dashed rgba(135,255,230,.12);
    padding-top: 10px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}

.zx_qa{
    border-radius: 16px;
    border: 1px solid rgba(135,255,230,.12);
    background: rgba(0,0,0,.18);
    overflow:hidden;
    margin-top: 10px;
}
.zx_qa__q{
    cursor:pointer;
    list-style:none;
    padding: 12px;
    color: rgba(234,255,248,.92);
    letter-spacing:.08em;
    text-transform: uppercase;
    font-size: 12px;
}
.zx_qa__q::-webkit-details-marker{ display:none; }
.zx_qa[open] .zx_qa__q{
    background: rgba(135,255,230,.06);
    border-bottom: 1px solid rgba(135,255,230,.10);
}
.zx_qa__a{
    padding: 12px;
    color: rgba(234,255,248,.86);
    line-height: 1.7;
    font-size: 13px;
}

.zx_footer{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(135,255,230,.10);
    display:flex;
    justify-content:space-between;
    gap: 12px;
    flex-wrap:wrap;
}
.zx_footer__brand{
    font-weight: 900;
    letter-spacing:.14em;
    text-transform: uppercase;
}
.zx_footer__muted{
    margin-top: 4px;
    color: rgba(159,182,176,.90);
    font-size: 12px;
    line-height: 1.6;
}
.zx_back{
    display:inline-block;
    margin-top: 6px;
    color: rgba(135,255,230,.95);
    text-decoration:none;
    border-bottom: 1px dashed rgba(135,255,230,.22);
    letter-spacing:.10em;
    text-transform: uppercase;
    font-size: 12px;
}
.zx_back:hover{ border-bottom-color: rgba(202,162,255,.40); }

.zx_sr{
    position:absolute !important;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
}
.zx_panel__h1{
    font-size:32px;
    color: #7bff9f;
}