.tutorial-preview { padding: 72px 0; background: var(--mint); }
.tutorial-preview__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.tutorial-preview h2 { font-size: clamp(2rem, 3vw, 3.5rem); margin: 12px 0 20px; }
.tutorial-preview p { color: var(--muted); line-height: 1.7; }
.tutorial-preview video, .public-tutorial video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; background: #0b1224; border-radius: 16px; }
.tutorial-preview__video { min-width: 0; }
.tutorial-fallback { font-size: .85rem; line-height: 1.6; margin: 12px 0; }
.tutorial-fallback a { text-decoration: underline; }
.tutorials-intro { padding: 80px 0 40px; }
.tutorials-intro h1 { font-size: clamp(2.5rem, 5vw, 5rem); max-width: 850px; }
.tutorials-intro p { max-width: 780px; color: var(--muted); line-height: 1.7; }
.tutorials-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tutorials-jump a { padding: 12px 18px; background: white; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.tutorials-list { display: grid; gap: 32px; padding-bottom: 80px; }
.public-tutorial { padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: white; scroll-margin-top: 120px; min-width: 0; }
.public-tutorial h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin: 0 0 12px; }
.public-tutorial__meta { color: var(--muted); margin-bottom: 22px; }
.public-tutorial__notice { font-size: .9rem; line-height: 1.7; background: var(--mint); padding: 16px; border-radius: 12px; }
.public-tutorial summary { cursor: pointer; padding: 16px 0; font-weight: 700; }
.public-tutorial ol { padding-left: 24px; }
.public-tutorial li { padding: 8px 0; line-height: 1.7; }
.public-tutorial li p { margin: 6px 0; }
.tutorials-list a:focus-visible, .tutorials-list summary:focus-visible, .tutorials-jump a:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
@media(max-width: 800px) { .tutorial-preview__grid { grid-template-columns: 1fr; gap: 24px; } .tutorial-preview { padding: 48px 0; } .tutorials-intro { padding-top: 48px; } .public-tutorial { padding: 20px; border-radius: 18px; } }
