.showcase-page{
  background:#02050b;
  color:#eef2f6
}

.showcase-hero{
  position:relative;
  padding-block:var(--space-9);
  overflow:hidden;
  background:radial-gradient(circle at 50% 18%,#1a2944 0,#0a1221 40%,#02050b 76%);
  color:#eef2f6
}

.showcase-hero::before{
  position:absolute;
  inset:0;
  pointer-events:none;
  content:"";
  background-image:linear-gradient(rgba(151,166,191,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(151,166,191,.055) 1px,transparent 1px);
  background-size:3.5rem 3.5rem;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 88%)
}

.showcase-hero-inner{
  position:relative;
  z-index:1
}

.showcase-hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(100%,56rem);
  margin-inline:auto;
  text-align:center
}

.showcase-hero-copy .c-kicker{
  align-self:center;
  margin-inline:auto
}

.showcase-hero-copy h1{
  max-width:18ch;
  overflow-wrap:anywhere
}

.showcase-hero-copy>p:not(.showcase-hero-note){
  max-width:48rem;
  margin-top:var(--space-5);
  color:#b4bfce;
  font-size:var(--fs-3)
}

.showcase-hero-actions{
  justify-content:flex-start;
  margin-top:var(--space-6)
}

.showcase-hero-copy .showcase-hero-actions{
  justify-content:center
}

.showcase-hero-note{
  max-width:46rem;
  margin-top:var(--space-5);
  color:#aab6c6;
  font-size:var(--fs-1)
}

.showcase-hero-note strong{
  color:#f2b58d
}

.showcase-board{
  width:min(calc(100% - var(--gutter)*2),42rem);
  height:auto;
  margin:var(--space-8) auto 0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#0c1322;
  color:#eef2f6;
  box-shadow:var(--shadow);
  text-align:left
}

.showcase-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
  padding:var(--space-5) var(--space-6);
  background:#11192a;
  color:#eef2f6
}

.showcase-board-head>div{
  min-width:0
}

.showcase-board-head strong{
  display:block;
  margin-top:var(--space-2);
  font-size:var(--fs-3)
}

.showcase-board-label{
  color:#98a7bb;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  letter-spacing:.1em
}

.showcase-board-state{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  width:fit-content;
  padding:.4em .9em;
  border-radius:999px;
  background:#183429;
  color:#b9efd7;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  line-height:1
}

.showcase-board-state span{
  width:.45rem;
  height:.45rem;
  flex:0 0 auto;
  border-radius:50%;
  background:#69d5a8
}

.showcase-board-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-3);
  padding:var(--space-5) var(--space-6);
  background:#080d19;
  color:#eef2f6
}

.showcase-run{
  min-width:0;
  padding:var(--space-5);
  border-radius:var(--radius-md);
  background:#11192a;
  color:#eef2f6
}

.showcase-run-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3)
}

.showcase-run-top span{
  min-width:0;
  overflow-wrap:anywhere;
  color:#dce4ed;
  font-size:var(--fs-1)
}

.showcase-run-top .u-mono{
  color:#e69a68
}

.showcase-run dl{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-4);
  margin:var(--space-5) 0 0
}

.showcase-run dl div{
  min-width:0
}

.showcase-run dt{
  color:#8492a7;
  font-size:var(--fs-0)
}

.showcase-run dd{
  margin-top:var(--space-2);
  color:#eef2f6;
  font-family:var(--font-mono);
  overflow-wrap:anywhere
}

.showcase-run-track{
  height:.25rem;
  margin-top:var(--space-5);
  overflow:hidden;
  border-radius:999px;
  background:#263147;
  color:#eef2f6
}

.showcase-run-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#c45613
}

.showcase-board-foot{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
  background:#11192a;
  color:#9eabbc
}

.showcase-board-foot span{
  min-width:0;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  text-align:center;
  overflow-wrap:anywhere
}

.showcase-facts{
  padding-block:var(--space-7);
  background:#080d19;
  color:#eef2f6
}

.showcase-fact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0
}

.showcase-fact-grid div{
  min-width:0;
  padding-inline:var(--space-5)
}

.showcase-fact-grid div+div{
  border-left:1px solid rgba(151,166,191,.2)
}

.showcase-fact-grid dt{
  color:#8f9db0;
  font-family:var(--font-mono);
  font-size:var(--fs-0)
}

.showcase-fact-grid dd{
  margin-top:var(--space-2);
  color:#eef2f6;
  overflow-wrap:anywhere
}

.showcase-section{
  padding-block:var(--space-9)
}

.showcase-section .c-section-head>div{
  max-width:50rem
}

.showcase-section .c-section-head p{
  color:#9aa6b8
}

