*,*:before,*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none
}

:root {
    --bg: #0a0a0a;
    --navy: #1f3e66;
    --navy-dim: rgba(31,62,102,.12);
    --glass: rgba(255, 255, 255, .05);
    --glass-border: rgba(255, 255, 255, .1);
    --glass-hover: rgba(255, 255, 255, .08);
    --text: rgba(255, 255, 255, .58);
    --text-mid: rgba(255, 255, 255, .72);
    --text-bright: rgba(255, 255, 255, .96);
    --text-dim: rgba(255, 255, 255, .4);
    --heading: "Space Grotesk", sans-serif;
    --sans: "Inter", sans-serif;
    --chrome-1: #ffffff;
    --chrome-2: #d8d8d8;
    --chrome-3: #8a8a8a;
    --chrome-4: #2a2a2a;
    --grid-line: rgba(255, 255, 255, .035);
    --blue: #7aa2f7;
    --amber: #e0af68;
    --red: #f7768e;
    --green: #9ece6a;
    --content-max: 1100px;
    --nav-max: 634px
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: none;
    scrollbar-gutter: stable both-edges;
    height: -webkit-fill-available;
    background: var(--bg)
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    overscroll-behavior: none;
    position: relative
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-track {
    background: var(--bg)
}

::-webkit-scrollbar-thumb {
    background: #ffffff1a;
    border-radius: 10px
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) var(--bg)
}

