body:has(.tutorials-hero) .sidebar-card.active-teal{border-color:var(--color-green);background:#05966914}.tutorials-preview-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}.difficulty-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:var(--radius-sm);letter-spacing:.02em}.difficulty-beginner{background:#05966926;color:#4ecdc4}.difficulty-intermediate{background:#d9770626;color:#fbbf24}.difficulty-advanced{background:#ff6b6b26;color:#ff6b6b}.tutorials-empty{text-align:center;padding:var(--space-16) 0;color:#6b7280}.tutorials-empty p{font-size:var(--text-lg)}.tutorial-hero{padding:calc(var(--header-height) + var(--space-12)) 0 var(--space-12);position:relative;overflow:hidden}.tutorial-hero-content{position:relative;z-index:1}.tutorial-back-link{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6);transition:color var(--transition-fast)}.tutorial-back-link:hover{color:var(--color-accent)}.tutorial-back-link svg{width:16px;height:16px}.tutorial-hero .post-tags{margin-bottom:var(--space-4)}.tutorial-hero-title{font-size:clamp(2rem,5vw,3rem);font-weight:700;color:var(--color-text-heading);margin-bottom:var(--space-4);line-height:1.2}.tutorial-hero-desc{font-size:var(--text-lg);color:var(--color-text-secondary);line-height:1.7;max-width:700px;margin-bottom:var(--space-6)}.tutorial-hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted);font-family:var(--font-mono)}.tutorial-hero-meta span{display:inline-flex;align-items:center;gap:6px}.tutorial-hero-meta svg{width:16px;height:16px}.tutorial-layout{display:grid;grid-template-columns:1fr 280px;gap:var(--space-16);padding-top:var(--space-12);padding-bottom:var(--space-24)}.nb-cell{margin-bottom:var(--space-6)}.nb-cell-markdown h2{font-size:var(--text-2xl);font-weight:700;color:var(--color-text-heading);margin-top:var(--space-12);margin-bottom:var(--space-6)}.nb-cell-markdown h3{font-size:var(--text-xl);font-weight:600;color:var(--color-text-heading);margin-top:var(--space-8);margin-bottom:var(--space-4)}.nb-cell-markdown h4{font-size:var(--text-lg);font-weight:600;color:var(--color-text-heading);margin-top:var(--space-6);margin-bottom:var(--space-3)}.nb-cell-markdown p{font-size:var(--text-base);line-height:1.8;margin-bottom:var(--space-6);color:var(--color-text-secondary)}.nb-cell-markdown ul,.nb-cell-markdown ol{margin-bottom:var(--space-6);padding-left:var(--space-6)}.nb-cell-markdown li{font-size:var(--text-base);line-height:1.8;color:var(--color-text-secondary);margin-bottom:var(--space-2)}.nb-cell-markdown strong{font-weight:600;color:var(--color-text-primary)}.nb-cell-markdown em{font-style:italic}.nb-cell-markdown code{font-family:var(--font-mono);font-size:.875em;background:var(--color-bg-light);padding:2px 6px;border-radius:var(--radius-sm);color:var(--color-accent)}.nb-cell-markdown a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px}.nb-cell-markdown a:hover{opacity:.8}.nb-cell-markdown img{max-width:100%;border-radius:var(--radius-md);margin:var(--space-4) 0}.nb-cell-code{position:relative}.nb-cell-code .code-block{margin-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.nb-cell-code .code-block.no-output{border-radius:var(--radius-lg)}.nb-cell-number{position:absolute;top:12px;left:12px;font-family:var(--font-mono);font-size:var(--text-xs);color:#6b7280;background:#2d2d2d;padding:2px 8px;border-radius:var(--radius-sm);z-index:2}.nb-output{background:#1e1e1e;border-top:1px solid #333;padding:var(--space-4) var(--space-6);font-family:var(--font-mono);font-size:var(--text-sm);color:#d1d5db;overflow-x:auto;border-radius:0 0 var(--radius-lg) var(--radius-lg);white-space:pre-wrap;word-break:break-word}.nb-output-image{text-align:center;padding:var(--space-6);background:#fff;border-radius:0 0 var(--radius-lg) var(--radius-lg)}.nb-output-image img{max-width:100%;border-radius:var(--radius-md)}.nb-output-error{background:#2d1b1b;color:#fca5a5}.nb-output-html{padding:var(--space-4);background:#1e1e1e;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow-x:auto}.nb-output-html table{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-family:var(--font-mono)}.nb-output-html th,.nb-output-html td{padding:8px 12px;border:1px solid #333;text-align:left;color:#d1d5db}.nb-output-html th{background:#2d2d2d;font-weight:600}.tutorial-sidebar{display:flex;flex-direction:column;gap:var(--space-6)}.tutorial-info-card{position:sticky;top:calc(var(--header-height) + var(--space-8));background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6)}.tutorial-info-card h3{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-4);color:var(--color-text-heading)}.tutorial-info-list{list-style:none;padding:0;margin:0 0 var(--space-5)}.tutorial-info-list li{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;font-size:var(--text-sm);color:var(--color-text-secondary);border-bottom:1px solid var(--color-bg-light)}.tutorial-info-list li:last-child{border-bottom:none}.tutorial-info-list svg{width:16px;height:16px;color:var(--color-text-muted);flex-shrink:0}.tutorial-colab-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;padding:10px 16px;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary);background:var(--color-bg-light);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.tutorial-colab-btn:hover{background:var(--color-bg-white);border-color:var(--color-text-muted)}.tutorial-colab-btn svg{width:16px;height:16px}.nb-cell-markdown .code-block{margin-bottom:var(--space-6)}@media(max-width:1200px){.tutorial-layout{grid-template-columns:1fr 220px;gap:var(--space-8)}}@media(max-width:768px){.tutorial-layout{grid-template-columns:1fr}.tutorial-sidebar{order:-1}.tutorial-info-card{position:static}.tutorial-hero-meta{flex-direction:column;gap:var(--space-2)}.nb-output{padding:var(--space-3) var(--space-4);font-size:var(--text-xs)}.nb-output-html th,.nb-output-html td{padding:6px 8px;font-size:var(--text-xs)}}@media(max-width:480px){.tutorial-hero-title{font-size:clamp(1.5rem,6vw,2rem)}}