/* ---------- brand faces (self-hosted, subset) ---------- */
/* vivo Sans ships at 7.7MB per weight and PixelMplus10 at 1.1MB; these are
   pyftsubset cuts. The shipped vivo Sans files include CJK subsets, but the
   registered faces stay Latin-only so portal Chinese falls through to native
   PingFang SC, which is faster and correct. */
@font-face{font-family:"vivo Sans";font-weight:900;font-style:normal;font-display:swap;
  src:url(/static/vivosans-heavy-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F}
/* 600 is what .btn and the skill-card labels actually ask for; without a
   DemiBold face the browser jumps to 900 and every button renders Heavy. */
@font-face{font-family:"vivo Sans";font-weight:600;font-style:normal;font-display:swap;
  src:url(/static/vivosans-demibold-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F}
@font-face{font-family:"vivo Sans";font-weight:500;font-style:normal;font-display:swap;
  src:url(/static/vivosans-medium-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F}
@font-face{font-family:"vivo Sans";font-weight:400;font-style:normal;font-display:swap;
  src:url(/static/vivosans-regular-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F}
@font-face{font-family:"PixelMplus10";font-weight:400;font-style:normal;font-display:swap;
  src:url(/static/pixelmplus10-latin.woff2) format("woff2")}

/* READY Intelligence — restrained, separated by elevation and boxing. Brand red
   is reserved for confirmation signals; neutral surfaces carry hierarchy.
   Two themes, one token set: :root is the light resting state (the default —
   works with no JS); [data-theme="dark"] is the original dark theme, kept
   verbatim. --elev-rgb is the elevation channel: a raised surface is a black
   wash on white and a white wash on black, so washes are written
   rgba(var(--elev-rgb),α) and never name a colour directly. */

:root{
  color-scheme:light; /* native scrollbars/controls follow the theme */
  --bg:#FFFFFF; --panel:#F6F4F6; --panel-2:#EFECEF;
  --ink:#1A171A; --strong:#000000; --muted:#6E686E; --faint:#9A949A;
  --line:#E6E2E6; --line-strong:#D8D3D8;
  --accent:#EE182E; --accent-ink:#EE182E;
  --accent-hair:rgba(238,24,46,.55); --accent-wash:rgba(238,24,46,.05);
  --up:#2F7A4E; --down:#B03A2F; --warn:#9A6E1C;
  --elev-rgb:0,0,0;
  --lift:rgba(0,0,0,.035); --lift-line:rgba(0,0,0,.12);
  --user-ring:#BCA7E8; /* opaque mid-tone, reads on either ground */
  --radius:3px;
  --maxw:1080px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pixel:"PixelMplus10",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --display:"vivo Sans","PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI",var(--sans);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0D0C0D; --panel:#161416; --panel-2:#1F1C1F;
  --ink:#EDE9ED; --strong:#FFFFFF; --muted:#8F898F; --faint:#6E686E;
  --line:#2E292E; --line-strong:#3A343A;
  --up:#4E9A6B; --down:#C4483C; --warn:#C8922F;
  --elev-rgb:255,255,255;
  --lift:rgba(255,255,255,.045); --lift-line:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); line-height:1.55;
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
/* A link carries no brand colour here — the red budget spends its six reds on
   decisions, not navigation. So links read as bright prose with a hairline
   underline, and the components whose whole box is an anchor (nav rows, chips,
   cards) opt out below: a rule drawn across a card reads as damage, not
   affordance. */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:2px}
a:hover{color:var(--strong);text-decoration-color:var(--muted)}
.brand a,nav.top a,nav.sub a,.who a,.chip-link,.dg-index-card,.dg-nav-link,
.dg-nav-back,.dg-source,.dg-extra-link,.dg-mention-title,.landing-admin,
.rd-menu__item,.agent-user-menu-item{text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- shared site header ---------- */
header.site{border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand a{color:var(--ink);display:inline-flex;align-items:center;gap:9px}
/* the lockup is inlined (inline_svg) and paints with currentColor — it follows
   --ink on every surface and theme. The ball is the one place red is identity
   rather than confirmation, and it carries that red in the artwork itself. */
.brand-logo{height:20px;width:auto;display:block;flex:none}
.brand small{font-family:var(--sans);font-weight:500;color:var(--faint);font-size:12.5px;margin-left:2px;letter-spacing:0}
/* gradient hairline that lives under the chrome */
.gradbar{height:3px;background:var(--panel-2);border:0}

nav.top{display:flex;align-items:center;gap:24px;font-size:14px}
nav.top a{color:var(--muted)}
nav.top a:hover{color:var(--ink)}
nav.top a.admin{color:var(--ink);font-weight:600}

.who{font-size:13px;color:var(--muted)}
.who b{color:var(--ink);font-weight:600}
.who a{margin-left:14px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;border:0;font-family:var(--display);letter-spacing:.005em;transition:filter .18s ease,box-shadow .18s ease,transform 160ms ease-out}
.btn.primary{background:var(--panel-2);color:var(--strong);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.btn.primary:hover{filter:brightness(1.04) saturate(1.05);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.ghost{border:1.5px solid var(--ink);color:var(--ink);background:var(--panel)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.block{width:100%}

/* ---------- public landing ---------- */
.hero{padding:84px 0 60px}
.eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
h1{font-size:46px;line-height:1.12;letter-spacing:-.01em;margin:18px 0 0;max-width:15ch}
.lede{font-size:18px;color:var(--muted);max-width:60ch;margin:22px 0 0}
.lede strong{color:var(--ink);font-weight:600}
.cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.chips{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--muted)}
.chip b{color:var(--ink);font-weight:600}
.chip .d{width:7px;height:7px;border-radius:50%;background:var(--muted)}

.steps{padding:18px 0 76px;border-top:1px solid var(--line)}
.section-label{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:40px 0 26px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step .num{font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.step h3{font-size:18px;margin:12px 0 8px}
.step p{font-size:14.5px;color:var(--muted);margin:0}
.step .tag{font-size:12px;color:var(--faint);margin-top:10px}

.access{border-top:1px solid var(--line)}
.access .wrap{display:flex;align-items:center;justify-content:space-between;padding:26px 28px;gap:20px;flex-wrap:wrap}
.access p{margin:0;color:var(--muted);font-size:14.5px}
.access b{color:var(--ink)}

footer.site{border-top:1px solid var(--line)}
footer.site .wrap{display:flex;justify-content:space-between;padding:22px 28px;color:var(--faint);font-size:12.5px;gap:16px;flex-wrap:wrap}

/* ---------- admin sub-nav ---------- */
nav.sub{border-bottom:1px solid var(--line)}
nav.sub .wrap{display:flex;gap:28px;height:46px;align-items:center;font-size:14px}
nav.sub a{color:var(--muted);height:46px;display:inline-flex;align-items:center;border-bottom:2px solid transparent;margin-bottom:-1px}
nav.sub a:hover{color:var(--ink)}
nav.sub a.active{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}

/* ---------- admin page head ---------- */
main.wrap{padding-bottom:8px}
.pagehead{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 4px;gap:16px;flex-wrap:wrap}
.pagehead h1{font-size:24px;margin:0;letter-spacing:-.01em}
.pagehead .meta{font-size:12.5px;color:var(--faint)}
.pagehead .meta .live{color:var(--up);font-weight:600}

/* ---------- service status ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:22px}
.svc .row{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.svc .row:nth-child(odd){border-right:1px solid var(--line);padding-right:24px}
.svc .row:nth-child(even){padding-left:24px}
.svc .name{font-weight:600;font-size:15px}
.svc .url{font-size:12.5px;color:var(--faint);font-family:var(--mono)}
.svc .lat{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}

.status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;white-space:nowrap}
.status .led{width:8px;height:8px;border-radius:50%;flex:none}
.status.up,.status.ok{color:var(--up)} .status.up .led,.status.ok .led{background:var(--up)}
.status.degraded{color:var(--warn)} .status.degraded .led{background:var(--warn)}
.status.down,.status.unreachable{color:var(--down)} .status.down .led,.status.unreachable .led{background:var(--down)}
.status.unknown{color:var(--faint)} .status.unknown .led{background:var(--faint)}

/* ---------- metric grid (hairline) ---------- */
.label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:38px 0 0;display:flex;align-items:center;gap:8px}
.label::before{content:"";width:9px;height:9px;background:var(--muted);flex:none;border-radius:2px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:16px;border-top:2px solid transparent;border-color:var(--line-strong)}
.metric{padding:18px 0;border-bottom:1px solid var(--line)}
.metric + .metric{border-left:1px solid var(--line);padding-left:22px}
.metric .v{font-size:30px;font-weight:680;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.metric .v.sm{font-size:24px}
.metric .k{font-size:13px;color:var(--muted);margin-top:4px}
.metric .s{font-size:12px;color:var(--faint);margin-top:2px}
.metrics.cols-3{grid-template-columns:repeat(3,1fr)}
.metrics.cols-2{grid-template-columns:repeat(2,1fr)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin-top:16px}
thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600;text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--line-strong)}
thead th.num{text-align:right;padding-right:0}
thead th.sortable{cursor:pointer;user-select:none}
thead th.sortable:hover{color:var(--ink)}
tbody td{font-size:14px;padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:middle}
tbody td.num{font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
tbody td b{font-weight:600}
.pill{display:inline-block;font-size:12px;color:var(--muted);background:var(--panel-2);border-radius:5px;padding:2px 8px;font-family:var(--mono)}
.err{color:var(--down)} .ok{color:var(--muted)}

/* ---------- notices ---------- */
.notice{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--radius);padding:12px 16px;margin-top:16px;font-size:13.5px;color:var(--muted);background:var(--panel)}
.notice.down{border-left-color:var(--down)}
.empty{padding:26px 0;color:var(--faint);font-size:14px;border-bottom:1px solid var(--line)}

/* ---------- login ---------- */
.login-wrap{max-width:420px;margin:0 auto;padding:84px 28px}
.login-wrap h1{font-size:24px;max-width:none;margin:0 0 6px}
.login-wrap p.sub{color:var(--muted);font-size:14px;margin:0 0 26px}
.field{display:block;margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.field input{width:100%;height:44px;padding:0 14px;font-size:15px;font-family:var(--sans);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);background:var(--panel)}
.field input:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px var(--panel-2)}
.form-error{color:var(--down);font-size:13.5px;margin:0 0 16px}
.login-foot{margin-top:22px;font-size:13px;color:var(--faint)}

/* ---------- onboarding (copyable install prompts) ---------- */
.codeblock{
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin:0;white-space:pre-wrap;word-break:break-word;
  max-height:360px;overflow:auto;
}
.btn.copy{
  height:34px;padding:0 16px;font-size:13px;font-weight:600;flex:none;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);
}
.btn.copy:hover{border-color:var(--line-strong)}

/* ---------- session timeline (admin/sessions) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip-link{
  display:inline-flex;align-items:center;max-width:520px;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:999px;padding:5px 13px;background:var(--panel);
}
.chip-link:hover{border-color:var(--line-strong);color:var(--strong)}
.chip-link.active{background:var(--panel-2);border-color:var(--line-strong);color:var(--strong);font-weight:600}
.timeline{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.evt{border-left:3px solid var(--line-strong);border-bottom:1px solid var(--line);padding:11px 0 11px 16px}
.evt-dialogue{border-left-color:var(--line-strong)}
.evt-rationale{border-left-color:var(--warn)}
.evt-api{border-left-color:var(--line-strong)}
.evt-error{border-left-color:var(--down)}
.evt-artifact{border-left-color:var(--up)}
.evt-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.evt-ts{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.evt-type{font-size:12px;color:var(--faint);font-family:var(--mono)}
.evt-sess{font-size:12px;font-family:var(--mono)}
.evt-headline{font-size:14px;margin-top:4px;word-break:break-word}
.evt-error .evt-headline{color:var(--down)}
.evt-payload{margin-top:8px}
.evt-payload summary{font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
.evt-payload pre{margin-top:8px}
.pager{display:flex;align-items:center;gap:18px;margin-top:18px;font-size:13.5px}

/* ---------- conversation flow swimlane (session detail) ---------- */
/* An HTML swimlane: continuous lane guide-lines, a lane-colored dot per event,
   and rows that expand their full details in place (animated). No SVG, no
   scroll box — it's the whole conversation on the page. --rail-w = the lane zone
   width (set inline from the server's lane geometry). */
.flow{position:relative;margin:8px 0 4px}
/* lane headers pinned to the top of the screen, sitting over the guide lines */
.flow-lanehead{position:sticky;top:0;z-index:6;height:32px;background:var(--bg);border-bottom:1px solid var(--line-strong)}
.flane-head{position:absolute;top:9px;transform:translateX(-50%);font:600 11px var(--sans);color:var(--muted);letter-spacing:.04em;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.flane-head i{width:7px;height:7px;border-radius:50%;display:inline-block}
.flow-body{position:relative;border-top:1px solid var(--line)}
.flane-guide{position:absolute;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-.5px)}
.frow{position:relative;border-bottom:1px solid var(--line)}
.frow-head{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;padding:11px 8px 11px var(--rail-w);position:relative}
.frow-head:hover{background:var(--panel-2)}
.frow.open>.frow-head{background:var(--panel-2)}
.fdot{position:absolute;top:15px;width:11px;height:11px;border-radius:50%;border:2px solid var(--panel);transform:translateX(-50%);box-shadow:0 0 0 1px var(--line-strong);transition:left .18s ease}
.fdot.k-dialogue{background:var(--muted)}
.fdot.k-rationale{background:var(--warn)}
.fdot.k-api{background:var(--muted)}
.fdot.k-error{background:var(--down)}
.fdot.k-artifact{background:var(--up)}
.fdot.k-other{background:var(--muted)}
.frow.open>.frow-head .fdot{box-shadow:0 0 0 2px var(--ink)}
/* user (human) turns are rare amid the agent / API steps — surround them in a
   soft violet (distinct from the warm agent/api/reasoning palette) so the
   human's input stands out at a glance. Agent turns get no special treatment. */
.frow.role-user{border-bottom-color:transparent}
.frow.role-user>.frow-head{background:var(--panel-2);box-shadow:inset 0 0 0 1.5px var(--user-ring);border-radius:8px}
.frow.role-user>.frow-head:hover,.frow.role-user.open>.frow-head{background:var(--panel-2)}
.frow-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.frow-line{display:block;margin-top:3px;font-size:14px;word-break:break-word}
.frow.evt-error .frow-line{color:var(--down)}
/* animated in-place expand: grid-rows 0fr→1fr animates to the content's height */
.fdetail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.3,.8,.3,1)}
.frow.open>.fdetail{grid-template-rows:1fr}
.fdetail-in{overflow:hidden;min-height:0;padding:0 8px 0 var(--rail-w)}
.frow.open>.fdetail>.fdetail-in{padding-top:2px;padding-bottom:14px}
.fdetail .evt-body{max-height:520px}
@media (prefers-reduced-motion: reduce){.fdetail{transition:none}}
@media (prefers-reduced-motion: reduce){.btn{transition:none}.btn:active:not(:disabled){transform:none}}

/* ---------- template registry (admin/templates) ---------- */
.field textarea{width:100%;min-height:160px;padding:10px 14px;font-size:13px;line-height:1.6;font-family:var(--mono);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);background:var(--panel);resize:vertical}
.field textarea:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px var(--panel-2)}
.field select{width:100%;height:44px;padding:0 10px;font-size:15px;font-family:var(--sans);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);background:var(--panel)}
.field input[type=file]{width:100%;font-size:13.5px;padding:9px 0;color:var(--muted);border:0;height:auto}
.field span{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.form-grid .span2{grid-column:1 / -1}
video.player{width:100%;max-width:340px;background:var(--bg);border-radius:var(--radius);display:block;margin-top:14px}
.contact-sheet{max-width:100%;border:1px solid var(--line);border-radius:var(--radius);display:block;margin-top:14px}
.kf-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.kf-row figure{margin:0;font-size:12px;color:var(--faint)}
.kf-row img{width:128px;border-radius:var(--radius);border:1px solid var(--line);display:block;background:var(--bg)}
.statusflip{display:inline-flex;margin:0}
.filterbar{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.filterbar input[type=text]{height:34px;padding:0 12px;font-size:13.5px;font-family:var(--sans);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);background:var(--panel);min-width:180px}
.filterbar input[type=text]:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px var(--panel-2)}
.filterbar select{height:34px;padding:0 10px;font-size:13.5px;font-family:var(--sans);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);background:var(--panel)}
.tagdim{margin:8px 0 2px}
.tagdim b{display:inline-block;min-width:110px;font-size:13px;color:var(--muted);font-weight:600}
.tagopt{display:inline-flex;align-items:center;gap:5px;margin:2px 14px 2px 0;font-size:13.5px;color:var(--ink);cursor:pointer}
.tagopt input[type=checkbox]{width:auto;height:auto;margin:0}
.tagopt .faint{font-size:11.5px;font-family:var(--mono)}
@media (max-width:760px){.form-grid{grid-template-columns:1fr}}

