body.kotopy-shell.quick-start-page {
  --quick-blue: #0864d9;
  --quick-ink: #102c50;
  --quick-muted: #526680;
  --quick-tint: #eef8ff;
  --kotopy-color-background: #fff;
  --kotopy-color-text: var(--quick-ink);
  --kotopy-color-link: #075abb;
  color: var(--quick-ink);
  background: #fff !important;
}

.quick-start-page .quick-container {
  width: calc(100% - 80px);
  max-width: 1320px;
  margin-inline: auto;
}

.quick-start-page .quick-header { background: #fff; color: var(--quick-ink); }
.quick-header__inner,
.quick-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
body.quick-start-page .quick-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 44px;
  color: var(--quick-ink);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
}
.quick-brand img { object-fit: contain; }
.quick-brand small { font-size: 0.875rem; }
.quick-header nav,
.quick-footer nav { display: flex; align-items: center; gap: 32px; }
.quick-header nav a,
.quick-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
body.quick-start-page .quick-header nav a { color: var(--quick-ink); font-weight: 700; }
body.quick-start-page .quick-header__account { justify-content: center; border: 1px solid var(--quick-blue); border-radius: 8px; padding: 8px 24px; color: #075abb; }

.quick-start-page .quick-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 32px;
  padding-block: 16px 24px;
}
body.quick-start-page .quick-intro h1,
body.quick-start-page .quick-intro h2 { color: var(--quick-ink); font-weight: 700; letter-spacing: 0; }
body.quick-start-page .quick-intro h1 { margin: 0 0 16px; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.2; }
.quick-intro h1 span { display: block; }
body.quick-start-page .quick-intro h2 { margin: 0 0 12px; font-size: 2rem; line-height: 1.4; }
body.quick-start-page .quick-intro p { margin: 0 0 16px; line-height: 1.6; }
body.quick-start-page .quick-intro .quick-eyebrow { margin-bottom: 8px; color: var(--quick-blue); font-size: 1.125rem; font-weight: 700; }
.quick-intro .quick-lead { font-size: 1.125rem; }
.quick-intro .quick-hero__description { margin-bottom: 24px; }

