.tutorials-hero{padding-bottom:54px}
.tutorials-hero p{max-width:640px;font-size:1.05rem}
.tutorials-section{padding-top:58px}
.tutorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.tutorial-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}
.tutorial-media{aspect-ratio:16/9;background:linear-gradient(135deg,#dceaf3,#f3f7f9);position:relative}
.tutorial-media iframe{display:block;width:100%;height:100%;border:0}
.tutorial-link-preview{display:flex;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.tutorial-link-preview span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--blue-dark);color:#fff;font-size:1.5rem;padding-left:3px;box-shadow:0 12px 25px rgba(36,136,199,.25)}
.tutorial-link-preview small{font-size:.82rem;font-weight:850}
.tutorial-link-preview:hover span,.tutorial-link-preview:focus-visible span{background:var(--ink)}
.tutorial-details{padding:22px 24px 25px}
.tutorial-step{display:inline-block;color:var(--blue-dark);font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.tutorial-details h2{margin:7px 0 15px;font-size:1.25rem;line-height:1.3;letter-spacing:-.02em;overflow-wrap:anywhere}
.tutorial-details>a{font-size:.85rem;font-weight:850;color:var(--blue-dark);text-decoration:none}
.tutorial-details>a:hover{text-decoration:underline}
.tutorial-empty{padding:60px 24px;text-align:center;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.tutorial-empty h2{margin:0 0 7px;font-size:1.5rem}
.tutorial-empty p{margin:0;color:var(--muted)}
@media(max-width:760px){.tutorial-grid{grid-template-columns:1fr;gap:18px}.tutorial-details{padding:18px 20px 22px}.tutorials-section{padding-top:38px}}