/* Site theme over Bootstrap 5. Needs tokens.css + fonts.css. */

/* global theme (whole site) */
html { scroll-behavior:smooth; }

[data-bs-theme="dark"] {
  --bs-body-bg:            var(--sl-ink);
  --bs-body-color:         var(--sl-text);
  --bs-emphasis-color:     var(--sl-text);
  --bs-secondary-color:    var(--sl-muted);
  --bs-secondary-bg:       var(--sl-surface-2);
  --bs-tertiary-bg:        var(--sl-surface);
  --bs-tertiary-color:     var(--sl-muted);
  --bs-border-color:       var(--sl-line);
  --bs-body-font-family:   var(--sl-font-body);
  --bs-heading-color:      var(--sl-text);
  --bs-link-color:         var(--sl-signal);
  --bs-link-color-rgb:     var(--sl-signal-rgb);
  --bs-link-hover-color:   #56f0bd;
  --bs-primary:            var(--sl-signal);
  --bs-primary-rgb:        var(--sl-signal-rgb);
}

body {
  font-family: var(--sl-font-body);
  background-color: var(--sl-ink);
  background-image:
    radial-gradient(64rem 42rem at 80% -6%, var(--sl-signal-glow), transparent 62%),
    radial-gradient(52rem 40rem at 4% 12%, var(--sl-relay-glow), transparent 60%);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
.navbar-brand {
  font-family: var(--sl-font-display);
  letter-spacing: -.02em;
}
.navbar-brand { font-weight: 700; letter-spacing:-.01em; }

/* grain + scanline overlay */
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
.navbar, main, footer { position: relative; z-index: 1; }

.navbar {
  background-color: var(--sl-ink) !important;
  border-bottom: 1px solid var(--sl-line) !important;
}

/* buttons */
.btn-primary {
  --bs-btn-bg: var(--sl-signal);
  --bs-btn-border-color: var(--sl-signal);
  --bs-btn-color: var(--sl-signal-ink);
  --bs-btn-hover-bg: #3ff0b0;
  --bs-btn-hover-border-color: #3ff0b0;
  --bs-btn-hover-color: var(--sl-signal-ink);
  --bs-btn-active-bg: #20c88a;
  --bs-btn-active-border-color: #20c88a;
  --bs-btn-active-color: var(--sl-signal-ink);
  font-weight: 600;
}
.btn-outline-light {
  --bs-btn-color: var(--sl-text);
  --bs-btn-border-color: var(--sl-line);
  --bs-btn-hover-bg: var(--sl-surface);
  --bs-btn-hover-border-color: var(--sl-muted);
  --bs-btn-hover-color: var(--sl-text);
  --bs-btn-active-bg: var(--sl-surface);
  --bs-btn-active-border-color: var(--sl-muted);
  --bs-btn-active-color: var(--sl-text);
  font-weight: 600;
}
.card { --bs-card-bg: var(--sl-surface); --bs-card-border-color: var(--sl-line); }

/* landing components (home page) */
.sl-landing {
  font-size: 17px;
  line-height: 1.62;
}
.sl-landing .bi { vertical-align: -.1em; line-height: 1; }
.sl-landing a:not(.btn) { color: var(--sl-signal); text-decoration: none; }

.sl-landing .eyebrow {
  font-family: var(--sl-font-mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sl-signal); font-weight: 500;
}

.sl-section { padding: 74px 0; }
.sl-section h2 { font-size: clamp(27px,3.4vw,38px); margin: 0 0 14px; max-width: 22ch; font-weight: 700; }
.sl-section .lede { color: var(--sl-muted); max-width: 46rem; margin: 0 0 8px; font-size: 17px; }

/* telemetry section rule */
.sec-rule { display:flex; align-items:center; gap:16px; margin-bottom:34px; }
.sec-rule .idx { font-family:var(--sl-font-mono); font-size:12px; letter-spacing:.14em; color:var(--sl-signal); }
.sec-rule .nm { font-family:var(--sl-font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sl-muted); }
.sec-rule .rule { flex:1; height:1px; background:linear-gradient(90deg, var(--sl-line), transparent); }
.sec-rule .stat { font-family:var(--sl-font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sl-muted); }
.sec-rule .stat b { color:var(--sl-signal); font-weight:500; }

/* carrier line divider */
.carrier { height:1px; background:var(--sl-line); position:relative; overflow:hidden; }
.carrier::before { content:""; position:absolute; top:0; left:-30%; width:30%; height:1px; background:linear-gradient(90deg, transparent, var(--sl-signal), transparent); animation:sl-carry 5.5s linear infinite; }
@keyframes sl-carry { to { left:130%; } }

/* hero */
.sl-hero { padding: 62px 0 84px; position: relative; overflow: hidden; }
.sl-hero-grid { display:grid; grid-template-columns:1.1fr minmax(0,1fr); gap:54px; align-items:start; }
.sl-hero h1 { font-size:clamp(36px,4.9vw,58px); margin:16px 0 0; font-weight:700; line-height:1.05; }
.sl-hero .sub { font-size:19px; color:var(--sl-muted); max-width:35rem; margin:22px 0 30px; }
.sl-hero .sub b { color:var(--sl-text); font-weight:600; }
.sl-cta-row { display:flex; gap:14px; flex-wrap:wrap; }
.sl-landing .btn { border-radius:12px; }
.sl-trust { display:flex; flex-wrap:wrap; gap:9px 20px; margin-top:30px; font-family:var(--sl-font-mono); font-size:12.5px; color:var(--sl-muted); }
.sl-trust span { display:inline-flex; align-items:center; gap:7px; }
.sl-trust .tick { color:var(--sl-signal); }

.reveal { opacity:0; transform:translateY(14px); animation:sl-rise .7s var(--sl-ease) forwards; }
.reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.14s}.reveal.d3{animation-delay:.24s}.reveal.d4{animation-delay:.34s}.reveal.d5{animation-delay:.44s}
@keyframes sl-rise { to { opacity:1; transform:none; } }

