:root{
  --bg:#0e2733;
  --ink:#f0e1a9;
  --ink-strong:#efe0a0;
  --ink-muted:#d9c78c;
  --teal:#1f9aa0;
  --teal-dark:#108089;
  --paper:#0e2733;
  --ink-on-teal:#082229;
  --card:#102c3a;
  --shadow:rgba(0,0,0,.35);
}
/* General link colors */
a {
  color: var(--teal);              /* matches the button/nav teal */
  text-decoration: underline;
}

a:hover {
  color: var(--teal-dark);         /* darker teal on hover */
  text-decoration: none;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;line-height:1.3}
.wrap{max-width:1100px;margin:0 auto;padding:1.25rem}
.site-header{background:var(--paper);box-shadow:0 2px 12px var(--shadow);position:sticky;top:0;z-index:5}
.site-header .brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.site-header img{height:70px;border-radius:.5rem}
.nav a{color:var(--ink);text-decoration:none;margin-left:1rem;padding:.35rem .6rem;border-radius:.5rem}
.nav a:hover{background:var(--card)}
.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center;margin:1.25rem 0 2rem}
.card{background:var(--card);padding:1rem 1.25rem;border-radius:1rem;box-shadow:0 10px 25px var(--shadow);border:1px solid rgba(255,255,255,.05)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;padding:.6rem .9rem;border-radius:.75rem;font-weight:700;border:1px solid var(--teal-dark);box-shadow:0 8px 18px var(--shadow)}
.btn:hover{filter:brightness(1.1)}
.badge{background:var(--teal);border:1px solid var(--teal-dark);padding:.1rem .45rem;border-radius:1rem;color:#fff;font-size:.75rem;vertical-align:middle}
.small{font-size:.9rem;color:var(--ink-muted)}
.site-footer{border-top:1px solid rgba(255,255,255,.07);margin-top:2rem}
h1,h2,h3{margin-top: 0;color:var(--ink-strong);letter-spacing:.3px}
ul{margin-top:.25rem}
.kv{display:flex;flex-wrap:wrap;gap:.5rem .75rem}
.kv span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:.15rem .5rem;border-radius:.5rem}
.icon-row{display:flex;gap:.5rem;align-items:center}
.ext-hero{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.code{background:#081a22;border:1px solid rgba(255,255,255,.12);padding:.75rem;border-radius:.5rem;overflow:auto}
.icon-row img {
    height: auto;
    width: auto;
    max-height: 128px;  /* prevent them from being too huge */
    max-width: 128px;
    border-radius: .375rem;
    border: 1px solid rgba(255,255,255,.12);
    background:#0c2330;
    padding:2px;
}
h1 {
    font-size: 3rem;    /* Larger heading */
    line-height: 1.2;
    margin-bottom: .5rem;
}

/* markdown-ish content */
.md { line-height: 1.6; }
.md h1,.md h2,.md h3 { margin: 1.25rem 0 .5rem; line-height: 1.25; }
.md h1 { font-size: 1.75rem; }
.md h2 { font-size: 1.4rem; }
.md h3 { font-size: 1.15rem; }
.md p { margin: .75rem 0; }
.md pre { background: #0c2330; border: 1px solid rgba(255,255,255,.12); padding: .75rem; border-radius: .5rem; overflow:auto; }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.md ul { padding-left: 1.25rem; margin: .5rem 0; }
.md a { text-decoration: underline; }

/* Wide tooltip for permission badges (non-intrusive) */
.card, .ext-hero { position: relative; overflow: visible; }
.badge.perm{position:relative;cursor:help;white-space:nowrap}
.badge.perm:hover::after{
  content:attr(data-tip);
  position:absolute;left:0;top:calc(100% + .35rem);
  width:min(34rem,80vw);padding:.6rem .8rem;
  background:var(--card);color:var(--ink);
  border:1px solid var(--border);border-radius:.6rem;box-shadow:0 6px 24px rgba(0,0,0,.15);
  font-size:.9rem;line-height:1.3;white-space:normal;z-index:1000
}


/* --- Extension details card tuning (match classic look) --- */
.kv-title{font-size:1.02rem;font-weight:700;color:var(--ink-strong);letter-spacing:.2px}

.kv .chip{
  display:inline-flex;align-items:baseline;gap:.35rem;
  padding:.25rem .55rem;border-radius:.9rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:var(--ink);
}
.kv .chip span{opacity:.9}
.kv .chip strong{font-weight:600;color:var(--ink)}

.badge.perm{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15);
  color:var(--ink);
}

/* keep the popover exactly as before */
.badge.perm:hover::after{ /* unchanged block is defined earlier */ }


/* === Extension details styling (scoped to right column) === */
.ext-hero aside .kv{ margin:.35rem 0 .2rem; display:flex; flex-wrap:wrap; gap:.45rem .6rem }
.ext-hero aside .kv-title{ font-size:1.02rem; font-weight:700; color:var(--ink-strong); letter-spacing:.2px; margin:0 0 .35rem .1rem }
.ext-hero aside .kv-block{ margin-top:.7rem }
.ext-hero aside .perm-grid{ display:flex; flex-wrap:wrap; gap:.4rem }

/* Classic pill look for chips and badges */
.ext-hero aside .kv .chip,
.ext-hero aside .badge{
  font-size:.9rem;
  line-height:1;
  padding:.28rem .6rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.22);
}
.ext-hero aside .kv .chip span{ opacity:.9 }
.ext-hero aside .kv .chip strong{ font-weight:600 }

/* Outline variant for Host access value */
.ext-hero aside .badge.outline{
  background:transparent;
  border-color:rgba(255,255,255,.22);
  color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0), 0 1px 0 rgba(0,0,0,.18);
}

