/* Intro act panel. */

.intro{
    width:100%; flex:1 1 auto; align-self:stretch; height:auto; min-height:0; overflow-y:auto;
    display:flex; flex-direction:column; justify-content:center;
    padding:0;
  }

.intro-foot{
    display:flex; flex-wrap:wrap; align-items:center;
    column-gap:var(--space-card); row-gap:var(--space-snug);
    margin-top:var(--space-block);
  }

.acts{ display:flex; gap:var(--space-inline); margin-bottom:var(--space-card); }

.intro-grid{
    flex:1 1 auto; min-height:0; width:100%; max-width:var(--width-console); margin-inline:auto; box-sizing:border-box;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"figure copy";
    gap:var(--space-block); align-items:center; align-content:center;
    padding:var(--space-card) var(--inset);
  }

.stage:has(.intro),
.stage:has(.console){
    background:transparent; outline:none; border-radius:0;
  }

.intro .card,
.console .card{
    outline:none; background:transparent;
  }

.act-panel{
    grid-area:1 / 1; opacity:0; visibility:hidden;
    transition:opacity var(--duration-interaction) var(--ease-newton), visibility 0s linear var(--duration-interaction);
  }

.act-panel[aria-hidden="false"]{ opacity:1; visibility:visible; transition:opacity var(--duration-interaction) var(--ease-newton) 0s, visibility 0s; }