#hero-canvas,#prem-hero-canvas {
    -webkit-mask: linear-gradient(to bottom,transparent 0,#000 90px,#000 calc(100% - 200px),transparent calc(100% - 110px));
    mask: linear-gradient(to bottom,transparent 0,#000 90px,#000 calc(100% - 200px),transparent calc(100% - 110px))
}

nav {
    --nav-ease: cubic-bezier(.22, .8, .32, 1);
    --nav-dur: .5s;
    position: fixed;
    z-index: 100;
    left: 50%;
    transform: translate3d(-50%,0,0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border: 1px solid rgba(28,43,104,.15);
    outline: none;
    opacity: 0;
    width: calc(100% - 48px);
    max-width: var(--nav-max);
    padding: 5px 16px 5px 6px;
    background: radial-gradient(ellipse 70% 120% at 15% 50%,rgba(28,43,104,.2) 0%,transparent 65%),linear-gradient(160deg,#101344a6,#0d0c1eb8);
    box-shadow: 0 20px 56px #0009,inset 0 1px #1c2b681f,inset 0 -1px #0006;
    animation: fadeInNav .8s ease .2s forwards;
    transition: top var(--nav-dur) var(--nav-ease),padding var(--nav-dur) var(--nav-ease),border-radius var(--nav-dur) var(--nav-ease),box-shadow var(--nav-dur) ease
}

@keyframes fadeInNav {
    to {
        opacity: 1
    }
}

nav {
    top: 6px;
    padding-top: 5px;
    padding-bottom: 5px
}

nav.nav--floating {
    border-radius: 18px
}

nav:not(.nav--floating) {
    border-radius: 0 0 18px 18px;
    box-shadow: none
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 4px 12px 4px 6px;
    flex-shrink: 0
}

.nav-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: contain
}

.nav-brand-text {
    font-family: "Space Grotesk",var(--sans);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-bright)
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Space Grotesk",var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .01em;
    color: var(--text);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 100px;
    transition: color .25s,background .25s
}

.nav-link:hover {
    color: #fff;
    background: #1c2b681f
}

.nav-link.active {
    color: #fff;
    background: #1c2b6824
}

.nav-link i {
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Space Grotesk",var(--sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: #ffffffe6;
    background: #1c2b681f;
    border: 1px solid rgba(28,43,104,.2);
    text-decoration: none;
    padding: 4px 9px;
    border-radius: 100px;
    transition: background .25s,border-color .25s;
    flex-shrink: 0;
    margin-left: 14px;
    margin-right: 2px
}

.nav-btn:hover {
    background: #1c2b682e;
    border-color: #1c2b6852;
    color: #fff
}

.nav-btn--discord {
    background: linear-gradient(135deg,#3a58cd,#121b40);
    border: 1px solid rgba(78,108,225,.45);
    color: #fff;
    box-shadow: 0 4px 16px -4px #22347d80,inset 0 1px 1px #ffffff26;
    transition: transform .25s,background .25s,border-color .25s;
    transform: translateY(-1px)
}

.nav-btn--discord:hover {
    background: linear-gradient(135deg,#4664dc,#182250);
    border-color: #4e6ce199;
    color: #fff
}

.nav-btn i {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0
}

.nav-toggle {
    display: none
}

.nav-menu {
    display: contents
}

i.fa-solid,i.fa-brands,i.fa-regular {
    line-height: 1;
    vertical-align: middle
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

body .cmd-card,body .tm-card,body .ts-card,body .st-shard,body .st-stat {
    background: linear-gradient(180deg,#1c2b6814,#1c2b6805 55%,#1c2b6803);
    border: 1px solid rgba(28,43,104,.12);
    box-shadow: inset 0 1px #1c2b681f,inset 0 -1px #0006,0 10px 30px #00000073
}

body .cmd-card:hover,body .tm-card:hover,body .st-shard:hover {
    border-color: #1c2b683b;
    box-shadow: inset 0 1px #1c2b682e,inset 0 -1px #00000073,0 16px 40px #0000008c
}

body .search-btn,body .prem-toggle,body .cat-bar-wrap,body .cat-pill,body .cmd-pill,body .cmd-copy-btn,body .back-top,body .modal-box,body .step-cmd,body .ts-qbtn,body .ts-copy,body .tm-badge,body .tier-buy-btn,body .tier-buy-btn--life,body .buy-btn,body .notfound-btn,body .search-box input,body .ts-row input,body input[type=text],body input[type=search],body input[type=number],body input[type=datetime-local],body select,body textarea {
    background: linear-gradient(180deg,#ffffff0e,#ffffff05 55%,#ffffff03);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 1px #ffffff1f,inset 0 -1px #0000004d,0 3px 10px #00000047;
    color: var(--text-mid)
}

body .search-btn:hover,body .prem-toggle:hover,body .cat-pill:hover,body .cmd-copy-btn:hover,body .back-top:hover,body .ts-qbtn:hover,body .ts-copy:hover,body .tier-buy-btn:hover,body .tier-buy-btn--life:hover,body .buy-btn:hover,body .notfound-btn:hover {
    background: linear-gradient(180deg,#ffffff16,#ffffff08 55%,#ffffff04);
    border-color: #ffffff29;
    color: var(--text-bright);
    box-shadow: inset 0 1px #ffffff2e,inset 0 -1px #00000059,0 5px 14px #00000061
}

body .cat-pill.active,body .cat-pill[aria-selected=true],body .cat-pill.is-active {
    background: linear-gradient(180deg,#ffffff1c,#ffffff0a 55%,#ffffff05);
    border-color: #fff3;
    color: var(--text-bright);
    box-shadow: inset 0 1px #ffffff38,inset 0 -1px #00000059,0 4px 12px #0006
}

body input,body select,body textarea {
    color: var(--text-bright)
}

body input::placeholder,body textarea::placeholder {
    color: var(--text-dim)
}

body input:focus,body select:focus,body textarea:focus {
    outline: none;
    border-color: #ffffff47;
    box-shadow: inset 0 1px #ffffff38,inset 0 -1px #0006,0 0 0 3px #ffffff0d
}

body .modal-backdrop {
    background: #000000a6
}

body .results-meta,body .search-results-meta {
    color: var(--text-mid);
    font-weight: 500
}

body .cat-pill-count {
    color: var(--text-mid);
    opacity: 1;
    font-weight: 500
}

body .cat-pill.active .cat-pill-count {
    color: var(--text-bright)
}

body .tier-badge,body .tier-badge--life {
    background: #1a1a1a linear-gradient(180deg,#ffffff14,#ffffff05);
    border-color: #fff3;
    box-shadow: inset 0 1px #ffffff2e,inset 0 -1px #0006,0 3px 10px #00000073;
    color: var(--text-bright);
    text-shadow: 0 1px 0 rgba(0,0,0,.3)
}

body .cmd-tier-tag {
    background: linear-gradient(180deg,#ffffff1f,#ffffff0a);
    border-color: #ffffff2e;
    color: var(--text-bright);
    text-shadow: 0 1px 0 rgba(0,0,0,.3)
}

@media(max-width: 640px) {
    nav {
        width:calc(100% - 32px);
        max-width: var(--nav-max);
        padding-right: 6px
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border-radius: 100px;
        background: #1c2b681f;
        border: 1px solid rgba(28,43,104,.2);
        color: #ffffffe6;
        cursor: pointer;
        transition: background .25s,border-color .25s,color .25s
    }

    .nav-toggle:hover,.nav-toggle[aria-expanded=true] {
        background: #1c2b682e;
        border-color: #1c2b6852;
        color: #fff
    }

    .nav-toggle i {
        font-size: 15px;
        line-height: 1
    }

    .nav-menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 18px;
        border: 1px solid rgba(28,43,104,.15);
        background: radial-gradient(ellipse 70% 120% at 15% 0%,rgba(28,43,104,.2) 0%,transparent 65%),linear-gradient(160deg,#101344f2,#0d0c1ef7);
        box-shadow: 0 20px 56px #0009,inset 0 1px #1c2b681f;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity .22s ease,transform .22s ease,visibility .22s
    }

    .nav-menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px
    }

    .nav-link {
        justify-content: flex-start;
        padding: 10px 14px;
        gap: 10px
    }

    .nav-link .nav-link-text {
        display: inline
    }

    .nav-link i {
        margin-right: 0;
        font-size: 14px;
        width: 16px;
        text-align: center
    }

    .nav-btn {
        margin: 4px 0 0;
        width: 100%;
        justify-content: center
    }

    .nav-btn .nav-btn-text {
        display: inline
    }

    .nav-btn i {
        font-size: 14px
    }
}

@keyframes heroShimmer {
    0% {
        background-position: right center
    }

    to {
        background-position: left center
    }
}

/* -------------------------------------------------------------------------- */
/* Page layout — same tokens, no new visual language                          */
/* -------------------------------------------------------------------------- */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%)
}

.page {
    position: relative;
    z-index: 1
}

.wrap {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px
}

.hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    overflow: hidden
}

#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: fadeUp .8s ease both
}

.hero h1 {
    font-family: var(--heading);
    font-weight: 600;
    font-size: clamp(42px, 7vw, 76px);
    line-height: .98;
    letter-spacing: -.03em;
    color: var(--text-bright);
    margin-bottom: 18px
}

.hero h1 em,
.display-italic {
    font-family: var(--sans), sans-serif;
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(100deg, var(--chrome-1), var(--blue) 55%, var(--chrome-2));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: heroShimmer 6s linear infinite
}

.hero-lead {
    max-width: 560px;
    margin: 0 auto 28px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-mid)
}

.hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px
}

.hero-actions .nav-btn {
    margin: 0;
    padding: 10px 16px;
    font-size: 13px
}

.hero-stats,
.st-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.st-stat,
.hero-stats .st-stat {
    border-radius: 16px;
    padding: 16px 14px;
    text-align: left
}

.st-stat-label {
    display: block;
    font-family: "Space Grotesk", var(--sans);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px
}

.st-stat-value {
    font-family: var(--heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: -.02em;
    line-height: 1
}

.section {
    padding: 72px 0
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 28px
}

.section-head h2,
.page-title h1 {
    font-family: var(--heading);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text-bright)
}

.section-head p,
.page-title p {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text)
}

.page-hero {
    position: relative;
    padding: 120px 0 36px;
    overflow: hidden
}

.page-title {
    position: relative;
    z-index: 1;
    animation: fadeUp .7s ease both
}

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

.tm-card {
    border-radius: 18px;
    padding: 22px 22px 20px;
    transition: border-color .25s, box-shadow .25s, transform .25s
}

.tm-card:hover {
    transform: translateY(-2px)
}

.tm-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: var(--blue);
    background: linear-gradient(180deg,#ffffff14,#ffffff05);
    border: 1px solid rgba(255,255,255,.08)
}

.tm-card h3 {
    font-family: var(--heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 8px
}

.tm-card p {
    font-size: 14px;
    line-height: 1.55
}

.extras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px
}

.cta-band {
    margin: 20px 0 80px;
    border-radius: 22px;
    padding: 36px 32px;
    text-align: center
}

.cta-band h2 {
    font-family: var(--heading);
    font-size: 32px;
    color: var(--text-bright);
    margin-bottom: 10px
}

.cta-band p {
    margin-bottom: 20px
}

.cta-band .hero-actions {
    margin-bottom: 0
}

.search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 22px 0 16px
}

