.tutorials-page{background:var(--studio-bg-primary);min-height:100vh;padding:2rem 1rem 4rem}.tutorials-container{width:100%;max-width:1200px;margin:0 auto}.tutorials-header{text-align:center;margin-bottom:3rem}.tutorials-header__icon{background:var(--studio-accent-muted);width:56px;height:56px;color:var(--studio-accent);border-radius:16px;justify-content:center;align-items:center;margin:0 auto 1.25rem;display:flex}.tutorials-header__icon svg{width:28px;height:28px}.tutorials-title{color:var(--studio-text-primary);margin:0 0 .75rem;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700}.tutorials-subtitle{color:var(--studio-text-secondary);max-width:640px;margin:0 auto;font-size:1.125rem;line-height:1.625}.tutorials-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem;display:grid}.tutorials-card{background:var(--studio-bg-elevated);border:2px solid var(--studio-border-strong);border-radius:16px;padding:1.75rem;transition:all .25s cubic-bezier(.16,1,.3,1)}.tutorials-card:hover{border-color:var(--studio-accent);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.tutorials-card__number{background:var(--studio-accent-muted);width:40px;height:40px;color:var(--studio-accent);border-radius:10px;justify-content:center;align-items:center;margin-bottom:1rem;font-size:1rem;font-weight:700;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex}.tutorials-card:hover .tutorials-card__number{background:var(--studio-accent);color:var(--studio-text-inverse)}.tutorials-card__title{color:var(--studio-text-primary);margin:0 0 .75rem;font-size:1.125rem;font-weight:600}.tutorials-card__steps{margin:0;padding:0;list-style:none}.tutorials-card__steps li{color:var(--studio-text-secondary);padding:.375rem 0 .375rem 1.25rem;font-size:.875rem;line-height:1.625;position:relative}.tutorials-card__steps li:before{content:"";background:var(--studio-accent);border-radius:50%;width:6px;height:6px;position:absolute;top:.75rem;left:0}.tutorials-cta{text-align:center}.tutorials-cta__btn{background:var(--studio-accent);color:var(--studio-text-inverse);cursor:pointer;box-shadow:var(--shadow-md),var(--shadow-glow-sm);border:none;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:.875rem 2rem;font-size:1rem;font-weight:600;transition:all .25s cubic-bezier(.16,1,.3,1);display:inline-flex}.tutorials-cta__btn:hover{background:var(--studio-accent-hover);box-shadow:var(--shadow-lg),var(--shadow-glow);transform:translateY(-2px)}.tutorials-cta__btn svg{width:18px;height:18px;transition:transform .15s}.tutorials-cta__btn:hover svg{transform:translate(3px)}@media (prefers-reduced-motion:reduce){.tutorials-card,.tutorials-card__number,.tutorials-cta__btn,.tutorials-cta__btn svg{transition:none}.tutorials-card:hover,.tutorials-cta__btn:hover,.tutorials-cta__btn:hover svg{transform:none}}@media (max-width:1024px){.tutorials-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.tutorials-page{padding:1.5rem 1rem 3rem}.tutorials-grid{grid-template-columns:1fr}}@media (max-width:480px){.tutorials-card{padding:1.5rem}}
