.nextjs-layouts-page{--lp-bg:#f6f8fc;--lp-surface:#fff;--lp-soft:#eef3fb;--lp-text:#142038;--lp-muted:#5d6980;--lp-border:#d9e2f0;--lp-blue:#2563eb;--lp-cyan:#0891b2;--lp-violet:#7c3aed;--blog-bg:var(--lp-bg);--blog-surface:var(--lp-surface);--blog-surface-soft:var(--lp-soft);--blog-text:var(--lp-text);--blog-muted:var(--lp-muted);--blog-border:var(--lp-border);--blog-accent:var(--lp-blue);--blog-accent-2:var(--lp-cyan);background:var(--lp-bg)}
.nextjs-layouts-page.active-dark-mode{--lp-bg:#08101e;--lp-surface:#0f192a;--lp-soft:#15233a;--lp-text:#eff5ff;--lp-muted:#acb9ce;--lp-border:#263a59;--lp-blue:#73a4ff;--lp-cyan:#5de1f3;--lp-violet:#b795ff}
.nextjs-layouts-page .blog-hero--article{padding:116px 0 68px;border-bottom:1px solid var(--lp-border);background:radial-gradient(circle at 86% 18%,rgba(37,99,235,.16),transparent 31%),radial-gradient(circle at 5% 90%,rgba(124,58,237,.1),transparent 26%),var(--lp-surface)}
.nextjs-layouts-page .blog-hero--article .blog-container{display:grid;grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr);grid-template-rows:auto auto auto auto auto;column-gap:clamp(36px,5vw,72px);align-items:center}.nextjs-layouts-page .blog-breadcrumbs{grid-column:1/-1;margin-bottom:30px}.nextjs-layouts-page .blog-eyebrow,.nextjs-layouts-page .blog-hero h1,.nextjs-layouts-page .blog-hero__intro,.nextjs-layouts-page .article-meta{grid-column:1}.nextjs-layouts-page .blog-eyebrow{display:inline-flex;width:max-content;max-width:100%;padding:6px 11px;border:1px solid rgba(37,99,235,.2);border-radius:999px;background:rgba(37,99,235,.08);color:var(--lp-blue);font-size:11px;letter-spacing:.08em}.nextjs-layouts-page .blog-hero h1{max-width:680px;margin:17px 0 18px;font-size:clamp(38px,4.6vw,60px);line-height:1.04;letter-spacing:-.042em}.nextjs-layouts-page .blog-hero__intro{max-width:650px;color:var(--lp-muted);font-size:clamp(17px,1.6vw,20px);line-height:1.62}.nextjs-layouts-page .article-meta{gap:8px 18px;margin-top:26px;color:var(--lp-muted);font-size:14px}.layouts-hero__visual{grid-column:2;grid-row:2/6;margin:0;overflow:hidden;border:1px solid #243a66;border-radius:22px;background:#051126;box-shadow:0 28px 60px rgba(8,18,40,.22)}.layouts-hero__visual img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.nextjs-layouts-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}.nextjs-layouts-page .article-content{max-width:780px;color:var(--lp-text);font-size:17px;line-height:1.77}.nextjs-layouts-page .article-content>p:first-child{font-size:19px;line-height:1.68}.nextjs-layouts-page .article-content h2{margin:54px 0 17px;font-size:clamp(28px,3.2vw,36px);letter-spacing:-.025em}.nextjs-layouts-page .article-content h3{margin:32px 0 10px;font-size:clamp(21px,2.3vw,25px)}.nextjs-layouts-page .article-content p,.nextjs-layouts-page .article-content ul{margin-bottom:21px}.nextjs-layouts-page .article-toc{top:98px;padding:21px;border-radius:14px;box-shadow:none}.nextjs-layouts-page .article-toc h2{font-size:17px}.nextjs-layouts-page .article-toc ol{font-size:13px}
.learning-path,.concept-diagram{margin:36px 0 44px;padding:clamp(20px,4vw,32px);border:1px solid var(--lp-border);border-radius:20px;background:var(--lp-surface)}.learning-path h2{margin:0 0 24px!important;font-size:clamp(22px,3vw,28px)!important}.learning-path ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0!important;padding:0;list-style:none}.learning-path li{position:relative;min-width:0;padding:15px 12px;border:1px solid var(--lp-border);border-radius:12px;background:var(--lp-soft)}.learning-path li:not(:last-child)::after{position:absolute;z-index:2;top:50%;right:-9px;width:8px;height:8px;border-top:2px solid var(--lp-blue);border-right:2px solid var(--lp-blue);content:'';transform:translateY(-50%) rotate(45deg)}.learning-path a{color:inherit;text-decoration:none}.learning-path small,.learning-path strong,.learning-path em{display:block}.learning-path small{color:var(--lp-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.learning-path strong{margin-top:4px;font-size:13px;line-height:1.3}.learning-path em{margin-top:5px;color:var(--lp-muted);font-size:10px;font-style:normal}.learning-path .is-current{border-color:var(--lp-blue);background:linear-gradient(145deg,rgba(37,99,235,.15),rgba(124,58,237,.1))}.learning-path .is-complete strong{color:var(--lp-blue)}
.concept-diagram figcaption{margin-bottom:24px}.concept-diagram figcaption strong{display:block;color:var(--lp-text);font-size:clamp(21px,3vw,28px)}.concept-diagram figcaption span{display:block;margin-top:5px;color:var(--lp-muted);font-size:14px;line-height:1.55}.route-map__rows{display:grid;gap:10px}.route-map__rows>div{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(110px,.42fr);align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--lp-border);border-radius:12px;background:var(--lp-soft)}.route-map__rows code{overflow-wrap:anywhere;color:var(--lp-text)}.route-map__rows span{color:var(--lp-blue);font-size:25px;text-align:center}.route-map__rows b{padding:7px 10px;border-radius:8px;background:#10254b;color:#8be6ff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center}
.shell,.nesting{padding:18px;border:1px solid #315a9e;border-radius:16px;background:#0a162b;color:#dce9ff}.shell__header{padding:14px;border:1px solid #3769b5;border-radius:10px;background:#102c54;text-align:center}.shell__body{display:grid;grid-template-columns:minmax(120px,.35fr) 1fr;gap:12px;margin-top:12px}.shell__side,.shell__page{display:grid;min-height:180px;place-items:center;padding:16px;border-radius:10px}.shell__side{border:1px solid #3c5f92;background:#122440}.shell__page{border:2px solid #42d7ee;background:linear-gradient(145deg,#163668,#2b1c60);color:#fff}.nesting__root,.nesting__nested,.nesting__page{padding:18px;border-radius:13px}.nesting__root{border:1px solid #4c84db;background:#10254b}.nesting__nested{margin-top:14px;border:1px solid #8d65e8;background:#241b50}.nesting__page{display:grid;min-height:130px;margin-top:14px;place-items:center;border:2px solid #42d7ee;background:#0f3454;text-align:center}.nesting span,.nesting code{display:block;color:#fff}.nesting code{margin-top:5px;color:#8be6ff}.mistake-list{display:grid;gap:10px;padding:0!important;list-style:none}.mistake-list li{padding:15px 17px;border:1px solid var(--lp-border);border-left:4px solid var(--lp-violet);border-radius:10px;background:var(--lp-surface)}.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(--lp-border);border-radius:13px;background:var(--lp-surface)}.tutorial-nav a{color:inherit;text-decoration:none}.tutorial-nav a:hover{border-color:var(--lp-blue)}.tutorial-nav small,.tutorial-nav strong{display:block}.tutorial-nav small{margin-bottom:5px;color:var(--lp-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.tutorial-nav strong{color:var(--lp-text);font-size:14px;line-height:1.4}.tutorial-nav [aria-disabled=true]{opacity:.68;text-align:right}
@media(max-width:991px){.nextjs-layouts-page .blog-hero--article .blog-container{grid-template-columns:1fr}.nextjs-layouts-page .blog-breadcrumbs,.nextjs-layouts-page .blog-eyebrow,.nextjs-layouts-page .blog-hero h1,.nextjs-layouts-page .blog-hero__intro,.nextjs-layouts-page .article-meta,.layouts-hero__visual{grid-column:1}.layouts-hero__visual{grid-row:auto;max-width:780px;margin-top:34px}.nextjs-layouts-page .article-layout{grid-template-columns:1fr;gap:28px}.nextjs-layouts-page .article-content{max-width:780px;margin-inline:auto}.nextjs-layouts-page .article-toc{position:static;grid-row:1;width:min(780px,100%);max-height:none;margin-inline:auto}.nextjs-layouts-page .article-toc ol{display:flex;gap:8px;overflow-x:auto;margin:0;padding:0 0 8px;list-style:none}.nextjs-layouts-page .article-toc li,.nextjs-layouts-page .article-toc li+li{flex:0 0 auto;margin:0}.nextjs-layouts-page .article-toc a{display:block;padding:7px 10px;border:1px solid var(--lp-border);border-radius:999px;background:var(--lp-soft);text-decoration:none}.learning-path ol{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.nextjs-layouts-page .blog-hero--article{padding:102px 0 46px}.nextjs-layouts-page .blog-hero h1{font-size:clamp(32px,10vw,43px)}.nextjs-layouts-page .blog-hero__intro{font-size:17px}.layouts-hero__visual{margin-top:27px;border-radius:14px;box-shadow:none}.nextjs-layouts-page .article-layout{width:min(100% - 28px,780px);padding:44px 0 74px}.nextjs-layouts-page .article-content{font-size:16px;line-height:1.72}.nextjs-layouts-page .article-content>p:first-child{font-size:18px}.nextjs-layouts-page .article-content h2{margin-top:44px;font-size:clamp(26px,8vw,33px)}.learning-path ol{grid-template-columns:1fr}.learning-path li:not(:last-child)::after{top:auto;right:50%;bottom:-8px;transform:translateX(50%) rotate(135deg)}.route-map__rows>div{grid-template-columns:1fr;gap:5px;text-align:center}.route-map__rows span{transform:rotate(90deg)}.shell__body,.tutorial-nav{grid-template-columns:1fr}.shell__side{min-height:90px}.tutorial-nav [aria-disabled=true]{text-align:left}}
@media(max-width:420px){.nextjs-layouts-page .blog-container{width:min(100% - 22px,1180px)}.nextjs-layouts-page .article-layout{width:calc(100% - 22px)}.learning-path,.concept-diagram{padding:16px;border-radius:12px}}
@media print{.learning-path a{color:#000}.concept-diagram{break-inside:avoid}}