.pg-h1{max-width:18ch}
.pcta{background:var(--papel-2)}
.pcta .h2{max-width:24ch}
.pcta .intro{color:var(--cinza-esc)}
.wk{margin-top:var(--sp-6);row-gap:var(--sp-9)} 
.wk>*{align-self:start}
@media (min-width:640px) and (max-width:1023.98px){
  .wk>:nth-child(odd){grid-column:1/span 5}
  .wk>:nth-child(even){grid-column:2/span 5}
}
.wk .pm-card.pm-reformer{aspect-ratio:16/9}
.wk .pm-card.pm-reformer>video,.wk .pm-card.pm-reformer>img{object-position:50% 50%} 
.wk .pm-card.pm-agentLab{aspect-ratio:4/5;width:67%}
.wk .pm-card.pm-site{aspect-ratio:1;width:75%;border-radius:var(--r-screen);background:var(--tinta)}
.wk .pm-card.pm-pic.pm-site{border-radius:0;background:var(--papel-2)} 
@media (min-width:1024px){
  .wk{row-gap:calc(var(--sp-9) + var(--sp-6))} 
  .wk>*{grid-column:auto/span 6} 
  .wk>:has(.pm-reformer){grid-column-end:span 7}
  .wk>:has(.pm-site){grid-column-end:span 6}
  .wk>:has(.pm-agentLab){grid-column-end:span 5}
  .wk .pm-card.pm-agentLab{width:95%}
  .wk .pm-card.pm-site{width:88%}
  .wk>:nth-child(6n+2),.wk>:nth-child(6n+6){margin-top:var(--sp-9)}
  .wk>:nth-child(6n+4){margin-top:var(--sp-8)}
  .wk>:nth-child(3n){grid-column-start:3}
}
.pmfig{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-3);align-items:start}
.pmfig>.pm{grid-column:1/-1}
.pmfig>.cap{grid-column:1;grid-row:2}
.pmfig>.pm-btn{grid-column:2;grid-row:2;position:relative;z-index:1;min-width:44px;min-height:44px}
.pm{position:relative;aspect-ratio:16/10;overflow:hidden}
.pm img,.pm video{display:block}
.pm>img,.pm>video{width:100%;height:100%;object-fit:cover;object-position:top left}
.pm-top.pm-agentLab{border-radius:var(--r-screen);border:1px solid var(--linha);background:var(--papel-2)}
.pm-scr{position:absolute;left:0;top:0;width:76%;height:84%;border-radius:var(--r-screen);overflow:hidden;background:var(--papel-2)}
.chap .pm-scr img,.pm-scr img{width:100%;height:100%;object-fit:cover;object-position:top left}
.pm-phone{position:absolute;right:0;bottom:0;height:96%;aspect-ratio:584/1126;border:4px solid var(--tinta);border-radius:22px;overflow:hidden;background:var(--papel-2)}
.chap .pm-phone img,.pm-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.pm-top .pm-phone{border-width:6px;border-radius:32px}
.pm-top{background:var(--papel);padding-bottom:var(--sp-6)}
.pm-top .pmfig{max-width:1192px}
.pm-top .pmfig:has(.pm-reformer){max-width:1600px}
.pm-top .pmfig:has(.pm-pic){max-width:1568px}
.pm-top.pm-pic{border:0;border-radius:0}
.pm-top .cap{color:var(--cinza-esc)}
@media (min-width:1024px){
  main:has(>.pm-top .pm-pic){--cs-img:min(840px,calc((100% - var(--margem) - var(--pad-r) - (var(--cols) - 1) * var(--gutter)) / var(--cols) * 7 + 6 * var(--gutter)));display:grid;grid-template-columns:minmax(0,1fr)}
  main:has(>.pm-top .pm-pic)>.cs-head,main:has(>.pm-top .pm-pic)>.pm-top{grid-row:1;grid-column:1}
  main:has(>.pm-top .pm-pic)>.cs-head .wrap{padding-right:calc(var(--cs-img) + var(--pad-r) + var(--gutter))}
  main:has(>.pm-top .pm-pic)>.pm-top{align-self:start;padding-top:calc(var(--sp-8) + 44px + var(--sp-4));background:none;pointer-events:none}
  main:has(>.pm-top .pm-pic)>.pm-top .wrap{padding-left:calc(100% - var(--cs-img) - var(--pad-r))}
  main:has(>.pm-top .pm-pic)>.pm-top .pmfig{max-width:none;pointer-events:auto}
}
.cs-steps{list-style:none;margin:0;padding:0;max-width:var(--measure-body)}
.cs-steps li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--sp-3);padding-block:var(--sp-3);border-top:1px solid var(--linha)}
.cs-steps li:last-child{border-bottom:1px solid var(--linha)}
.cs-k{font:var(--w-mono) var(--t-mono)/var(--lh-body) var(--mono);letter-spacing:var(--ls-mono);color:var(--cinza-esc);padding-top:.2em}
@media (min-width:640px){.cs-steps li{grid-template-columns:7rem minmax(0,1fr)}}
.rsc-logo{flex:none;width:104px;aspect-ratio:360/466;overflow:hidden}
.rsc-logo img{display:block;width:100%;height:auto}
.who{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.st{font-family:var(--mono);font-weight:var(--w-mono)}
.st.built::before,.st.disc::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%}
.st.built::before{background:currentColor} 
.shu-x .st.built.shu-on::before{background:var(--shu)}
@media (prefers-reduced-motion:no-preference){.st.built::before{transition:background-color var(--dur-fill) ease-out}}
.st.disc::before{border:1.5px solid currentColor}
.cs-head{padding-bottom:var(--sp-5)}
.cs-head .h1{margin:0}
.cs-lede{max-width:30ch;margin-top:var(--sp-3);color:var(--tinta);font:var(--w-h2) var(--t-h2)/1.15 var(--sans);letter-spacing:var(--ls-h2);text-wrap:pretty}
@media (min-width:1024px){.cs-lede{margin-top:var(--sp-4)}}
.cs-meta{margin:0}
.cs-client{display:flex;align-items:center;gap:var(--sp-3)}
.cs-client .rsc-logo{width:72px}
.cs-dev{margin:var(--sp-4) 0 0}
.cs{background:var(--papel)}
.cs-alt{background:var(--papel-2)}
.cs .cap{color:var(--cinza-esc)}
.cs .cap b{color:var(--tinta);font-weight:var(--w-h1)}
.cs .grid{row-gap:var(--sp-4)}
.cs-h{grid-column:1/-1;margin:0;font:500 var(--t-case)/1.15 var(--sans);letter-spacing:-.02em}
.cs-b{grid-column:1/-1;display:grid;gap:var(--sp-5);align-content:start;min-width:0}
@media (min-width:1024px){.cs-h{grid-column:1/span 4}.cs-b{grid-column:6/span 7}}
.cs-p{margin:0;max-width:var(--measure-body)}
.cs-list,.cs-roles{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);max-width:var(--measure-body)}
.cs-list li{padding-top:var(--sp-3);border-top:1px solid var(--linha)}
.cs-roles div{display:grid;gap:var(--sp-1);padding-top:var(--sp-3);border-top:1px solid var(--linha)}
.cs-roles dt{font-weight:var(--w-h1)}
.cs-roles dd{margin:0}
.cs-fig{margin:0;display:grid;gap:var(--sp-2)}
.cs-shot{overflow:hidden;border-radius:var(--r-screen);border:1px solid var(--linha);background:var(--papel)}
.cs .cs-shot img{width:100%;height:auto}
.cs-pair{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:flex-end}
.cs-pair .cs-shot{flex:1 1 300px;min-width:0}
.cs-phone{flex:0 0 auto;width:min(100%,200px);overflow:hidden;border:4px solid var(--tinta);border-radius:22px;background:var(--papel-2)}
.cs .cs-phone img{width:100%;height:auto}
.cs-narrow{width:min(100%,260px)}
.cs-wide{grid-column:1/-1;max-width:1568px}
.cs-links{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-5);margin:0}
.cs .pending-tag{border-color:var(--tinta);color:var(--tinta)}
.cs-backp{margin:0 0 var(--sp-4)}
.cs-back{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;min-width:44px;padding-right:var(--sp-2);color:var(--tinta);text-decoration:none;
  font:var(--w-mono) var(--t-small)/1 var(--mono);letter-spacing:var(--ls-mono)}