.search-box {
    flex: 1;
    position: relative
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--text-dim)
}

.search-box input {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    padding: 0 14px 0 38px;
    font-family: var(--sans);
    font-size: 14px
}

.cat-bar-wrap {
    border-radius: 16px;
    padding: 8px;
    margin-bottom: 18px;
    overflow-x: auto
}

.cat-bar {
    display: flex;
    gap: 8px;
    min-width: max-content
}

.cat-pill,
.cmd-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    padding: 7px 12px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 12px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.09)
}

.cat-pill-count {
    font-size: 11px
}

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

.cmd-card {
    border-radius: 18px;
    padding: 18px 18px 16px;
    cursor: pointer;
    text-align: left;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.cmd-card:hover {
    transform: translateY(-2px)
}

.cmd-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.cmd-name {
    font-family: "Space Grotesk", var(--sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-bright)
}

.cmd-name span {
    color: var(--blue)
}

.cmd-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text)
}

.cmd-usage {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text-mid)
}

.cmd-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto
}

.cmd-copy-btn {
    border-radius: 100px;
    padding: 5px 10px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 11px;
    cursor: pointer
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 16px;
    color: var(--text)
}

.st-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 8px 0 22px;
    font-size: 13px;
    color: var(--text-mid)
}

.st-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(158,206,106,.12)
}

.st-dot.is-off {
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(247,118,142,.12)
}

.st-dot.is-wait {
    background: var(--amber);
    box-shadow: 0 0 0 4px rgba(224,175,104,.12)
}

.st-shards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.st-shard {
    border-radius: 18px;
    padding: 18px;
    transition: border-color .25s, box-shadow .25s, transform .25s
}

.st-shard:hover {
    transform: translateY(-2px)
}

.st-shard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px
}

.st-shard-title {
    font-family: var(--heading);
    font-size: 18px;
    color: var(--text-bright)
}

.st-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 100px;
    padding: 4px 10px;
    font-size: 11px;
    font-family: "Space Grotesk", var(--sans);
    text-transform: capitalize;
    border: 1px solid rgba(255,255,255,.1);
    color: var(--text-mid)
}

.st-chip.online { color: var(--green); border-color: rgba(158,206,106,.28) }
.st-chip.offline { color: var(--red); border-color: rgba(247,118,142,.28) }
.st-chip.connecting,
.st-chip.reconnecting,
.st-chip.identifying,
.st-chip.resuming,
.st-chip.joining,
.st-chip.starting,
.st-chip.idle { color: var(--amber); border-color: rgba(224,175,104,.28) }

.st-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px
}

.st-metric-label {
    display: block;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 3px
}

.st-metric-value {
    font-size: 16px;
    color: var(--text-bright);
    font-weight: 500
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px
}

.modal-backdrop.open {
    display: flex
}

body .modal-backdrop {
    background: rgba(4, 6, 12, .55);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%)
}

.modal-box {
    width: min(620px, 100%);
    border-radius: 20px;
    padding: 24px;
    max-height: min(82vh, 760px);
    overflow: auto;
    overscroll-behavior: contain;
    user-select: text;
    -webkit-user-select: text
}

/* Command detail popup: liquid glass — translucent frosted surface. The
   backdrop blur plus a dark-enough tint keeps every text style readable
   without going back to an opaque panel. */
body .modal-box {
    background:
        radial-gradient(ellipse 80% 60% at 15% 0%, rgba(28, 43, 104, .3) 0%, transparent 62%),
        linear-gradient(180deg, rgba(20, 24, 43, .72), rgba(11, 14, 26, .82));
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: inset 0 1px rgba(255, 255, 255, .14), inset 0 -1px #0006, 0 24px 64px rgba(0, 0, 0, .5)
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.modal-head h3 {
    font-family: var(--heading);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-bright)
}

