.pd {
  font-family: var(--font-brand-pixel);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga" off;   
  font-variant-ligatures: none;        
  background-color: var(--brand-surface-ground);
  color: var(--brand-surface-fg);
  min-height: 100vh;
  overflow-x: clip;                    

  
  --docs-rail: 1;
}


.pd-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2;
  padding: 8px 12px; font-size: 13px; letter-spacing: 0.02em;
  color: var(--brand-surface-fg); background: var(--brand-card-bg);
  box-shadow: inset 0 0 0 1px var(--brand-card-edge);
  border-radius: 8px; text-decoration: none;
}
.pd-skip:focus-visible { left: clamp(20px, 4vw, 64px); top: 12px; outline: 1px solid var(--brand-accent); outline-offset: 4px; }



.pd-grid {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  padding-inline: clamp(20px, 4vw, 64px);
  padding-top: clamp(32px, 4vw, 72px);   
  padding-bottom: 0;
  width: 100%;
  min-width: 0;
  max-width: 1512px;
  margin-inline: auto;

  
  --pd-col: calc((min(100vw, 1512px) - 2 * clamp(20px, 4vw, 64px)) / 15);

  
  --pd-rail-x: calc(-1 * var(--pd-col) / 2);
}
.pd-grid > * { min-width: 0; }           

.pd-side { grid-column: 1 / span 3; position: sticky; top: clamp(24px, 3vw, 56px);
           align-self: flex-start; display: flex; flex-direction: column; gap: 18px;
           padding-bottom: 64px; }
.pd-main { grid-column: 5 / span 7; padding-bottom: clamp(80px, 12vw, 180px); }
.pd-toc  { grid-column: 13 / span 3; position: sticky; top: clamp(24px, 3vw, 56px);
           align-self: flex-start; max-height: calc(100vh - 120px); overflow-y: auto; }


@media (max-width: 1200px) {
  .pd-toc  { display: none; }
  .pd-main { grid-column: 5 / span 11; }
}


@media (max-width: 900px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-grid > * { grid-column: 1 / -1 !important; }
  .pd-rail { display: none; }
  .pd-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 12px;
             align-items: center; padding-bottom: 24px; margin-bottom: 24px;
             border-bottom: var(--brand-hairline) solid var(--brand-rule-soft); }
  
  .pd-search { align-self: auto; flex: 1 1 auto; min-width: 0; }
}






.pd-search { position: relative; display: flex; align-items: center;
             justify-content: space-between; gap: 12px;
             align-self: stretch;
             padding: 6px 10px; border-radius: 8px;
             font-size: 13px; line-height: 1.4; letter-spacing: 0.02em;
             text-decoration: none; color: var(--brand-surface-fg-muted);
             background: var(--brand-card-bg);
             box-shadow: inset 0 0 0 1px var(--brand-card-edge);
             transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }

.pd-kbd { color: var(--brand-surface-fg-muted); font-size: 13px; letter-spacing: 0.02em; }
@media (hover: none) { .pd-kbd { display: none; } }

@media (min-width: 901px) { .pd-search { display: none; } }

.pd-search::before, .pd-copy::before, .pd-copy-md::before, .pd-stow::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: max(100%, 40px); height: max(100%, 40px);
  transform: translate(-50%, -50%);
}
.pd-search:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 4px; }




.pd-link { display: flex; align-items: center; gap: 10px; padding: 3px 0;   
           font-size: 14px; letter-spacing: 0.02em; line-height: 1.3;
           text-decoration: none; color: var(--brand-surface-fg);
           transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }


.pd-link[aria-current="page"] { color: var(--brand-surface-fg); }


.pd-mark { display: inline-block; width: 2px; height: 12px; flex-shrink: 0;
           background: var(--brand-accent); opacity: 0;
           transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1); }
