@layer pages{.pg-exp--portrait #introduction{position:relative}.pg-exp--portrait .stage{height:calc(100svh - var(--header-h));min-height:calc(5 * var(--space-128) + var(--space-48));max-height:calc(7 * var(--space-128) + var(--space-64));position:relative;overflow:clip}.pg-exp--portrait .picture{pointer-events:none;mask-image:linear-gradient(to bottom, var(--ink) 83%, transparent 99%);position:absolute;inset:0}.pg-exp--portrait .picture canvas{opacity:0;width:100%;height:100%;position:absolute;inset:0}.pg-exp--portrait .picture img{object-fit:contain;mix-blend-mode:screen;width:52%;max-width:none;height:83%;position:absolute;top:7%;left:46%}body.ready .pg-exp--portrait .picture canvas{opacity:1}body.ready .pg-exp--portrait .picture img{opacity:0}body.fallback .pg-exp--portrait .picture img{opacity:1}body.fallback .pg-exp--portrait .picture canvas{opacity:0}.pg-exp--portrait #portrait-trigger{z-index:2;cursor:auto;position:absolute}.pg-exp--portrait .intro{z-index:3;top:var(--space-24);left:var(--grid-margin);width:40%;max-width:calc(5 * var(--space-128));pointer-events:none;position:absolute}.pg-exp--portrait .intro a{pointer-events:auto}.pg-exp--portrait .hello{display:none}.pg-exp--portrait .intro h1{max-width:12ch;font:var(--fw-display-l) var(--fs-display-l) / var(--lh-display-l) var(--font-display);letter-spacing:var(--tr-display-l);word-spacing:.1em;color:var(--paper);text-wrap:balance;margin:0}.pg-exp--portrait .intro-note{max-width:36ch;font:var(--fw-lead) var(--fs-lead) / var(--lh-lead) var(--font-body);letter-spacing:var(--tr-lead);color:var(--paper-dim);margin-block-start:var(--space-32)}.pg-exp--portrait .portrait-hint-touch{display:none}@media (hover:none),(pointer:coarse){.pg-exp--portrait .portrait-hint-fine{display:none}.pg-exp--portrait .portrait-hint-touch{display:inline}}.pg-exp--portrait .portrait-caption{z-index:3;bottom:var(--space-24);left:var(--grid-margin);align-items:baseline;gap:var(--space-12);max-width:40%;font:var(--fw-meta) var(--fs-meta) / var(--lh-meta) var(--font-mono);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--paper-dim);pointer-events:none;display:flex;position:absolute}.pg-exp--portrait .tiny-cross{font-size:var(--fs-kicker);color:var(--signal);line-height:1}.pg-exp--portrait .hero-bottom{z-index:4;right:var(--grid-margin);bottom:var(--space-24);left:var(--grid-margin);justify-content:flex-end;align-items:center;display:flex;position:absolute}.pg-exp--portrait .motion-controls{gap:var(--space-8);flex-wrap:wrap;display:flex}.pg-exp--portrait .motion-controls .pg-tool{min-height:var(--target-min);background:var(--ink)}.pg-exp--portrait .motion-controls .pg-tool:disabled{opacity:.45;cursor:default}@media (width<=1100px){.pg-exp--portrait .portrait-caption{display:none}}@media (width<=699px){.pg-exp--portrait .stage{height:calc(6 * var(--space-128));min-height:0;max-height:none}.pg-exp--portrait .intro{top:var(--space-32);right:var(--grid-margin);width:auto;max-width:none}.pg-exp--portrait .intro h1{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2)}.pg-exp--portrait .intro-note{font-size:var(--fs-body);line-height:var(--lh-body);margin-block-start:var(--space-24)}.pg-exp--portrait .picture img{width:100%;height:46%;top:45%;left:0}.pg-exp--portrait .hero-bottom{bottom:var(--space-16)}}@media (prefers-reduced-motion:reduce){.pg-exp--portrait .picture #fringe{display:none}}html.pg-embed .pg-exp--portrait :is(.intro,.hero-bottom,.portrait-caption){display:none}html.pg-embed .pg-exp--portrait .stage{height:100svh;max-height:none}}