.els2-codespace-page {
  --cs-bg: #f8faff;
  --cs-surface: #fff;
  --cs-text: #20183c;
  --cs-muted: #56516c;
  --cs-border: #e2e4f2;
  --cs-blue: #1265b8;
  --cs-green: #466f12;
  color: var(--cs-text);
  background: var(--cs-bg);
  overflow: clip;
}
.els2-codespace-page :is(h1,h2,h3) { color: var(--cs-text); }
.els2-codespace-page :is(p,li) { overflow-wrap: anywhere; }
.els2-codespace-page :is(#codespace-levels,#codespace-registration) { scroll-margin-top: 110px; }
.els2-codespace-page .els2-section { padding-block: clamp(56px, 7vw, 96px); }
.els2-codespace-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: #48237e; font-weight: 800; letter-spacing: .01em; }
.els2-codespace-kicker span { color: #eb8b16; }
.els2-codespace-section-head { max-width: 810px; margin-bottom: 36px; }
.els2-codespace-section-head h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); }
.els2-codespace-section-head > p:last-child { max-width: 710px; margin-top: 16px; color: var(--cs-muted); font-size: clamp(1rem, 1.55vw, 1.14rem); }
.els2-codespace-hero { padding-block: clamp(56px, 6vw, 90px); background: radial-gradient(circle at 15% 20%, #e5f2ff 0, transparent 33%), radial-gradient(circle at 90% 10%, #efe9fb 0, transparent 33%), #fbfcff; }
.els2-codespace-hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(30px, 4vw, 68px); }
.els2-codespace-hero__copy { min-width: 0; }
.els2-codespace-hero h1 { font-size: clamp(2.4rem, 4.7vw, 4.9rem); line-height: 1.23; letter-spacing: -.035em; }
.els2-codespace-hero h1 span { color: var(--cs-blue); }
.els2-codespace-lead { max-width: 620px; margin-top: 24px; color: var(--cs-muted); font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.85; }
.els2-codespace-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.els2-codespace-page .els2-button:not(.els2-button--ghost) { color: #fff !important; }
.els2-codespace-hero__hint { margin-top: 16px; color: var(--cs-muted); font-size: .94rem; }
.els2-codespace-hero__visual { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--cs-border); border-radius: 28px; background: var(--cs-surface); box-shadow: 0 24px 70px rgba(43,40,96,.12); transform: rotate(-1deg); }
.els2-codespace-hero__visual img { width: 100%; border-radius: 20px; }
.els2-codespace-intro { background: var(--cs-surface); }
.els2-codespace-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.els2-codespace-pillars article { min-width: 0; padding: 28px; border: 1px solid var(--cs-border); border-radius: 22px; background: var(--cs-bg); }
.els2-codespace-pillars article:nth-child(1) { border-top: 5px solid #60309c; }
.els2-codespace-pillars article:nth-child(2) { border-top: 5px solid #217abd; }
.els2-codespace-pillars article:nth-child(3) { border-top: 5px solid #73972a; }
.els2-codespace-pillars article > span { color: #8254bb; font: 800 .9rem 'Alexandria',sans-serif; }
.els2-codespace-pillars h3 { margin-top: 14px; font-size: 1.25rem; }
.els2-codespace-pillars p { margin-top: 10px; color: var(--cs-muted); }
.els2-codespace-inline-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; padding: 20px 24px; border-radius: 20px; background: #f0e9f8; }
.els2-codespace-inline-cta strong { font-size: 1.15rem; }
.els2-codespace-levels { background: linear-gradient(180deg,#f3f4ff,#f8faff); }
.els2-codespace-level-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; list-style: none; }
.els2-codespace-level { min-width: 0; padding: 26px; border: 1px solid var(--cs-border); border-radius: 22px; background: var(--cs-surface); box-shadow: 0 12px 28px rgba(40,31,92,.06); }
.els2-codespace-level__num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #ecf2ff; color: #075eb4; font: 800 .94rem 'Alexandria',sans-serif; }
.els2-codespace-level--zero .els2-codespace-level__num { background: #fff0df; color: #a74400; }
.els2-codespace-level--one .els2-codespace-level__num { background: #e9f4dc; color: #436c0f; }
.els2-codespace-level--two-b .els2-codespace-level__num { background: #efe5fc; color: #54208d; }
.els2-codespace-level h3 { margin-top: 18px; font-size: 1.3rem; direction: ltr; text-align: right; }
.els2-codespace-level strong { display: block; margin-top: 6px; color: #4a2a75; font-weight: 800; }
.els2-codespace-level p { margin-top: 12px; color: var(--cs-muted); }
.els2-codespace-levels__visual { max-width: 900px; margin: 32px auto 0; padding: 8px; border: 1px solid var(--cs-border); border-radius: 22px; background: var(--cs-surface); }
.els2-codespace-levels__visual img { width: 100%; border-radius: 15px; }
.els2-codespace-year { background: var(--cs-surface); }
.els2-codespace-timeline { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; list-style: none; }
.els2-codespace-timeline li { display: flex; min-width: 0; align-items: flex-start; gap: 14px; padding: 20px; border: 1px solid var(--cs-border); border-radius: 18px; background: var(--cs-bg); }
.els2-codespace-timeline li > span { display: grid; flex: 0 0 38px; place-items: center; height: 38px; border-radius: 50%; background: #572897; color: #fff; font-weight: 800; }
.els2-codespace-timeline li:nth-child(3n+2) > span { background: #116bb4; }
.els2-codespace-timeline li:nth-child(3n) > span { background: #527c17; }
.els2-codespace-timeline h3 { font-size: 1rem; }
.els2-codespace-timeline p { margin-top: 7px; color: var(--cs-muted); font-size: .94rem; }
.els2-codespace-steps { background: #f3eef9; }
.els2-codespace-start-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 28px; list-style: none; }
.els2-codespace-start-list li { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 20px; border: 1px solid var(--cs-border); border-radius: 16px; background: var(--cs-surface); font-weight: 700; }
.els2-codespace-start-list span { display: grid; flex: 0 0 34px; place-items: center; height: 34px; border-radius: 50%; background: #fff0dc; color: #9d4d00; font-weight: 800; }
.els2-codespace-registration { background: linear-gradient(145deg,#211247,#482080); color: #fff; }
.els2-codespace-registration :is(h2,.els2-codespace-kicker) { color: #fff; }
.els2-codespace-registration .els2-codespace-section-head > p:last-child { color: #eee6f8; }
.els2-codespace-form-card { max-width: 900px; padding: 16px; border-radius: 24px; background: #fff; color: #211b2b; box-shadow: 0 20px 60px rgba(10,5,29,.24); }
.els2-codespace-form-card iframe { display: block; width: 100%; height: 1050px; border: 0; border-radius: 16px; background: #fff; }
.els2-codespace-form-card p { padding: 12px 8px 2px; color: #4c4757; font-size: .95rem; }
.els2-codespace-form-card a { color: #4a217f; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) {
  .els2-codespace-hero__grid { grid-template-columns: 1fr; }
  .els2-codespace-hero__visual { max-width: 760px; transform: none; }
  .els2-codespace-level-grid,.els2-codespace-timeline { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .els2-codespace-page .els2-container { width: min(calc(100% - 32px),var(--els-container)); }
  .els2-codespace-page .els2-section { padding-block: 56px; }
  .els2-codespace-hero { padding-block: 44px 56px; }
  .els2-codespace-hero h1 { font-size: clamp(2.2rem,9.5vw,3.2rem); }
  .els2-codespace-actions .els2-button { width: 100%; }
  .els2-codespace-pillars,.els2-codespace-level-grid,.els2-codespace-timeline,.els2-codespace-start-list { grid-template-columns: 1fr; }
  .els2-codespace-pillars article,.els2-codespace-level { padding: 22px; }
  .els2-codespace-hero__visual { padding: 6px; border-radius: 20px; }
  .els2-codespace-hero__visual img { border-radius: 15px; }
  .els2-codespace-form-card { padding: 6px; border-radius: 18px; }
  .els2-codespace-form-card iframe { height: 1250px; }
  .els2-codespace-form-card p { padding: 10px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .els2-codespace-page { scroll-behavior: auto; } }
body.els2:is(.dark-mode,.darklup-dark-mode-enabled,.darklup-dark-mode,[data-dark-mode="true"]) .els2-codespace-page {
  --cs-bg: #1b1725;
  --cs-surface: #292136;
  --cs-text: #f6f2fb;
  --cs-muted: #c8bfd1;
  --cs-border: #473851;
  --cs-blue: #84caff;
  background: var(--cs-bg);
}
body.els2:is(.dark-mode,.darklup-dark-mode-enabled,.darklup-dark-mode,[data-dark-mode="true"]) .els2-codespace-hero,
body.els2:is(.dark-mode,.darklup-dark-mode-enabled,.darklup-dark-mode,[data-dark-mode="true"]) .els2-codespace-levels,
body.els2:is(.dark-mode,.darklup-dark-mode-enabled,.darklup-dark-mode,[data-dark-mode="true"]) .els2-codespace-steps { background: #231b31; }
body.els2:is(.dark-mode,.darklup-dark-mode-enabled,.darklup-dark-mode,[data-dark-mode="true"]) .els2-codespace-kicker,
body.els2:is(.dark-mode,.darklup-dark-mode-enabled,.darklup-dark-mode,[data-dark-mode="true"]) .els2-codespace-level strong { color: #d9b7ff; }
body.els2:is(.dark-mode,.darklup-dark-mode-enabled,.darklup-dark-mode,[data-dark-mode="true"]) .els2-codespace-inline-cta { background: #382849; }
