.tutorial-page {
    --tutorial-ink: #0f172a;
    --tutorial-muted: #64748b;
    --tutorial-border: #dbe4ef;
    --tutorial-panel: rgba(255, 255, 255, .9);
    --tutorial-soft: rgba(248, 250, 252, .9);
    --tutorial-cyan: #0891b2;
    --tutorial-violet: #7c3aed;
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 4rem;
    color: var(--tutorial-ink);
}

.tutorial-page *,
.tutorial-page *::before,
.tutorial-page *::after { box-sizing: border-box; }

.tutorial-page svg { width: 1.05rem; height: 1.05rem; stroke-width: 2; }
.tutorial-page button { font: inherit; }

.tutorial-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 3rem;
    align-items: center;
    overflow: hidden;
    min-height: 25rem;
    padding: 3.5rem;
    border: 1px solid rgba(125, 211, 252, .28);
    border-radius: 8px;
    color: #f8fafc;
    background: linear-gradient(125deg, #020617 0%, #111827 58%, #083344 100%);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .15);
}

.tutorial-hero::before {
    position: absolute;
    inset: 0;
    content: '';
    opacity: .25;
    background-image:
        linear-gradient(rgba(103, 232, 249, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 249, .18) 1px, transparent 1px);
    background-size: 36px 36px;
}

.tutorial-hero-copy,
.tutorial-hero-mark { position: relative; z-index: 1; }

.tutorial-eyebrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--tutorial-cyan);
    font-size: .78rem;
    font-weight: 900;
}