.pd-link[aria-current="page"] .pd-mark { opacity: 1; }
@media (hover: hover) and (pointer: fine) {          
  .pd-link:hover { color: var(--brand-accent); }     
  
  .pd-search:hover { color: var(--brand-accent); }
}
.pd-link:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .pd-mark, .pd-link, .pd-search { transition: none; }
}


.pd-gauge { display: none; }

.pd--gauge { --pd-edge: clamp(16px, 2.4vw, 40px); }
  .pd--gauge .pd-gauge {
    display: flex; flex-direction: column; gap: 8px;
    padding-block: 8px;
    overflow-y: auto;
    
    overflow-x: clip;
    max-height: calc(100vh - clamp(24px, 3vw, 56px) - 150px); 
    
    max-height: calc(100svh - 96px - env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    
  }
  
  .pd--gauge .pd-gauge[data-scrolls] {
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, var(--brand-surface-fg) 28px, var(--brand-surface-fg) calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom,
      transparent 0, var(--brand-surface-fg) 28px, var(--brand-surface-fg) calc(100% - 32px), transparent 100%);
  }
  
  
  .pd-etch   { height: 1px; width: 32px; flex-shrink: 0; background: var(--brand-rule-soft); }
  .pd-row  { display: flex; align-items: center; gap: 10px; height: 1px;
             overflow: visible; position: relative; text-decoration: none; }
  .pd-etch-g { height: 1px; width: 32px; flex-shrink: 0; background: var(--brand-diagram-line); }
  .pd-row .pd-mark { position: static; display: block; width: 32px; height: 1px;
                     flex-shrink: 0; opacity: 1; background: var(--brand-rule);
                     transition: background-color 180ms cubic-bezier(0.2, 0, 0, 1); }
  .pd-row-lbl { font-size: 13px; line-height: 1; letter-spacing: 0.01em;
                white-space: nowrap; color: var(--brand-surface-fg-muted); }
  .pd-row--g .pd-row-lbl { font-size: 12px; letter-spacing: 0.02em;
                           color: var(--brand-surface-fg); }
  
  .pd-row--cur .pd-row-lbl { color: var(--brand-surface-fg); }
  
  .pd-link[aria-current="page"] .pd-mark { background: var(--brand-accent); }
  
  .pd-row.pd-link::after { content: ''; position: absolute; left: 0; right: 0;
                           top: -13px; bottom: -13px; }
  
  @media (hover: hover) and (pointer: fine) {
    .pd--gauge .pd-link:hover .pd-mark { background: var(--brand-accent); }
  }
  .pd--gauge .pd-link:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 12px; }
  @media (prefers-reduced-motion: reduce) {
    .pd-row .pd-mark { transition: none; }
  }

  
  
  .pd--gauge .pd-stowbar { position: fixed; z-index: 6;
                           
                           visibility: visible;
                           
                           top: clamp(18px, 2.2vw, 40px);
                           left: calc(var(--pd-edge) - 6px);
                           display: flex; align-items: center; gap: 8px; }
  
  .pd--gauge .pd-toc { display: none; }
  .pd--gauge .pd-rail { display: none; }
  
  .pd--gauge .pd-prose h2::before, .pd--gauge .pd-prose h2::after { content: none; }
  .pd--gauge .pd-main { grid-column: 1 / -1; }
  
  @media (min-width: 901px) {
    .pd--gauge .pd-main {
      justify-self: start;
      width: clamp(640px, 42vw, 780px);
      margin-left: max(calc((100% - clamp(640px, 42vw, 780px)) / 2),
                       calc(var(--pd-edge) + 296px - clamp(20px, 4vw, 64px)));
    }
  }
  .pd--gauge .pd-prose > p, .pd--gauge .pd-prose > ul, .pd--gauge .pd-prose > ol,
  .pd--gauge .pd-prose .pd-callout-body { max-width: 680px; }
  .pd--gauge .pd-side { position: fixed; z-index: 5;
                         top: calc(clamp(18px, 2.2vw, 40px) + 40px);
                         left: var(--pd-edge);
                         width: 272px; padding-top: 4px;
                         
                         flex-direction: column; align-items: stretch; gap: 18px;
                         border-bottom: 0; margin: 0; padding-bottom: 24px;
                         background: var(--brand-surface-ground); }
  
  
  .pd-stow { position: relative; width: 28px; height: 28px; padding: 0;
            background: transparent; border: none; border-radius: 6px;
            cursor: pointer; color: var(--brand-surface-fg-muted);
            transition: background-color 250ms cubic-bezier(.23,.88,.26,.92); }
  @media (hover: hover) and (pointer: fine) {
    .pd-stow:hover { background-color: var(--brand-rule-soft); }
  }
  .pd-stow:active { background-color: var(--brand-rule); }
  .pd-stow:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 2px; }
  
  .pd-stow-i { position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; }
  .pd-stow-i--d { display: none; }
  .dark .pd-stow-i--l { display: none; }
  .dark .pd-stow-i--d { display: block; }
  .pd-stow-line { position: absolute; left: 3px; top: 4px; width: 1.5px; height: 8px;
                  border-radius: 999px; background: currentColor;
                  transform-origin: center;
                  
                  will-change: transform;
                  transition: transform 700ms linear(0.0003 0.2%, 0.047 2.7%, 0.195 6%, 0.4324 10%, 0.6673 14%, 0.8593 18%, 0.9931 22%, 1.082 27%, 1.1049 32%, 1.0838 38%, 1.0401 45%, 1.0066 52%, 0.9904 60%, 0.9913 70%, 0.9985 82%, 1.001 100%); }
  .pd-stow-line--d { top: 3px; height: 10px; border-radius: 1px;
                     background: var(--brand-surface-ground); }
  
  .pd-stow-line { transform: translateX(2px) scaleY(1.6); }
  .pd--nav-closed .pd-stow-line { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .pd-stow, .pd-stow-line { transition: none; }
  }
  
  .pd-stow-crumb { font-size: 13px; line-height: 1.4; letter-spacing: 0.02em;
                  white-space: nowrap; color: var(--brand-surface-fg-muted);
                  opacity: 0; pointer-events: none;
                  transition: opacity 250ms cubic-bezier(.23,.88,.26,.92); }
  .pd--nav-closed .pd-stow-crumb { opacity: 1; transition-delay: 150ms; }

  
  
  .pd--nav-closed .pd-side { visibility: hidden; }
  .pd--nav-closed.pd--anim .pd-side { transition: visibility 0s 350ms; }
  .pd--anim .pd-side { transition: visibility 0s; }
  .pd--nav-closed :is(.pd-search, .pd-gauge) {
    translate: -340px 0; visibility: hidden; }
  .pd--nav-closed.pd--anim :is(.pd-search, .pd-gauge) {
    transition: translate 350ms cubic-bezier(.23,.88,.26,.92), visibility 0s 350ms; }
  .pd--anim :is(.pd-search, .pd-gauge) {
    transition: translate 350ms cubic-bezier(.23,.88,.26,.92), visibility 0s; }
  @media (prefers-reduced-motion: reduce) {
    .pd--anim .pd-grid, .pd-stow, .pd-stow-line, .pd-stow-crumb, .pd--anim .pd-side, .pd--anim .pd-main,
    .pd--anim :is(.pd-search, .pd-gauge) { transition: none; }
  }