@media (max-width:760px){
  h1{font-size:34px}
  .grid3{grid-template-columns:1fr}
  .metrics,.metrics.cols-3,.metrics.cols-2{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:1fr}
  .svc .row:nth-child(odd){border-right:0;padding-right:0}
  .svc .row:nth-child(even){padding-left:0}
}

/* ---------- landing: the joystick splash ---------- */
/* The corner menu. On the black splash the pill has to carry its own chrome —
   the page is not on the themed --panel ground here. */
.landing-nav{position:fixed;top:0;right:0;z-index:10;padding:22px 26px}
.landing-admin{
  font-size:13.5px;color:var(--muted);letter-spacing:.02em;text-decoration:none;
  border:1px solid rgba(var(--elev-rgb),.20);border-radius:999px;padding:7px 14px;
  background:transparent;
  transition:border-color .2s ease,color .2s ease;
}
.landing-admin:hover{color:var(--strong);border-color:rgba(var(--elev-rgb),.42)}
/* .rd-menu__trigger is declared later and paints --panel; on the splash the
   pill must stay transparent, so the combined selector wins it back. */
.rd-menu__trigger.landing-admin{background:transparent;color:var(--muted)}
.rd-menu__trigger.landing-admin:hover{color:var(--strong)}

/* The mark is a joystick, so it moves like one. The five shapes are a base, a
   stick, a ball and two dots; .ri-tilt and .ri-orb are top-level groups inside
   ri-mark.svg, which is why their transform-origins below are literal viewBox
   units. Sequence: the joystick plants, spins ONE full revolution, fires the
   two dots on the last beat — and those sparks wake READY, the mascot asleep
   beside the mark since load. READY then sweeps left to right; the wordmark's
   reveal edge is locked to READY's leading edge, so the letters look pulled
   out from under it. READY leaves, and the Chinese line settles in last. */
