.tutorial-page{--tutorial-ink: #0f172a;--tutorial-muted: #475569;--tutorial-accent: #4f46e5;--tutorial-border: #e2e8f0;--tutorial-surface: #f8fafc;padding-top:7.5rem;background:var(--tutorial-surface);color:var(--tutorial-ink);font-size:1rem;line-height:1.5}.tutorial-shell{width:min(100% - 3rem,76rem);margin-inline:auto}.tutorial-intro{max-width:48rem;margin:0 auto 3rem;text-align:center}.tutorial-eyebrow{margin:0 0 .75rem;color:var(--tutorial-accent);font-size:.8rem;font-weight:600;line-height:1.5;letter-spacing:.06em;text-transform:uppercase}.tutorial-intro h1{max-width:24ch;margin:0 auto;font-size:clamp(2.25rem,4vw,3rem);font-weight:800;line-height:1.12;letter-spacing:-.035em}.tutorial-intro h1 span{background:linear-gradient(90deg,#4f46e5,#9333ea);background-clip:text;-webkit-background-clip:text;color:transparent}.tutorial-intro__description{max-width:40rem;margin:1.25rem auto 0;color:var(--tutorial-muted);font-size:1.25rem}.tutorial-workspace{display:grid;grid-template-areas:"player" "index" "details";gap:2rem;align-items:start}.tutorial-main{grid-area:player;min-width:0}.tutorial-player{container-type:inline-size;position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:1rem;background:#1e2347;box-shadow:0 14px 36px #1e23471a;scroll-margin-top:6.5rem}.tutorial-player>iframe,.tutorial-player>button{display:block;width:100%;height:100%;border:0}.tutorial-player>button{padding:0;text-align:left;cursor:pointer}.tutorial-cover-original__copy{width:49%;padding:clamp(1rem,6cqw,3rem);padding-right:5cqw}.tutorial-cover-original__copy h3{font-size:clamp(.875rem,5.35cqw,2.625rem)}.tutorial-cover-original__copy>div{margin-bottom:clamp(.375rem,2cqw,1rem)}.tutorial-cover-original__label{gap:1cqw;padding:1cqw 2cqw;font-size:clamp(.375rem,1.4cqw,.6875rem)}.tutorial-cover-original__play{width:clamp(2.5rem,12cqw,6rem);height:clamp(2.5rem,12cqw,6rem)}.tutorial-cover-original__play svg{width:5cqw;height:5cqw}@media(min-width:1024px){.tutorial-intro{max-width:none}.tutorial-intro h1{max-width:none;font-size:clamp(2.25rem,3.5vw,3rem);white-space:nowrap}.tutorial-intro__break{display:none}.tutorial-intro__description{max-width:54rem}.tutorial-cover-original__copy{width:60%;padding-right:3cqw}.tutorial-cover-original__copy h3{display:block;overflow:visible;-webkit-line-clamp:unset;font-size:clamp(1.625rem,4.1cqw,2.125rem);line-height:1.15;text-wrap:balance}.tutorial-cover-original__play{position:relative;left:16cqw}}.tutorial-details{grid-area:details;min-width:0;padding:2rem;border:1px solid var(--tutorial-border);border-radius:1.5rem;background:#fff;box-shadow:0 8px 28px #0f172a0a}.tutorial-details>.tutorial-eyebrow{display:inline-flex;margin-bottom:1rem;padding:.375rem .75rem;border:1px solid #e0e7ff;border-radius:999px;background:#eef2ff;color:#4338ca}.tutorial-details h2,.tutorial-index h2{margin:0;font-size:1.5625rem;font-weight:700;line-height:1.25;letter-spacing:-.025em}.tutorial-details__description{margin:.75rem 0 1.75rem;color:var(--tutorial-muted)}.tutorial-learnings{padding:1.5rem;border:1px solid #e0e7ff;border-radius:1rem;background:#eef2ff}.tutorial-learnings h3{display:flex;align-items:center;gap:.625rem}.tutorial-learnings h3 svg{flex-shrink:0;color:var(--tutorial-accent)}.tutorial-learnings h3,.tutorial-question h3{margin:0 0 .75rem;font-size:1.25rem;font-weight:700;line-height:1.25;letter-spacing:-.02em}.tutorial-learnings ul{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}.tutorial-learnings li{display:flex;align-items:flex-start;gap:.75rem;color:var(--tutorial-muted)}.tutorial-learnings li svg{flex-shrink:0;width:1.375rem;height:1.375rem;margin-top:.0625rem;padding:.1875rem;border-radius:50%;background:#d1fae5;color:#047857}.tutorial-author{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.tutorial-author img{width:2.5rem;height:2.5rem;border-radius:.625rem}.tutorial-author strong,.tutorial-author span{display:block}.tutorial-author span{color:var(--tutorial-muted);font-size:.8rem}.tutorial-index{grid-area:index;min-width:0;padding:1.5rem;border-radius:1rem;background:#f6f8fc}.tutorial-index__heading>p:last-child{margin:.75rem 0 1.5rem;color:var(--tutorial-muted)}.tutorial-index__list{margin:0;padding:0;list-style:none}.tutorial-index__list li+li{border-top:1px solid var(--tutorial-border)}.tutorial-index__list button{display:flex;align-items:flex-start;gap:.875rem;width:100%;padding:1.25rem .75rem;border-radius:.625rem;color:inherit;font:inherit;text-align:left;cursor:pointer}.tutorial-index__list button[aria-current]{background:#e8edff}.tutorial-index__number{flex-shrink:0;color:var(--tutorial-accent);font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums}.tutorial-index__text{flex:1;min-width:0}.tutorial-index__text strong,.tutorial-index__text>span{display:block}.tutorial-index__text strong{margin-bottom:.375rem;font-weight:700;line-height:1.35}.tutorial-index__text>span{color:var(--tutorial-muted);font-size:.8rem}.tutorial-index__text>.tutorial-index__selected{margin-top:.625rem;color:var(--tutorial-accent);font-weight:600}.tutorial-index__arrow{flex-shrink:0;margin-top:.25rem;color:var(--tutorial-muted)}.tutorial-question a{display:inline-flex;align-items:center;min-height:2.75rem;gap:.625rem;color:var(--tutorial-accent);font-weight:600;text-decoration:underline;text-underline-offset:.3rem;text-decoration-color:#a5b4fc}.tutorial-question a svg{flex-shrink:0}.tutorial-question{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--tutorial-border)}.tutorial-question>svg{margin-bottom:.75rem;color:var(--tutorial-accent)}.tutorial-question p{margin:0 0 .5rem;color:var(--tutorial-muted)}.tutorial-next{margin-top:3.5rem;padding-block:3rem;border-top:1px solid #e0e7ff;background:#eef2ff}.tutorial-next__layout{display:flex;align-items:center;justify-content:space-between;gap:2rem}.tutorial-next__copy{max-width:40rem}.tutorial-next h2{margin:0;font-size:1.953125rem;font-weight:750;line-height:1.2;letter-spacing:-.025em}.tutorial-next__copy>p:last-child{margin:.875rem 0 0;color:var(--tutorial-muted)}.tutorial-next__actions{display:flex;flex-direction:column;align-items:stretch;flex-shrink:0;gap:.625rem}.tutorial-next__actions a{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;gap:.75rem;padding:.75rem 1.25rem;border-radius:.5rem;font-weight:600}.tutorial-next__primary{background:#4f46e5;color:#fff}.tutorial-next__secondary{color:var(--tutorial-accent)}.tutorial-page a:focus-visible,.tutorial-page button:focus-visible,.tutorial-player:focus-visible{outline:3px solid var(--tutorial-accent);outline-offset:4px}.tutorial-player>button:focus-visible{outline-color:#fff;outline-offset:-6px}@media(min-width:1024px){.tutorial-workspace{grid-template-columns:minmax(0,2.1fr) minmax(19rem,1fr);grid-template-areas:"player index" "details index";gap:2rem 2.5rem}}@media(max-width:767px){.tutorial-next__layout{align-items:flex-start;flex-direction:column}.tutorial-next__actions{flex-direction:row;flex-wrap:wrap}}@media(max-width:639px){.tutorial-details{padding:1.25rem}.tutorial-learnings{padding:1rem}.tutorial-details h2{font-size:1.25rem}.tutorial-learnings h3{font-size:1rem}.tutorial-page{padding-top:6.5rem}.tutorial-shell{width:calc(100% - 2rem)}.tutorial-intro__description{font-size:1rem}.tutorial-next h2{font-size:1.5625rem}}@media(hover:hover){.tutorial-index__list button:hover{background:#e8edff}.tutorial-next__primary:hover{background:#4338ca}.tutorial-question a:hover,.tutorial-next__secondary:hover{text-decoration:underline;text-underline-offset:.3rem}}.dark .tutorial-page{--tutorial-ink: #f8fafc;--tutorial-muted: #cbd5e1;--tutorial-accent: #a5b4fc;--tutorial-border: #334155;--tutorial-surface: #0f172a}.dark .tutorial-index{background:#1a253b}.dark .tutorial-details{background:#1e293b}.dark .tutorial-intro h1 span{background-image:linear-gradient(90deg,#a5b4fc,#c084fc)}.dark .tutorial-details>.tutorial-eyebrow,.dark .tutorial-learnings{border-color:#373c68;background:#252d4d}.dark .tutorial-details>.tutorial-eyebrow{color:#a5b4fc}.dark .tutorial-learnings li svg{background:#064e3b;color:#6ee7b7}.dark .tutorial-index__list button[aria-current],.dark .tutorial-index__list button:hover{background:#303958}.dark .tutorial-next{border-color:#334155;background:#202945}@media(prefers-reduced-motion:reduce){.tutorial-cover-original__play{transition:none}}