/* Native blocks remain editable; these rules apply only to named tutorial blocks. */
.dk-tutorial-hero { width: 100%; margin-block: 0 2.5rem; }
.dk-tutorial-hero video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 16px; background: #153847; }
.dk-tutorial-layout { gap: clamp(32px, 5vw, 64px); margin-block-start: 3rem; }
.dk-tutorial-layout > .wp-block-column { min-width: 0; }
.dk-tutorial-steps > h2 { scroll-margin-top: 6rem; }
.dk-tutorial-toc { padding: 20px; border: 1px solid #D7E5EA; border-radius: 14px; background: #EDF3FF; font-size: 15px; line-height: 1.5; }
.dk-tutorial-toc h2 { margin-block: 0 1rem; font-size: 18px; }
.dk-tutorial-toc ul { list-style: none; margin: 0; padding: 0; }
.dk-tutorial-toc li + li { margin-block-start: 12px; }
.dk-tutorial-toc a { color: #2563EB; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dk-tutorial-steps img { height: auto; }
.dk-code-frame { border: 1px solid #D7E5EA; border-radius: 12px; overflow: hidden; margin-block: 1.5rem; background: #EDF3FF; }
.dk-code-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; }
.dk-code-toolbar button { padding: 10px 16px; border: 0; border-radius: 8px; color: #FFFFFF; background: #2563EB; font: 600 15px/1.3 system-ui, sans-serif; cursor: pointer; }
.dk-code-toolbar button:focus-visible, .dk-tutorial-toc a:focus-visible { outline: 3px solid #087E8B; outline-offset: 3px; }
.dk-code-status { font-size: 14px; color: #526B78; }
.dk-code-frame .wp-block-code { margin: 0; padding: 16px; border: 0; border-radius: 0; background: #FFFFFF; color: #153847; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
 .dk-tutorial-layout { display: flex; align-items: stretch; }
 .dk-tutorial-sidebar { flex: 0 0 240px !important; }
 .dk-tutorial-toc { position: sticky; top: 6rem; max-height: calc(100dvh - 7rem); overflow-y: auto; }
}
@media (max-width: 1023px) {
 .dk-tutorial-layout { display: block !important; }
 .dk-tutorial-layout > .wp-block-column { width: auto; margin: 0; }
 .dk-tutorial-toc { position: static; margin-block-end: 2rem; }
}