@media (max-width: 900px) {
  .pd--gauge .pd-grid { padding-top: calc(clamp(18px, 2.2vw, 40px) + 52px); }
  
  .pd--anim .pd-main { transition: translate 350ms cubic-bezier(.23,.88,.26,.92); }
  
  .pd--gauge:not(.pd--nav-closed) .pd-main { translate: 100vw 0; }

  
  .pd--nav-exit.pd--anim .pd-main,
  .pd--nav-exit.pd--anim :is(.pd-search, .pd-gauge) {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .pd--gauge .pd-stow-crumb { opacity: 1; transition: none; }
  
  .pd--gauge .pd-search { display: none; }
  .pd--gauge .pd-side { background: none; }
}



.pd-prose > p, .pd-prose > ul, .pd-prose > ol, .pd-prose .pd-callout-body { max-width: 620px; }
.pd-prose > figure, .pd-prose > .pd-table-wrap, .pd-prose > hr, .pd-prose > .pd-head,
.pd-prose > .pd-cards { max-width: none; }


.pd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px; margin: 0 0 8px; }
.pd-prose a.pd-card { display: flex; flex-direction: column; gap: 4px;
                      padding: 14px 16px; border-radius: 12px;
                      background: var(--brand-card-bg);
                      box-shadow: inset 0 0 0 1px var(--brand-card-edge);
                      text-decoration: none; }
