.tutorials-layout{display:flex;min-height:calc(100vh - 4rem)}.tutorial-sidebar{position:sticky;top:4rem;width:320px;height:calc(100vh - 4rem);flex-shrink:0;overflow-y:auto;display:none;padding:var(--space-8) var(--space-6) var(--space-8) var(--space-8)}.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);border-radius:var(--radius);text-decoration:none;transition:all var(--duration-fast) var(--ease-out)}.sidebar-link:hover{color:var(--color-text);background:var(--color-bg-sunken)}.sidebar-link.active{color:var(--color-accent);background:var(--color-accent-subtle)}.sidebar-link-icon{font-size:var(--text-base);width:24px;text-align:center}.sidebar-link-text{flex:1}.tutorial-content-wrapper{flex:1;min-width:0;padding:0 var(--space-6)}.mobile-tutorial-nav{display:block;position:sticky;top:4rem;z-index:50;background:var(--color-bg-overlay);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);padding:var(--space-3)0;margin:0 calc(-1*var(--space-6)) var(--space-6)}.mobile-nav-inner{display:flex;gap:var(--space-2);overflow-x:auto;padding:0 var(--space-6) var(--space-2);scrollbar-width:none;-ms-overflow-style:none}.mobile-nav-inner::-webkit-scrollbar{display:none}.mobile-nav-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius);white-space:nowrap;transition:all var(--duration-fast) var(--ease-out);text-decoration:none}.mobile-nav-link.active,.mobile-nav-link:hover{color:var(--color-text);border-color:var(--color-accent-border);background:var(--color-accent-subtle)}.mobile-nav-link.active{color:var(--color-accent);border-color:var(--color-accent)}.mobile-nav-icon,.prereq-card h4 span{font-size:var(--text-base)}.page-header{padding:var(--space-10)0 var(--space-8)}.page-header-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-accent-subtle);border:1px solid var(--color-accent-border);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;color:var(--color-accent);margin-bottom:var(--space-4)}.page-title{font-size:var(--text-3xl);font-weight:700;margin-bottom:var(--space-4);letter-spacing:-.03em}.page-description{font-size:var(--text-base);color:var(--color-text-secondary);max-width:48rem;line-height:var(--leading-relaxed)}section{padding:var(--space-12)0!important}.tutorial-section{border-bottom:1px solid var(--color-border)}.tutorial-section:last-of-type{border-bottom:none}.tutorial-header{display:flex;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-8)}.tutorial-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--color-accent-subtle);border:1px solid var(--color-accent-border);border-radius:var(--radius-lg);font-size:var(--text-2xl);flex-shrink:0}.tutorial-meta{flex:1}.tutorial-title{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-3)}.tutorial-title-anchor{color:var(--color-text-muted);opacity:0;transition:opacity var(--duration-fast);text-decoration:none;font-size:var(--text-lg)}.tutorial-header:hover .tutorial-title-anchor{opacity:1}.tutorial-title-anchor:hover{color:var(--color-accent)}.content-block-body p,.tutorial-subtitle{color:var(--color-text-secondary);line-height:var(--leading-relaxed)}.tutorial-subtitle{font-size:var(--text-base);max-width:48rem}.tutorial-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.tutorial-tag{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;padding:var(--space-1) var(--space-2);background:var(--color-bg-sunken);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text-tertiary)}.tutorial-content{display:flex;flex-direction:column;gap:var(--space-8)}.content-block{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}.content-block-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);background:var(--color-bg-sunken);border-bottom:1px solid var(--color-border)}.content-block-title{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);font-weight:600;color:var(--color-text)}.content-block-badge,.content-block-title-icon{font-size:var(--text-xs);border-radius:var(--radius-sm)}.content-block-title-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--color-accent);color:#fff;font-weight:700}.content-block-badge{font-family:var(--font-mono);font-weight:500;padding:var(--space-1) var(--space-2);background:var(--color-bg-elevated);color:var(--color-text-muted)}.content-block-body{padding:var(--space-5)}.content-block-body p{font-size:var(--text-sm);margin-bottom:var(--space-4)}.content-block-body p:last-child{margin-bottom:0}.code-block{background:var(--color-code-bg);border:1px solid var(--color-code-border);border-radius:var(--radius-lg);overflow:hidden}.content-block>.code-block{margin:0 var(--space-5);border-radius:var(--radius)}.content-block>.code-block:last-child{margin-bottom:var(--space-5)}.content-block-header+.code-block:last-child{margin:0;border-radius:0}.tutorial-content>.code-block{margin:0;border-radius:var(--radius-lg)}.code-block-header,.config-table td,.config-table th{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}.code-block-header{display:flex;align-items:center;justify-content:space-between;background:var(--color-bg-sunken)}.code-block-filename{align-items:center;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted)}.code-block-filename svg{width:14px;height:14px;opacity:.6}.code-block-actions,.code-block-filename{display:flex;gap:var(--space-2)}.code-copy-btn{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.code-copy-btn:hover{color:var(--color-text);border-color:var(--color-accent-border)}.code-copy-btn.copied{color:var(--color-success);border-color:var(--color-success)}.code-block pre,.info-box{padding:var(--space-4) var(--space-5)}.code-block pre{margin:0;overflow-x:auto;background:0 0}.code-block code{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.7;color:var(--color-code-text)}.info-box{display:flex;gap:var(--space-4);background:var(--color-bg-sunken);border:1px solid var(--color-border);border-radius:var(--radius)}.info-box-icon{font-size:var(--text-lg);flex-shrink:0}.info-box-content{flex:1}.info-box-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}.info-box-text{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed);margin:0}.info-box.tip{background:var(--color-success-subtle);border-color:rgba(16,185,129,.2)}.info-box.tip .info-box-title{color:var(--color-success)}.info-box.warning{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2)}.info-box.warning .info-box-title{color:#f59e0b}.info-box.note{background:var(--color-accent-subtle);border-color:var(--color-accent-border)}.info-box.note .info-box-title{color:var(--color-accent)}.config-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.config-table td,.config-table th{text-align:left}.config-table th{font-weight:600;color:var(--color-text);background:var(--color-bg-sunken)}.config-table td{color:var(--color-text-secondary)}.config-table code{font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-1) var(--space-2);background:var(--color-code-bg);border:1px solid var(--color-code-border);border-radius:var(--radius-sm);color:var(--color-code-keyword)}.config-table tr:last-child td{border-bottom:none}.output-preview{background:var(--color-bg-sunken);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-4);overflow-x:auto}.output-preview .output-label{display:block;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)}.output-preview pre{margin:0;padding:0;background:0 0;border:0;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;color:var(--color-text-secondary);white-space:pre}.prereq-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}.prereq-card{padding:var(--space-5);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.prereq-card h4{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}.descriptor-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)}.descriptor-icon,.descriptor-item{display:flex;align-items:center;border-radius:var(--radius)}.descriptor-item{gap:var(--space-4);padding:var(--space-4);background:var(--color-bg-elevated);border:1px solid var(--color-border)}.descriptor-icon{justify-content:center;width:40px;height:40px;background:var(--color-accent-subtle);font-size:var(--text-base);flex-shrink:0}.descriptor-info{flex:1}.descriptor-name{font-weight:600;font-size:var(--text-sm);color:var(--color-text);margin-bottom:2px}.descriptor-desc{font-size:var(--text-xs);color:var(--color-text-muted)}.back-to-top{position:fixed;bottom:var(--space-6);right:var(--space-6);display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--color-accent);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md),var(--shadow-accent);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--duration) var(--ease-out);text-decoration:none;z-index:100}.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{background:var(--color-accent-hover);transform:translateY(-2px)}@media (min-width:640px){.descriptor-grid,.prereq-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:768px){.tutorial-icon{width:64px;height:64px;font-size:var(--text-3xl)}.tutorial-title{font-size:var(--text-2xl)}}@media (min-width:1024px){.tutorial-sidebar{display:block}.mobile-tutorial-nav{display:none}.tutorial-content-wrapper{padding:0 var(--space-8)}.descriptor-grid,.prereq-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1280px){.tutorial-sidebar{width:340px;padding:var(--space-12) var(--space-8) var(--space-12) var(--space-12)}.tutorial-content-wrapper{padding:0 var(--space-10)}.descriptor-grid,.prereq-grid{grid-template-columns:repeat(3,1fr)}}.tutorial-sidebar::-webkit-scrollbar{width:6px}.tutorial-sidebar::-webkit-scrollbar-track{background:0 0}.tutorial-sidebar::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.tutorial-sidebar::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}