* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
.live-wrap { width: min(100% - 40px, 980px); margin-inline: auto; }
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 10000; padding: 12px; background: #050508; }
.skip-link:focus { top: 12px; }
.live-header { border-bottom: 1px solid var(--line); }
.live-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 90px; }
.logo { display: inline-flex; }
.logo img { width: 190px; height: auto; }
.live-label, .shell-label { color: var(--muted); font: 12px/1.5 monospace; letter-spacing: .12em; }
.live-intro { padding: 64px 0 32px; max-width: 770px; }
.kicker { margin: 0 0 20px; font-size: 12px; }
h1 { margin: 0 0 20px; font-size: clamp(48px, 8vw, 88px); line-height: 1.02; }
h1 span { color: var(--accent); }
.live-lead { margin: 0 0 12px; font-size: clamp(20px, 3vw, 25px); font-weight: 700; }
.live-description { margin: 0; max-width: 650px; color: var(--muted); font-size: 18px; }
.install-panel { border: 1px solid var(--line); background: var(--bg-soft); }
.install-panel__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.install-panel__bar h2 { margin: 0; font: 700 12px/1.5 monospace !important; letter-spacing: .08em !important; }
.install-panel__bar h2 span { color: var(--accent); margin-right: 12px; }
.install-panel__body { padding: 28px; }
pre { margin: 0 0 24px; padding: 24px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); font: 15px/1.9 monospace; }
code { font: inherit; user-select: text; }
#copy-command { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 16px 30px; font-size: 15px; cursor: pointer; }
#copy-command[hidden] { display: none; }
#copy-command:focus-visible { clip-path: none; }
.copy-status { min-height: 24px; margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.copy-status[data-state="success"] { color: var(--accent); }
.copy-status[data-state="error"] { color: var(--yellow); }
.next-steps { padding-top: 40px; }
.next-steps > h2 { margin: 0 0 24px; font-size: 23px; }
.live-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 0; margin: 0; list-style: none; }
.live-steps li { border-top: 1px solid var(--line); padding-top: 18px; }
.step-number { color: var(--accent-2); font: 700 13px/1.5 monospace; }
.live-steps h3 { font-size: 17px; margin: 10px 0 6px; }
.live-steps p { color: var(--muted); font-size: 15px; margin: 0; }
.source-link { margin: 32px 0 42px; font-size: 14px; }
.source-link a { text-underline-offset: 5px; }
.live-footer { padding: 24px 0; border-top: 1px solid var(--line); font-size: 13px; }
.live-footer .live-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.live-footer a { text-decoration: none; }
@media (max-width: 600px) {
  .live-wrap { width: calc(100% - 32px); }
  .live-header__inner { min-height: 76px; gap: 16px; }
  .logo img { width: 145px; }
  .live-label { font-size: 9px; max-width: 80px; text-align: right; }
  .live-intro { padding: 38px 0 26px; }
  .kicker { font-size: 10px; margin-bottom: 16px; }
  .live-description { font-size: 16px; }
  .install-panel__bar { padding: 16px; }
  .install-panel__bar h2 { font-size: 10px !important; }
  .install-panel__bar h2 span { margin-right: 4px; }
  .shell-label { font-size: 10px; }
  .install-panel__body { padding: 18px; }
  pre { padding: 16px; font-size: 13px; line-height: 1.8; }
  #copy-command { width: 100%; padding-inline: 18px; }
  .next-steps { padding-top: 32px; }
  .live-steps { grid-template-columns: 1fr; gap: 18px; }
  .live-steps li { display: flex; align-items: baseline; gap: 16px; }
  .live-steps h3 { margin-top: 0; }
}