/* Keep custom tooltip behavior exactly as before */
.badge.perm{ position:relative; cursor:help; white-space:nowrap }
.badge.perm:hover::after{
  content:attr(data-tip);
  position:absolute; left:0; top:calc(100% + .35rem);
  width:min(34rem,80vw); padding:.6rem .8rem;
  background:var(--card); color:var(--ink);
  border:1px solid var(--border); border-radius:.6rem;
  box-shadow:0 6px 24px rgba(0,0,0,.15);
  font-size:.9rem; line-height:1.3; white-space:normal; z-index:1000
}


/* Visually merge header + details into a single box */
.ext-hero aside .card:nth-of-type(1){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.ext-hero aside .card:nth-of-type(2){margin-top:0;border-top-left-radius:0;border-top-right-radius:0}


/* Fuse header + details cards visually (no seam) */
.ext-hero aside .card:nth-of-type(1){
  margin-bottom:0;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom-width:0;
  box-shadow: 0 1px 0 rgba(0,0,0,0); /* remove drop at the bottom edge */
}
.ext-hero aside .card:nth-of-type(2){
  margin-top:0;
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-top-width:0;
  box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 1px 0 rgba(255,255,255,0); /* remove top seam */
}


/* Make Manifest / Host access chips match badge pills */
.ext-hero aside .kv .chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.9rem; line-height:1;
  padding:.28rem .6rem;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.22);
}
.ext-hero aside .kv .chip span{opacity:.9}
.ext-hero aside .kv .chip strong{font-weight:600;color:var(--ink)}
/* Slightly tighter row gap to match original */
.ext-hero aside .kv{gap:.45rem .55rem;margin-top:.5rem;margin-bottom:.25rem}


/* ---- v23: tighten header details area & unify chip style with badge pills ---- */
/* Remove residual space between header and details chips */
.ext-hero aside .card:nth-of-type(1){ padding-bottom:.25rem; }
.ext-hero aside .card:nth-of-type(2){ padding-top:0; }
.ext-hero aside .card:nth-of-type(2) .kv{ margin-top:.15rem; margin-bottom:.2rem; }
/* Chips look identical to badges */
.ext-hero aside .kv .chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.9rem; line-height:1;
  padding:.24rem .58rem;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.22);
}
.ext-hero aside .kv .chip span,
.ext-hero aside .kv .chip strong{
  font-weight:600;
  color:var(--ink);
  opacity:1;
}
/* Keep tight gaps to match original */
.ext-hero aside .perm-grid{ gap:.38rem }


/* ---- v24: remove seam, pair chips, and fix description box ---- */
/* Seam killer: no border/shadow between card 1 and 2 */
.ext-hero aside .card:nth-of-type(1){
  margin-bottom:0;
  border-bottom:0 !important;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:none;
  padding-bottom:.35rem;
}
.ext-hero aside .card:nth-of-type(2){
  margin-top:0;
  border-top:0 !important;
  border-top-left-radius:0;
  border-top-right-radius:0;
  box-shadow:none;
  padding-top:.2rem;
}

