.tutorial-page{background:var(--cream);color:var(--ink)}
.tutorial-hero{padding:8.5rem 0 3rem;background:var(--ink);color:var(--cream);border-bottom:6px solid var(--red)}
.tutorial-hero h1{font:clamp(3.5rem,7vw,6.75rem)/1 var(--display);letter-spacing:0;text-transform:uppercase;margin:1.5rem 0;max-width:1000px}
.tutorial-hero .tutorial-deck{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.6;max-width:800px;color:#d2cec6}
.tutorial-hero .rn-kicker{font-size:.875rem}.tutorial-breadcrumb{display:flex;gap:1rem;flex-wrap:wrap;font-size:1rem;margin-bottom:1.5rem}.tutorial-breadcrumb a{text-decoration:underline;text-underline-offset:.3rem}
.tutorial-intro{padding:2.5rem 0 1rem;font-size:1.125rem;line-height:1.7;max-width:900px}.tutorial-intro p+p{margin-top:1rem}
.tutorial-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #aaa;border-left:1px solid #aaa;margin:1.5rem 0 3.5rem}
.tutorial-card{display:flex;flex-direction:column;min-width:0;padding:2rem;border-bottom:1px solid #aaa;border-right:1px solid #aaa;background:var(--cream);text-decoration:none;transition:background-color .15s}
.tutorial-card:hover{background:#e2ddd3}.tutorial-card-index{font-size:.875rem;font-weight:700;color:#a52b21}.tutorial-card h2{font:clamp(2rem,3vw,3rem)/1.1 var(--display);letter-spacing:0;margin:1.5rem 0 1rem}.tutorial-card p{font-size:1rem;line-height:1.7;margin-bottom:1rem}.tutorial-card-meta{font-size:.875rem;color:#514d47;line-height:1.5}.tutorial-card strong{margin-top:auto;padding-top:1.5rem;font-size:1rem;text-decoration:underline;text-underline-offset:.3rem}
.tutorial-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#aaa;border:1px solid #aaa;margin:2rem 0}.tutorial-facts>div{background:#e9e4da;padding:1.25rem}.tutorial-facts dt{font-size:.875rem;font-weight:700;margin-bottom:.5rem;text-transform:uppercase}.tutorial-facts dd{margin:0;font-size:1rem;line-height:1.6}.tutorial-version{font-size:1rem;line-height:1.7;padding-bottom:2rem;max-width:1000px}
.tutorial-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start;padding:1rem 0 4rem}.tutorial-toc{position:sticky;top:6.5rem;max-height:calc(100dvh - 8rem);overflow-y:auto;border-top:3px solid var(--red);padding-top:1rem}.tutorial-toc h2{font-size:1.125rem;margin-bottom:.8rem}.tutorial-toc ol{list-style:none;padding:0;margin:0}.tutorial-toc a{display:block;padding:.55rem .2rem;font-size:.875rem;line-height:1.5;text-decoration:none;border-bottom:1px solid #d2cdc2}.tutorial-toc a:hover{text-decoration:underline}.tutorial-toc details>summary{display:list-item;cursor:pointer;font-weight:700;font-size:1rem;line-height:1.5;padding:.75rem .2rem}.tutorial-toc-end{padding-top:1rem}.tutorial-toc-end a{font-weight:700}
.tutorial-content{min-width:0;max-width:950px}.tutorial-section{border-top:1px solid #aaa;padding:2rem 0;scroll-margin-top:7rem}.tutorial-section:first-child{border-top:0;padding-top:0}.tutorial-section-header{display:flex;gap:1rem;align-items:baseline;margin-bottom:1.25rem}.tutorial-section-number{font:2rem/1 var(--display);color:#a52b21;flex:0 0 2.5rem}.tutorial-section h2{font:clamp(1.8rem,3vw,2.6rem)/1.15 var(--display);letter-spacing:0;margin:0}.tutorial-section p,.tutorial-section li{font-size:1.0625rem;line-height:1.8}.tutorial-section p{margin:0 0 1rem}.tutorial-section ol{padding-left:1.5rem;margin:1.25rem 0}.tutorial-section li{padding-left:.3rem;margin-bottom:1rem}.tutorial-section li::marker{font-weight:700;color:#a52b21}
.tutorial-tip{background:#e7e1d6;padding:1.25rem;border-left:4px solid #111;margin:1.5rem 0}.tutorial-tip h3{font-size:1rem;margin-bottom:.6rem}.tutorial-tip ul{padding-left:1.25rem;margin:0}.tutorial-tip li{font-size:1rem;margin-bottom:.7rem}.tutorial-tip li:last-child{margin-bottom:0}.tutorial-check{padding:1rem 1.25rem;border-left:4px solid #b62024;background:#fff}.tutorial-check strong{display:block;font-size:.875rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.4rem}.tutorial-check p{margin:0;font-size:1rem}
.tutorial-support{border-top:1px solid #aaa;padding:2rem 0}.tutorial-support h2{font:clamp(1.8rem,3vw,2.6rem)/1.15 var(--display);letter-spacing:0;margin-bottom:1.25rem}.tutorial-support details{border-bottom:1px solid #ccc;padding:1rem 0}.tutorial-support summary{cursor:pointer;font-size:1.0625rem;font-weight:700;line-height:1.5}.tutorial-support details p{font-size:1rem;line-height:1.8;margin-top:.75rem}.tutorial-table-wrap{overflow-x:auto;max-width:100%}.tutorial-table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.6}.tutorial-table th,.tutorial-table td{text-align:left;vertical-align:top;padding:.9rem;border-bottom:1px solid #ccc}.tutorial-table th{background:#e9e4da}.tutorial-table td:first-child{font-weight:700}.tutorial-table p{margin:0;font-size:.875rem}
.tutorial-video-list{display:grid;gap:1rem}.tutorial-video{padding:1.5rem;background:#111;color:#f2efe8;border-top:4px solid #ee4232}.tutorial-video h3{font-size:1.25rem;line-height:1.4;margin:.7rem 0}.tutorial-video p{font-size:1rem;line-height:1.7;margin-bottom:1rem}.tutorial-video-meta{font-size:.875rem;color:#cac5bb;line-height:1.6}.tutorial-video a{display:inline-flex;min-height:44px;align-items:center;padding:.65rem 1rem;background:#ee4232;color:#111;font-size:1rem;font-weight:700}.tutorial-video a:hover{background:#f2efe8}.tutorial-video-note{font-size:.875rem;color:#d5d0c6;line-height:1.6;margin-top:1rem}.tutorial-sources{padding-left:1.25rem}.tutorial-sources li{margin-bottom:1rem;line-height:1.6;font-size:1rem}.tutorial-sources a{text-decoration:underline;text-underline-offset:.2rem;overflow-wrap:anywhere}.tutorial-review-note{font-size:.875rem;line-height:1.7;max-width:900px;color:#514d47}
.tutorial-next{border-top:4px solid #111;padding:2rem 0 4rem;display:flex;flex-wrap:wrap;gap:1rem}.tutorial-next h2{flex-basis:100%;font:2.5rem/1.1 var(--display);letter-spacing:0;margin-bottom:.75rem}.tutorial-next .rn-button-secondary{color:#111;border-color:#111}.tutorial-page .site-footer{background:#111;color:#d2cec6}.tutorial-page :focus-visible{outline:3px solid #b62024;outline-offset:4px}.tutorial-hero a:focus-visible,.tutorial-video a:focus-visible{outline-color:#fff}
@media(max-width:1050px){.tutorial-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-layout{grid-template-columns:1fr;gap:2rem}.tutorial-toc{position:static;max-height:none;padding:0;border:1px solid #aaa}.tutorial-toc h2{display:none}.tutorial-toc details>summary{display:list-item;cursor:pointer;font-weight:700;font-size:1rem;padding:1rem;line-height:1.5}.tutorial-toc ol,.tutorial-toc-end{padding:0 1rem 1rem}.tutorial-toc details:not([open])>ol{display:none}.tutorial-toc-end{display:flex;gap:1rem;flex-wrap:wrap}.tutorial-toc-end a{border:0}.tutorial-facts{grid-template-columns:1fr}}

@media(max-width:620px){.tutorial-hero{padding:7.5rem 0 2rem}.tutorial-hero h1{font-size:clamp(2.8rem,13vw,4rem)}.tutorial-catalog{grid-template-columns:1fr}.tutorial-card{padding:1.5rem}.tutorial-section-header{gap:.5rem}.tutorial-section-number{flex-basis:2rem;font-size:1.6rem}.tutorial-section ol{padding-left:1.2rem}.tutorial-table th,.tutorial-table td{padding:.7rem}.tutorial-video{padding:1.25rem}.tutorial-tip{padding:1rem}}
@media(prefers-reduced-motion:reduce){.tutorial-card{transition:none}}

.tutorial-table caption{text-align:left;padding:0 0 .8rem;font-size:.875rem;line-height:1.6;color:#514d47}.tutorial-terms{display:grid;grid-template-columns:minmax(7rem,1fr) minmax(0,3fr);gap:0;margin:0}.tutorial-terms dt,.tutorial-terms dd{padding:1rem .75rem;border-bottom:1px solid #ccc;font-size:1rem;line-height:1.7}.tutorial-terms dt{font-weight:700}.tutorial-terms dd{margin:0}.tutorial-review-note{margin-bottom:1rem}.tutorial-toc a{min-height:44px;display:flex;align-items:center}.tutorial-toc-end a{display:block}
@media(max-width:620px){.tutorial-terms{display:block}.tutorial-terms dt{border-bottom:0;padding-bottom:.3rem}.tutorial-terms dd{padding-top:0}.tutorial-facts>div{padding:1rem}}

.tutorial-toc details:not([open])>ol{display:none}.tutorial-page .site-header :focus-visible,.tutorial-page .site-footer :focus-visible{outline-color:var(--cream)}

@media(max-width:620px){.tutorial-hero h1{font-size:clamp(2.1rem,10vw,4rem);overflow-wrap:anywhere}}