/* Code-owned homepage composition; the current shared shell owns search/navigation. */
.code-home { --dpu-site-width: 1120px; --dpu-site-gutter: 24px; background: #fff; }
.code-home main { font-size: 1rem; line-height: 1.6; }
.code-home main *, .code-home main *::before, .code-home main *::after { box-sizing: border-box; }
.code-home main :is(h1,h2,h3,p) { margin-top: 0; }
.code-home main :is(a,summary):focus-visible { outline: 3px solid var(--dpu-focus); outline-offset: 4px; }
.code-home main a { color: var(--dpu-blue); }
.code-home main svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.code-home main :is(h1,h2,h3) { color: var(--dpu-ink); overflow-wrap: anywhere; }
.code-home .intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; padding-block: 47px 30px; }
.code-home .eyebrow { font-size: .875rem; letter-spacing: .08em; font-weight: 700; text-transform: uppercase; color: var(--dpu-blue); margin: 0 0 10px; }
.code-home .intro h1 { font-size: clamp(2rem,3vw,2.5rem); letter-spacing: -.035em; line-height: 1.15; font-weight: 650; margin: 0; }
.code-home .intro h1 span { color: var(--dpu-blue); }
.code-home .intro-copy p { margin: 0 0 12px; }
.code-home .text-link { display: inline-flex; align-items: center; gap: 7px; font-size: 1rem; font-weight: 600; text-decoration: none; }
.code-home .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.code-home .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.code-home .section-heading h2 { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.3; margin: 0; font-weight: 650; }
.code-home .section-heading p { margin: 6px 0 0; font-size: 1rem; color: var(--dpu-muted); }
.code-home .usecases { margin-bottom: 30px; }
.code-home .usecases h2 { font-size: 1rem; font-weight: 600; color: var(--dpu-muted); margin: 0 0 11px; }
.code-home .usecase-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--dpu-line); border-radius: 9px; overflow: hidden; }
.code-home .usecase { display: flex; gap: 10px; align-items: center; padding: 17px 14px; color: var(--dpu-ink); text-decoration: none; min-width: 0; }
.code-home .usecase + .usecase { border-left: 1px solid var(--dpu-line); }
.code-home .usecase:hover { background: var(--dpu-wash); }
.code-home .usecase:focus-visible { outline-offset: -4px; }
.code-home .usecase-icon { display: flex; flex: none; color: #1973a5; }
.code-home .usecase:nth-child(2) .usecase-icon { color: #387b6a; }
.code-home .usecase:nth-child(3) .usecase-icon { color: #946827; }
.code-home .usecase:nth-child(4) .usecase-icon { color: #7965a4; }
.code-home .usecase strong { font-size: 1rem; display: block; font-weight: 600; line-height: 1.4; }
.code-home .usecase small { display: block; font-size: .875rem; color: var(--dpu-muted); margin-top: 4px; }
.code-home .usecase > svg { margin-left: auto; width: 16px; color: var(--dpu-muted); }
.code-home .feature { display: grid; grid-template-columns: 44% 56%; border: 1px solid #cfdfe7; border-radius: 10px; background: #eef5f8; overflow: hidden; margin-bottom: 46px; }
.code-home .feature-copy { padding: 30px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.code-home .feature .eyebrow { margin-bottom: 15px; color: #32756c; }
.code-home .feature h2 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 12px; font-weight: 650; }
.code-home :is(.feature h2,.project h3,.update h3) a { text-decoration: none; color: var(--dpu-ink); }
.code-home :is(.feature h2,.project h3,.update h3) a:hover { color: var(--dpu-blue); text-decoration: underline; }
.code-home .feature-copy > p:not(.eyebrow) { margin: 0 0 17px; }
.code-home .meta-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.code-home .meta-tags a { font-size: .875rem; padding: 3px 8px; border: 1px solid #cfdee6; border-radius: 4px; color: #435461; background: #ffffffa6; text-decoration: none; overflow-wrap: anywhere; }
.code-home .feature-actions { display: flex; align-items: center; gap: 17px; margin-top: auto; flex-wrap: wrap; }
.code-home .feature-actions .dpu-btn { font-size: 1rem; min-height: 42px; white-space: normal; }
.code-home .feature-art { min-width: 0; background: #e0edf0; display: flex; align-items: center; padding: 24px; }
.code-home .feature-art > a { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 860 / 649; }

.code-home .projects { margin-bottom: 46px; }
.code-home .project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.code-home .project { min-width: 0; display: flex; flex-direction: column; }
.code-home .project > div { display: flex; flex-direction: column; flex: 1; }
.code-home .project-image { display: flex; align-items: center; justify-content: center; flex: none; height: 195px; padding: 12px; background: #edf5f3; border: 1px solid var(--dpu-line); border-radius: 7px; margin-bottom: 16px; }
.code-home .project:nth-child(2) .project-image { background: #f0f1fa; }
.code-home .project:nth-child(3) .project-image { background: #f7f2e9; }

.code-home .project .eyebrow { margin: 0 0 8px; color: var(--dpu-muted); }
.code-home .project-stack { display: block; color: var(--dpu-ink); text-transform: none; letter-spacing: normal; }
.code-home .project h3 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.4; font-weight: 600; }
.code-home .project p { margin: 0 0 12px; }
.code-home .project-links { margin-top: auto; padding-top: 3px; }
.code-home .updates-band { background: #f7f9fb; padding-block: 35px 39px; border-block: 1px solid #e5ebef; }
.code-home .updates-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 40px; align-items: start; }
.code-home .update-list { margin: 0; padding: 0; list-style: none; }
.code-home .update { display: grid; grid-template-columns: 136px minmax(0,1fr); gap: 20px; align-items: start; padding-block: 24px; border-top: 1px solid var(--dpu-line); }
.code-home .update-image { display: flex; align-items: center; justify-content: center; height: 96px; background: #fff; border: 1px solid var(--dpu-line); border-radius: 5px; padding: 5px; }
/* Fit the bitmap itself, so its opt-in frame does not enclose letterbox space.
 * Legacy captures already contain their framing; never add a CSS frame to them. */
.code-home :is(.feature-art,.project-image,.update-image) img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.code-home :is(.feature,.project,.update)[data-screenshot-presentation="css-framed-v1"] img { border-radius: 6px; box-shadow: 0 0 0 1px var(--dpu-line), 0 4px 18px #20313f14; }
.code-home .update:not(:has(.update-image)) { grid-template-columns: minmax(0,1fr); }
.code-home .update h3 { font-size: 1.25rem; line-height: 1.4; margin: 0 0 8px; font-weight: 600; }
.code-home .update-description { font-size: 1rem; line-height: 1.6; margin: 0 0 10px; }
.code-home .update-meta { display: flex; flex-wrap: wrap; font-size: .875rem; line-height: 1.5; gap: 5px 12px; color: var(--dpu-muted); }
.code-home .update-meta time { white-space: nowrap; }
.code-home .start-panel { background: #fff; border: 1px solid var(--dpu-line); border-radius: 8px; padding: 24px; scroll-margin-top: 20px; }
.code-home .start-panel h2 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.3; }
.code-home .start-panel h3 { font-size: 1rem; margin: 22px 0 8px; }
.code-home .start-panel p { margin: 0 0 18px; }
.code-home .start-links { display: grid; }
.code-home .start-links a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 42px; text-decoration: none; border-bottom: 1px solid var(--dpu-line); }
.code-home .start-links a:hover { text-decoration: underline; }
.code-home :is(.builder-link,.edition-link) { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--dpu-line); }
.code-home .topics { padding-block: 36px 40px; }
.code-home .topic-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.code-home .topic-group h3 { margin: 0 0 8px; font-size: 1.125rem; }
.code-home .topic-group p { margin: 0 0 16px; }
.code-home .topic-links { display: grid; gap: 2px; }
.code-home .topic-links a { font-size: 1rem; line-height: 1.5; padding: 5px 0; min-height: 36px; text-decoration: none; }
.code-home .topic-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.code-home .all-topics { margin-top: 23px; border-top: 1px solid var(--dpu-line); padding-top: 17px; }
.code-home main summary { color: var(--dpu-blue); cursor: pointer; font-size: 1rem; font-weight: 600; line-height: 1.5; min-height: 36px; width: fit-content; }
.code-home .all-topic-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px 28px; padding-top: 22px; }
.code-home .all-topic-grid a { display: flex; align-items: baseline; gap: 7px; justify-content: space-between; min-height: 32px; text-decoration: none; overflow-wrap: anywhere; }
.code-home .all-topic-grid a:hover { text-decoration: underline; }
.code-home .all-topic-grid small { font-size: .875rem; color: var(--dpu-muted); white-space: nowrap; }
.code-home :is(.dpu-site-header,.dpu-site-subnav,.dpu-site-footer,.dpw-body-edit) :is(a,p,h2,span,input,button) { font-size: .875rem; }
.code-home .dpu-site-footer { overflow-wrap: anywhere; }
@media(max-width:1050px) {
 .code-home .intro { gap: 30px; }
 .code-home .feature { grid-template-columns: 48% 52%; }
 .code-home :is(.feature-copy,.feature-art) { padding: 22px; }
 .code-home .updates-layout { grid-template-columns: minmax(0,1fr) 275px; gap: 28px; }
 .code-home .update { grid-template-columns: 104px minmax(0,1fr); gap: 16px; }
 .code-home .update-image { height: 78px; }
 .code-home .usecase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .code-home .usecase:nth-child(3) { border-left: 0; }
 .code-home .usecase:nth-child(n+3) { border-top: 1px solid var(--dpu-line); }
}
@media(max-width:800px) {
 .code-home .intro { grid-template-columns: 1fr; gap: 18px; padding-top: 30px; }
 .code-home .feature { grid-template-columns: 1fr; }
 .code-home .feature-art > a { max-height: 320px; }
 .code-home .project-grid { grid-template-columns: 1fr; gap: 28px; }
 .code-home .project { display: grid; grid-template-columns: 35% minmax(0,1fr); gap: 20px; }
 .code-home .project-image { height: 190px; margin: 0; }
 .code-home .updates-layout { grid-template-columns: 1fr; }
 .code-home .update { grid-template-columns: 136px minmax(0,1fr); }
 .code-home .update-image { height: 96px; }
 .code-home .start-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
 .code-home .topic-groups { grid-template-columns: 1fr; gap: 28px; }
 .code-home .topic-links { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 20px; }
 .code-home .all-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .code-home { --dpu-site-gutter: 20px; }
 .code-home .project { display: flex; }
 .code-home .project-image { height: 220px; margin-bottom: 16px; }
 .code-home .update { grid-template-columns: 76px minmax(0,1fr); gap: 14px; }
 .code-home .update-image { height: 66px; }
 .code-home .update-copy { display: contents; }
 .code-home .update h3 { margin-bottom: 0; }
 .code-home :is(.update-description,.update-meta,.code-tutorial-actions) { grid-column: 1 / -1; margin-block: 0; }
 .code-home :is(.topic-links,.start-links,.all-topic-grid) { grid-template-columns: 1fr; }
 .code-home .usecase { gap: 8px; padding: 14px 10px; }
 .code-home .usecase small { display: none; }
 .code-home .usecase > svg { display: none; }
 .code-home .dpu-footer-columns { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
}
@media(max-width:400px) {
 .code-home .usecase-grid { grid-template-columns: 1fr; }
 .code-home .usecase + .usecase { border-left: 0; border-top: 1px solid var(--dpu-line); }
}

.code-home .more-tutorials { border-top: 1px solid var(--dpu-line); padding-top: 20px; }