/* Pair adjacent chips into single long pills: (1+2), (3+4) */
.ext-hero aside .kv{ gap:.5rem .2rem } /* base gap small; we'll add group gap on even chips */
.ext-hero aside .kv .chip{ margin:0; }
.ext-hero aside .kv .chip:nth-child(2n-1){ /* left chip in pair */
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  margin-right:0;
}
.ext-hero aside .kv .chip:nth-child(2n){ /* right chip in pair */
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  margin-left:-1px; /* overlap borders so they fuse */
  margin-right:.6rem; /* group gap after each pair */
}

/* Make chip visuals identical to badges (height, border, bevel) */
.ext-hero aside .kv .chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.9rem;line-height:1;
  padding:.26rem .58rem;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.22);
}
.ext-hero aside .kv .chip span{ opacity:.95 }
.ext-hero aside .kv .chip strong{ font-weight:600;color:var(--ink) }

/* Description card cropping fix */
.ext-hero aside .kv-block .card{ overflow:visible; padding:.85rem 1rem }
.ext-hero aside .kv-block .card p{ margin:0; line-height:1.4 }

/* ---- v25 cleanup ---- */
/* Ensure chips render as single pills (undo any pairing rules) */
.ext-hero aside .kv .chip{ 
  margin:0; border-radius:12px; 
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  padding:.24rem .58rem; font-size:.9rem; line-height:1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.22);
}
.ext-hero aside .kv .chip:nth-child(2n),
.ext-hero aside .kv .chip:nth-child(2n-1){
  margin-left:0; margin-right:.45rem;
  border-left-color:rgba(255,255,255,.18);
  border-right-color:rgba(255,255,255,.18);
  border-top-left-radius:12px;border-bottom-left-radius:12px;
  border-top-right-radius:12px;border-bottom-right-radius:12px;
}
/* Remove the seam completely */
.ext-hero aside .card:nth-of-type(1){ border-bottom:0 !important; box-shadow:none; padding-bottom:.25rem }
.ext-hero aside .card:nth-of-type(2){ border-top:0 !important; box-shadow:none; padding-top:.2rem }

/* Description padding + clipping fix */
.ext-hero aside .kv-block .card{ padding:.6rem .8rem; overflow:visible }
.ext-hero aside .kv-block .card p{ margin:0; line-height:1.35 }


/* v28: single-pill chips + tidy spacing + lean description */
.ext-hero aside .kv-chips{display:flex;flex-wrap:wrap;gap:.45rem .55rem;margin:.30rem 0 .25rem;}
.ext-hero aside .kv-chips .chip{
  font-size:.9rem;line-height:1;padding:.24rem .58rem;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.22);
}
.ext-hero aside .kv-chips .chip span{opacity:.95}
.ext-hero aside .kv-chips .chip strong{font-weight:600;color:var(--ink)}
.ext-hero aside .kv-block .card{padding:.50rem .75rem;overflow:visible;}
/* optional seam fusion (keeps markup unchanged) */
.ext-hero aside .card:first-of-type{margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;padding-bottom:.25rem;}
.ext-hero aside .card:first-of-type + .card{margin-top:-1px;border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:none;padding-top:.15rem;}


/* v29: prevent nested pill effect inside chips */
.ext-hero aside .kv-chips .chip{ 
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.9rem;line-height:1;padding:.24rem .58rem;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 0 rgba(0,0,0,.22);
}
/* neutralize the generic .kv span styling for the label inside chips */
.ext-hero aside .kv-chips .chip > span{
  background:transparent;border:0;padding:0;border-radius:0;box-shadow:none;
}
.ext-hero aside .kv-chips .chip strong{font-weight:600;color:var(--ink)}


/* v30: single-pill chips + tidy spacing */
.ext-hero aside .kv-chips{display:flex;flex-wrap:wrap;gap:.45rem .55rem;margin:.30rem 0 .25rem;}
.ext-hero aside .kv-chips .chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.9rem;line-height:1;
  padding:.24rem .58rem;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.22);
}
.ext-hero aside .kv-chips .chip > span{background:transparent;border:0;padding:0;border-radius:0;box-shadow:none;}
.ext-hero aside .kv-chips .chip strong{font-weight:600;color:var(--ink)}
/* lean description */
.ext-hero aside .kv-block .card{padding:.50rem .75rem;overflow:visible;}


/* v31: Unify pill look + make all pills hoverable (if data-tip is present) */
.ext-hero aside .kv-title{ font-size:1.06rem; font-weight:700; color:var(--ink-strong); letter-spacing:.2px; margin:0 0 .35rem .1rem }

