.tutorial-dialog { width: min(48rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; }
.tutorial-dialog[open] { display: flex; flex-direction: column; }
.tutorial-dialog::backdrop { background: rgb(17 24 39 / .5); }
.tutorial-scroll { overflow-y: auto; min-height: 5rem; }
.tutorial-section { scroll-margin-block: 1rem; }
.tutorial-section[data-current] { border-color: #0ea5e9; background: #f0f9ff; }
.tutorial-section[data-completed] { border-color: #86efac; background: #f0fdf4; }
.tutorial-completed { color: #166534; font-size: .75rem; font-weight: 600; }
.tutorial-walkthrough { max-width: 38rem; padding: 1.5rem; overflow-y: auto; }
#tutorial-step-text { margin-block: 1rem 1.5rem; padding: 1.25rem; border: 1px solid #e2e8f0; border-radius: .75rem; background: #f8fafc; line-height: 1.625; }
.tutorial-lesson-actions { padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.tutorial-dialog button:disabled { opacity: .6; cursor: default; }
.tutorial-dialog [aria-busy="true"] button:disabled { cursor: wait; }
.tutorial-dialog [hidden] { display: none; }
@media (max-height: 600px) { .tutorial-dialog { overflow-y: auto; } .tutorial-scroll { overflow: visible; } }
.tutorial-overview-body { background: #f8fafc; }
.tutorial-overview-body > * + * { margin-top: 1.5rem; }
.tutorial-journey-summary { padding: 1rem; background: white; border: 1px solid #e2e8f0; border-radius: .75rem; }
.tutorial-goal-picker, .tutorial-guide-library { padding-top: 1.25rem; border-top: 1px solid #cbd5e1; }
.tutorial-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .85rem; }
.tutorial-section-heading h3 { color: #111827; font-size: .875rem; font-weight: 700; }
.tutorial-library-description { margin-bottom: 1rem; }
#tutorial-page-controls { margin-bottom: 1rem; }
.tutorial-meter { display: block; width: 100%; height: .4rem; margin-block: .85rem; border: 0; border-radius: 1rem; overflow: hidden; background: #e2e8f0; accent-color: #0284c7; }
.tutorial-meter::-webkit-progress-bar { background: #e2e8f0; }
.tutorial-meter::-webkit-progress-value { background: #0284c7; transition: width .2s ease; }
.tutorial-meter::-moz-progress-bar { background: #0284c7; }
.tutorial-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.tutorial-goal { display: flex; align-items: flex-start; gap: .6rem; padding: .85rem; border: 1px solid #cbd5e1; border-radius: .75rem; text-align: left; background: white; transition: border-color .2s ease, background .2s ease; }
.tutorial-goal:hover, .tutorial-goal[aria-pressed="true"] { border-color: #0ea5e9; background: #f0f9ff; }
.tutorial-goal strong { display: block; font-size: .875rem; color: #111827; }
.tutorial-goal small { display: block; margin-top: .2rem; color: #475569; line-height: 1.4; }
.tutorial-goal-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #e0f2fe; color: #075985; font-size: .75rem; font-weight: 700; }
.tutorial-practice-invite { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #bae6fd; border-radius: .75rem; background: linear-gradient(115deg, #f0f9ff, #f0fdfa); }
.tutorial-practice-invite button { flex-shrink: 0; }
.tutorial-journey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tutorial-section { display: flex; flex-direction: column; background: white; border-color: #cbd5e1; box-shadow: 0 1px 2px rgb(15 23 42 / .04); transition: border-color .2s ease, box-shadow .2s ease; }
.tutorial-section:hover { border-color: #7dd3fc; box-shadow: 0 2px 8px rgb(15 23 42 / .06); }
.tutorial-section > a { margin-top: auto; padding-top: .85rem; border-top: 1px solid #e2e8f0; }
.tutorial-section > p:not(.tutorial-group-label) { padding-bottom: 1rem; }
.tutorial-group-label { margin-bottom: .4rem; color: #475569; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
#tutorial-coach { position: fixed; inset: auto; margin: 0; z-index: 10001; width: min(23rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.25rem; border: 1px solid #bae6fd; border-radius: .9rem; background: white; color: #111827; box-shadow: 0 16px 48px rgb(15 23 42 / .2); }
.tutorial-coach-heading, .tutorial-coach-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.tutorial-coach-actions { margin-top: 1rem; }
.tutorial-coach-heading { align-items: flex-start; }
#tutorial-coach [data-coach-progress] { color: #0369a1; font-size: .75rem; font-weight: 600; }
#tutorial-coach h2 { margin-block: .85rem .5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
#tutorial-coach [data-coach-description] { color: #475569; font-size: .875rem; line-height: 1.6; }
#tutorial-coach [data-coach-status] { margin-block: 1rem; padding: .7rem; border-radius: .4rem; background: #f0f9ff; color: #075985; font-size: .8rem; line-height: 1.5; }
#tutorial-coach progress { display: block; width: 100%; height: .35rem; margin-top: .85rem; accent-color: #0284c7; }
#tutorial-coach [aria-busy="true"], #tutorial-coach[aria-busy="true"] [data-coach-status] { cursor: progress; }
#tutorial-coach [hidden] { display: none; }
#tutorial-coach button:disabled { opacity: .6; cursor: default; }
.tutorial-coach-target { outline: 3px solid #0ea5e9 !important; outline-offset: 5px; scroll-margin-block: 8rem; animation: tutorial-target-pulse 1.4s ease-out 2; }
.tutorial-practice { max-width: 48rem; }
.tutorial-practice-task { border-left: 3px solid #0ea5e9; padding: .75rem 1rem; background: #f0f9ff; border-radius: .4rem; }
.tutorial-practice-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tutorial-practice-label { display: block; padding: .85rem; border: 1px solid #e2e8f0; border-radius: .65rem; background: #f8fafc; color: #374151; font-size: .875rem; font-weight: 600; }
.tutorial-practice-label select { display: block; width: 100%; padding: .5rem; border: 1px solid #cbd5e1; border-radius: .4rem; background: white; font-size: .8rem; }
.tutorial-practice-label output { float: right; font-variant-numeric: tabular-nums; color: #0369a1; }
.tutorial-practice-label input { display: block; width: 100%; margin-block: 1rem .5rem; accent-color: #0284c7; }
.tutorial-practice-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; border-radius: .65rem; background: #f8fafc; }
.tutorial-practice-chart { position: relative; padding: .5rem; border: 1px solid #e2e8f0; border-radius: .65rem; }
#practice-chart { display: block; width: 100%; overflow: visible; }
#practice-chart circle:focus { outline: none; stroke: #0c4a6e; stroke-width: 3; }
.tutorial-practice-tooltip { position: absolute; z-index: 2; max-width: 15rem; padding: .45rem .7rem; border-radius: .4rem; background: #111827; color: white; font-size: .75rem; pointer-events: none; }
[data-practice-active] { outline: 2px solid #0ea5e9; outline-offset: 4px; }
.tutorial-dialog :is(button, a, select, input):focus-visible, #tutorial-coach :is(button, a):focus-visible { outline: 3px solid #0284c7; outline-offset: 3px; }
@keyframes tutorial-target-pulse { 0% { box-shadow: 0 0 0 0 rgb(99 102 241 / .3); } 100% { box-shadow: 0 0 0 12px rgb(99 102 241 / 0); } }
@media (max-width: 640px) {
  .tutorial-goals, .tutorial-journey, .tutorial-practice-controls { grid-template-columns: 1fr; }
  .tutorial-practice-invite { align-items: stretch; flex-direction: column; }
  #tutorial-coach { inset: auto 1rem 1rem !important; width: auto; max-height: 42dvh; }
  .tutorial-coach-target { scroll-margin-bottom: 48dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-coach-target { animation: none; }
  .tutorial-section, .tutorial-goal, .tutorial-meter::-webkit-progress-value { transition: none; }
}