.pd-card-t { font-size: 16px; line-height: 1.4; color: var(--brand-surface-fg);
             transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }
.pd-card-d { font-size: 13px; line-height: 1.5; color: var(--brand-surface-fg-muted);
             text-wrap: pretty; }   
@media (hover: hover) and (pointer: fine) {
  .pd-card:hover .pd-card-t { color: var(--brand-accent); }
}
.pd-prose a.pd-card:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pd-card-t { transition: none; } }
@media (max-width: 700px) { .pd-cards { grid-template-columns: 1fr; } }


.pd-prose .pd-kicker { margin: 0 0 10px; font-size: 13px; line-height: 1.4;
                       letter-spacing: 0.02em; color: var(--brand-surface-fg-muted); }


.pd-head { display: flex; flex-wrap: wrap; align-items: flex-start;
           justify-content: space-between; gap: 12px 24px; margin: 0 0 24px; }
.pd-prose h1 { margin: 0; font-size: clamp(28px, 7vw, 36px); line-height: 1.1;
               letter-spacing: -0.02em;
               color: var(--brand-surface-fg); text-wrap: balance;
               overflow-wrap: break-word;
               
               -webkit-text-stroke: 0.4px var(--brand-surface-fg);
               paint-order: stroke fill; }

.pd-prose h2 { position: relative; margin: 48px 0 20px;
               font-size: clamp(20px, 2vw, 24px); line-height: 1.33;   
               letter-spacing: -0.01em; color: var(--brand-surface-fg);
               text-wrap: balance; scroll-margin-top: 96px; }          

.pd-prose h3 { margin: 32px 0 12px; font-size: 18px; line-height: 1.3;
               letter-spacing: -0.01em; color: var(--brand-surface-fg);
               text-wrap: balance; scroll-margin-top: 96px; }
.pd-prose p  { margin: 0 0 16px; font-size: 16px; line-height: 1.55;   
               color: var(--brand-surface-fg); text-wrap: pretty;
               overflow-wrap: break-word; }   


.pd-prose strong { font-weight: 400; color: var(--brand-surface-fg); }
.pd-prose em     { font-style: normal; color: var(--brand-surface-fg); }


.pd-prose a { color: var(--brand-surface-fg); text-decoration: underline;
              text-underline-offset: 3px;
              text-decoration-thickness: 1px;   
              text-decoration-color: var(--brand-diagram-line);   
              transition: color 180ms cubic-bezier(0.2, 0, 0, 1),
                          text-decoration-color 180ms cubic-bezier(0.2, 0, 0, 1); }
@media (hover: hover) and (pointer: fine) {
  .pd-prose a:hover { color: var(--brand-accent); text-decoration-color: var(--brand-accent); }
}
.pd-prose a:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pd-prose a { transition: none; } }

.pd-prose hr { border: 0; border-top: var(--brand-hairline) solid var(--brand-rule); margin: 40px 0; }


.pd-prose ul { margin: 0 0 16px; padding: 0 0 0 24px; list-style: none;
               display: flex; flex-direction: column; gap: 8px; }