.landing-body{overflow:hidden;background:var(--bg);color:var(--strong)}
/* The lockup's metrics live here, not on .lockup: .readyos-tag is .lockup's
   SIBLING, so anything declared on .lockup is invisible to it and every
   calc(var(--lh) ...) written on the tagline collapses silently — no error,
   the margin just quietly becomes zero. */
.landing{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:0 clamp(24px,7vw,110px);
  --lh:clamp(30px,6.4vw,74px);
  --wm:calc(var(--lh) * 8.16);   /* the wordmark's width — also READY's travel */
  --fw:calc(var(--lh) * 1.72);   /* READY, sized as a peer of the 1.82 mark */
  --ready-sleep:url(/static/mascot/sleep.webp);
  --ready-wake:url(/static/mascot/wake.webp);
  --ready-reply:url(/static/mascot/reply.webp);
  --ready-hello:url(/static/mascot/hello.webp)}
/* The dark frames differ only in the sparks outside the shell, so the whole
   set swaps by redefining four tokens — no repaint pass, no second request. */
[data-theme="dark"] .landing{
  --ready-sleep:url(/static/mascot/dark/sleep.webp);
  --ready-wake:url(/static/mascot/dark/wake.webp);
  --ready-reply:url(/static/mascot/dark/reply.webp);
  --ready-hello:url(/static/mascot/dark/hello.webp)}
