/* Long-form case reader. The collection design stays in styles.css. */
.tutorial-pocket.comparison-pocket{margin:50px 0 0}
.architecture-comparison .pipeline-scroll svg{min-width:920px}
@media(max-width:760px){.tutorial-pocket.comparison-pocket{margin-top:36px}}
.code-wrap pre{max-height:680px;overflow:auto}.code-wrap code,.code-wrap .code-line{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}.code-wrap .code-line{min-width:0;width:100%;box-sizing:border-box}@media print{.code-wrap pre{max-height:none;overflow:visible}}
.article-origin{font-size:11px;line-height:1.9;margin:22px 0 0;color:#777;word-break:keep-all}.article-origin a{color:#333;margin-left:9px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#bbb}.blog-section>p.section-source{font-size:11px;line-height:1.8;color:#777;margin:-6px 0 25px}.section-source a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#bbb}.article-origin a:hover,.section-source a:hover{color:var(--red)}
#case-dialog{inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;background:#f7f7f5;overflow-y:auto;overscroll-behavior:contain}
.reader-bar{height:63px;padding:0 max(30px,calc((100% - 1200px)/2));font-size:11px;border-bottom:1px solid #d6d6d0;gap:20px}
.reader-bar>div{display:flex;align-items:center;gap:26px}.reader-bar button{font-size:11px;white-space:nowrap;padding:7px 0}.reader-bar #close-dialog{font-weight:700}.reader-bar #copy-article-link{color:#777;font-size:10px}
#reading-progress{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:2px;border:0;background:transparent;appearance:none}#reading-progress::-webkit-progress-bar{background:transparent}#reading-progress::-webkit-progress-value{background:var(--red)}#reading-progress::-moz-progress-bar{background:var(--red)}
.blog-shell{max-width:1280px;margin:auto;padding:0 40px}.blog-heading{margin-left:250px;padding:55px 0 34px}.blog-kicker{font:11px var(--mono);color:var(--red);margin-bottom:20px}.blog-heading h2{font-size:42px;letter-spacing:-1.9px;line-height:1.35;margin:0 0 23px;word-break:keep-all}.blog-deck{font-size:16px;color:#5d5d58;line-height:1.95;letter-spacing:-.25px;margin:0;word-break:keep-all}.blog-byline{display:flex;flex-wrap:wrap;gap:8px 17px;padding-top:23px;margin-top:25px;border-top:1px solid var(--line);font-size:10px;color:#777}
.blog-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:50px}.article-sidebar{align-self:start;position:sticky;top:91px;max-height:calc(100dvh - 120px);overflow-y:auto;padding-bottom:20px}.article-sidebar h3{font-size:11px;font-weight:700;margin:0 0 17px}.article-sidebar nav{border-top:2px solid var(--ink);padding-top:18px}.article-sidebar nav button{display:flex;align-items:baseline;text-align:left;gap:12px;width:100%;background:none;border:0;padding:8px 0;font-size:11px;line-height:1.7;color:#777;word-break:keep-all}.article-sidebar nav button span{flex-shrink:0;font:9px var(--mono);color:#aaa}.article-sidebar nav button:hover,.article-sidebar nav button[aria-current]{color:var(--red)}.article-sidebar nav button[aria-current]{font-weight:600}.article-sidebar dl{border-top:1px solid var(--line);padding-top:22px;margin-top:25px}.article-sidebar dt{font-size:9px;color:#999;margin:0 0 6px}.article-sidebar dd{font-size:11px;line-height:1.8;margin:0 0 17px;word-break:keep-all;color:#555}
.blog-content{min-width:0}.article-demo{margin:0 0 40px;padding:0;border:1px solid var(--line);font-size:12px}.article-demo summary{padding:15px 18px;display:flex;justify-content:space-between;color:#555;cursor:pointer;list-style:none}.article-demo summary::-webkit-details-marker{display:none}.article-demo summary span{color:var(--red);font-size:16px;line-height:1}.article-demo[open] summary{border-bottom:1px solid var(--line)}.article-demo[open] summary span{transform:rotate(45deg)}.article-demo figure{margin:0;padding:18px}.article-demo img,.article-demo video{display:block;width:100%;max-height:450px;object-fit:contain;background:#151515}.article-demo figcaption{font-size:10px;color:#888;margin-top:10px}.article-demo .specimen{min-height:260px}.article-demo .external-demo{padding:30px}
.blog-section{margin-bottom:52px;scroll-margin-top:96px}.section-number{font:10px var(--mono);letter-spacing:.8px;color:var(--red);margin-bottom:11px}.blog-section>h3{font-size:25px;font-weight:700;letter-spacing:-.8px;line-height:1.5;margin:0 0 22px;word-break:keep-all}.blog-section>p{font-size:14px;line-height:2;letter-spacing:-.18px;margin:0 0 22px;color:#383835;word-break:keep-all}.article-note{border-left:3px solid #aca99f;background:#edede8;padding:17px 20px;font-size:12px;line-height:1.95;color:#666;margin:24px 0;word-break:keep-all}
.pipeline{margin:27px 0 28px;border:1px solid #d4d4ce;background:#fafaf8}.pipeline-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 19px;border-bottom:1px solid #ddd;font-size:11px}.pipeline-heading strong{font-weight:600;word-break:keep-all}.pipeline-heading button{flex-shrink:0;border:0;background:none;color:#777;font:10px var(--mono);padding:5px 0}.pipeline-heading button:hover{color:var(--red)}.pipeline-scroll{overflow-x:auto}.pipeline-scroll svg{display:block;width:100%;min-width:780px;height:auto}.pipeline figcaption{padding:15px 19px;border-top:1px solid #ddd;font-size:10px;line-height:1.85;color:#777;word-break:keep-all}
.code-block{margin:27px 0 28px;background:#202221;color:#e3e7df;border:1px solid #202221;min-width:0}.code-block figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px;background:#292c29;border-bottom:1px solid #41433e}.code-block figcaption>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.code-kind{font-size:9px;color:#b2b5ac;flex-shrink:0}.code-kind.original{color:#f1b39e}.code-block figcaption strong{font-size:11px;line-height:1.6;font-weight:500}.code-block button{font-size:10px;background:none;border:1px solid #585d53;color:#c9cdc0;padding:4px 8px;white-space:nowrap}.code-block button:hover{border-color:#c9cdc0;color:#fff}.code-language{font:9px/1.8 var(--mono);padding:10px 18px 0;color:#8c9586;overflow-wrap:anywhere}.code-block pre{overflow-x:auto;overscroll-behavior-x:contain;margin:0;padding:17px 20px 21px 0;font:12px/1.85 var(--mono);tab-size:2}.code-block code{font:inherit;white-space:pre}.code-line{padding-left:54px;position:relative;min-height:22px;display:inline-block;min-width:100%;vertical-align:top}.code-line:before{content:attr(data-line);position:absolute;left:0;width:36px;text-align:right;color:#6e7768;font-size:10px;user-select:none}.code-source{display:block;border-top:1px solid #41433e;padding:12px 18px;color:#b7c1aa;font-size:10px;text-align:right}.code-source:hover{text-decoration:underline;text-underline-offset:3px}.syntax-string{color:#bed59b}.syntax-comment{color:#8c9982}.syntax-keyword{color:#e9aa90}.syntax-number{color:#a4c9e1}
.article-table{overflow-x:auto;margin:26px 0 28px}.article-table table{width:100%;border-collapse:collapse;font-size:11px;line-height:1.9;min-width:520px;text-align:left}.article-table th{background:#e9e9e3;font-weight:600;border-top:2px solid #444}.article-table th,.article-table td{padding:13px 16px;border-bottom:1px solid #d3d3cc;vertical-align:top;word-break:keep-all}.article-table td{color:#555}.article-table tr td:first-child{color:#222;font-weight:500}.article-references{border-top:2px solid var(--ink);padding-top:27px}.article-references>p{font-size:12px;color:#777}.article-references ol{padding-left:20px;font-size:12px;line-height:2.1;color:#555}.article-references li{padding-left:6px;margin-bottom:6px;overflow-wrap:anywhere}.article-references a{text-decoration:underline;text-decoration-color:#b7b7ac;text-underline-offset:4px}.article-references a:hover{color:var(--red)}
.reader-nav{max-width:1200px;margin:0 auto;padding:25px 0 40px}.reader-nav button{font-size:12px;padding:12px 0}.reader-nav button:hover:not(:disabled){color:var(--red)}
@media(max-width:1100px){.blog-shell{padding:0 30px}.blog-heading{margin-left:210px}.blog-layout{grid-template-columns:175px minmax(0,1fr);gap:35px}.blog-heading h2{font-size:36px}.blog-deck{font-size:15px}.reader-nav{margin:0 30px}.pipeline-scroll svg{min-width:780px}}
@media(max-width:760px){.reader-bar{height:57px;padding:0 18px;font-size:9px;gap:10px}.reader-bar>span{max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reader-bar>div{gap:15px}.reader-bar button{font-size:10px}.reader-bar #copy-article-link{font-size:9px}.blog-shell{padding:0 22px}.blog-heading{margin:0;padding:32px 0 27px}.blog-kicker{font-size:9px;margin-bottom:16px}.blog-heading h2{font-size:30px;letter-spacing:-1.1px;margin-bottom:19px}.blog-deck{font-size:13px;line-height:1.95}.blog-byline{font-size:9px;gap:8px 13px;margin-top:19px;padding-top:17px}.blog-layout{display:block}.article-sidebar{position:static;max-height:none;padding:0;margin:0 0 28px;overflow:visible}.article-sidebar nav{padding:16px 0 10px;border-bottom:1px solid var(--line)}.article-sidebar nav h3{margin-bottom:9px}.article-sidebar nav button{font-size:11px;padding:5px 0}.article-sidebar dl{display:none}.article-demo{margin-bottom:30px}.article-demo summary{font-size:11px;padding:13px 15px}.article-demo figure{padding:12px}.article-demo .external-demo{padding:24px 17px}.blog-section{margin-bottom:38px;scroll-margin-top:80px}.blog-section>h3{font-size:22px;letter-spacing:-.6px;margin-bottom:18px}.blog-section>p{font-size:13px;line-height:1.95}.section-number{font-size:9px}.article-note{padding:14px 16px;font-size:11px}.pipeline{margin:22px 0}.pipeline-heading{padding:12px 14px;align-items:flex-start;font-size:10px;gap:12px;line-height:1.7}.pipeline-heading button{font-size:9px;padding:0}.pipeline figcaption{font-size:9px;padding:12px 14px}.code-block{margin:22px 0}.code-block figcaption{padding:12px 13px;gap:12px}.code-block figcaption>div{gap:4px;align-items:flex-start;flex-direction:column}.code-block figcaption strong{font-size:10px}.code-block button{font-size:9px}.code-language{font-size:8px;padding:9px 13px 0}.code-block pre{font-size:11px;line-height:1.9;padding-top:14px}.code-line{padding-left:44px}.code-line:before{width:29px;font-size:9px}.code-source{font-size:9px;padding:11px 13px}.article-table table{font-size:10px;min-width:460px}.article-table th,.article-table td{padding:11px 13px}.article-references ol{font-size:11px}.reader-nav{margin:0 22px;padding-bottom:28px}.reader-nav button{font-size:11px}}
@media print{#case-dialog[open]{position:static;height:auto;overflow:visible}.reader-bar,.reader-nav,.article-sidebar,.article-demo{display:none}.blog-layout{display:block}.blog-heading{margin-left:0}.blog-shell{max-width:none}.code-block pre{white-space:pre-wrap}.pipeline-scroll svg{min-width:0}.blog-section{break-inside:avoid}}

.worked-question{margin:28px 0 34px;padding:22px 24px;border-top:2px solid #333;border-bottom:1px solid #d3d3cc;background:#efefea;font-size:13px;line-height:1.95;color:#383835;word-break:keep-all}.worked-question .question-label{font-size:10px;color:#a43929;margin:0 0 12px}.worked-question p{margin:0 0 15px}.worked-question summary{cursor:pointer;font-size:12px;text-decoration:underline;text-underline-offset:4px}.worked-question details p{margin:18px 0 0}.worked-question details[open] summary{color:#a43929}@media print{.worked-question details>p{display:block}}

.inline-source{text-decoration:underline;text-decoration-color:#aaa89f;text-underline-offset:4px;text-decoration-thickness:1px;overflow-wrap:anywhere}.inline-source:hover{color:var(--red);text-decoration-color:var(--red)}.external-arrow{font-size:.7em;margin-left:2px;color:#a74a3b;white-space:nowrap}.lesson-path{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:25px 0}.lesson-path a{padding:18px 0;border-top:1px solid var(--line)}.lesson-path strong{display:block;font-size:14px;margin-bottom:8px}.lesson-path span{display:block;font-size:12px;line-height:1.8;color:#666}.lesson-path a:hover strong{color:var(--red)}
.tutorial-pocket{display:grid;grid-template-columns:130px 1fr auto;gap:30px;align-items:center;padding:30px 0 35px;margin:0 0 40px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.tutorial-number{font:65px/1 var(--mono);letter-spacing:-5px;color:var(--red)}.tutorial-number span{display:block;font:9px var(--mono);letter-spacing:1px;margin-top:14px}.tutorial-eyebrow{font:11px var(--mono);color:#666;margin:0 0 12px}.tutorial-pocket h2{font-size:28px;line-height:1.45;letter-spacing:-1px;margin:0 0 13px}.tutorial-pocket p:not(.tutorial-eyebrow){font-size:13px;line-height:1.85;color:#666;margin:0}.tutorial-action{font-size:13px;font-weight:600}.tutorial-action small{display:block;font-size:10px;font-weight:400;color:#777;margin-top:12px}.tutorial-pocket:hover h2{text-decoration:underline;text-underline-offset:5px}.tutorial-pocket:hover .tutorial-action{color:var(--red)}
@media(max-width:760px){.tutorial-pocket{grid-template-columns:52px minmax(0,1fr);gap:17px;padding:24px 0;margin-bottom:28px;align-items:start}.tutorial-number{font-size:38px;letter-spacing:-3px}.tutorial-number span{font-size:7px;letter-spacing:0}.tutorial-pocket h2{font-size:23px}.tutorial-pocket p:not(.tutorial-eyebrow){font-size:12px}.tutorial-action{grid-column:2;font-size:12px}.tutorial-action small{display:none}.lesson-path{grid-template-columns:1fr}}