/* signature: signal track */
.stage { position:relative; }
.track { position:relative; z-index:2; background:linear-gradient(180deg, var(--sl-surface), var(--sl-surface-2)); border:1px solid var(--sl-line); border-radius:var(--sl-radius-lg); padding:16px 18px 18px; box-shadow:var(--sl-shadow-panel); }
.tk-head { display:flex; align-items:center; gap:12px; font-family:var(--sl-font-mono); font-size:12px; color:var(--sl-muted); padding-bottom:13px; border-bottom:1px solid var(--sl-line); }
.live { display:inline-flex; align-items:center; gap:7px; color:var(--sl-signal); font-weight:500; letter-spacing:.1em; }
.live .pulse { width:8px; height:8px; border-radius:50%; background:var(--sl-signal); animation:sl-pulse 1.6s infinite; }
@keyframes sl-pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sl-signal) 70%,transparent)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.tk-lat { margin-left:auto; }
.tk-lat b { color:var(--sl-text); font-weight:500; }
.tk-lat b::after { content:"238"; animation:sl-lat 2.4s steps(1) infinite; }
@keyframes sl-lat { 0%{content:"238"}25%{content:"244"}50%{content:"236"}75%{content:"241"}100%{content:"239"} }
.sl-lang-select { font-family:var(--sl-font-mono); font-size:11px; padding:3px 24px 3px 9px; border:1px solid var(--sl-line); border-radius:6px; background-color:var(--sl-surface-2); color:var(--sl-signal); cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%232AE5A0' d='M0 0h8L4 6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; }
.sl-lang-select:hover { border-color:color-mix(in srgb,var(--sl-signal) 45%,var(--sl-line)); }
.sl-lang-select:focus-visible { outline:2px solid var(--sl-signal); outline-offset:1px; }
.sl-lang-select option { color:var(--sl-text); background:var(--sl-surface); }
.stream { padding:15px 2px 2px; display:flex; flex-direction:column; gap:2px; }
.spk { font-family:var(--sl-font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sl-muted); margin-top:9px; }
.orig { color:var(--sl-muted); font-size:15px; font-style:italic; }
.trans { font-size:20px; font-weight:600; color:var(--sl-signal); overflow:hidden; white-space:nowrap; max-width:100%; border-right:2px solid var(--sl-signal); width:0; animation:sl-type 2.2s steps(28) forwards; }
@keyframes sl-type { from{width:0} 60%{width:var(--type-ch,15ch)} to{width:var(--type-ch,15ch)} }
.tk-div { height:1px; background:var(--sl-line); margin:14px 0 2px; }
.out .spk { color:var(--sl-relay); }
.out .trans-out { font-size:19px; font-weight:600; color:var(--sl-relay); }
.wave { display:flex; align-items:flex-end; gap:3px; height:26px; margin-top:16px; }
.wave i { flex:1; background:color-mix(in srgb,var(--sl-signal) 55%,transparent); border-radius:2px; height:20%; animation:sl-eq 1s ease-in-out infinite; }
.wave i:nth-child(3n){background:color-mix(in srgb,var(--sl-relay) 55%,transparent)}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.15s}.wave i:nth-child(6){animation-delay:.35s}.wave i:nth-child(7){animation-delay:.05s}.wave i:nth-child(8){animation-delay:.25s}.wave i:nth-child(9){animation-delay:.4s}.wave i:nth-child(10){animation-delay:.12s}.wave i:nth-child(11){animation-delay:.3s}.wave i:nth-child(12){animation-delay:.18s}.wave i:nth-child(13){animation-delay:.28s}.wave i:nth-child(14){animation-delay:.08s}
@keyframes sl-eq { 0%,100%{height:14%}50%{height:92%} }
.shot { position:relative; margin-top:-24px; padding-top:42px; z-index:1; }

