.tutorial-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; padding-top: 64px; padding-bottom: 80px; }
.tutorial-sidebar { align-self: start; position: sticky; top: 110px; }
.tutorial-sidebar .eyebrow { margin-top: 32px; }
.tutorial-sidebar nav { display: grid; gap: 16px; margin-top: 20px; }
.tutorial-sidebar a { line-height: 1.5; }
.tutorial-article { min-width: 0; max-width: 860px; }
.tutorial-article h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.12; margin: 20px 0; }
.tutorial-breadcrumb { font-size: .9rem; margin-bottom: 32px; }
.tutorial-article section { scroll-margin-top: 110px; margin-top: 48px; }
.tutorial-article h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 20px; }
.tutorial-article p, .tutorial-article li { line-height: 1.8; }
.tutorial-article p + p { margin-top: 16px; }
.tutorial-article ol, .tutorial-article ul { padding-left: 24px; margin: 18px 0; }
.tutorial-article li + li { margin-top: 12px; }
.tutorial-article figure { margin: 28px 0; }
.tutorial-article figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid #b8c5c8; }
.tutorial-article figcaption { font-size: .9rem; line-height: 1.6; margin-top: 10px; }
.tutorial-article code { overflow-wrap: anywhere; }
.tutorial-article pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 20px; border: 1px solid #b8c5c8; border-radius: 10px; line-height: 1.7; }
.tutorial-note { padding: 20px; border-left: 3px solid #269b91; background: #f2f7f6; margin-top: 24px; }
.tutorial-index .product-card h3 { line-height: 1.35; }
.tutorial-index .product-card { min-height: auto; }
@media (max-width: 900px) {
    .tutorial-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; }
    .tutorial-sidebar { position: static; }
    .tutorial-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .tutorial-sidebar nav { grid-template-columns: minmax(0, 1fr); }
}