.pp { --pad: 128px; --hero-top: calc(var(--nav-safe) + var(--space-section));   
  --pp-line: rgba(12,15,23,.12); --pp-num: rgba(12,15,23,.32); overflow-x: clip; }
html[data-theme="dark"] .pp, html.dusk .pp { --pp-line: rgba(236,238,241,.12); --pp-num: rgba(236,238,241,.32); }
@media (max-width: 1199px) { .pp { --pad: 96px; } }
@media (max-width: 860px) { .pp { --pad: 72px; } }
:where(.pp) :where(h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote) { margin: 0; }   
:where(.pp) :where(ul, ol) { padding: 0; list-style: none; }
.pp-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }


.pp-eye { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-12); align-items: center; margin-bottom: var(--space-24); color: var(--color-text-muted); }
.pp-eye b { font-weight: inherit; color: var(--color-text); }
.pp-eye i { font-style: normal; opacity: .5; }


.pp-hero { padding: var(--hero-top) 0 var(--pad); }
.pp-hero-t { align-items: end; row-gap: var(--space-32); }
.pp-hero-h { grid-column: 1 / span 7; }
.pp-hero-s { grid-column: 9 / span 4; padding-bottom: .35em; }
.pp-hero-s .t-lead { color: var(--color-text-muted); }
.pp-hero-s .tlink { margin-top: var(--space-24); }
.pp-hero-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-24); margin-top: var(--space-32); }
.pp-hero-go .tlink { margin-top: 0; }
.pp-llm { margin-top: var(--space-16); max-width: 30em; color: var(--color-text); }
.pp-hero .pp-media { margin-top: var(--space-64); }

.pp-hero.pp-split .pp-hero-t { align-items: center; }
.pp-hero.pp-split .pp-hero-h { grid-column: 1 / span 6; }
.pp-hero.pp-split .pp-hero-h .t-lead { margin-top: var(--space-32); max-width: 30em; color: var(--color-text-muted); }
.pp-hero.pp-split .pp-plate { grid-column: 7 / span 6; justify-self: end; margin: 0; }


.pp-sec { padding: var(--pad) 0; }
.pp-sec + .pp-sec, .pp-hero + .pp-sec { border-top: 1px solid var(--color-rule); }
.pp-sh { align-items: end; row-gap: var(--space-24); }
.pp-sh-t { grid-column: 1 / span 6; }
.pp-sh-t.w { grid-column: 1 / span 8; }
.pp-sh-d { grid-column: 8 / span 5; padding-bottom: .3em; }
.pp-sh-t.w + .pp-sh-d { grid-column: 9 / span 4; }
.pp-sh-d .t-lead { color: var(--color-text-muted); }
.pp-sh-d .tlink { margin-top: var(--space-16); }
.pp-sh + * { margin-top: var(--space-64); }


.pp-media { position: relative; overflow: hidden; border-radius: var(--radius-media); background: var(--color-surface-placeholder); }
.pp-media > :is(img, video, picture), .pp-media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-media.r169 { aspect-ratio: 16 / 9; }
.pp-media.r21 { aspect-ratio: 2 / 1; }
.pp-media.r43 { aspect-ratio: 4 / 3; }
.pp-media.r45 { aspect-ratio: 4 / 5; }
.cro-hero > img { object-position: 50% 60%; }   
.pp-media.studio { background: var(--color-surface-studio); }   


.pp-win { overflow: hidden; border-radius: var(--radius-media); background: var(--color-surface-window); box-shadow: 0 0 0 1px var(--pp-line); }
.pp-win-bar { height: var(--window-bar-height); display: flex; align-items: center; gap: 6px; padding: 0 var(--space-12); border-bottom: 1px solid var(--pp-line); background: var(--color-surface-window-bar); }
.pp-win-bar i { width: var(--window-dot); height: var(--window-dot); border-radius: 50%; background: var(--window-dot-fill); }
.pp-win img { display: block; width: 100%; height: auto; }