.pd-prose ul > li { position: relative; font-size: 16px; line-height: 1.55;
                    color: var(--brand-surface-fg); text-wrap: pretty;
                    overflow-wrap: break-word; }   
.pd-prose ul > li::before { content: ''; position: absolute; left: -18px; top: 0.65em;
                            width: 8px; height: 1px; background: var(--brand-surface-fg-muted); }

.pd-prose ol { margin: 0 0 16px; padding: 0 0 0 24px; list-style: decimal; }
.pd-prose ol > li { font-size: 16px; line-height: 1.55; color: var(--brand-surface-fg);
                    text-wrap: pretty; overflow-wrap: break-word; }
.pd-prose ol > li + li { margin-top: 8px; }
.pd-prose li > p:last-child { margin-bottom: 0; }
.pd-prose li ul, .pd-prose li ol { margin-top: 8px; margin-bottom: 0; }


.pd-prose ul > li.pd-task { list-style: none; }
.pd-prose ul > li.pd-task::before { content: none; }
.pd-task-box { color: var(--brand-surface-fg-muted); margin-right: 8px;
               font-variant-numeric: tabular-nums; }


.pd-quote { margin: 20px 0; padding: 2px 0 2px 16px;
            border-left: 1px solid var(--brand-diagram-line);
            color: var(--brand-surface-fg-muted); }



.pd-prose .pd-copy-md { position: relative; flex-shrink: 0; display: inline-flex;
              align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px;
              background: var(--brand-card-bg);
              box-shadow: inset 0 0 0 1px var(--brand-card-edge);
              font-size: 13px; line-height: 1.4;
              letter-spacing: 0.02em; text-decoration: none;
              color: var(--brand-surface-fg-muted);
              transition: color 180ms cubic-bezier(0.2, 0, 0, 1),
                          scale 140ms cubic-bezier(0.2, 0, 0, 1); }
@media (prefers-reduced-motion: no-preference) {
  .pd-prose .pd-copy-md:active { scale: 0.96; }
}
.pd-cmi { position: relative; width: 13px; height: 13px; flex-shrink: 0; }
.pd-cmi::before, .pd-cmi::after {
  content: ''; position: absolute; inset: 0; background: currentColor;
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1),
              transform 180ms cubic-bezier(0.2, 0, 0, 1),
              filter 180ms cubic-bezier(0.2, 0, 0, 1);
}
.pd-cmi::before {
  
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 9h12v12H9z' fill='black'/%3E%3Cpath d='M3 3h12v4H7v8H3z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pd-cmi::after {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5l3-3 4 4L19 5l3 3L10.5 19.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: scale(0.25); filter: blur(4px);
}
.pd-prose .pd-copy-md[data-copied] .pd-cmi::before { opacity: 0; transform: scale(0.25); filter: blur(4px); }
.pd-prose .pd-copy-md[data-copied] .pd-cmi::after  { opacity: 1; transform: scale(1); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .pd-cmi::before, .pd-cmi::after { transition: none; }
}



.pd-rail { grid-column: 4 / span 1; justify-self: center; width: 1px;
           background: var(--brand-rule-soft); opacity: var(--docs-rail); }

.pd-prose h2::before {
  content: ''; position: absolute;
  left: calc(var(--pd-rail-x) - 6px);       
  top: 0.62em; width: 12px; height: 1px;
  background: var(--brand-diagram-line);
  opacity: var(--docs-rail);
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1);
}

.pd-prose h2[data-current="true"]::before { opacity: 0; }

.pd-prose h2::after {
  content: ''; position: absolute;
  left: calc(var(--pd-rail-x) - 1px);       
  top: calc(0.62em - 5.5px); width: 2px; height: 12px;
  background: var(--brand-accent); opacity: 0;
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1);
}

