@layer components{.tutorial-page{--tutorial-ink:#0b0e14;--tutorial-violet:#6d4df5;--tutorial-cyan:#0891b2;position:relative;isolation:isolate;overflow-x:clip;min-height:calc(100svh - 4rem);background:radial-gradient(ellipse 90% 48% at 50% -10%,rgba(124,92,252,.14),transparent 58%),radial-gradient(ellipse 42% 28% at 100% 12%,rgba(8,145,178,.08),transparent 62%),linear-gradient(180deg,#eef1fb,#f6f7fc 38%,#eef2f8);padding-top:7rem;padding-bottom:5rem;display:grid;align-items:center}@media (min-width:768px){.tutorial-page{padding-top:8rem;padding-bottom:6.5rem}}.tutorial-bg{pointer-events:none;position:absolute;inset:0;z-index:-1;overflow:hidden}.tutorial-bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,92,252,.05) 1px,transparent 0),linear-gradient(90deg,rgba(124,92,252,.05) 1px,transparent 0);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 78% 58% at 50% 42%,black 18%,transparent 78%);mask-image:radial-gradient(ellipse 78% 58% at 50% 42%,black 18%,transparent 78%)}.tutorial-bg-orb{position:absolute;border-radius:9999px;filter:blur(8px)}.tutorial-bg-orb--violet{top:-6rem;left:-4rem;width:22rem;height:22rem;background:radial-gradient(circle,rgba(124,92,252,.26) 0,transparent 70%);animation:tutorialOrbFloat 9s ease-in-out infinite}.tutorial-bg-orb--cyan{top:18%;right:-7rem;width:20rem;height:20rem;background:radial-gradient(circle,rgba(34,211,238,.18) 0,transparent 70%);animation:tutorialOrbFloat 11s ease-in-out infinite reverse}.tutorial-bg-orb--emerald{bottom:10%;left:16%;width:16rem;height:16rem;background:radial-gradient(circle,rgba(16,185,129,.12) 0,transparent 70%);animation:tutorialOrbFloat 13s ease-in-out infinite;animation-delay:-4s}@keyframes tutorialOrbFloat{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,-18px,0)}}@keyframes tutorialPulse{0%,to{box-shadow:0 0 0 4px rgba(124,92,252,.12)}50%{box-shadow:0 0 0 7px rgba(34,211,238,.1)}}@keyframes tutorialScan{0%{transform:translateY(-40%);opacity:0}22%{opacity:.45}to{transform:translateY(180%);opacity:0}}.tutorial-stage{position:relative;width:min(100%,38.5rem);margin-inline:auto;border-radius:1.7rem;border:1px solid rgba(91,63,212,.16);background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 22px 48px rgba(91,63,212,.1)}.tutorial-preview{display:grid;grid-template-columns:1.15rem minmax(0,1fr) 1.15rem;align-items:stretch;overflow:hidden;height:11.5rem;border-radius:1.65rem 1.65rem 0 0;background:#0b0e14}@media (min-width:768px){.tutorial-preview{height:13.5rem}}.tutorial-sprocket{background:repeating-linear-gradient(180deg,#0b0e14 0 .42rem,rgba(255,255,255,.22) .42rem .68rem);opacity:.55}.tutorial-screen{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 80% at 50% 45%,rgba(109,77,245,.28),transparent 62%),radial-gradient(ellipse 50% 60% at 78% 20%,rgba(8,145,178,.2),transparent 58%),linear-gradient(180deg,#16131f,#0b0e14)}.tutorial-screen:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 0);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 48%,black 20%,transparent 78%);mask-image:radial-gradient(ellipse 70% 70% at 50% 48%,black 20%,transparent 78%)}.tutorial-play{position:absolute;top:50%;left:50%;z-index:1;width:3.25rem;height:3.25rem;border-radius:9999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);box-shadow:0 10px 28px rgba(0,0,0,.35);transform:translate(-50%,-50%)}.tutorial-play:after{content:"";position:absolute;top:50%;left:53%;width:0;height:0;border-color:transparent transparent transparent #f8f6ff;border-style:solid;border-width:.42rem 0 .42rem .7rem;transform:translate(-40%,-50%)}.tutorial-scan{position:absolute;inset-inline:0;height:34%;background:linear-gradient(180deg,transparent,rgba(34,211,238,.14),transparent);animation:tutorialScan 4.2s ease-in-out infinite}.tutorial-body{display:grid;justify-items:center;text-align:center;padding:1.75rem 1.35rem 1.7rem;gap:0}@media (min-width:768px){.tutorial-body{padding:2rem 2.35rem 2.15rem}}.tutorial-kicker{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0}.tutorial-pill{display:inline-flex;align-items:center;gap:.45rem;border-radius:9999px;border:1px solid rgba(14,116,144,.18);background:rgba(8,145,178,.06);padding:.32rem .7rem;font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#0e7490}.tutorial-kicker-dot{width:.4rem;height:.4rem;border-radius:9999px;background:linear-gradient(135deg,#7c5cfc,#22d3ee);box-shadow:0 0 0 3px rgba(124,92,252,.12);animation:tutorialPulse 2.4s ease-in-out infinite}.tutorial-title{display:flex;flex-direction:column;align-items:center;overflow:visible;margin:1.2rem 0 0}.tutorial-title-lead{font-family:var(--font-display);font-size:clamp(2.35rem,6vw,3.35rem);font-weight:600;letter-spacing:-.05em;line-height:1.05;color:var(--tutorial-ink)}.tutorial-title-accent{display:block;overflow:visible;padding:.12em .08em .18em;font-family:var(--font-editorial);font-style:italic;font-weight:400;font-size:clamp(3.25rem,9vw,4.75rem);letter-spacing:-.035em;line-height:1.2;background:linear-gradient(120deg,#6d4df5,#0891b2 52%,#7c5cfc);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.tutorial-rule{display:block;width:4.5rem;height:3px;margin:1.15rem auto 0;border-radius:9999px;background:linear-gradient(90deg,transparent,#6d4df5 18%,#22d3ee 82%,transparent)}.tutorial-lede{margin:1.05rem 0 0;max-width:32.5rem;font-size:.975rem;line-height:1.65;color:rgba(11,14,20,.64)}.tutorial-aside{margin:.7rem 0 0;max-width:28rem;font-size:.8125rem;line-height:1.5;color:rgba(11,14,20,.48)}.tutorial-links{display:grid;width:100%;gap:.6rem;margin-top:1.45rem}@media (min-width:640px){.tutorial-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}}.tutorial-links a{display:grid;place-items:center;min-height:2.65rem;border-radius:9999px;border:1px solid rgba(11,14,20,.1);background:#fff;padding:.55rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.2;color:var(--tutorial-ink);transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}.tutorial-links a:first-child{border-color:transparent;background:linear-gradient(135deg,#6d4df5,#5b3fd4);color:#fff;box-shadow:0 8px 20px rgba(91,63,212,.22)}.tutorial-links a:hover{transform:translateY(-1px)}.tutorial-links a:first-child:hover{box-shadow:0 10px 24px rgba(91,63,212,.28)}.tutorial-links a:not(:first-child):hover{border-color:rgba(109,77,245,.28)}@media (prefers-reduced-motion:reduce){.tutorial-bg-orb,.tutorial-kicker-dot,.tutorial-links a,.tutorial-scan{animation:none;transition:none}}}