.scenario-page [hidden]{display:none!important}

.scenario-hero{
  background:var(--color-canvas);
  color:#f2f4f7;
}

.scenario-page [data-hero-form="right-graphic"] .c-page-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(31rem,.94fr);
  gap:var(--space-7);
  align-items:start;
}

.scenario-hero-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
}

.scenario-hero-copy .c-kicker+h1{
  margin-top:var(--space-4);
}

.scenario-hero-copy h1{
  max-width:15ch;
  overflow-wrap:anywhere;
  color:#f2f4f7;
}

.scenario-hero-lead{
  max-width:42rem;
  margin-top:var(--space-4);
  color:#b3bac4;
  font-size:var(--text-lg);
}

.scenario-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:var(--space-2);
  margin-top:var(--space-4);
}

.scenario-hero-facts{
  display:grid;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-4);
  margin:var(--space-5) 0 var(--space-4);
  padding-top:var(--space-5);
  border-top:1px solid var(--color-line);
}

.scenario-hero-facts div{
  min-width:0;
}

.scenario-hero-facts dt,
.scenario-hero-facts dd{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-hero-facts dt{
  color:#8f98a5;
}

.scenario-hero-facts dd{
  margin-top:var(--space-2);
  color:#f2f4f7;
  font-size:var(--text-lg);
  font-weight:650;
}

.scenario-hero-stage{
  min-width:0;
  height:auto;
  overflow:visible;
  text-align:left;
}

.scenario-inspector{
  display:grid;
  width:100%;
  height:auto;
  min-width:0;
  grid-template-columns:minmax(0,1fr);
  margin-inline:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#0d1118;
  color:#f2f4f7;
  box-shadow:var(--shadow-window);
}

.scenario-inspector__top{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:#171b22;
  color:#f2f4f7;
}

.scenario-inspector__top span,
.scenario-inspector__top strong{
  min-width:0;
}

.scenario-inspector__top span{
  font-family:var(--font-heading);
  font-weight:650;
  white-space:nowrap;
}

.scenario-inspector__top strong{
  flex:0 0 auto;
  color:#9fa8b5;
  font-size:var(--text-xs);
  white-space:nowrap;
}

.scenario-slices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  padding:var(--space-5);
}

.scenario-slice{
  display:flex;
  min-width:0;
  min-height:7.5rem;
  flex-direction:column;
  justify-content:flex-end;
  padding:var(--space-5);
  border-radius:var(--radius-md);
  background:#111720;
  color:#f2f4f7;
}

.scenario-slice:last-child{
  grid-column:1/-1;
  min-height:6.5rem;
}

.scenario-slice--active{
  background:#1236a6;
  color:#ffffff;
}

.scenario-slice span,
.scenario-slice strong,
.scenario-slice small{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-slice span{
  color:#9eb1ff;
  font-size:var(--text-xs);
}

.scenario-slice--active span{
  color:#dce4ff;
}

.scenario-slice strong{
  margin-top:var(--space-2);
  font-size:var(--text-lg);
}

.scenario-slice small{
  margin-top:var(--space-1);
  color:#969da8;
}

.scenario-slice--active small{
  color:#e2e7fb;
}

.scenario-inspector__rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  padding:0;
  border-top:1px solid var(--color-line);
}

.scenario-inspector__rail div{
  min-width:0;
  padding:var(--space-4) var(--space-4);
}

.scenario-inspector__rail div+div{
  border-left:1px solid var(--color-line);
}

.scenario-inspector__rail dt,
.scenario-inspector__rail dd{
  min-width:0;
}

.scenario-inspector__rail dt{
  color:#7f8996;
  font-size:var(--text-xs);
}

.scenario-inspector__rail dd{
  margin-top:var(--space-1);
  color:#dce1e8;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  line-height:1.45;
}

.scenario-section-head{
  display:flex;
  max-width:50rem;
  margin-inline:auto;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.scenario-section-head .c-kicker{
  margin-inline:auto;
}

.scenario-section-head .c-kicker+h2{
  margin-top:var(--space-4);
}

.scenario-section-head h2{
  color:#f2f4f7;
}

.scenario-section-head p{
  margin-top:var(--space-4);
  color:#969da8;
}

.scenario-usecases{
  padding-block:var(--section-space);
  background:#07090d;
  color:#f2f4f7;
}

.scenario-use-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
  align-items:stretch;
  margin-top:var(--space-7);
}

.scenario-use-card{
  display:flex;
  height:100%;
  min-width:0;
  flex-direction:column;
  padding:var(--space-5);
  border-radius:var(--radius-md);
  background:#111720;
  color:#f2f4f7;
}

.scenario-card-mark{
  display:flex;
  min-width:0;
  align-items:center;
  gap:var(--space-3);
}

