/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --c-purple:#7C3AED;--c-violet:#8B5CF6;--c-pink:#EC4899;
  --c-orange:#F97316;--c-cyan:#06B6D4;--c-teal:#14B8A6;
  --c-lime:#84CC16;--c-amber:#F59E0B;
  --g-brand:linear-gradient(135deg,#7C3AED,#EC4899);
  --g-warm:linear-gradient(135deg,#F97316,#F59E0B);
  --g-cool:linear-gradient(135deg,#06B6D4,#14B8A6);
  --g-punch:linear-gradient(135deg,#EC4899,#F97316);
  --g-full:linear-gradient(135deg,#7C3AED 0%,#EC4899 40%,#F97316 70%,#F59E0B 100%);
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-2xl:36px;
  --nav-h:68px;--section-y:100px;
  --page-x:clamp(20px,5%,64px);--max-w:1280px;
  --transition:.25s cubic-bezier(.23,1,.32,1);
}
[data-theme="dark"]{
  --bg:#060612;--bg-2:#0B0B20;--bg-3:#0F0F2A;
  --surface:#13132E;--surface-2:#18184A;
  --border:rgba(255,255,255,.07);--border-2:rgba(255,255,255,.12);
  --text-1:#FFFFFF;--text-2:rgba(255,255,255,.72);
  --text-3:rgba(255,255,255,.42);--text-4:rgba(255,255,255,.22);
  --nav-bg:rgba(6,6,18,.82);--orb-op:.14;
}
[data-theme="light"]{
  --bg:#F7F7FE;--bg-2:#EEEEFF;--bg-3:#E8E8FF;
  --surface:#FFFFFF;--surface-2:#F2F2FF;
  --border:rgba(0,0,0,.06);--border-2:rgba(0,0,0,.1);
  --text-1:#09090F;--text-2:rgba(9,9,15,.65);
  --text-3:rgba(9,9,15,.42);--text-4:rgba(9,9,15,.22);
  --nav-bg:rgba(247,247,254,.9);--orb-op:.06;
}


/* ═══════════════════════════ HERO ═════════════════════════════ */
.demo-hero{
  padding:calc(var(--nav-h) + 80px) var(--page-x) 64px;
  text-align:center;position:relative;z-index:1;
}
.demo-hero h1 {
    font-family: 'Clash Display',sans-serif;
    font-size: clamp(2.8rem,6vw,5rem);
    font-weight: 700;
    line-height: .97;
    margin-bottom: 22px;
}
.demo-hero p {
    margin: 0 auto 40px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-2);
    line-height: 1.85;
    max-width: 540px;
}
.demo-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ═══════════════════════════ THEME SWITCHER BAR ═══════════════ */
.theme-bar{
  position:sticky;top:var(--nav-h);z-index:90;
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding:0 var(--page-x);
  transition:background .35s;
}
.theme-bar-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 20px 0;
}
.theme-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.theme-tabs::-webkit-scrollbar {
    display: none;
}

/* Right section */
.bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.theme-tab{
  display:flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:9px;
  font-size:.82rem;font-weight:600;cursor:pointer;
  border:none;color:var(--text-3);font-family:'General Sans',sans-serif;
  transition:all .2s;white-space:nowrap;background:transparent;
}
.theme-tab:hover{color:var(--text-1);background:var(--surface-2);}
.theme-tab.active{background:rgba(124,58,237,.12);color:#A78BFA;}
.theme-tab-dot{width:8px;height:8px;border-radius:50%;}
.plan-pill{font-size:.62rem;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap;}
.pill-free{background:rgba(132,204,22,.1);border:1px solid rgba(132,204,22,.22);color:#A3E635;}
.pill-pro{background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.22);color:#A78BFA;}

/* ═══════════════════════════ DEMO AREA ════════════════════════ */
.demo-section{padding:64px var(--page-x);position:relative;z-index:1;}
.demo-wrap{max-width:var(--max-w);margin:0 auto;}

/* Browser chrome */
.browser-chrome{
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r-2xl);overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.3);
  transition:box-shadow .4s;
}
.browser-chrome:hover{box-shadow:0 60px 160px rgba(0,0,0,.4);}
.browser-bar{
  background:var(--surface-2);border-bottom:1px solid var(--border);
  padding:12px 20px;display:flex;align-items:center;gap:14px;
}
.b-dots{display:flex;gap:7px;}
.b-dot{width:12px;height:12px;border-radius:50%;}
.b-dot.r{background:#FF5F57;}
.b-dot.y{background:#FEBC2E;}
.b-dot.g{background:#28C840;}
.b-url{
  flex:1;background:var(--bg-3);border:1px solid var(--border);
  border-radius:8px;padding:6px 14px;font-size:.78rem;
  color:var(--text-3);font-family:'JetBrains Mono','General Sans',monospace;
  display:flex;align-items:center;gap:8px;
}
.b-lock{color:var(--c-lime);font-size:.7rem;}
.b-slug{color:var(--text-2);}
.b-slug strong{color:var(--text-1);}
.browser-viewport {
    max-height: 620px;
    overflow: auto;
    position: relative;
}

/* ── THEME: MINIMAL ─────────────────────────────────────────── */
.t-minimal{
  background:#FAFAFA;min-height:100%;font-family:'General Sans',sans-serif;
  display:flex;
}
.tm-sidebar{
  width:280px;flex-shrink:0;background:#fff;border-right:1px solid #E8E8E8;
  padding:40px 28px;display:flex;flex-direction:column;gap:32px;
  position:sticky;top:0;height:620px;overflow-y:auto;
}
.tm-av{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#EC4899);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;font-weight:700;}
.tm-name{font-family:'Clash Display',sans-serif;font-size:1.3rem;font-weight:700;color:#09090F;letter-spacing:-.03em;margin-bottom:4px;}
.tm-role{font-size:.82rem;color:#6366F1;font-weight:600;}
.tm-bio{font-size:.78rem;color:#6B7280;line-height:1.7;margin-top:8px;}
.tm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.tm-tag{padding:3px 10px;border-radius:99px;background:#F3F4F6;border:1px solid #E5E7EB;
  font-size:.7rem;font-weight:600;color:#374151;}
.tm-divider{height:1px;background:#F0F0F0;}
.tm-section-h{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9CA3AF;}
.tm-link{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#6B7280;
  padding:6px 0;transition:color .2s;}
.tm-link:hover{color:#7C3AED;}
.tm-link-ic{width:20px;height:20px;border-radius:6px;background:#F3F4F6;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;}
.tm-main{flex:1;padding:40px 40px;}
.tm-greeting{font-size:.8rem;color:#9CA3AF;margin-bottom:8px;}
.tm-h1{font-family:'Clash Display',sans-serif;font-size:2rem;font-weight:700;color:#09090F;
  letter-spacing:-.04em;margin-bottom:6px;}
.tm-h1 span{background:linear-gradient(135deg,#7C3AED,#EC4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.tm-sec{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9CA3AF;
  padding-bottom:12px;border-bottom:1px solid #F0F0F0;margin:28px 0 16px;}
.tm-proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px;}
.tm-proj{background:#fff;border:1px solid #E8E8E8;border-radius:14px;padding:18px;
  transition:box-shadow .2s,transform .2s;cursor:pointer;}
.tm-proj:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08);}
.tm-proj-ic{font-size:1.3rem;margin-bottom:10px;}
.tm-proj-t{font-size:.88rem;font-weight:700;color:#09090F;margin-bottom:4px;}
.tm-proj-d{font-size:.72rem;color:#9CA3AF;}
.tm-skills{display:flex;gap:8px;flex-wrap:wrap;}
.tm-skill{padding:5px 12px;border-radius:8px;background:#F3F4F6;font-size:.75rem;font-weight:600;color:#374151;}

/* ── THEME: BOLD ─────────────────────────────────────────────── */
.t-bold{background:#08080F;min-height:100%;font-family:'General Sans',sans-serif;padding:40px 36px;overflow:auto;}
.tb-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);
  font-size:.7rem;font-weight:700;color:#4ADE80;margin-bottom:20px;}
.tb-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#4ADE80;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.tb-h1{font-family:'Clash Display',sans-serif;font-size:3rem;font-weight:700;letter-spacing:-.06em;line-height:.95;
  background:linear-gradient(135deg,#fff 30%,rgba(255,255,255,.5));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;}
.tb-role{font-size:.9rem;color:rgba(255,255,255,.4);margin-bottom:8px;}
.tb-loc{font-size:.8rem;color:rgba(255,255,255,.25);}
.tb-divider{height:1px;background:rgba(255,255,255,.07);margin:28px 0;}
.tb-sec{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.25);margin-bottom:16px;}
.tb-proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px;}
.tb-proj{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:18px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;}
.tb-proj:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);transform:translateY(-3px);}
.tb-proj-ic{font-size:1.2rem;margin-bottom:10px;}
.tb-proj-t{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:3px;}
.tb-proj-d{font-size:.72rem;color:rgba(255,255,255,.35);}
.tb-proj-tag{display:inline-block;margin-top:8px;padding:2px 8px;border-radius:99px;font-size:.65rem;font-weight:700;
  background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.3);color:#A78BFA;}
.tb-skills{display:flex;flex-wrap:wrap;gap:8px;}
.tb-skill{padding:5px 12px;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);font-size:.75rem;color:rgba(255,255,255,.6);}
.tb-grad{background:var(--g-full);background-size:300%;-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;animation:gradShift 6s ease-in-out infinite;}

/* ── THEME: TERMINAL ─────────────────────────────────────────── */
.t-terminal{background:#0D1117;min-height:100%;font-family:'JetBrains Mono','Courier New',monospace;
  padding:0;overflow:auto;}
.tt-topbar{background:#161B22;border-bottom:1px solid #30363D;padding:10px 20px;
  display:flex;align-items:center;gap:10px;}
.tt-dots{display:flex;gap:6px;}
.tt-dot{width:12px;height:12px;border-radius:50%;}
.tt-tab{padding:4px 12px;border-radius:6px;font-size:.72rem;color:#8B949E;
  background:rgba(255,255,255,.04);}
.tt-tab.act{background:#1F2937;color:#E6EDF3;}
.tt-body{padding:28px 32px;}
.tt-line{font-size:.82rem;line-height:1.8;display:flex;align-items:baseline;gap:6px;}
.tt-prompt{color:#58A6FF;}
.tt-cmd{color:#79C0FF;}
.tt-green{color:#56D364;}
.tt-white{color:#E6EDF3;}
.tt-purple{color:#D2A8FF;}
.tt-orange{color:#F0883E;}
.tt-red{color:#FF7B72;}
.tt-dim{color:#8B949E;}
.tt-cursor{display:inline-block;width:8px;height:14px;background:#56D364;
  animation:blink 1s step-end infinite;vertical-align:middle;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.tt-section{margin-top:20px;}
.tt-file{display:flex;align-items:center;gap:8px;font-size:.78rem;color:#E6EDF3;
  padding:2px 0;}
.tt-file-ic{color:#56D364;}
.tt-bar{height:2px;background:#21262D;margin:8px 0;}

/* ── THEME: CARD ─────────────────────────────────────────────── */
.t-card{background:#F8F5FF;min-height:100%;font-family:'General Sans',sans-serif;
  display:flex;}
.tc-left{width:260px;flex-shrink:0;padding:32px 20px;
  display:flex;flex-direction:column;gap:20px;}
.tc-card{background:#fff;border-radius:18px;border:1px solid rgba(124,58,237,.08);
  box-shadow:0 4px 24px rgba(124,58,237,.06);padding:24px;text-align:center;}
.tc-av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#EC4899);
  margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#fff;font-weight:700;}
.tc-name{font-family:'Clash Display',sans-serif;font-size:1rem;font-weight:700;color:#09090F;margin-bottom:4px;}
.tc-role{font-size:.72rem;color:#7C3AED;font-weight:600;margin-bottom:10px;}
.tc-soc{display:flex;justify-content:center;gap:8px;}
.tc-soc-ic{width:28px;height:28px;border-radius:8px;background:#F3F0FF;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#7C3AED;}
.tc-skills-card{background:#fff;border-radius:14px;border:1px solid rgba(124,58,237,.08);
  box-shadow:0 4px 24px rgba(124,58,237,.06);padding:18px;}
.tc-skills-h{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#9CA3AF;margin-bottom:12px;}
.tc-sk{padding:4px 10px;border-radius:99px;background:#F3F0FF;
  font-size:.72rem;font-weight:600;color:#7C3AED;display:inline-block;margin:3px 2px;}
.tc-main{flex:1;padding:32px 28px;overflow-y:auto;}
.tc-page-t{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9CA3AF;margin-bottom:16px;}
.tc-proj{background:#fff;border:1px solid rgba(124,58,237,.08);border-radius:14px;padding:18px;
  margin-bottom:12px;display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  transition:box-shadow .2s,transform .2s;}
.tc-proj:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.1);}
.tc-proj-ic{width:36px;height:36px;border-radius:10px;background:rgba(124,58,237,.1);
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.tc-proj-t{font-size:.85rem;font-weight:700;color:#09090F;margin-bottom:2px;}
.tc-proj-d{font-size:.72rem;color:#9CA3AF;}
.tc-proj-tags{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap;}
.tc-proj-tag{padding:2px 8px;border-radius:99px;font-size:.65rem;font-weight:600;
  background:#F3F0FF;border:1px solid rgba(124,58,237,.15);color:#7C3AED;}

/* ── THEME: SIDEBAR ─────────────────────────────────────────── */
.t-sidebar{background:#fff;min-height:100%;font-family:'General Sans',sans-serif;display:flex;}
.ts-left{width:64px;background:#FAFAFA;border-right:1px solid #F0F0F0;padding:20px 0;
  display:flex;flex-direction:column;align-items:center;gap:8px;}
.ts-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#7C3AED,#EC4899);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff;font-weight:700;
  margin-bottom:8px;}
.ts-sep{width:32px;height:1px;background:#F0F0F0;margin:4px 0;}
.ts-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:.85rem;cursor:pointer;transition:background .2s;color:#9CA3AF;}
.ts-ico:hover{background:#F3F4F6;color:#374151;}
.ts-ico.act{background:#F3F0FF;color:#7C3AED;}
.ts-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#EC4899);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff;margin-top:auto;}
.ts-main{flex:1;padding:32px 36px;overflow-y:auto;}
.ts-name{font-family:'Clash Display',sans-serif;font-size:1.6rem;font-weight:700;color:#09090F;
  letter-spacing:-.04em;margin-bottom:4px;}
.ts-role{font-size:.82rem;color:#7C3AED;font-weight:600;margin-bottom:4px;}
.ts-loc{font-size:.78rem;color:#9CA3AF;}
.ts-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 24px;}
.ts-tag{padding:3px 10px;border-radius:99px;background:#F3F4F6;font-size:.7rem;font-weight:600;color:#374151;}
.ts-sec{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9CA3AF;
  margin:0 0 14px;}
.ts-proj{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:12px;
  border:1px solid #F0F0F0;margin-bottom:10px;cursor:pointer;transition:all .2s;}
.ts-proj:hover{background:#FAFAFA;border-color:#E5E7EB;transform:translateX(4px);}
.ts-proj-ic{width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.ts-proj-t{font-size:.85rem;font-weight:700;color:#09090F;}
.ts-proj-d{font-size:.72rem;color:#9CA3AF;}
.ts-arrow{margin-left:auto;color:#D1D5DB;font-size:.75rem;}

/* ── THEME: GLASS ────────────────────────────────────────────── */
.t-glass{min-height:100%;font-family:'General Sans',sans-serif;
  background:linear-gradient(135deg,#1E0A4E 0%,#0D1B4E 40%,#0B2040 70%,#071828 100%);
  position:relative;overflow:hidden;padding:32px 28px;}
.tg-orb1{position:absolute;width:320px;height:320px;border-radius:50%;
  background:rgba(124,58,237,.3);filter:blur(80px);top:-80px;right:-60px;}
.tg-orb2{position:absolute;width:240px;height:240px;border-radius:50%;
  background:rgba(6,182,212,.2);filter:blur(70px);bottom:-40px;left:20px;}
.tg-panel{background:rgba(255,255,255,.08);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:24px;position:relative;z-index:1;margin-bottom:14px;}
.tg-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.tg-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#EC4899);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;font-weight:700;
  flex-shrink:0;}
.tg-name{font-family:'Clash Display',sans-serif;font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:2px;}
.tg-role{font-size:.75rem;color:rgba(255,255,255,.5);}
.tg-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;
  background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25);
  font-size:.65rem;font-weight:700;color:#4ADE80;margin-top:4px;}
.tg-tags{display:flex;flex-wrap:wrap;gap:6px;}
.tg-tag{padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);font-size:.7rem;color:rgba(255,255,255,.7);}
.tg-sec{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:12px;}
.tg-proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tg-proj{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:14px;cursor:pointer;transition:background .2s,transform .2s;}
.tg-proj:hover{background:rgba(255,255,255,.1);transform:translateY(-3px);}
.tg-proj-ic{font-size:1.1rem;margin-bottom:8px;}
.tg-proj-t{font-size:.82rem;font-weight:700;color:#fff;margin-bottom:2px;}
.tg-proj-d{font-size:.7rem;color:rgba(255,255,255,.4);}

/* ═══════════════════════════ INFO SECTION ═════════════════════ */
.info-section{padding:80px var(--page-x);position:relative;z-index:1;}
.info-wrap{max-width:var(--max-w);margin:0 auto;}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:28px;transition:transform .3s,box-shadow .3s;}
.info-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.15);}
.info-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.2rem;margin-bottom:16px;}
.info-t{font-size:1rem;font-weight:700;color:var(--text-1);margin-bottom:8px;}
.info-d {
    font-size: .82rem;
    color: var(--text-2);
    line-height: 1.7;
}

/* ═══════════════════════════ CTA ══════════════════════════════ */
.cta-wrap{
  padding:var(--section-y) var(--page-x);
  background:var(--bg-2);border-top:1px solid var(--border);
  text-align:center;position:relative;z-index:1;
}
.cta-wrap h2 {
    font-family: 'Clash Display',sans-serif;
    font-size: clamp(2rem,4vw,3.2rem);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 16px;
    word-spacing: 4px;
    line-height: 1;
}
.cta-wrap p {
    color: var(--text-2);
    font-size: .95rem;
    max-width: 500px;
    margin: 0 auto 40px;
}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}


/* Tabs hidden logic */
.demo-panel{display:none;}
.demo-panel.active{display:block;}

@media(max-width:960px){
  .nav-links,.btn-ghost{display:none!important;}
  .ham{display:flex!important;}
  .info-grid{grid-template-columns:1fr 1fr;}
  .browser-viewport{height:500px;}
}
@media(max-width:720px){
  .demo-hero h1{font-size:clamp(2.2rem,7vw,3rem);}
  .info-grid{grid-template-columns:1fr;}
  .browser-viewport{height:auto;min-height:500px;}
  .t-minimal,.t-card,.t-sidebar{flex-direction:column;}
  .tm-sidebar,.tc-left,.ts-left{width:100%;height:auto;position:static;}
  .ts-left{flex-direction:row;height:60px;}
  .ts-av{margin-top:0;margin-left:auto;}
  .tg-proj-grid,.tb-proj-grid,.tm-proj-grid{grid-template-columns:1fr;}
}

.theme-tabs-wrapper {
  position: relative;
}
.theme-tabs-wrapper::before, .theme-tabs-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 2;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* LEFT gradient */
.theme-tabs-wrapper::before {
  left: 0;
      border-radius: 0px 8px 8px 0px;
      box-shadow: 3px 0px 5px -3px var(--text-3);
}

/* RIGHT gradient */
.theme-tabs-wrapper::after {
  right: 0;
      border-radius: 8px 0px 0px 8px;
      box-shadow: -3px 0px 5px -3px var(--text-3);
}
.theme-tabs-wrapper.show-left::before {
  opacity: 1;
}

.theme-tabs-wrapper.show-right::after {
  opacity: 1;
}