.modal-head h3 span {
    color: var(--blue)
}

.modal-head .cmd-desc {
    margin-top: 5px
}

.modal-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.1);
    background: transparent;
    color: var(--text-mid);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s
}

.modal-close:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: var(--text-bright)
}

/* Readable text inside the popup: bump every text style to a high-contrast
   variant so nothing sits below ~.65 alpha on the dark surface. */
.modal-box .cmd-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-mid)
}

.modal-sub {
    font-family: "Space Grotesk", var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 18px 0 8px
}

.modal-box .cmd-usage {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: #c9d6f7;
    background: rgba(5, 8, 16, .5);
    border: 1px solid rgba(122, 162, 247, .3);
    border-radius: 10px;
    padding: 10px 12px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    user-select: text;
    -webkit-user-select: text
}

.modal-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-mid);
    background: rgba(122, 162, 247, .07);
    border: 1px solid rgba(122, 162, 247, .22)
}

.modal-note i {
    color: var(--blue);
    font-size: 11px;
    margin-top: 3px
}

.modal-note strong {
    color: var(--text-bright)
}

.opt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px
}

.opt {
    border-radius: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035)
}

.opt-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.opt strong {
    color: var(--text-bright);
    font-size: 13.5px;
    font-weight: 600
}

.opt em {
    font-style: normal;
    font-family: "Space Grotesk", var(--sans);
    font-size: 10.5px;
    letter-spacing: .02em;
    padding: 2px 9px;
    border-radius: 100px;
    color: #a9c4f8;
    background: rgba(122, 162, 247, .12);
    border: 1px solid rgba(122, 162, 247, .25)
}

.opt span {
    display: block;
    font-size: 13px;
    line-height: 1.55;
    margin-top: 5px;
    color: var(--text-mid)
}

.opt-choices {
    margin-top: 7px;
    font-size: 12px;
    color: var(--text-mid)
}

.opt-choices strong {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase
}

/* ---------------------------------------------------------------------------
   Footer — refreshed: inspired by the heist.lol card-style footer but
   re-built with Echo's glass language, distinct spacing, and NexaLab
   branding. Not a copy: different structure, colors, and hover language.
   --------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 32px 0 24px;
    background: transparent;
    border-top: none
}

.site-footer-card {
    position: relative;
    border-radius: 22px;
    padding: 26px 26px 18px;
    background:
        radial-gradient(ellipse 90% 70% at 12% 0%, rgba(28,43,104,.20) 0%, transparent 58%),
        radial-gradient(ellipse 60% 50% at 88% 0%, rgba(122,162,247,.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20,24,43,.86), rgba(10,12,22,.92));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
        inset 0 1px rgba(255,255,255,.10),
        inset 0 -1px rgba(0,0,0,.55),
        0 18px 48px rgba(0,0,0,.45);
    overflow: hidden
}

.site-footer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 15%, transparent 65%);
    opacity: .35
}

.site-footer-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr .7fr .7fr;
    gap: 28px 24px;
    align-items: start
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0
}

.site-footer-logo-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none
}

.site-footer-logo-row:hover .site-footer-name {
    color: #fff
}

.site-footer-logo {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    padding: 3px;
    box-shadow: inset 0 1px rgba(255,255,255,.10)
}

.site-footer-name {
    font-family: var(--heading);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--text-bright);
    transition: color .2s
}

.site-footer-tagline {
    max-width: 36ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    user-select: text
}

.site-footer-sponsor,
.site-footer-built {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 100px;
    text-decoration: none;
    font-family: "Space Grotesk", var(--sans);
    font-size: 11.5px;
    letter-spacing: .01em;
    color: var(--text-mid);
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.22);
    transition: border-color .2s, background .2s, color .2s, transform .2s
}

.site-footer-sponsor:hover,
.site-footer-built:hover {
    border-color: rgba(122,162,247,.32);
    background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
    color: var(--text-bright);
    transform: translateY(-1px)
}

.site-footer-sponsor-logo,
.site-footer-built-logo {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    object-fit: cover
}

.site-footer-sponsor-name,
.site-footer-built-name {
    font-weight: 600;
    color: var(--text-bright)
}

.site-footer-col {
    min-width: 0
}

.site-footer-col-title {
    font-family: var(--heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 12px
}

.site-footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 0
}

.site-footer-links li {
    list-style: none
}

.site-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
    text-decoration: none;
    transition: color .18s, transform .18s
}

.site-footer-links a i {
    font-size: 12px;
    width: 14px;
    text-align: center;
    opacity: .8
}

.site-footer-links a:hover {
    color: var(--text-bright);
    transform: translateX(2px)
}

.site-footer-links a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 4px;
    color: var(--text-bright)
}

.site-footer-divider {
    position: relative;
    height: 1px;
    margin: 22px 0 14px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent)
}

.site-footer-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 2px
}

.site-footer-status,
.footer-status-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 100px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 11.5px;
    color: var(--text-mid);
    text-decoration: none;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: color .2s, border-color .2s, background .2s
}

.site-footer-status:hover,
.footer-status-link:hover {
    color: var(--text-bright);
    border-color: rgba(122,162,247,.28);
    background: rgba(255,255,255,.06)
}

.site-footer-status .st-dot {
    width: 7px;
    height: 7px;
    margin-right: 0
}

.site-footer-copy,
.footer-copy {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-dim);
    user-select: text
}

.site-footer-copy a,
.footer-copy a {
    color: var(--text-mid);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.12);
    transition: color .2s, border-color .2s
}

.site-footer-copy a:hover,
.footer-copy a:hover {
    color: var(--text-bright);
    border-bottom-color: rgba(255,255,255,.24)
}

.site-footer-sep {
    display: inline;
    opacity: .35;
    margin: 0 2px;
    user-select: none
}

@media (max-width: 860px) {
    .site-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .site-footer {
        padding: 20px 0 16px
    }
    .site-footer-card {
        padding: 18px 16px 14px;
        border-radius: 18px
    }
    .site-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }
    .site-footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }
}

.back-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-bright)
}

.back-top.show {
    display: inline-flex
}

.notfound {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px
}

.notfound h1 {
    font-family: var(--heading);
    font-size: 56px;
    color: var(--text-bright);
    margin-bottom: 10px
}

/* Legal pages (Privacy Policy / Terms of Service) */
.legal {
    padding: 0 0 96px
}