.showcase-catalog{
  background:#02050b;
  color:#eef2f6
}

.showcase-filter{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-bottom:var(--space-6)
}

.showcase-filter button{
  min-height:2.75rem;
  padding:.65rem 1rem;
  border:1px solid rgba(151,166,191,.34);
  border-radius:var(--radius-md);
  background:#0c1322;
  color:#bac5d3;
  font-family:var(--font-heading);
  font-size:var(--fs-1);
  line-height:1.25
}

.showcase-filter button:hover,
.showcase-filter button[aria-pressed="true"]{
  border-color:#c45613;
  background:#a13a00;
  color:#fff
}

.showcase-directory{
  display:grid;
  align-items:stretch
}

.showcase-directory-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  padding:var(--space-6);
  background:#151e31;
  color:#eef2f6
}

.showcase-directory-card h3{
  margin-top:var(--space-4)
}

.showcase-directory-card p{
  margin-top:var(--space-3);
  color:#9aa6b8
}

.showcase-directory-card a{
  width:fit-content;
  margin-top:auto;
  padding-top:var(--space-5);
  color:#e69a68;
  font-size:var(--fs-1);
  text-decoration:underline;
  text-underline-offset:4px
}

.showcase-case-section{
  scroll-margin-top:calc(var(--header-height) + var(--space-5));
  background:#080d19;
  color:#eef2f6;
  outline:none
}

.showcase-case-section.is-selected{
  box-shadow:inset 3px 0 #c45613
}

.showcase-case-alt{
  background:#02050b;
  color:#eef2f6
}

.showcase-case-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--space-7);
  align-items:start;
  margin-bottom:var(--space-7)
}

.showcase-case-head>div,
.showcase-case-meta{
  min-width:0
}

.showcase-case-head>div>p{
  max-width:48rem;
  margin-top:var(--space-4);
  color:#9aa6b8
}

.showcase-case-meta{
  margin:0;
  padding:var(--space-6);
  border-radius:var(--radius-md);
  background:#11192a;
  color:#eef2f6
}

.showcase-case-meta div{
  display:grid;
  grid-template-columns:minmax(7rem,.65fr) minmax(0,1fr);
  gap:var(--space-4);
  align-items:start
}

.showcase-case-meta div+div{
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid rgba(151,166,191,.2)
}

.showcase-case-meta dt,
.showcase-case-meta dd{
  min-width:0;
  overflow-wrap:anywhere
}

.showcase-case-meta dt{
  color:#8795a9
}

.showcase-case-meta dd{
  color:#eef2f6
}

.showcase-workflow{
  position:relative;
  display:grid
}

.showcase-workflow::before{
  position:absolute;
  top:1.4rem;
  bottom:1.4rem;
  left:1.25rem;
  z-index:0;
  width:1px;
  content:"";
  background:rgba(151,166,191,.25)
}

.workflow-row{
  display:grid;
  grid-template-columns:2.5rem minmax(7.5rem,11rem) minmax(0,1fr);
  gap:var(--space-3);
  align-items:start;
  min-width:0;
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid rgba(151,166,191,.2)
}

.workflow-index{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background:#a13a00;
  color:#fff;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  line-height:1
}

.workflow-row strong{
  padding-top:.35rem;
  color:#eef2f6;
  font-size:var(--fs-2)
}

.workflow-row p{
  color:#9aa6b8
}

.showcase-output-grid{
  display:grid;
  align-items:stretch;
  margin-top:var(--space-7);
  background:transparent;
  color:#eef2f6
}

.showcase-output-grid>.c-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  padding:var(--space-6);
  background:#151e31;
  color:#eef2f6
}

.showcase-output-grid h3,
.showcase-guidance h3,
.showcase-remote-grid h3{
  margin-top:var(--space-4)
}

.showcase-case-section .showcase-output-grid>.c-card{
  background:#f3f5f8;
  color:#131925
}

.showcase-case-section .showcase-remote-grid>.c-card{
  background:#e7ebf0;
  color:#131925
}

.showcase-case-section .showcase-output-grid>.c-card h3,
.showcase-case-section .showcase-remote-grid>.c-card h3{
  color:#131925
}

.showcase-case-section .showcase-output-grid>.c-card p,
.showcase-case-section .showcase-remote-grid>.c-card p{
  color:#4d586a
}

.showcase-quotes .showcase-quote-grid>.c-card{
  background:#1d2940;
  color:#eef2f6
}

.showcase-output-grid p,
.showcase-guidance p,
.showcase-remote-grid p{
  margin-top:var(--space-3);
  color:#9aa6b8
}

.showcase-runner-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--space-5);
  align-items:start
}

.showcase-register{
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:#11192a;
  color:#eef2f6
}

