.nextjs-compose-page{--compose-cyan:#30d9ff;--compose-blue:#4f7cff;--compose-red:#ff5269;--compose-green:#36d99a}.compose-hero__visual,.compose-article-art{margin:32px 0 0;overflow:hidden;border:1px solid rgba(79,124,255,.28);border-radius:22px;background:#050b18;box-shadow:0 24px 70px rgba(5,14,35,.18)}.compose-hero__visual img,.compose-article-art img{display:block;width:100%;height:auto}.compose-article-art figcaption{padding:14px 18px;background:#0d1d31;color:#dcecff}.compose-article-art figcaption strong{color:#fff}.compose-diagram{margin:28px 0;padding:20px;border:1px solid rgba(79,124,255,.25);border-radius:18px;background:linear-gradient(145deg,#071322,#10233b);color:#eaf5ff;overflow:hidden}.compose-diagram figcaption{display:grid;gap:4px;margin-bottom:18px}.compose-diagram figcaption strong{color:#fff}.compose-diagram figcaption span{color:#b9cbe0;font-size:.9rem}.compose-diagram>[role=img]{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}.compose-diagram b,.compose-diagram section,.compose-diagram .node{display:grid;gap:6px;min-width:112px;padding:14px;border:1px solid rgba(48,217,255,.34);border-radius:12px;background:rgba(12,35,61,.9);text-align:center;color:#fff}.compose-diagram span,.compose-diagram em{font-size:.78rem;color:#bdd0e5;font-style:normal}.compose-diagram i{color:var(--compose-cyan);font-size:1.25rem;font-style:normal}.compose-diagram .database{border-color:rgba(79,124,255,.8)}.compose-diagram .redis,.compose-diagram .danger{border-color:rgba(255,82,105,.8)}.compose-diagram .secure{border-color:rgba(54,217,154,.8)}.compose-stack-grid{display:grid!important;grid-template-columns:1fr auto 1fr auto 1.5fr;align-items:center}.compose-stack-grid section{grid-template-columns:1fr 1fr}.compose-stack-grid section strong{grid-column:1/-1}.compose-branch{display:grid!important;grid-template-columns:1fr auto 1fr;gap:18px!important}.compose-flow-list{display:grid!important;grid-template-columns:repeat(5,1fr);gap:20px!important}.compose-flow-list .node{position:relative;min-width:0}.compose-flow-list .node:not(:last-child)::after{position:absolute;right:-18px;top:50%;content:'\2192';color:var(--compose-cyan);transform:translateY(-50%)}.compose-cases,.compose-lanes{display:grid!important;grid-template-columns:repeat(4,1fr);align-items:stretch!important}.compose-lanes{grid-template-columns:repeat(3,1fr)}.compose-grid,.compose-checklists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0}.compose-grid section,.compose-checklists section{padding:20px;border:1px solid rgba(79,124,255,.18);border-radius:16px;background:rgba(79,124,255,.045)}.compose-grid h3,.compose-checklists h3{margin-top:0}.compose-page-table{max-width:100%;overflow-x:auto}.compose-page-table table{min-width:640px}.compose-learning-path{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0;padding:0;list-style:none}.compose-learning-path li{padding:16px;border-radius:14px;background:rgba(79,124,255,.08);text-align:center}.compose-learning-path span,.compose-learning-path em{display:block;font-size:.78rem}.compose-learning-path em{color:#348c68}.compose-learning-path .upcoming{opacity:.72}.nextjs-compose-page .code-block pre{max-width:100%;overflow-x:auto}
@media(max-width:767px){.nextjs-compose-page .blog-hero--article{padding:102px 0 46px}.nextjs-compose-page .article-layout{width:min(100% - 28px,760px)}.compose-hero__visual,.compose-article-art{border-radius:15px}.compose-diagram{padding:16px;margin-inline:-2px}.compose-diagram>[role=img],.compose-stack-grid,.compose-branch,.compose-cases,.compose-lanes{display:flex!important;flex-direction:column}.compose-diagram i{transform:rotate(90deg)}.compose-stack-grid section{grid-template-columns:1fr}.compose-flow-list{grid-template-columns:1fr!important}.compose-flow-list .node:not(:last-child)::after{right:50%;top:auto;bottom:-24px;transform:translateX(50%) rotate(90deg)}.compose-grid,.compose-checklists,.compose-learning-path{grid-template-columns:1fr}.compose-diagram b,.compose-diagram section,.compose-diagram .node{width:100%}}
@media(prefers-color-scheme:light){body:not(.active-dark-mode) .compose-diagram{background:linear-gradient(145deg,#eef8ff,#f7f4ff);color:#172944}body:not(.active-dark-mode) .compose-diagram b,body:not(.active-dark-mode) .compose-diagram section,body:not(.active-dark-mode) .compose-diagram .node{background:#fff;color:#10213a}body:not(.active-dark-mode) .compose-diagram span,body:not(.active-dark-mode) .compose-diagram figcaption span{color:#52657d}body:not(.active-dark-mode) .compose-diagram figcaption strong{color:#10213a}}