/* The installation guide uses the production shell and existing design tokens. */
body.p-install .install-v2 {
  color: var(--ink);
  font-family: var(--font-ui);
  padding-bottom: 28px;
}
body.p-install .install-v2 *,
body.p-install .install-v2 *::before,
body.p-install .install-v2 *::after { box-sizing: border-box; }
body.p-install .install-v2 [hidden] { display: none !important; }
body.p-install .install-v2 .install-v2-icon { flex: none; vertical-align: middle; }
body.p-install .install-v2 p { text-wrap: pretty; }
body.p-install .install-v2 a { text-underline-offset: 3px; }
body.p-install .install-v2 button { font-family: var(--font-ui); }
body.p-install .install-v2 :is(button, a, summary, video):focus-visible,
body.p-install .install-v2-steps:focus,
body.p-install .install-v2-desktop-steps:focus {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}
body.p-install .install-v2 .install-v2-eyebrow {
  margin: 0 0 14px;
  color: var(--coral);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
}
body.p-install .install-v2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 44px;
  align-items: center;
  margin: 34px 0 50px;
}
body.p-install .install-v2-hero h1 {
  max-width: 850px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(31px, 4.3vw, 52px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.16;
  text-wrap: balance;
}
body.p-install .install-v2 .install-v2-lead {
  margin: 20px 0 0;
  color: var(--ink);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.45;
}
body.p-install .install-v2-hero-description {
  max-width: 540px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
body.p-install .install-v2-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 17px 24px; margin-top: 25px; }
body.p-install .install-v2 .install-v2-action {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 21px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--surface-strong);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background-color .18s ease;
}
body.p-install .install-v2 .install-v2-action:hover { background: var(--ink); }
body.p-install .install-v2 .install-v2-action:disabled { cursor: default; opacity: .65; }
body.p-install .install-v2-hero-actions > a,
body.p-install .install-v2-section-heading > a {
  display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--blue); font-size: 13px;
}
body.p-install .install-v2-status { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--blue); background: var(--blue-soft); color: var(--ink); font-size: 14px; line-height: 1.6; }
body.p-install .install-v2-result {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 7px 8px 0 var(--blue-soft);
  transform: rotate(2deg);
}
body.p-install .install-v2-result-top { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
body.p-install .install-v2-result-top svg { width: 18px; height: 18px; color: var(--success); }
body.p-install .install-v2-result-icon { display: grid; justify-items: center; gap: 11px; padding: 30px 18px 27px; }
body.p-install .install-v2-result-icon img { width: 104px; height: 104px; border-radius: 24%; box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 12%, transparent); }
body.p-install .install-v2-result-icon strong { color: var(--ink); font-family: var(--font-display); font-size: 14px; letter-spacing: -.035em; }
body.p-install .install-v2-result figcaption { display: flex; align-items: center; gap: 12px; padding: 17px; background: var(--coral-soft); border-top: 1px solid var(--line); color: var(--coral); font-size: 12px; line-height: 1.7; }
body.p-install .install-v2-result-route { position: relative; width: 25px; height: 29px; margin-right: 3px; border-bottom: 1px solid var(--coral); border-left: 1px solid var(--coral); }
body.p-install .install-v2-result-route::after { content: ""; position: absolute; right: -1px; bottom: -4px; width: 7px; height: 7px; border-top: 1px solid var(--coral); border-right: 1px solid var(--coral); transform: rotate(45deg); }
body.p-install .install-v2-embedded { margin: 0 0 26px; padding: 20px; border-left: 3px solid var(--coral); background: var(--coral-soft); }
body.p-install .install-v2-embedded p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
body.p-install .install-v2-lessons { scroll-margin-top: 100px; }
body.p-install .install-v2-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 20px; }
body.p-install .install-v2-section-heading h2 { margin: 0; font-family: var(--font-display); font-size: clamp(23px, 2.5vw, 30px); line-height: 1.22; letter-spacing: -.04em; }
body.p-install .install-v2-section-heading > p { flex: none; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
body.p-install .install-v2-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--surface); }
body.p-install .install-v2-tab { display: flex; min-height: 78px; align-items: center; gap: 15px; padding: 17px 22px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
body.p-install .install-v2-tab:last-child { border-right: 0; }
body.p-install .install-v2-tab > span { display: grid; gap: 5px; }
body.p-install .install-v2-tab strong { color: var(--ink); font-size: 15px; font-weight: 600; }
body.p-install .install-v2-tab span > span { font-size: 11px; }
body.p-install .install-v2-tab[aria-selected="true"] { background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); }
body.p-install .install-v2-tab:hover { background: var(--blue-soft); }
body.p-install .install-v2-panel { padding: 29px 0 0; scroll-margin-top: 100px; }
body.p-install .install-v2-panel + .install-v2-panel { margin-top: 28px; border-top: 1px solid var(--line); }
body.p-install .install-v2-panel[data-active="true"] { margin-top: 0; border-top: 0; }
body.p-install .install-v2-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 23px; }
body.p-install .install-v2-panel-heading .install-v2-eyebrow { margin-bottom: 8px; }
body.p-install .install-v2-panel-heading h2 { margin: 0; font-family: var(--font-display); font-size: clamp(21px, 2vw, 25px); line-height: 1.3; letter-spacing: -.035em; }
body.p-install .install-v2-panel-heading p:not(.install-v2-eyebrow) { max-width: 680px; margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
body.p-install .install-v2-panel-heading a { color: var(--blue); }
body.p-install .install-v2-runtime { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); color: var(--blue); font-size: 12px; white-space: nowrap; }
body.p-install .install-v2-runtime svg { width: 16px; height: 16px; }
body.p-install .install-v2-lesson { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); align-items: start; gap: 28px; }
body.p-install .install-v2-player { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); background: var(--blue-soft); }
body.p-install .install-v2-video-frame { max-width: 370px; margin: 0 auto; background: var(--page); border: 1px solid var(--line); }
body.p-install .install-v2-player video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; background: var(--page); }
body.p-install .install-v2-player figcaption { margin-top: 13px; }
body.p-install .install-v2-watch { display: flex; min-height: 50px; width: 100%; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--coral); background: var(--coral); color: var(--surface-strong); font-size: 13px; font-weight: 600; cursor: pointer; }
body.p-install .install-v2-watch:hover { background: var(--ink); border-color: var(--ink); }
body.p-install .install-v2-watch svg { width: 20px; height: 20px; }
body.p-install .install-v2-watch-time { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 11px; opacity: .85; }
body.p-install .install-v2-player figcaption > p { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
body.p-install .install-v2-media-link { display: inline-flex; min-height: 35px; align-items: center; gap: 6px; color: var(--blue); font-size: 11px; }
body.p-install .install-v2-media-link svg { width: 14px; height: 14px; }
body.p-install .install-v2-steps-heading { margin-bottom: 15px; }
body.p-install .install-v2-steps-heading h3 { margin: 0; font-family: var(--font-ui); font-size: 17px; font-weight: 600; line-height: 1.35; }
body.p-install .install-v2-steps-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
body.p-install .install-v2-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 13px; list-style: none; margin: 0; padding: 0; scroll-margin-top: 100px; }
body.p-install .install-v2-steps > li { min-width: 0; margin: 0; padding: 0; }
body.p-install .install-v2-step { display: flex; width: 100%; height: 100%; flex-direction: column; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
body.p-install .install-v2-step:hover { border-color: var(--blue); box-shadow: 0 4px 0 var(--blue-soft); }
body.p-install .install-v2-step-image { position: relative; display: block; width: 100%; height: 183px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--page); }
body.p-install .install-v2-step-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
body.p-install .install-v2-step-number { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); background: var(--surface); color: var(--coral); font-family: var(--font-display); font-size: 12px; font-weight: 600; }
body.p-install .install-v2-step-time { position: absolute; right: 10px; bottom: 9px; padding: 3px 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
body.p-install .install-v2-step-copy { display: grid; gap: 7px; padding: 13px 14px 16px; }
body.p-install .install-v2-step-copy strong { font-size: 14px; line-height: 1.4; font-weight: 650; }
body.p-install .install-v2-step-copy > span { color: var(--muted); font-size: 12px; line-height: 1.55; }
body.p-install .install-v2-hint { display: flex; align-items: start; gap: 13px; margin-top: 22px; padding: 19px 21px; border: 1px solid var(--line); background: var(--surface); }
body.p-install .install-v2-hint-symbol { display: grid; flex: none; place-items: center; width: 23px; height: 23px; border: 1px solid var(--blue); color: var(--blue); font-size: 14px; font-weight: 600; }
body.p-install .install-v2-hint strong { font-size: 14px; font-weight: 600; }
body.p-install .install-v2-hint p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
body.p-install .install-v2-hint a { display: inline-block; margin-top: 9px; color: var(--blue); font-size: 12px; }
body.p-install .install-v2-panel-desktop { padding-bottom: 10px; }
body.p-install .install-v2-panel-desktop > .install-v2-panel-heading > svg { width: 48px; height: 48px; color: var(--blue); }
body.p-install .install-v2-desktop-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
body.p-install .install-v2-desktop-steps li { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
body.p-install .install-v2-desktop-steps li > span { color: var(--coral); font-family: var(--font-display); font-size: 21px; }
body.p-install .install-v2-desktop-steps strong { font-size: 16px; }
body.p-install .install-v2-desktop-steps p,
body.p-install .install-v2-desktop-note { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
body.p-install .install-v2-desktop-note { margin-top: 20px; }
body.p-install .install-v2-faq { margin-top: 48px; }
body.p-install .install-v2-faq details { border-bottom: 1px solid var(--line); }
body.p-install .install-v2-faq details:first-of-type { border-top: 1px solid var(--line); }
body.p-install .install-v2-faq summary { display: flex; list-style: none; align-items: center; justify-content: space-between; gap: 25px; min-height: 73px; padding: 20px 0; color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer; }
body.p-install .install-v2-faq summary::-webkit-details-marker { display: none; }
body.p-install .install-v2-faq summary > span { flex: none; color: var(--coral); font-size: 25px; font-weight: 400; transition: transform .16s ease; }
body.p-install .install-v2-faq details[open] summary > span { transform: rotate(45deg); }
body.p-install .install-v2-faq details > div { max-width: 800px; padding: 0 35px 24px 0; }
body.p-install .install-v2-faq details p { margin: 0 0 11px; color: var(--muted); font-size: 14px; line-height: 1.7; }
body.p-install .install-v2-faq details a { display: inline-block; margin-top: 4px; color: var(--blue); font-size: 13px; }
body.p-install .install-v2-finish { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-top: 38px; padding: 23px 26px; background: var(--blue-soft); border: 1px solid var(--line); }
body.p-install .install-v2-finish > div { display: flex; align-items: center; gap: 17px; }
body.p-install .install-v2-finish > div > svg { color: var(--success); }
body.p-install .install-v2-finish p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
body.p-install .install-v2-finish strong { color: var(--ink); font-weight: 600; }
body.p-install .install-v2 .install-v2-updated { max-width: 740px; margin-top: 22px; color: var(--muted); font-size: 11px; line-height: 1.65; }
@media (min-width: 1280px) {
  body.p-install .install-v2-lesson { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 34px; }
  body.p-install .install-v2-step-image { height: 206px; }
  body.p-install .install-v2-step-copy { padding: 15px 17px 17px; }
}
@media (max-width: 900px) {
  body.p-install .install-v2-hero { grid-template-columns: minmax(0, 1fr) 180px; gap: 25px; }
  body.p-install .install-v2-hero h1 { font-size: 36px; }
  body.p-install .install-v2-result-top { padding-inline: 11px; font-size: 10px; }
  body.p-install .install-v2-result-icon { padding: 25px 14px; }
  body.p-install .install-v2-result-icon img { width: 87px; height: 87px; }
  body.p-install .install-v2-result figcaption { padding: 14px 12px; gap: 10px; font-size: 11px; }
  body.p-install .install-v2-tab { padding-inline: 16px; gap: 10px; }
  body.p-install .install-v2-lesson { gap: 20px; grid-template-columns: minmax(235px, .95fr) minmax(0, 1.05fr); }
  body.p-install .install-v2-steps { grid-template-columns: 1fr; gap: 10px; }
  body.p-install .install-v2-step { flex-direction: row; min-height: 140px; }
  body.p-install .install-v2-step-image { width: 94px; height: auto; min-height: 140px; flex: none; border-bottom: 0; border-right: 1px solid var(--line); padding: 3px; }
  body.p-install .install-v2-step-image img { min-height: 135px; }
  body.p-install .install-v2-step-copy { align-content: center; padding: 11px 12px; }
  body.p-install .install-v2-step-number { top: 4px; left: 4px; width: 23px; height: 23px; font-size: 9px; }
  body.p-install .install-v2-step-time { right: 4px; bottom: 5px; font-size: 9px; }
}
@media (max-width: 650px) {
  body.p-install .install-v2-hero { grid-template-columns: minmax(0, 1fr) 94px; align-items: start; gap: 18px 15px; margin: 24px 0 35px; }
  body.p-install .install-v2-hero-copy { display: contents; }
  body.p-install .install-v2-hero .install-v2-eyebrow { grid-column: 1 / -1; margin: 0; font-size: 10px; }
  body.p-install .install-v2-hero h1 { grid-column: 1; grid-row: 2; align-self: center; font-size: clamp(27px, 6.6vw, 39px); line-height: 1.2; text-align: left; }
  body.p-install .install-v2-result { grid-column: 2; grid-row: 2; background: none; border: 0; box-shadow: none; transform: none; }
  body.p-install .install-v2-result-top,
  body.p-install .install-v2-result figcaption { display: none; }
  body.p-install .install-v2-result-icon { padding: 3px 0; gap: 9px; }
  body.p-install .install-v2-result-icon img { width: 78px; height: 78px; }
  body.p-install .install-v2-result-icon strong { font-size: 11px; }
  body.p-install .install-v2 .install-v2-lead { grid-column: 1 / -1; margin: 0; font-size: 18px; line-height: 1.5; }
  body.p-install .install-v2-hero-description { grid-column: 1 / -1; margin: -7px 0 0; font-size: 13px; }
  body.p-install .install-v2-hero-actions { grid-column: 1 / -1; display: grid; gap: 8px; margin: 0; }
  body.p-install .install-v2-hero-actions > a { justify-content: center; font-size: 12px; }
  body.p-install .install-v2-status { grid-column: 1 / -1; margin: 0; }
  body.p-install .install-v2-section-heading { display: block; margin-bottom: 17px; }
  body.p-install .install-v2-section-heading .install-v2-eyebrow { margin-bottom: 10px; font-size: 10px; }
  body.p-install .install-v2-section-heading h2 { font-size: 24px; }
  body.p-install .install-v2-section-heading > p { margin-top: 10px; font-size: 12px; }
  body.p-install .install-v2-section-heading > p > br { display: none; }
  body.p-install .install-v2-section-heading > p > br::after { content: " "; }
  body.p-install .install-v2-tab { min-height: 72px; justify-content: center; padding: 13px 5px; text-align: center; }
  body.p-install .install-v2-tab > svg { display: none; }
  body.p-install .install-v2-tab strong { font-size: 12px; line-height: 1.35; }
  body.p-install .install-v2-tab span > span { font-size: 10px; }
  body.p-install .install-v2-panel { padding-top: 23px; }
  body.p-install .install-v2-panel-heading { display: block; margin-bottom: 18px; }
  body.p-install .install-v2-panel-heading .install-v2-eyebrow { font-size: 10px; }
  body.p-install .install-v2-panel-heading h2 { font-size: 22px; }
  body.p-install .install-v2-panel-heading p:not(.install-v2-eyebrow) { font-size: 13px; }
  body.p-install .install-v2-runtime { display: none; }
  body.p-install .install-v2-lesson { grid-template-columns: 1fr; gap: 25px; }
  body.p-install .install-v2-player { padding: 10px; }
  body.p-install .install-v2-video-frame { max-width: 350px; }
  body.p-install .install-v2-watch { padding-inline: 13px; }
  body.p-install .install-v2-steps-heading h3 { font-size: 18px; }
  body.p-install .install-v2-steps-heading p { font-size: 12px; }
  body.p-install .install-v2-step { min-height: 160px; }
  body.p-install .install-v2-step-image { width: 105px; min-height: 160px; }
  body.p-install .install-v2-step-copy { padding: 13px 15px; }
  body.p-install .install-v2-step-copy strong { font-size: 14px; }
  body.p-install .install-v2-step-copy > span { font-size: 12px; }
  body.p-install .install-v2-hint { padding: 16px 14px; gap: 10px; }
  body.p-install .install-v2-hint strong { font-size: 13px; }
  body.p-install .install-v2-hint p { font-size: 12px; }
  body.p-install .install-v2-hint a { line-height: 1.7; }
  body.p-install .install-v2-panel-desktop > .install-v2-panel-heading > svg { display: none; }
  body.p-install .install-v2-desktop-steps li { grid-template-columns: 31px minmax(0, 1fr); gap: 12px; }
  body.p-install .install-v2-desktop-steps li > span { font-size: 18px; }
  body.p-install .install-v2-desktop-steps p,
  body.p-install .install-v2-desktop-note { font-size: 13px; }
  body.p-install .install-v2-faq { margin-top: 35px; }
  body.p-install .install-v2-faq .install-v2-section-heading > a { margin-top: 11px; }
  body.p-install .install-v2-faq summary { min-height: 70px; gap: 20px; font-size: 14px; line-height: 1.5; }
  body.p-install .install-v2-faq details > div { padding-right: 0; }
  body.p-install .install-v2-faq details p { font-size: 13px; }
  body.p-install .install-v2-finish { padding: 22px 18px; gap: 19px; }
  body.p-install .install-v2-finish > div { gap: 12px; }
  body.p-install .install-v2-finish p { font-size: 13px; }
  body.p-install .install-v2-finish > a { width: 100%; }
}
@media (max-width: 360px) {
  body.p-install .install-v2-hero { grid-template-columns: minmax(0, 1fr) 68px; column-gap: 10px; }
  body.p-install .install-v2-hero h1 { font-size: 25px; }
  body.p-install .install-v2-result-icon img { width: 63px; height: 63px; }
  body.p-install .install-v2-result-icon strong { font-size: 9px; }
  body.p-install .install-v2-tab strong { font-size: 11px; }
  body.p-install .install-v2-step-image { width: 93px; }
  body.p-install .install-v2-step-copy { padding: 12px 11px; }
  body.p-install .install-v2-step-copy strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body.p-install .install-v2 *,
  body.p-install .install-v2 *::before,
  body.p-install .install-v2 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}