.pj-stage{position:relative;overflow:hidden;background:var(--color-void);container-type:inline-size;isolation:isolate}
.pj-stage__art{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.pj-map{position:absolute;inset:0;pointer-events:none}
.pj-no-scene .pj-map,.pj-no-scene .pj-status,.pj-no-scene .pj-replay{display:none}

.pj-node{position:absolute;left:var(--x,50%);top:var(--y,50%);width:0;height:0;--dx:0;--dy:1;--tx:-50%;--ty:0%}
.pj-node.is-left,.pj-node--left{--dx:-1;--dy:0;--tx:-100%;--ty:-50%}
.pj-name{position:absolute;left:calc(var(--dx) * (var(--r,var(--space-m)) + var(--space-xs)));top:calc(var(--dy) * (var(--r,var(--space-m)) + var(--space-xs)));transform:translate(var(--tx),var(--ty));display:inline-flex;align-items:center;min-height:var(--chip-height);padding:0 var(--space-xs);border-radius:var(--radius-chip);background:color-mix(in oklch,var(--color-void) 78%,transparent);color:var(--color-text-muted);font-size:var(--type-label);line-height:var(--lh-label);font-weight:var(--weight-medium);white-space:nowrap;transition:color var(--dur-feedback) ease-out}
.pj-name.is-lit{color:var(--color-text)}

.pj-name--yours{box-shadow:inset 0 0 0 var(--hair) var(--color-line-strong)}

.pj-replay{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:var(--target);padding:0 var(--space-m) 0 var(--space-s);border:var(--hair) solid var(--color-line);border-radius:var(--radius-control);background:transparent;color:var(--color-text-muted);font:inherit;font-size:var(--type-label);font-weight:var(--weight-medium);cursor:pointer;transition:border-color var(--dur-feedback) ease-out,color var(--dur-feedback) ease-out}
.pj-replay:hover{border-color:var(--color-accent-line);color:var(--color-text)}
.pj-replay:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);color:var(--color-text)}
.pj-replay svg{width:var(--space-s);height:var(--space-s);flex:none}

.pj-pa__line{max-width:36ch}
.pj-stage--pa{aspect-ratio:1 / 1.08}
@media (min-width:900px){
  .pj-stage--pa{aspect-ratio:5 / 4}
}

.pj-stage--pa .pj-node--you{--x:12%;--y:82%;--dx:1;--dy:0;--tx:0%;--ty:-50%}
.pj-stage--pa .pj-node--agent{--x:27%;--y:66%;--dx:.75;--dy:.75;--tx:0%;--ty:0%}
.pj-stage--pa .pj-node--outpost{--x:49%;--y:47%;--dx:.78;--dy:.78;--tx:0%;--ty:0%}
.pj-stage--pa .pj-node--w1{--x:68%;--y:16%;--dx:-1;--dy:0;--tx:-100%;--ty:-50%}
.pj-stage--pa .pj-node--w2{--x:84%;--y:31%}
.pj-stage--pa .pj-node--w3{--x:90%;--y:56%}
@container (min-width:36rem){
  .pj-stage--pa .pj-node--you{--x:12%;--y:80%;--dx:1;--dy:0;--tx:0%;--ty:-50%}
  .pj-stage--pa .pj-node--agent{--x:27%;--y:64%;--dx:-1;--dy:0;--tx:-100%;--ty:-50%}
}

.pj-toggle{position:absolute;right:var(--space-xs);bottom:var(--space-xs);z-index:1;display:inline-grid;place-items:center;width:var(--target);height:var(--target);padding:0;border:var(--hair) solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--color-text-faint);cursor:pointer;transition:color var(--dur-feedback) ease-out,border-color var(--dur-feedback) ease-out}
.pj-toggle[hidden]{display:none}
.pj-toggle svg{width:var(--space-s);height:var(--space-s)}
.pj-toggle:hover{color:var(--color-text);border-color:var(--color-line)}
.pj-toggle:focus-visible{outline:var(--focus-ring);outline-offset:calc(-1 * var(--focus-offset));color:var(--color-text)}
.pj-toggle[data-state="playing"] .pj-toggle__play,.pj-toggle:not([data-state="playing"]) .pj-toggle__pause{display:none}
.pj-no-scene .pj-toggle{display:none}

.pj-matrix{display:grid;grid-template-columns:repeat(5,var(--step-5));gap:var(--step-3);align-self:center;flex:none}
.pj-matrix i{display:block;width:var(--step-5);height:var(--step-5);background:var(--color-lilac);opacity:.14}
.pj-matrix--lg{grid-template-columns:repeat(5,var(--step-7))}
.pj-matrix--lg i{width:var(--step-7);height:var(--step-7)}
[data-state]>span{display:none}
[data-state]>span.is-shown{display:inline}

