:root{
    --bg:#0B0A12;
    --card:#15131F;
    --card-2:#1C1A29;
    --line:#2A2740;
    --ink:#F2F1F7;
    --muted:#8D89A3;
    --purple:#8B5CF6;
    --purple-2:#A78BFA;
    --purple-ink:#FFFFFF;
    --green:#22C55E;
    --danger:#F1554C;
    --mono:'JetBrains Mono', ui-monospace, monospace;
    --display:'Space Grotesk', sans-serif;
    --radius:20px;
    --radius-sm:13px;
    --shadow:0 10px 30px -14px rgba(0,0,0,0.55);

    /* kept for backward compatibility with a few older component rules */
    --cream:var(--bg);
    --mint:var(--purple);
    --mint-ink:var(--purple-ink);
    --amber:#F5B942;
    --amber-ink:#3A2A00;
    --coral:#8B5CF6;
    --coral-ink:#FFFFFF;
    --sky:#38BDF8;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--display);
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
    padding-bottom:78px; /* room for the bottom tab bar */
}

@media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

.scanlines, .noise{ display:none; }
code{font-family:var(--mono);}

/* ================= TOPBAR ================= */
.topbar{
    position:sticky; top:0; z-index:8;
    display:flex; align-items:center; gap:12px;
    padding:16px clamp(16px,4vw,64px);
    background:rgba(11,10,18,0.9); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}
.hamburger{
    width:40px; height:40px; border-radius:14px; background:var(--card); border:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; flex-shrink:0;
}
.hamburger span{width:16px; height:2px; background:var(--ink); border-radius:2px;}

.topbar-brand{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.01em;}
.topbar-brand a{color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px;}
.brand-accent{color:var(--purple-2);}

.topbar-status{
    margin-left:auto; display:flex; align-items:center; gap:7px;
    font-family:var(--mono); font-size:11px; color:var(--muted);
    background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 14px;
}

.dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.dot-amber{background:var(--purple-2);}
.dot-teal{background:var(--green); box-shadow:0 0 8px rgba(34,197,94,0.6);}

.nav-backdrop{
    position:fixed; inset:0; background:rgba(4,3,8,0.6); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .25s; z-index:19;
}
.nav-backdrop.show{opacity:1; pointer-events:auto;}

.side-nav{
    position:fixed; top:0; left:0; height:100%; width:min(280px, 84vw);
    background:var(--card); border-right:1px solid var(--line);
    z-index:20; padding:20px; display:flex; flex-direction:column;
    transform:translateX(-100%); transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.side-nav.open{transform:translateX(0);}

.side-nav-head{
    display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;
    background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:12px 14px;
}
.side-nav-head .brand-word{font-family:var(--display); font-weight:700; font-size:15px;}
.nav-close{
    background:var(--bg); border:1px solid var(--line); color:var(--ink);
    width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:12px;
}

.nav-section-label{
    font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
    margin:16px 6px 8px;
}
.nav-section-label:first-of-type{margin-top:4px;}

.nav-link{
    display:flex; align-items:center; gap:11px;
    font-family:var(--display); font-weight:600; font-size:14px; color:var(--ink); text-decoration:none;
    padding:11px 12px; border-radius:var(--radius-sm); margin-bottom:4px;
    border:1px solid transparent;
}
.nav-link .nav-icon, .nav-link i{width:16px; text-align:center; color:var(--muted);}
.nav-link:hover{background:var(--card-2);}
.nav-link.active{background:var(--purple); border-color:var(--purple);}
.nav-link.active .nav-icon, .nav-link.active i{color:#fff;}

.nav-footer{margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10.5px; color:var(--muted);}

body.nav-locked{overflow:hidden;}

/* ================= BOTTOM TAB BAR (primary nav, mobile-app style) ================= */
.tab-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:15;
    display:flex; justify-content:space-around; align-items:center;
    background:rgba(21,19,31,0.92); backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    padding:9px clamp(8px,3vw,24px) calc(9px + env(safe-area-inset-bottom));
}
.tab-item{
    flex:1; max-width:120px; display:flex; flex-direction:column; align-items:center; gap:4px;
    text-decoration:none; color:var(--muted); padding:7px 4px; border-radius:14px;
    font-family:var(--display); font-size:11px; font-weight:600;
}
.tab-item i{font-size:16px;}
.tab-item.active{color:#fff; background:var(--purple);}
.tab-item.active i{color:#fff;}

/* ================= SHARED PRIMITIVES ================= */
.pill{
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.02em;
    border:1px solid var(--line); border-radius:999px; padding:7px 15px;
    background:var(--card);
}
.pill-amber{background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.35); color:var(--green);}
.pill-mint{background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.35); color:var(--green);}
.pill-card{background:var(--card); color:var(--ink);}
.pill-dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(34,197,94,0.7);}

.btn{
    font-family:var(--display); font-size:13.5px; font-weight:700; padding:13px 22px; border-radius:999px;
    text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:9px;
    border:1px solid var(--line); cursor:pointer; transition:transform .12s, filter .12s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--purple); color:#fff; border-color:var(--purple);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-mint{background:var(--purple); color:#fff; border-color:var(--purple);}