.legal-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px
}

.legal-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    padding: 6px 14px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--text-mid);
    background: linear-gradient(180deg,#ffffff0e,#ffffff05 55%,#ffffff03);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 1px #ffffff1f, inset 0 -1px #0000004d, 0 3px 10px #00000047
}

.legal-chip i {
    font-size: 11px;
    color: var(--blue)
}

.legal-chip strong {
    color: var(--text-bright);
    font-weight: 500
}

.legal-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 28px;
    align-items: start
}

.legal-toc {
    position: sticky;
    top: 92px;
    border-radius: 18px;
    padding: 16px 10px;
    background: linear-gradient(180deg,#1c2b6814,#1c2b6805 55%,#1c2b6803);
    border: 1px solid rgba(28,43,104,.12);
    box-shadow: inset 0 1px #1c2b681f, inset 0 -1px #0006, 0 10px 30px #00000073;
    max-height: calc(100vh - 130px);
    overflow-y: auto
}

.legal-toc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 0 10px;
    margin-bottom: 8px
}

.legal-toc a {
    display: block;
    padding: 6px 10px;
    border-radius: 10px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    border-left: 2px solid rgba(122, 162, 247, .25);
    transition: color .2s, background .2s, border-color .2s
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
    color: var(--text-bright);
    background: #1c2b681f;
    border-left-color: var(--blue)
}

.legal-prose {
    max-width: 760px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-mid);
    user-select: text;
    -webkit-user-select: text
}

.legal-prose h2 {
    font-family: var(--heading);
    font-size: 21px;
    font-weight: 600;
    color: var(--text-bright);
    margin: 40px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    scroll-margin-top: 110px
}

.legal-prose h2:first-child {
    margin-top: 0
}

.legal-prose h3 {
    font-family: var(--heading);
    font-size: 16.5px;
    color: var(--text-bright);
    margin: 24px 0 8px;
    scroll-margin-top: 110px
}

.legal-prose p {
    margin-bottom: 14px
}

.legal-prose strong {
    color: var(--text-bright);
    font-weight: 600
}

.legal-prose ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none
}

.legal-prose li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px
}

.legal-prose li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    transform: rotate(45deg);
    background: var(--blue);
    opacity: .75
}

.legal-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .86em;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(122, 162, 247, .09);
    border: 1px solid rgba(122, 162, 247, .22);
    color: #b9ccf9
}

.legal-prose a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 162, 247, .35);
    transition: color .2s, border-color .2s
}

.legal-prose a:hover,
.legal-prose a:focus-visible {
    color: #a9c4f8;
    border-bottom-color: #a9c4f8
}

/* Provider cards — same glass surface as feature/command cards */
.provider-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 18px 0 8px
}

.provider-card {
    border-radius: 16px;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg,#1c2b6814,#1c2b6805 55%,#1c2b6803);
    border: 1px solid rgba(28,43,104,.12);
    box-shadow: inset 0 1px #1c2b681f, inset 0 -1px #0006, 0 10px 30px #00000073;
    transition: border-color .25s, box-shadow .25s
}

.provider-card:hover {
    border-color: #1c2b683b;
    box-shadow: inset 0 1px #1c2b682e, inset 0 -1px #00000073, 0 14px 34px #0000008c
}

.provider-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px
}

.provider-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--blue);
    background: linear-gradient(180deg,#ffffff14,#ffffff05);
    border: 1px solid rgba(255,255,255,.08)
}

.provider-title {
    min-width: 0
}

.provider-name {
    display: block;
    font-family: "Space Grotesk", var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-bright);
    line-height: 1.25
}

.provider-role {
    display: block;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 2px
}

.provider-card p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 10px
}

.provider-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.provider-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 100px;
    padding: 3px 9px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 10.5px;
    letter-spacing: .02em;
    color: var(--text-mid);
    background: #1c2b6814;
    border: 1px solid rgba(28,43,104,.22)
}

.provider-tag i {
    font-size: 9px;
    color: var(--blue)
}

/* Data-flow table (what is sent to whom) */
.legal-table-wrap {
    overflow-x: auto;
    margin: 16px 0;
    border-radius: 14px;
    border: 1px solid rgba(28,43,104,.16);
    background: rgba(10, 12, 24, .6);
    box-shadow: inset 0 1px #1c2b681f, 0 10px 30px #00000066
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 600px
}

