/* Shared by the two overview pages; the supplied screenshots remain unchanged. */
.home-page .dl-proof {
  --proof-accent-ink:var(--overview-accent-ink,#b93812);
  padding-block:80px 88px;
  border-top:1px solid var(--line);
  color:var(--ink);
}
.dl-proof :is(div,figure,ol,li,button,a) { min-width:0; }
.dl-proof-head { max-width:830px; margin-bottom:36px; }
.home-page .dl-proof .dl-proof-title { font-family:inherit; font-size:clamp(30px,2.9vw,40px); font-weight:700; line-height:1.4; letter-spacing:-.8px; text-align:left; margin:0 0 18px; }
.dl-proof .dl-proof-lead { font-size:18px; line-height:1.8; color:var(--ink); }
.dl-proof .dl-proof-relationship { font-size:16px; line-height:1.8; color:var(--muted); margin-top:12px; }
.dl-proof p { text-align:left; word-break:keep-all; overflow-wrap:break-word; }
.dl-proof-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center; }
.dl-proof[data-scroll-driven=true] .dl-proof-scroll-track { height:calc(var(--proof-body-height) + var(--proof-scroll-distance)); }
.dl-proof[data-scroll-driven=true] .dl-proof-grid { position:sticky; top:104px; }
.dl-proof[data-scroll-driven=true] .dl-proof-capture { height:clamp(260px,calc(100vh - 310px),440px); }
.dl-proof-steps { list-style:none; padding:0; margin:0; border-bottom:1px solid var(--line); }
.dl-proof-step { display:flex; align-items:baseline; gap:15px; width:100%; padding:18px 14px; text-align:left; background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; color:var(--muted); }
.dl-proof-step:hover { background:var(--soft); }
.dl-proof-step[aria-selected=true] { color:var(--ink); background:var(--soft); box-shadow:inset 3px 0 var(--orange); }
.dl-proof-step:focus-visible { outline:3px solid var(--orange); outline-offset:-3px; }
.dl-proof-step-number { flex-shrink:0; width:22px; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.dl-proof-step[aria-selected=true] .dl-proof-step-number { color:var(--proof-accent-ink); }
.dl-proof-step-copy { display:grid; gap:6px; }
.dl-proof-step-label { font-size:20px; line-height:1.5; font-weight:600; letter-spacing:-.3px; }
.dl-proof-step-description { font-size:16px; line-height:1.7; color:var(--muted); word-break:keep-all; overflow-wrap:break-word; }
/* A common grid cell preserves the stage height during manual selection. */
.dl-proof-panels { display:grid; }
.dl-proof-panel { grid-area:1/1; }
.dl-proof-panel.is-inactive { visibility:hidden; pointer-events:none; }
.dl-proof-panel:focus-visible { outline:3px solid var(--orange); outline-offset:5px; border-radius:12px; }
.dl-proof-mobile-copy { display:none; }
.dl-proof-figure { margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--white); }
.dl-proof-window-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--soft); font-size:13px; line-height:1.6; }
.dl-proof-conversation { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.dl-proof-snapshot { flex-shrink:0; color:var(--muted); white-space:nowrap; }
.dl-proof-capture { display:block; position:relative; height:clamp(360px,32vw,440px); overflow:hidden; background:var(--soft); cursor:zoom-in; }
.dl-proof-capture:focus-visible { outline-offset:-4px; }
.dl-proof-capture img { position:absolute; width:max(100%,560px); height:auto; max-width:none; left:0; top:0; }
.dl-proof-capture--connect img { left:50%; transform:translate(-58%,-3%); }
.dl-proof-capture--trend img { left:auto; right:0; transform:translateY(-34%); clip-path:inset(34% 0 14% 0); }
.dl-proof-capture--process img { left:auto; right:0; transform:none; }
.dl-proof-capture--result img { clip-path:inset(0 0 50% 0); }
.dl-proof-window-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; padding:8px 16px; border-top:1px solid var(--line); font-size:14px; line-height:1.7; }
.dl-proof-window-footer>span { color:var(--muted); }
.dl-proof-window-footer>a { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:15px; font-weight:600; }
.dl-proof-window-footer>a:hover { color:var(--proof-accent-ink); text-decoration:underline; text-underline-offset:4px; }
.dl-proof-window-footer svg { width:18px; height:18px; flex-shrink:0; }
.dl-proof .dl-proof-caption { margin-top:16px; color:var(--muted); font-size:14px; line-height:1.8; }
.dl-proof-fallback { margin-top:18px; font-size:16px; }
.dl-proof-fallback a { display:inline-block; margin-right:16px; text-decoration:underline; }
.dl-proof-dialog { position:fixed; inset:0; width:min(1200px,calc(100vw - 32px)); max-width:none; height:min(900px,calc(100vh - 32px)); height:min(900px,calc(100dvh - 32px)); max-height:none; margin:auto; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--white); color:var(--ink); overflow:hidden; }
.dl-proof-dialog[open] { display:flex; flex-direction:column; }
.dl-proof-dialog::backdrop { background:rgba(0,0,0,.72); }
.dl-proof-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 20px; border-bottom:1px solid var(--line); }
.home-page .dl-proof .dl-proof-dialog-title { font-family:inherit; font-size:19px; line-height:1.5; letter-spacing:-.2px; font-weight:600; }
.dl-proof-close { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:6px 10px; border-radius:5px; background:var(--soft); white-space:nowrap; font-size:15px; font-weight:500; }
.dl-proof-close>span:last-child { font-size:26px; line-height:1; }
.dl-proof-close:hover { color:var(--proof-accent-ink); }
.dl-proof-zoom-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 20px; background:var(--white); }
.dl-proof-zoom-controls button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:5px; background:var(--white); font-size:21px; line-height:1.2; }
.dl-proof-zoom-controls button:hover { background:var(--soft); }
.dl-proof-zoom-controls button:disabled { color:var(--muted); opacity:.45; cursor:default; }
.dl-proof-zoom-controls .dl-proof-fit { font-size:15px; margin-left:8px; }
.dl-proof-zoom-controls output { min-width:55px; text-align:center; font-size:14px; font-variant-numeric:tabular-nums; }
.dl-proof-zoom-controls p { font-size:14px; line-height:1.6; color:var(--muted); margin-left:auto; }
.dl-proof-image-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; background:var(--soft); scroll-behavior:auto; }
.dl-proof-image-scroll:focus-visible { outline-offset:-4px; }
.dl-proof-image-scroll img { display:block; max-width:none; height:auto; margin-inline:auto; user-select:none; }
.dl-proof .dl-proof-dialog-caption { padding:10px 20px; border-top:1px solid var(--line); font-size:13px; line-height:1.7; color:var(--muted); }
/* Keep the English Hero on the same single GitHub CTA agreed for the overview. */
.home-page .hero .dl-proof-github-cta { min-height:52px; padding:13px 23px; border:2px solid var(--orange); background:var(--orange); color:var(--white); font-size:17px; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.home-page .hero .dl-proof-github-cta:is(:hover,:focus-visible) { background:transparent; color:var(--orange); border-color:var(--orange); }
@media(max-width:1099px) {
  .dl-proof-grid { gap:28px; }
  .dl-proof-step { padding:16px 12px; gap:13px; }
  .dl-proof-step-label { font-size:19px; }
}
@media(max-width:860px) {
  .home-page .dl-proof { padding-block:58px; }
  .dl-proof-head { margin-bottom:28px; }
  .home-page .dl-proof .dl-proof-title { font-size:30px; line-height:1.45; }
  .dl-proof-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .dl-proof-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; border:0; }
  .dl-proof-steps li { display:flex; }
  .dl-proof-step { align-items:center; padding:13px 12px; border:1px solid var(--line); border-radius:5px; min-height:64px; gap:10px; }
  .dl-proof-step[aria-selected=true] { border-color:var(--orange); box-shadow:inset 0 -2px var(--orange); }
  .dl-proof-step-label { font-size:16px; line-height:1.5; letter-spacing:-.15px; word-break:keep-all; overflow-wrap:break-word; }
  .dl-proof-step-description { display:none; }
  .dl-proof-panel { display:flex; flex-direction:column; }
  .dl-proof-mobile-copy { display:block; margin-bottom:20px; }
  .home-page .dl-proof .dl-proof-mobile-copy h3 { font-family:inherit; font-size:21px; line-height:1.55; font-weight:600; letter-spacing:-.3px; margin-bottom:8px; }
  .dl-proof-mobile-copy p { font-size:17px; color:var(--muted); line-height:1.8; }
  .dl-proof-figure { margin-top:auto; }
  .dl-proof-capture { height:360px; }
  .dl-proof-capture img { width:max(100%,620px); }
  .dl-proof-capture--connect img { width:max(100%,600px); }
  .dl-proof-capture--process img { width:max(100%,560px); }
  .dl-proof-dialog-header { padding:10px 14px; gap:14px; }
  .dl-proof-zoom-controls { padding:8px 14px; }
  .dl-proof-zoom-controls p { width:100%; margin:2px 0 0; }
}
@media(max-width:479px) {
  .dl-proof-head { margin-bottom:24px; }
  .home-page .dl-proof .dl-proof-title { font-size:29px; line-height:1.4; letter-spacing:-.6px; }
  .dl-proof .dl-proof-lead { font-size:17px; }
  .dl-proof .dl-proof-relationship { font-size:16px; }
  .dl-proof-step { padding:11px 9px; gap:8px; }
  .dl-proof-step-number { width:19px; font-size:13px; }
  .dl-proof-step-label { font-size:15px; }
  .dl-proof-window-bar { padding-inline:12px; gap:10px; font-size:12px; }
  .dl-proof-window-footer { padding-inline:12px; gap:4px 12px; }
  .dl-proof-window-footer>a { font-size:14px; }
  .dl-proof-dialog { width:calc(100vw - 16px); height:calc(100vh - 16px); height:calc(100dvh - 16px); border-radius:10px; }
  .home-page .dl-proof .dl-proof-dialog-title { font-size:16px; }
  .dl-proof-close { padding-inline:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .dl-proof *, .hero .dl-proof-github-cta { transition:none!important; scroll-behavior:auto!important; }
}