.tutorial-hero{padding-top:var(--spacing-section-md);padding-bottom:var(--spacing-section-sm)}.tutorial-hero h1,.tutorial-detail-header h1{margin-top:var(--spacing-lg)}.tutorial-lead{margin-top:var(--spacing-lg);color:var(--color-on-surface-variant);font-size:var(--text-lead-size);max-width:880px}.tutorial-facts{gap:var(--spacing-sm) var(--spacing-xl);margin-top:var(--spacing-xl);color:var(--color-on-surface-variant);font-size:var(--text-small-size);flex-wrap:wrap;display:flex}.tutorial-facts span+span{border-left:1px solid var(--color-outline-variant);padding-left:var(--spacing-xl)}.tutorial-paths{padding-bottom:var(--spacing-section-md)}.tutorial-section-heading{margin-bottom:var(--spacing-xl)}.tutorial-section-heading h2{font-size:26px}.tutorial-section-heading p,.tutorial-related p{color:var(--color-on-surface-variant);margin-top:var(--spacing-sm)}.tutorial-course-grid{gap:var(--spacing-xl);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.tutorial-course-card{border:1px solid var(--color-outline-variant);border-radius:var(--radius-card);transition:border-color var(--motion-fast),box-shadow var(--motion-fast);overflow:hidden}.tutorial-course-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-frame)}.tutorial-course-link{height:100%;color:inherit;flex-direction:column;text-decoration:none;display:flex}.tutorial-course-link:hover{text-decoration:none}.tutorial-course-cover{background:var(--color-surface-variant);aspect-ratio:16/9;position:relative;overflow:hidden}.tutorial-course-cover img{object-fit:contain;width:100%;height:100%}.tutorial-course-duration{right:var(--spacing-md);bottom:var(--spacing-md);padding:2px var(--spacing-sm);background:var(--color-on-surface);color:var(--color-on-primary);border-radius:var(--radius-button);font-variant-numeric:tabular-nums;font-size:12px;position:absolute}.tutorial-course-body{padding:var(--spacing-xl);flex-direction:column;flex:1;display:flex}.tutorial-course-eyebrow{color:var(--color-primary);font-size:12px;font-weight:600}.tutorial-course-body h2{margin-top:var(--spacing-sm);text-wrap:pretty;font-size:22px;line-height:1.5}.tutorial-course-summary{margin-top:var(--spacing-md);font-size:var(--text-small-size);color:var(--color-on-surface-variant)}.tutorial-course-footer{justify-content:space-between;align-items:center;gap:var(--spacing-sm);padding-top:var(--spacing-xl);color:var(--color-on-surface-variant);flex-wrap:wrap;margin-top:auto;font-size:13px;display:flex}.tutorial-course-action{color:var(--color-primary);font-weight:600}.tutorial-before{justify-content:space-between;align-items:center;gap:var(--spacing-xxl);padding-top:var(--spacing-xxl);padding-bottom:var(--spacing-section-md);border-top:1px solid var(--color-outline-variant);display:flex}.tutorial-before h2{font-size:24px}.tutorial-before p{margin-top:var(--spacing-sm);color:var(--color-on-surface-variant);font-size:var(--text-small-size);max-width:700px}.tutorial-before-actions{align-items:center;gap:var(--spacing-md);font-size:var(--text-small-size);flex-direction:column;flex-shrink:0;display:flex}.tutorial-detail{padding-top:var(--spacing-xxl);padding-bottom:var(--spacing-section-md)}.tutorial-breadcrumb{gap:var(--spacing-md);font-size:var(--text-small-size);color:var(--color-on-surface-variant);flex-wrap:wrap;display:flex}.tutorial-detail-header{padding-top:var(--spacing-xxl);padding-bottom:var(--spacing-xxl)}.tutorial-detail-header h1{font-size:clamp(30px,3.3vw,44px)}.tutorial-detail-header h1 span{display:inline}.tutorial-viewer{gap:var(--spacing-xl);grid-template-columns:minmax(0,1fr) 320px;align-items:start;display:grid}.tutorial-screen{border:1px solid var(--color-outline-variant);border-radius:var(--radius-card);background:var(--color-surface);min-width:0;overflow:hidden}.tutorial-screen video{aspect-ratio:16/9;object-fit:contain;width:100%;height:auto;scroll-margin-top:var(--anchor-scroll-margin);background:#101828}.tutorial-playback-help{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-outline-variant)}.tutorial-playback-help p{color:var(--color-on-surface-variant);font-size:13px}.tutorial-playback-actions{align-items:center;gap:var(--spacing-md);flex-wrap:wrap;font-size:13px;display:flex}.tutorial-playback-actions a{align-items:center;min-height:44px;display:inline-flex}.tutorial-text-button{min-height:44px;color:var(--color-primary);font-size:var(--text-small-size);text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;padding:0;display:inline-flex}.tutorial-text-button[hidden]{display:none}.tutorial-text-button:disabled{color:var(--color-on-surface-variant);cursor:default}.tutorial-next-row{justify-content:space-between;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-xl);font-size:13px;display:flex}.tutorial-next-row span{min-width:0}.tutorial-next-row button{white-space:nowrap;flex-shrink:0}.tutorial-chapters{border:1px solid var(--color-outline-variant);border-radius:var(--radius-card);padding:var(--spacing-xl) var(--spacing-md);min-width:0}.tutorial-chapters-heading{padding:0 var(--spacing-md) var(--spacing-lg);justify-content:space-between;align-items:baseline;gap:var(--spacing-sm);display:flex}.tutorial-chapters-heading h2{white-space:nowrap;font-size:18px}.tutorial-chapters-heading span{color:var(--color-on-surface-variant);white-space:nowrap;font-size:12px}.tutorial-chapters ol{gap:var(--spacing-xs);margin:0;padding:0;list-style:none;display:grid}.tutorial-chapters button{align-items:flex-start;gap:var(--spacing-md);text-align:left;cursor:pointer;border-radius:var(--radius-button);width:100%;padding:var(--spacing-md);color:var(--color-on-surface);background:0 0;border:0;min-height:64px;display:flex}.tutorial-chapters button:hover{background:var(--color-surface-variant)}.tutorial-chapters button[aria-current=step]{background:var(--color-primary-container);color:var(--color-primary)}.tutorial-chapter-number{font-variant-numeric:tabular-nums;padding-top:2px;font-size:12px;font-weight:600}.tutorial-chapter-label{flex:1;font-size:14px;line-height:1.6}.tutorial-chapter-label>span{color:var(--color-on-surface-variant);margin-top:var(--spacing-xs);font-variant-numeric:tabular-nums;font-size:12px;display:block}.tutorial-chapter-state{white-space:nowrap;padding-top:3px;font-size:11px}.tutorial-directory-note{color:var(--color-on-surface-variant);padding:var(--spacing-lg) var(--spacing-md) 0;border-top:1px solid var(--color-outline-variant);margin-top:var(--spacing-lg);font-size:12px}.tutorial-guide{max-width:var(--reading-max);margin:var(--spacing-section-md) auto}.tutorial-guide>h2{font-size:var(--text-h2-size);margin-top:var(--spacing-sm)}.tutorial-guide .article-body{margin-top:var(--spacing-xl)}.tutorial-guide .article-body img{object-fit:contain;width:auto;max-height:720px;margin-inline:auto}.tutorial-related{border-top:1px solid var(--color-outline-variant);padding-top:var(--spacing-xxl)}.tutorial-related h2{font-size:26px}.tutorial-related-grid{gap:var(--spacing-xl);margin-top:var(--spacing-xl);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.tutorial-related-grid a{gap:var(--spacing-sm);border:1px solid var(--color-outline-variant);border-radius:var(--radius-card);padding:var(--spacing-xl);color:var(--color-on-surface);flex-direction:column;text-decoration:none;display:flex}.tutorial-related-grid a:hover{border-color:var(--color-primary)}.tutorial-related-grid span{color:var(--color-on-surface-variant);font-size:13px}.tutorial-related-grid strong{font-size:18px;font-weight:600}.tutorial-back-link{min-height:44px;margin-top:var(--spacing-lg);align-items:center;display:inline-flex}@media (width<=1100px){.tutorial-viewer{grid-template-columns:minmax(0,1fr) 290px}.tutorial-course-body{padding:var(--spacing-lg)}.tutorial-course-body h2{font-size:20px}}@media (width<=900px){.tutorial-course-grid{grid-template-columns:1fr}.tutorial-course-link{grid-template-columns:280px minmax(0,1fr);display:grid}.tutorial-course-cover{height:100%}.tutorial-viewer{grid-template-columns:1fr}.tutorial-chapters ol{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-before{align-items:flex-start}.tutorial-detail-header{padding-top:var(--spacing-xl)}}@media (width<=600px){.tutorial-hero{padding-top:var(--spacing-section-sm);padding-bottom:var(--spacing-xxl)}.tutorial-detail-header h1 span{display:block}.tutorial-facts{gap:var(--spacing-sm) var(--spacing-lg)}.tutorial-facts span+span{border:0;padding-left:0}.tutorial-course-link{display:flex}.tutorial-course-cover{height:auto}.tutorial-course-body{padding:var(--spacing-xl)}.tutorial-before{flex-direction:column}.tutorial-before-actions{align-items:flex-start}.tutorial-chapters ol{grid-template-columns:1fr}.tutorial-chapters{padding:var(--spacing-lg) var(--spacing-sm)}.tutorial-chapters button{min-height:64px}.tutorial-playback-help{padding:var(--spacing-md) var(--spacing-lg)}.tutorial-next-row{padding:var(--spacing-sm) var(--spacing-lg)}.tutorial-related-grid{grid-template-columns:1fr}.tutorial-guide{margin:var(--spacing-section-sm) auto}}