/* OpenMilanese Infrastructure Lab v3.6.5 */
.lab-page { overflow-x: hidden; }
.lab-header .primary-nav { gap: .12rem; }
.lab-main { padding-bottom: 5rem; }
.lab-hero {
  min-height: auto;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}
.lab-hero h1 { max-width: 900px; }
.lab-hero-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(78,212,255,.14), transparent 19rem),
    linear-gradient(145deg, rgba(10,31,59,.93), rgba(3,13,28,.96));
  box-shadow: var(--shadow);
}
.lab-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(83,167,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(83,167,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(135deg, black, transparent 82%);
}
.lab-hero-panel > * { position: relative; z-index: 1; }
.lab-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--border); }
.lab-stat { min-height: 128px; padding: 1.05rem; background: rgba(4,16,32,.95); }
.lab-stat strong { display: block; color: #e6f3ff; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -.05em; }
.lab-stat span { display: block; margin-top: .55rem; color: #8da5bf; font-size: .78rem; }
.lab-privacy-note { margin: 1rem 0 0; color: #7890aa; font-size: .8rem; }
.lab-shell-section { padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid rgba(125,184,255,.08); }
.lab-intro-grid { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: clamp(1.5rem, 6vw, 6rem); margin-bottom: 2rem; }
.lab-intro-grid h2 { max-width: 900px; }
.lab-intro-grid p { max-width: 820px; margin: 1rem 0 0; color: var(--muted); }
.lab-app {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(5,20,40,.97), rgba(2,10,22,.98));
  box-shadow: 0 32px 90px rgba(0,0,0,.36);
}
.lab-app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background-image: linear-gradient(rgba(83,167,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(83,167,255,.025) 1px, transparent 1px);
  background-size: 30px 30px;
}
.lab-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(3,14,29,.9);
}
.lab-toolbar-left, .lab-toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.lab-toolbar-title { display: inline-flex; align-items: center; gap: .6rem; font-weight: 760; }
.lab-toolbar-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.lab-toolbar-status { color: #7690ab; font: 680 .67rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.lab-utility-button, .lab-action, .lab-chip-button, .lab-node, .lab-flow-toggle, .lab-component, .lab-choice, .lab-card-button, .lab-order-button {
  appearance: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.lab-utility-button {
  min-height: 38px;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: #abc0d5;
  background: rgba(8,25,47,.7);
}
.lab-utility-button:hover { color: #fff; border-color: var(--border-strong); }
.lab-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 720px; }
.lab-sidebar { padding: 1rem; border-right: 1px solid var(--border); background: rgba(2,11,24,.72); }
.lab-sidebar-heading { margin: 0 0 .8rem; color: #718ba7; font: 700 .68rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.lab-scenario-nav { display: grid; gap: .45rem; }
.lab-card-button {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: .7rem;
  align-items: center;
  min-height: 58px;
  padding: .65rem .7rem;
  border: 1px solid transparent;
  border-radius: 12px;
  text-align: left;
  background: transparent;
}
.lab-card-button:hover { background: rgba(125,184,255,.055); }
.lab-card-button[aria-current="true"] { border-color: var(--border-strong); background: linear-gradient(135deg, rgba(43,140,255,.15), rgba(78,212,255,.06)); }
.lab-card-index { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 9px; color: #63cfff; font: 720 .62rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(6,22,42,.85); }
.lab-card-button strong { display: block; color: #d8e9f8; font-size: .81rem; line-height: 1.25; }
.lab-card-button small { display: block; margin-top: .18rem; color: #6f88a4; font-size: .68rem; }
.lab-complete-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #56708c; }
.lab-card-button.is-complete .lab-complete-dot { border-color: #5ad7ff; background: #5ad7ff; box-shadow: 0 0 12px rgba(90,215,255,.7); }
.lab-workspace { min-width: 0; padding: clamp(1rem, 3vw, 2rem); }
.lab-overview { display: grid; gap: 1.2rem; }
.lab-overview-hero { padding: clamp(1.25rem, 3vw, 2.2rem); border: 1px solid var(--border); border-radius: var(--radius-md); background: radial-gradient(circle at 90% 0%, rgba(43,140,255,.13), transparent 23rem), rgba(5,20,40,.72); }
.lab-overview-hero h3 { margin: .35rem 0 .8rem; font-size: clamp(1.65rem, 3vw, 2.7rem); }
.lab-overview-hero p { max-width: 760px; margin: 0; color: var(--muted); }
.lab-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.lab-overview-card { padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(5,18,36,.66); }
.lab-overview-card span { color: #5ed2ff; font: 720 .64rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lab-overview-card strong { display: block; margin-top: .65rem; color: #deedfb; }
.lab-overview-card p { margin: .4rem 0 0; color: #7891ac; font-size: .8rem; }
.lab-scenario-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: start; padding-bottom: 1.35rem; border-bottom: 1px solid var(--border); }
.lab-scenario-header h2 { margin: .4rem 0 .65rem; font-size: clamp(1.75rem, 3.5vw, 3.15rem); }
.lab-scenario-header p { max-width: 800px; margin: 0; color: var(--muted); }
.lab-mode-badge { display: inline-flex; align-items: center; min-height: 32px; padding: .45rem .65rem; border: 1px solid var(--border-strong); border-radius: 999px; color: #80d9ff; font: 700 .64rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; background: rgba(43,140,255,.1); }
.lab-stage { margin-top: 1.4rem; }
.lab-panel { padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(4,17,34,.78); }
.lab-panel + .lab-panel { margin-top: 1rem; }
.lab-panel h3 { margin: 0 0 .5rem; color: #deedfb; font-size: 1.06rem; }
.lab-panel > p { margin: 0; color: #8da4bd; }
.lab-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.lab-action {
  min-height: 44px;
  padding: .68rem .92rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 720;
  background: rgba(8,25,47,.7);
}
.lab-action:hover { border-color: rgba(78,212,255,.55); transform: translateY(-1px); }
.lab-action-primary { color: #fff; border-color: rgba(75,178,255,.52); background: linear-gradient(135deg, #176fe5, #159bd5); }
.lab-action:disabled, .lab-chip-button:disabled, .lab-order-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.lab-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.lab-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
.lab-field { display: grid; gap: .45rem; }
.lab-field label, .lab-field legend { color: #b7cbdd; font-size: .82rem; font-weight: 680; }
.lab-field input[type="range"] { width: 100%; accent-color: var(--blue); }
.lab-field select, .lab-terminal-input {
  width: 100%;
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #e8f4ff;
  background: #06152a;
  font: inherit;
}
.lab-field-output { color: #63d4ff; font: 720 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lab-choice-list { display: grid; gap: .6rem; margin-top: 1rem; }
.lab-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  gap: .7rem;
  align-items: start;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
  background: rgba(6,21,41,.7);
}
.lab-choice:hover { border-color: var(--border-strong); }
.lab-choice[aria-pressed="true"] { border-color: rgba(78,212,255,.55); background: rgba(43,140,255,.12); }
.lab-choice-mark { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #526e8b; border-radius: 6px; color: transparent; }
.lab-choice[aria-pressed="true"] .lab-choice-mark { color: #fff; border-color: var(--cyan); background: rgba(43,140,255,.65); }
.lab-choice strong { display: block; color: #dbeaf8; }
.lab-choice small { display: block; margin-top: .25rem; color: #7891ac; }
.lab-result { margin-top: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--border-strong); border-radius: 14px; background: linear-gradient(135deg, rgba(10,37,68,.82), rgba(4,17,34,.88)); }
.lab-result[data-level="good"] { border-color: rgba(78,212,255,.48); }
.lab-result[data-level="warn"] { border-color: rgba(255,202,96,.42); }
.lab-result h3 { margin: 0 0 .4rem; }
.lab-result p { margin: 0; color: #9fb5ca; }
.lab-result ul { margin: .7rem 0 0; padding-left: 1.1rem; color: #91a9c0; }
.lab-result li + li { margin-top: .35rem; }
.lab-score-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; margin-top: 1rem; }
.lab-score-card { padding: .8rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(3,14,29,.8); }
.lab-score-card span { display: block; color: #6f89a5; font-size: .68rem; }
.lab-score-card strong { display: block; margin-top: .35rem; color: #dcecff; }
.lab-progress { height: 8px; margin-top: .55rem; overflow: hidden; border-radius: 999px; background: rgba(125,184,255,.1); }
.lab-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #176fe5, #4ed4ff); transition: width .35s ease; }

/* Scenario 1: topology */
.lab-topology { position: relative; min-height: 420px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(43,140,255,.11), transparent 23rem), rgba(2,12,25,.8); }
.lab-topology svg { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(93,166,235,.45); stroke-width: 2; }
.lab-node { position: absolute; width: 128px; min-height: 70px; padding: .7rem; border: 1px solid var(--border); border-radius: 13px; color: #dcecff; text-align: center; background: rgba(6,23,45,.95); box-shadow: 0 12px 28px rgba(0,0,0,.2); transform: translate(-50%, -50%); }
.lab-node span { display: block; margin-top: .2rem; color: #708aa7; font-size: .66rem; }
.lab-node:hover { border-color: var(--border-strong); }
.lab-node[aria-pressed="true"] { border-color: var(--cyan); background: linear-gradient(135deg, rgba(43,140,255,.28), rgba(8,28,52,.96)); box-shadow: 0 0 28px rgba(43,140,255,.17); }
.lab-node[data-state="shared"]::after { content: "shared"; position: absolute; top: -9px; right: -7px; padding: .22rem .4rem; border: 1px solid rgba(255,202,96,.35); border-radius: 999px; color: #ffd47f; background: #142035; font: 700 .55rem/1 ui-monospace, monospace; }

/* Reorder scenarios */
.lab-order-list { display: grid; gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.lab-order-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: .7rem; align-items: center; padding: .7rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(5,19,38,.76); }
.lab-order-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #65d2ff; background: rgba(43,140,255,.12); font: 720 .67rem/1 ui-monospace, monospace; }
.lab-order-item strong { display: block; color: #dcebf9; font-size: .86rem; }
.lab-order-item small { display: block; margin-top: .2rem; color: #758eaa; }
.lab-order-controls { display: flex; gap: .35rem; }
.lab-order-button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; color: #9cb4ca; background: rgba(8,25,47,.75); }

/* Observability */
.lab-budget { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.lab-budget strong { color: #e4f1fd; }
.lab-signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .65rem; }
.lab-chip-button { min-height: 84px; padding: .75rem; border: 1px solid var(--border); border-radius: 12px; text-align: left; background: rgba(5,19,38,.72); }
.lab-chip-button:hover { border-color: var(--border-strong); }
.lab-chip-button[aria-pressed="true"] { border-color: var(--cyan); background: rgba(43,140,255,.13); }
.lab-chip-button strong { display: block; color: #dceaf8; font-size: .83rem; }
.lab-chip-button small { display: block; margin-top: .25rem; color: #718aa6; }

/* Animated load balancer */
.lab-traffic-stage { position: relative; min-height: 300px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: rgba(2,12,25,.85); }
.lab-traffic-client, .lab-traffic-lb, .lab-traffic-backend { position: absolute; display: grid; place-items: center; min-width: 105px; min-height: 62px; padding: .6rem; border: 1px solid var(--border); border-radius: 12px; color: #dcecff; text-align: center; background: rgba(6,23,45,.96); }
.lab-traffic-client { left: 7%; top: 50%; transform: translateY(-50%); }
.lab-traffic-lb { left: 43%; top: 50%; transform: translate(-50%,-50%); border-color: var(--border-strong); }
.lab-traffic-backend[data-node="a"] { right: 6%; top: 25%; transform: translateY(-50%); }
.lab-traffic-backend[data-node="b"] { right: 6%; top: 75%; transform: translateY(-50%); }
.lab-traffic-backend.is-degraded { border-color: rgba(255,202,96,.5); }
.lab-traffic-line { position: absolute; height: 2px; transform-origin: left center; background: rgba(78,212,255,.25); }
.lab-packet { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(78,212,255,.8); animation: lab-packet 1.6s linear infinite; }
@keyframes lab-packet { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* DNS timeline */
.lab-dns-timeline { display: grid; gap: .65rem; margin-top: 1rem; }
.lab-resolver-row { display: grid; grid-template-columns: 120px minmax(0,1fr) 90px; gap: .7rem; align-items: center; }
.lab-resolver-row strong { color: #b9cde0; font-size: .78rem; }
.lab-resolver-track { height: 18px; overflow: hidden; border-radius: 999px; background: rgba(125,184,255,.08); }
.lab-resolver-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255,202,96,.75), rgba(78,212,255,.85)); }
.lab-resolver-row span:last-child { color: #7390ad; font: 680 .66rem/1.2 ui-monospace, monospace; text-align: right; }

/* Flow matrix */
.lab-flow-table { width: 100%; border-collapse: separate; border-spacing: 0 .45rem; }
.lab-flow-table th { padding: 0 .55rem .35rem; color: #6f89a5; font: 700 .65rem/1.2 ui-monospace, monospace; text-align: left; text-transform: uppercase; }
.lab-flow-table td { padding: .65rem .55rem; background: rgba(5,19,38,.7); color: #9eb4c9; font-size: .78rem; }
.lab-flow-table td:first-child { border-radius: 10px 0 0 10px; color: #dcebf9; }
.lab-flow-table td:last-child { border-radius: 0 10px 10px 0; }
.lab-flow-toggle { min-width: 88px; min-height: 34px; border: 1px solid var(--border); border-radius: 999px; color: #9ab2c8; background: rgba(7,23,44,.8); }
.lab-flow-toggle[aria-pressed="true"] { color: #fff; border-color: rgba(78,212,255,.5); background: rgba(43,140,255,.28); }

/* Deploy */
.lab-deploy-track { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .5rem; margin-top: 1rem; }
.lab-deploy-step { min-height: 74px; padding: .7rem; border: 1px solid var(--border); border-radius: 11px; color: #718aa6; background: rgba(5,19,38,.72); transition: .25s ease; }
.lab-deploy-step strong { display: block; color: #a9bed2; font-size: .78rem; }
.lab-deploy-step.is-active { border-color: var(--cyan); color: #a9c5dd; background: rgba(43,140,255,.13); }
.lab-deploy-step.is-done { border-color: rgba(78,212,255,.32); color: #8da8c0; }

/* Capacity */
.lab-capacity-gauges { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; margin-top: 1rem; }
.lab-gauge { padding: .8rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(4,17,34,.8); }
.lab-gauge span { display: block; color: #708aa7; font-size: .68rem; }
.lab-gauge strong { display: block; margin-top: .35rem; color: #dfedf9; font-size: 1.25rem; }
.lab-gauge[data-state="warn"] { border-color: rgba(255,202,96,.42); }
.lab-gauge[data-state="bad"] { border-color: rgba(255,104,104,.45); }

/* Terminal */
.lab-terminal { overflow: hidden; border: 1px solid #243d59; border-radius: 15px; background: #010711; box-shadow: inset 0 0 0 1px rgba(255,255,255,.015); }
.lab-terminal-bar { display: flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .8rem; border-bottom: 1px solid #1a3049; background: #071526; }
.lab-terminal-dot { width: 9px; height: 9px; border-radius: 50%; background: #38516b; }
.lab-terminal-title { margin-left: .45rem; color: #7891aa; font: 680 .65rem/1 ui-monospace, monospace; }
.lab-terminal-output { min-height: 330px; max-height: 460px; overflow: auto; padding: 1rem; color: #b8d2e7; font: 500 .76rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.lab-terminal-line { margin: 0 0 .35rem; }
.lab-terminal-command { color: #5dd4ff; }
.lab-terminal-error { color: #ffb58f; }
.lab-terminal-form { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .55rem; padding: .75rem; border-top: 1px solid #1a3049; }
.lab-terminal-prompt { color: #61d8ff; font: 700 .76rem/1 ui-monospace, monospace; }
.lab-terminal-input { min-height: 40px; border-color: #203a55; border-radius: 7px; background: #020a15; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Architecture builder */
.lab-component-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.lab-component { min-height: 118px; padding: .8rem; border: 1px solid var(--border); border-radius: 12px; text-align: left; background: rgba(5,19,38,.72); }
.lab-component:hover { border-color: var(--border-strong); }
.lab-component[aria-pressed="true"] { border-color: var(--cyan); background: rgba(43,140,255,.13); }
.lab-component-head { display: flex; justify-content: space-between; gap: .6rem; }
.lab-component strong { color: #dcebf9; font-size: .82rem; }
.lab-component-cost { color: #5ed3ff; font: 720 .66rem/1.2 ui-monospace, monospace; }
.lab-component p { margin: .45rem 0 0; color: #738ca8; font-size: .72rem; }
.lab-budget-meter { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .7rem; align-items: center; margin-bottom: 1rem; }
.lab-budget-meter span { color: #8fa8bf; font-size: .75rem; }
.lab-architecture-preview { min-height: 170px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; padding: 1rem; border: 1px dashed rgba(125,184,255,.23); border-radius: 15px; background: rgba(2,12,25,.62); }
.lab-architecture-preview span { padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 9px; color: #b6cadd; background: rgba(7,24,45,.86); font-size: .75rem; }
.lab-architecture-preview i { color: #456784; font-style: normal; }

.lab-noscript { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(255,202,96,.35); border-radius: 12px; color: #d6bc84; background: rgba(48,36,10,.25); }
.lab-method { padding-block: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid rgba(125,184,255,.08); }
.lab-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.lab-method-card { padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(5,19,38,.7); }
.lab-method-card span { color: #62d2ff; font: 720 .66rem/1.2 ui-monospace, monospace; }
.lab-method-card h3 { margin: .65rem 0 .45rem; }
.lab-method-card p { margin: 0; color: #829ab3; font-size: .86rem; }

@media (max-width: 1080px) {
  .lab-layout { grid-template-columns: 240px minmax(0,1fr); }
  .lab-overview-grid, .lab-signal-grid, .lab-component-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .lab-hero { grid-template-columns: 1fr; }
  .lab-layout { grid-template-columns: 1fr; }
  .lab-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .lab-scenario-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lab-card-button { min-height: 66px; }
  .lab-intro-grid { grid-template-columns: 1fr; }
  .lab-method-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lab-toolbar, .lab-scenario-header { grid-template-columns: 1fr; align-items: stretch; }
  .lab-toolbar { flex-direction: column; align-items: stretch; }
  .lab-toolbar-right .lab-utility-button { flex: 1 1 auto; }
  .lab-grid-2, .lab-grid-3, .lab-overview-grid, .lab-signal-grid, .lab-component-grid, .lab-score-row, .lab-capacity-gauges { grid-template-columns: 1fr; }
  .lab-scenario-nav { grid-template-columns: 1fr; }
  .lab-deploy-track { grid-template-columns: 1fr; }
  .lab-resolver-row { grid-template-columns: 90px minmax(0,1fr); }
  .lab-resolver-row span:last-child { grid-column: 2; text-align: left; }
  .lab-flow-table { display: block; overflow-x: auto; }
  .lab-topology { min-height: 520px; }
  .lab-node { width: 112px; min-height: 62px; font-size: .78rem; }
  .lab-terminal-form { grid-template-columns: auto minmax(0,1fr); }
  .lab-terminal-form .lab-action { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .lab-stat-grid { grid-template-columns: 1fr; }
  .lab-workspace { padding: .75rem; }
  .lab-panel { padding: .85rem; }
  .lab-order-item { grid-template-columns: 30px minmax(0,1fr); }
  .lab-order-controls { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-packet { animation: none; }
  .lab-progress > span, .lab-deploy-step { transition: none; }
}

/* v3.5.0 mobile navigation refinement */
.lab-workspace { scroll-margin-top: calc(var(--header-height) + 12px); }
@media (max-width: 900px) {
  .lab-scenario-nav {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    padding-bottom: .45rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .lab-card-button {
    flex: 0 0 min(290px, 82vw);
    scroll-snap-align: start;
  }
}
@media (max-width: 900px) {
  .lab-layout { grid-template-columns: minmax(0, 1fr); }
  .lab-sidebar, .lab-workspace { min-width: 0; }
}

/* v3.6.1 — score summary, stable live controls and simulation fixes */
.lab-intro-grid > .section-kicker { color: #79cfff; }
.lab-helper { margin-top: .45rem !important; color: #829bb5 !important; font-size: .82rem; }
.lab-stage-controls { margin-top: 1rem; }
.lab-subheading { margin-top: 1.35rem !important; }
.is-hidden { display: none !important; }

.lab-score-head { display: grid; gap: .28rem; }
.lab-score-card .lab-score-head span { color: #6f89a5; font-size: .68rem; }
.lab-score-card .lab-score-head strong { margin: 0; color: #dcecff; font-size: .85rem; line-height: 1.35; }
.lab-result-list li.is-good::marker { color: #5ad7ff; }
.lab-result-list li.is-bad::marker { color: #ff9b86; }
.lab-result-list li.is-info::marker { color: #ffd47f; }
.lab-result-list li.is-bad { color: #d7a293; }
.lab-result-list li.is-good { color: #9fc9dd; }

/* Topology uses real grid cells; SVG edges are recalculated from rendered nodes. */
.lab-topology-responsive {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    ". internet internet ."
    ". hypervisor hypervisor ."
    "lb1 lb1 lb2 lb2"
    "app1 app1 app2 app2"
    "db1 db1 db2 db2"
    ". storage storage .";
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.2rem) clamp(.8rem, 2vw, 1.5rem);
  min-height: 0;
  padding: clamp(1.3rem, 4vw, 2.5rem);
  overflow: visible;
}
.lab-topology-responsive svg { z-index: 0; pointer-events: none; }
.lab-topology-responsive svg line { stroke: rgba(93,166,235,.45); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lab-topology-responsive .lab-node-grid {
  position: relative;
  z-index: 1;
  inset: auto;
  width: min(100%, 150px);
  min-height: 68px;
  justify-self: center;
  transform: none;
}
.lab-topology-responsive .lab-node-grid[data-id="internet"],
.lab-topology-responsive .lab-node-grid[data-id="hypervisor"],
.lab-topology-responsive .lab-node-grid[data-id="storage"] { width: min(100%, 170px); }

.lab-inline-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .8rem;
  margin-bottom: 1rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(78,212,255,.28);
  border-radius: 12px;
  color: #9fb7cc;
  background: rgba(43,140,255,.08);
}
.lab-inline-callout strong { color: #ddecfa; }
.lab-inline-callout span { font-size: .8rem; }
.lab-check-row { display: flex; align-items: flex-start; gap: .65rem; margin-top: 1rem; color: #a9bfd3; font-size: .82rem; }
.lab-check-row input { margin-top: .16rem; accent-color: var(--blue); }

.lab-metric-grid, .lab-live-metrics, .lab-capacity-dashboard, .lab-terminal-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}
.lab-gauge small { display: block; margin-top: .38rem; color: #7e97b0; font-size: .69rem; }
.lab-gauge em { display: block; margin-top: .45rem; color: #7fdcff; font: 700 .64rem/1.2 ui-monospace, monospace; font-style: normal; text-transform: uppercase; }
.lab-gauge[data-state="good"] { border-color: rgba(78,212,255,.32); }

.lab-cutover-timeline {
  display: flex;
  align-items: stretch;
  gap: .55rem;
  margin-top: 1rem;
}
.lab-cutover-timeline > i { align-self: center; color: #456b8c; font-style: normal; }
.lab-cutover-step { flex: 1 1 0; min-width: 0; padding: .75rem; border: 1px solid var(--border); border-radius: 11px; background: rgba(5,19,38,.72); }
.lab-cutover-step strong { display: block; color: #65d3ff; font: 720 .69rem/1.2 ui-monospace, monospace; }
.lab-cutover-step span { display: block; margin-top: .35rem; color: #a9bfd3; font-size: .76rem; }

.lab-live-metrics { grid-template-columns: repeat(4, minmax(0,1fr)); }
.lab-live-metric { min-width: 0; padding: .8rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(4,17,34,.82); }
.lab-live-metric span { display: block; color: #708aa7; font-size: .68rem; }
.lab-live-metric strong { display: block; margin-top: .35rem; color: #dfedf9; font-size: 1.15rem; overflow-wrap: anywhere; }
.lab-live-metric[data-state="good"] { border-color: rgba(78,212,255,.3); }
.lab-live-metric[data-state="warn"] { border-color: rgba(255,202,96,.45); }
.lab-live-metric[data-state="bad"] { border-color: rgba(255,104,104,.55); }
.lab-stream { margin-top: 1rem; overflow: hidden; border: 1px solid #243d59; border-radius: 14px; background: #010711; }
.lab-stream-header { display: flex; justify-content: space-between; gap: .8rem; padding: .65rem .8rem; border-bottom: 1px solid #1a3049; background: #071526; }
.lab-stream-header strong { color: #c9deef; font-size: .8rem; }
.lab-stream-header span { color: #708ba6; font-size: .68rem; }
.lab-stream-output { height: 280px; min-height: 280px; max-height: 280px; overflow: auto; padding: .8rem; color: #a9c5da; font: 500 .73rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lab-stream-line { padding: .1rem 0; }
.lab-stream-line.is-ok { color: #9bc8dc; }
.lab-stream-line.is-warn { color: #ffd18a; }
.lab-stream-line.is-bad { color: #ff9f8a; }
.lab-stream-line.is-event { color: #61d8ff; }
.lab-live-actions { position: sticky; bottom: .6rem; z-index: 3; padding: .7rem; border: 1px solid rgba(125,184,255,.14); border-radius: 12px; background: rgba(3,14,29,.94); backdrop-filter: blur(8px); }

.lab-load-test-track { height: 12px; margin-top: 1rem; overflow: hidden; border-radius: 999px; background: rgba(125,184,255,.1); }
.lab-load-test-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #176fe5, #4ed4ff); transition: width .35s ease; }
.lab-load-test-label { display: block; margin: .45rem 0 1rem; color: #62d6ff; font: 720 .74rem/1.2 ui-monospace, monospace; text-align: right; }
.lab-capacity-dashboard { grid-template-columns: repeat(3, minmax(0,1fr)); margin-bottom: 1rem; }
.lab-subsection { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }

.lab-terminal-status-grid { margin: 0 0 1rem; }
.lab-terminal-note { color: #7fdcff; }
.lab-evidence-panel { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 13px; background: rgba(3,14,29,.65); }
.lab-evidence-panel h3 { margin-bottom: .7rem; }
.lab-evidence-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.lab-evidence { display: inline-flex; align-items: center; min-height: 30px; padding: .38rem .55rem; border: 1px solid var(--border); border-radius: 999px; color: #6f89a5; font-size: .7rem; background: rgba(5,19,38,.65); }
.lab-evidence.is-collected { border-color: rgba(78,212,255,.38); color: #b8dff0; background: rgba(43,140,255,.1); }

.lab-overview-card { appearance: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.lab-overview-card:hover { border-color: var(--border-strong); background: rgba(43,140,255,.08); }


.lab-score-summary-heading { margin: 1.4rem 0 .8rem; color: #c9deef; font-size: .9rem; }
.lab-score-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; margin-top: 1.2rem; }
.lab-score-summary-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .35rem .65rem; align-items: start; min-width: 0; padding: .9rem; border: 1px solid var(--border); border-radius: 12px; color: inherit; background: rgba(5,19,38,.72); font: inherit; text-align: left; cursor: pointer; }
.lab-score-summary-card:hover { border-color: var(--border-strong); background: rgba(43,140,255,.08); }
.lab-score-summary-card > strong { color: #dbeaf6; }
.lab-score-summary-card > small { grid-column: 2; color: #718ba5; }
.lab-score-summary-index { color: #61d7ff; font: 720 .68rem/1.3 ui-monospace, monospace; }
.lab-score-summary-values { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .28rem .6rem; margin-top: .25rem; color: #86a1ba; font-size: .69rem; }
/* v3.6.4 — editorial takeaways aligned with the rest of the site */
.lab-learning-section { padding-block: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid rgba(125,184,255,.08); }
.lab-learning-layout { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr); gap: clamp(1.5rem,6vw,6rem); align-items: start; }
.lab-learning-layout > .section-kicker { padding-top: .55rem; }
.lab-learning-content { max-width: 920px; }
.lab-learning-content h2 { max-width: 900px; }
.lab-learning-lead { max-width: 820px; margin: 1.25rem 0 0; color: #c2d4e3; font-size: clamp(1.03rem,1.35vw,1.16rem); line-height: 1.72; }
.lab-learning-prose { max-width: 820px; margin-top: clamp(2rem,4vw,3rem); }
.lab-learning-prose p { margin: 0; color: #91a9bf; font-size: .94rem; line-height: 1.82; }
.lab-learning-prose p + p { margin-top: 1.15rem; }
.lab-learning-prose .lab-learning-note { margin-top: 1.65rem; padding-top: 1.35rem; border-top: 1px solid rgba(125,184,255,.14); color: #b3c7d8; }

@media (max-width: 900px) {
  .lab-topology-responsive { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-areas: "internet internet" "hypervisor hypervisor" "lb1 lb2" "app1 app2" "db1 db2" "storage storage"; gap: 1.25rem .7rem; min-height: 0; }
  .lab-topology-responsive .lab-node-grid { width: min(100%, 138px); min-height: 62px; }
  .lab-metric-grid, .lab-live-metrics, .lab-capacity-dashboard, .lab-terminal-status-grid, .lab-score-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lab-cutover-timeline { display: grid; grid-template-columns: 1fr; }
  .lab-cutover-timeline > i { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 560px) {
  .lab-topology-responsive { padding: 1rem .55rem; }
  .lab-topology-responsive .lab-node-grid { width: min(100%, 122px); padding: .55rem .35rem; font-size: .75rem; }
  .lab-metric-grid, .lab-live-metrics, .lab-capacity-dashboard, .lab-terminal-status-grid { grid-template-columns: 1fr; }
  .lab-stream-header { display: grid; }
  .lab-stream-output { height: 230px; min-height: 230px; max-height: 230px; }
  .lab-score-summary-grid, .lab-score-summary-values { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .lab-learning-layout { grid-template-columns: 1fr; gap: 1.2rem; }
  .lab-learning-layout > .section-kicker { padding-top: 0; }
  .lab-learning-prose { margin-top: 1.75rem; }
}

/* v3.6.3 — mobile scenario navigation and responsive scenarios 5/7 */
.lab-mobile-navigator { display: none; }
.lab-mobile-nav-button, .lab-mobile-select, .lab-flow-row {
  appearance: none;
  color: inherit;
  font: inherit;
}
.lab-mobile-nav-button {
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #b9d1e5;
  background: rgba(7,24,45,.92);
  cursor: pointer;
}
.lab-mobile-nav-button:disabled { opacity: .35; cursor: not-allowed; }
.lab-mobile-picker { display: grid; min-width: 0; gap: .28rem; }
.lab-mobile-position { color: #66d4ff; font: 720 .64rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; }
.lab-mobile-select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .55rem 2rem .55rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: #dbeaf7;
  background: #07182d;
  cursor: pointer;
  text-overflow: ellipsis;
}

.lab-traffic-stage-responsive {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "client proxy app1"
    "client proxy app2";
  align-items: center;
  gap: clamp(1.2rem, 4vw, 2.6rem) clamp(1rem, 5vw, 4rem);
  min-height: 330px;
  padding: clamp(1.3rem, 4vw, 2.4rem);
}
.lab-traffic-stage-responsive > svg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lab-traffic-stage-responsive .lab-traffic-grid-node {
  position: relative;
  z-index: 1;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  width: min(100%, 145px);
  min-width: 0;
  min-height: 68px;
  justify-self: center;
  transform: none;
}
.lab-traffic-stage-responsive .lab-traffic-grid-node small { display: block; margin-top: .22rem; color: #7893ad; }
.lab-traffic-path { fill: none; stroke: rgba(78,212,255,.36); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lab-traffic-path.is-degraded { stroke: rgba(255,202,96,.42); stroke-dasharray: 6 5; }
.lab-traffic-packet { fill: #59d7ff; filter: drop-shadow(0 0 5px rgba(78,212,255,.9)); }
.lab-traffic-packet.is-degraded { fill: #ffd178; filter: drop-shadow(0 0 5px rgba(255,202,96,.75)); }
.lab-traffic-stage-responsive[data-result="optimal"] .lab-traffic-backend.is-degraded { border-color: rgba(78,212,255,.38); }

.lab-flow-list { display: grid; gap: .5rem; }
.lab-flow-list-header, .lab-flow-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(90px, .75fr) minmax(105px, .7fr);
  gap: .75rem;
  align-items: center;
}
.lab-flow-list-header { padding: 0 .8rem .2rem; color: #6f89a5; font: 700 .65rem/1.2 ui-monospace, monospace; text-transform: uppercase; }
.lab-flow-row {
  width: 100%;
  min-width: 0;
  padding: .78rem .8rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  text-align: left;
  background: rgba(5,19,38,.72);
  cursor: pointer;
}
.lab-flow-row:hover { border-color: var(--border-strong); background: rgba(43,140,255,.07); }
.lab-flow-row[aria-pressed="true"] { border-color: rgba(78,212,255,.42); background: rgba(43,140,255,.12); }
.lab-flow-route, .lab-flow-service, .lab-flow-state { min-width: 0; }
.lab-flow-route strong { color: #dcebf9; font-size: .8rem; font-weight: 700; word-break: normal; overflow-wrap: normal; hyphens: none; }
.lab-flow-service { color: #91a9bf; font: 680 .72rem/1.3 ui-monospace, monospace; white-space: nowrap; }
.lab-flow-state { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 34px; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 999px; color: #9ab2c8; background: rgba(7,23,44,.8); white-space: nowrap; }
.lab-flow-row[aria-pressed="true"] .lab-flow-state { color: #eaf7ff; border-color: rgba(78,212,255,.5); background: rgba(43,140,255,.25); }
.lab-flow-state-icon { width: 1em; text-align: center; font-weight: 800; }
.lab-flow-assessment { grid-column: 1 / -1; display: block; color: #7f9ab3; font-size: .7rem; }
.lab-flow-assessment:empty { display: none; }
.lab-flow-row.is-correct { border-color: rgba(78,212,255,.32); }
.lab-flow-row.is-correct .lab-flow-assessment { color: #8fc4d9; }
.lab-flow-row.is-missing, .lab-flow-row.is-overexposed { border-color: rgba(255,112,96,.55); background: rgba(93,27,27,.18); }
.lab-flow-row.is-missing .lab-flow-assessment, .lab-flow-row.is-overexposed .lab-flow-assessment { color: #ffac99; }

@media (max-width: 900px) {
  .lab-sidebar { display: none; }
  .lab-mobile-navigator {
    position: sticky;
    z-index: 12;
    top: calc(var(--header-height) + .35rem);
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: .55rem;
    align-items: end;
    padding: .65rem;
    border-bottom: 1px solid var(--border);
    background: rgba(2,12,25,.94);
    backdrop-filter: blur(12px);
  }
  .lab-workspace { scroll-margin-top: calc(var(--header-height) + 86px); }
}

@media (max-width: 720px) {
  .lab-flow-list-header { display: none; }
  .lab-flow-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem .6rem;
    padding: .78rem;
  }
  .lab-flow-route { grid-column: 1; grid-row: 1; }
  .lab-flow-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 94px; }
  .lab-flow-service { grid-column: 1; grid-row: 2; }
  .lab-flow-assessment { grid-column: 1 / -1; grid-row: 3; padding-top: .25rem; }
}

@media (max-width: 560px) {
  .lab-traffic-stage-responsive {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "client" "proxy" "app1" "app2";
    gap: 1.35rem;
    min-height: 510px;
    padding: 1.1rem .8rem;
  }
  .lab-traffic-stage-responsive .lab-traffic-grid-node { width: min(100%, 165px); min-height: 62px; }
  .lab-mobile-select { font-size: .78rem; }
  .lab-flow-route strong { font-size: .75rem; }
  .lab-flow-state { min-width: 88px; padding-inline: .45rem; font-size: .74rem; }
}