.landing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(var(--elev-rgb),.05) .5px,transparent .5px);
  background-size:8px 8px}

.lockup{position:relative;margin:0;display:flex;align-items:flex-end;justify-content:center;
  max-width:100%;gap:calc(var(--lh) * .30)}
.lockup svg{display:block;height:auto;overflow:visible}
.lockup-mark{width:calc(var(--lh) * 1.42);flex:none}
.lockup-word{position:relative;display:block;width:var(--wm);flex:none}
.lockup-wordmark{width:var(--wm);display:block}

/* READY's rig. One job per layer, because CSS animations on a single element
   fight over `transform`: .ready carries the fade-in and the exit, .ready-slot
   the travel, .ready-bob the hover, .ready-boot the wake pop. "Off" is
   desaturation rather than transparency — fading the shell turns brand red to
   pink on a white ground, which reads as broken instead of asleep. */
.ready{position:absolute;left:0;bottom:calc(var(--lh) * -.12);
  width:var(--fw);height:var(--fw);z-index:2;pointer-events:none}
.ready-slot,.ready-bob,.ready-boot{display:block;width:100%;height:100%}
.ready-boot{position:relative;opacity:.88;filter:saturate(.3)}
.ready-face{position:absolute;inset:0;opacity:0;
  background-repeat:no-repeat;background-position:center;background-size:contain}