.pd-prose h2[data-current="true"]::after { opacity: var(--docs-rail); }
@media (prefers-reduced-motion: reduce) {
  .pd-prose h2::before, .pd-prose h2::after { transition: none; }
}
@media (max-width: 900px) { .pd-prose h2::before, .pd-prose h2::after { display: none; } }





.pd-code { margin: 20px 0; position: relative;
           background: var(--brand-code-bg);
           box-shadow: inset 0 0 0 1px var(--brand-card-edge);
           border-radius: 8px;
           overflow: clip; }

.pd-code pre { margin: 0; font-family: var(--font-brand-pixel);
               font-size: 14px; line-height: 1.6;
               color: var(--brand-surface-fg-muted); background: transparent;
               padding: 16px;
               white-space: pre-wrap; overflow-wrap: anywhere; }

.pd-code .cx-k { color: var(--brand-accent); }

.pd-code pre code { font-family: inherit; font-size: inherit; }

@media (max-width: 700px) {
  .pd-code pre { padding: 14px; }
}



.pd-code .pd-c { color: var(--brand-surface-fg-muted); }


.pd-code .pd-copy { position: absolute; top: 10px; right: 12px; z-index: 1; }
.pd-copy { position: relative; padding: 0; background: transparent; border: none;
           cursor: pointer; font-family: var(--font-brand-pixel);
           font-size: 13px; line-height: 1.4; letter-spacing: 0.02em;
           color: var(--brand-surface-fg-muted);
           transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }
@media (hover: hover) and (pointer: fine) {
  .pd-copy:hover { color: var(--brand-surface-fg); }
  .pd-prose .pd-copy-md:hover { color: var(--brand-surface-fg); }   
}

.pd-copy[data-copied] { color: var(--brand-accent); }
.pd-prose .pd-copy-md[data-copied] { color: var(--brand-accent); }
.pd-copy:focus-visible, .pd-copy-md:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { .pd-copy, .pd-prose .pd-copy-md { transition: none; } }


.pd-prose :not(pre) > code { font-family: var(--font-brand-pixel); font-size: 0.92em;
                             background: var(--brand-card-bg);
                             box-shadow: inset 0 0 0 1px var(--brand-card-edge);
                             border-radius: 4px;      
                             padding: 1px 5px; }



.pd-callout { margin: 20px 0; padding: 2px 0 2px 16px;
              border-left: 1px solid var(--brand-diagram-line); }
.pd-callout-label { font-size: 13px; line-height: 1.4; letter-spacing: 0.02em;
                    color: var(--brand-surface-fg-muted); margin: 0 0 4px; }
.pd-callout-body { font-size: 16px; line-height: 1.55; color: var(--brand-surface-fg);
                   text-wrap: pretty; }
.pd-callout-body > *:last-child { margin-bottom: 0; }



.pd-table-wrap { margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pd-table { border-collapse: collapse; width: 100%;
            font-variant-numeric: tabular-nums; }   
.pd-table th { text-align: left; padding: 8px 14px 8px 0;
               font-size: 13px; line-height: 1.4; letter-spacing: 0.02em;
               font-weight: 400;                    
               color: var(--brand-surface-fg-muted);
               border-bottom: var(--brand-hairline) solid var(--brand-rule); white-space: nowrap; }
.pd-table td { padding: 8px 14px 8px 0; font-size: 14px; line-height: 1.5;
               color: var(--brand-surface-fg);
               border-bottom: var(--brand-hairline) solid var(--brand-rule-soft); }  
.pd-table th:last-child, .pd-table td:last-child { padding-right: 0; }

.pd-table .pd-ta-r { text-align: right; }
.pd-table .pd-ta-c { text-align: center; }



.pd-table-wide { margin-left: 0 !important; margin-right: -102px !important; }
@media (max-width: 1100px) { .pd-table-wide { margin-right: 0 !important; } }



.pd-toc-label { font-size: 13px; line-height: 1.4; letter-spacing: 0.02em;
                color: var(--brand-surface-fg-muted); margin: 0 0 8px; }
.pd-toc a { display: flex; align-items: center; gap: 10px; padding: 3px 0;
            font-size: 13px; line-height: 1.4; letter-spacing: 0.02em;
            text-decoration: none; color: var(--brand-surface-fg-muted);
            transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }

.pd-toc a[data-current="true"] { color: var(--brand-surface-fg); }
.pd-toc a[data-current="true"] .pd-mark { opacity: 1; }
.pd-toc .pd-l3 { padding-left: 12px; }
@media (hover: hover) and (pointer: fine) { .pd-toc a:hover { color: var(--brand-accent); } }
.pd-toc a:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pd-toc a { transition: none; } }