.pp-plate { position: relative; width: 100%; max-width: var(--plate-w, 1200px); overflow: hidden; border-radius: var(--radius-media); }
.pp-plate .pl, .pp-plate .pl > img { display: block; width: 100%; height: auto; }
html[data-theme="light"] .pp .pl-d, html:not([data-theme="light"]) .pp .pl-l { display: none; }
.pp-plate-film { position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); overflow: hidden; }
.pp-plate-film video { width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); }

.pp-plate-film video, .pp-media.bw > :is(img, video) { filter: grayscale(1) contrast(1.06) sepia(.12) hue-rotate(180deg); }
.pp-plate.bench { --fx: 53.33%; --fy: 0; --fw: 46.67%; --fh: 100%; --fp: 44.8% 50%; }
@media (max-width: 860px) {
  .pp-plate, .pp-step-m.pp-plate { max-width: 352px; }
  
  .pp-plate.bench { --fx: 0; --fy: 0; --fw: 100%; --fh: 45%; --fp: 50% 50%; }
  .pp-plate.bench .pp-plate-film video { transform: scale(1.45); transform-origin: 40.3% 30.7%; }
}


.pp-steps { display: grid; row-gap: var(--space-96); }
.pp-step { align-items: start; row-gap: var(--space-24); }
.pp-step-t { grid-column: 1 / span 4; }
.pp-step-m { grid-column: 6 / span 7; min-width: 0; }
.pp-step-m.pp-plate { max-width: none; box-shadow: 0 0 0 1px var(--pp-line); }
.pp-win picture { display: block; }
.pp-num { display: block; margin-bottom: var(--space-16); font: var(--font-weight-regular) var(--font-size-label)/1.2 var(--font-mono); letter-spacing: .06em; color: var(--color-text-muted); }
.pp-step-t .t-h3 { max-width: 14em; }
.pp-step-t p { margin-top: var(--space-12); max-width: 24em; color: var(--color-text-muted); }


.pp-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--space-40); }
.pp-cols > li { padding-top: var(--space-24); border-top: 1px solid var(--color-rule); }
.pp-cols h3 { font-size: var(--font-size-heading); line-height: 1.3; letter-spacing: -.01em; color: var(--color-text); }
.pp-cols p { margin-top: var(--space-8); max-width: 26em; color: var(--color-text-muted); }
.pp-cols .tlink { margin-top: var(--space-16); }
.pp-cols.n2 { --n: 2; } .pp-cols.n3 { --n: 3; }

.pp-cards > li { padding-top: 0; border-top: 0; }
.pp-card-m { margin-bottom: var(--space-24); }
.pp-card-m.pp-media::before { content: ""; display: block; padding-top: calc(100% * 482 / 746 + var(--window-bar-height)); }
.pp-card-m.pp-media > img { position: absolute; inset: 0; }
.pp-slot { display: none; }



.pp-g1 { align-items: center; row-gap: var(--space-40); }
.pp-g1-t { grid-column: 1 / span 6; }
.pp-g1-m { grid-column: 8 / span 5; }
.pp-why { margin-top: var(--space-40); display: grid; row-gap: var(--space-16); }
.pp-why li { padding-top: var(--space-16); border-top: 1px solid var(--color-rule); color: var(--color-text-muted); max-width: 30em; }
.pp-why b { font-weight: inherit; color: var(--color-text); }
.pp-sub { margin-top: var(--space-96); }


