.tutorial-page .story-intro h1{font-size:clamp(38px,4.5vw,65px);line-height:1.08}
.tutorial-hero-art{padding-top:0}.tutorial-hero-art picture{margin-top:0}
.tutorial-hero-art .art-caption{margin-top:24px}
.tutorial-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);padding-block:24px;gap:20px}.tutorial-strip>div{display:flex;flex-direction:column;gap:7px}.tutorial-strip>div>span{font:9px var(--mono);color:var(--muted);letter-spacing:.08em}.tutorial-strip strong{font-size:15px;font-weight:500}.tutorial-strip>div:last-child strong{color:var(--cyan)}
.tutorial-page .story-aside{max-height:calc(100vh - 125px);overflow:auto;padding-right:12px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.tutorial-page .story-aside li{margin-bottom:12px}.tutorial-page .story-aside li a{font-size:12px;line-height:1.45}.tutorial-page .story-section{max-width:none;margin-bottom:60px}.tutorial-page .story-section h2{max-width:680px}.tutorial-page .story-section>p:not(.section-number){line-height:1.9}.tutorial-page code{font:0.78em var(--mono);overflow-wrap:anywhere;color:var(--text)}.tutorial-page .story-section strong{font-weight:600;color:var(--text)}
.tutorial-note{margin:28px 0;padding:24px 25px;border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:0 6px 6px 0;background:var(--surface)}.tutorial-note>strong{font-size:19px;line-height:1.35;display:block;margin-bottom:10px}.tutorial-note p{color:var(--muted);font-size:15px;line-height:1.85}.tutorial-note code{word-break:break-all}
.code-panel{margin:23px 0 25px;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface)}.code-heading{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:12px 17px;color:var(--muted);font:9px/1.5 var(--mono);letter-spacing:.01em}.code-heading span:first-child{color:var(--cyan)}.code-panel pre{margin:0;padding:21px 18px;overflow:auto;tab-size:2;white-space:pre;line-height:1.9;color:var(--text);scrollbar-width:thin;scrollbar-color:var(--line) transparent}.code-panel code{font:12px/1.9 var(--mono);overflow-wrap:normal}.code-panel pre:focus-visible,.table-scroll:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.table-scroll{overflow:auto;margin:27px 0;border:1px solid var(--line);border-radius:6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.table-scroll table{border-collapse:collapse;width:100%;min-width:580px;text-align:left;font-size:14px;line-height:1.7}.table-scroll th{padding:15px 18px;font-weight:500;background:var(--surface);color:var(--text)}.table-scroll td{padding:17px 18px;border-top:1px solid var(--line);color:var(--muted);vertical-align:top}.table-scroll td:first-child{color:var(--text);min-width:175px}.table-scroll code{font-size:11px}
.tutorial-page .story-section>p.tutorial-source{font-size:12px;line-height:1.75;border-top:1px solid var(--line);padding-top:15px;margin-top:28px}.tutorial-source+p.tutorial-source{margin-top:0!important;border-top:0!important;padding-top:0!important}
.tutorial-diagram{margin:30px 0 28px;padding:26px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.diagram-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.diagram-heading>.mono{font-size:8px;color:var(--muted);letter-spacing:.045em}.diagram-brand{display:flex;gap:8px;align-items:center;font-family:var(--font)}.diagram-brand strong{font-size:17px;font-weight:600}.diagram-brand strong>span{color:var(--cyan);padding-left:2px}.tutorial-diagram ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.tutorial-diagram li{border-top:2px solid var(--cyan);padding:17px 12px 17px 0;position:relative;display:flex;flex-direction:column;gap:11px}.tutorial-diagram li+li:before{content:'\2192';position:absolute;left:-15px;top:43px;color:var(--cyan);font-size:13px}.tutorial-diagram .diagram-step{font:9px var(--mono);color:var(--cyan)}.tutorial-diagram li>strong{font-size:16px;line-height:1.3;font-weight:500}.tutorial-diagram small{font-size:12px;line-height:1.6;color:var(--muted)}.tutorial-diagram figcaption{font-size:11px;line-height:1.8;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:15px}.ha-diagram li{border-top-color:var(--blue)}
.acceptance-list{margin:26px 0;padding-left:25px;color:var(--muted);font-size:16px;line-height:1.9}.acceptance-list li{padding-left:7px;margin-bottom:14px}.acceptance-list li::marker{color:var(--cyan);font-family:var(--mono);font-size:12px}
@media(max-width:1050px){.tutorial-strip strong{font-size:13px}.tutorial-diagram ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 25px}.tutorial-diagram li+li:before{display:none}.diagram-heading{align-items:flex-start}.diagram-heading>.mono{max-width:120px;text-align:right}}
@media(max-width:760px){.tutorial-page .story-intro h1{font-size:clamp(38px,8.4vw,57px)}.tutorial-page .story-intro .eyebrow{font-size:8px;line-height:1.75}.tutorial-page .story-hero{gap:18px}.tutorial-strip{grid-template-columns:1fr 1fr;gap:23px 16px;padding-block:24px}.tutorial-strip strong{font-size:13px}.tutorial-strip>div>span{font-size:8px}.tutorial-page .story-aside{max-height:none;overflow:visible;padding-right:0}.tutorial-page .story-aside ol{grid-template-columns:1fr 1fr;gap:15px}.tutorial-page .story-aside li{margin:0}.tutorial-page .story-aside li a{font-size:11px;line-height:1.5}.tutorial-page .story-section{margin-bottom:47px}.tutorial-page .story-section h2{font-size:28px;line-height:1.25}.tutorial-note{padding:20px}.tutorial-note p{font-size:14px}.tutorial-note>strong{font-size:18px}.code-heading{padding:11px 13px;font-size:8px;gap:14px}.code-heading>span:last-child{text-align:right}.code-panel pre{padding:17px 14px}.code-panel code{font-size:11px}.tutorial-diagram{padding:21px}.diagram-heading{gap:12px;flex-wrap:wrap}.diagram-heading>.mono{max-width:none;text-align:left;flex-basis:100%;font-size:8px}.tutorial-diagram ol{grid-template-columns:1fr;gap:0}.tutorial-diagram li{display:grid;grid-template-columns:27px 1fr;gap:5px 10px;padding:17px 0;border-top:1px solid var(--line)}.tutorial-diagram .diagram-step{grid-row:span 2;padding-top:5px}.tutorial-diagram li>strong,.tutorial-diagram li>small{grid-column:2}.tutorial-diagram li>strong{font-size:17px}.tutorial-diagram figcaption{margin-top:5px}.acceptance-list{font-size:15px;padding-left:20px}}
@media print{.tutorial-page .story-aside,.masthead,.back-blog,.footer{display:none}.story-layout{display:block}.shell{width:100%}.code-panel pre{white-space:pre-wrap}.table-scroll table{min-width:0}.story-section{break-inside:auto}.tutorial-diagram,.code-panel{break-inside:avoid}}
/* Command copying progressively enhances the selectable code blocks. */
.code-heading{flex-wrap:wrap;align-items:center;gap:10px 18px}
.code-label{flex:1 1 150px;min-width:0}
.code-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0}
.code-actions .code-badge{color:var(--muted);text-align:right;max-width:150px}
.copy-command{min-height:44px;min-width:72px;padding:9px 13px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--cyan);font:11px/1.5 var(--mono);cursor:pointer;flex-shrink:0}
.copy-command:hover{border-color:var(--cyan)}
.copy-command:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.copy-command[aria-busy="true"]{opacity:.7;cursor:wait}
.copy-command[hidden],.copy-status[hidden]{display:none}
.copy-status{margin:0;padding:10px 18px;border-top:1px solid var(--line);color:var(--cyan);font:12px/1.7 var(--font);background:var(--surface)}
.copy-buffer{position:fixed;left:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;font-size:16px;pointer-events:none}
@media(max-width:760px){.code-label{flex-basis:125px}.code-actions{gap:11px}.code-actions .code-badge{max-width:120px;font-size:8px}.copy-command{min-width:70px;font-size:10px}.copy-status{padding:10px 14px;font-size:12px}}
@media print{.copy-command,.copy-status{display:none!important}}
.copy-status:empty{padding:0;border:0}