/* feature panels */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.panel { background:var(--sl-surface); border:1px solid var(--sl-line); border-radius:var(--sl-radius); padding:22px; transition:var(--sl-dur-fast); position:relative; overflow:hidden; }
.panel::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--sl-signal); transform:scaleY(0); transform-origin:top; transition:.25s; }
.panel:hover { border-color:color-mix(in srgb,var(--sl-signal) 40%,var(--sl-line)); transform:translateY(-2px); }
.panel:hover::before { transform:scaleY(1); }
.panel .ficon { font-size:22px; display:block; margin-bottom:11px; color:var(--sl-muted); }
.panel.feat-hero .ficon { color:var(--sl-signal); }
.panel.feat-relay .ficon { color:var(--sl-relay); }
.panel .flabel { font-family:var(--sl-font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sl-muted); }
.panel h3 { font-size:18px; margin:11px 0 7px; font-weight:600; }
.panel p { margin:0; color:var(--sl-muted); font-size:14.5px; line-height:1.55; }
.panel.feat-hero { border-color:color-mix(in srgb,var(--sl-signal) 32%,var(--sl-line)); }
.panel.feat-hero .flabel { color:var(--sl-signal); }
.panel.feat-relay::before { background:var(--sl-relay); }
.panel.feat-relay:hover { border-color:color-mix(in srgb,var(--sl-relay) 42%,var(--sl-line)); }
.panel.feat-relay .flabel { color:var(--sl-relay); }

/* capability matrix */
.matrix { border:1px solid var(--sl-line); border-radius:var(--sl-radius-lg); overflow:hidden; background:var(--sl-surface); }
.mrow { display:grid; grid-template-columns:120px 1fr 168px; gap:18px; align-items:center; padding:20px 22px; border-bottom:1px solid var(--sl-line); }
.mrow:last-child { border-bottom:0; }
.mstage { font-family:var(--sl-font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--sl-text); font-weight:500; }
.mstage small { display:block; color:var(--sl-muted); font-size:10.5px; letter-spacing:.08em; margin-top:3px; text-transform:none; }
.provs { display:flex; flex-wrap:wrap; gap:7px; }
.pchip { font-family:var(--sl-font-mono); font-size:12px; padding:5px 10px; border:1px solid var(--sl-line); border-radius:7px; color:var(--sl-muted); background:var(--sl-surface-2); }
.pchip.local { color:var(--sl-signal); border-color:color-mix(in srgb,var(--sl-signal) 40%,var(--sl-line)); background:color-mix(in srgb,var(--sl-signal) 8%,transparent); }
.mbadge { font-family:var(--sl-font-mono); font-size:11px; letter-spacing:.06em; text-align:right; }
.mbadge.local { color:var(--sl-signal); }
.mbadge.cloud { color:var(--sl-relay); }
.mbadge small { display:block; color:var(--sl-muted); font-size:10px; letter-spacing:.04em; margin-top:3px; }
.matrix-note { margin-top:16px; font-family:var(--sl-font-mono); font-size:12.5px; color:var(--sl-muted); }
.matrix-note b { color:var(--sl-signal); font-weight:500; }

/* in-game control */
.ingame { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.overlay-demo { position:relative; border:1px solid var(--sl-line); border-radius:var(--sl-radius-lg); background:repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.012) 14px, rgba(255,255,255,.012) 28px), var(--sl-surface-2); min-height:250px; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; overflow:hidden; }
.overlay-demo .og-tag { position:absolute; top:14px; left:16px; font-family:var(--sl-font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sl-muted); }
.ovl-block { background:rgba(10,13,15,.72); border-radius:10px; padding:11px 13px; backdrop-filter:blur(3px); border-left:3px solid var(--sl-signal); }
.ovl-block.out { border-left-color:var(--sl-relay); }
.ovl-o { font-size:13px; color:var(--sl-muted); font-style:italic; }
.ovl-t { font-size:16px; font-weight:600; color:var(--sl-signal); margin-top:2px; }
.ovl-block.out .ovl-t { color:var(--sl-relay); }
.ovl-lat { font-family:var(--sl-font-mono); font-size:10.5px; color:var(--sl-muted); margin-top:5px; }
.ovl-lat b { color:var(--sl-text); font-weight:500; }
.keys { display:flex; flex-wrap:wrap; gap:14px 12px; margin-top:6px; }
.keyrow { display:flex; align-items:center; gap:10px; width:100%; }
.keyrow .desc { font-size:14.5px; color:var(--sl-muted); }
.kc { font-family:var(--sl-font-mono); font-size:12px; min-width:30px; text-align:center; padding:6px 9px; border:1px solid var(--sl-line); border-bottom-width:3px; border-radius:7px; background:var(--sl-surface); color:var(--sl-text); }
.kc.sig { color:var(--sl-signal); border-color:color-mix(in srgb,var(--sl-signal) 45%,var(--sl-line)); }
.kplus { color:var(--sl-muted); font-family:var(--sl-font-mono); }