/* Base pill style for chips and badges */
.ext-hero aside .kv-chips .chip,
.ext-hero aside .kv-block .badge{
  font-size:.95rem;
  line-height:1;
  padding:.26rem .62rem;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.22);
}

/* Keep labels inside chips from getting their own pills */
.ext-hero aside .kv-chips .chip > span{ background:transparent;border:0;padding:0;border-radius:0;box-shadow:none; opacity:.95 }
.ext-hero aside .kv-chips .chip > strong{ font-weight:700; color:var(--ink) }

/* Hover popover for ANY pill that has data-tip */
.ext-hero aside .kv-chips .chip[data-tip],
.ext-hero aside .kv-block .badge[data-tip]{ position:relative; cursor:help; white-space:nowrap }
.ext-hero aside .kv-chips .chip[data-tip]:hover::after,
.ext-hero aside .kv-block .badge[data-tip]:hover::after{
  content: attr(data-tip);
  position:absolute; left:0; top:calc(100% + .4rem);
  width:min(36rem, 80vw);
  padding:.65rem .85rem;
  border-radius:.6rem;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  font-size:.92rem; line-height:1.35;
  white-space:normal; z-index:1000
}

/* Chips row spacing */
.ext-hero aside .kv-chips{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin:.35rem 0 .3rem }
.ext-hero aside .kv-block .card{ padding:.52rem .78rem; overflow:visible }


/* v31-tuned: spacing requested
   - Reduce space between icon/title row and top pills
   - Add extra space before the "Permissions" heading
*/
.ext-hero aside .kv-chips{
  margin:.16rem 0 .60rem !important; /* top, sides, bottom */
  gap:.50rem .55rem;
}


/* v31-tuned-2: spacing delta: -4px above chips, +4px before Permissions */
.ext-hero aside .kv-chips{
  margin-top: 0 !important;                 /* remove ~4px more above Manifest area */
  margin-bottom: calc(.60rem + .25rem) !important; /* add 4px above Permissions */
}


/* v31-tuned-3: force smaller gap above chips by reducing the header row's bottom margin */
.ext-hero aside .card:first-of-type .row{ margin-bottom:.20rem !important; }
.ext-hero aside .kv-chips{ margin-top:0 !important; } /* keep chips tight to header row */


/* v31-tuned-4: pull chips up closer to the header area by ~6px */
.ext-hero aside .row + .kv-chips{ margin-top:-6px !important; }
.ext-hero aside .card:first-of-type .row{ padding-bottom:0 !important; margin-bottom:.10rem !important; }

/* v31-tuned-5: Option A exact tweak */
.ext-hero aside .kv-chips { margin-top:-7px !important; }

/* v31-screens-2col: screenshots in 2 columns on desktop, 1 column on small screens */
.grid a{display:block}
.grid a img{width:100%;height:auto;display:block}
@media (max-width: 880px){
  .grid{grid-template-columns:repeat(1,minmax(0,1fr))}
}

/* v31: tooltips for screenshots (hover on anchor with data-tip) */
.grid a.sshot[data-tip]{ position:relative; cursor:help }
.grid a.sshot[data-tip]::after{
  content: attr(data-tip);
  position:absolute; left:0; top:calc(100% + .5rem);
  width:min(36rem, 80vw);
  padding:.6rem .8rem;
  border-radius:.6rem;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  font-size:.92rem; line-height:1.35;
  white-space:normal;
  opacity:0; transform: translateY(-4px);
  pointer-events:none; z-index:1000;
  transition:opacity .15s ease, transform .15s ease;
}
.grid a.sshot[data-tip]:hover::after{ opacity:1; transform:none }