.pp-quote { align-items: center; row-gap: var(--space-40); }
.pp-quote-t { grid-column: 1 / span 6; }
.pp-quote blockquote { font-size: var(--font-size-title); line-height: 1.12; letter-spacing: -.03em; color: var(--color-text); max-width: 14em; text-wrap: balance; }
.pp-quote blockquote .q-b { color: var(--color-text-muted); }
.pp-quote .t-attrib { margin-top: var(--space-24); font-size: var(--font-size-small); color: var(--color-text-muted); }
.pp-quote-c { display: flex; gap: var(--space-24); margin-top: var(--space-24); }
.pp-quote-c button { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--font-size-small); color: var(--color-text-muted); cursor: pointer; }
.pp-quote-c button:hover { color: var(--color-text); }
.pp-quote-m { grid-column: 8 / span 4; position: relative; }
.pp-quote-m .pp-media { width: min(100%, calc(78svh * 704 / 1080)); aspect-ratio: 704 / 1080; margin-left: auto; background: var(--color-surface-film); }
.pp-quote-m .pp-media video { object-position: 50% 24%; }
.pp-replay { position: absolute; left: var(--space-16); bottom: var(--space-16); width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(12,15,23,.56); color: #fff; cursor: pointer; }
.pp-replay[hidden] { display: none; }
.pp-replay svg { width: 16px; height: 16px; fill: currentColor; }


.pp-rec { overflow: hidden; padding: var(--space-32) var(--space-40) var(--space-24); border-radius: var(--radius-media); background: var(--color-surface-panel); box-shadow: 0 0 0 1px var(--pp-line); }
.pp-rows { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); line-height: 1.25; font-variant-numeric: tabular-nums; }
.pp-rows th { padding: 0 var(--space-16) var(--space-16) 0; text-align: left; vertical-align: bottom; font-weight: var(--font-weight-regular); font-size: var(--font-size-caption); line-height: 1.3; color: var(--color-text-muted); }
.pp-rows th small { display: block; font-size: inherit; opacity: .72; }
.pp-rows td { padding: var(--space-12) var(--space-16) var(--space-12) 0; border-top: 1px solid var(--color-rule); color: var(--color-text); white-space: nowrap; }
.pp-rows :is(th, td):last-child { padding-right: 0; }
.pp-rows td.v { color: var(--color-text-muted); }
.pp-rows tbody tr:nth-last-child(2) { opacity: .5; }
.pp-rows tbody tr:last-child { opacity: .2; }

.api #record .pp-sh { align-items: center; row-gap: var(--space-40); }
.api #record .pp-sh-t .t-lead { margin-top: var(--space-24); max-width: 30em; color: var(--color-text-muted); }
.api #record .pp-sh .pp-media { grid-column: 8 / span 5; }
@media (max-width: 1199px) { .api #record .pp-sh-t { grid-column: 1 / span 6; } .api #record .pp-sh .pp-media { grid-column: 7 / span 6; } }


.pp-code { overflow: hidden; border-radius: var(--radius-media); background: var(--color-surface-panel); box-shadow: 0 0 0 1px var(--pp-line); }
.pp-code-bar { display: flex; align-items: center; gap: var(--space-12); height: var(--window-bar-height); padding: 0 var(--space-16); border-bottom: 1px solid var(--pp-line); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.pp-code-bar .pp-win-dots { display: inline-flex; gap: 6px; } .pp-code-bar .pp-win-dots i { width: var(--window-dot); height: var(--window-dot); border-radius: 50%; background: var(--window-dot-fill); }
.pp-code-part + .pp-code-part { border-top: 1px solid var(--pp-line); }
.pp-code-k { padding: var(--space-16) var(--space-24) 0 56px; font: var(--font-weight-regular) var(--font-size-label)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.pp-code ol { counter-reset: ln; padding: var(--space-12) 0 var(--space-16); font: var(--font-weight-regular) var(--font-size-caption)/1.75 var(--font-mono); color: var(--color-text); }
.pp-code li { counter-increment: ln; position: relative; padding: 0 var(--space-24) 0 56px; white-space: pre-wrap; overflow-wrap: anywhere; }   
.pp-code li::before { content: counter(ln); position: absolute; left: 0; width: 40px; text-align: right; color: var(--pp-num); }
.pp-code .s { color: var(--color-text-muted); }   
.pp-api { align-items: start; row-gap: var(--space-40); }
.pp-api-t { grid-column: 1 / span 5; }
.pp-api-t p + p { margin-top: var(--space-16); }
.pp-api-t .t-lead { color: var(--color-text-muted); }
.pp-api-c { grid-column: 7 / span 6; min-width: 0; }


.pp-start .pp-cols li h3 { display: flex; gap: var(--space-12); align-items: baseline; }
.pp-start .pp-cols li h3 .pp-num { margin: 0; }
.pp-go { margin-top: var(--space-48); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) var(--space-32); }
.pp-go .pp-mail { font-size: var(--font-size-small); color: var(--color-text-muted); }
.pp-go .pp-mail a { color: var(--color-text); }


.pp-rel { padding: var(--pad) 0; border-top: 1px solid var(--color-rule); }
.pp-rel ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); row-gap: var(--space-24); }
.pp-rel a { display: block; padding-top: var(--space-24); border-top: 1px solid var(--color-rule); }
.pp-rel a b { display: block; font-weight: 500; font-size: var(--font-size-heading); line-height: 1.3; color: var(--color-text); }
.pp-rel a span { display: block; margin-top: var(--space-8); color: var(--color-text-muted); }
.pp-rel a i { font-style: normal; display: inline-block; margin-left: .3em; transition: transform var(--t-base) var(--ease-out); }
.pp-rel a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pp-rel a:hover i { transform: translateX(2px); }
.pp-rel .t-label { margin-bottom: var(--space-24); color: var(--color-text-muted); }


