.tut-page{background:hsl(var(--background));min-height:100vh;color:hsl(var(--foreground));-webkit-font-smoothing:antialiased}.tut-banner{background:hsl(var(--primary));border-bottom:2.5px solid hsl(var(--primary-foreground)/.15);padding:56px 0 44px;position:relative;overflow:hidden}.tut-banner:before{content:"";pointer-events:none;background-image:radial-gradient(hsl(var(--primary-foreground)/.06)1px,transparent 1px);background-size:22px 22px;position:absolute;top:0;bottom:0;left:0;right:0}.tut-banner-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;display:flex;position:relative}.tut-breadcrumb{letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--primary-foreground)/.65);align-items:center;gap:7px;font-size:.8rem;font-weight:700;text-decoration:none;display:inline-flex}.tut-breadcrumb a{color:hsl(var(--primary-foreground)/.65);text-decoration:none}.tut-breadcrumb a:hover{color:hsl(var(--primary-foreground))}.tut-breadcrumb-sep{opacity:.4}.tut-banner h1{font-family:var(--font-display,Georgia,serif);letter-spacing:-.025em;color:hsl(var(--primary-foreground));max-width:24ch;margin:0 0 14px;font-size:max(1.9rem,min(4.5vw,3rem));font-weight:700;line-height:1.08;position:relative}.tut-banner-desc{color:hsl(var(--primary-foreground)/.72);max-width:54ch;margin:0 0 22px;font-size:1.05rem;line-height:1.65;position:relative}.tut-banner-meta{flex-wrap:wrap;align-items:center;gap:10px;display:flex;position:relative}.tut-meta-chip{background:hsl(var(--primary-foreground)/.12);border:1.5px solid hsl(var(--primary-foreground)/.22);color:hsl(var(--primary-foreground));border-radius:999px;align-items:center;gap:5px;padding:.22rem .7rem;font-size:.79rem;font-weight:700;display:inline-flex}.copy-md-btn{letter-spacing:.06em;text-transform:uppercase;background:hsl(var(--primary-foreground)/.1);border:1.5px solid hsl(var(--primary-foreground)/.28);color:hsl(var(--primary-foreground));cursor:pointer;border-radius:9px;align-items:center;gap:6px;padding:.45rem .9rem;font-family:inherit;font-size:.77rem;font-weight:800;line-height:1;transition:background .12s,transform .1s;display:inline-flex}.copy-md-btn:hover{background:hsl(var(--primary-foreground)/.18);transform:translateY(-1px)}.copy-md-btn.copied{background:hsl(var(--primary-foreground)/.22)}.tut-layout{grid-template-columns:1fr 256px;align-items:start;gap:48px;padding-top:56px;padding-bottom:96px;display:grid}@media (max-width:1080px){.tut-layout{grid-template-columns:1fr}.tut-toc-col{display:none}}.tut-content{min-width:0;max-width:700px}.tut-content h2{font-family:var(--font-display,Georgia,serif);color:hsl(var(--foreground));letter-spacing:-.015em;align-items:center;gap:10px;margin:3rem 0 .85rem;scroll-margin-top:96px;font-size:1.55rem;font-weight:700;display:flex}.tut-content h2:first-child{margin-top:0}.tut-content h3{font-family:var(--font-display,Georgia,serif);color:hsl(var(--foreground));margin:2.2rem 0 .65rem;scroll-margin-top:96px;font-size:1.18rem;font-weight:700}.tut-content p{color:hsl(var(--muted-foreground));margin:0 0 1.1rem;font-size:1rem;line-height:1.8}.tut-content ul,.tut-content ol{margin:0 0 1.2rem;padding-left:1.5rem}.tut-content li{color:hsl(var(--muted-foreground));margin-bottom:.45rem;font-size:1rem;line-height:1.75}.tut-content strong{color:hsl(var(--foreground));font-weight:700}.tut-content a{color:hsl(var(--foreground));text-decoration:underline;-webkit-text-decoration-color:hsl(var(--primary));text-decoration-color:hsl(var(--primary));text-underline-offset:3px;text-decoration-thickness:2px}.tut-content a:hover{-webkit-text-decoration-color:hsl(var(--coral));text-decoration-color:hsl(var(--coral))}.tut-content :not(pre)>code{background:hsl(var(--muted));border:1.5px solid hsl(var(--border));color:hsl(var(--foreground));border-radius:5px;padding:.1em .38em;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.87em}.tut-section-divider{border:none;border-top:1.5px solid hsl(var(--border));opacity:.45;margin:2.8rem 0}.tut-step-badge{background:hsl(var(--foreground));width:26px;height:26px;color:hsl(var(--background));font-size:.8rem;font-weight:800;font-family:var(--font-display,Georgia,serif);border:2px solid hsl(var(--background));outline:2px solid hsl(var(--foreground));border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.tut-code-wrap{border:2px solid hsl(var(--border));box-shadow:4px 4px 0 hsl(var(--border));border-radius:14px;margin:1.5rem 0;position:relative;overflow:hidden}.tut-code-header{background:#2a2a40;border-bottom:1px solid rgba(255,255,255,.07);justify-content:space-between;align-items:center;padding:9px 14px;display:flex}.tut-code-dots{gap:5px;margin-right:8px;display:flex}.tut-code-dots span{border:1px solid rgba(0,0,0,.25);border-radius:50%;width:10px;height:10px;display:block}.tut-code-dots .rd{background:#ff6b6b}.tut-code-dots .yl{background:#ffc93c}.tut-code-dots .gn{background:#8fbf9f}.tut-code-fname{color:#9aa0c0;flex:1;align-items:center;gap:7px;min-width:0;font-family:SFMono-Regular,Consolas,monospace;font-size:.77rem;display:flex}.tut-copy-code-btn{color:#9aa0c0;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid rgba(255,255,255,.14);border-radius:6px;flex-shrink:0;align-items:center;gap:5px;padding:.25rem .62rem;font-family:inherit;font-size:.72rem;font-weight:700;line-height:1;transition:background .1s,color .1s;display:inline-flex}.tut-copy-code-btn:hover{color:#e6e6f0;background:rgba(255,255,255,.08)}.tut-copy-code-btn.copied{color:#8fbf9f;border-color:rgba(143,191,159,.35)}.tut-code-pre{color:#e6e6f0;background:#1c1c2e;margin:0;padding:20px 22px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.91rem;line-height:1.82;overflow-x:auto}.tut-callout{color:hsl(var(--foreground));border-left:3.5px solid;border-radius:12px;align-items:flex-start;gap:13px;margin:1.6rem 0;padding:14px 18px;font-size:.97rem;line-height:1.65;display:flex}.tut-callout p{color:hsl(var(--foreground));margin:0;font-size:.97rem}.tut-callout-icon{flex-shrink:0;margin-top:2px;font-size:1.1rem}.tut-callout-tip{background:hsl(var(--sage)/.12);border-color:hsl(var(--sage))}.tut-callout-info{background:hsl(var(--sky)/.1);border-color:hsl(var(--sky))}.tut-callout-warn{background:hsl(var(--coral)/.1);border-color:hsl(var(--coral))}.tut-screenshot{border:2px solid hsl(var(--border));box-shadow:4px 4px 0 hsl(var(--border));border-radius:12px;margin:1.6rem 0;overflow:hidden}.tut-screenshot-img{cursor:zoom-in;width:100%;height:auto;transition:opacity .12s;display:block}.tut-screenshot-img:hover{opacity:.92}.tut-lb-trigger,.tut-lb-trigger>div{line-height:0;display:block!important}.tut-screenshot-cap{background:hsl(var(--muted));border-top:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));padding:7px 14px;font-size:.79rem;font-style:italic}.tut-toc-col{align-self:flex-start;position:-webkit-sticky;position:sticky;top:88px}.toc-box{background:hsl(var(--card));border:2px solid hsl(var(--border));box-shadow:3px 3px 0 hsl(var(--border));border-radius:16px;padding:18px 16px 16px}.toc-heading{letter-spacing:.07em;text-transform:uppercase;color:hsl(var(--muted-foreground));border-bottom:1.5px solid hsl(var(--border));align-items:center;gap:7px;margin-bottom:12px;padding-bottom:10px;font-size:.76rem;font-weight:800;display:flex}.toc-list{gap:1px;margin:0;padding:0;list-style:none;display:grid}.toc-link{color:hsl(var(--muted-foreground));border-left:2.5px solid transparent;border-radius:7px;padding:5px 8px;font-size:.855rem;font-weight:500;line-height:1.38;text-decoration:none;transition:background .1s,color .1s;display:block;position:relative}.toc-link:hover{color:hsl(var(--foreground));background:hsl(var(--accent))}.toc-link-active{border-left-color:hsl(var(--primary-foreground)/.5);font-weight:700;color:hsl(var(--primary-foreground))!important;background:hsl(var(--primary))!important}.toc-link-sub{padding-left:20px;font-size:.815rem}.tut-cta-block{background:hsl(var(--foreground));border:2.5px solid hsl(var(--foreground));color:hsl(var(--background));box-shadow:6px 6px 0 hsl(var(--primary));border-radius:20px;margin:3.5rem 0 0;padding:38px 36px;position:relative;overflow:hidden}.tut-cta-block:before{content:"";pointer-events:none;background:radial-gradient(ellipse 70% 80% at 90% 50%,hsl(var(--primary)/.14),transparent);position:absolute;top:0;bottom:0;left:0;right:0}.tut-cta-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--primary));margin-bottom:10px;font-size:.74rem;font-weight:800;display:block;position:relative}.tut-cta-block h3{font-family:var(--font-display,Georgia,serif);color:hsl(var(--background));max-width:26ch;margin:0 0 14px;font-size:max(1.45rem,min(3vw,1.95rem));font-weight:700;line-height:1.12;position:relative}.tut-cta-block p{color:hsl(var(--background)/.68);max-width:48ch;margin:0 0 26px;font-size:1rem;line-height:1.68;position:relative}.tut-cta-perks{gap:8px;margin:0 0 26px;padding:0;list-style:none;display:grid;position:relative}.tut-cta-perks li{color:hsl(var(--background)/.78);align-items:flex-start;gap:10px;margin:0;font-size:.9rem;line-height:1.45;display:flex}.tut-cta-perks li:before{content:"";background:hsl(var(--primary));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322223B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13L10 18L19 6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:9px;border-radius:50%;flex-shrink:0;width:15px;height:15px;margin-top:2px;display:block}.tut-cta-btn{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border:2.5px solid hsl(var(--primary));cursor:pointer;border-radius:12px;align-items:center;gap:7px;padding:.88rem 1.6rem;font-size:.97rem;font-weight:800;line-height:1;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex;position:relative;box-shadow:3px 3px rgba(255,255,255,.15)}.tut-cta-btn:hover{color:hsl(var(--primary-foreground));text-decoration:none;transform:translate(-2px,-2px);box-shadow:5px 5px rgba(255,255,255,.2)}.tut-cta-note{color:hsl(var(--background)/.42);margin-top:12px;font-size:.77rem;position:relative}