.dc-page { --ink:#18382f; --muted:#465e55; --green:#175839; color:var(--ink); background:#fff; font:1rem/1.65 IBMPlexSans-Regular,system-ui,sans-serif; }
.dc-wrap { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.dc-page h1,.dc-page h2,.dc-page h3 { color:var(--ink); font-family:IBMPlexSans-Bold,system-ui,sans-serif; line-height:1.12; }
.dc-page h2 { font-size:clamp(1.9rem,3.6vw,2.85rem); letter-spacing:-.045em; margin:0 0 1rem; }
.dc-page h3 { font-size:1.28rem; margin:0 0 .65rem; }
.dc-page p { color:var(--muted); margin:0 0 1rem; }
.dc-hero { background:#f2f5ee; }
.dc-hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(3.5rem,6.5vw,6rem); }
.dc-hero h1 { font-size:clamp(3rem,5.9vw,5.6rem); letter-spacing:-.065em; margin:0 0 1.15rem; line-height:1; }
.dc-hero h1 span { color:var(--green); }
.dc-hero p.dc-lead { font-size:clamp(1.28rem,2.1vw,1.72rem); color:var(--ink); line-height:1.3; }
.dc-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin:1.6rem 0 .75rem; }
.dc-btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border:1px solid var(--green); padding:.7rem 1.15rem; border-radius:.45rem; font-weight:bold; }
.dc-primary { background:var(--green); color:white; }
.dc-secondary { color:var(--green); background:white; }
.dc-btn:hover,.dc-btn:focus { background:#10452e; color:white; text-decoration:none; }
.dc-meta { color:var(--muted); font-size:.88rem; }
.dc-meta a,.dc-nav a { color:var(--green); text-decoration:underline; text-underline-offset:.2em; }
.dc-preview { margin:0; min-width:0; padding:clamp(1rem,2.6vw,2.15rem); border-radius:1rem; background-color:#183f34; background-image:radial-gradient(#81ab8844 1px,transparent 1px); background-size:16px 16px; }
.dc-preview figcaption { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; margin-bottom:1rem; color:#f6fbf5; font-weight:bold; }
.dc-preview figcaption span { margin-left:auto; color:#d0e2d4; font-size:.85rem; font-weight:normal; }
.dc-preview a { display:block; width:fit-content; max-width:100%; margin-inline:auto; }
.dc-preview img { display:block; width:auto; height:auto; max-width:min(100%,30rem); max-height:min(15rem,36vh); object-fit:contain; border-radius:.45rem; }
.dc-nav { border-block:1px solid #d5dfd7; background:white; }
.dc-nav .dc-wrap { display:flex; flex-wrap:wrap; column-gap:2rem; row-gap:.45rem; padding-block:.8rem; }
.dc-nav a { text-decoration:none; font-weight:bold; }
.dc-nav a:hover { text-decoration:underline; }
.dc-section { display:grid; grid-template-columns:.86fr 1.3fr; gap:clamp(2rem,8vw,7rem); padding-block:clamp(3rem,6vw,5.6rem); }
.dc-intro p { max-width:26rem; }
.dc-list { margin:0; }
.dc-list > div { border-top:1px solid #cedad0; padding:1rem 0; }
.dc-list dt { font-size:1.2rem; color:var(--ink); }
.dc-list dt i { display:inline-block; width:1.65rem; color:var(--green); }
.dc-list dd { color:var(--muted); margin:.35rem 0 0; }
.dc-band { background:#f2f5f1; padding-block:clamp(3rem,5vw,4.5rem); }
.dc-steps { list-style:none; counter-reset:setup; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.dc-steps li { counter-increment:setup; border-top:1px solid #bfcec3; padding-top:1rem; }
.dc-steps li::before { content:counter(setup); display:grid; place-items:center; width:2rem; height:2rem; background:#d9e9d8; color:var(--green); border-radius:50%; margin-bottom:1rem; font-weight:bold; }
.dc-page code { color:#264839; overflow-wrap:anywhere; }
.dc-share { min-width:0; }
.dc-share details { margin:.8rem 0 1.2rem; border-block:1px solid #d5dfd7; }
.dc-share summary { color:var(--green); cursor:pointer; padding:.8rem 0; font-weight:bold; }
.dc-share pre { padding:.8rem; background:#eef2ed; border-radius:.4rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.dc-source { background:#e4eee3; padding-block:2.5rem; }
.dc-source .dc-wrap { display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.dc-source h2 { font-size:1.6rem; margin:0 0 .5rem; }
.dc-source p { max-width:40rem; margin:0; }
.dc-source a { flex:none; }
.dc-page :focus-visible { outline:3px solid #1683b0; outline-offset:3px; }
@media (max-width:850px) {
    .dc-wrap { width:min(660px,calc(100% - 40px)); }
    .dc-hero-grid,.dc-section { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
    .dc-intro p { max-width:none; }
    .dc-source .dc-wrap { flex-direction:column; align-items:flex-start; gap:1rem; }
}
@media (max-width:680px) {
    .dc-steps { grid-template-columns:minmax(0,1fr); gap:1rem; }
    .dc-steps li { position:relative; padding-left:2.8rem; }
    .dc-steps li::before { position:absolute; left:0; top:1rem; }
    .dc-nav .dc-wrap { column-gap:1rem; }
}