.scenario-use-card h3{
  margin-top:var(--space-4);
  color:#f2f4f7;
  font-size:var(--text-xl);
  overflow-wrap:anywhere;
}

.scenario-use-card>p{
  margin-top:var(--space-3);
  color:#a2aab5;
}

.scenario-use-card ul{
  display:grid;
  gap:var(--space-2);
  margin:var(--space-4) 0 0;
  padding-left:1.15rem;
  color:#c2c8d0;
}

.scenario-use-card li{
  padding-left:var(--space-1);
  color:#c2c8d0;
  font-size:var(--text-sm);
}

.scenario-pill{
  display:inline-flex;
  width:fit-content;
  align-items:center;
  gap:.4em;
  padding:.4em .9em;
  border-radius:999px;
  background:#1a2130;
  color:#bdc9f9;
  font-size:var(--text-xs);
  font-weight:650;
  line-height:1;
  overflow-wrap:anywhere;
}

.scenario-card-note{
  display:block;
  margin-top:auto;
  padding-top:var(--space-5);
  color:#8ea3ff;
  font-size:var(--text-sm);
}

.scenario-detail-section{
  padding-block:var(--section-space);
  background:#030509;
  color:#f2f4f7;
}

.scenario-detail-section--alt{
  background:#07090d;
  color:#f2f4f7;
}

.scenario-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--space-7);
  align-items:start;
}

.scenario-detail-grid--reverse .scenario-detail-copy{
  grid-column:2;
  grid-row:1;
}

.scenario-detail-grid--reverse> :not(.scenario-detail-copy){
  grid-column:1;
  grid-row:1;
}

.scenario-detail-copy{
  min-width:0;
}

.scenario-detail-copy .c-kicker+h2{
  margin-top:var(--space-4);
}

.scenario-detail-copy h2{
  color:#f2f4f7;
  font-size:clamp(1.9rem,3vw,2.65rem);
  overflow-wrap:anywhere;
}

.scenario-detail-copy p{
  margin-top:var(--space-4);
  color:#a7aeb8;
}

.scenario-detail-copy code{
  color:#bdc9f9;
}

.scenario-run-sheet,
.scenario-queue-board,
.scenario-resource-board,
.scenario-media-board{
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:#111720;
  color:#f2f4f7;
}

.scenario-run-sheet__head,
.scenario-resource-board__title{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:#1236a6;
  color:#ffffff;
}