.ready-face--sleep{background-image:var(--ready-sleep)}
.ready-face--wake {background-image:var(--ready-wake)}
.ready-face--reply{background-image:var(--ready-reply)}
.ready-face--hello{background-image:var(--ready-hello)}

/* 灵感就绪 智启突破 is two four-character phrases, not one eight-character
   block, so it is set as two spans with a real gap. The negative margin
   cancels the trailing letter-space CSS adds after each phrase's last glyph —
   without it the gap is wider than specified and a centred line sits off
   centre. line-height:1 keeps the drop below the wordmark honest. The width +
   padding-left pair centres the line on the WORDMARK: the mark stands to the
   left, so centring in the whole lockup drags the tagline off the name. */
.readyos-tag{position:relative;margin:calc(var(--lh) * .26) 0 0;
  display:flex;justify-content:center;gap:3.4em;line-height:1;
  width:calc(var(--lh) * 9.88);padding-left:calc(var(--lh) * 1.72);
  font-family:var(--sans);font-size:clamp(10px,1.15vw,14px);font-weight:500;
  color:var(--muted)}
.readyos-tag span{letter-spacing:1.15em;margin-right:-1.15em}

/* the ball is a sphere: it counter-scales against the stick's lean so it never
   squashes, and takes a perspective scale so it reads as further away on the
   far side of the loop */
.ri-tilt{transform-origin:28.715px 61.004px}   /* centre of the base */
.ri-orb {transform-origin:38.799px 22.467px}   /* centre of the ball */
.ri-fire1{transform-origin:15.746px 9.948px}
.ri-fire2{transform-origin:13.554px 20.689px}

/* Every animation starts at time 0 and offsets itself with animation-delay,
   so the whole entrance shares one clock. That is what keeps `travel` and
   `reveal` — same duration, same delay, same curve, same distance — locked to
   each other frame for frame. Total: 3.42s. */
.landing .lockup-mark  {animation:plant .30s cubic-bezier(.2,.85,.3,1) both}
.landing .ri-tilt      {animation:spin  .85s linear .30s both}
.landing .ri-orb       {animation:orbit .85s linear .30s both}
.landing .ri-fire1     {animation:shoot1 .28s cubic-bezier(.15,.85,.3,1.25) .97s both}
.landing .ri-fire2     {animation:shoot2 .28s cubic-bezier(.15,.85,.3,1.25) 1.03s both}
.landing .lockup-wordmark{animation:reveal .90s cubic-bezier(.42,.02,.28,1) 1.40s both}
/* `exit` and `land` are forwards-only on purpose: with `both`, their backwards
   fill would govern from time zero and cancel the animation listed before
   them on the same element. */
.landing .ready        {animation:rest .40s cubic-bezier(.2,.7,.2,1) .06s both,
                                  exit .38s cubic-bezier(.4,0,.7,.4) 2.48s forwards}
.landing .ready-slot   {animation:travel .90s cubic-bezier(.42,.02,.28,1) 1.40s both}
.landing .ready-bob    {animation:bob .90s linear 1.40s both,
                                  land .18s cubic-bezier(.3,.9,.4,1) 2.30s forwards}
.landing .ready-boot   {animation:boot .28s cubic-bezier(.2,.9,.3,1.35) 1.12s both}
.landing .ready-face--sleep{animation:cut-sleep 3.42s linear both}
.landing .ready-face--wake {animation:cut-wake  3.42s linear both}
.landing .ready-face--reply{animation:cut-reply 3.42s linear both}
.landing .ready-face--hello{animation:cut-hello 3.42s linear both}
.landing .readyos-tag  {animation:settle .55s cubic-bezier(.2,.7,.2,1) 2.62s both}
.landing-nav           {animation:fade-in .5s ease 3.02s both}

@keyframes plant{from{opacity:0;transform:translateY(10px) scale(.86)}to{opacity:1;transform:none}}
@keyframes shoot1{from{opacity:0;transform:translate(23.052px,12.520px) scale(.12)}
  55%{opacity:1}to{opacity:1;transform:none}}
