.lab-header { position: sticky; }
.lab-links { display: flex; gap: 8px; }
.lab-shell { width: min(calc(100% - 32px),1080px); margin-inline: auto; padding-block: 64px 100px; }
.lab-intro { max-inline-size: 760px; margin-block-end: 34px; }
.lab-intro h1 { margin-block: 10px 14px; font-size: clamp(40px,7vw,72px); line-height: 1.08; letter-spacing: -.035em; }
.lab-intro > p:last-child { color: var(--muted); font-size: 18px; }
.lab-login { padding: 24px; display: grid; grid-template-columns: minmax(260px,.8fr) minmax(320px,1.2fr); gap: 28px; align-items: end; }
.lab-login h2 { margin-block-end: 6px; }
.lab-login p { margin: 0; }
.lab-login form label { display: block; margin-block-end: 8px; color: var(--muted); font-size: 13px; }
.pin-row { display: grid; grid-template-columns: minmax(140px,.6fr) minmax(220px,1fr); gap: 8px; }
.pin-row input { text-align: center; font-size: 22px; letter-spacing: .16em; }
.lab-status { margin-block: 20px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lab-status > div { display: flex; align-items: center; gap: 10px; }
.lab-status small { color: var(--muted); }
.lab-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-block-end: 20px; }
.metric { min-block-size: 132px; padding: 18px; display: flex; flex-direction: column; }
.metric > span { color: var(--muted); font-size: 13px; }
.metric > strong { margin-block: auto; font-size: 34px; font-variant-numeric: tabular-nums; }
.metric > small { min-block-size: 20px; color: var(--ok); }
.scenario-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.scenario { min-block-size: 390px; padding: 24px; display: flex; flex-direction: column; }
.scenario-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 38px; color: var(--gold-hi); }
.scenario-head > span { color: var(--faint); letter-spacing: .14em; }
.scenario h2 { margin-block: 2px 10px; font-size: 28px; }
.scenario > p:not(.eyebrow) { color: var(--muted); }
.scenario-button { margin-block-start: auto; inline-size: 100%; }
.lab-result { min-block-size: 270px; margin-block-start: 12px; padding: 24px; }
.result-empty { min-block-size: 220px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--muted); text-align: center; }
.result-title { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
.result-title h2 { margin: 0; }
.result-title small { grid-column: 2; color: var(--faint); }
.comparison { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-block: 26px; }
.comparison article { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(4,10,27,.44); }
.comparison span { display: block; color: var(--muted); font-size: 12px; }
.comparison div { display: flex; align-items: baseline; gap: 8px; margin-block-start: 8px; }
.comparison s { color: var(--faint); font-size: 14px; }
.comparison strong { color: var(--ok); font-size: 24px; text-decoration: none; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width:800px) { .lab-login { grid-template-columns: 1fr; } .lab-metrics,.comparison { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .lab-header { padding-inline: 12px 110px; } .lab-links a:first-child { display: none; } .lab-shell { width: min(calc(100% - 24px),1080px); padding-block-start: 44px; } .pin-row,.scenario-grid { grid-template-columns: 1fr; } .scenario { min-block-size: 340px; } .lab-status { align-items: flex-start; } .lab-status > div { flex-wrap: wrap; } .lab-metrics,.comparison { grid-template-columns: 1fr 1fr; } .metric { min-block-size: 112px; padding: 14px; } .result-title { grid-template-columns: 1fr; } .result-title small { grid-column: 1; overflow-wrap: anywhere; } .result-actions .btn { inline-size: 100%; } }