.tutorial-layout { display: grid; grid-template-columns: 16rem 1fr; gap: 2.5rem; align-items: start; }
.tutorial-nav { position: sticky; top: 6rem; }
.tutorial-nav details summary { font-weight: 700; cursor: pointer; padding: .35rem 0; list-style: none; }
.tutorial-nav details summary::-webkit-details-marker { display: none; }
.tutorial-nav ol { list-style: none; padding: 0; margin: .4rem 0 0; }
.tutorial-nav ol.phase-list { margin: 0; }
.tutorial-nav li { padding: .28rem 0; font-size: .91rem; }
.tutorial-nav li a { text-decoration: none; display: block; padding: .28rem .5rem; border-radius: .4rem; }
.tutorial-nav li a:hover { color: var(--brand-dark); background: #edf7fb; }
.tutorial-nav li a[aria-current="page"] { font-weight: 700; color: var(--brand); background: #d8f3ff; }
.tutorial-nav li.coming-soon { color: var(--muted); font-style: italic; opacity: .65; }

.tutorial-lesson { padding: 0; }
.lesson-header { margin-bottom: 1.5rem; }
.lesson-objectives { padding: 1rem; background: #f8fdff; border-left: 4px solid var(--brand); border-radius: 0 .55rem .55rem 0; margin-bottom: 1.8rem; }
.lesson-objectives ul { margin: .5rem 0 0; padding-left: 1.2rem; }

.demo-preview { margin: 1.5rem 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); }
.demo-preview .demo-label { display: inline-block; margin-bottom: .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.lesson-nav a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 650; text-decoration: none; }
.lesson-nav a:hover { text-decoration: underline; }

pre { margin: 1rem 0; padding: 1.1rem; border-radius: .7rem; background: #102a43; color: #eaf4ff; font: .87rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-x: auto; }
pre code { font: inherit; }

.ck-card--muted { opacity: .7; pointer-events: none; user-select: none; }
.ck-card--muted .ck-card__body h3 { color: var(--muted); }

@media (max-width: 760px) {
  .tutorial-layout { grid-template-columns: 1fr; }
  .tutorial-nav { position: static; margin-bottom: 1.5rem; }
  .tutorial-nav ol { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; }
  .tutorial-nav li { white-space: nowrap; }
  .tutorial-nav li.coming-soon { display: none; }
}