:root{--bg:#f5f6fa;--surface:#fff;--surface-2:#eef0f7;--ink:#151a26;--ink-soft:#3c4457;--muted:#626c80;--line:#e3e6ef;--brand:#4f46e5;--brand-dark:#4338ca;--brand-soft:#eceefc;--accent:#0ea5e9;--ok:#15803d;--ok-bg:#e9f7ee;--err:#b91c1c;--err-bg:#fdecec;--warn:#92400e;--warn-bg:#fdf3e3;--radius:12px;--radius-sm:8px;--shadow-sm:0 1px 2px #0f172a0f, 0 1px 3px #0f172a14;--shadow-md:0 4px 14px #0f172a14;--shadow-lg:0 12px 32px #0f172a24;--wrap:1120px;--header-h:60px}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:16px;line-height:1.6}img,canvas,svg{max-width:100%;height:auto}h1,h2,h3,h4{color:var(--ink);letter-spacing:-.015em;text-wrap:balance;margin:0 0 .5em;font-weight:700;line-height:1.2}h1{font-size:clamp(1.75rem,4.5vw,2.6rem)}h2{margin-top:2rem;font-size:clamp(1.35rem,3vw,1.8rem)}h3{font-size:1.15rem}p{color:var(--ink-soft);margin:0 0 1em}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}main :where(p,li,.callout) a:not(.btn){text-underline-offset:.16em;text-decoration:underline}ul,ol{color:var(--ink-soft);padding-left:1.4em}li{margin-bottom:.4em}code{background:var(--surface-2);border-radius:4px;padding:.1em .35em;font-size:.9em}.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}.skip-link{z-index:100;background:var(--ink);color:#fff;border-radius:0 0 var(--radius-sm) 0;padding:10px 16px;position:absolute;top:0;left:-9999px}.skip-link:focus{left:0}:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}.btn{border-radius:var(--radius-sm);font:inherit;cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background-color .15s,border-color .15s,transform 50ms;display:inline-flex}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--brand);color:#fff}.btn--primary:hover{background:var(--brand-dark);text-decoration:none}.btn--ghost{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}.btn--ghost:hover{background:var(--surface-2);border-color:#c6ccdd;text-decoration:none}.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.site-header{z-index:50;backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#ffffffe6;position:sticky;top:0}.site-header__inner{height:var(--header-h);align-items:center;gap:16px;display:flex}.brand{color:var(--ink);letter-spacing:-.01em;align-items:center;gap:9px;font-size:1.05rem;font-weight:700;display:inline-flex}.brand:hover{text-decoration:none}.brand img{width:28px;height:28px}.brand{white-space:nowrap;flex-shrink:0}.brand__text span{color:var(--brand)}.site-nav{margin-left:auto}.site-nav ul{align-items:center;gap:4px;margin:0;padding:0;list-style:none;display:flex}.site-nav a{white-space:nowrap;border-radius:var(--radius-sm);color:var(--ink-soft);padding:8px 12px;font-size:.92rem;font-weight:500;display:block}.site-nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}.site-nav a[aria-current=page]{color:var(--brand);font-weight:600}@media (width<=640px){.site-nav a{padding:8px 10px;font-size:.9rem}}@media (width<=420px){.wrap{padding-inline:16px}.site-nav .hide-mobile{display:none}.brand{font-size:1rem}}.hero{text-align:center;padding-block:40px 24px}.hero h1{max-width:720px;margin-inline:auto}.hero p{max-width:620px;color:var(--muted);margin-inline:auto;font-size:1.05rem}.hero__badges{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;padding:0;list-style:none;display:flex}.hero__badges li{color:var(--brand-dark);background:var(--brand-soft);border-radius:999px;margin:0;padding:4px 12px;font-size:.8rem;font-weight:600}.section{padding-block:32px}.section--tight{padding-block:20px}.section__head{max-width:680px;margin-bottom:20px}.section__head.center{text-align:center;margin-inline:auto}.tool{scroll-margin-top:calc(var(--header-h) + 12px)}.tool-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px;display:grid}@media (width>=920px){.tool-grid{grid-template-columns:minmax(0,1fr) 360px}}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.card--pad{padding:20px}.dropzone{width:100%;font:inherit;text-align:center;border-radius:var(--radius);background:var(--surface);cursor:pointer;border:2px dashed #c9cfe0;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:40px 20px;transition:border-color .15s,background-color .15s;display:flex}.dropzone:hover,.dropzone:focus-visible,.dropzone.is-dragover{border-color:var(--brand);background:var(--brand-soft)}.dropzone__icon{color:var(--brand)}.dropzone__title{color:var(--ink);margin:0;font-weight:700}.dropzone__hint{color:var(--muted);margin:0;font-size:.85rem}.thumbbar{justify-content:space-between;align-items:center;gap:12px;margin:16px 0 10px;display:flex}.thumbbar__count{color:var(--ink-soft);font-size:.9rem;font-weight:600}.thumbs{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.thumb{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:grab;position:relative;overflow:hidden}.thumb.is-dragging{opacity:.45}.thumb.is-drop-target{outline:2px solid var(--brand);outline-offset:-2px}.thumb__img{aspect-ratio:1;object-fit:cover;background:repeating-conic-gradient(#e8eaf2 0% 25%,#fff 0% 50%) 0 0/16px 16px;width:100%;display:block}.thumb__meta{color:var(--muted);padding:6px 8px;font-size:.7rem;line-height:1.35;overflow:hidden}.thumb__name{color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis;font-weight:600;display:block;overflow:hidden}.thumb__actions{opacity:0;gap:4px;transition:opacity .15s;display:flex;position:absolute;top:4px;right:4px}.thumb:hover .thumb__actions,.thumb:focus-within .thumb__actions{opacity:1}.icon-btn{color:#fff;cursor:pointer;background:#151a26bf;border:none;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;padding:0;display:inline-flex}.icon-btn:hover{background:#151a26eb}.icon-btn svg{width:14px;height:14px}.icon-btn[disabled]{opacity:.4;cursor:default}.settings{gap:14px;display:grid}.field{gap:6px;display:grid}.field--inline{grid-template-columns:1fr auto;align-items:center}.field__label{color:var(--ink-soft);font-size:.85rem;font-weight:600}.field__value{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8rem}.seg{background:var(--surface-2);border-radius:var(--radius-sm);grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;display:grid;position:relative}.seg input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute;top:0;left:0}.seg label{text-align:center;color:var(--muted);cursor:pointer;white-space:nowrap;border-radius:6px;padding:7px 2px;font-size:.78rem;font-weight:600}@media (width<=400px){.card--pad{padding:16px}.seg{grid-template-columns:repeat(3,1fr)}}.seg input:checked+label{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-sm)}.seg input:focus-visible+label{outline:2px solid var(--brand);outline-offset:1px}input[type=range]{width:100%;accent-color:var(--brand);margin:0}select,input[type=color]{font:inherit;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);padding:8px 10px}input[type=color]{cursor:pointer;width:46px;height:34px;padding:2px}.check{color:var(--ink-soft);cursor:pointer;align-items:center;gap:8px;font-size:.85rem;display:flex}.check input{accent-color:var(--brand);width:16px;height:16px}.fieldset-disabled{opacity:.45;pointer-events:none}.settings__actions{gap:8px;display:flex}.settings__actions .btn{flex:1}.preview{margin-top:20px}.preview__stage{border:1px dashed var(--line);border-radius:var(--radius);background:repeating-conic-gradient(#eceef5 0% 25%,#f7f8fb 0% 50%) 0 0/20px 20px;justify-content:center;align-items:center;min-height:220px;padding:12px;display:flex;overflow:hidden}.preview__stage canvas{max-width:100%;max-height:70vh;box-shadow:var(--shadow-md);border-radius:6px}.preview__empty{text-align:center;color:var(--muted);padding:24px;font-size:.9rem}.preview__meta{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;margin-top:10px;font-size:.82rem;display:flex}.freeform{margin-top:20px}.freeform__stage{border:1px dashed var(--line);border-radius:var(--radius);touch-action:none;background:repeating-conic-gradient(#eceef5 0% 25%,#f7f8fb 0% 50%) 0 0/20px 20px;width:100%;position:relative;overflow:hidden}.ff-tile{cursor:grab;-webkit-user-select:none;user-select:none;border-radius:4px;position:absolute}.ff-tile:active{cursor:grabbing}.ff-tile.is-active{outline:2px solid var(--brand);outline-offset:1px}.ff-tile img{pointer-events:none;border-radius:4px;width:100%;height:auto;display:block;box-shadow:0 2px 8px #0f172a2e}.ff-tile__handle{background:var(--brand);cursor:nwse-resize;width:18px;height:18px;box-shadow:var(--shadow-sm);border:2px solid #fff;border-radius:50%;padding:0;position:absolute;bottom:-7px;right:-7px}.ff-tile:focus-visible{outline:2px solid var(--brand);outline-offset:1px}.toasts{z-index:100;pointer-events:none;gap:8px;width:min(460px,100vw - 32px);display:grid;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.toast{border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);background:var(--ink);color:#fff;pointer-events:auto;align-items:flex-start;gap:10px;padding:12px 14px;font-size:.88rem;font-weight:500;animation:.18s ease-out toast-in;display:flex}.toast--error{background:var(--err)}.toast--success{background:var(--ok)}.toast.is-leaving{opacity:0;transition:opacity .25s}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.toast{animation:none}*{transition-duration:.01ms!important}}.ad-slot{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.ad-slot__label{letter-spacing:.08em;text-transform:uppercase;color:#9aa3b5;font-size:.68rem}.steps{counter-reset:step;grid-template-columns:1fr;gap:14px;margin:0;padding:0;list-style:none;display:grid}@media (width>=720px){.steps{grid-template-columns:repeat(3,1fr)}}.step{counter-increment:step;padding:20px;position:relative}.step:before{content:counter(step);background:var(--brand);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:10px;font-size:.9rem;font-weight:700;display:inline-flex}.step h3{margin-bottom:4px}.step p{margin:0;font-size:.92rem}.faq-list details{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin-bottom:10px;padding:0}.faq-list summary{cursor:pointer;color:var(--ink);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-weight:600;list-style:none;display:flex}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";color:var(--muted);flex-shrink:0;font-size:1.2rem}.faq-list details[open] summary:after{content:"–"}.faq-list details p{margin:0;padding:0 16px 14px;font-size:.95rem}.related{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;display:grid}.related a{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);padding:16px 18px;font-size:.95rem;font-weight:600;text-decoration:none;transition:border-color .15s,box-shadow .15s;display:block}.related a:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}.related a span{color:var(--muted);margin-top:4px;font-size:.83rem;font-weight:400;display:block}.prose{max-width:760px}.prose h2{margin-top:1.8em}.prose img{border-radius:var(--radius)}.article-meta{color:var(--muted);font-size:.85rem}.use-cases{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;display:grid}.use-cases p{margin-bottom:0}.table-scroll{max-width:100%;margin-block:20px;overflow-x:auto}.table-scroll table{border-collapse:collapse;background:var(--surface);width:100%;font-size:.92rem}.table-scroll caption{text-align:left;color:var(--muted);padding-bottom:10px}.table-scroll th,.table-scroll td{border:1px solid var(--line);text-align:left;vertical-align:top;padding:12px}.table-scroll thead{background:var(--surface-2)}[id]{scroll-margin-top:calc(var(--header-h) + 16px)}.callout{border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink-soft);background:#eff8fd;padding:12px 16px;font-size:.93rem}.content-rail{grid-template-columns:minmax(0,1fr);align-items:start;gap:28px;display:grid}@media (width>=980px){.content-rail{grid-template-columns:minmax(0,1fr) 300px}.content-rail__aside{top:calc(var(--header-h) + 16px);gap:16px;display:grid;position:sticky}}.crumbs{color:var(--muted);margin-bottom:14px;font-size:.82rem}.crumbs ol{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.crumbs li{align-items:center;gap:6px;margin:0;display:flex}.crumbs li+li:before{content:"/";color:#b7bdd0}.crumbs a{color:var(--muted)}.site-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:48px;padding:36px 0 28px}.site-footer__grid{grid-template-columns:1fr;gap:24px;display:grid}@media (width>=720px){.site-footer__grid{grid-template-columns:2fr 1fr 1fr 1fr}}.site-footer h2{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 10px;font-size:.8rem}.site-footer ul{gap:6px;margin:0;padding:0;list-style:none;display:grid}.site-footer li{margin:0}.site-footer a{color:var(--ink-soft);font-size:.92rem}.site-footer__note{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:28px;padding-top:18px;font-size:.82rem;display:flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.mt-0{margin-top:0}.center{text-align:center}