.btn-amber{background:var(--card); color:var(--ink);}
.btn-ghost{background:var(--card); color:var(--ink);}
.btn-ghost:hover{background:var(--card-2);}

/* diagonal stripe accent, used next to page headings */
.stripe-accent{
    display:inline-block; width:44px; height:16px; margin-left:10px; vertical-align:middle;
    background-image:repeating-linear-gradient(-45deg, var(--purple) 0 3px, transparent 3px 8px);
    opacity:.8;
}

/* corner bracket decoration (used on hero media / dropzone / status card) */
.corner-brackets{position:absolute; inset:0; pointer-events:none;}
.corner-brackets span{position:absolute; width:16px; height:16px; border-color:var(--purple-2); opacity:.9;}
.corner-brackets span:nth-child(1){top:10px; left:10px; border-top:2px solid; border-left:2px solid; border-radius:6px 0 0 0;}
.corner-brackets span:nth-child(2){top:10px; right:10px; border-top:2px solid; border-right:2px solid; border-radius:0 6px 0 0;}
.corner-brackets span:nth-child(3){bottom:10px; left:10px; border-bottom:2px solid; border-left:2px solid; border-radius:0 0 0 6px;}
.corner-brackets span:nth-child(4){bottom:10px; right:10px; border-bottom:2px solid; border-right:2px solid; border-radius:0 0 6px 0;}

/* ================= HERO (docs page banner) ================= */
.hero{padding:36px clamp(20px,5vw,64px) 20px; position:relative; z-index:2;}
.hero-scan{display:none;}
.hero-title{font-size:clamp(26px,4.4vw,40px); line-height:1.2; font-weight:700;}
.hero-title span{color:var(--purple-2);}
.hero-sub{margin-top:10px; color:var(--muted); font-size:14px; line-height:1.6; max-width:560px;}
.hero-sub code{background:var(--card-2); border:1px solid var(--line); padding:1px 7px; border-radius:6px; font-size:13px;}

.deck-header{
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px;
    padding:26px clamp(20px,5vw,64px) 0;
}
.brand-tagline{font-family:var(--mono); font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px;}
.header-meta{display:none;} /* replaced by .signal-strip below */

/* "// API SIGNAL" style status strip */
.signal-strip{
    margin:18px clamp(20px,5vw,64px) 0;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 18px; display:flex; gap:10px; position:relative;
}
.signal-strip-label{
    position:absolute; top:-11px; left:16px; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
    color:var(--purple-2); background:var(--bg); padding:0 8px;
}
.signal-item{flex:1; display:flex; flex-direction:column; gap:4px;}
.signal-item + .signal-item{border-left:1px solid var(--line); padding-left:14px;}
.meta-label{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-family:var(--mono);}
.meta-value{font-size:14px; font-weight:700; color:var(--ink); font-family:var(--mono); display:flex; align-items:center; gap:6px;}
.meta-value .pill-dot{display:inline-block;}

/* ================= CONTROLS / SEARCH / CHIPS ================= */
.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:20px clamp(20px,5vw,64px) 18px;}
.search-wrap{position:relative; flex:1; min-width:200px;}
.search-icon{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px;}
.search-wrap input{
    width:100%; background:var(--card); border:1px solid var(--line); border-radius:999px;
    padding:13px 62px 13px 42px; color:var(--ink); font-family:var(--display); font-size:13.5px;
}
.search-wrap input:focus{outline:none; border-color:var(--purple);}
.search-wrap input::placeholder{color:var(--muted);}
.search-kbd{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    font-family:var(--mono); font-size:10px; color:var(--muted);
    background:var(--card-2); border:1px solid var(--line); border-radius:6px; padding:3px 7px;
    pointer-events:none;
}
@media (max-width:640px){ .search-kbd{display:none;} }

.chip-row{display:flex; gap:8px; flex-wrap:wrap; padding:0 clamp(20px,5vw,64px) 8px;}
.chip{
    font-family:var(--display); font-size:12.5px; font-weight:600;
    background:var(--card); border:1px solid var(--line); color:var(--muted);
    padding:9px 16px; border-radius:999px; cursor:pointer;
}
.chip.active{background:var(--purple); color:#fff; border-color:var(--purple);}

/* ================= ENDPOINT CARDS ================= */
.grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:14px;
    padding:16px clamp(20px,5vw,64px) 56px;
}
.card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; cursor:pointer; position:relative;
    box-shadow:var(--shadow); transition:transform .15s, border-color .15s;
    display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-2px); border-color:var(--purple);}