.legal-table th {
    text-align: left;
    padding: 11px 14px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: linear-gradient(180deg,#1c2b6821,#1c2b680a);
    border-bottom: 1px solid rgba(28,43,104,.25);
    white-space: nowrap
}

.legal-table td {
    padding: 11px 14px;
    color: var(--text-mid);
    line-height: 1.55;
    border-bottom: 1px solid rgba(255,255,255,.05);
    vertical-align: top
}

.legal-table tbody tr:last-child td {
    border-bottom: none
}

.legal-table tbody tr {
    transition: background .2s
}

.legal-table tbody tr:hover {
    background: rgba(28, 43, 104, .1)
}

.legal-table td:first-child {
    color: var(--text-bright);
    font-weight: 500
}

.legal-table code {
    font-size: .85em;
    white-space: nowrap
}

/* Callouts */
.legal-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-mid);
    background: rgba(122, 162, 247, .06);
    border: 1px solid rgba(122, 162, 247, .22)
}

.legal-note i {
    color: var(--blue);
    font-size: 13px;
    margin-top: 4px;
    flex-shrink: 0
}

.legal-note strong {
    color: var(--text-bright)
}

.legal-cta {
    margin-top: 36px;
    border-radius: 18px;
    padding: 24px;
    text-align: center;
    background: linear-gradient(180deg,#1c2b6814,#1c2b6805 55%,#1c2b6803);
    border: 1px solid rgba(28,43,104,.14);
    box-shadow: inset 0 1px #1c2b681f, inset 0 -1px #0006, 0 10px 30px #00000073
}

.legal-cta h3 {
    font-family: var(--heading);
    font-size: 19px;
    color: var(--text-bright);
    margin-bottom: 6px
}

.legal-cta p {
    font-size: 13.5px;
    color: var(--text);
    margin-bottom: 16px
}

.legal-cta .hero-actions {
    margin-bottom: 0
}

.legal-prose .legal-meta {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 40px
}

@media print {
    nav, .site-footer, .back-top, .legal-toc, #hero-canvas, .legal-hero-meta {
        display: none !important
    }

    body, .legal-prose, .provider-card p, .legal-table td {
        background: #fff !important;
        color: #222 !important
    }

    .legal-prose h2, .legal-prose h3, .legal-prose strong, .provider-name {
        color: #000 !important
    }
}

.notfound-btn {
    display: inline-flex;
    margin-top: 20px;
    border-radius: 100px;
    padding: 10px 16px;
    text-decoration: none;
    font-family: "Space Grotesk", var(--sans);
    font-size: 13px
}

@media (max-width: 860px) {
    .hero-stats,
    .st-stats,
    .feature-grid,
    .cmd-grid,
    .st-shards,
    .extras {
        grid-template-columns: 1fr
    }
}

@media (max-width: 900px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .legal-toc {
        position: static;
        max-height: none;
        overflow: visible
    }

    .legal-toc nav-links {
        display: flex;
        flex-wrap: wrap
    }
}

@media (max-width: 640px) {
    .wrap { padding: 0 16px }
    .hero { padding-top: 110px }
    .st-stat-value { font-size: 24px }
    .section-head { flex-direction: column; align-items: flex-start }
    .provider-grid { grid-template-columns: 1fr }
    .legal-table { min-width: 540px }
    .legal-prose { font-size: 14.5px }
}

/* ---------------------------------------------------------------------------
   Commands page — Discord-style copy, no popup
   --------------------------------------------------------------------------- */

/* Hide the old modal entirely — commands page now copies instead of opening */
#cmd-modal,
.modal-backdrop {
    display: none !important;
    pointer-events: none !important;
}

/* Search & category bar — small polish */
.search-row {
    gap: 12px
}
.cat-bar-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.07)
}

/* New card layout — Discord-like slash badge + copy */
.cmd-card {
    cursor: default;
    padding: 18px 18px 14px;
    gap: 12px;
    position: relative;
    overflow: hidden
}

.cmd-card::after {
    content: "";
    position: absolute;
    inset: auto -40% -40% auto;
    width: 120px;
    height: 120px;
    background: radial-gradient(ellipse at center, rgba(122,162,247,.10), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s
}

.cmd-card:hover::after {
    opacity: 1
}

.cmd-card-top {
    align-items: center
}

.cmd-slash {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 6px;
    border-radius: 100px;
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(122,162,247,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 2px 10px rgba(0,0,0,.28)
}

.cmd-slash-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3a58cd, #1a2550);
    border: 1px solid rgba(122,162,247,.28);
    color: #c7d6ff;
    font-size: 11px;
    flex-shrink: 0
}

.cmd-slash-name {
    font-family: "Space Grotesk", var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-bright)
}

.cmd-slash-name span {
    color: var(--blue)
}

.cmd-desc {
    color: var(--text-mid);
    font-size: 13.5px;
    line-height: 1.55;
    user-select: text
}

.cmd-usage {
    display: inline-flex;
    max-width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(6,9,18,.72);
    border: 1px solid rgba(122,162,247,.18);
    color: #c2d2f5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.8px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
    cursor: text
}

.cmd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 2px
}

.cmd-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.cmd-opt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 100px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 10.5px;
    color: var(--text-mid);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08)
}

.cmd-opt i,
.cmd-opt .material-symbols-rounded {
    font-size: 11px;
    opacity: .9
}

.cmd-opt--req {
    color: var(--text-bright);
    border-color: rgba(122,162,247,.22);
    background: rgba(122,162,247,.10)
}

.cmd-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .01em;
    cursor: pointer;
    color: var(--text-bright);
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px rgba(255,255,255,.14), 0 2px 10px rgba(0,0,0,.22);
    transition: transform .18s, border-color .18s, background .18s
}

