:root{
  --bg:#070A12;
  --bg2:#0B1020;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --brand:#62E6FF;
  --brand2:#9B6BFF;
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --max:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(98,230,255,.18), transparent 60%),
    radial-gradient(1000px 700px at 85% 0%, rgba(155,107,255,.16), transparent 58%),
    radial-gradient(900px 700px at 55% 110%, rgba(98,230,255,.10), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  line-height:1.6;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}
.screen-reader-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.sw-container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}

.sw-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(7,10,18,.88),rgba(7,10,18,.60));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sw-header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
/* Brand: logo + optional title + tagline (Customizer toggles supported) */
.sw-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* WP outputs <a class="custom-logo-link"><img class="custom-logo"></a> */
.sw-brand .custom-logo-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.sw-brand .custom-logo{
  height:44px;
  width:auto;
  display:block;
}

/* This is the <a class="sw-brand-link"> that wraps logo/title */
.sw-brand-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* When logo + title both show, keep title from pushing layout */
.sw-brand-text{
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:34vw;
}

/* Tagline should truncate nicely and not break header */
.sw-tagline{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:46vw;
}

.sw-nav-toggle{display:none;appearance:none;background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--text);border-radius:12px;padding:10px 12px;cursor:pointer}
.sw-nav-toggle-bars{display:block;width:18px;height:12px;position:relative}
.sw-nav-toggle-bars:before,.sw-nav-toggle-bars:after,.sw-nav-toggle-bars i{
  content:"";position:absolute;left:0;right:0;height:2px;background:rgba(234,240,255,.85);border-radius:99px;
}
.sw-nav-toggle-bars:before{top:0}
.sw-nav-toggle-bars i{top:5px}
.sw-nav-toggle-bars:after{bottom:0}
.sw-nav{display:block}
.sw-menu{display:flex;align-items:center;gap:16px;list-style:none;margin:0;padding:0}
.sw-menu a{display:inline-flex;align-items:center;gap:8px;padding:10px 10px;border-radius:12px;color:rgba(234,240,255,.86)}
.sw-menu a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.sw-menu .current-menu-item>a{background:rgba(98,230,255,.10);border:1px solid rgba(98,230,255,.18)}

.sw-page{min-height:calc(100vh - 80px);display:flex;flex-direction:column}
.sw-main{flex:1 1 auto}

.sw-hero{padding:42px 0 14px}
.sw-hero--compact{padding:26px 0 8px}
.sw-hero-card{
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow);
  padding:26px 22px;
}
.sw-h1{margin:0;font-size:clamp(26px,3.2vw,42px);line-height:1.15}
.sw-h2{margin:0 0 6px;font-size:18px;line-height:1.25}
.sw-lead{margin:10px 0 0;color:var(--muted);max-width:70ch}
.sw-meta{margin-top:10px;color:rgba(234,240,255,.65);font-size:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sw-dot{opacity:.65}

.sw-content{padding:18px 0 52px}
.sw-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.sw-card{grid-column:span 4;border:1px solid var(--stroke);background:rgba(255,255,255,.03);border-radius:var(--radius);overflow:hidden}
.sw-card-link{display:block;height:100%}
.sw-card-media img{display:block;width:100%;height:220px;object-fit:cover}
.sw-card-body{padding:16px 16px 18px}
.sw-muted{margin:0;color:var(--muted);font-size:14px}
.sw-card--pad{padding:18px}
.sw-feature{margin:0 0 16px}
.sw-prose{border:1px solid var(--stroke);background:rgba(255,255,255,.03);border-radius:var(--radius);overflow:hidden}
.sw-prose-inner{padding:22px;max-width:78ch}
.sw-prose-inner h2,.sw-prose-inner h3{margin-top:28px}
.sw-prose-inner a{color:var(--brand)}
.sw-prose-inner a:hover{color:var(--brand2)}
.sw-prose-inner code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:8px}
.sw-prose-inner pre{background:rgba(0,0,0,.35);padding:14px;border-radius:14px;overflow:auto;border:1px solid rgba(255,255,255,.08)}

.sw-bc{margin:0 0 14px}
.sw-bc ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sw-bc li{display:flex;align-items:center;gap:8px;color:rgba(234,240,255,.70);font-size:12px}
.sw-bc li:after{content:"/";opacity:.35}
.sw-bc li:last-child:after{content:""}
.sw-bc a{color:rgba(234,240,255,.82)}
.sw-bc a:hover{color:var(--brand)}
.sw-bc span{color:rgba(234,240,255,.92)}

.sw-search{display:flex;gap:10px;align-items:center}
.sw-search-input{flex:1 1 auto;min-width:160px;padding:12px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.20);color:var(--text);outline:none}
.sw-search-input:focus{border-color:rgba(98,230,255,.45);box-shadow:0 0 0 4px rgba(98,230,255,.10)}
.sw-search-btn,.sw-btn{
  padding:12px 14px;border-radius:12px;border:1px solid rgba(98,230,255,.35);
  background:linear-gradient(90deg,rgba(98,230,255,.16),rgba(155,107,255,.14));
  color:rgba(234,240,255,.92);
  cursor:pointer;
}
.sw-search-btn:hover,.sw-btn:hover{filter:brightness(1.05)}
.sw-searchbar{margin-top:12px}

.sw-pagination{margin-top:18px}
.sw-pagination .page-numbers{display:inline-flex;gap:8px;align-items:center}
.sw-pagination a,.sw-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:rgba(234,240,255,.86);
  padding:0 10px;
}
.sw-pagination span.current{border-color:rgba(98,230,255,.35);background:rgba(98,230,255,.10);color:var(--text)}
.sw-nextprev{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sw-nextprev a{color:var(--brand)}

.sw-footer{border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.15)}
.sw-footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 0 28px;flex-wrap:wrap}
.sw-footer-brand{font-weight:800}
.sw-footer-meta{margin-top:6px;color:rgba(234,240,255,.62);font-size:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sw-menu--footer a{padding:8px 10px;border-radius:10px}

@media (max-width:980px){
  .sw-card{grid-column:span 6}
  .sw-tagline{display:none}
  .sw-nav-toggle{display:inline-flex}
  .sw-nav{
    display:none;
    position:absolute;
    left:0;right:0;top:100%;
    background:rgba(7,10,18,.92);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(10px)
  }
  .sw-nav.is-open{display:block}

  /* Scroll lock when mobile menu is open */
  body.sw-nav-open{
    overflow:hidden;
    height:100%;
    touch-action:none;
  }

  /* Prevent bounce/scrolling within the dropdown on iOS */
  #sw-primary-nav{
    max-height:calc(100vh - 64px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .sw-menu{flex-direction:column;align-items:stretch;padding:10px}
}

@media (max-width:640px){
  .sw-card{grid-column:span 12}
  .sw-hero-card{padding:20px 16px}
  .sw-prose-inner{padding:18px}
}