.top{position:relative;isolation:isolate;overflow:hidden;color:var(--on-dock);background:var(--stage-grad);padding:clamp(24px,4vw,48px) 0 clamp(40px,6vw,72px);border-radius:0 0 32px 32px;margin-bottom:clamp(28px,4vw,48px)}
.top::before,.top::after{content:"";position:absolute;z-index:-1;width:min(720px,110vw);aspect-ratio:1;border-radius:50%;pointer-events:none}
.top::before{top:-60%;right:-18%;background:radial-gradient(closest-side,color-mix(in srgb,var(--toner) 34%,transparent),color-mix(in srgb,var(--toner) 14%,transparent) 45%,transparent)}
.top::after{top:-40%;left:-30%;background:radial-gradient(closest-side,color-mix(in srgb,var(--dock-aurora) 22%,transparent),color-mix(in srgb,var(--dock-aurora) 8%,transparent) 45%,transparent)}
.grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background:radial-gradient(circle,#fff 0 3px,transparent 3.5px) 14px 6px/24px 24px repeat-y,radial-gradient(circle,#fff 0 3px,transparent 3.5px) calc(100% - 14px) 6px/24px 24px repeat-y}
.title{position:relative}
.crumbs{margin-bottom:12px;font-size:.8125rem;font-weight:600;color:var(--on-dock-muted)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dock-muted);text-decoration:none}
.crumbs a:hover{color:var(--toner)}
.crumbs li+li::before{content:"/";margin:0 8px;opacity:.5}
.crumbs [aria-current]{color:var(--on-dock)}
.title h1{font-size:clamp(2rem,1.2rem + 3.6vw,3.5rem);letter-spacing:-.04em;line-height:1.04;max-width:17em;color:var(--on-dock)}
.lede{margin-top:18px;max-width:38em;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;color:var(--on-dock-muted)}
.by{margin-top:16px;max-width:46em;font-size:.8125rem;line-height:1.6;color:var(--on-dock-muted)}
.by code{background:rgba(255,255,255,.1);color:var(--on-dock)}
.upd{display:inline-block;margin-left:6px;font-weight:700;color:var(--toner-soft)}
.sum{position:relative;max-width:720px;margin:0 0 2.2em;padding:24px 24px 24px 30px;border-radius:20px;background:var(--primary-container);color:var(--on-primary-container);overflow:hidden}
.sum::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--toner),var(--primary))}
.sum h2{margin:0 0 12px;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.sum ul{display:grid;gap:12px}
.sum li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem;line-height:1.55}
.sum li .ic{margin-top:3px;width:18px;height:18px;stroke-width:2.25}
.doc ol.gsteps,.gsteps{counter-reset:g;display:grid;gap:0;margin-top:1.4em;padding:0;list-style:none}
.doc .gsteps>li,.gsteps>li{position:relative;counter-increment:g;padding:0 0 28px 60px;margin:0}
.gsteps>li::before{content:counter(g);position:absolute;left:0;top:0;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--dock);color:var(--toner);font:500 .9375rem/1 var(--mono)}
.gsteps>li:not(:last-child)::after{content:"";position:absolute;left:19px;top:48px;bottom:8px;border-left:2px dashed var(--outline);opacity:.55}
.gsteps h3{margin:0 0 4px;padding-top:7px}
.gshot{margin:2em 0;max-width:340px}
.gshot img{width:100%;border-radius:26px;box-shadow:0 0 0 6px var(--p-ink-900),0 28px 48px -22px rgba(4,12,16,.55)}
.gshot figcaption{margin-top:18px;font-size:.8125rem;color:var(--muted)}
.note{padding:16px 20px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border),inset 4px 0 0 var(--outline);font-size:.9375rem;line-height:1.65;color:var(--muted)}
.note strong{color:var(--fg)}
.related{max-width:720px;padding:20px;border-radius:var(--r-card);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.related h2,.related h3{margin:0 0 8px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.related ul{list-style:none;padding:0;margin:0}
.related a{display:flex;align-items:center;min-height:44px;font-weight:700;font-size:.9375rem;text-decoration:none;color:var(--fg)}
.related a:hover{color:var(--primary)}
.related li+li{border-top:1px solid var(--border)}
.related ul.rel{display:block}
.related.doc{margin-top:2.4em}
@media(max-width:759.98px){
  .ptbl th,.ptbl td{padding:10px 8px;font-size:.8125rem}
  .ptbl th:nth-child(3),.ptbl td:nth-child(3){display:none}
  .ptbl td:nth-child(2) code,.ptbl td:nth-child(2) .spec{font-size:.6875rem}
}