.pj-corner{position:absolute;width:var(--space-s);height:var(--space-s);border:0 solid var(--color-accent-line);pointer-events:none;z-index:1}
.pj-corner--tl{left:calc(-1 * var(--step-4));top:calc(-1 * var(--step-4));border-top-width:var(--step-2);border-left-width:var(--step-2)}
.pj-corner--tr{right:calc(-1 * var(--step-4));top:calc(-1 * var(--step-4));border-top-width:var(--step-2);border-right-width:var(--step-2)}
.pj-corner--bl{left:calc(-1 * var(--step-4));bottom:calc(-1 * var(--step-4));border-bottom-width:var(--step-2);border-left-width:var(--step-2)}
.pj-corner--br{right:calc(-1 * var(--step-4));bottom:calc(-1 * var(--step-4));border-bottom-width:var(--step-2);border-right-width:var(--step-2)}
.pj-frame__title{display:inline-flex;align-items:center;gap:var(--space-xs);font-family:var(--font-mono);font-size:var(--type-meta);letter-spacing:var(--ls-meta);color:var(--color-text-muted)}
.pj-frame__tag{font-family:var(--font-mono);font-size:var(--type-meta);letter-spacing:var(--ls-meta);color:var(--color-text-faint)}
.pj-slash{width:var(--step-7);height:var(--step-18);fill:var(--color-portal);flex:none}

.pj-purpose .pj-map{pointer-events:none}
.pj-purpose .pj-name{pointer-events:auto;cursor:default}
.pj-purpose .pj-name:hover{color:var(--color-lilac)}

.pj-plate{position:relative;border:var(--hair) solid var(--color-line-panel);background:var(--color-raised)}
.pj-plate__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2xs) var(--space-m);min-height:var(--space-2xl);margin:0;padding:0 var(--space-l);background-image:repeating-linear-gradient(90deg,var(--color-rule-dot) 0 var(--dot-on),transparent var(--dot-on) calc(var(--dot-on) + var(--dot-off)));background-size:100% var(--hair);background-position:0 100%;background-repeat:no-repeat}
.pj-plate__grid{display:grid;grid-template-columns:minmax(0,1fr)}
.pj-plate__text{display:grid;gap:var(--space-l);align-content:center;padding:var(--space-xl) var(--space-l)}
.pj-plate__text .t-headline{max-width:14ch}
.pj-plate__art{margin:0;border-top:var(--hair) solid var(--color-line-panel)}
@media (min-width:900px){
  .pj-plate__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .pj-plate__text{padding:var(--space-2xl) var(--space-xl)}
  .pj-plate__art{border-top:0;border-left:var(--hair) solid var(--color-line-panel)}
}

.pj-jc{position:relative;overflow:hidden;isolation:isolate;padding-block:var(--space-section-feature);background:var(--color-void)}
.pj-jc__stage{position:absolute;inset:0;z-index:-1}
.pj-jc__copy{display:grid;gap:var(--space-l);max-width:var(--closing-max)}
.pj-card{display:grid;gap:var(--space-m);width:100%;max-width:calc(var(--space-4xl) * 5);padding:var(--space-l);border:var(--hair) solid var(--color-line-panel);border-radius:var(--radius-chip);background:color-mix(in oklch,var(--color-shell-panel) 94%,transparent);box-shadow:var(--shadow-panel);text-align:left}
.pj-card__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-m)}
.pj-card__status{display:grid;gap:var(--space-2xs);min-width:0}
.pj-card__state{font-size:var(--type-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:var(--weight-medium)}
.pj-card__state>span:last-child{color:var(--color-lilac)}
.pj-card__prompt{font-size:var(--type-label);line-height:var(--lh-label);color:var(--color-text-muted)}
.pj-card__preview{align-self:start}
.pj-card__cta{width:100%}
.pj-card__link{justify-self:start;padding-block:var(--space-2xs)}
.pj-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs) var(--space-m);margin:0;padding-top:var(--space-s);border-top:var(--hair) solid var(--color-line-row);font-size:var(--type-meta);color:var(--color-text-faint)}
@media (max-width:420px){
  .pj-card{padding:var(--space-m)}
  .pj-card__head{grid-template-columns:auto minmax(0,1fr);gap:var(--space-s)}
  .pj-card__preview{grid-column:1 / -1;grid-row:1;justify-self:start}
}

@media (max-width:759.98px){
  .pj-jc[data-kind="gathering"]{padding-bottom:calc(var(--space-section-feature) + var(--space-4xl))}
}

.pj-jc__center{display:grid;justify-items:center;gap:var(--space-2xl);text-align:center}
.pj-jc__copy{justify-items:center}
.pj-jc .closing__note{margin-inline:auto}
.pj-door{position:relative;width:100%;max-width:calc(var(--space-4xl) * 5 + 2 * var(--space-m));padding:var(--space-m);display:grid;justify-items:center}
.pj-door .pj-corner{width:var(--space-l);height:var(--space-l);border-color:var(--color-line-strong);transition:transform var(--dur-reveal) var(--ease-out),border-color var(--dur-reveal) var(--ease-out)}
.pj-door .pj-corner--tl{transform:translate(calc(-1 * var(--space-s)),calc(-1 * var(--space-s)))}
.pj-door .pj-corner--tr{transform:translate(var(--space-s),calc(-1 * var(--space-s)))}
.pj-door .pj-corner--bl{transform:translate(calc(-1 * var(--space-s)),var(--space-s))}
.pj-door .pj-corner--br{transform:translate(var(--space-s),var(--space-s))}
.pj-door:has(.pj-card.is-lit) .pj-corner{transform:none;border-color:var(--color-lilac)}

@media (prefers-reduced-motion:reduce){
  .pj-door .pj-corner{transition:none}
}

@container (max-width:20rem){
  .pj-stage--pa .pj-node--w1{--dx:0;--dy:1;--tx:-80%;--ty:0%}
}