.tutorial-page{background:#fafbfc;min-height:60vh;padding:var(--space-10) 0 var(--space-12)}.tutorial-page .container{margin:0 auto;max-width:1400px;padding:0 var(--space-6)}.tutorial-page__layout{align-items:start;animation:fadeInUp .6s ease .1s both;display:grid;gap:var(--space-8);grid-template-columns:1fr 320px}.tutorial-page__main{min-width:0}.tutorial-page__section-title{border-bottom:2px solid #e2e8f0;color:#0f172a;font-family:var(--font-headings);font-size:var(--text-2xl);font-weight:var(--font-bold);margin-bottom:var(--space-6);padding-bottom:var(--space-3)}.tutorial-cards{display:grid;gap:var(--space-6);grid-template-columns:repeat(2,1fr)}.tutorial-cards__loading{align-items:center;color:#64748b;display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--space-3);grid-column:1/-1;justify-content:center;padding:var(--space-12)}.tutorial-cards__loading i{color:var(--surf-primary);font-size:1.5rem}.tutorial-cards__empty{align-items:center;background:#f8fafc;border:2px dashed #e2e8f0;border-radius:1rem;color:#64748b;display:flex;flex-direction:column;gap:var(--space-3);grid-column:1/-1;justify-content:center;padding:var(--space-12);text-align:center}.tutorial-cards__empty i{color:#94a3b8;font-size:2rem}.tutorial-cards__empty p{font-size:var(--text-base);font-weight:var(--font-medium);margin:0}.tutorial-cards__error{align-items:center;background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.2);border-radius:1rem;color:#dc2626;display:flex;flex-direction:column;gap:var(--space-3);grid-column:1/-1;justify-content:center;padding:var(--space-12);text-align:center}.tutorial-cards__error i{font-size:2rem}.tutorial-cards__error p{font-size:var(--text-base);font-weight:var(--font-medium);margin:0}.tutorial-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;box-shadow:0 4px 20px rgba(15,23,42,.06);display:flex;flex-direction:column;gap:var(--space-4);height:100%;padding:var(--space-6);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.tutorial-card:hover{box-shadow:0 12px 32px rgba(15,23,42,.12);transform:translateY(-4px)}.tutorial-card:focus-within{outline:2px solid var(--surf-primary);outline-offset:2px}.tutorial-card__icon{align-items:center;border-radius:.5rem;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:transform .25s ease,background-color .25s ease;width:40px}.tutorial-card__icon i{color:inherit;font-size:1.25rem}.tutorial-card__icon-img{height:100%;object-fit:contain;width:100%}.tutorial-card__content{display:flex;flex:1;flex-direction:column}.tutorial-card__header{align-items:center;display:flex;gap:var(--space-3);margin-bottom:var(--space-3)}.tutorial-card__title-group{align-items:center;display:flex;flex:1;gap:var(--space-3);justify-content:space-between;min-width:0}.tutorial-card__title{color:#0f172a;font-family:var(--font-headings);font-size:var(--text-xl);font-weight:var(--font-bold);margin:0}.tutorial-card__version{align-items:center;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;color:#64748b;display:inline-flex;font-family:var(--font-mono);font-size:.75rem;font-weight:var(--font-semibold);padding:.25rem .625rem;white-space:nowrap}.tutorial-card__description{color:#475569;flex:1;font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:0 0 var(--space-4)}.tutorial-card__cta{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;color:#334155;display:inline-flex;font-size:var(--text-sm);font-weight:var(--font-semibold);gap:var(--space-2);justify-content:center;margin-top:auto;padding:.75rem 1.25rem;text-decoration:none;transition:all .25s ease}.tutorial-card__cta i{font-size:.875rem;transition:transform .25s ease}.tutorial-card__cta:hover{background:#0f172a;border-color:#0f172a;color:#fff}.tutorial-card__cta:hover i{transform:translateX(3px)}.tutorial-card__cta:focus{outline:2px solid var(--surf-primary);outline-offset:2px}.tutorial-card--nemo{border-left:4px solid #2563eb}.tutorial-card--nemo .tutorial-card__icon{background:rgba(59,130,246,.08);color:#2563eb}.tutorial-card--nemo:hover{border-color:rgba(59,130,246,.2) rgba(59,130,246,.2) rgba(59,130,246,.2) #2563eb}.tutorial-card--nemo:hover .tutorial-card__icon{background:rgba(59,130,246,.15);transform:scale(1.05)}.tutorial-card--nemo .tutorial-card__cta:hover{background:#2563eb;border-color:#2563eb}.tutorial-card--shyfem{border-left:4px solid #7c3aed}.tutorial-card--shyfem .tutorial-card__icon{background:rgba(139,92,246,.08);color:#7c3aed}.tutorial-card--shyfem:hover{border-color:rgba(139,92,246,.2) rgba(139,92,246,.2) rgba(139,92,246,.2) #7c3aed}.tutorial-card--shyfem:hover .tutorial-card__icon{background:rgba(139,92,246,.15);transform:scale(1.05)}.tutorial-card--shyfem .tutorial-card__cta:hover{background:#7c3aed;border-color:#7c3aed}.tutorial-card--vm{border-left:4px solid #059669}.tutorial-card--vm .tutorial-card__icon{background:rgba(16,185,129,.08);color:#059669}.tutorial-card--vm:hover{border-color:rgba(16,185,129,.2) rgba(16,185,129,.2) rgba(16,185,129,.2) #059669}.tutorial-card--vm:hover .tutorial-card__icon{background:rgba(16,185,129,.15);transform:scale(1.05)}.tutorial-card--vm .tutorial-card__cta:hover{background:#059669;border-color:#059669}.tutorial-card--indata{border-left:4px solid #d97706}.tutorial-card--indata .tutorial-card__icon{background:rgba(245,158,11,.08);color:#d97706}.tutorial-card--indata:hover{border-color:rgba(245,158,11,.2) rgba(245,158,11,.2) rgba(245,158,11,.2) #d97706}.tutorial-card--indata:hover .tutorial-card__icon{background:rgba(245,158,11,.15);transform:scale(1.05)}.tutorial-card--indata .tutorial-card__cta:hover{background:#d97706;border-color:#d97706}.tutorial-sidebar{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;box-shadow:0 4px 20px rgba(15,23,42,.06);padding:var(--space-5);position:sticky;top:calc(var(--navbar-height) + var(--space-6))}.tutorial-sidebar__title{align-items:center;color:#0f172a;display:flex;font-family:var(--font-headings);font-size:var(--text-lg);font-weight:var(--font-bold);gap:var(--space-2);margin:0 0 var(--space-1)}.tutorial-sidebar__title i{color:#64748b;font-size:1rem}.tutorial-sidebar__subtitle{border-bottom:1px solid #e2e8f0;color:#64748b;font-size:var(--text-sm);margin:0 0 var(--space-5);padding-bottom:var(--space-4)}.tutorial-archive{display:flex;flex-direction:column;gap:var(--space-2);max-height:400px;overflow-y:auto;padding-right:var(--space-2)}.tutorial-archive::-webkit-scrollbar{width:4px}.tutorial-archive::-webkit-scrollbar-track{background:#f1f5f9;border-radius:2px}.tutorial-archive::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.tutorial-archive::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tutorial-archive__empty{align-items:center;background:#f8fafc;border:1px dashed #e2e8f0;border-radius:.5rem;color:#94a3b8;display:flex;flex-direction:column;gap:var(--space-2);justify-content:center;padding:var(--space-6);text-align:center}.tutorial-archive__empty i{font-size:1.5rem}.tutorial-archive__empty p{color:#64748b;font-size:var(--text-sm);font-weight:var(--font-medium);margin:0}.tutorial-archive__empty-hint{color:#94a3b8;font-size:var(--text-xs);line-height:var(--leading-relaxed)}.tutorial-archive-item{align-items:center;background:#f8fafc;border:1px solid transparent;border-radius:.5rem;display:flex;gap:var(--space-3);padding:var(--space-3);transition:all .2s ease}.tutorial-archive-item:hover{background:#fff;border-color:#e2e8f0;box-shadow:0 2px 8px rgba(15,23,42,.06)}.tutorial-archive-item:hover .tutorial-archive-item__icon{color:var(--surf-primary)}.tutorial-archive-item:hover .tutorial-archive-item__link{opacity:1;transform:translateX(0)}.tutorial-archive-item__icon{align-items:center;color:#94a3b8;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:color .2s ease;width:32px}.tutorial-archive-item__icon i{font-size:1.125rem}.tutorial-archive-item__content{flex:1;min-width:0}.tutorial-archive-item__title{color:#0f172a;font-size:var(--text-sm);font-weight:var(--font-semibold);margin:0 0 .125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tutorial-archive-item__meta{color:#64748b;font-size:.6875rem}.tutorial-archive-item__link{align-items:center;background:#f1f5f9;border-radius:.375rem;color:#64748b;display:flex;flex-shrink:0;height:28px;justify-content:center;opacity:0;text-decoration:none;transform:translateX(-4px);transition:all .2s ease;width:28px}.tutorial-archive-item__link i{font-size:.75rem}.tutorial-archive-item__link:hover{background:var(--surf-primary);color:#fff}.tutorial-archive-item__link:focus{opacity:1;outline:2px solid var(--surf-primary);outline-offset:2px;transform:translateX(0)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1200px){.tutorial-page__layout{gap:var(--space-6);grid-template-columns:1fr 280px}.tutorial-cards{gap:var(--space-5)}}@media(max-width:1024px){.tutorial-page__layout{gap:var(--space-8);grid-template-columns:1fr}.tutorial-cards{grid-template-columns:repeat(2,1fr)}.tutorial-sidebar{max-width:none;position:static}.tutorial-archive{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr);max-height:300px}}@media(max-width:768px){.tutorial-page{padding:var(--space-8) 0 var(--space-10)}.tutorial-page .container{padding:0 var(--space-4)}.tutorial-page__section-title{font-size:var(--text-xl);margin-bottom:var(--space-5)}.tutorial-cards{gap:var(--space-4);grid-template-columns:1fr}.tutorial-card{gap:var(--space-4);padding:var(--space-5)}.tutorial-card__icon{height:36px;width:36px}.tutorial-card__icon i{font-size:1.125rem}.tutorial-card__title{font-size:var(--text-lg)}.tutorial-card__title-group{flex-wrap:wrap;gap:var(--space-2)}.tutorial-card__description{font-size:var(--text-sm)}.tutorial-archive{grid-template-columns:1fr;max-height:none;overflow-y:visible;padding-right:0}}@media(max-width:480px){.tutorial-page{padding:var(--space-6) 0 var(--space-8)}.tutorial-page .container{padding:0 var(--space-3)}.tutorial-page__section-title{font-size:var(--text-lg);margin-bottom:var(--space-4);padding-bottom:var(--space-2)}.tutorial-card{border-radius:.75rem;padding:var(--space-4)}.tutorial-card__icon{border-radius:.375rem;height:32px;width:32px}.tutorial-card__icon i{font-size:1rem}.tutorial-card__header{gap:var(--space-2)}.tutorial-card__title-group{flex-wrap:wrap;gap:var(--space-2)}.tutorial-card__title{font-size:var(--text-base)}.tutorial-card__version{font-size:.6875rem;padding:.1875rem .5rem}.tutorial-card__cta,.tutorial-card__description{font-size:var(--text-xs)}.tutorial-card__cta{padding:.625rem 1rem}.tutorial-sidebar{border-radius:.75rem;padding:var(--space-4)}.tutorial-sidebar__title{font-size:var(--text-base)}.tutorial-sidebar__subtitle{font-size:var(--text-xs);margin-bottom:var(--space-4);padding-bottom:var(--space-3)}.tutorial-archive-item{padding:var(--space-2)}.tutorial-archive-item__icon{height:28px;width:28px}.tutorial-archive-item__icon i{font-size:1rem}.tutorial-archive-item__title{font-size:var(--text-xs)}.tutorial-archive-item__meta{font-size:.625rem}.tutorial-archive-item__link{height:24px;width:24px}.tutorial-archive-item__link i{font-size:.625rem}}@media(prefers-reduced-motion:reduce){.tutorial-page__layout{animation:none}.tutorial-archive-item,.tutorial-archive-item__icon,.tutorial-archive-item__link,.tutorial-card,.tutorial-card__cta,.tutorial-card__cta i,.tutorial-card__icon{transition:none}}@media(prefers-contrast:high){.tutorial-archive-item:hover,.tutorial-card,.tutorial-card__version{border-width:2px}}.tutorial-archive-item__link:focus-visible,.tutorial-card__cta:focus-visible{outline:3px solid var(--surf-primary);outline-offset:2px}