body.quick-start-page .quick-action.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 50px;
  padding: 12px 32px;
  border: 1px solid var(--quick-blue);
  border-radius: 8px !important;
  background: var(--quick-blue);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: 0 6px 16px rgb(8 100 217 / 12%);
}
body.quick-start-page .quick-action.btn:hover { background: #064fae; border-color: #064fae; color: #fff; }
body.quick-start-page .quick-intro .quick-note { margin: 8px 0 0; color: var(--quick-muted); font-size: 0.875rem; }
.quick-intro figure { margin: 0; }
.quick-hero__screens { position: relative; aspect-ratio: 1.7; }
.quick-hero__screens img { position: absolute; height: auto; border: 1px solid #e0e8f1; border-radius: 8px; box-shadow: 0 8px 32px rgb(31 71 116 / 9%); }
.quick-hero__bars { top: 0; left: 0; width: 72%; }
.quick-hero__cloud { right: 0; bottom: 0; width: 69%; }
.quick-intro figcaption { margin-top: 12px; color: var(--quick-muted); font-size: 0.875rem; line-height: 1.6; }
.quick-hero__visual figcaption { text-align: right; }

.quick-flow { padding-block: 16px; background: var(--quick-tint); color: var(--quick-ink); }
body.quick-start-page .quick-flow h2 { margin-bottom: 8px; text-align: center; font-size: 1.75rem; }
.quick-flow ol { display: flex; align-items: center; justify-content: center; gap: 32px; margin: 0; padding: 0; list-style: none; }
.quick-flow li { display: flex; align-items: center; gap: 32px; }
.quick-flow li:not(:last-child)::after { content: ""; width: clamp(24px, 5vw, 80px); height: 1px; background: var(--quick-blue); }
body.quick-start-page .quick-flow a { display: inline-flex; align-items: center; gap: 16px; min-height: 56px; color: var(--quick-ink) !important; font-weight: 700; text-decoration: none !important; }
body.quick-start-page .quick-flow a:hover { text-decoration: underline !important; }
.quick-flow a span { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--quick-blue); color: #fff; font-size: 1.125rem; }

.quick-step { scroll-margin-top: 24px; }
.quick-step__inner { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: center; gap: 48px; padding-block: 64px; }
.quick-step__copy p { max-width: 28em; font-size: 1rem; }
body.quick-start-page .quick-step__copy .quick-step__number { margin-bottom: 8px; color: var(--quick-blue); font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
body.quick-start-page .quick-detail-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; line-height: 1.5; }
body.quick-start-page .quick-detail-link:visited { color: #663c92; }
.quick-step__links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.quick-step--analysis { background: var(--quick-tint); color: var(--quick-ink); }
.quick-step--analysis .quick-step__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.quick-step--analysis .quick-step__copy { grid-column: 2; grid-row: 1; }
.quick-step--analysis .quick-screen-group { grid-column: 1; grid-row: 1; }

.quick-screen { position: relative; display: block; border: 1px solid #dce5ef; border-radius: 8px; background: #fff; color: var(--quick-ink); box-shadow: 0 6px 24px rgb(31 71 116 / 8%); }
.quick-screen img { display: block; width: 100%; height: auto; border-radius: inherit; }
.quick-screen--upload,
.quick-screen--project,
.quick-screen--menu { overflow: hidden; }
.quick-screen--upload { aspect-ratio: 1368 / 448; }
.quick-screen--project { width: 63%; aspect-ratio: 600 / 242; margin: 0 0 24px 16px; }
.quick-screen--menu { aspect-ratio: 1015 / 220; }
body.quick-start-page .quick-screen--upload img { position: absolute; width: 105.263%; max-width: none; top: -54.018%; left: -2.632%; }
body.quick-start-page .quick-screen--project img { position: absolute; width: 240%; max-width: none; top: -59.917%; left: -7.333%; }
body.quick-start-page .quick-screen--menu img { position: absolute; width: 137.537%; max-width: none; top: -68.182%; left: -1.576%; }
.quick-screen__upload-focus { position: absolute; left: 76.8%; top: 75.5%; width: 12.5%; height: 12%; border: 2px solid var(--quick-blue); border-radius: 6px; }
.quick-screen__analysis-focus { position: absolute; left: 74.58%; top: 44.09%; width: 23.74%; height: 52.73%; border: 2px solid var(--quick-blue); border-radius: 6px; }
.quick-screen-group figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.quick-analysis-screens { position: relative; }
.quick-analysis-screens__arrow { position: absolute; top: 15%; left: 69%; width: 48px; height: 48px; fill: none; stroke: var(--quick-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.quick-results { display: grid; grid-template-columns: 1.12fr 1fr; align-items: start; gap: 16px; }
.quick-results figcaption { text-align: center; }
body.quick-start-page .quick-intro .quick-results__note { grid-column: 1 / -1; margin: 0; color: var(--quick-muted); font-size: 0.875rem; text-align: right; }

.quick-start-action { padding-block: 24px; background: var(--quick-tint); color: var(--quick-ink); text-align: center; }
body.quick-start-page .quick-start-action h2 { font-size: 1.75rem; margin-bottom: 8px; }
.quick-start-action p { margin-bottom: 16px; }
.quick-footer { padding-block: 16px; background: #fff; color: var(--quick-muted); }
.quick-footer__inner { min-height: 48px; }
body.quick-start-page .quick-brand--small { font-size: 1.375rem; gap: 8px; }
.quick-footer nav { gap: 24px; flex-wrap: wrap; }
body.quick-start-page .quick-footer nav a { color: var(--quick-muted); font-size: 0.875rem; }

@media (max-width: 1100px) {
  .quick-start-page .quick-container { width: calc(100% - 48px); }
  .quick-start-page .quick-hero { gap: 24px; }
  body.quick-start-page .quick-intro h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
  .quick-header nav { gap: 24px; }
  .quick-step__inner { gap: 32px; padding-block: 32px; }
  .quick-footer__inner { flex-wrap: wrap; gap: 8px 24px; }
}

@media (max-width: 820px) {
  .quick-header__inner { min-height: 80px; gap: 16px; }
  body.quick-start-page .quick-brand { font-size: 1.5rem; gap: 8px; }
  .quick-brand small { display: none; }
  .quick-header nav { gap: 16px; }
  body.quick-start-page .quick-header__account { padding-inline: 16px; }
  .quick-start-page .quick-hero { grid-template-columns: 1fr; padding-block: 24px 32px; gap: 32px; }
  body.quick-start-page .quick-intro h1 { font-size: 2.25rem; }
  .quick-hero__visual { width: min(100%, 640px); justify-self: center; }
  .quick-flow ol,
  .quick-flow li { gap: 16px; }
  .quick-flow li:not(:last-child)::after { width: 24px; }
  body.quick-start-page .quick-flow a { gap: 8px; }
  .quick-flow a span { width: 40px; height: 40px; }
  .quick-step__inner,
  .quick-step--analysis .quick-step__inner { grid-template-columns: 1fr; gap: 24px; padding-block: 40px; }
  .quick-step--analysis .quick-step__copy,
  .quick-step--analysis .quick-screen-group { grid-column: auto; grid-row: auto; }
  .quick-step__links { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
  .quick-footer nav { gap: 8px 24px; }
}

@media (max-width: 540px) {
  .quick-start-page .quick-container { width: calc(100% - 32px); }
  .quick-header__inner { flex-wrap: wrap; padding-block: 12px; gap: 8px; }
  .quick-header nav { width: 100%; justify-content: space-between; gap: 8px; }
  body.quick-start-page .quick-intro h1 { font-size: clamp(1.5rem, 6.1vw, 2rem); }
  body.quick-start-page .quick-intro h2 { font-size: 1.5rem; }
  .quick-desktop-break { display: none; }
  .quick-intro .quick-hero__description { font-size: 1.0625rem; }
  .quick-intro .quick-note { font-size: 0.875rem; }
  body.quick-start-page .quick-action.btn { gap: 16px; padding-inline: 24px; }
  .quick-flow ol { align-items: stretch; justify-content: space-between; gap: 8px; }
  .quick-flow li { min-width: 0; }
  .quick-flow li:not(:last-child)::after { display: none; }
  body.quick-start-page .quick-flow a { flex-direction: column; justify-content: center; font-size: 0.875rem; }
  .quick-screen--project { width: 75%; margin-left: 0; }
  .quick-analysis-screens__arrow { width: 32px; height: 32px; left: 81%; }
  .quick-results { gap: 12px; }
  .quick-screen-group figcaption { font-size: 0.875rem; }
  .quick-footer nav { flex-direction: column; align-items: flex-start; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.quick-start-page) { scroll-behavior: auto; }
}

body.kotopy-shell.quick-start-page .quick-footer { padding: 16px 0 !important; border-top: 0; }
body.kotopy-shell.quick-start-page .quick-brand { text-decoration: none !important; }