.tutorial-page{--tutorial-bg:#201913;--tutorial-surface:#2b211b;--tutorial-surface-strong:#3b2e27;--tutorial-line:#87674f;--tutorial-ink:#edeade;--tutorial-muted:#bfb3a6;--tutorial-accent:#cc905c;--tutorial-accent-ink:#24170f;--tutorial-paper:#2b211b;--tutorial-paper-ink:#edeade;--tutorial-paper-muted:#bfb3a6;--tutorial-margin:clamp(1rem, 2.2vw, 2rem);--tutorial-content-padding:max(var(--tutorial-margin), calc((100% - 1120px) / 2));--tutorial-reading-padding:max(var(--tutorial-margin), calc((100% - 860px) / 2));--tutorial-gutter:clamp(.75rem, 1.4vw, 1.5rem);--tutorial-small:clamp(.8125rem, .79rem + .1vw, .875rem);--tutorial-body:clamp(1.0625rem, 1rem + .25vw, 1.1875rem);--tutorial-lead:clamp(1.25rem, 1.1rem + .7vw, 1.625rem);--tutorial-head:clamp(1.25rem, 3.3vw, 3rem);--tutorial-ease-out:cubic-bezier(.22, 1, .36, 1);--tutorial-ease-expo:cubic-bezier(.16, 1, .3, 1);--tutorial-ease-in-out:cubic-bezier(.76, 0, .24, 1);background:var(--tutorial-bg);color:var(--tutorial-ink);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Trebuchet MS,Arial Rounded MT Bold,PingFang SC,sans-serif;font-size:var(--tutorial-body);letter-spacing:-.01em;line-height:1.5}.tutorial-page *{box-sizing:border-box}.tutorial-page ::selection{background:var(--tutorial-accent);color:var(--tutorial-accent-ink)}.tutorial-page :where(a,button):focus-visible{outline:3px solid var(--tutorial-accent);outline-offset:4px}.tutorial-page>header{font-family:inherit;background:var(--tutorial-bg)!important;color:var(--tutorial-ink)!important}.tutorial-page>header :where(a,button),.tutorial-page>footer :where(a,p,h2,span){color:var(--tutorial-ink)!important}.tutorial-page .font-comic-display{font-family:inherit!important}.tutorial-page>header :where(nav,a,button){border-color:var(--tutorial-line)!important}.tutorial-page>header a[href=\/sign-up]{background:var(--tutorial-accent)!important;color:var(--tutorial-accent-ink)!important}.tutorial-page>footer{font-family:inherit;background:var(--tutorial-bg)!important;color:var(--tutorial-muted)!important}.tutorial-page>footer *{--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important}.tutorial-page>footer .comic-screentone{background:var(--tutorial-surface)!important;background-image:none!important}.tutorial-page>footer .comic-screentone>div{border-color:var(--tutorial-line)!important;background:var(--tutorial-surface-strong)!important;border-radius:0!important}.tutorial-page>footer [class*=bg-gradient]{background:#201913b8!important}.tutorial-page>footer a[href="/#create"]{border-color:var(--tutorial-accent)!important;background:var(--tutorial-accent)!important;color:var(--tutorial-accent-ink)!important;border-radius:999px!important}.tutorial-page>footer [class*=text-xs],.tutorial-page>footer [class*="text-[11px]"]{letter-spacing:normal!important;text-transform:none!important;font-size:.8125rem!important}.tutorial-page>footer [class~=space-y-2]{border-width:0!important}.tutorial-site-header{min-height:68px;padding-inline:var(--tutorial-margin);background:var(--tutorial-bg);justify-content:space-between;align-items:center;gap:1rem;display:flex}.tutorial-wordmark{min-height:44px;color:var(--tutorial-ink);align-items:center;gap:.65rem;font-size:1rem;font-weight:800;text-decoration:none;display:inline-flex}.tutorial-site-nav{font-size:var(--tutorial-small);align-items:center;gap:clamp(1rem,2vw,2rem);font-weight:600;display:flex}.tutorial-site-nav a{min-height:44px;color:var(--tutorial-ink);align-items:center;text-decoration:none;transition:color .18s,background-color .18s;display:inline-flex}.tutorial-site-nav .tutorial-header-action{background:var(--tutorial-accent);color:var(--tutorial-accent-ink);padding-inline:1.15rem}.tutorial-hero{background:var(--tutorial-bg)}.tutorial-hero-media{width:calc(100% - (var(--tutorial-margin) * 2));border:2px solid var(--tutorial-line);background:var(--tutorial-surface);border-radius:28px;max-width:1120px;height:48svh;min-height:340px;margin:clamp(1rem,2vw,1.5rem) auto 0;overflow:clip}.tutorial-hero-media figure{height:100%;margin:0;position:relative}.tutorial-hero-media video{object-fit:cover;object-position:50% 36%;width:100%;height:100%;display:block}.tutorial-hero-media button{right:var(--tutorial-margin);bottom:var(--tutorial-margin);background:var(--tutorial-accent);min-height:44px;color:var(--tutorial-accent-ink);font:inherit;font-size:var(--tutorial-small);cursor:pointer;transition:transform .14s var(--tutorial-ease-out), background-color .18s ease;border:0;border-radius:999px;align-items:center;gap:.55rem;padding:.7rem 1rem;font-weight:600;display:inline-flex;position:absolute}.tutorial-hero-media button:active,.tutorial-primary-action:active,.tutorial-header-action:active{transform:scale(.97)}.tutorial-hero-copy{column-gap:var(--tutorial-gutter);padding:clamp(2.5rem, 4vw, 4rem) var(--tutorial-content-padding) clamp(3.5rem, 6vw, 5rem);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.tutorial-back-link{width:fit-content;min-height:44px;color:var(--tutorial-muted);font-size:var(--tutorial-small);align-items:center;gap:.55rem;font-weight:600;text-decoration:none;display:inline-flex}.tutorial-hero h1{max-width:none;color:var(--tutorial-ink);letter-spacing:-.045em;text-wrap:balance;grid-column:1/-1;margin:0;font-size:clamp(2.75rem,3.8vw,3.5rem);font-weight:800;line-height:.98}.tutorial-hero-details{flex-direction:column;grid-column:1/9;gap:1.5rem;margin-top:clamp(1.5rem,2.5vw,2.5rem);display:flex}.tutorial-hero-details>p{max-width:60ch;color:var(--tutorial-muted);text-wrap:pretty;margin:0;font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.55}.tutorial-hero-meta{color:var(--tutorial-muted);font-size:var(--tutorial-small);font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;display:flex}.tutorial-primary-action{background:var(--tutorial-accent);width:min(100%,260px);min-height:56px;color:var(--tutorial-accent-ink);transition:transform .14s var(--tutorial-ease-out), background-color .18s ease;border-radius:999px;grid-column:10/13;justify-content:space-between;align-self:end;align-items:center;gap:1rem;margin-top:2rem;padding-inline:1.25rem;font-size:1rem;font-weight:800;text-decoration:none;display:inline-flex}.tutorial-chapter-index{background:var(--tutorial-surface-strong);color:var(--tutorial-ink);padding-inline:var(--tutorial-content-padding);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.tutorial-chapter-index a{min-height:72px;color:inherit;font-size:var(--tutorial-small);text-align:center;justify-content:center;align-items:center;padding:.75rem;font-weight:600;text-decoration:none;transition:background-color .18s,color .18s;display:flex}@media (hover:hover) and (pointer:fine){.tutorial-site-nav a:hover,.tutorial-back-link:hover{color:var(--tutorial-ink)}.tutorial-chapter-index a:hover{background:var(--tutorial-accent);color:var(--tutorial-accent-ink)}.tutorial-primary-action:hover,.tutorial-header-action:hover{background:#c14a5c}}.tutorial-copy{background:var(--tutorial-bg);color:var(--tutorial-paper-ink);padding:0}.tutorial-article-shell{background:var(--tutorial-bg);border:0;border-radius:0;max-width:none;margin:0;overflow:visible}.tutorial-copy .tutorial-intro{padding:clamp(4rem, 7vw, 6rem) var(--tutorial-content-padding);background:var(--tutorial-surface)}.tutorial-copy .tutorial-intro>p{max-width:76ch;color:var(--tutorial-paper-ink);letter-spacing:-.02em;text-wrap:pretty;margin:0;font-size:clamp(1.25rem,1.8vw,1.625rem);font-weight:700;line-height:1.45}.tutorial-copy .tutorial-chapter{column-gap:var(--tutorial-gutter);padding:clamp(4rem, 7vw, 6.5rem) var(--tutorial-content-padding);border-top:0;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:1.5rem;scroll-margin-top:1rem;display:grid}.tutorial-copy h2{max-width:30ch;color:inherit;letter-spacing:-.035em;text-wrap:balance;grid-column:1/-1;margin:0 0 2rem;padding:0;font-family:inherit;font-size:clamp(1.75rem,2.5vw,2.25rem);font-weight:800;line-height:1.08}.tutorial-copy p{max-width:68ch;color:inherit;font-size:var(--tutorial-body);text-wrap:pretty;margin:0;line-height:1.58}.tutorial-copy p+p{margin-top:1.5rem}.tutorial-copy strong{color:inherit;font-weight:800}.tutorial-copy a{color:inherit;text-underline-offset:.2em;font-weight:600;text-decoration-line:underline;text-decoration-thickness:.08em;transition:text-decoration-color .18s}.tutorial-chapter--workflow{background:var(--tutorial-bg);color:var(--tutorial-paper-ink)}.tutorial-chapter--workflow>p{max-width:none}.tutorial-chapter--workflow>p:first-of-type{grid-column:1/7}.tutorial-chapter--workflow>p:nth-of-type(2){grid-column:7/13;margin-top:0}.tutorial-scene-strip{background:var(--tutorial-bg);border-radius:0;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(2.5rem,5vw,4rem) 0 0;display:grid;overflow:clip}.tutorial-scene-strip img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.tutorial-chapter--photo{background:var(--tutorial-surface);color:var(--tutorial-paper-ink)}.tutorial-chapter--photo>p{grid-column:1/8;max-width:none}.tutorial-input-portrait{border:2px solid var(--tutorial-line);background:var(--tutorial-surface);border-radius:20px;grid-area:2/9/span 2/13;width:100%;margin:0;overflow:hidden}.tutorial-input-portrait img{aspect-ratio:4/5;object-fit:cover;width:100%;display:block}.tutorial-chapter--steps{background:var(--tutorial-bg);color:var(--tutorial-paper-ink)}.tutorial-chapter--steps>p,.tutorial-chapter--steps>ol{grid-column:1/8;max-width:none}.tutorial-chapter--steps>ol{background:var(--tutorial-surface-strong);color:var(--tutorial-paper-ink);margin:1.5rem 0 0;padding:1.5rem 1.5rem 1.5rem 3rem}.tutorial-chapter--steps li{color:inherit;line-height:1.55}.tutorial-chapter--steps li+li{margin-top:.75rem}.tutorial-step-frame{border:2px solid var(--tutorial-line);background:var(--tutorial-bg);border-radius:20px;grid-area:2/9/span 3/13;width:100%;margin:0;overflow:hidden}.tutorial-step-frame img{aspect-ratio:1;object-fit:cover;width:100%;display:block}.tutorial-chapter--compare{background:var(--tutorial-surface-strong);color:var(--tutorial-paper-ink)}.tutorial-chapter--compare>p:first-of-type{grid-column:1/7;max-width:none}.tutorial-chapter--compare>p:last-of-type{grid-column:7/13;max-width:none;margin-top:0}.tutorial-chapter--publish{background:var(--tutorial-bg);color:var(--tutorial-paper-ink)}.tutorial-chapter--publish>p{grid-column:1/8;max-width:none}.tutorial-publish-frame{border:2px solid var(--tutorial-line);background:var(--tutorial-surface);border-radius:20px;grid-area:2/9/span 2/13;width:100%;margin:0;overflow:hidden}.tutorial-publish-frame img{aspect-ratio:9/16;object-fit:cover;width:100%;display:block}.tutorial-chapter--faq{background:var(--tutorial-surface);color:var(--tutorial-paper-ink)}.tutorial-chapter--faq h2{max-width:68ch}.tutorial-chapter--faq h3{max-width:none;color:inherit;font-size:var(--tutorial-body);letter-spacing:-.02em;grid-column:1/5;margin:0;padding:0;font-weight:800;line-height:1.4}.tutorial-chapter--faq>p{grid-column:5/13;max-width:none;margin-top:0;margin-bottom:0}.tutorial-close{min-height:88svh;padding:clamp(4rem, 8vw, 8rem) var(--tutorial-content-padding) var(--tutorial-margin);background:var(--tutorial-paper);color:var(--tutorial-paper-ink);flex-direction:column;justify-content:space-between;display:flex}.tutorial-close h2{letter-spacing:-.055em;text-wrap:balance;max-width:11ch;margin:0;font-size:clamp(3.25rem,9vw,8rem);font-weight:800;line-height:.88}.tutorial-close-row{align-items:end;gap:var(--tutorial-gutter);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.tutorial-close-row p{max-width:40ch;font-size:var(--tutorial-lead);grid-column:1/6;margin:0;line-height:1.4}.tutorial-close-row .tutorial-primary-action{grid-column:10/13}.tutorial-footer{padding:clamp(4rem, 8vw, 8rem) var(--tutorial-margin) var(--tutorial-margin);background:var(--tutorial-bg);color:var(--tutorial-ink);overflow:clip}.tutorial-footer-name{letter-spacing:-.055em;white-space:nowrap;width:max-content;margin:0;font-size:clamp(3rem,10vw,9rem);font-weight:800;line-height:.86}.tutorial-footer-links{gap:var(--tutorial-gutter);grid-template-columns:5fr 7fr;margin-top:clamp(4rem,8vw,8rem);display:grid}.tutorial-footer-links nav{flex-wrap:wrap;align-content:start;gap:1rem 2rem;display:flex}.tutorial-footer-links a,.tutorial-footer-legal a{min-height:44px;color:inherit;font-size:var(--tutorial-small);align-items:center;font-weight:600;text-decoration:none;display:inline-flex}.tutorial-footer-legal{gap:var(--tutorial-gutter);color:var(--tutorial-muted);font-size:var(--tutorial-small);grid-template-columns:4fr 4fr 4fr;align-items:end;margin-top:clamp(4rem,8vw,8rem);display:grid}.tutorial-footer-legal p{max-width:42ch;margin:0}.tutorial-footer-legal a{color:var(--tutorial-ink);justify-self:end}@media (prefers-reduced-motion:no-preference){.tutorial-hero-media{animation:tutorial-hero-open 1.2s var(--tutorial-ease-in-out) both}.tutorial-hero h1{animation:tutorial-title-rise .9s var(--tutorial-ease-expo) .12s both}.tutorial-hero-details,.tutorial-hero-meta,.tutorial-hero-copy>.tutorial-primary-action{animation:tutorial-copy-rise .7s var(--tutorial-ease-out) both}.tutorial-hero-details{animation-delay:.3s}.tutorial-hero-meta{animation-delay:.36s}.tutorial-hero-copy>.tutorial-primary-action{animation-delay:.42s}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.tutorial-chapter h2{animation:linear both tutorial-chapter-title;animation-timeline:view();animation-range:entry cover 28%}.tutorial-scene-strip img:nth-child(odd),.tutorial-input-portrait,.tutorial-step-frame,.tutorial-publish-frame{animation:linear both tutorial-media-rise;animation-timeline:view();animation-range:entry cover 35%}.tutorial-scene-strip img:nth-child(2n){animation:linear both tutorial-media-settle;animation-timeline:view();animation-range:entry cover 35%}}}@keyframes tutorial-hero-open{0%{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}@keyframes tutorial-title-rise{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes tutorial-copy-rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes tutorial-chapter-title{0%{opacity:.55;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes tutorial-media-rise{0%{transform:translateY(7%)}to{transform:none}}@keyframes tutorial-media-settle{0%{transform:translateY(-7%)}to{transform:none}}@media (width<=767px){.tutorial-site-header{min-height:60px}.tutorial-wordmark span,.tutorial-site-nav>a:not(.tutorial-header-action){display:none}.tutorial-site-nav .tutorial-header-action{padding-inline:.9rem}.tutorial-hero-media{border-width:2px;border-radius:18px;height:38svh;min-height:300px}.tutorial-hero-copy{flex-direction:column;gap:1.25rem;padding-block:2rem 3rem;display:flex}.tutorial-hero h1{letter-spacing:-.055em;font-size:1.375rem;line-height:1}.tutorial-hero-details>p{font-size:1rem;line-height:1.5}.tutorial-hero-details{gap:1.25rem}.tutorial-hero-meta{flex-wrap:wrap;gap:.5rem 1.25rem}.tutorial-primary-action{width:100%}.tutorial-chapter-index{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-chapter-index a{min-height:56px;padding-inline:var(--tutorial-margin);text-align:left;justify-content:flex-start}.tutorial-copy .tutorial-intro{padding-block:3.5rem}.tutorial-copy .tutorial-intro>p{max-width:100%;margin-left:0;font-size:1.25rem;line-height:1.5}.tutorial-copy .tutorial-chapter{padding-block:4rem;display:block}.tutorial-copy h2{max-width:100%;margin-bottom:2rem;font-size:1.25rem;line-height:1.08}.tutorial-copy p{max-width:100%}.tutorial-copy p+p{margin-top:1.25rem}.tutorial-scene-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:3rem}.tutorial-input-portrait,.tutorial-step-frame,.tutorial-publish-frame{width:100%;margin-top:2.5rem}.tutorial-input-portrait{margin-left:0}.tutorial-step-frame{width:100%}.tutorial-publish-frame{margin-inline:0}.tutorial-chapter--steps>ol{margin-top:1.5rem}.tutorial-chapter--faq h3{margin-top:2rem;font-size:1rem}.tutorial-chapter--faq>p{margin-top:.6rem;margin-bottom:0}.tutorial-close{min-height:80svh;padding-block:4rem var(--tutorial-margin)}.tutorial-close h2{font-size:14vw}.tutorial-close-row{display:block}.tutorial-close-row p{margin-bottom:1.5rem;font-size:1rem}.tutorial-footer-name{font-size:12.2vw}.tutorial-footer-links,.tutorial-footer-legal{grid-template-columns:1fr}.tutorial-footer-links{margin-top:4rem}.tutorial-footer-links nav{gap:.5rem 1.25rem}.tutorial-footer-legal{margin-top:4rem}.tutorial-footer-legal a{justify-self:start}}@media (prefers-reduced-motion:reduce){.tutorial-page *,.tutorial-page :before,.tutorial-page :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