/* v31: visible captions under screenshots */
.grid a.sshot{ display:block }
.grid a.sshot .ss-desc{
  margin-top:.5rem;
  font-size:.92rem;
  color:var(--ink-muted);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* v31-lite: quieter screenshots (no hover tooltip), smaller captions */
.grid a.sshot .ss-desc{
  font-size:.86rem;
  margin-top:.4rem;
}


/* v31-pop: restore custom popover for screenshots with smaller text */
.grid a.sshot[data-tip]{ position:relative; cursor:help }
.grid a.sshot[data-tip]::after{
  content: attr(data-tip);
  position:absolute; left:0; top:calc(100% + .5rem);
  width:min(34rem, 80vw);
  padding:.55rem .78rem;
  border-radius:.6rem;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  font-size:.88rem; line-height:1.32;
  white-space:normal;
  opacity:0; transform: translateY(-4px);
  pointer-events:none; z-index:1000;
  transition:opacity .15s ease, transform .15s ease;
}
.grid a.sshot[data-tip]:hover::after{ opacity:1; transform:none }

/* v31-native: disable custom popover & make captions smaller */
.grid a.sshot[data-tip]::after{ content:none !important; }
.grid a.sshot .ss-desc{ font-size:.82rem; margin-top:.35rem; }

/* v31-native-tighter: smaller captions & less space */
.grid a.sshot .ss-desc{ font-size:.80rem; margin-top:.20rem; }

/* v31-quickwins */
/* Keep the 2-col grid tidy while images load */
.grid a.sshot img{ aspect-ratio:16/9; object-fit:cover; display:block; width:100%; height:auto; }
/* Visible keyboard focus for pills and screenshots */
.chip:focus-visible, .badge:focus-visible, .grid a.sshot:focus-visible{
  outline:2px solid #8fd6ff; outline-offset:2px; border-radius:12px;
}


/* v31 lightbox */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:9999}
.lb-overlay.open{display:flex}
.lb-frame{position:relative;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;align-items:center}
.lb-img{max-width:92vw;max-height:80vh;display:block;border-radius:.5rem;box-shadow:0 20px 44px rgba(0,0,0,.35)}
.lb-caption{margin-top:.6rem;text-align:center;color:var(--ink,#fff);font-size:.92rem;line-height:1.35;max-width:90vw}
.lb-btn{position:absolute;top:0.5rem;display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;
  background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:.5rem;cursor:pointer;user-select:none}
.lb-btn:hover{background:rgba(0,0,0,.7)}
.lb-close{right:.5rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:.5rem}
.lb-next{right:.5rem}
@media (max-width:780px){
  .lb-img{max-height:72vh}
  .lb-caption{font-size:.9rem}
}


/* a11y focus ring for interactive elements */
.chip:focus-visible, .badge:focus-visible, .grid a.sshot:focus-visible, .lb-btn:focus-visible {
  outline:2px solid #8fd6ff; outline-offset:2px; border-radius:12px;
}
/* lightbox styles (idempotent) */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:9999}
.lb-overlay.open{display:flex}
.lb-frame{position:relative;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;align-items:center}
.lb-img{max-width:92vw;max-height:80vh;display:block;border-radius:.5rem;box-shadow:0 20px 44px rgba(0,0,0,.35)}
.lb-caption{margin-top:.6rem;text-align:center;color:var(--ink,#fff);font-size:.92rem;line-height:1.35;max-width:90vw}
.lb-btn{position:absolute;top:0.5rem;display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;
  background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:.5rem;cursor:pointer;user-select:none}
.lb-btn:hover{background:rgba(0,0,0,.7)}
.lb-close{right:.5rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:.5rem}
.lb-next{right:.5rem}
/* Keep screenshot grid tidy */
.grid a.sshot img{ aspect-ratio:16/9; object-fit:cover; width:100%; height:auto; }
@media (max-width:780px){
  .lb-img{max-height:72vh}
  .lb-caption{font-size:.9rem}
}


/* lightbox zoom & tools */
.lb-frame{position:relative}
.lb-tools{position:absolute;top:.5rem;left:.5rem;display:flex;gap:.35rem}
.lb-tool{display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;
  background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:.5rem;cursor:pointer;user-select:none}
.lb-tool:hover{background:rgba(0,0,0,.7)}
.lb-zoom .lb-img{max-width:none;max-height:none}
.lb-zoom .lb-frame{overflow:auto}
.lb-img{cursor:zoom-in}
.lb-zoom .lb-img{cursor:zoom-out}


/* UI polish: lighter buttons + auto-hide UI */
.lb-tool,.lb-btn{
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(3px) saturate(120%);
  transition: background .15s ease, opacity .15s ease;
}
.lb-tool:hover,.lb-btn:hover{ background:rgba(0,0,0,.6) }
.lb-ui{ opacity:.85 }
.lb-overlay.hide-ui .lb-ui{ opacity:0; pointer-events:none }



/* lightbox keyboard help */
.lb-help{
  position:absolute; left:50%; transform:translateX(-50%);
  top:.55rem; padding:.2rem .5rem; border-radius:.4rem;
  font-size:.8rem; line-height:1; color:#fff;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(3px) saturate(120%);
  pointer-events:none; white-space:nowrap; opacity:.9;
}
@media (max-width:780px){ .lb-help{ font-size:.76rem; top:.45rem } }