@keyframes shoot2{from{opacity:0;transform:translate(25.244px,1.779px) scale(.12)}
  55%{opacity:1}to{opacity:1;transform:none}}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rest{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes boot{0%{opacity:.88;filter:saturate(.3);transform:none}
  38%{opacity:1;filter:saturate(1);transform:translateY(-7%) scale(1.13)}
  100%{opacity:1;filter:saturate(1);transform:none}}
@keyframes travel{from{transform:translateX(0)}to{transform:translateX(var(--wm))}}
@keyframes bob{0%{transform:translateY(0)} 20%{transform:translateY(-4.5%)}
  40%{transform:translateY(0)} 60%{transform:translateY(-4.5%)}
  80%,100%{transform:translateY(0)}}
@keyframes land{0%{transform:none} 45%{transform:scale(1.07,.93)} 100%{transform:none}}
@keyframes exit{0%{opacity:1;transform:none}
  100%{opacity:0;transform:translate(calc(var(--lh) * .55),-12%) scale(.9)}}
/* Hard cuts: READY's face is a pixel screen, so states snap. A crossfade reads
   as a smear on a dot matrix. Percentages are of the 3.42s master clock —
   sleep to 1.12s, wake to 1.40s, reply to 2.30s, hello to the end. */
@keyframes cut-sleep{0%,32.7%{opacity:1} 32.8%,100%{opacity:0}}
@keyframes cut-wake {0%,32.7%{opacity:0} 32.8%,40.9%{opacity:1} 41%,100%{opacity:0}}
@keyframes cut-reply{0%,40.9%{opacity:0} 41%,67.2%{opacity:1} 67.3%,100%{opacity:0}}
@keyframes cut-hello{0%,67.2%{opacity:0} 67.3%,100%{opacity:1}}
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes spin{
  0%{transform:rotate(0.000deg) scaleY(1.0000)}
  2.5%{transform:rotate(0.009deg) scaleY(1.0022)}
  5%{transform:rotate(0.168deg) scaleY(1.0139)}
  7.5%{transform:rotate(0.833deg) scaleY(1.0367)}
  10%{transform:rotate(2.350deg) scaleY(1.0654)}
  12.5%{transform:rotate(4.763deg) scaleY(1.0918)}
  15%{transform:rotate(7.691deg) scaleY(1.1079)}
  17.5%{transform:rotate(10.477deg) scaleY(1.1099)}
  20%{transform:rotate(12.693deg) scaleY(1.1003)}
  22.5%{transform:rotate(14.620deg) scaleY(1.0861)}
  25%{transform:rotate(16.322deg) scaleY(1.0688)}
  27.5%{transform:rotate(17.689deg) scaleY(1.0489)}
  30%{transform:rotate(18.608deg) scaleY(1.0264)}
  32.5%{transform:rotate(18.973deg) scaleY(1.0021)}
  35%{transform:rotate(18.689deg) scaleY(0.9767)}
  37.5%{transform:rotate(17.686deg) scaleY(0.9511)}
  40%{transform:rotate(15.924deg) scaleY(0.9266)}
  42.5%{transform:rotate(13.404deg) scaleY(0.9044)}
  45%{transform:rotate(10.176deg) scaleY(0.8861)}
  47.5%{transform:rotate(6.344deg) scaleY(0.8728)}
  50%{transform:rotate(2.067deg) scaleY(0.8658)}
  52.5%{transform:rotate(-2.443deg) scaleY(0.8661)}
  55%{transform:rotate(-6.926deg) scaleY(0.8743)}
  57.5%{transform:rotate(-11.092deg) scaleY(0.8905)}
  60%{transform:rotate(-14.639deg) scaleY(0.9141)}
  62.5%{transform:rotate(-17.272deg) scaleY(0.9441)}
  65%{transform:rotate(-18.738deg) scaleY(0.9787)}
  67.5%{transform:rotate(-18.847deg) scaleY(1.0156)}
  70%{transform:rotate(-17.506deg) scaleY(1.0521)}
  72.5%{transform:rotate(-14.735deg) scaleY(1.0851)}
  75%{transform:rotate(-10.685deg) scaleY(1.1116)}
  77.5%{transform:rotate(-5.626deg) scaleY(1.1286)}
  80%{transform:rotate(-0.000deg) scaleY(1.1302)}
  82.5%{transform:rotate(5.198deg) scaleY(1.1119)}
  85%{transform:rotate(7.715deg) scaleY(1.0810)}
  87.5%{transform:rotate(7.545deg) scaleY(1.0491)}
  90%{transform:rotate(5.608deg) scaleY(1.0244)}
  92.5%{transform:rotate(3.145deg) scaleY(1.0095)}
  95%{transform:rotate(1.172deg) scaleY(1.0025)}
  97.5%{transform:rotate(0.178deg) scaleY(1.0003)}
  100%{transform:rotate(0.000deg) scaleY(1.0000)}
}
@keyframes orbit{
  0%{transform:scale(1.0000) scaleY(1.0000)}
  2.5%{transform:scale(0.9988) scaleY(0.9978)}
  5%{transform:scale(0.9923) scaleY(0.9863)}
  7.5%{transform:scale(0.9796) scaleY(0.9646)}
  10%{transform:scale(0.9637) scaleY(0.9386)}
  12.5%{transform:scale(0.9490) scaleY(0.9159)}
  15%{transform:scale(0.9400) scaleY(0.9026)}
  17.5%{transform:scale(0.9389) scaleY(0.9009)}
  20%{transform:scale(0.9443) scaleY(0.9088)}
  22.5%{transform:scale(0.9522) scaleY(0.9208)}
  25%{transform:scale(0.9618) scaleY(0.9356)}
  27.5%{transform:scale(0.9729) scaleY(0.9534)}
  30%{transform:scale(0.9853) scaleY(0.9743)}
  32.5%{transform:scale(0.9988) scaleY(0.9979)}
  35%{transform:scale(1.0130) scaleY(1.0239)}
  37.5%{transform:scale(1.0272) scaleY(1.0514)}
  40%{transform:scale(1.0408) scaleY(1.0792)}
  42.5%{transform:scale(1.0531) scaleY(1.1056)}
  45%{transform:scale(1.0633) scaleY(1.1286)}
  47.5%{transform:scale(1.0707) scaleY(1.1458)}
  50%{transform:scale(1.0746) scaleY(1.1550)}
  52.5%{transform:scale(1.0744) scaleY(1.1546)}
  55%{transform:scale(1.0698) scaleY(1.1438)}
  57.5%{transform:scale(1.0609) scaleY(1.1230)}
  60%{transform:scale(1.0477) scaleY(1.0940)}
  62.5%{transform:scale(1.0311) scaleY(1.0592)}
  65%{transform:scale(1.0118) scaleY(1.0217)}
  67.5%{transform:scale(0.9913) scaleY(0.9846)}
  70%{transform:scale(0.9711) scaleY(0.9505)}
  72.5%{transform:scale(0.9527) scaleY(0.9216)}
  75%{transform:scale(0.9380) scaleY(0.8996)}
  77.5%{transform:scale(0.9285) scaleY(0.8860)}
  80%{transform:scale(0.9277) scaleY(0.8848)}
  82.5%{transform:scale(0.9378) scaleY(0.8993)}
  85%{transform:scale(0.9550) scaleY(0.9251)}
  87.5%{transform:scale(0.9727) scaleY(0.9532)}
  90%{transform:scale(0.9864) scaleY(0.9761)}
  92.5%{transform:scale(0.9947) scaleY(0.9906)}
  95%{transform:scale(0.9986) scaleY(0.9975)}
  97.5%{transform:scale(0.9998) scaleY(0.9997)}
  100%{transform:scale(1.0000) scaleY(1.0000)}
}

@media (prefers-reduced-motion: reduce){
  .landing .lockup-mark,.landing .ri-tilt,.landing .ri-orb,.landing .ri-fire1,
  .landing .ri-fire2,.landing .lockup-wordmark,.landing .readyos-tag,.landing-nav{
    animation:none;opacity:1;transform:none;clip-path:none;
  }
  /* the resting composition has no mascot in it, so there is nothing to still */
  .landing .ready{display:none}
}

/* ---- readyos menu (landing's first disclosure widget) ---- */
/* .rd-menu__trigger reuses .landing-admin for the pill chrome (border/radius/
   padding/hover) — only the button-specific reset + flex/caret live here. */
.rd-menu{position:relative;display:inline-block}
.rd-menu__mark{width:14px;height:auto;display:block;flex:none}
.rd-menu__trigger{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:inherit;font-family:var(--sans);font-size:13.5px;line-height:1;
  background:var(--panel);color:var(--muted);
}
.rd-menu__caret{
  display:inline-block;position:relative;top:-1px;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s cubic-bezier(.3,.8,.3,1);
}
.rd-menu__trigger[aria-expanded="true"] .rd-menu__caret{transform:rotate(225deg)}

/* the list is always in the DOM (a11y: it's the real menu, not a re-render) —
   closed state hides it via opacity/scale + visibility so it's out of the tab
   order and screen-reader tree until open. visibility carries a delay that's
   flipped between the two states so CLOSE fades out then disappears, while
   OPEN appears the instant the fade/grow starts ("clean swift grow-from-the-
   corner", not a pop). */
.rd-menu__list{
  position:absolute;top:calc(100% + 8px);right:0;min-width:180px;padding:6px;margin:0;
  list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  transform-origin:top right;z-index:11;
  opacity:0;transform:translateY(-6px) scale(.98);visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s cubic-bezier(.3,.8,.3,1),visibility 0s linear .18s;
}
.rd-menu.is-open .rd-menu__list{
  opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity .18s ease,transform .18s cubic-bezier(.3,.8,.3,1),visibility 0s linear 0s;
}
.rd-menu__item{
  display:block;padding:9px 14px;border-radius:8px;font-size:13.5px;
  color:var(--muted);white-space:nowrap;text-decoration:none;
  transition:background .16s ease,color .16s ease;
}
.rd-menu__item:hover,.rd-menu__item:focus{background:var(--panel-2);color:var(--strong)}
.rd-menu__trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.rd-menu__item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion: reduce){
  .rd-menu__caret{transition:none}
  .rd-menu__list,.rd-menu.is-open .rd-menu__list{transition:none}
  .rd-menu__item{transition:none}
}

