.launch-hero { display:grid; gap:2rem; padding-block:2rem 2.5rem; }
.launch-visual { min-width:0; }
.launch-icon { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; width:1.5rem; height:1.5rem; }
.launch-stage { border:1px solid #d7e5fa; border-radius:.875rem; box-shadow:0 1rem 2.5rem #123b7410; overflow:hidden; background:#f7faff; container:launch-stage / inline-size; }
.launch-chrome { display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid #e0e9f6; font-size:.625rem; color:#657085; background:#f0f5fc; }
.launch-chrome > div { display:flex; gap:.25rem; }
.launch-chrome i { display:block; width:.3125rem; height:.3125rem; background:#9fb6d6; border-radius:50%; }
.launch-demo { font-size:.5625rem; }
.launch-workspace { padding:1.25rem; }
.launch-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; }
.launch-heading strong { font-size:.9375rem; }
.launch-heading small { display:block; margin-top:.375rem; font-size:.625rem; color:#657085; }
.launch-badge { font-size:.625rem; color:#147454; padding:.375rem .5rem; border-radius:.25rem; background:#e6f7ee; }
.launch-topology { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem; position:relative; margin-block:1.5rem; }
.launch-node { position:relative; z-index:1; display:flex; align-items:center; gap:.625rem; padding:.875rem .75rem; border:1px solid #d7e5fa; border-radius:.625rem; background:white; box-shadow:0 .375rem 1rem #204d900c; min-width:0; }
.launch-node > .launch-icon { color:var(--color-accent); }
.launch-node > div { flex:1; min-width:0; }
.launch-node strong { font-size:.75rem; line-height:1.35; display:block; overflow-wrap:anywhere; }
.launch-node small { font-size:.625rem; color:#657085; line-height:1.5; display:block; margin-top:.25rem; }
.node-check { color:#16835d; display:grid; }
.node-check svg { width:.75rem; height:.75rem; }
.launch-node--app,.launch-node--server,.launch-node--backup { grid-column:1/-1; }
.launch-node--server { grid-row:2; background:#edf5ff; border-color:#8cb8ff; }
.launch-node--database { grid-row:3; grid-column:1; }
.launch-node--files { grid-row:3; grid-column:2; }
.launch-node--database,.launch-node--files { flex-wrap:wrap; }
.launch-node--database > div,.launch-node--files > div { flex-basis:100%; order:3; }
.launch-node--database .node-check,.launch-node--files .node-check { margin-left:auto; }
.launch-node--backup { grid-row:4; border-color:#c2e6d4; }
.launch-node--backup > .launch-icon { color:#16835d; }
.launch-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.launch-lines path { fill:none; stroke:#8ab7ff; stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:0; }
.launch-https { position:absolute; z-index:2; font-size:.5625rem; color:var(--color-accent); background:#f7faff; border:1px solid #d7e5fa; border-radius:1rem; padding:.125rem .375rem; transform:translate(-50%,-50%); }
.launch-validation { padding:1rem; border:1px solid #e0e9f6; border-radius:.5rem; background:white; }
.launch-validation-title { display:flex; justify-content:space-between; gap:.5rem; font-size:.6875rem; }
.launch-count { color:#657085; }
.launch-checks { display:grid; gap:.625rem; margin-top:.875rem; }
.launch-check { display:flex; flex-wrap:wrap; align-items:center; gap:.375rem; font-size:.625rem; color:#657085; }
.launch-check .launch-icon { width:.875rem; height:.875rem; opacity:.3; }
.launch-check span { flex:1; }
.launch-check small { font-size:.5625rem; }
.launch-check.done .launch-icon,.launch-check.done small { color:#16835d; opacity:1; }
.launch-check.checking { color:var(--color-accent); }
.launch-release { display:flex; flex-wrap:wrap; gap:.625rem; align-items:center; margin-top:.75rem; padding:.875rem; border:1px solid #d0ecdd; border-radius:.5rem; color:#147454; background:#eaf8f1; }
.launch-release .launch-icon { width:1.25rem; height:1.25rem; }
.launch-release > div { min-width:0; flex:1; }
.launch-release strong { font-size:.75rem; }
.launch-release p { font-size:.625rem; line-height:1.6; margin-top:.25rem; }
.launch-release > span { font-size:.5625rem; }
.launch-story { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.625rem; list-style:none; padding:0; margin-top:1rem; }
.launch-story li { border-top:1px solid #acc9ff; padding-top:.625rem; color:#657085; font-size:.625rem; overflow-wrap:anywhere; }
.launch-story li span { display:block; font-size:.5625rem; margin-bottom:.25rem; }
.launch-story li.current { color:var(--color-accent); border-color:var(--color-accent); }
@container launch-stage (min-width:33rem) {
 .launch-workspace { padding:1.25rem 1.5rem; }
 .launch-topology { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem 1rem; margin-block:1.125rem; }
 .launch-node--app { grid-column:2; grid-row:1; }
 .launch-node--server { grid-column:2; grid-row:2; }
 .launch-node--database { grid-column:1; grid-row:2; }
 .launch-node--files { grid-column:3; grid-row:2; }
 .launch-node--backup { grid-column:2; grid-row:3; }
 .launch-node { padding:.625rem; }
 .launch-node--database,.launch-node--files { flex-wrap:nowrap; }
 .launch-node--database > div,.launch-node--files > div { flex-basis:auto; order:0; }
 .launch-node--database .node-check,.launch-node--files .node-check { margin-left:0; }
 .launch-validation { padding:.75rem 1rem; }
 .launch-checks { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.875rem; margin-top:.625rem; }
 .launch-check small { flex-basis:100%; margin-left:1.25rem; }
 .launch-release { padding:.625rem .875rem; }
}
@media (min-width:68.75rem) { .launch-hero { grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:3rem; align-items:center; padding-block:2.5rem 3rem; } }
@media (max-width:39.99rem) { .launch-workspace { padding:1rem; } .launch-hero { padding-top:1rem; } }
.cloud-player { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .625rem; margin-top: 1.5rem; min-height: 2.75rem; }
.cloud-player[hidden] { display: none; }
.cloud-player progress { width: 3.75rem; height: 2px; appearance: none; border: none; color: var(--color-accent); background: #e1eafa; }
.cloud-player progress::-webkit-progress-bar { background: #e1eafa; }
.cloud-player progress::-webkit-progress-value { background: var(--color-accent); }
.cloud-player progress::-moz-progress-bar { background: var(--color-accent); }
#launch-status { margin-right: auto; color: #46546a; font-size: .75rem; line-height: 1.5; }
.cloud-player button { min-height: 2.75rem; max-width: 100%; padding: .5rem .875rem; border: 1px solid var(--color-rule); border-radius: .375rem; background: #fff; color: var(--color-accent); font: inherit; font-size: .8125rem; cursor: pointer; }
.cloud-player button:hover:not(:disabled) { border-color: var(--color-accent); background: #f0f6ff; }
.cloud-player button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.cloud-player button:disabled { color: #6a7890; cursor: default; }
@media (width < 40rem) {
  #launch-status { width: 100%; }
  .cloud-player { justify-content: flex-start; }
  .cloud-player progress { margin-right: auto; }
}

.launch-badge.pending { color:#526079; background:#edf2f9; }

@media (min-width:68.75rem) { .cloud-page .launch-hero .support-title { font-size:clamp(2.25rem,3.2vw,2.75rem); } }