.showcase-register-head{
  padding:var(--space-5) var(--space-6);
  background:#a13a00;
  color:#fff
}

.showcase-register-head span{
  display:block;
  color:#ffe6d5;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  letter-spacing:.1em
}

.showcase-register-head strong{
  display:block;
  margin-top:var(--space-2);
  color:#fff;
  font-size:var(--fs-3)
}

.showcase-register dl{
  margin:0;
  padding:var(--space-3) var(--space-6) var(--space-6)
}

.showcase-register dl div{
  display:grid;
  grid-template-columns:minmax(7rem,.4fr) minmax(0,1fr);
  gap:var(--space-4);
  min-width:0;
  padding-block:var(--space-4);
  border-bottom:1px solid rgba(151,166,191,.2)
}

.showcase-register dt,
.showcase-register dd{
  min-width:0;
  overflow-wrap:anywhere
}

.showcase-register dt{
  color:#8795a9
}

.showcase-register dd{
  color:#eef2f6
}

.showcase-register code{
  color:#f0a878
}

.showcase-guidance{
  display:grid;
  gap:var(--space-4)
}

.showcase-guidance .c-card{
  min-width:0;
  padding:var(--space-6);
  background:#11192a;
  color:#eef2f6
}

.showcase-mlx-grid{
  display:grid;
  align-items:start
}

.showcase-budget{
  min-width:0;
  padding:var(--space-6);
  border-radius:var(--radius-md);
  background:#11192a;
  color:#eef2f6
}

.showcase-budget h3{
  margin-top:var(--space-4)
}

.showcase-budget>p{
  margin-top:var(--space-5);
  color:#9aa6b8
}

.showcase-budget-bars{
  display:grid;
  gap:var(--space-4);
  margin-top:var(--space-6)
}

.showcase-budget-bars div{
  min-width:0
}

.showcase-budget-bars div>span,
.showcase-budget-bars div>strong{
  display:inline-block;
  min-width:0;
  margin-bottom:var(--space-2);
  font-size:var(--fs-1)
}

.showcase-budget-bars div>span{
  color:#d7dfe9
}

.showcase-budget-bars div>strong{
  float:right;
  color:#9aa6b8;
  font-family:var(--font-mono);
  font-weight:500
}

.showcase-budget-bars i{
  display:block;
  clear:both;
  height:.45rem;
  border-radius:999px;
  background:#c45613
}

.showcase-budget-bars div{
  background:linear-gradient(to bottom,transparent calc(100% - .45rem),#263147 calc(100% - .45rem));
  color:#eef2f6
}

.showcase-notice{
  margin-top:var(--space-6);
  background:#17121a;
  color:#eef2f6
}

.showcase-notice p{
  color:#b8c2d0
}

.showcase-notice strong{
  color:#eef2f6
}

.showcase-media-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-4)
}

.showcase-media-flow article{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:var(--space-6);
  border-radius:var(--radius-md);
  background:#11192a;
  color:#eef2f6
}

.showcase-media-flow h3{
  margin-top:var(--space-4)
}

.showcase-media-flow p{
  margin-top:var(--space-3);
  color:#9aa6b8
}

.showcase-media-flow article>strong{
  margin-top:auto;
  padding-top:var(--space-5);
  color:#e69a68;
  font-size:var(--fs-1);
  overflow-wrap:anywhere
}

.showcase-table-wrap{
  margin-top:var(--space-7);
  border-color:rgba(151,166,191,.2)
}

.showcase-table-wrap .c-table{
  display:table;
  width:100%;
  color:#131925
}

.showcase-table-wrap caption{
  padding:var(--space-4);
  background:#dfe5ed;
  color:#131925;
  font-family:var(--font-heading);
  font-weight:650;
  text-align:left
}

.showcase-remote-grid{
  display:grid;
  align-items:stretch
}

.showcase-remote-grid>.c-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  padding:var(--space-6);
  background:#151e31;
  color:#eef2f6
}

.showcase-handoff{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--space-4);
  align-items:stretch
}

.showcase-shift,
.showcase-handoff-receipt{
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-md)
}

.showcase-shift{
  padding:var(--space-6);
  background:#11192a;
  color:#eef2f6
}

.showcase-shift-head span{
  color:#e69a68;
  font-size:var(--fs-0)
}

.showcase-shift-head strong{
  display:block;
  margin-top:var(--space-2);
  color:#eef2f6;
  font-size:var(--fs-3)
}

.showcase-shift ul{
  margin-top:var(--space-5);
  padding-inline-start:1.1rem;
  color:#aab5c5
}

.showcase-shift li+li{
  margin-top:var(--space-3)
}

