/* Shared by the published page and the admin preview, so a preview can never drift from
   what readers actually see. */
:root{
  --primary:#1a73e8; --on:#1f1f1f; --sub:#5f6368; --outline:#e0e3e7; --body:#3c4043; --bullet:#5f6368;
  --surface:#fff; --chipbg:#f1f4f9; --pill:#d3e3fd; --pill-ink:#041e49;
  --feat:#1a73e8; --featbg:#e8f0fe;
  --enh:#b06000; --enhbg:#fef7e0;
  --fix:#188038; --fixbg:#e6f4ea;
}
body{font-family:Roboto,'Segoe UI',Arial,sans-serif;background:var(--surface);color:var(--on);line-height:1.65;font-size:15px}
@media(max-width:620px){.fintro,ul.kc li{text-align:left}}
.dgroup{margin-top:36px;scroll-margin-top:84px}
.dhead{font-size:1.35rem;font-weight:700;letter-spacing:-.2px;padding-bottom:8px;border-bottom:1px solid var(--outline)}
.feat-blk{margin-top:14px}
.ftitle{font-size:1.08rem;font-weight:600;color:var(--on);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kind{font-weight:700}
.kind.feature{color:var(--feat)}
.kind.enhancement{color:var(--enh)}
.kind.bugfix{color:var(--fix)}
.tag{font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 10px;letter-spacing:.03em;text-transform:uppercase}
.tag.feature{background:var(--featbg);color:var(--feat)}
.tag.enhancement{background:var(--enhbg);color:var(--enh)}
.tag.bugfix{background:var(--fixbg);color:var(--fix)}
.fintro{font-size:.95rem;line-height:1.7;color:var(--body);margin-top:8px;text-align:justify;hyphens:auto}
.kchead{font-weight:600;font-size:.92rem;color:var(--on);margin-top:14px}
ul.kc{margin:8px 0 0;padding:0;list-style:none}
ul.kc li{position:relative;padding:0 0 10px 22px;margin:0;font-size:.95rem;line-height:1.7;
  color:var(--body);text-align:justify;hyphens:auto}
ul.kc li::before{content:'';position:absolute;left:5px;top:.72em;width:6px;height:6px;border-radius:50%;
  background:var(--bullet)}
ul.kc b{color:var(--on);font-weight:600}
ul.kc li .subcap li{font-size:.95rem;color:var(--body)}
.media-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.subcap{margin:7px 0 0 0;padding:0;list-style:none}
ul.kc li .subcap li{position:relative;padding:0 0 4px 18px;margin:0;color:#5f6368;font-size:.95em}
ul.kc li .subcap li::before{content:'';position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;border:1.5px solid #9aa0a6;background:transparent}
figure.shot{flex:1 1 280px;max-width:560px;background:var(--chipbg);border:1px solid var(--outline);border-radius:10px;padding:6px;cursor:zoom-in}
figure.shot img{width:100%;display:block;border-radius:6px}
figure.shot figcaption{font-size:.76rem;color:var(--sub);padding:6px 4px 2px;text-align:center}
figure.shot figcaption a{color:var(--primary);text-decoration:none}
figure.shot figcaption a:hover{text-decoration:underline}
figure.shot video{width:100%;display:block;border-radius:6px;background:#000;aspect-ratio:16/9}
figure.shot.vid{cursor:default}
.noposter{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#1F2430;color:#E8EAED;font-size:.86rem;font-weight:600}
figure.shot.linkcard{cursor:default;padding:14px}
figure.shot.linkcard a{color:var(--primary);text-decoration:none;font-weight:600;font-size:.9rem}
figure.shot.linkcard a:hover{text-decoration:underline}
.ytbox{position:relative;cursor:pointer;border-radius:6px;overflow:hidden}
.ytbox img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.ytplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28);transition:.15s}
.ytplay .btn{width:64px;height:44px;border-radius:12px;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;transition:.15s}
.ytbox:hover .btn{background:#ff0000}
.ytplay svg{margin-left:3px}
.ytframe{position:relative;padding-top:56.25%;border-radius:6px;overflow:hidden}
.ytframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.att{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--outline);border-radius:8px;padding:3px 10px;font-size:.78rem;color:var(--primary);text-decoration:none;margin:10px 8px 0 0;font-weight:500}
.att:hover{background:#f6fafe}

/* deployed-at tip — kept identical to index.html so page and preview agree */
.uni{position:relative;display:inline-flex;align-items:center;cursor:help}
.uni .ic{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--sub);color:var(--sub);font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.uni .tip{position:absolute;left:0;top:150%;background:#fff;color:var(--on);font-size:.78rem;line-height:1.5;
  padding:10px 12px;border-radius:10px;width:max-content;max-width:min(360px,80vw);
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:30;border:1px solid var(--outline);
  box-shadow:0 10px 28px rgba(23,35,59,.22);transform:translateX(var(--tipdx,0px))}
.uni .tip .hd{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);display:block;margin-bottom:7px}
.uni .tip .chips{display:flex;flex-wrap:wrap;gap:6px}
.uni .tip .u{display:inline-flex;align-items:flex-start;gap:6px;border-radius:12px;padding:4px 11px;font-size:.76rem;
  font-weight:600;white-space:normal;overflow-wrap:anywhere;line-height:1.4;max-width:100%}
.uni .tip .u i{width:7px;height:7px;border-radius:50%;background:currentColor;font-style:normal;opacity:.9;
  flex:0 0 auto;margin-top:5px}
.uni .tip::after{content:'';position:absolute;bottom:100%;left:var(--tipax,14px);border:7px solid transparent;
  border-bottom-color:#fff;filter:drop-shadow(0 -1px 0 var(--outline))}
.uni:hover .tip{opacity:1}