/* ---------- daily digest (admin/digest + digest_report) ---------- */
/* Index: a card grid of dates, newest first, each teasing its items. */
.dg-index{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.dg-index-card{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;background:var(--panel);color:var(--ink);
  transition:border-color .18s ease,box-shadow .18s ease,transform .05s ease}
.dg-index-card:hover{border-color:var(--line-strong);color:var(--ink);
  box-shadow:0 6px 20px rgba(0,0,0,.10)}
.dg-index-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dg-index-date{font-size:17px;font-weight:700;letter-spacing:-.01em}
.dg-index-count{font-size:12px;font-weight:600;color:var(--strong);
  background:var(--panel-2);border-radius:999px;padding:2px 10px;white-space:nowrap}
.dg-index-teaser{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:5px}
.dg-index-teaser li{font-size:13px;color:var(--muted);line-height:1.45;
  padding-left:14px;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-index-teaser li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:1px;background:var(--faint)}
.dg-index-foot{margin-top:14px;font-size:11.5px}

/* Report: bilingual toggle — both languages ship in the DOM, CSS shows one.
   ZH is default-visible so the page reads sensibly with JS disabled. */
.dg .lang-en{display:none}
.dg[data-lang="en"] .lang-zh{display:none}
.dg[data-lang="en"] .lang-en{display:block}
.dg[data-lang="en"] span.lang-en{display:inline}

.dg-head{align-items:flex-start}
.dg-head h1{font-size:24px;margin:0}
.dg-langtoggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;
  padding:2px;background:var(--panel);flex:none}