.cmd-copy-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(122,162,247,.32);
    background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06))
}

.cmd-copy-btn:active {
    transform: translateY(0)
}

.cmd-copy-btn.is-copied {
    color: #fff;
    background: linear-gradient(135deg, #3a58cd, #1e2e6e);
    border-color: rgba(122,162,247,.45);
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 4px 16px rgba(36,68,164,.42)
}

.cmd-pill {
    font-size: 10.5px;
    padding: 4px 9px;
    color: var(--text-mid);
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.08)
}

/* Material Symbols — Google Font, used for fresh icons in footer/commands */
.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle
}

.material-symbols-rounded.md-16 {
    font-size: 16px
}
.material-symbols-rounded.md-14 {
    font-size: 14px
}

/* Toast for copy feedback — tiny, Discord-like */
.cmd-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(10px);
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: "Space Grotesk", var(--sans);
    font-size: 12.5px;
    color: var(--text-bright);
    background:
        radial-gradient(ellipse 80% 60% at 15% 0%, rgba(28,43,104,.35), transparent 60%),
        linear-gradient(180deg, rgba(20,24,43,.92), rgba(10,12,22,.96));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s, transform .22s
}
.cmd-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}

/* 2026 premium command, status and shared footer surfaces */
.site-footer{position:relative;z-index:5;width:100%;padding:40px 24px 48px;box-sizing:border-box;margin-top:auto}.site-footer-card{max-width:1180px;margin:0 auto;border-radius:28px;background:radial-gradient(ellipse 70% 50% at 15% 0%,rgba(91,124,255,.13),transparent 65%),linear-gradient(160deg,rgba(13,12,30,.72),rgba(7,7,20,.82));border:1px solid rgba(115,139,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px rgba(0,0,0,.35),0 24px 70px rgba(0,0,0,.35);padding:48px 40px 32px}.site-footer-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;align-items:start;margin-bottom:32px}.site-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left}.site-footer-logo-row{display:flex;align-items:center;gap:12px;text-decoration:none}.site-footer-logo{width:40px;height:40px;border-radius:12px;object-fit:cover}.site-footer-name{font-family:var(--heading);font-size:20px;font-weight:600;color:var(--text-bright)}.site-footer-tagline{font-size:12px;color:var(--text-dim);line-height:1.7;max-width:290px;margin:0}.site-footer-col{display:flex;flex-direction:column;align-items:center}.site-footer-col-title{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin:0 0 16px}.site-footer-links{display:flex;flex-direction:column;align-items:center;gap:11px;list-style:none;padding:0;margin:0}.site-footer-links a{font-size:13px;color:var(--text-mid);text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:.2s}.site-footer-links a:hover{color:#fff;transform:translateX(2px)}.site-footer-divider{height:1px;background:rgba(115,139,255,.13);margin-bottom:24px}.site-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.site-footer-status,.site-footer-built{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);text-decoration:none}.site-footer-status:hover,.site-footer-built:hover{color:#fff}.footer-status-icon{color:#83d4a3}.site-footer-copy{font-size:12px;color:var(--text-dim);margin:0}.site-footer-copy a{color:var(--text-mid);text-decoration:none}
.commands-page,.status-page{max-width:1100px;margin:0 auto;padding:130px 32px 64px;position:relative;z-index:1}.commands-page:before,.status-page:before{content:"";position:fixed;width:600px;height:600px;left:50%;top:-300px;transform:translateX(-50%);background:radial-gradient(circle,rgba(79,104,224,.13),transparent 68%);pointer-events:none}.commands-header,.status-header{margin-bottom:34px;animation:fadeUp .7s ease both}.eyebrow{margin:0 0 12px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;font-weight:600;color:#8097f0}.page-title-row{display:flex;align-items:flex-end;justify-content:space-between}.page-title,.st-title{font-family:var(--heading);font-size:52px;font-weight:500;letter-spacing:-.04em;line-height:1;color:#fff;margin:0}.page-subtitle{font-size:13px;color:var(--text-dim);margin:16px 0 20px}.page-search{position:relative}.page-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--text-dim)}#cmd-search{width:100%;box-sizing:border-box;background:rgba(20,25,54,.58);border:1px solid rgba(93,119,236,.25);border-radius:15px;color:var(--text-bright);font:14px var(--sans);padding:15px 70px 15px 46px;outline:none;box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 35px rgba(0,0,0,.24);transition:.2s}#cmd-search:focus{border-color:rgba(108,137,255,.55);background:rgba(24,30,65,.72);box-shadow:0 0 0 4px rgba(84,111,226,.08),0 16px 45px rgba(0,0,0,.32)}.page-search kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.09);border-radius:7px;padding:4px 7px;color:var(--text-dim);font:10px var(--sans);background:rgba(255,255,255,.035)}.cat-tabs-backdrop{position:fixed;top:0;left:0;right:0;height:84px;z-index:15;background:rgba(7,8,17,.75);backdrop-filter:blur(14px);pointer-events:none}.cat-tabs{position:sticky;top:84px;z-index:20;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(8,9,19,.88);backdrop-filter:blur(14px);margin-bottom:20px}.cat-tabs::-webkit-scrollbar{display:none}.cat-tab{position:relative;display:flex;align-items:baseline;gap:6px;background:none;border:0;font:13.5px var(--sans);color:var(--text-dim);cursor:pointer;white-space:nowrap;padding:15px 0 13px;flex-shrink:0}.cat-tab.active{color:#fff}.cat-tab-count{font-size:10px;opacity:.55}.cat-tab-indicator{position:absolute;bottom:-1px;left:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#5578d0,#a8c5f2);transition:transform .32s,width .32s}.results-meta{font-size:12px;color:var(--text-dim);margin-bottom:16px}.cmd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cmd-card{border:1px solid rgba(91,115,224,.14);border-radius:22px;padding:21px;background:radial-gradient(ellipse 70% 50% at 15% 0%,rgba(61,83,181,.15),transparent 65%),linear-gradient(160deg,rgba(13,12,30,.58),rgba(7,7,20,.66));box-shadow:inset 0 1px rgba(255,255,255,.045),0 10px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:16px;opacity:0;transform:translateY(16px);transition:border-color .25s,box-shadow .25s,transform .5s,opacity .5s;transition-delay:var(--delay)}.cmd-card.visible{opacity:1;transform:none}.cmd-card:hover{border-color:rgba(100,129,255,.34);box-shadow:inset 0 1px rgba(255,255,255,.07),0 18px 40px rgba(0,0,0,.42),0 0 30px rgba(72,97,207,.06)}.cmd-card-top{display:flex;justify-content:space-between;gap:10px}.cmd-card-info{min-width:0}.cmd-name{display:flex;align-items:center;min-width:0;font-size:15px;font-weight:500;color:var(--text-bright);margin-bottom:7px}.cmd-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmd-slash{color:#718ce9}.cmd-desc{font-size:12px;color:var(--text);line-height:1.5}.cmd-copy-btn{width:29px;height:29px;display:grid;place-items:center;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07);border-radius:8px;color:var(--text-dim);cursor:pointer}.cmd-copy-btn:hover,.cmd-copy-btn.copied{color:#fff;border-color:rgba(112,139,255,.4);background:rgba(80,105,218,.12)}.cmd-section-label{font-size:10px;letter-spacing:.07em;color:var(--text-dim);margin-bottom:7px}.cmd-pills{display:flex;gap:5px;flex-wrap:wrap}.cmd-pill{font-size:10.5px;color:var(--text);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:4px 9px}.cmd-pill.required{color:#fff;border-color:rgba(91,119,238,.22);background:rgba(71,95,201,.11)}.cmd-pill-none,.cmd-usage-text{font-size:11px;color:var(--text-dim)}.cmd-usage-text{color:var(--text);word-break:break-word}.cmd-tier-tag{margin-left:8px;font-size:8px;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(108,134,246,.22);border-radius:99px;padding:3px 7px;color:#b8c6ff}.empty-state{grid-column:1/-1;padding:70px;text-align:center;color:var(--text-dim);border:1px dashed rgba(255,255,255,.08);border-radius:20px}
.status-header{margin-bottom:34px}.st-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:40px}.st-stat{border:1px solid rgba(91,115,224,.15);border-radius:20px;padding:22px;background:linear-gradient(145deg,rgba(28,38,83,.36),rgba(8,8,22,.65));box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.25)}.st-stat-label{font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:7px}.st-stat-label i{color:#6f89e5}.st-stat-value{font-family:var(--heading);font-size:29px;color:#fff;margin-top:14px}.st-section-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:13px;margin-bottom:16px;font-size:13px;color:#fff}.st-section-head #st-meta{font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:7px}.st-shards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.st-shard{border:1px solid rgba(91,115,224,.14);border-radius:22px;padding:21px;background:radial-gradient(ellipse at 10% 0,rgba(54,76,172,.14),transparent 65%),rgba(8,8,22,.58);opacity:0;transform:translateY(15px);transition:.5s;transition-delay:var(--delay)}.st-shard.visible{opacity:1;transform:none}.st-shard:hover{border-color:rgba(102,130,251,.3)}.st-shard-summary{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.st-shard-name{font-size:14px;font-weight:500;color:#fff;display:flex;align-items:center;gap:8px}.st-shard-node{font-size:10px;font-weight:400;color:var(--text-dim);letter-spacing:.03em}.st-live-dot{width:6px;height:6px;border-radius:50%;background:#77d59b;box-shadow:0 0 12px rgba(119,213,155,.75);display:inline-block}.st-live-dot.warning,.st-shard:not(.online) .st-live-dot{background:#e3b36a;box-shadow:0 0 12px rgba(227,179,106,.6)}.st-shard-time{font-size:10px;color:var(--text-dim)}.st-shard-time i{font-size:9px;margin-right:3px}.st-shard-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}.st-sg-item{display:flex;flex-direction:column;gap:5px}.st-sg-label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim)}.st-sg-label i{width:12px}.st-sg-val{font-size:13px;color:var(--text-bright)}
@media(max-width:900px){.cmd-grid,.st-shards{grid-template-columns:repeat(2,1fr)}.st-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.site-footer{padding:24px 16px 32px}.site-footer-card{padding:36px 24px 28px;border-radius:22px}.site-footer-inner{grid-template-columns:1fr 1fr;gap:32px 20px}.site-footer-brand{grid-column:1/-1;align-items:center;text-align:center}.site-footer-tagline{max-width:none}.commands-page,.status-page{padding:105px 16px 48px}.cat-tabs-backdrop{height:60px}.cat-tabs{top:60px}.page-title,.st-title{font-size:38px}}@media(max-width:560px){.cmd-grid,.st-shards{grid-template-columns:1fr}.st-stats{gap:8px}.st-stat{padding:17px}.st-stat-value{font-size:23px}.site-footer-bottom{flex-direction:column;text-align:center}.page-search kbd{display:none}#cmd-search{padding-right:18px}}