.scenario-run-sheet__head span,
.scenario-run-sheet__head strong,
.scenario-resource-board__title span,
.scenario-resource-board__title strong{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-run-sheet__head strong,
.scenario-resource-board__title strong{
  font-size:var(--text-xs);
}

.scenario-run-sheet dl{
  margin:0;
  padding:0 var(--space-5) var(--space-5);
}

.scenario-run-sheet dl div{
  display:grid;
  grid-template-columns:minmax(7.5rem,.7fr) minmax(0,1fr);
  gap:var(--space-4);
  padding-block:var(--space-4);
  border-bottom:1px solid var(--color-line);
}

.scenario-run-sheet dt,
.scenario-run-sheet dd{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-run-sheet dt{
  color:#858f9c;
}

.scenario-run-sheet dd{
  color:#e1e5eb;
}

.scenario-queue-board{
  display:flex;
  flex-direction:column;
  padding:var(--space-5);
}

.scenario-queue-board__row{
  display:grid;
  min-width:0;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-4);
  align-items:center;
  padding-block:var(--space-4);
  border-bottom:1px solid var(--color-line);
}

.scenario-queue-board__row>span,
.scenario-queue-board__row>div,
.scenario-queue-board__row strong,
.scenario-queue-board__row small{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-queue-board__row>span:first-child{
  color:#8ea3ff;
}

.scenario-queue-board__row strong{
  display:block;
  color:#f2f4f7;
}

.scenario-queue-board__row small{
  display:block;
  margin-top:var(--space-1);
  color:#89929f;
}

.scenario-status{
  display:inline-flex;
  width:fit-content;
  align-items:center;
  gap:.4em;
  padding:.4em .9em;
  border-radius:999px;
  background:#1a2130;
  color:#bdc9f9;
  font-size:var(--text-xs);
  line-height:1;
}

.scenario-queue-board__foot{
  display:flex;
  min-width:0;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-4);
  margin-top:var(--space-5);
  padding:var(--space-4);
  border-radius:var(--radius-sm);
  background:#171b22;
  color:#f2f4f7;
}

.scenario-queue-board__foot span,
.scenario-queue-board__foot strong{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-queue-board__foot span{
  color:#8d96a2;
  font-size:var(--text-sm);
}

.scenario-queue-board__foot strong{
  text-align:right;
  font-size:var(--text-sm);
}

.scenario-resource-board{
  padding-bottom:var(--space-5);
}

.scenario-resource-meter{
  display:grid;
  min-width:0;
  grid-template-columns:minmax(6rem,.6fr) minmax(0,1fr) auto;
  gap:var(--space-4);
  align-items:center;
  padding:var(--space-4) var(--space-5) 0;
}

.scenario-resource-meter span,
.scenario-resource-meter strong{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-resource-meter span{
  color:#cbd1d9;
  font-size:var(--text-sm);
}

.scenario-resource-meter strong{
  color:#9099a6;
  font-size:var(--text-xs);
}

.scenario-resource-meter div{
  min-width:0;
  height:.45rem;
  overflow:hidden;
  border-radius:999px;
  background:#252c37;
  color:#f2f4f7;
}

.scenario-resource-meter i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#5477f1;
  color:#ffffff;
}

.scenario-resource-board>p{
  margin:var(--space-5) var(--space-5) 0;
  padding-top:var(--space-4);
  border-top:1px solid var(--color-line);
  color:#969faa;
  font-size:var(--text-sm);
}

.scenario-media-board{
  padding:var(--space-5);
}

.scenario-media-board__track{
  display:grid;
  min-width:0;
  grid-template-columns:2.5rem minmax(0,1fr);
  gap:var(--space-4);
  align-items:start;
  padding-block:var(--space-4);
  border-bottom:1px solid var(--color-line);
}

.scenario-media-board__track>span{
  display:grid;
  width:2.5rem;
  height:2.5rem;
  place-items:center;
  border-radius:50%;
  background:#1c2d67;
  color:#c8d2ff;
  font-size:var(--text-xs);
}

.scenario-media-board__track>div,
.scenario-media-board__track strong,
.scenario-media-board__track small{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-media-board__track strong{
  display:block;
  color:#f2f4f7;
}

.scenario-media-board__track small{
  display:block;
  margin-top:var(--space-1);
  color:#8d96a3;
}

.scenario-handoff-section{
  padding-block:var(--section-space);
  background:#0d1118;
  color:#f2f4f7;
}

.scenario-handoff-list{
  display:grid;
  margin-top:var(--space-7);
}

.scenario-handoff-row{
  display:grid;
  grid-template-columns:2.5rem minmax(7.5rem,11rem) minmax(0,1fr);
  gap:var(--space-3);
  align-items:start;
  padding:var(--space-5);
  border-top:1px solid var(--color-line);
}

.scenario-handoff-row:last-child{
  border-bottom:1px solid var(--color-line);
}

.scenario-handoff-row>*{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-handoff-row strong{
  color:#f2f4f7;
  font-size:var(--text-lg);
}

.scenario-handoff-row p{
  color:#9ca4af;
}

.scenario-step{
  display:grid;
  width:2.5rem;
  height:2.5rem;
  place-items:center;
  border-radius:50%;
  background:#1236a6;
  color:#ffffff;
  font-size:var(--text-xs);
}

.scenario-mapping-section{
  padding-block:var(--section-space);
  background:#030509;
  color:#f2f4f7;
}

.scenario-map-table{
  display:table;
  width:100%;
  min-width:58rem;
  margin-top:var(--space-7);
  background:#f2f4f7;
  color:#1c232c;
}

.scenario-map-table caption{
  padding:var(--space-3) var(--space-4);
  background:#e5e9ee;
  color:#303944;
  text-align:left;
  font-weight:650;
}

.scenario-map-table th:first-child,
.scenario-map-table td:first-child{
  width:17%;
  min-width:9rem;
}

.scenario-map-table th,
.scenario-map-table td{
  text-align:left;
}

.scenario-mapping-notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
  margin-top:var(--space-5);
}

.scenario-mapping-notes article{
  min-width:0;
  padding:var(--space-5);
  border-radius:var(--radius-md);
  background:#111720;
  color:#f2f4f7;
}

.scenario-mapping-notes strong{
  display:block;
  color:#f2f4f7;
  font-size:var(--text-lg);
}

.scenario-mapping-notes p{
  margin-top:var(--space-2);
  color:#969faa;
}

.scenario-region-section{
  padding-block:var(--section-space);
  background:#07090d;
  color:#f2f4f7;
}

.scenario-region-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:var(--space-4);
  align-items:stretch;
  margin-top:var(--space-7);
}

.scenario-node-card{
  display:flex;
  height:100%;
  min-width:0;
  flex-direction:column;
  padding:var(--space-5);
  border-radius:var(--radius-md);
  background:#111720;
  color:#f2f4f7;
}

.scenario-node-code{
  color:#8ea3ff;
  font-size:var(--text-xs);
}

.scenario-node-card h3{
  margin-top:var(--space-3);
  color:#f2f4f7;
  font-size:var(--text-xl);
  overflow-wrap:anywhere;
}

.scenario-node-card p{
  margin-top:var(--space-3);
  color:#9ca4af;
}

.scenario-node-card .scenario-pill{
  margin-top:auto;
  padding-top:.4em;
  padding-bottom:.4em;
  transform:translateY(var(--space-4));
}

.scenario-region-note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-4);
  align-items:start;
  margin-top:var(--space-6);
  padding:var(--space-5);
  border-radius:var(--radius-md);
  background:#171b22;
  color:#f2f4f7;
}

