.tutorial-detail-hero{padding:76px 0 96px}.tutorial-detail-breadcrumb{color:var(--muted);align-items:center;gap:10px;margin-bottom:56px;font-size:12px;font-weight:700;display:flex}.tutorial-detail-breadcrumb a:hover{color:var(--accent)}.tutorial-detail-breadcrumb span:last-child{color:var(--text)}.tutorial-detail-hero h1{max-width:900px}.tutorial-detail-intro{max-width:720px;color:var(--text-soft);margin:30px 0 0;font-size:18px;line-height:1.65}.tutorial-detail-meta{flex-wrap:wrap;gap:10px;margin-top:40px;display:flex}.tutorial-detail-meta>span{border:1px solid var(--border);color:var(--muted);text-transform:uppercase;border-radius:999px;align-items:center;gap:8px;padding:10px 14px;font-size:11px;font-weight:700;display:flex}.tutorial-detail-meta strong{color:var(--cyan)}.tutorial-video-section{border-top:1px solid var(--border);padding:100px 0}.tutorial-video{aspect-ratio:16/9;border:1px solid var(--border);background:#080808;border-radius:8px;width:100%;position:relative;overflow:hidden}.tutorial-video iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.tutorial-before-start{border-top:1px solid var(--border);grid-template-columns:1.2fr .8fr;gap:80px;padding:100px 0;display:grid}.tutorial-introduction{max-width:700px;margin-top:28px}.tutorial-introduction p{color:var(--text-soft);line-height:1.7}.tutorial-prerequisites{background:#35c8f10a;border:1px solid #35c8f14d;border-radius:8px;align-self:start;padding:28px}.tutorial-prerequisites>span{color:var(--cyan);letter-spacing:1.5px;text-transform:uppercase;font-size:11px;font-weight:900}.tutorial-prerequisites ul{gap:14px;margin:22px 0 0;padding:0;list-style:none;display:grid}.tutorial-prerequisites li{color:#c4c4c4;padding-left:24px;line-height:1.5;position:relative}.tutorial-prerequisites li:before{content:"✓";color:var(--accent);font-weight:900;position:absolute;left:0}.tutorial-guide{border-top:1px solid var(--border);padding:120px 0}.tutorial-guide-heading{max-width:800px;margin-bottom:72px}.tutorial-guide-heading>p:last-child{max-width:620px;color:var(--muted);margin:28px 0 0;line-height:1.65}.tutorial-guide-layout{grid-template-columns:280px minmax(0,1fr);align-items:start;gap:70px;display:grid}.tutorial-toc{border:1px solid var(--border);background:var(--surface);border-radius:8px;min-width:0;padding:22px;position:sticky;top:30px}.tutorial-toc>span{color:var(--cyan);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:16px;font-size:10px;font-weight:900;display:block}.tutorial-toc nav{display:grid}.tutorial-toc a{border-top:1px solid var(--border);color:var(--muted);grid-template-columns:28px 1fr;gap:8px;padding:11px 0;font-size:12px;line-height:1.4;display:grid}.tutorial-toc a:hover{color:var(--text)}.tutorial-toc a strong{color:var(--accent);font-family:var(--font-barlow-condensed)}.tutorial-steps{gap:18px;min-width:0;display:grid}.tutorial-step{border:1px solid var(--border);background:linear-gradient(145deg,#191919,#141414);border-radius:8px;min-width:0;padding:34px;scroll-margin-top:30px}.tutorial-step header>span{color:var(--cyan);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;font-size:10px;font-weight:900;display:block}.tutorial-step h3{margin:0;font-size:clamp(27px,3vw,36px);line-height:1}.tutorial-step-description{color:var(--text-soft);margin:22px 0 0;line-height:1.7}.tutorial-instructions{color:#c7c7c7;margin:26px 0 0;padding-left:24px}.tutorial-instructions li{padding:6px 0 6px 8px;line-height:1.6}.tutorial-instructions li::marker{color:var(--accent);font-weight:900}.tutorial-bullets{gap:10px;margin:26px 0 0;padding:0;list-style:none;display:grid}.tutorial-bullets li{color:#c7c7c7;padding-left:24px;line-height:1.6;position:relative}.tutorial-bullets li:before{content:"—";color:var(--cyan);position:absolute;left:0}.tutorial-code{color:var(--accent);background:#0a0a0a;border:1px solid #303030;border-radius:7px;margin:26px 0 0;padding:20px;font-size:13px;line-height:1.6;overflow-x:auto}.tutorial-code code{font-family:monospace}.tutorial-note,.tutorial-warning{border-radius:7px;margin-top:26px;padding:18px 20px}.tutorial-note{background:#35c8f10d;border:1px solid #35c8f159}.tutorial-warning{background:#f1a0350d;border:1px solid #f1a03566}.tutorial-note strong,.tutorial-warning strong{letter-spacing:1.3px;text-transform:uppercase;margin-bottom:7px;font-size:10px;font-weight:900;display:block}.tutorial-note strong{color:var(--cyan)}.tutorial-warning strong{color:#f1a035}.tutorial-note p,.tutorial-warning p{color:var(--text-soft);margin:0;line-height:1.6}.tutorial-links{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;padding-top:20px;display:flex}.tutorial-links>span{color:var(--muted);text-transform:uppercase;margin-right:4px;font-size:10px;font-weight:800}.tutorial-links a{border:1px solid var(--border);color:var(--cyan);border-radius:6px;align-items:center;gap:7px;padding:8px 11px;font-size:12px;font-weight:700;display:inline-flex}.tutorial-links a:hover{border-color:var(--cyan)}.tutorial-complete{border:1px solid var(--border);background:linear-gradient(135deg,#151515,#202913);border-radius:8px;justify-content:space-between;align-items:center;gap:60px;margin-bottom:90px;padding:64px 72px;display:flex}.tutorial-complete>div:first-child{max-width:720px}.tutorial-complete>div:first-child>p:last-child{max-width:600px;color:var(--text-soft);margin:26px 0 0;line-height:1.65}.tutorial-complete-actions{flex-wrap:wrap;gap:10px;display:flex}.tutorial-step-image{margin:28px 0 0}.tutorial-step-image img{border:1px solid var(--border);background:var(--surface);border-radius:8px;width:100%;height:auto;display:block}.tutorial-step-image figcaption{color:var(--muted);margin-top:10px;font-size:12px;line-height:1.5}@media (max-width:980px){.tutorial-before-start{grid-template-columns:1fr;gap:42px}.tutorial-guide-layout{grid-template-columns:minmax(0,1fr);gap:36px}.tutorial-toc{position:static}.tutorial-toc nav{grid-template-columns:repeat(2,1fr)}.tutorial-complete{flex-direction:column;align-items:flex-start}}@media (max-width:760px){.tutorial-detail-hero{padding:56px 0 72px}.tutorial-detail-breadcrumb{margin-bottom:40px}.tutorial-detail-intro{font-size:16px}.tutorial-video-section,.tutorial-before-start,.tutorial-guide{padding:90px 0}.tutorial-guide-heading{margin-bottom:48px}.tutorial-toc nav{grid-template-columns:1fr}.tutorial-step{padding:24px}.tutorial-complete{padding:42px 24px}}@media (max-width:480px){.tutorial-detail-meta{flex-direction:column;align-items:flex-start}.tutorial-complete-actions,.tutorial-complete-actions .button{width:100%}}