.docker-nextjs-page{--docker-bg:#f5f8fc;--docker-surface:#fff;--docker-soft:#edf4fb;--docker-text:#142037;--docker-muted:#5c687d;--docker-border:#d7e2ee;--docker-blue:#1976d2;--docker-cyan:#0891b2;--docker-violet:#7357e8;--blog-bg:var(--docker-bg);--blog-surface:var(--docker-surface);--blog-surface-soft:var(--docker-soft);--blog-text:var(--docker-text);--blog-muted:var(--docker-muted);--blog-border:var(--docker-border);--blog-accent:var(--docker-blue);--blog-accent-2:var(--docker-cyan);background:var(--docker-bg)}
.docker-nextjs-page.active-dark-mode{--docker-bg:#07111f;--docker-surface:#0d1929;--docker-soft:#13243a;--docker-text:#eef6ff;--docker-muted:#aab9cd;--docker-border:#253d5c;--docker-blue:#68a9ff;--docker-cyan:#55deef;--docker-violet:#a998ff}
.docker-nextjs-page .blog-hero--article{padding:116px 0 68px;border-bottom:1px solid var(--docker-border);background:radial-gradient(circle at 88% 18%,rgba(25,118,210,.18),transparent 32%),radial-gradient(circle at 6% 88%,rgba(115,87,232,.1),transparent 26%),var(--docker-surface)}
.docker-nextjs-page .blog-hero--article .blog-container{display:grid;grid-template-columns:minmax(0,.9fr) minmax(410px,1.1fr);grid-template-rows:auto auto auto auto auto;column-gap:clamp(38px,5vw,72px);align-items:center}
.docker-nextjs-page .blog-breadcrumbs{grid-column:1/-1;margin-bottom:30px}.docker-nextjs-page .blog-eyebrow,.docker-nextjs-page .blog-hero h1,.docker-nextjs-page .blog-hero__intro,.docker-nextjs-page .article-meta{grid-column:1}.docker-nextjs-page .blog-eyebrow{display:inline-flex;width:max-content;max-width:100%;padding:6px 11px;border:1px solid rgba(25,118,210,.24);border-radius:999px;background:rgba(25,118,210,.09);color:var(--docker-blue);font-size:11px;letter-spacing:.08em}.docker-nextjs-page .blog-hero h1{max-width:700px;margin:17px 0 18px;font-size:clamp(38px,4.5vw,58px);line-height:1.04;letter-spacing:-.04em}.docker-nextjs-page .blog-hero__intro{max-width:650px;color:var(--docker-muted);font-size:clamp(17px,1.55vw,20px);line-height:1.62}.docker-nextjs-page .article-meta{gap:8px 18px;margin-top:26px;color:var(--docker-muted);font-size:14px}.docker-hero__visual{grid-column:2;grid-row:2/6;margin:0;overflow:hidden;border:1px solid #264f85;border-radius:22px;background:#061226;box-shadow:0 28px 60px rgba(5,20,42,.24)}.docker-hero__visual img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.docker-nextjs-page .article-layout{width:min(1120px,calc(100% - 40px));grid-template-columns:minmax(0,780px) minmax(220px,270px);gap:clamp(38px,5vw,68px);padding:68px 0 96px}.docker-nextjs-page .article-content{max-width:780px;color:var(--docker-text);font-size:17px;line-height:1.77}.docker-nextjs-page .article-content>p:first-child{font-size:19px;line-height:1.68}.docker-nextjs-page .article-content h2{margin:54px 0 17px;font-size:clamp(28px,3.2vw,36px);letter-spacing:-.025em}.docker-nextjs-page .article-content h3{margin:32px 0 10px;font-size:clamp(21px,2.3vw,25px)}.docker-nextjs-page .article-content p,.docker-nextjs-page .article-content ul{margin-bottom:21px}.docker-nextjs-page .article-toc{top:98px;padding:21px;border-radius:14px;box-shadow:none}.docker-nextjs-page .article-toc h2{font-size:17px}.docker-nextjs-page .article-toc ol{font-size:13px}
.docker-outcome,.command-flow{display:flex;align-items:center;justify-content:center;gap:10px;margin:32px 0;padding:18px;border:1px solid var(--docker-border);border-radius:15px;background:var(--docker-surface);overflow-x:auto}.docker-outcome span,.docker-outcome strong,.command-flow span,.command-flow strong{flex:0 0 auto;padding:9px 11px;border:1px solid var(--docker-border);border-radius:9px;background:var(--docker-soft);font-size:12px}.docker-outcome strong,.command-flow strong{border-color:var(--docker-blue);background:#102b52;color:#dff7ff}.docker-outcome i,.command-flow i{color:var(--docker-blue);font-size:20px;font-style:normal}
.compose-definition,.stage-pipeline,.compose-network,.production-path{margin:36px 0 44px;padding:clamp(20px,4vw,32px);border:1px solid var(--docker-border);border-radius:20px;background:var(--docker-surface)}
.compose-definition figcaption,.stage-pipeline figcaption,.compose-network figcaption,.production-path figcaption{margin-bottom:24px}.compose-definition figcaption strong,.stage-pipeline figcaption strong,.compose-network figcaption strong,.production-path figcaption strong{display:block;color:var(--docker-text);font-size:clamp(21px,3vw,28px)}.compose-definition figcaption span,.stage-pipeline figcaption span,.compose-network figcaption span,.production-path figcaption span{display:block;margin-top:5px;color:var(--docker-muted);font-size:14px;line-height:1.55}
.compose-definition>div{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.compose-definition section{display:grid;justify-items:center;gap:8px;padding:20px;border:1px solid #2c568d;border-radius:14px;background:#0d1d34;color:#ddebff;text-align:center}.compose-definition b{color:#75d8ff;font-size:17px}.compose-definition span{color:#a9b9ce;font-size:12px}.compose-definition i{color:#68a9ff;font-size:22px;font-style:normal}.compose-definition strong{padding:8px 12px;border-radius:8px;background:#17345c;font-size:13px}
.article-art{margin:36px 0 44px;overflow:hidden;border:1px solid #244975;border-radius:20px;background:#061226}.article-art img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.article-art figcaption{padding:15px 18px 17px;border-top:1px solid #244975;background:#0b1a2e;color:#b7c7da;font-size:14px;line-height:1.55}.article-art figcaption strong{color:#fff}
.stage-pipeline ol{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0!important;padding:0;list-style:none}.stage-pipeline li{position:relative;display:grid;gap:4px;min-width:0;padding:16px 12px;border:1px solid #2b5489;border-radius:12px;background:#0c1d34;color:#e5f2ff;text-align:center}.stage-pipeline li:not(:last-child)::after{position:absolute;z-index:2;top:50%;right:-9px;width:8px;height:8px;border-top:2px solid #56c9ff;border-right:2px solid #56c9ff;content:"";transform:translateY(-50%) rotate(45deg)}.stage-pipeline small{color:#69d8ff;font-size:10px;letter-spacing:.08em}.stage-pipeline b{font-size:16px}.stage-pipeline span{color:#a9b9ce;font-size:11px}.stage-pipeline code{color:#82e7ff}
.compose-network>div{display:flex;align-items:center;justify-content:center;gap:10px;padding:22px;border:1px dashed #366da7;border-radius:14px;background:#0a1a30;overflow-x:auto}.compose-network>div span,.compose-network>div strong,.compose-network>div b{flex:0 0 auto;padding:10px 12px;border:1px solid #315b91;border-radius:9px;background:#112b4d;color:#e5f4ff;font-size:12px}.compose-network>div b{border-color:#2b976e;background:#10392d;color:#c4ffe6}.compose-network>div i{color:#68cfff;font-size:20px;font-style:normal}.compose-network>small{display:block;margin-top:10px;color:var(--docker-muted);font-size:11px;text-align:center;text-transform:uppercase;letter-spacing:.08em}
.address-compare{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}.address-compare section{position:relative;padding:18px;border:1px solid var(--docker-border);border-radius:13px;background:var(--docker-surface)}.address-compare small,.address-compare code{display:block}.address-compare small{margin-bottom:8px;color:var(--docker-muted)}.address-compare code{padding-right:34px;overflow-wrap:anywhere;color:var(--docker-text)}.address-compare b{position:absolute;right:16px;bottom:14px;color:#ef4444;font-size:25px}.address-compare section+section b{color:#22a06b}
.production-path ol{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0!important;padding:0;list-style:none}.production-path li{position:relative;display:grid;justify-items:center;gap:7px;padding:16px 9px;border:1px solid #315b91;border-radius:12px;background:#0b1d34;color:#e5f4ff;text-align:center}.production-path li:not(:last-child)::after{position:absolute;z-index:2;top:50%;right:-9px;width:8px;height:8px;border-top:2px solid #56c9ff;border-right:2px solid #56c9ff;content:"";transform:translateY(-50%) rotate(45deg)}.production-path span{display:grid;width:26px;height:26px;place-items:center;border-radius:8px;background:#1b5794;color:#fff;font-size:11px}.production-path b{font-size:12px}
.production-checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0!important;list-style:none}.production-checklist li{position:relative;margin:0!important;padding:14px 14px 14px 42px;border:1px solid var(--docker-border);border-radius:10px;background:var(--docker-surface)}.production-checklist li::before{position:absolute;top:13px;left:14px;display:grid;width:20px;height:20px;place-items:center;border-radius:6px;background:#dff7ed;color:#08734f;font-size:12px;content:"✓"}.active-dark-mode .production-checklist li::before{background:#123c32;color:#65e4bd}
.tutorial-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:50px 0 34px}.tutorial-nav>*{min-width:0;padding:18px;border:1px solid var(--docker-border);border-radius:13px;background:var(--docker-surface)}.tutorial-nav a{color:inherit;text-decoration:none}.tutorial-nav a:hover{border-color:var(--docker-blue)}.tutorial-nav small,.tutorial-nav strong{display:block}.tutorial-nav small{margin-bottom:5px;color:var(--docker-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.tutorial-nav strong{color:var(--docker-text);font-size:14px;line-height:1.4}.tutorial-nav [aria-disabled=true]{opacity:.68;text-align:right}
@media(max-width:991px){.docker-nextjs-page .blog-hero--article .blog-container{grid-template-columns:1fr}.docker-nextjs-page .blog-breadcrumbs,.docker-nextjs-page .blog-eyebrow,.docker-nextjs-page .blog-hero h1,.docker-nextjs-page .blog-hero__intro,.docker-nextjs-page .article-meta,.docker-hero__visual{grid-column:1}.docker-hero__visual{grid-row:auto;max-width:780px;margin-top:34px}.docker-nextjs-page .article-layout{grid-template-columns:1fr;gap:28px}.docker-nextjs-page .article-content{max-width:780px;margin-inline:auto}.docker-nextjs-page .article-toc{position:static;grid-row:1;width:min(780px,100%);max-height:none;margin-inline:auto}.docker-nextjs-page .article-toc ol{display:flex;gap:8px;overflow-x:auto;margin:0;padding:0 0 8px;list-style:none;scrollbar-width:thin}.docker-nextjs-page .article-toc li,.docker-nextjs-page .article-toc li+li{flex:0 0 auto;margin:0}.docker-nextjs-page .article-toc a{display:block;padding:7px 10px;border:1px solid var(--docker-border);border-radius:999px;background:var(--docker-soft);text-decoration:none}}
@media(max-width:767px){.docker-nextjs-page .blog-hero--article{padding:102px 0 46px}.docker-nextjs-page .blog-hero h1{font-size:clamp(31px,9.8vw,43px)}.docker-nextjs-page .blog-hero__intro{font-size:17px}.docker-hero__visual{margin-top:27px;border-radius:14px;box-shadow:none}.docker-nextjs-page .article-layout{width:min(100% - 28px,780px);padding:44px 0 74px}.docker-nextjs-page .article-content{font-size:16px;line-height:1.72}.docker-nextjs-page .article-content>p:first-child{font-size:18px}.docker-nextjs-page .article-content h2{margin-top:44px;font-size:clamp(26px,8vw,33px)}.compose-definition>div,.address-compare,.production-checklist,.tutorial-nav{grid-template-columns:1fr}.stage-pipeline ol,.production-path ol{grid-template-columns:1fr}.stage-pipeline li:not(:last-child)::after,.production-path li:not(:last-child)::after{top:auto;right:50%;bottom:-8px;transform:translateX(50%) rotate(135deg)}.docker-outcome,.command-flow,.compose-network>div{justify-content:flex-start}.tutorial-nav [aria-disabled=true]{text-align:left}}
@media(max-width:420px){.docker-nextjs-page .blog-container{width:min(100% - 22px,1180px)}.docker-nextjs-page .article-layout{width:calc(100% - 22px)}.compose-definition,.stage-pipeline,.compose-network,.production-path{padding:16px;border-radius:12px}.article-art{border-radius:12px}}
@media(prefers-reduced-motion:reduce){.article-art img{transition:none}}