.scenario-region-note svg{
  width:1.25rem;
  height:1.25rem;
  color:#8ea3ff;
}

.scenario-region-note div,
.scenario-region-note strong,
.scenario-region-note p{
  min-width:0;
  overflow-wrap:anywhere;
}

.scenario-region-note strong{
  color:#f2f4f7;
}

.scenario-region-note p{
  margin-top:var(--space-2);
  color:#9ca4af;
}

.scenario-closing-section{
  padding-block:var(--section-space);
  background:#030509;
  color:#f2f4f7;
}

.scenario-closing{
  padding:var(--space-7);
  background:#0e131b;
  color:#f2f4f7;
}

.scenario-closing>div{
  min-width:0;
}

.scenario-closing .c-kicker+h2{
  margin-top:var(--space-4);
}

.scenario-closing h2{
  max-width:22ch;
  color:#f2f4f7;
  font-size:clamp(1.9rem,3vw,2.65rem);
  overflow-wrap:anywhere;
}

.scenario-closing p{
  max-width:42rem;
  margin-top:var(--space-4);
  color:#969da8;
}

.scenario-closing-actions{
  display:flex;
  min-width:min(100%,14rem);
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-2);
}

.scenario-closing-actions .c-btn{
  width:100%;
}

.scenario-closing-actions .c-btn-ghost{
  color:#eef1f5;
  border-color:color-mix(in srgb,currentColor 42%,transparent);
}

@media(max-width:64rem){
  .scenario-page [data-hero-form="right-graphic"] .c-page-hero__grid{
    grid-template-columns:minmax(0,1fr);
  }

  .scenario-hero-copy h1{
    max-width:18ch;
  }

  .scenario-detail-grid,
  .scenario-detail-grid--reverse{
    grid-template-columns:minmax(0,1fr);
  }

  .scenario-detail-grid--reverse .scenario-detail-copy,
  .scenario-detail-grid--reverse> :not(.scenario-detail-copy){
    grid-column:auto;
    grid-row:auto;
  }

  .scenario-detail-grid--reverse .scenario-detail-copy{
    order:0;
  }

  .scenario-detail-grid--reverse> :not(.scenario-detail-copy){
    order:1;
  }

  .scenario-region-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:42rem){
  .scenario-page [data-hero-form="right-graphic"] .c-page-hero__grid{
    gap:var(--space-6);
  }

  .scenario-hero-stage,
  .scenario-hero-stage .hero-art{
    width:min(calc(100% - var(--gutter)*2),100%);
    height:auto;
    margin-inline:auto;
    overflow:visible;
    transform:none;
  }

  .scenario-hero-stage .hero-art{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    overflow:hidden;
  }

  .scenario-hero-stage .hero-art>*{
    grid-column:1;
    width:auto;
  }

  .scenario-hero-copy h1{
    max-width:none;
  }

  .scenario-actions{
    width:100%;
  }

  .scenario-actions .c-btn{
    width:100%;
    white-space:normal;
  }

  .scenario-hero-facts{
    grid-template-columns:minmax(0,1fr);
  }

  .scenario-slices{
    grid-template-columns:minmax(0,1fr);
  }

  .scenario-slice:last-child{
    grid-column:auto;
  }

  .scenario-inspector__rail{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .scenario-inspector__rail div:nth-child(odd){
    border-left:0;
  }

  .scenario-inspector__rail div:nth-child(n+3){
    border-top:1px solid var(--color-line);
  }

  .scenario-use-grid,
  .scenario-mapping-notes,
  .scenario-region-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .scenario-run-sheet dl div{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-2);
  }

  .scenario-queue-board__row{
    grid-template-columns:auto minmax(0,1fr);
  }

  .scenario-queue-board__row .scenario-status{
    grid-column:2;
    justify-self:start;
  }

  .scenario-queue-board__foot{
    flex-direction:column;
  }

  .scenario-queue-board__foot strong{
    text-align:left;
  }

  .scenario-resource-meter{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .scenario-resource-meter div{
    grid-column:1/-1;
    grid-row:2;
  }

  .scenario-handoff-row{
    grid-template-columns:2.25rem minmax(0,1fr);
  }

  .scenario-handoff-row>:nth-child(3){
    grid-column:2;
  }

  .scenario-closing{
    padding:var(--space-5);
  }

  .scenario-closing-actions{
    width:100%;
  }
}