/* patch bay (how it works) */
.lanes { display:grid; gap:16px; }
.lane { border:1px solid var(--sl-line); border-radius:var(--sl-radius); padding:20px 22px; background:var(--sl-surface); position:relative; }
.lane.in { border-left:3px solid var(--sl-signal); }
.lane.out { border-left:3px solid var(--sl-relay); }
.lane-tag { font-family:var(--sl-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:15px; }
.lane.in .lane-tag { color:var(--sl-signal); }
.lane.out .lane-tag { color:var(--sl-relay); }
.flow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--sl-font-mono); font-size:13px; }
.node { padding:8px 13px; border:1px solid var(--sl-line); border-radius:9px; background:var(--sl-surface-2); }
.arrow { color:var(--sl-muted); }
.lane p { margin:15px 0 0; color:var(--sl-muted); font-size:14.5px; font-family:var(--sl-font-body); }

/* pricing */
.price-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.price-head .from { font-family:var(--sl-font-mono); font-size:13px; color:var(--sl-muted); }
.price-head .from b { color:var(--sl-signal); font-weight:500; }
.grid-price { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.price { background:var(--sl-surface); border:1px solid var(--sl-line); border-radius:var(--sl-radius-lg); padding:28px 24px; text-align:center; position:relative; }
.price.best { border-color:var(--sl-signal); box-shadow:var(--sl-shadow-glow); }
.best-tag { position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-family:var(--sl-font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; background:var(--sl-signal); color:var(--sl-signal-ink); padding:4px 12px; border-radius:20px; font-weight:600; }
.price .plabel { font-family:var(--sl-font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sl-muted); }
.price .amount { font-family:var(--sl-font-display); font-size:56px; font-weight:700; margin:14px 0 2px; letter-spacing:-.03em; color:var(--sl-text); }
.price .amount small { font-size:17px; color:var(--sl-muted); font-weight:500; }
.price .per { color:var(--sl-muted); font-size:14px; margin-bottom:20px; }
.price .btn { width:100%; justify-content:center; }
.price-note { text-align:center; color:var(--sl-muted); font-size:14px; margin-top:22px; }

/* faq */
.faq { max-width:780px; margin-inline:auto; }
.faq details { border-bottom:1px solid var(--sl-line); }
.faq summary { list-style:none; cursor:pointer; padding:18px 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--sl-font-display); font-weight:600; font-size:18px; color:var(--sl-text); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .plus { color:var(--sl-signal); font-family:var(--sl-font-mono); transition:.2s; flex-shrink:0; }
.faq details[open] summary .plus { transform:rotate(45deg); }
.faq details p { margin:0 4px 20px; color:var(--sl-muted); font-size:15.5px; }

@media (max-width: 991px) {
  .sl-hero-grid, .ingame { grid-template-columns:1fr; gap:38px; }
  .grid-4, .grid-3, .grid-price { grid-template-columns:1fr 1fr; }
  .mrow { grid-template-columns:1fr; gap:12px; }
  .mbadge { text-align:left; }
}
@media (max-width: 575px) {
  .grid-4, .grid-3, .grid-price { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .live .pulse, .trans, .wave i, .tk-lat b::after, .carrier::before {
    animation: none !important; opacity: 1 !important; width: auto !important;
  }
  .trans { border-right: 0; }
}
@media print {
  /* kill decorative animation + grain so the hero prints fully rendered */
  .reveal, .live .pulse, .trans, .wave i, .tk-lat b::after, .carrier::before {
    animation: none !important; opacity: 1 !important; width: auto !important;
  }
  .reveal { transform: none !important; }
  .trans { border-right: 0; }
  body::after { display: none !important; }
}

/* ---- hero screenshot gallery (fills the .shot slot) ---- */
.shot-gallery { position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; }
.sg-feat { appearance:none; padding:0; margin:0; display:block; width:100%; cursor:pointer; position:relative; aspect-ratio:16/10; border:1px solid var(--sl-line); border-radius:var(--sl-radius); overflow:hidden; background:var(--sl-surface-2); transition:border-color .2s, transform .2s var(--sl-ease); }
.sg-feat img { display:block; width:100%; height:100%; object-fit:cover; object-position:left top; }
.sg-feat::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(10,13,15,.42)); pointer-events:none; }
.sg-feat:hover { border-color:color-mix(in srgb,var(--sl-signal) 42%,var(--sl-line)); transform:translateY(-2px); }
.sg-badge { position:absolute; z-index:2; top:11px; left:11px; display:inline-flex; align-items:center; gap:6px; font-family:var(--sl-font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--sl-text); background:rgba(10,13,15,.6); border:1px solid var(--sl-line); border-radius:var(--sl-radius-pill); padding:4px 10px; }
.sg-dot { width:7px; height:7px; border-radius:50%; background:var(--sl-signal); animation:sl-pulse 1.8s infinite; }
.sg-cta { position:absolute; z-index:2; bottom:11px; right:11px; font-family:var(--sl-font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--sl-text); background:rgba(10,13,15,.6); border:1px solid var(--sl-line); border-radius:var(--sl-radius-pill); padding:4px 9px; opacity:0; transition:opacity .2s; }
.sg-feat:hover .sg-cta, .sg-feat:focus-visible .sg-cta { opacity:1; }
.sg-rail { display:flex; gap:8px; overflow-x:auto; padding-bottom:3px; scrollbar-width:thin; scrollbar-color:var(--sl-line) transparent; }
.sg-thumb { appearance:none; padding:0; margin:0; cursor:pointer; flex:0 0 104px; aspect-ratio:16/10; border:1px solid var(--sl-line); border-radius:9px; overflow:hidden; background:var(--sl-surface-2); transition:border-color .2s, transform .2s var(--sl-ease); }
.sg-thumb img { display:block; width:100%; height:100%; object-fit:cover; object-position:left top; }
.sg-thumb:hover { border-color:color-mix(in srgb,var(--sl-signal) 45%,var(--sl-line)); transform:translateY(-2px); }
.sg-feat:focus-visible, .sg-thumb:focus-visible { outline:2px solid var(--sl-signal); outline-offset:2px; }

/* ---- lightbox ---- */
.sl-lb { border:none; padding:0; background:transparent; width:100%; max-width:min(1040px,94vw); color:var(--sl-text); }
.sl-lb:not([open]) { display:none; }
.sl-lb::backdrop { background:rgba(4,6,8,.86); backdrop-filter:blur(3px); }
.sl-lb-frame { position:relative; display:flex; flex-direction:column; max-height:92vh; background:var(--sl-surface); border:1px solid var(--sl-line); border-radius:var(--sl-radius-lg); overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.sl-lb-imgwrap { flex:1; min-height:0; overflow:auto; background:var(--sl-surface-2); scrollbar-width:thin; scrollbar-color:var(--sl-muted) transparent; }
.sl-lb-imgwrap img { display:block; width:100%; height:auto; }
.sl-lb-bar { flex:none; display:flex; align-items:center; gap:14px; padding:13px 15px; border-top:1px solid var(--sl-line); font-size:13px; color:var(--sl-muted); }
.sl-lb-title { color:var(--sl-text); font-weight:600; }
.sl-lb-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-lb-count { margin-left:auto; font-family:var(--sl-font-mono); font-size:11px; letter-spacing:.1em; white-space:nowrap; }
.sl-lb-btn { appearance:none; cursor:pointer; flex:none; width:38px; height:38px; border-radius:var(--sl-radius-pill); background:var(--sl-surface-2); border:1px solid var(--sl-line); color:var(--sl-text); font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:border-color .2s, background .2s; }
.sl-lb-btn:hover { border-color:color-mix(in srgb,var(--sl-signal) 45%,var(--sl-line)); background:var(--sl-surface); }
.sl-lb-close { position:absolute; top:11px; right:18px; z-index:3; }
.sl-lb-btn:focus-visible, .sl-lb:focus-visible { outline:2px solid var(--sl-signal); outline-offset:2px; }

@media (max-width: 575px) { .sg-thumb { flex-basis:92px; } }
@media (prefers-reduced-motion: reduce) { .sg-feat, .sg-thumb { transition:none; } .sg-feat:hover, .sg-thumb:hover { transform:none; } .sg-dot { animation:none; } }