.tutorials-page{background-color:var(--color-bg);min-height:100vh}.tutorials-hero{border-bottom:1px solid var(--color-border);background:var(--color-surface);padding:5rem 0}.tutorials-title{letter-spacing:-.02em;background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1rem;font-size:3.5rem;font-weight:800}.tutorials-subtitle{color:var(--color-text-muted);max-width:42rem;margin:0 auto;font-size:1.25rem}.tutorials-grid{gap:var(--spacing-6);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));display:grid}.tutorial-card{border-radius:var(--radius-xl);border:1px solid var(--color-border);background:var(--color-surface);transition:all var(--transition-normal);cursor:pointer;color:inherit;box-shadow:var(--shadow-sm);flex-direction:column;display:flex;overflow:hidden;text-decoration:none!important}.tutorial-card:hover{box-shadow:var(--shadow-hover);border-color:var(--color-primary);transform:translateY(-4px)}.tutorial-card-image{aspect-ratio:16/9;background:linear-gradient(135deg,#4c1d95 0%,#1e40af 100%);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.tutorial-card-image img{object-fit:cover;width:100%;height:100%}.tutorial-card-image-placeholder{opacity:.5;font-size:3rem}.tutorial-card-category-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border-radius:var(--radius-full);background:#fff3;border:1px solid #ffffff4d;padding:3px 12px;font-size:.75rem;font-weight:700;position:absolute;top:12px;left:12px}.tutorial-card-body{padding:var(--spacing-6);flex-direction:column;flex-grow:1;display:flex}.tutorial-card-title{color:var(--color-text);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:.5rem;font-size:1.125rem;font-weight:700;display:-webkit-box;overflow:hidden}.tutorial-card-description{color:var(--color-text-muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;flex-grow:1;margin-bottom:1rem;font-size:.9rem;line-height:1.6;display:-webkit-box;overflow:hidden}.tutorial-card-footer{border-top:1px solid var(--color-border);justify-content:space-between;align-items:center;margin-top:auto;padding-top:1rem;display:flex}.tutorial-card-date{color:var(--color-text-muted);font-size:.8rem}.tutorial-card-read-more{color:var(--color-primary);align-items:center;gap:4px;font-size:.875rem;font-weight:600;display:inline-flex}@media (max-width:768px){.tutorials-grid{grid-template-columns:1fr}.tutorials-hero{padding:3rem 0}.tutorials-title{font-size:2rem}.tutorials-subtitle{font-size:1rem}}