/* Compact catalogue introduction; typing uses the shared homepage behavior. */
.ct-catalog-overline { padding-block: 15px 4px; gap: 8px 16px; flex-wrap: wrap; }
.ct-catalog-hero-grid { grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); gap: 32px; padding-block: 8px 24px; }
.ct-catalog-story h1 { font-size: clamp(38px,3.5vw,50px); line-height: 1.2; margin-bottom: 20px; letter-spacing: -1.6px; }
.ct-catalog-story h1 svg { height: 8px; bottom: -7px; }
.ct-catalog-story h2 { font-size: clamp(19px,1.8vw,25px); line-height: 1.55; letter-spacing: -.4px; }
.ct-catalog-lead { max-width: 440px; margin-top: 7px !important; font-size: 13px; line-height: 1.9; }
.ct-catalog-hero-actions { gap: 24px; margin-top: 17px; flex-wrap: wrap; }
.ct-catalog-hero-actions .ct-catalog-button { min-height: 42px; padding: 9px 18px; font-size: 12px; gap: 20px; }
.ct-catalog-hero-actions .ct-catalog-text-link { font-size: 11px; }
.ct-catalog-hero-facts { margin-top: 14px; gap: 15px; font-size: 10px; }
.ct-catalog-hero-facts b { font-size: 14px; }
.ct-catalog-hero-facts > span + span { padding-inline-start: 15px; }
.ct-catalog-hero-facts i { font-size: 16px; }
.ct-catalog-universe { --ct-demo-error: #ac354c; --ct-demo-input: #3d2c50; --ct-demo-button: #e1cef6; --ct-demo-button-ink: #342345; --ct-demo-shadow: #39214524; height: auto; min-height: 256px; width: 100%; margin: 0; padding: 36px 14px 30px; transform: none; }
[data-ct-lesson-theme="dark"] .ct-catalog-universe { --ct-demo-error: #ffb1bd; --ct-demo-input: #30213e; --ct-demo-shadow: #0000004d; }
.ct-catalog-universe .ct-catalog-orbit-outer { width: 280px; max-width: 90%; }
.ct-catalog-universe .ct-catalog-orbit-inner { width: 216px; max-width: 76%; }
.ct-catalog-universe .ct-catalog-orbit-core { width: 144px; }
.ct-catalog-universe .ct-catalog-orbit-dot { top: auto; bottom: 36px; left: 58%; width: 7px; height: 7px; border-width: 2px; }
.ct-catalog-demo { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,1fr); gap: 0; align-items: start; width: 100%; direction: ltr; }
.ct-catalog-demo[dir="rtl"] > div { direction: rtl; }
.ct-catalog-demo-editor { position: relative; min-width: 0; border: 1px solid var(--ct-line-strong); border-radius: 16px; overflow: hidden; color: var(--ct-code-ink); background: linear-gradient(135deg,#b590da16,transparent 60%),var(--ct-code); box-shadow: 0 24px 48px -14px var(--ct-demo-shadow),0 8px 18px -9px var(--ct-demo-shadow),inset 0 1px 0 #ffffff1a; transform: rotate(-3deg); }
.ct-catalog-demo-chrome { display: flex; align-items: center; justify-content: space-between; height: 36px; padding-inline: 14px; border-bottom: 1px solid #c3a4de30; background: #ffffff04; color: var(--ct-code-muted); font: 9px/1.4 Consolas,monospace; }
.ct-catalog-demo-chrome b { font-size: 14px; color: var(--ct-code-tag); }
.ct-catalog-demo-dots { display: flex; gap: 4px; }
.ct-catalog-demo-dots i { width: 5px; height: 5px; border-radius: 50%; background: #e79c9c; }
.ct-catalog-demo-dots i:nth-child(2) { background: #dec186; }
.ct-catalog-demo-dots i:nth-child(3) { background: #96bf9b; }
.ct-catalog-demo-code { padding: 12px 40px 12px 10px; font: 12px/1.7 Consolas,monospace; }
.ct-catalog-demo-code > div { display: flex; align-items: center; min-width: 0; min-height: 23px; }
.ct-catalog-demo-line { width: 18px; margin-right: 6px; flex-shrink: 0; text-align: center; color: var(--ct-code-muted); font: 9px/1 Consolas,monospace; }
.ct-catalog-demo-tag { color: var(--ct-code-tag); white-space: nowrap; }
.ct-catalog-demo-input-row input { width: 100%; min-width: 0; height: 33px; padding: 3px 8px; margin-left: 3px; border: 1px dashed #b79bcf; border-radius: 5px; background: var(--ct-demo-input); color: var(--ct-code-ink); font: 600 12px/1.6 'Cairo',sans-serif; text-align: start; caret-color: var(--ct-code-tag); }
.ct-catalog-demo-input-row input:focus-visible { outline: 2px solid var(--ct-code-tag); outline-offset: 2px; }
.ct-catalog-demo-input-row input[aria-invalid="true"] { border: 2px solid #ffb1bd; }
.ct-catalog-demo-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #c3a4de30; padding: 8px 40px 8px 12px; }
.ct-catalog-demo-actions > span { font-size: 10px; line-height: 1.6; color: var(--ct-code-muted); }
.ct-catalog-demo-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; flex-shrink: 0; padding: 5px 9px; border: 0; border-radius: 6px; background: var(--ct-demo-button); color: var(--ct-demo-button-ink); font-size: 11px; font-weight: 800; transition: background .2s,translate .2s; }
.ct-catalog-demo-actions button:hover { background: #f0e7ff; translate: 0 -1px; }
.ct-catalog-demo-actions button:focus-visible { outline-color: var(--ct-code-tag); outline-offset: 3px; }
.ct-catalog-demo-browser { position: relative; min-width: 0; z-index: 2; margin-top: 90px; margin-left: -36px; background: linear-gradient(145deg,color-mix(in srgb,var(--ct-soft) 50%,transparent),transparent 65%),var(--ct-surface); border: 1px solid var(--ct-line-strong); border-radius: 16px; color: var(--ct-ink); box-shadow: 0 26px 50px -18px var(--ct-demo-shadow),0 8px 18px -10px var(--ct-demo-shadow),inset 0 1px 0 color-mix(in srgb,var(--ct-surface) 75%,white); transform: rotate(-5deg); }
.ct-catalog-demo-browser-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 3px 7px; border-bottom: 1px solid var(--ct-line); padding: 9px 12px; color: var(--ct-muted); font-size: 9px; line-height: 1.65; }
.ct-catalog-demo-browser-bar > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.ct-catalog-demo-browser-bar svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--ct-accent); }
.ct-catalog-demo-browser #ct-h5-run-state { color: var(--ct-success); text-align: end; }
.ct-catalog-demo-browser #ct-h5-run-state[data-state="pending"] { color: var(--ct-warning); }
.ct-catalog-demo-browser #ct-h5-run-state[data-state="error"] { color: var(--ct-demo-error); }
.ct-catalog-demo-result-body { min-height: 104px; padding: 16px 14px 22px; text-align: center; position: relative; display: grid; place-items: center; }
.ct-catalog-demo-result-body #ct-h5-demo-result { width: 100%; margin: 0; color: var(--ct-ink); font-size: 17px; font-weight: 850; line-height: 1.6; overflow-wrap: anywhere; }
.ct-catalog-demo-result-body #ct-h5-demo-result[data-typing="true"]::after { content: ''; position: absolute; width: 20px; height: 2px; bottom: 10px; left: calc(50% - 10px); border-radius: 2px; background: var(--ct-accent); animation: ct-catalog-demo-cursor 1s steps(2,end) infinite; }
.ct-catalog-demo-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ct-catalog-universe .ct-catalog-art-label { top: 2px; right: auto; left: 24px; font-size: 8px; letter-spacing: 1.7px; }
.ct-catalog-universe .ct-catalog-art-label span { font-size: 17px; }
.ct-catalog-universe .ct-catalog-art-orb { pointer-events: none; will-change: translate; box-shadow: inset 0 0 0 4px var(--ct-surface),0 7px 18px #45266518; }
.ct-catalog-universe .ct-catalog-art-orb img { width: 29px; height: 29px; filter: drop-shadow(0 3px 3px var(--ct-orb-shade)); }
.ct-catalog-universe .ct-catalog-art-orb > span { font-size: 7px; }
.ct-catalog-universe .ct-catalog-art-orb-html { top: 0; right: 20px; width: 67px; height: 67px; --ct-scene-duration: 6.2s; --ct-scene-delay: -.8s; }
.ct-catalog-universe .ct-catalog-art-orb-html img { width: 36px; height: 36px; }
.ct-catalog-universe .ct-catalog-art-orb-css { top: auto; bottom: -15px; left: 43px; width: 49px; height: 49px; --ct-scene-duration: 5.4s; --ct-scene-delay: -2.1s; }
.ct-catalog-universe .ct-catalog-art-orb-javascript { bottom: -7px; left: auto; right: 45px; width: 51px; height: 51px; --ct-scene-duration: 6.9s; --ct-scene-delay: -3.4s; }
.ct-catalog-universe .ct-catalog-star-one { top: 12px; left: 56%; font-size: 21px; }
.ct-catalog-universe .ct-catalog-star-two { bottom: -2px; right: 39%; font-size: 22px; }

/* Keep the introduction to the actual subjects compact, too. */
.ct-catalog-library { padding-top: 28px; }
.ct-catalog-section-heading { margin-bottom: 17px; }
.ct-catalog-section-heading .ct-catalog-eyebrow { margin-bottom: 3px !important; font-size: 10px; }
.ct-catalog-section-heading h2 { font-size: 24px; }
.ct-catalog-featured { padding: 13px 20px; gap: 18px; border-radius: 14px; }
.ct-catalog-featured-icon { width: 55px; height: 55px; box-shadow: 0 0 0 4px var(--ct-soft); }
.ct-catalog-featured-icon img { width: 35px; height: 35px; }
.ct-catalog-featured-icon span { width: 20px; height: 20px; font-size: 10px; border-width: 2px; }
.ct-catalog-featured-copy h3 { margin-top: 0; font-size: 18px; }
.ct-catalog-featured-copy p { margin-top: 1px; font-size: 11px; max-width: 480px; }
.ct-catalog-featured-meta { padding-inline: 16px; }
.ct-catalog-featured-go > span { width: 33px; height: 33px; display: inline-grid; place-items: center; padding: 0; line-height: 1; }
.ct-catalog-featured-go > .ct-catalog-arrow svg { display: block; width: 17px; height: 17px; }
.ct-catalog-tools { margin-top: 20px; }

@media (min-width: 901px) and (max-width: 1100px) {
    .ct-catalog-hero-grid { gap: 24px; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
    .ct-catalog-demo { gap: 0; }
    .ct-catalog-demo-actions { padding-inline: 8px; padding-right: 40px; gap: 5px; }
    .ct-catalog-demo-actions > span { font-size: 9px; }
    .ct-catalog-demo-browser-bar { font-size: 9px; }
    .ct-catalog-demo-result-body #ct-h5-demo-result { font-size: 15px; }
}
@media (max-width: 900px) {
    .ct-catalog-hero-grid { grid-template-columns: minmax(0,1fr); gap: 14px; padding-block: 12px 22px; }
    .ct-catalog-story { max-width: 620px; }
    .ct-catalog-universe { max-width: 570px; margin: 0 auto; }
}
@media (max-width: 600px) {
    .ct-catalog-overline { padding-block: 12px 3px; font-size: 9px; }
    .ct-catalog-preview-label { font-size: 8px; }
    .ct-catalog-hero-grid { gap: 10px; padding-block: 10px 18px; }
    .ct-catalog-story h1 { font-size: 36px; margin-bottom: 17px; }
    .ct-catalog-story h2 { font-size: 19px; line-height: 1.6; }
    .ct-catalog-lead { font-size: 12px; line-height: 1.8; margin-top: 5px !important; }
    .ct-catalog-hero-actions { margin-top: 12px; gap: 17px; }
    .ct-catalog-hero-actions .ct-catalog-button { min-height: 39px; padding: 8px 13px; gap: 14px; font-size: 11px; }
    .ct-catalog-hero-actions .ct-catalog-text-link { font-size: 10px; }
    .ct-catalog-hero-facts { margin-top: 10px; gap: 12px; font-size: 10px; }
    .ct-catalog-hero-facts > span + span { padding-inline-start: 12px; }
    .ct-catalog-hero-facts > span:last-child { display: none; }
    .ct-catalog-universe { max-width: 370px; min-height: 0; padding: 12px 2px 0; }
    .ct-catalog-demo { display: block; }
    .ct-catalog-demo-editor { width: calc(100% - 51px); transform: rotate(-2deg); }
    .ct-catalog-demo-code { padding-inline: 10px; }
    .ct-catalog-demo-actions { padding-inline: 10px; }
    .ct-catalog-demo-browser { width: calc(100% - 54px); margin: 6px 5px 0 auto; transform: rotate(-4deg); }
    .ct-catalog-demo-browser-bar { padding: 6px 10px; }
    .ct-catalog-demo-result-body { min-height: 66px; padding-block: 11px 17px; }
    .ct-catalog-demo-result-body #ct-h5-demo-result { font-size: 15px; }
    .ct-catalog-universe .ct-catalog-orbit-outer { width: 267px; }
    .ct-catalog-universe .ct-catalog-orbit-inner { width: 214px; }
    .ct-catalog-universe .ct-catalog-art-label { display: none; }
    .ct-catalog-universe .ct-catalog-art-orb-html { top: 6px; right: -1px; width: 50px; height: 50px; }
    .ct-catalog-universe .ct-catalog-art-orb-html img { width: 29px; height: 29px; }
    .ct-catalog-universe .ct-catalog-art-orb-css { bottom: 21px; left: -3px; width: 44px; height: 44px; }
    .ct-catalog-universe .ct-catalog-art-orb-javascript { top: 108px; bottom: auto; right: -1px; width: 43px; height: 43px; }
    .ct-catalog-universe .ct-catalog-art-orb-css img,.ct-catalog-universe .ct-catalog-art-orb-javascript img { width: 25px; height: 25px; }
    .ct-catalog-universe .ct-catalog-art-orb > span { font-size: 6px; }
    .ct-catalog-universe .ct-catalog-star-one { top: 76px; left: auto; right: 17px; font-size: 17px; }
    .ct-catalog-universe .ct-catalog-star-two { bottom: 5px; right: auto; left: 17px; font-size: 17px; }
    .ct-catalog-universe .ct-catalog-orbit-dot { display: none; }
    .ct-catalog-library { padding-top: 22px; }
    .ct-catalog-section-heading { margin-bottom: 13px; }
    .ct-catalog-section-heading h2 { font-size: 20px; }
    .ct-catalog-featured { display: grid; grid-template-columns: 43px minmax(0,1fr); padding: 12px 14px; gap: 7px 12px; }
    .ct-catalog-featured-icon { width: 43px; height: 43px; }
    .ct-catalog-featured-icon img { width: 28px; height: 28px; }
    .ct-catalog-featured-copy { min-width: 0; }
    .ct-catalog-featured-copy h3 { font-size: 16px; }
    .ct-catalog-featured-copy p { font-size: 10px; }
    .ct-catalog-featured-go { grid-column: 2; justify-self: end; font-size: 10px; gap: 10px; }
    .ct-catalog-featured-go > span { width: 24px; height: 24px; font-size: 15px; }
    .ct-catalog-tools { margin-top: 17px; }
}
@media (max-width: 370px) {
    .ct-catalog-hero-actions { gap: 12px; }
    .ct-catalog-hero-actions .ct-catalog-button { padding-inline: 11px; gap: 11px; }
    .ct-catalog-demo-actions { padding-inline: 8px; gap: 5px; }
    .ct-catalog-demo-actions > span { font-size: 9px; }
    .ct-catalog-demo-actions button { font-size: 10px; padding-inline: 7px; }
    .ct-catalog-demo-chrome { padding-inline: 9px; font-size: 8px; }
    .ct-catalog-demo-result-body #ct-h5-demo-result { font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
    .ct-catalog-universe .ct-catalog-art-orb { animation: ct-catalog-hero-float var(--ct-scene-duration) ease-in-out var(--ct-scene-delay) infinite; animation-play-state: paused; }
    .ct-catalog-universe[data-ct-hero-motion] .ct-catalog-art-orb { animation-play-state: running; }
    .ct-catalog-universe:focus-within .ct-catalog-art-orb { animation-play-state: paused; }
    @keyframes ct-catalog-hero-float { 0%,100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -6px; rotate: 2deg; } }
    @keyframes ct-catalog-demo-cursor { 0%,45% { opacity: 1; } 46%,100% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
    .ct-catalog-universe .ct-catalog-art-orb { will-change: auto; animation: none; translate: none; rotate: none; }
    .ct-catalog-demo-result-body #ct-h5-demo-result::after { animation: none; }
}