.gl-explorer { padding-block: 54px 100px; }
.gl-controls { margin-bottom: 18px; padding: 15px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--border); border-radius: 16px; background: rgba(8, 17, 34, .78); box-shadow: 0 18px 48px rgba(0, 0, 0, .18); }
.gl-search { min-width: min(100%, 310px); min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #334761; border-radius: 999px; background: #030a17; color: var(--accent); }
.gl-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(101, 199, 223, .11); }
.gl-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.gl-search input::placeholder { color: #78879a; }
.gl-categories { min-width: 0; display: flex; flex-wrap: wrap; gap: 7px; overflow: visible; }
.gl-categories button { min-height: 36px; padding: 0 13px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; }
.gl-categories button:hover, .gl-categories .gl-activeCategory { border-color: rgba(101, 199, 223, .75); background: var(--accent-soft); color: var(--accent); }
.gl-resultCount { margin: 18px 4px; color: var(--text); font: 700 14px/1.2 var(--font-display); }
.gl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gl-card { position: relative; isolation: isolate; min-width: 0; overflow: hidden; display: grid; grid-template-columns: 1fr; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.gl-card > * { position: relative; z-index: 2; }
.gl-cardBody { min-height: 310px; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.gl-cardBody h2 { margin: 8px 0 14px; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.02; text-wrap: balance; }
.gl-cardBody h2 a:hover { color: var(--accent); }
.gl-cardBody > p { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.68; }
.gl-label { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.gl-action { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 13px; font-weight: 750; }
.gl-action:hover { color: #a7eef8; }
.gl-meta { margin: auto 0 24px; display: flex; align-items: center; gap: 8px; color: #c3d1e2; font-size: 12px; }

.gl-guideCover { position: relative; min-height: 390px; overflow: hidden; border-bottom: 1px solid var(--border); background: #050914; }
.gl-guideCover img { object-fit: contain; transition: transform .35s ease; }
.gl-card:hover .gl-guideCover img { transform: scale(1.025); }
.gl-downloadCover { min-height: 285px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; background: radial-gradient(circle at 73% 18%, rgba(184, 73, 241, .7), transparent 29%), radial-gradient(circle at 17% 75%, rgba(55, 204, 229, .35), transparent 34%), linear-gradient(145deg, #111d42, #4c216a 57%, #061225); }
.gl-downloadCover svg { margin-bottom: auto; color: #96effb; }
.gl-downloadCover strong { font: 700 92px/.76 var(--font-display); }
.gl-downloadCover span { margin-top: 20px; font: 700 29px/1 var(--font-display); }
.gl-downloadCover small { margin-top: 8px; color: #d8ddee; }
.gl-downloadCover .gl-unnumberedTitle { max-width: 95%; margin-top: auto; font-size: clamp(34px, 3vw, 46px); line-height: .95; }
.gl-realCover { position: relative; min-height: 0; background: #07101f; }
.gl-realCover img { object-fit: contain; }
.gl-verticalCoverCard { grid-column: span 2; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); }
.gl-verticalCoverCard .gl-cardBody { min-height: 430px; justify-content: center; padding: clamp(32px, 4vw, 54px); }
.gl-verticalCoverCard .gl-cardBody h2 { font-size: clamp(36px, 4vw, 52px); }
.gl-verticalCoverCard .gl-cardBody > p { max-width: 570px; font-size: 15px; }

.gl-glowCard { box-shadow: inset 0 0 24px rgba(101, 199, 223, .025); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.gl-glowCard::before { content: ""; position: absolute; z-index: 0; inset: -1px; opacity: .34; background: radial-gradient(520px circle at 10% 0%, rgba(101, 199, 223, .22), transparent 40%), radial-gradient(420px circle at 100% 100%, rgba(165, 85, 236, .16), transparent 42%); transition: opacity .22s ease; pointer-events: none; }
.gl-glowCard:hover { transform: translateY(-6px); border-color: rgba(101, 199, 223, .9); box-shadow: 0 0 0 1px rgba(101, 199, 223, .22), 0 0 26px rgba(101, 199, 223, .2), 0 24px 62px rgba(30, 159, 202, .18); }
.gl-glowCard:hover::before { opacity: 1; }

.gl-electroCard { grid-column: 1 / -1; grid-template-columns: minmax(270px, .82fr) minmax(0, 1.18fr); overflow: visible; border-color: transparent; background: transparent; box-shadow: none; }
.gl-electroCard::before { content: ""; position: absolute; z-index: 0; inset: -18px; border-radius: 28px; background: radial-gradient(ellipse at 50% 50%, rgba(74, 224, 247, .48), rgba(122, 89, 235, .2) 42%, transparent 72%); filter: blur(24px); opacity: .78; animation: electro-aura 1.5s ease-in-out infinite alternate; pointer-events: none; }
.gl-electroCard::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 18px; background: var(--surface); box-shadow: 0 0 18px rgba(101, 231, 250, .36), 0 0 42px rgba(101, 199, 223, .18); pointer-events: none; }
.gl-electroCard .gl-downloadCover { border-radius: 18px 0 0 18px; }
.gl-electroFilter { position: absolute; width: 0; height: 0; overflow: hidden; }
.gl-electroPulse { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: url("#electro-border-distortion"); }
.gl-electroPulse rect { fill: none; vector-effect: non-scaling-stroke; }
.gl-electroBase { stroke: #65c7df; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 14 86; filter: drop-shadow(0 0 7px #42d9f5) drop-shadow(0 0 15px #9868ed); animation: electro-flow 4s linear infinite; }
.gl-electroCurrent { stroke: #f2ffff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 9 91; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #42d9f5); animation: electro-flow 4s linear infinite; }

.gl-orbitCard { grid-column: 1 / -1; grid-template-columns: clamp(220px, 22vw, 260px) minmax(0, 1fr); overflow: visible; border-color: transparent; background: transparent; box-shadow: 0 24px 80px rgba(0, 0, 0, .28); }
.gl-orbitCard::before { content: ""; position: absolute; z-index: 0; inset: -16px; border-radius: 28px; background: radial-gradient(ellipse at 50% 100%, rgba(93, 206, 239, .82), transparent 62%), radial-gradient(ellipse at 50% 0%, rgba(113, 111, 246, .68), transparent 64%); filter: blur(20px); opacity: .62; animation: guides-orbit-card-pulse 2.5s ease-in-out infinite alternate; pointer-events: none; }
.gl-orbitCard::after { content: ""; position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(101, 199, 223, .58); border-radius: 18px; background: var(--surface); pointer-events: none; }
.gl-orbitCard .gl-guideCover { min-width: 0; margin: 4px 0 4px 4px; border: 0; border-radius: 14px 0 0 14px; }
.gl-orbitCard .gl-guideCover img { object-fit: cover; }
.gl-orbitCard .gl-cardBody { padding-inline: clamp(34px, 4vw, 58px); }
.gl-electroCard.gl-verticalCoverCard { grid-template-columns: minmax(210px, .58fr) minmax(0, 1.42fr); }
.gl-electroCard.gl-verticalCoverCard .gl-cardBody { min-height: 430px; }

.gl-empty { grid-column: 1 / -1; min-height: 220px; padding: 30px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed #34445b; border-radius: 18px; color: var(--accent); text-align: center; }
.gl-empty span { color: var(--muted); font-size: 13px; }
.gl-pagination { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gl-pagination button { min-width: 40px; min-height: 40px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 750; }
.gl-pagination button:hover:not(:disabled), .gl-pagination .gl-activePage { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.gl-pagination button:disabled { cursor: default; opacity: .35; }

@keyframes electro-flow { to { stroke-dashoffset: -100; } }
@keyframes electro-aura { to { opacity: 1; transform: scale(1.015); filter: blur(30px); } }
@keyframes guides-orbit-card-pulse { to { opacity: 1; transform: scale(1.018); filter: blur(27px); } }

@media (max-width: 760px) {
  .gl-controls { align-items: stretch; flex-direction: column; }
  .gl-search { min-width: 100%; }
  .gl-grid { grid-template-columns: 1fr; }
  .gl-electroCard, .gl-orbitCard { grid-template-columns: 1fr; }
  .gl-electroCard .gl-downloadCover { border-radius: 18px 18px 0 0; }
  .gl-electroCard.gl-verticalCoverCard { grid-template-columns: 1fr; }
  .gl-verticalCoverCard { grid-column: auto; grid-template-columns: minmax(130px, .65fr) minmax(0, 1.35fr); }
  .gl-verticalCoverCard .gl-cardBody { min-height: 360px; padding: 24px; }
  .gl-verticalCoverCard .gl-cardBody h2 { font-size: 32px; }
  .gl-cardBody { min-height: 0; padding: 24px; }
  .gl-guideCover { min-height: 440px; }
  .gl-orbitCard .gl-guideCover { margin: 4px 4px 0; border-radius: 14px 14px 0 0; }
  .gl-downloadCover { min-height: 315px; }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .gl-verticalCoverCard { grid-template-columns: 1fr; }
  .gl-realCover { min-height: 430px; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-electroBase, .gl-electroCurrent, .gl-electroCard::before, .gl-orbitCard::before { animation: none; }
  .gl-glowCard, .gl-guideCover img { transition: none; }
}

[data-guides-directory]{padding-block:118px 100px;scroll-margin-top:90px;--border:#26364f;--accent:#65c7df;--accent-soft:#65c7df1a;--surface:#071020;--muted:#a7b4c7;--text:#f4f6fa;--font-display:Canela,Georgia,serif}
[data-guides-directory] [hidden]{display:none!important}
[data-guides-directory] .gl-guideCover img{position:absolute;inset:0;width:100%;height:100%}
[data-guides-directory] .gl-cardBody h2{font-family:Canela,Georgia,serif}
[data-guides-directory] .gl-search{box-sizing:border-box;min-width:0;width:310px;flex:0 1 310px;align-self:flex-start}
[data-guides-directory] .gl-search span{font:22px Arial}
[data-guides-directory] .gl-search input{box-sizing:border-box;min-width:0;padding:10px 0;margin:0;font-size:14px;border-radius:0}
[data-guides-directory] .gl-categories{align-items:center}
[data-guides-directory] [data-guides-pages]{display:contents}
[data-guides-directory] :is(input,button,a):focus-visible{outline:2px solid #65c7df;outline-offset:3px}
@media(max-width:760px){[data-guides-directory]{padding-block:48px 70px}[data-guides-directory] .gl-search{width:100%;flex:auto}[data-guides-directory] .gl-orbitCard .gl-guideCover img{object-fit:contain}}