.showcase-handoff-receipt{
  background:#f5f7fa;
  color:#131925
}

.showcase-handoff-receipt>span,
.showcase-handoff-receipt>strong{
  display:block;
  padding-inline:var(--space-6)
}

.showcase-handoff-receipt>span{
  padding-top:var(--space-6);
  color:#7b3514;
  font-family:var(--font-mono);
  font-size:var(--fs-0);
  letter-spacing:.1em
}

.showcase-handoff-receipt>strong{
  margin-top:var(--space-2);
  color:#131925;
  font-size:var(--fs-3)
}

.showcase-handoff-receipt dl{
  margin:var(--space-5) 0 0;
  padding:0 var(--space-6) var(--space-6)
}

.showcase-handoff-receipt dl div{
  display:grid;
  grid-template-columns:minmax(5rem,.35fr) minmax(0,1fr);
  gap:var(--space-4);
  min-width:0;
  padding-block:var(--space-3);
  border-bottom:1px solid color-mix(in srgb,#243047 14%,transparent)
}

.showcase-handoff-receipt dt,
.showcase-handoff-receipt dd{
  min-width:0;
  overflow-wrap:anywhere
}

.showcase-handoff-receipt dt{
  color:#586273
}

.showcase-handoff-receipt dd{
  color:#131925
}

.showcase-quotes{
  background:#11192a;
  color:#eef2f6
}

.showcase-quotes .c-section-head{
  justify-content:center
}

.showcase-quotes .c-section-head>div{
  margin-inline:auto
}

.showcase-quotes .c-kicker{
  margin-inline:auto
}

.showcase-quote-grid{
  display:grid;
  align-items:stretch
}

.showcase-quote{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  padding:var(--space-6);
  background:#0c1322;
  color:#eef2f6
}

.showcase-quote p{
  color:#d4dce6;
  font-size:var(--fs-3)
}

.showcase-quote cite{
  margin-top:auto;
  padding-top:var(--space-6);
  color:#e69a68;
  font-family:var(--font-mono);
  font-size:var(--fs-1);
  font-style:normal
}

.showcase-template{
  background:#02050b;
  color:#eef2f6
}

.showcase-template-table th:first-child,
.showcase-template-table td:first-child{
  width:18%;
  min-width:9rem
}

.showcase-template-actions{
  justify-content:flex-start;
  margin-top:var(--space-6)
}

.showcase-closing-section{
  padding-block:var(--space-9);
  background:#02050b;
  color:#eef2f6
}

.showcase-closing{
  padding:var(--space-7);
  background:#0c1322;
  color:#eef2f6
}

.showcase-closing>div:first-child{
  max-width:45rem;
  min-width:0
}

.showcase-closing h2{
  color:#eef2f6
}

.showcase-closing p{
  color:#9aa6b8
}

.showcase-closing-actions{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-3);
  min-width:min(100%,15rem)
}

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

@media(max-width:64rem){
  .showcase-fact-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-5)
  }

  .showcase-fact-grid div+div{
    border-left:0
  }

  .showcase-case-head,
  .showcase-runner-layout{
    grid-template-columns:minmax(0,1fr)
  }

  .showcase-media-flow{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .showcase-handoff{
    grid-template-columns:minmax(0,1fr)
  }
}

@media(max-width:42rem){
  .showcase-hero{
    padding-block:var(--space-8)
  }

  .showcase-hero-copy h1{
    max-width:none
  }

  .showcase-board{
    width:min(calc(100% - var(--gutter)*2),100%);
    margin-inline:auto;
    height:auto;
    overflow:hidden;
    transform:none
  }

  .showcase-board-head{
    align-items:flex-start;
    flex-direction:column
  }

  .showcase-board-grid{
    grid-template-columns:minmax(0,1fr)
  }

  .showcase-run dl{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .showcase-board-foot{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .showcase-fact-grid{
    grid-template-columns:minmax(0,1fr)
  }

  .showcase-fact-grid div{
    padding-inline:0
  }

  .showcase-section{
    padding-block:var(--space-8)
  }

  .workflow-row{
    grid-template-columns:2.25rem minmax(0,1fr);
    padding-inline:0
  }

  .workflow-row>:nth-child(3){
    grid-column:2
  }

  .showcase-workflow::before{
    left:1.125rem
  }

  .showcase-case-meta div,
  .showcase-register dl div,
  .showcase-handoff-receipt dl div{
    grid-template-columns:minmax(0,1fr)
  }

  .showcase-media-flow{
    grid-template-columns:minmax(0,1fr)
  }

  .showcase-template-actions .c-btn{
    flex:1 1 100%;
    width:100%
  }

  .showcase-closing-actions{
    width:100%;
    min-width:0
  }
}