@media (max-width: 1199px) {
  .pp-hero-h { grid-column: 1 / span 8; } .pp-hero-s { grid-column: 9 / span 4; }
  .pp-hero.pp-split .pp-hero-h, .pp-hero.pp-split .pp-plate { grid-column: 1 / -1; }
  .pp-hero.pp-split .pp-plate { justify-self: start; margin-top: var(--space-48); }
  .pp-sh-t, .pp-sh-t.w { grid-column: 1 / span 7; } .pp-sh-d, .pp-sh-t.w + .pp-sh-d { grid-column: 8 / span 5; }
  .pp-step-t { grid-column: 1 / span 5; } .pp-step-m { grid-column: 6 / span 7; }
  .pp-api-t, .pp-api-c { grid-column: 1 / -1; }
  .pp-g1-t { grid-column: 1 / span 6; } .pp-g1-m { grid-column: 7 / span 6; }
  .pp-quote-t { grid-column: 1 / span 7; } .pp-quote-m { grid-column: 8 / span 5; }
}

@media (max-width: 860px) {
  .pp-g > * { grid-column: 1 / -1 !important; }
  .pp-hero .pp-media { margin-top: var(--space-40); }
  .pp-hero .pp-media.r21 { aspect-ratio: 4 / 3; }   
  .pp-hero .cro-hero > img { object-position: 60% 50%; }   
  .pp-hero .lab-hero.r21 { aspect-ratio: 4 / 5; }   
  .pp-hero-s { padding-bottom: 0; }
  .pp-sh + * { margin-top: var(--space-40); }
  .pp-steps { row-gap: var(--space-64); }
  .pp-step-m { margin-top: var(--space-8); }
  .pp-cols, .pp-cols.n2, .pp-cols.n3 { --n: 1; row-gap: var(--space-24); }
  .pp-cols.pp-cards { row-gap: var(--space-48); }
  .pp-sub { margin-top: var(--space-64); }
  .pp-quote-m .pp-media { max-width: 320px; margin: 0; }
  .pp-rec { padding: var(--space-24) var(--space-20) var(--space-16); }
  
  .pp-rec { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .pp-rows { width: max-content; min-width: 100%; }
  .pp-code li { padding-right: var(--space-16); padding-left: 44px; }
  .pp-code li::before { width: 30px; }
  .pp-code-k { padding-left: 44px; }
  .pp-rel ul { grid-template-columns: 1fr; }
}


.pp-api-t h2 + p { margin-top: var(--space-24); }
.pp-plate + .pp-cols { margin-top: var(--space-48); }