.cs-arr{flex:none;display:block}
.cs-back .lbl{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.3em}
@media (hover:hover){.cs-back:hover .lbl{text-decoration-color:var(--shu-esc)}}
.cs-back:focus-visible .lbl{text-decoration-color:var(--shu-esc)}
.cs-need{margin:0;display:grid;max-width:var(--measure-body)}
.cs-need div{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-1);padding-block:var(--sp-3);border-top:1px solid var(--linha)}
.cs-need div:last-child{border-bottom:1px solid var(--linha)}
.cs-need dt{font:var(--w-mono) var(--t-mono)/var(--lh-body) var(--mono);letter-spacing:var(--ls-mono);color:var(--cinza-esc)}
.cs-need dd{margin:0}
@media (min-width:640px){.cs-need div{grid-template-columns:9rem minmax(0,1fr);gap:var(--sp-3)}.cs-need dt{padding-top:.2em}}
.cs-think{list-style:none;margin:0;padding:0;display:grid;max-width:var(--measure-body);counter-reset:think}
.cs-think li{display:grid;gap:var(--sp-1);padding-block:var(--sp-3);border-top:1px solid var(--linha)}
.cs-think li:last-child{border-bottom:1px solid var(--linha)}
.cs-x{margin:0;font-weight:var(--w-h2)}
.cs-y{margin:0;color:var(--cinza-esc)}
.cs-y .cs-k{padding:0;margin-right:var(--sp-1)}
.cs-beat{grid-column:1/-1;margin-top:var(--sp-6);min-width:0;align-self:start;align-content:start}
.cs-beat .cap{max-width:var(--measure-body)}
.cs-beat-ph{justify-items:start}
.cs-beat-ph .dv-phone{width:min(72%,280px)}
.cs-beat-ph .cap{max-width:280px}
.cs-duo{display:flex;flex-direction:column;align-items:flex-start}
.cs-duo .dv-laptop{order:0;width:100%}
.cs-duo .dv-phone{order:1;position:relative;z-index:1;width:min(56%,220px);margin:calc(var(--sp-5) * -1) 0 0 var(--sp-4)}
.cs-b .dv-laptop{width:100%}
@media (min-width:640px){
  .cs-duo{flex-direction:row;align-items:flex-end;padding-bottom:var(--sp-3)} 
  .cs-duo .dv-phone{order:0;flex:0 0 22%;width:auto;margin:0 -4% calc(var(--sp-3) * -1) 0}
  .cs-duo .dv-laptop{order:1;flex:1 1 0}
}
@media (min-width:1024px){
  .cs-beat{margin-top:var(--sp-8)}
  .cs-beat-l{grid-column:1/span 8}
  .cs-beat-duo{grid-column:3/-1}
  .cs-beat-ph{grid-column:9/-1;align-self:end;justify-items:end}
  .cs-beat-ph .dv-phone{width:min(100%,300px)}
  .cs-beat-ph .cap{max-width:300px}
}
.demo{background:var(--papel);padding-bottom:var(--sp-6)}
.demo-fig{margin:0;display:grid;gap:var(--sp-2);justify-items:start}
.demo-frame{width:100%;max-width:1600px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-screen);border:1px solid var(--linha);background:var(--papel-2)}
.demo-frame video,.demo-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.demo .cap{color:var(--cinza-esc)}
.demo-btn{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;min-width:44px;padding:0 var(--sp-3);border:1.5px solid var(--tinta);border-radius:0;background:transparent;color:var(--tinta);
  font:var(--w-mono) .875rem/1 var(--mono);letter-spacing:var(--ls-mono);cursor:pointer}
.demo-btn::before{content:"";width:10px;height:10px;border:1.5px solid currentColor;border-radius:50%}
.demo-btn[data-paused="true"]::before{background:currentColor}
@media (hover:hover){.demo-btn:hover{background:var(--grelha)}}
.demo-empty{display:grid;place-items:center;padding:var(--sp-4);text-align:center;border-style:dashed}
.demo-empty p{margin:0}
.demo-dev{margin:0}
.demo .pending-tag{border-color:var(--tinta);color:var(--tinta)}
@media (forced-colors:active){.demo-btn{border-color:ButtonText}}