.dg-lang-btn{border:0;background:none;cursor:pointer;font:600 13px var(--sans);
  color:var(--muted);border-radius:999px;padding:5px 14px;line-height:1;
  transition:color .15s ease,background .15s ease}
.dg-lang-btn:hover{color:var(--ink)}
.dg-lang-btn.active{color:var(--strong);background:var(--panel-2);
  box-shadow:0 1px 2px rgba(0,0,0,.2)}

.dg-pager{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:16px 0 4px;font-size:13px}
.dg-nav-link{font-variant-numeric:tabular-nums;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 13px;background:var(--panel)}
.dg-nav-link:hover{border-color:var(--line-strong);color:var(--strong)}
.dg-nav-back{color:var(--faint);font-size:12.5px}
.dg-nav-back:hover{color:var(--strong)}

/* one card per digest item */
.dg-card{border:1px solid var(--line);border-radius:10px;padding:20px 22px;
  margin-top:20px;background:var(--panel)}
.dg-card:hover{border-color:var(--line-strong)}
.dg-card-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* source-type badge — a subtle, distinct tint per type */
.dg-badge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;border-radius:6px;padding:3px 9px;line-height:1;white-space:nowrap}
.dg-badge-paper{color:var(--muted);background:var(--panel-2)}
.dg-badge-github{color:var(--ink);background:var(--panel-2)}
.dg-badge-skill_plugin{color:var(--strong);background:var(--panel-2)}
.dg-badge-startup{color:var(--up);background:var(--panel-2)}
.dg-badge-article{color:var(--warn);background:var(--panel-2)}

/* adoption-effort chip S/M/L */
.dg-effort{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  font-size:12px;font-weight:700;border-radius:6px;padding:0 6px;line-height:1;cursor:help}
.dg-effort-S{color:var(--up);background:var(--panel-2)}
.dg-effort-M{color:var(--warn);background:var(--panel-2)}
.dg-effort-L{color:var(--down);background:var(--panel-2)}

.dg-comp{font-size:12px;color:var(--muted);background:var(--panel-2);border-radius:6px;
  padding:3px 9px;line-height:1;font-family:var(--sans)}

/* compact relevance meter + n/10 */
.dg-score{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.dg-meter{width:56px;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.dg-meter-fill{display:block;height:100%;border-radius:999px;background:var(--ink)}
.dg-score-num{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dg-score-den{font-size:11px;font-weight:600;color:var(--faint)}

.dg-title{font-size:18px;font-weight:680;letter-spacing:-.01em;line-height:1.3;
  margin:14px 0 0;color:var(--ink)}
.dg-oneliner{font-size:14.5px;color:var(--muted);line-height:1.6;margin:7px 0 0}

/* the prominent, verifiable source link — the product's hard requirement */
.dg-source{display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  border:1.5px solid var(--line-strong);border-radius:8px;padding:9px 14px;background:var(--panel);
  max-width:100%;transition:border-color .16s ease,box-shadow .16s ease,color .16s ease}
.dg-source:hover{border-color:var(--line-strong);color:var(--strong);
  box-shadow:0 4px 14px rgba(0,0,0,.12)}
.dg-source-label{font-size:13px;font-weight:600;color:var(--ink);flex:none}
.dg-source:hover .dg-source-label{color:var(--strong)}
.dg-source-host{font-family:var(--mono);font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-source-arrow{font-size:13px;color:var(--faint);flex:none;margin-left:auto}

/* bilingual body: labeled fields, the next-step gently accented */
.dg-body{margin-top:16px;border-top:1px solid var(--line);padding-top:4px}
.dg-field{padding:12px 0;border-bottom:1px solid var(--line)}
.dg-field:last-child{border-bottom:0}
.dg-field-k{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:5px}
.dg-field-v{margin:0;font-size:14px;color:var(--ink);line-height:1.66}
.dg-field-next .dg-field-k{color:var(--strong)}
.dg-field-next .dg-field-v{color:var(--muted)}

.dg-extra{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}
.dg-extra-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.dg-extra-link{font-family:var(--mono);font-size:12px;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:3px 9px;background:var(--panel)}
.dg-extra-link:hover{border-color:var(--line-strong);color:var(--strong)}

/* honorable mentions — compact linked list */
.dg-mentions{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.dg-mention{padding:13px 0;border-bottom:1px solid var(--line)}
.dg-mention-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dg-mention-title{font-size:14.5px;font-weight:600;color:var(--ink)}
.dg-mention-title:hover{color:var(--strong)}
.dg-mention-host{font-family:var(--mono);font-size:11.5px}
.dg-mention-line{font-size:13px;color:var(--muted);line-height:1.55;margin-top:3px}

.dg-notes{margin-top:24px;border-left:3px solid var(--line-strong);
  background:var(--panel-2);border-radius:0 var(--radius) var(--radius) 0;padding:12px 16px}
.dg-notes-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.dg-notes-v{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.65}

@media (max-width:760px){
  .dg-index{grid-template-columns:1fr}
  .dg-score{margin-left:0}
  .dg-card-head{gap:8px}
}