.card::before{display:none;}
.card-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;}
.card-cat{
    font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    display:flex; align-items:center; gap:5px;
}
.card-cat i{color:var(--purple-2);}
.card-method{font-family:var(--mono); font-size:10.5px; font-weight:700; color:#fff; background:var(--purple); padding:4px 12px; border-radius:999px;}
.card-path-main{font-family:var(--mono); font-size:15px; font-weight:700; color:var(--ink); margin-bottom:8px; word-break:break-word;}
.card-desc{font-size:13px; color:var(--muted); line-height:1.55; margin-bottom:14px;}

.card-params{background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:16px; flex:1;}
.card-params-label{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:8px;}
.card-params-empty{font-family:var(--mono); font-size:12px; color:var(--muted);}
.param-row{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; padding:3px 0;}
.param-name{font-weight:700; color:var(--ink); min-width:64px;}
.param-type{color:var(--muted);}
.param-req{margin-left:auto; color:var(--danger); font-size:10px; text-transform:uppercase; letter-spacing:.04em;}
.param-opt{margin-left:auto; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em;}
.param-more{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:4px;}

.card-try-btn{
    width:100%; font-family:var(--display); font-size:13px; font-weight:700;
    background:var(--purple); color:#fff; border:none; border-radius:999px;
    padding:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
}
.card-try-btn i{transition:transform .15s; pointer-events:none;}
.card:hover .card-try-btn i{transform:translateX(4px);}

.empty-state{
    grid-column:1/-1; text-align:center; color:var(--muted); font-family:var(--display); font-size:13px;
    padding:52px 20px; background:var(--card); border:1px dashed var(--line); border-radius:var(--radius);
}
.empty-state-title{font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); margin-bottom:6px;}

.error-state{
    grid-column:1/-1; text-align:center; padding:44px 20px;
    background:var(--card); border:1px solid var(--danger); border-radius:var(--radius);
}
.error-state .tech-label{justify-content:center; color:var(--danger); margin-bottom:10px;}
.error-state .tech-label .blink{background:var(--danger);}
.error-state-title{font-family:var(--display); font-weight:700; font-size:17px; margin-bottom:6px;}
.error-state-detail{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-bottom:18px; word-break:break-word;}
.error-state .btn{margin:0 auto;}

.tech-label{
    font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
    display:inline-flex; align-items:center; gap:6px;
}
.tech-label .blink{width:6px; height:6px; border-radius:50%; background:var(--purple-2); animation:blinkDot 1.8s ease-in-out infinite;}
@keyframes blinkDot{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.warn-banner{
    margin:0 clamp(20px,5vw,64px) 24px; background:rgba(241,85,76,0.08); border:1px solid var(--danger); border-radius:var(--radius);
    padding:16px 18px;
}
.warn-title{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--danger);}
.warn-list{margin-top:10px; display:flex; flex-direction:column; gap:6px;}
.warn-list li{font-family:var(--mono); font-size:12px; color:var(--muted); line-height:1.5;}
.warn-list li b{color:var(--danger); font-weight:700;}

.deck-footer{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
    padding:22px clamp(20px,5vw,64px) 30px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11px; color:var(--muted);
}
.deck-footer code{color:var(--purple-2);}

/* ================= TRY-IT PANEL ================= */
.panel-backdrop{
    position:fixed; inset:0; background:rgba(4,3,8,0.65); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .25s; z-index:9;
}
.panel-backdrop.show{opacity:1; pointer-events:auto;}

.panel{
    position:fixed; top:0; right:0; height:100%; width:min(460px, 100%);
    background:var(--card); border-left:1px solid var(--line);
    z-index:10; padding:26px; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.panel.show{transform:translateX(0);}

.panel-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.panel-eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--purple-2); text-transform:uppercase; margin-bottom:6px;}
.panel-title{font-size:21px; font-weight:700;}
.panel-close{
    background:var(--card-2); border:1px solid var(--line); color:var(--ink);
    width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:14px; flex-shrink:0;
}
.panel-desc{color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:14px;}