.tutorial-hero .tutorial-eyebrow { color: #67e8f9; }

.tutorial-hero h1 {
    margin: 1rem 0 0;
    font-size: clamp(2.35rem, 5vw, 4.5rem);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: 0;
}

.tutorial-hero h1 span {
    color: transparent;
    background: linear-gradient(90deg, #67e8f9, #60a5fa, #c084fc, #fb7185);
    background-clip: text;
    -webkit-background-clip: text;
}

.tutorial-hero-copy > p:not(.tutorial-eyebrow) {
    max-width: 43rem;
    margin: 1.2rem 0 0;
    color: #cbd5e1;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.85;
}

.tutorial-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.tutorial-hero .app-btn-ghost { border-color: rgba(255,255,255,.22); color: #f8fafc; background: rgba(255,255,255,.08); }

.tutorial-summary { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.5rem; color: #94a3b8; font-size: .78rem; font-weight: 700; }
.tutorial-summary strong { margin-right: .25rem; color: #f8fafc; }

.tutorial-hero-mark {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 18rem;
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

.tutorial-hero-mark img { width: 10rem; height: 10rem; object-fit: contain; }
.tutorial-hero-mark span { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; font-size: .85rem; font-weight: 900; }

.tutorial-watch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.tutorial-player-column,
.tutorial-chapters,
.tutorial-quick,
.tutorial-features,
.tutorial-faq {
    border: 1px solid var(--tutorial-border);
    border-radius: 8px;
    background: var(--tutorial-panel);
    box-shadow: 0 20px 55px rgba(15, 23, 42, .07);
}

.tutorial-player-column { min-width: 0; padding: 1.25rem; }
.tutorial-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tutorial-section-heading h2 { margin: .35rem 0 0; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 950; line-height: 1.2; }
.tutorial-section-heading p:not(.tutorial-eyebrow) { margin: .55rem 0 0; color: var(--tutorial-muted); font-size: .86rem; font-weight: 650; line-height: 1.7; }
.tutorial-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.tutorial-version-switch {
    display: inline-flex;
    padding: .2rem;
    border: 1px solid var(--tutorial-border);
    border-radius: 999px;
    background: var(--tutorial-soft);
}
.tutorial-version-switch button {
    min-height: 2.15rem;
    padding: .4rem .75rem;
    border: 0;
    border-radius: 999px;
    color: var(--tutorial-muted);
    background: transparent;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 900;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.tutorial-version-switch button:hover { color: var(--tutorial-ink); }
.tutorial-version-switch button.is-active,
.tutorial-version-switch button[aria-pressed="true"] {
    color: #fff;
    background: linear-gradient(135deg, #0891b2, #7c3aed);
    box-shadow: 0 5px 14px rgba(8, 145, 178, .2);
}
.tutorial-version-switch button:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

.tutorial-video-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .55rem .75rem;
    border: 1px solid #a5f3fc;
    border-radius: 999px;
    color: #0e7490;
    background: #ecfeff;
    font-size: .75rem;
    font-weight: 900;
}

.tutorial-video-shell {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-top: 1rem;
    border: 1px solid #1e293b;
    border-radius: 8px;
    background: #020617;
}

.tutorial-watch.is-mobile-version .tutorial-video-shell {
    width: min(100%, 24rem);
    max-height: 42rem;
    aspect-ratio: 9 / 16;
    margin-inline: auto;
}

.tutorial-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #020617; }
.tutorial-video-status,
.tutorial-video-error {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .6rem;
    padding: 1.5rem;
    text-align: center;
    color: #e2e8f0;
    background: linear-gradient(145deg, rgba(2,6,23,.94), rgba(8,47,73,.92));
}
.tutorial-video-status[hidden], .tutorial-video-error[hidden] { display: none; }
.tutorial-video-status p { margin: 0; color: #94a3b8; font-size: .82rem; }
.tutorial-status-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: #67e8f9; background: rgba(34,211,238,.12); }
.tutorial-video-error { grid-auto-flow: column; gap: .55rem; color: #fecdd3; background: rgba(69,10,10,.94); }

.tutorial-now-playing { display: flex; align-items: center; gap: .7rem; min-height: 3.25rem; margin-top: .85rem; padding: .65rem .8rem; border: 1px solid var(--tutorial-border); border-radius: 8px; background: var(--tutorial-soft); }
.tutorial-now-icon { display: grid; width: 2rem; height: 2rem; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #06b6d4, #7c3aed); }
.tutorial-now-playing div { min-width: 0; flex: 1; }
.tutorial-now-playing small { display: block; color: var(--tutorial-muted); font-size: .65rem; font-weight: 800; }
.tutorial-now-playing strong { display: block; overflow: hidden; margin-top: .1rem; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.tutorial-now-playing time { color: var(--tutorial-muted); font-size: .76rem; font-variant-numeric: tabular-nums; font-weight: 850; }

.tutorial-chapters { min-width: 0; padding: .75rem; }
.tutorial-chapter-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border: 0; color: var(--tutorial-ink); background: transparent; cursor: pointer; }
.tutorial-chapter-toggle span { display: flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 950; }
.tutorial-chapter-toggle > svg { transition: transform 180ms ease; }
.tutorial-chapter-toggle[aria-expanded="false"] > svg { transform: rotate(-90deg); }
.tutorial-chapter-list { display: grid; gap: .35rem; max-height: 32.5rem; overflow: auto; padding: .2rem; scrollbar-width: thin; }
.tutorial-chapter-list[hidden] { display: none; }
.tutorial-chapter {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    width: 100%;
    min-height: 3.55rem;
    padding: .6rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--tutorial-ink);
    text-align: left;
    background: transparent;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.tutorial-chapter:hover { border-color: var(--tutorial-border); background: var(--tutorial-soft); transform: translateX(2px); }
.tutorial-chapter.is-current { border-color: #67e8f9; background: linear-gradient(90deg, rgba(207,250,254,.9), rgba(237,233,254,.8)); }
.tutorial-chapter-number { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 8px; color: #0e7490; background: #cffafe; font-size: .7rem; font-weight: 950; font-variant-numeric: tabular-nums; }
.tutorial-chapter.is-current .tutorial-chapter-number { color: #fff; background: linear-gradient(135deg,#06b6d4,#7c3aed); }
.tutorial-chapter-copy { min-width: 0; }
.tutorial-chapter-copy strong, .tutorial-chapter-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tutorial-chapter-copy strong { font-size: .78rem; }
.tutorial-chapter-copy small { margin-top: .18rem; color: var(--tutorial-muted); font-size: .62rem; font-weight: 650; }
.tutorial-chapter time { color: var(--tutorial-muted); font-size: .67rem; font-variant-numeric: tabular-nums; font-weight: 800; }

.tutorial-quick,
.tutorial-features,
.tutorial-faq { margin-top: 1.5rem; padding: 1.5rem; }

.tutorial-quick-progress { height: 3px; overflow: hidden; margin-top: 1rem; border-radius: 999px; background: #e2e8f0; }
.tutorial-quick-progress > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#06b6d4,#7c3aed); transform: scaleX(0); transform-origin: left center; }
.tutorial-quick-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.tutorial-step-tabs { display: grid; align-content: start; gap: .55rem; }
.tutorial-step-tab { display: flex; align-items: center; gap: .75rem; min-height: 4rem; padding: .7rem; border: 1px solid var(--tutorial-border); border-radius: 8px; color: var(--tutorial-ink); text-align: left; background: var(--tutorial-soft); cursor: pointer; }
.tutorial-step-tab > span:first-child { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #0e7490; background: #cffafe; }
.tutorial-step-tab strong, .tutorial-step-tab small { display: block; }
.tutorial-step-tab strong { font-size: .82rem; }
.tutorial-step-tab small { margin-top: .2rem; color: var(--tutorial-muted); font-size: .68rem; font-weight: 650; }
.tutorial-step-tab[aria-selected="true"] { border-color: #67e8f9; background: linear-gradient(90deg,rgba(207,250,254,.86),rgba(237,233,254,.72)); box-shadow: 0 10px 26px rgba(6,182,212,.12); }
.tutorial-step-tab[aria-selected="true"] > span:first-child { color: #fff; background: linear-gradient(135deg,#06b6d4,#7c3aed); }
.tutorial-step-screens { min-width: 0; padding: 1rem; border: 1px solid var(--tutorial-border); border-radius: 8px; background: var(--tutorial-soft); }
.guide-demo-screen[hidden] { display: none; }
.guide-demo-screen.is-active { animation: tutorial-screen-in 260ms ease both; }
.tutorial-step-screen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tutorial-step-screen-head small { color: var(--tutorial-cyan); font-weight: 900; }
.tutorial-step-screen-head h3 { margin: .3rem 0 0; font-size: 1.25rem; font-weight: 950; }
.tutorial-step-screen-head > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #fff; background: linear-gradient(135deg,#06b6d4,#7c3aed); font-weight: 950; }
.guide-demo-screen > p { margin: .7rem 0 0; color: var(--tutorial-muted); font-size: .83rem; font-weight: 650; line-height: 1.7; }
.tutorial-field-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin-top: 1rem; }
.tutorial-field-list span { display: flex; align-items: center; gap: .5rem; min-height: 3.25rem; padding: .65rem; border: 1px solid var(--tutorial-border); border-radius: 8px; background: var(--tutorial-panel); font-size: .72rem; font-weight: 800; }
.tutorial-field-list svg { flex: 0 0 auto; color: #0d9488; }
.tutorial-step-action { display: flex; justify-content: flex-end; margin-top: 1rem; }

.tutorial-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; margin-top: 1.1rem; }
.tutorial-feature { display: flex; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid var(--tutorial-border); border-radius: 8px; background: var(--tutorial-soft); }
.tutorial-feature > span { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; flex: 0 0 auto; border-radius: 8px; }
.tutorial-feature .tone-1 { color: #0369a1; background: #e0f2fe; }
.tutorial-feature .tone-2 { color: #6d28d9; background: #ede9fe; }
.tutorial-feature .tone-3 { color: #047857; background: #d1fae5; }
.tutorial-feature .tone-4 { color: #be123c; background: #ffe4e6; }
.tutorial-feature h3 { margin: .15rem 0 0; font-size: .92rem; font-weight: 950; }
.tutorial-feature p { margin: .35rem 0 0; color: var(--tutorial-muted); font-size: .73rem; font-weight: 600; line-height: 1.65; }

.tutorial-faq-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: max-content; align-items: start; gap: .7rem; margin-top: 1rem; }
.tutorial-faq details { align-self: start; height: auto; padding: .9rem 1rem; border: 1px solid var(--tutorial-border); border-radius: 8px; background: var(--tutorial-soft); }
.tutorial-faq summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; list-style: none; font-size: .84rem; font-weight: 900; }
.tutorial-faq summary::-webkit-details-marker { display: none; }
.tutorial-faq details[open] summary svg { transform: rotate(45deg); }
.tutorial-faq p { margin: .75rem 0 0; color: var(--tutorial-muted); font-size: .78rem; line-height: 1.75; }

@keyframes tutorial-screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

html:is(.dark, [data-theme="dark"]) .tutorial-page {
    --tutorial-ink: #f8fafc;
    --tutorial-muted: #a9b7cb;
    --tutorial-border: #334155;
    --tutorial-panel: rgba(15, 23, 42, .92);
    --tutorial-soft: rgba(17, 29, 49, .94);
    --tutorial-cyan: #67e8f9;
}
html:is(.dark, [data-theme="dark"]) .tutorial-video-badge { border-color: #155e75; color: #67e8f9; background: #083344; }
html:is(.dark, [data-theme="dark"]) .tutorial-chapter.is-current,
html:is(.dark, [data-theme="dark"]) .tutorial-step-tab[aria-selected="true"] { border-color: #22d3ee; background: linear-gradient(90deg,rgba(8,145,178,.22),rgba(124,58,237,.2)); }
html:is(.dark, [data-theme="dark"]) .tutorial-chapter-number,
html:is(.dark, [data-theme="dark"]) .tutorial-step-tab > span:first-child { color: #67e8f9; background: #164e63; }
html:is(.dark, [data-theme="dark"]) .tutorial-quick-progress { background: #334155; }
html:is(.dark, [data-theme="dark"]) .tutorial-feature .tone-1 { color: #7dd3fc; background: #0c4a6e; }
html:is(.dark, [data-theme="dark"]) .tutorial-feature .tone-2 { color: #c4b5fd; background: #4c1d95; }
html:is(.dark, [data-theme="dark"]) .tutorial-feature .tone-3 { color: #6ee7b7; background: #064e3b; }
html:is(.dark, [data-theme="dark"]) .tutorial-feature .tone-4 { color: #fda4af; background: #881337; }

@media (max-width: 1023px) {
    .tutorial-hero { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; }
    .tutorial-hero-mark { min-height: 12rem; grid-template-columns: auto auto; gap: 1rem; }
    .tutorial-hero-mark img { width: 7rem; height: 7rem; }
    .tutorial-hero-mark span { margin-top: 0; }
    .tutorial-watch { grid-template-columns: 1fr; }
    .tutorial-chapter-list { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; }
    .tutorial-quick-layout { grid-template-columns: 1fr; }
    .tutorial-step-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .tutorial-step-tab { align-items: flex-start; }
    .tutorial-step-tab small { display: none; }
    .tutorial-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 639px) {
    .tutorial-page { width: 100%; padding-bottom: 1.5rem; }
    .tutorial-hero { min-height: 0; padding: 1.25rem; }
    .tutorial-hero h1 { font-size: 2.25rem; }
    .tutorial-hero-copy > p:not(.tutorial-eyebrow) { font-size: .88rem; line-height: 1.7; }
    .tutorial-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .tutorial-hero-actions .app-btn { width: 100%; min-width: 0; padding-inline: .65rem; }
    .tutorial-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
    .tutorial-hero-mark { display: none; }
    .tutorial-player-column,
    .tutorial-chapters,
    .tutorial-quick,
    .tutorial-features,
    .tutorial-faq { padding: 1rem; }
    .tutorial-section-heading { align-items: flex-start; }
    .tutorial-player-column > .tutorial-section-heading {
        display: grid;
        justify-items: center;
        text-align: center;
    }
    .tutorial-player-column > .tutorial-section-heading .tutorial-eyebrow { justify-content: center; }
    .tutorial-heading-actions { justify-content: flex-start; }
    .tutorial-player-column > .tutorial-section-heading .tutorial-heading-actions {
        width: 100%;
        justify-content: center;
    }
    .tutorial-version-switch { width: 100%; }
    .tutorial-version-switch button { flex: 1; }
    .tutorial-section-heading .app-btn { min-width: 0; padding-inline: .7rem; }
    .tutorial-video-badge { display: none; }
    .tutorial-video-shell { margin-inline: -.35rem; }
    .tutorial-chapter-list { grid-template-columns: 1fr; max-height: 19rem; }
    .tutorial-step-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .tutorial-step-tab { min-height: 3.5rem; padding: .55rem; }
    .tutorial-step-tab strong { font-size: .75rem; }
    .tutorial-step-screens { padding: .8rem; }
    .tutorial-field-list { grid-template-columns: 1fr; }
    .tutorial-feature-grid,
    .tutorial-faq-list { grid-template-columns: 1fr; }
    .tutorial-feature { padding: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tutorial-page *,
    .tutorial-page *::before,
    .tutorial-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}