:root{--tutorial-max-width:700px}.tutorial-page{color:var(--text-primary);background-color:#fff;flex-direction:column;min-height:100vh;display:flex}.tutorial-header{width:100%;padding:4rem 0 5rem}@media (min-width:768px){.tutorial-header{padding:5rem 0 6rem}}.tutorial-header__inner{max-width:700px;margin:0 auto;padding:0 24px}.tutorial-difficulty-pill{background:var(--pill-bg);color:var(--pill-text);letter-spacing:.04em;text-transform:capitalize;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.tutorial-body{background:#fff;flex:1;width:100%}.tutorial-body__inner{max-width:700px;margin:0 auto;padding:48px 24px 80px}.tutorial-body .tutorial-prose{color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:17px;line-height:1.75}.tutorial-body .tutorial-prose p{margin:0 0 1.35em}.tutorial-body .tutorial-prose p:last-child{margin-bottom:0}.tutorial-body .tutorial-prose h2{letter-spacing:-.025em;color:var(--text-primary);margin:2.2em 0 .65em;padding-top:.2em;font-size:22px;font-weight:800;line-height:1.2}.tutorial-body .tutorial-prose h3{letter-spacing:-.02em;color:var(--text-primary);margin:1.8em 0 .55em;font-size:18px;font-weight:700;line-height:1.25}.tutorial-body .tutorial-prose h4{letter-spacing:-.01em;color:var(--text-primary);margin:1.5em 0 .5em;font-size:15px;font-weight:700;line-height:1.3}.tutorial-body .tutorial-prose h2:first-child,.tutorial-body .tutorial-prose h3:first-child,.tutorial-body .tutorial-prose h4:first-child{margin-top:0}html:has(.tutorial-page){scroll-padding-top:96px}.tutorial-body .tutorial-prose :is(h2,h3,h4){scroll-margin-top:96px}.tutorial-body .tutorial-prose a{color:var(--card-icon);text-underline-offset:3px;text-decoration:underline 1px}.tutorial-body .tutorial-prose a:hover{opacity:.75}.tutorial-body .tutorial-prose strong{color:var(--text-primary);font-weight:700}.tutorial-body .tutorial-prose em{color:var(--text-muted);font-style:italic}.tutorial-body .tutorial-prose :is(ol,ul){margin:0 0 1.35em;padding-left:1.5rem}.tutorial-body .tutorial-prose li{color:var(--text-muted);margin-bottom:.45em;line-height:1.65}.tutorial-body .tutorial-prose ul{list-style-type:disc}.tutorial-body .tutorial-prose ol{list-style-type:decimal}.tutorial-body .tutorial-prose pre{background-color:var(--cream-subtle);border:1px solid var(--card-border);border-radius:10px;margin:1.5em 0;padding:16px 20px;font-size:14px;line-height:1.65;overflow-x:auto}.tutorial-body .tutorial-prose code{color:var(--card-icon);background-color:var(--cream-subtle);border:1px solid var(--card-border);border-radius:4px;padding:.15em .4em;font-family:SF Mono,Fira Code,Cascadia Code,Menlo,monospace;font-size:.88em}.tutorial-body .tutorial-prose pre code{font-size:inherit;color:var(--text-primary);background:0 0;border:none;padding:0}.tutorial-body .tutorial-prose blockquote{border-left:3px solid var(--card-icon);color:var(--text-muted);margin:1.5em 0;padding:4px 0 4px 20px;font-style:italic}.tutorial-body .tutorial-prose hr{border:none;border-top:1px solid var(--card-border);opacity:.5;margin:2.5em 0}.tutorial-body .tutorial-prose table{border-collapse:collapse;border:1px solid var(--card-border);border-radius:10px;width:100%;margin:1.5em 0;font-size:14px;overflow:hidden}.tutorial-body .tutorial-prose th{background-color:var(--cream-section);text-align:left;border-bottom:1px solid var(--card-border);color:var(--text-primary);padding:10px 14px;font-weight:700}.tutorial-body .tutorial-prose td{border-bottom:1px solid var(--card-border);color:var(--text-muted);vertical-align:top;padding:10px 14px}.tutorial-body .tutorial-prose tr:last-child td{border-bottom:none}.tutorial-body .tutorial-prose .tutorial-info-box table{border:1px solid var(--card-border);background-color:var(--cream-subtle);border-radius:10px;width:auto;max-width:480px;margin:1.5em 0;font-size:14px;overflow:hidden}.tutorial-body .tutorial-prose .tutorial-info-box td{border-bottom:1px solid var(--card-border);color:var(--text-muted);vertical-align:middle;padding:10px 16px}.tutorial-body .tutorial-prose .tutorial-info-box tr:last-child td{border-bottom:none}.tutorial-body .tutorial-prose .tutorial-info-box td:first-child{color:var(--text-primary);white-space:nowrap;padding-right:24px;font-weight:600}.tutorial-callout{border:1px solid;border-radius:10px;gap:14px;margin:1.75em 0;padding:16px 18px;font-size:15px;line-height:1.65;display:flex}.tutorial-callout--tip{background-color:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}.tutorial-callout--warning{background-color:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}.tutorial-callout--important{background-color:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text)}.tutorial-callout--info{background-color:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}.tutorial-callout__icon{flex-shrink:0;margin-top:1px;font-size:18px}.tutorial-callout__body{flex:1}.tutorial-callout__title{letter-spacing:.04em;text-transform:uppercase;opacity:.85;margin-bottom:4px;font-size:13px;font-weight:700;display:block}.tutorial-body .tutorial-prose img{border:1px solid var(--card-border);border-radius:10px;max-width:100%;height:auto;margin:1.5em auto;display:block}