.pd-pager { display: flex; justify-content: space-between; gap: 24px;
            margin-top: 64px; padding-top: 24px;
            border-top: var(--brand-hairline) solid var(--brand-rule-soft); }

.pd-pager a { display: inline-flex; flex-direction: column; align-items: flex-start;
              gap: 2px; min-height: 40px; justify-content: center;
              text-decoration: none;
              transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }
.pd-pager .pd-pager-next { margin-left: auto; align-items: flex-end;
                           text-align: right; }  
.pd-pager-k { font-size: 13px; line-height: 1.4; letter-spacing: 0.02em;
              color: var(--brand-surface-fg-muted); }
.pd-pager-t { font-size: 16px; line-height: 1.4; color: var(--brand-surface-fg);
              transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }
.pd-pager .pd-arrow { color: var(--brand-diagram-line); }   
@media (hover: hover) and (pointer: fine) {
  .pd-pager a:hover .pd-pager-t { color: var(--brand-accent); }
}
.pd-pager a:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pd-pager a, .pd-pager-t { transition: none; } }


.pd-foot { display: flex; flex-wrap: wrap; justify-content: space-between;
           align-items: center; gap: 4px 24px;
           margin-top: 96px; padding: 10px 0 40px;
           border-top: var(--brand-hairline) solid var(--brand-rule-soft);
           font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; }
.pd-foot-home { display: inline-flex; align-items: center; min-height: 44px;
                font-size: 14px; color: var(--brand-surface-fg-muted);
                text-decoration: none;
                transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }
.pd-foot-x { display: inline-flex; align-items: center; gap: 24px; }
.pd-foot-a { display: inline-flex; align-items: center; min-height: 44px;
             color: var(--brand-surface-fg-muted); text-decoration: none;
             transition: color 180ms cubic-bezier(0.2, 0, 0, 1); }
@media (hover: hover) and (pointer: fine) {
  .pd-foot-a:hover, .pd-foot-home:hover { color: var(--brand-accent); }
}
.pd-foot-a:focus-visible, .pd-foot-home:focus-visible {
  outline: 1px solid var(--brand-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pd-foot-a, .pd-foot-home { transition: none; } }



:is(.pd-code pre, .pd-table-wrap, .pd-toc, .pd-gauge) {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-rule) transparent;
}
:is(.pd-code pre, .pd-table-wrap, .pd-toc, .pd-gauge)::-webkit-scrollbar { width: 10px; height: 10px; }
:is(.pd-code pre, .pd-table-wrap, .pd-toc, .pd-gauge)::-webkit-scrollbar-track { background: transparent; }
:is(.pd-code pre, .pd-table-wrap, .pd-toc, .pd-gauge)::-webkit-scrollbar-thumb {
  background: var(--brand-rule); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
:is(.pd-code pre, .pd-table-wrap, .pd-toc, .pd-gauge)::-webkit-scrollbar-thumb:hover {
  background: var(--brand-diagram-line);
  border: 3px solid transparent; background-clip: content-box;
}
:is(.pd-code pre, .pd-table-wrap, .pd-toc, .pd-gauge)::-webkit-scrollbar-corner { background: transparent; }


.pd ::selection { background-color: #FF6B35 !important; color: #0C0C0B !important; }