.panel-route{
    margin-top:16px; display:flex; align-items:center; gap:10px;
    background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 12px;
    font-family:var(--mono); font-size:12.5px; word-break:break-all;
}
.method-tag{background:var(--purple); color:#fff; font-weight:700; font-size:10.5px; padding:3px 9px; border-radius:999px; flex-shrink:0;}

.panel-form{margin-top:20px; display:flex; flex-direction:column; gap:14px;}
.field label{display:block; font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:6px;}
.field label .req{color:var(--danger);}
.field-type-icon{color:var(--purple-2); font-size:11px; margin-right:2px;}
.field input, .field select{
    width:100%; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:11px 12px; color:var(--ink); font-family:var(--display); font-size:13.5px;
}
.field input:focus, .field select:focus{outline:none; border-color:var(--purple);}
.field select{
    padding-right:34px; appearance:none; -webkit-appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0L5 6L10 0' fill='none' stroke='%238D89A3' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 13px center;
}
.field select option{background:var(--card-2); color:var(--ink);}

.field input[type="file"]{border-style:dashed; color:var(--muted); cursor:pointer;}
.field input[type="file"]::file-selector-button{
    font-family:var(--display); font-size:11px; font-weight:700; color:#fff; background:var(--purple);
    border:none; border-radius:999px; padding:7px 12px; margin-right:10px; cursor:pointer;
}
.file-preview{margin-top:10px; display:flex; align-items:center; gap:10px;}
.file-preview img{width:50px; height:50px; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
.file-preview-meta{font-family:var(--mono); font-size:11.5px; color:var(--muted);}

.run-btn{
    margin-top:18px; width:100%; background:var(--purple); color:#fff; border:none; border-radius:999px;
    padding:14px; font-family:var(--display); font-weight:700; font-size:13.5px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
}
.run-btn:active{transform:scale(.98);}
.run-btn:disabled{opacity:.5; cursor:wait;}

.panel-result{margin-top:20px;}
.result-head{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; font-family:var(--mono); font-size:11.5px; flex-wrap:wrap;}
.result-status{font-weight:700; padding:3px 10px; border-radius:999px; border:1px solid var(--line);}
.result-status.ok{background:rgba(34,197,94,0.12); color:var(--green); border-color:rgba(34,197,94,0.4);}
.result-status.err{background:rgba(241,85,76,0.12); color:var(--danger); border-color:var(--danger);}
.result-type{color:var(--purple-2); background:rgba(139,92,246,0.12); border:1px solid var(--line); padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em;}
.result-time{color:var(--muted); margin-left:auto;}

.result-body img, .result-body video{width:100%; max-height:380px; object-fit:contain; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius);}
.result-body audio{width:100%;}
.result-file{display:flex; align-items:center; gap:12px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.result-file-info{flex:1; min-width:0;}
.result-file-name{font-family:var(--mono); font-size:12.5px; word-break:break-all;}
.result-file-meta{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:3px;}
.result-file-dl{font-family:var(--display); font-size:11.5px; font-weight:700; color:#fff; background:var(--purple); padding:8px 14px; border-radius:999px; text-decoration:none; flex-shrink:0;}

/* ================= CODE WINDOW ================= */
.code-window{
    position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow); color:#EDEAE0; isolation:isolate; background:#0E0C16;
}
.code-window::before{ display:none; }
.code-window::after{ display:none; }
.code-window-bar{position:relative; z-index:1; display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line);}
.code-dot{width:10px; height:10px; border-radius:50%;}
.code-dot.red{background:#ff5f57;} .code-dot.yellow{background:#febc2e;} .code-dot.green{background:#28c840;}
.code-window pre{position:relative; z-index:1; margin:0; padding:16px; font-family:var(--mono); font-size:12.5px; line-height:1.65; overflow:auto; max-height:380px; white-space:pre-wrap; word-break:break-word; background:transparent;}
.snippet-page .code-window pre{max-height:none;}
.code-window code{background:transparent; font-family:var(--mono);}
.code-body{position:relative;}

.hljs-attr, .hljs-property{color:#7DD3FC;}
.hljs-string{color:#A3E635;}
.hljs-number{color:#FCA35D;}
.hljs-literal{color:#F0ABFC;}
.hljs-keyword, .hljs-built_in{color:#F0ABFC;}
.hljs-comment{color:#9CA3AF; font-style:italic;}
.hljs-title, .hljs-function_{color:#7DD3FC;}
.hljs-variable, .hljs-params{color:#EDEAE0;}
.hljs-punctuation{color:#C9C5B8;}

/* ================= HOME PAGE ================= */
.home-hero{padding:20px clamp(16px,5vw,64px) 24px; position:relative; z-index:2;}

.hero-media-wrap{ margin-bottom:26px; }
.hero-media{ position:relative; width:100%; aspect-ratio:16/9; }
.hero-media-frame{
    position:relative; width:100%; height:100%; border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--purple); background:linear-gradient(160deg, #1B1730, #100E1C);
    display:flex; align-items:flex-end; padding:20px;
}
.hero-media-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;}
.hero-media-info{position:relative; z-index:1; font-family:var(--mono); font-size:11px; color:var(--purple-2); line-height:1.7; text-transform:uppercase; letter-spacing:.04em;}
.hero-media-brand{position:relative; z-index:1; margin-left:auto; text-align:right;}
.hero-media-brand b{font-family:var(--display); font-size:19px; font-weight:700; display:block;}
.hero-media-brand span{font-family:var(--mono); font-size:9.5px; color:var(--purple-2); letter-spacing:.1em;}
.hero-media-window{ display:none; } /* legacy — code-preview showcase replaced by the media frame above */

.home-hero h1{font-size:clamp(28px,6vw,38px); line-height:1.18; font-weight:700;}
.home-hero h1 span{color:var(--purple-2);}
.home-hero p{margin-top:12px; color:var(--muted); font-size:14.5px; line-height:1.65; max-width:520px;}
.home-cta{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}

.home-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:24px;}
.home-stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 10px; text-align:center;}
.home-stat i{color:var(--purple-2); font-size:16px; margin-bottom:8px; display:block;}
.home-stat b{display:block; font-family:var(--display); font-size:16px; font-weight:700;}
.home-stat span{display:block; font-family:var(--mono); font-size:9.5px; color:var(--muted); margin-top:2px; text-transform:uppercase;}
@media (max-width:520px){ .home-stats{grid-template-columns:repeat(2,1fr);} }

.home-section{padding:14px clamp(16px,5vw,64px) 40px; position:relative; z-index:2;}
.home-section h2{font-size:18px; margin-bottom:6px; display:flex; align-items:center;}
.home-section .section-sub{color:var(--muted); font-size:13px; margin-bottom:16px;}

.feature-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px;}
.feature-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; position:relative;}
.feature-card .f-icon{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(139,92,246,0.14); color:var(--purple-2); margin-bottom:12px; font-size:15px;}
.feature-card h3{font-size:14px; margin-bottom:6px;}
.feature-card p{font-size:12.5px; color:var(--muted); line-height:1.5;}

.sample-endpoint-tag{font-family:var(--mono); font-size:11px; color:var(--purple-2); background:rgba(139,92,246,0.12); border:1px solid var(--line); padding:5px 12px; border-radius:999px; display:inline-block; margin-bottom:14px;}
.code-window-bar .sample-endpoint-tag{ margin:0; font-size:10px; padding:3px 10px; }

.code-tabs{position:relative; z-index:1; display:flex; gap:4px; padding:8px 10px 0; flex-wrap:wrap; border-bottom:1px solid var(--line);}
.code-tab{font-family:var(--mono); font-size:11px; color:var(--muted); background:none; border:none; padding:9px 13px; cursor:pointer; white-space:nowrap; border-radius:999px 999px 0 0;}
.code-tab.active{color:#fff; background:var(--purple);}
.code-copy{position:absolute; top:10px; right:10px; z-index:2; font-family:var(--mono); font-size:11px; color:#EDEAE0; background:rgba(255,255,255,0.08); border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer;}
.code-copy.copied{background:var(--green); color:#04210f; border-color:var(--green);}

/* ================= DASHBOARD / SYSTEM PAGE ================= */
.dash-header{padding:20px clamp(16px,5vw,64px) 6px; position:relative; z-index:2;}
.dash-greeting{font-size:24px; font-weight:700; display:flex; align-items:center;}
.dash-header p{color:var(--muted); font-size:13px; margin-top:6px; max-width:520px; line-height:1.55;}

.system-clock{
    margin:18px clamp(16px,5vw,64px) 0; position:relative;
    background:linear-gradient(160deg, #1B1730, #100E1C); border:1px solid var(--purple); border-radius:var(--radius);
    padding:26px 20px; text-align:center;
}
.system-clock-time{font-family:var(--mono); font-size:clamp(28px,7vw,40px); font-weight:700; color:#fff; letter-spacing:.02em;}
.system-clock-sub{font-family:var(--mono); font-size:11.5px; color:var(--purple-2); margin-top:6px;}

.dash-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; padding:18px clamp(16px,5vw,64px); position:relative; z-index:2;}
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.stat-icon{width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(139,92,246,0.14); color:var(--purple-2); margin-bottom:10px; font-size:13px;}
.stat-icon.i-amber, .stat-icon.i-mint, .stat-icon.i-coral, .stat-icon.i-sky{background:rgba(139,92,246,0.14); color:var(--purple-2);}
.stat-card .stat-label{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
.stat-card .stat-value{font-family:var(--display); font-size:19px; font-weight:700; color:var(--ink); margin-top:5px; word-break:break-word;}
.stat-card .stat-sub{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:4px;}

.console-wrap{padding:8px clamp(16px,5vw,64px) 24px; position:relative; z-index:2;}
.console-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:10px;}
.console-head h2{font-size:15px;}
.console-live{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--green);}
.console-live .pulse{width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

.console-box{background:#0E0C16; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--mono); font-size:12px; max-height:360px; overflow-y:auto;}
.console-row{display:flex; gap:10px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line);}
.console-row:last-child{border-bottom:none;}
.console-time{color:var(--muted); flex-shrink:0; width:58px; font-size:11px;}
.console-method{font-weight:700; flex-shrink:0; width:38px; font-size:11px;}
.console-method.GET{color:var(--green);}
.console-method.POST{color:var(--purple-2);}
.console-path{flex:1; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.console-status{flex-shrink:0; font-weight:700; width:32px; text-align:right; font-size:11px;}
.console-status.s2{color:var(--green);}
.console-status.s4, .console-status.s5{color:var(--danger);}
.console-ms{flex-shrink:0; width:50px; text-align:right; color:var(--muted); font-size:11px;}
.console-empty{padding:36px 16px; text-align:center; color:var(--muted); font-family:var(--display); font-size:12.5px; line-height:1.6;}
.console-empty::before{content:'>'; display:block; color:var(--purple-2); font-family:var(--mono); font-size:16px; margin-bottom:8px;}

.contact-card{
    margin:0 clamp(16px,5vw,64px) 30px; position:relative; z-index:2;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.contact-icon{width:44px; height:44px; border-radius:12px; background:rgba(139,92,246,0.16); color:var(--purple-2); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
.contact-info{flex:1; min-width:180px;}
.contact-info h3{font-size:15px; margin-bottom:4px;}
.contact-info p{font-size:12.5px; color:var(--muted); line-height:1.5;}

/* ================= UPLOADER PAGE ================= */
.uploader-wrap{padding:20px clamp(16px,5vw,64px) 40px; position:relative; z-index:2; max-width:560px;}
.uploader-card{background:transparent; padding:0;}
.uploader-card h1{font-size:23px; margin-bottom:6px; display:flex; align-items:center;}
.uploader-card > p{color:var(--muted); font-size:13.5px; line-height:1.6; margin-bottom:20px;}

.dropzone{
    position:relative; border:1.5px dashed var(--purple); border-radius:var(--radius); padding:44px 20px; text-align:center;
    cursor:pointer; transition:background .15s; background:var(--card);
}
.dropzone.drag{background:rgba(139,92,246,0.08);}
.dropzone-icon{width:56px; height:56px; border-radius:16px; background:rgba(139,92,246,0.16); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 16px; color:var(--purple-2);}
.dropzone-label{font-family:var(--display); font-size:13.5px; color:var(--muted);}
.dropzone-label b{display:block; color:var(--ink); font-size:15px; margin-bottom:3px;}
.dropzone input[type="file"]{display:none;}

.dropzone-filetypes{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:16px;}
.dropzone-filetypes span{font-family:var(--mono); font-size:9.5px; color:var(--muted); background:var(--card-2); border:1px solid var(--line); border-radius:6px; padding:3px 8px;}

.uploader-file-preview{margin-top:16px; display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;}
.uploader-file-preview img{width:48px; height:48px; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
.uploader-file-preview .ufp-icon{width:48px; height:48px; border-radius:8px; border:1px solid var(--line); background:var(--card-2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; color:var(--purple-2);}
.uploader-file-preview .ufp-meta{flex:1; min-width:0; font-family:var(--display); font-size:12.5px;}
.uploader-file-preview .ufp-meta small{display:block; color:var(--muted); margin-top:2px; font-family:var(--mono);}

.upload-btn{
    margin-top:18px; width:100%; background:var(--purple); color:#fff; border:none; border-radius:999px;
    padding:15px; font-family:var(--display); font-weight:700; font-size:14.5px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px;
}
.upload-btn:active{transform:scale(.98);}
.upload-btn:disabled{opacity:.5; cursor:wait;}

.uploader-info-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px;}
.uploader-info-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; display:flex; align-items:center; gap:11px;}
.uploader-info-card i{width:34px; height:34px; border-radius:10px; background:rgba(139,92,246,0.14); color:var(--purple-2); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}
.uploader-info-card b{display:block; font-size:13.5px;}
.uploader-info-card span{display:block; font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:1px;}

.uploader-tips{margin-top:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; display:flex; gap:12px;}
.uploader-tips i{color:var(--purple-2); margin-top:2px;}
.uploader-tips ul{list-style:none; font-size:12.5px; color:var(--muted); line-height:1.7;}
.uploader-tips li::before{content:'•'; color:var(--purple-2); margin-right:7px;}

.upload-result{margin-top:20px;}
.upload-result-link{display:flex; align-items:center; gap:10px; background:rgba(34,197,94,0.1); border:1px solid var(--green); border-radius:var(--radius-sm); padding:14px; font-family:var(--mono); font-size:12.5px; word-break:break-all;}
.upload-result-link a{color:var(--green); font-weight:700; flex:1;}
.upload-copy-btn{flex-shrink:0; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-family:var(--display); font-size:11px; font-weight:700; cursor:pointer; color:var(--ink);}
.upload-error{background:rgba(241,85,76,0.1); border:1px solid var(--danger); border-radius:var(--radius-sm); padding:14px; font-family:var(--display); font-size:12.5px; color:var(--ink);}

/* ================= DEPLOY PAGE ================= */
.deploy-form{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.deploy-form .field{margin:0;}

/* ================= DECORATIVE BACKGROUND (kept lightweight) ================= */
.bg-decor{
    position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
    background-image:radial-gradient(circle at 20% 0%, rgba(139,92,246,0.10), transparent 55%);
}
.bg-decor::before{ content:''; position:absolute; top:-10%; right:-5%; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(139,92,246,0.14), transparent 70%); }

.bg-line{position:absolute; height:1px; width:220px; background:linear-gradient(90deg, transparent, var(--purple-2), transparent); opacity:.25; will-change:transform; animation:lineMove linear infinite;}
.bg-line.l1{top:22%; animation-duration:9s;}
.bg-line.l2{top:52%; animation-duration:13s; animation-delay:3s;}
.bg-line.l3{top:78%; animation-duration:11s; animation-delay:6s;}
@keyframes lineMove{ from{ transform:translateX(-260px); } to{ transform:translateX(110vw); } }

.paper-plane{position:absolute; width:24px; height:24px; opacity:0; will-change:transform,opacity; color:var(--purple-2); top:10%; left:0;}
.paper-plane svg{width:100%; height:100%; display:block;}
.paper-plane.p1{ animation:planeFly1 16s linear infinite; }
.paper-plane.p2{ top:38%; color:var(--green); animation:planeFly2 20s linear infinite; animation-delay:5s; }
.paper-plane.p3{ top:64%; color:var(--muted); animation:planeFly3 24s linear infinite; animation-delay:11s; }
@keyframes planeFly1{0%{opacity:0; transform:translate(-30px,30px) rotate(18deg) scale(.9);}10%{opacity:.5;}50%{transform:translate(50vw,-16px) rotate(12deg) scale(1);}90%{opacity:.5;}100%{opacity:0; transform:translate(112vw,-46px) rotate(8deg) scale(1);}}
@keyframes planeFly2{0%{opacity:0; transform:translate(-30px,-10px) rotate(-6deg) scale(.85);}12%{opacity:.4;}55%{transform:translate(55vw,26px) rotate(-2deg) scale(1);}88%{opacity:.4;}100%{opacity:0; transform:translate(112vw,44px) rotate(2deg) scale(1);}}
@keyframes planeFly3{0%{opacity:0; transform:translate(-30px,18px) rotate(10deg) scale(.8);}10%{opacity:.35;}50%{transform:translate(48vw,-30px) rotate(6deg) scale(.95);}90%{opacity:.35;}100%{opacity:0; transform:translate(112vw,-10px) rotate(4deg) scale(1);}}
@media (prefers-reduced-motion: reduce){ .bg-line, .paper-plane{ animation:none !important; opacity:0 !important; } }

.reveal-on-scroll{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.reveal-on-scroll.revealed{ opacity:1; transform:translateY(0); }

/* ================= VIEW TRANSITIONS ================= */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: no-preference){
    ::view-transition-old(root){ animation:vtOut .28s ease both; }
    ::view-transition-new(root){ animation:vtIn .32s ease both; }
}
@keyframes vtOut{ to{ opacity:0; transform:scale(.98); } }
@keyframes vtIn{ from{ opacity:0; transform:scale(1.01); } }

/* ================= LOADING SCREEN ================= */
#bootScreen{
    position:fixed; inset:0; z-index:999; background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    transition:opacity .35s ease, transform .35s ease;
}
#bootScreen.hide{ opacity:0; transform:scale(1.03); pointer-events:none; }
.boot-tag{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase;}
.boot-title{font-family:var(--display); font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--ink);}
.boot-bar{width:min(220px,70vw); height:8px; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card-2);}
.boot-bar-fill{height:100%; width:0%; background:var(--purple); transition:width .25s ease;}
.boot-log{font-family:var(--mono); font-size:10.5px; color:var(--muted); height:16px;}
@media (prefers-reduced-motion: reduce){ #bootScreen{ transition:none; } }

/* ================= MARQUEE ================= */
.marquee{position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--card); padding:9px 0;}
.marquee-track{display:flex; width:max-content; animation:marqueeMove 26s linear infinite;}
.marquee.reverse .marquee-track{animation-direction:reverse; animation-duration:32s;}
.marquee-item{font-family:var(--mono); font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.06em; padding:0 18px; white-space:nowrap; text-transform:uppercase;}
.marquee-item i{color:var(--purple-2); margin-right:6px; font-size:8px;}
@keyframes marqueeMove{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ================= CUSTOM CURSOR ================= */
.cursor-dot, .cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:998; border-radius:50%; transform:translate(-50%,-50%); will-change:transform;}
.cursor-dot{width:6px; height:6px; background:var(--purple-2);}
.cursor-ring{width:30px; height:30px; border:1.5px solid var(--purple-2); opacity:.5; transition:width .18s, height .18s, opacity .18s;}
.cursor-ring.hover{width:48px; height:48px; opacity:.9;}
body.custom-cursor, body.custom-cursor *{ cursor:none !important; }
@media (max-width:900px){ .cursor-dot, .cursor-ring{ display:none; } }

.card-btn-row{display:flex; gap:8px; position:relative; z-index:10;}
.card-btn-row .btn-ghost{flex:0 0 auto; padding:12px 16px; font-size:12.5px;}
.card-btn-row .card-try-btn{flex:1; cursor:pointer;}
.card-btn-row .btn-ghost{cursor:pointer;}

/* ================= 3D TILT / SLIDE MICRO-INTERACTIONS ================= */
/* Only transform + box-shadow are animated — cheap for the GPU, same
   lesson learned from the old blob-animation lag. */
.card, .feature-card, .stat-card, .home-stat{
    transform-style:preserve-3d; perspective:600px;
    transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-4px) rotateX(2deg) rotateY(-1.5deg); box-shadow:0 18px 34px -16px rgba(139,92,246,0.35); }
.feature-card:hover, .stat-card:hover, .home-stat:hover{ transform:translateY(-3px) rotateX(1.5deg); }

.btn, .card-try-btn, .upload-btn, .run-btn{
    transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, filter .16s ease;
}
.btn:hover, .card-try-btn:hover, .upload-btn:hover:not(:disabled), .run-btn:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 10px 22px -10px rgba(139,92,246,0.5);
}
.btn:active, .card-try-btn:active, .upload-btn:active, .run-btn:active{
    transform:translateY(0) scale(.97);
    box-shadow:none;
}

.tab-item{ transition:transform .18s cubic-bezier(.3,1.2,.4,1), background .18s ease; }
.tab-item:active{ transform:scale(.9); }

.chip{ transition:transform .15s ease, background .15s ease; }
.chip:hover{ transform:translateY(-1px); }
.chip:active{ transform:scale(.95); }

/* panel slide already exists (transform:translateX) — add a subtle
   overshoot easing so it feels less mechanical */
.panel{ transition:transform .34s cubic-bezier(.2,.9,.25,1.05); }

@media (prefers-reduced-motion: reduce){
    .card, .feature-card, .stat-card, .home-stat, .btn, .card-try-btn, .upload-btn, .run-btn, .tab-item, .chip, .panel{
        transition:none !important;
    }
    .card:hover, .feature-card:hover, .stat-card:hover, .home-stat:hover{ transform:none !important; }
}

/* ================= NEO-BRUTALISM REFRESH ================= */
:root{
  --bg:#f6f0e5; --card:#fffdf8; --card-2:#efe7d8; --line:#171717; --ink:#171717;
  --text:#171717; --muted:#635d55; --purple:#7c3aed; --purple-2:#5b21b6;
  --mint:#b9f5d0; --amber:#ffc857; --coral:#ff8066; --sky:#a9ddff;
}
html, body{background:var(--bg); color:var(--text);}
body{background-color:var(--bg); background-image:radial-gradient(#171717 1px, transparent 1px); background-size:24px 24px;}
.topbar{background:rgba(246,240,229,.94); border-bottom:3px solid var(--line); box-shadow:0 4px 0 var(--line);}
.hamburger,.topbar-status,.side-nav,.card,.feature-card,.stat-card,.home-stat,.system-clock,.console-wrap,.contact-card,.code-window,.panel,.form-card{border:3px solid var(--line); border-radius:0; box-shadow:6px 6px 0 var(--line); background:var(--card);}
.hamburger{background:var(--amber); border-color:var(--line);}
.topbar-status{background:var(--mint); border-color:var(--line); color:var(--text);}
.side-nav{background:var(--card); border-width:0 3px 0 0; box-shadow:8px 0 0 var(--line);}
.nav-link:hover,.nav-link.active{background:var(--purple); border-color:var(--line); color:#fff; box-shadow:4px 4px 0 var(--line);}
.btn,.card-try-btn,.run-btn{border:3px solid var(--line); border-radius:0; box-shadow:5px 5px 0 var(--line); font-weight:800;}
.btn-primary,.run-btn{background:var(--purple); color:#fff;}
.btn-ghost{background:var(--card); color:var(--text);}
.btn:hover,.card-try-btn:hover,.run-btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--line);}
.home-hero,.home-section,.dash-header,.dash-grid,.console-wrap,.contact-card,.deck-footer,.uploader-page{position:relative; z-index:1;}
.home-hero{max-width:1180px; margin:0 auto; padding:clamp(72px,11vw,150px) 24px 72px;}
.home-hero h1{font-weight:800; letter-spacing:-.06em; text-shadow:4px 4px 0 var(--amber);}
.home-hero h1 span{color:var(--purple);}
.home-section{max-width:1180px; margin:0 auto; padding:72px 24px;}
.home-section h2,.dash-greeting,.page-title{font-weight:800; letter-spacing:-.04em;}
.feature-grid,.dash-grid{gap:18px;}
.feature-card:nth-child(2){background:var(--mint)} .feature-card:nth-child(3){background:var(--sky)} .feature-card:nth-child(4){background:var(--amber)}
.feature-card:hover,.stat-card:hover,.home-stat:hover,.card:hover{transform:translate(-3px,-3px) rotate(0); box-shadow:9px 9px 0 var(--line);}
.code-window{overflow:hidden; background:#211f1b;}
.code-window-bar{background:var(--line);}
.code-window pre{background:#211f1b; color:#fffdf8;}
.code-window code{color:inherit;}
.code-body{background:#211f1b; color:#fffdf8; position:relative;}
.tab-bar{border-top:3px solid var(--line); background:var(--card);}
.tab-item.active{background:var(--amber); color:var(--text);}
@media (max-width:700px){body{background-size:18px 18px}.topbar{height:64px}.home-hero{padding-top:72px}.home-hero h1{font-size:clamp(48px,15vw,78px)}.home-stats{grid-template-columns:repeat(2,1fr)}.feature-grid,.dash-grid{grid-template-columns:1fr}.card,.feature-card,.stat-card,.home-stat,.system-clock,.console-wrap,.contact-card,.code-window{box-shadow:4px 4px 0 var(--line)}}
@media (prefers-reduced-motion: reduce){.card:hover,.feature-card:hover,.stat-card:hover,.home-stat:hover,.btn:hover,.card-try-btn:hover,.run-btn:hover{transform:none;}}

.snippet-tab {
    background: transparent;
    border: none;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}
.snippet-tab.active {
    background: var(--card-2);
    color: var(--ink);
}