@font-face{font-family:Space Grotesk Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/space-grotesk-vietnamese-wght-normal-D0rl6rjA.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Grotesk Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/space-grotesk-latin-ext-wght-normal-D9tNdqV9.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Grotesk Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/space-grotesk-latin-wght-normal-BhU9QXUp.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/space-mono-vietnamese-400-normal-BNOj0Qhp.woff2)format("woff2"),url(/assets/space-mono-vietnamese-400-normal-B0PMp_xB.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/space-mono-latin-ext-400-normal-DTLbW2xa.woff2)format("woff2"),url(/assets/space-mono-latin-ext-400-normal-D4cJI_B-.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/space-mono-latin-400-normal-Rg4St2Dn.woff2)format("woff2"),url(/assets/space-mono-latin-400-normal-_3DlpgIW.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/space-mono-vietnamese-700-normal-DWQgDHuA.woff2)format("woff2"),url(/assets/space-mono-vietnamese-700-normal-D-KrLuLr.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/space-mono-latin-ext-700-normal-B2s3bDs2.woff2)format("woff2"),url(/assets/space-mono-latin-ext-700-normal-B_E7P90g.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/space-mono-latin-700-normal-mWgeinG7.woff2)format("woff2"),url(/assets/space-mono-latin-700-normal-D7A851RN.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper:#fff;--grid-line:#1111110f;--ink:#111;--ink-soft:#333;--muted:#5c5c5c;--surface:#fff;--surface-sunk:#f4f4f0;--line:#111;--line-soft:#d4d4ce;--shadow:#111;--cobalt:#2346ff;--cobalt-deep:#1530d6;--lemon:#ffe14a;--lemon-soft:#fff4b8;--accent:#2346ff;--accent-ink:#fff;--link:#1d3be6;--focus:#2346ff;--btn-primary-bg:#2346ff;--btn-primary-ink:#fff;--hl:#ffe14a;--hl-ink:#111;--ok:#9df0b3;--warn:#ffe14a;--bad:#ff9191;--chip-ink:#111;--footer-bg:#111;--footer-ink:#f4f4ef;--footer-muted:#b8b8b0;--footer-head:#ffe14a;--check-a:#ececea;--check-b:#fff;--r:6px;--r-sm:4px;--off:6px;--off-sm:4px;--font:"Space Grotesk Variable", "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#0e0e10;--grid-line:#ffffff0e;--ink:#f4f4ef;--ink-soft:#dcdcd4;--muted:#a9a9a1;--surface:#17171b;--surface-sunk:#202026;--line:#ecece6;--line-soft:#3a3a42;--shadow:#ffe14a;--accent:#ffe14a;--accent-ink:#111;--link:#ffe14a;--focus:#ffe14a;--btn-primary-bg:#ffe14a;--btn-primary-ink:#111;--hl:#2346ff;--hl-ink:#fff;--footer-bg:#050506;--footer-ink:#f4f4ef;--footer-muted:#a9a9a1;--check-a:#2a2a30;--check-b:#1c1c21;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--paper:#0e0e10;--grid-line:#ffffff0e;--ink:#f4f4ef;--ink-soft:#dcdcd4;--muted:#a9a9a1;--surface:#17171b;--surface-sunk:#202026;--line:#ecece6;--line-soft:#3a3a42;--shadow:#ffe14a;--accent:#ffe14a;--accent-ink:#111;--link:#ffe14a;--focus:#ffe14a;--btn-primary-bg:#ffe14a;--btn-primary-ink:#111;--hl:#2346ff;--hl-ink:#fff;--footer-bg:#050506;--footer-ink:#f4f4ef;--footer-muted:#a9a9a1;--check-a:#2a2a30;--check-b:#1c1c21;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}body{background-color:var(--paper);background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);min-height:100vh;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;background-position:-1px -1px;background-size:24px 24px;flex-direction:column;margin:0;font-size:1rem;line-height:1.55;display:flex}main{flex:1;padding-bottom:56px}h1,h2,h3{letter-spacing:-.02em;margin:0 0 .5em;font-weight:700;line-height:1.1}h1{letter-spacing:-.035em;font-size:clamp(2rem,1.3rem + 3vw,3.3rem);line-height:1.02}h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem)}h3{font-size:1.15rem}p{margin:0 0 1em}a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:2px}a:hover{-webkit-text-decoration-color:var(--lemon);text-decoration-color:var(--lemon)}:root[data-theme=dark] a:hover{-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink)}code,kbd,pre,samp{font-family:var(--mono);font-size:.88em}code{background:var(--surface-sunk);border:1px solid var(--line-soft);overflow-wrap:anywhere;border-radius:3px;padding:.05em .3em}img,svg{max-width:100%}.icon{vertical-align:-.2em;flex:none;width:1.15em;height:1.15em}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 16px}@media (width>=720px){.wrap{padding:0 28px}}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.skip-link{z-index:100;background:var(--lemon);color:#111;border:2px solid #111;padding:8px 14px;font-weight:700;text-decoration:none;position:absolute;top:-60px;left:12px;box-shadow:4px 4px #111}.skip-link:focus{top:12px}.hl{background:var(--hl);color:var(--hl-ink);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:2px;padding:0 .12em}.kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);align-items:center;gap:10px;margin:0 0 14px;font-size:.78rem;display:inline-flex}.kicker__tag{background:var(--ink);color:var(--paper);border-radius:2px;padding:2px 8px;font-weight:700}.lead{color:var(--ink-soft);max-width:62ch;font-size:1.12rem}.site-header{background:var(--paper);border-bottom:2px solid var(--line);z-index:20;position:relative}.site-header .wrap{align-items:center;gap:18px;min-height:66px;display:flex}.brand{color:var(--ink);letter-spacing:-.03em;white-space:nowrap;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;text-decoration:none;display:inline-flex}.brand:hover{text-decoration:none}.brand__mark{flex:none;width:36px;height:36px}.brand__tld{font-family:var(--mono);color:var(--muted);letter-spacing:0;font-size:.8em;font-weight:400}.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,.nav-more summary{border-radius:var(--r-sm);min-height:40px;color:var(--ink);cursor:pointer;white-space:nowrap;border:2px solid #0000;align-items:center;gap:6px;padding:6px 12px;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.site-nav a:hover,.nav-more summary:hover{border-color:var(--line)}.site-nav a[aria-current=page],.nav-more.has-current>summary{background:var(--lemon);color:#111;border-color:var(--line);box-shadow:3px 3px 0 var(--shadow)}:root[data-theme=dark] .site-nav a[aria-current=page],:root[data-theme=dark] .nav-more.has-current>summary{box-shadow:3px 3px 0 var(--line)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .site-nav a[aria-current=page],:root:not([data-theme=light]) .nav-more.has-current>summary{box-shadow:3px 3px 0 var(--line)}}.nav-more{position:relative}.nav-more summary{list-style:none}.nav-more summary::-webkit-details-marker{display:none}.nav-more[open] summary .icon{transform:rotate(180deg)}.nav-more__menu{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);min-width:230px;box-shadow:var(--off) var(--off) 0 var(--shadow);position:absolute;top:calc(100% + 8px);right:0;gap:2px!important;padding:6px!important;display:grid!important}.nav-more__menu a{justify-content:flex-start;width:100%}.header-actions{align-items:center;gap:8px;display:flex}.icon-btn{background:var(--surface);min-width:42px;min-height:42px;color:var(--ink);border:2px solid var(--line);border-radius:var(--r-sm);font:600 .85rem/1 var(--font);cursor:pointer;box-shadow:3px 3px 0 var(--shadow);justify-content:center;align-items:center;gap:6px;padding:0 10px;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.icon-btn:hover{box-shadow:4px 4px 0 var(--shadow);transform:translate(-1px,-1px)}.icon-btn:active{box-shadow:0 0 0 var(--shadow);transform:translate(3px,3px)}.theme-toggle__text{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}.nav-toggle{display:none}@media (width<=1040px){.nav-toggle{display:inline-flex}.site-nav{background:var(--paper);border-bottom:2px solid var(--line);margin:0;padding:10px 16px 16px;display:none;position:absolute;top:100%;left:0;right:0}.site-nav.is-open{display:block}.site-nav ul{flex-direction:column;align-items:stretch}.site-nav a,.nav-more summary{width:100%}.nav-more__menu{box-shadow:none;margin-top:6px;position:static}.header-actions{margin-left:auto}}@media (width<=420px){.theme-toggle__text{display:none}.brand{font-size:1.08rem}.brand__mark{width:32px;height:32px}}.btn{background:var(--surface);min-height:44px;color:var(--ink);border:2px solid var(--line);border-radius:var(--r-sm);font:700 .95rem/1.1 var(--font);cursor:pointer;box-shadow:var(--off-sm) var(--off-sm) 0 var(--shadow);white-space:nowrap;justify-content:center;align-items:center;gap:8px;padding:.62rem 1rem;text-decoration:none;transition:transform 80ms,box-shadow 80ms,background-color .12s;display:inline-flex}.btn:hover{box-shadow:calc(var(--off-sm) + 1px) calc(var(--off-sm) + 1px) 0 var(--shadow);text-decoration:none;transform:translate(-1px,-1px)}.btn:active{transform:translate(var(--off-sm), var(--off-sm));box-shadow:0 0 0 var(--shadow)}.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;box-shadow:var(--off-sm) var(--off-sm) 0 var(--shadow);transform:none}.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-ink)}.btn--lemon{background:var(--lemon);color:#111}.btn--sm{min-height:40px;box-shadow:3px 3px 0 var(--shadow);padding:.45rem .75rem;font-size:.88rem}.btn--block{width:100%}.btn--ghost{box-shadow:none;background:0 0}.btn--ghost:hover{box-shadow:none;background:var(--surface-sunk);transform:none}.btn-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.link-btn{min-height:40px;color:var(--link);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:4px 2px;font-weight:600;text-decoration:underline}.panel{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--off) var(--off) 0 var(--shadow);min-width:0}.panel__head{border-bottom:2px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:10px 16px;display:flex}.panel__title{letter-spacing:-.01em;align-items:center;gap:10px;margin:0;font-size:1.02rem;display:inline-flex}.step{background:var(--ink);width:26px;height:26px;color:var(--paper);font-family:var(--mono);border-radius:3px;place-items:center;font-size:.8rem;font-weight:700;display:inline-grid}.panel__meta{font-family:var(--mono);color:var(--muted);letter-spacing:.02em;font-size:.74rem}.panel__body{padding:16px}@media (width>=720px){.panel__body{padding:20px}}label,.label{margin:0 0 6px;font-size:.9rem;font-weight:700;display:block}.label-note{color:var(--muted);font-size:.82rem;font-weight:400}input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=password],input[type=date],input[type=time],input[type=search],select,textarea{background:var(--surface);width:100%;min-height:44px;color:var(--ink);border:2px solid var(--line);border-radius:var(--r-sm);font:500 1rem/1.35 var(--font);box-shadow:inset 3px 3px 0 var(--surface-sunk);padding:9px 12px}textarea{resize:vertical;min-height:92px}.input-mono,textarea.input-mono{font-family:var(--mono);font-size:.92rem}select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);cursor:pointer;background-position:calc(100% - 18px),calc(100% - 12px);background-repeat:no-repeat;background-size:6px 6px;padding-right:36px}input::placeholder,textarea::placeholder{color:var(--muted);opacity:.9}input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:#d4183d;box-shadow:inset 3px 3px #d4183d1f}.field{min-width:0}.field+.field,.field+.row,.row+.field,.row+.row{margin-top:14px}.row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;display:grid}.row>.field+.field{margin-top:0}.hint{color:var(--muted);margin:6px 0 0;font-size:.82rem}.field-msg{min-height:1.3em;margin:6px 0 0;font-size:.86rem}.field-msg:empty{min-height:0;margin:0}.msg-error{color:#c0122f;font-weight:600}.msg-warn{color:var(--ink-soft)}:root[data-theme=dark] .msg-error{color:#ff9191}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .msg-error{color:#ff9191}}fieldset{border:0;min-width:0;margin:0;padding:0}legend{margin:0 0 8px;padding:0;font-size:.9rem;font-weight:700}.fieldset+.fieldset{margin-top:18px}.check{cursor:pointer;align-items:center;gap:10px;min-height:40px;margin:0;font-size:.94rem;font-weight:600;display:flex}.check input{width:22px;height:22px;accent-color:var(--cobalt);flex:none;margin:0}.seg{flex-wrap:wrap;gap:8px;display:flex}.seg label{margin:0;font-weight:600;position:relative}.seg input{opacity:0;width:1px;height:1px;position:absolute}.seg span{border:2px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;min-height:40px;box-shadow:2px 2px 0 var(--shadow);align-items:center;gap:6px;padding:7px 12px;font-size:.9rem;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.seg span small{font-family:var(--mono);color:var(--muted);font-size:.72rem;font-weight:400}.seg input:checked+span{background:var(--lemon);color:#111;box-shadow:0 0 0 var(--shadow);transform:translate(2px,2px)}.seg input:checked+span small{color:#333}.seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}.swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.swatches--3{grid-template-columns:repeat(3,minmax(0,1fr))}.ws-style{container-type:inline-size}@container (width>=600px){.swatches--8{grid-template-columns:repeat(8,minmax(0,1fr))}.swatches--5{grid-template-columns:repeat(5,minmax(0,1fr))}.swatches--6{grid-template-columns:repeat(6,minmax(0,1fr))}}.swatch{margin:0;position:relative}.swatch input{opacity:0;width:1px;height:1px;position:absolute}.swatch span{border:2px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;box-shadow:3px 3px 0 var(--shadow);justify-items:center;gap:6px;min-height:40px;padding:8px 6px 7px;font-size:.8rem;font-weight:600;transition:transform 80ms,box-shadow 80ms;display:grid}.swatch .swatch__art{width:46px;height:46px;color:var(--ink);display:block}.swatch .swatch__art svg{width:100%;height:100%;display:block}.swatch input:checked+span{background:var(--lemon);color:#111;box-shadow:0 0 0 var(--shadow);transform:translate(3px,3px)}.swatch input:checked+span .swatch__art{color:#111}.swatch input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}.color-row{align-items:stretch;gap:8px;display:flex}.color-row input[type=color]{border:2px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;width:52px;min-width:52px;height:44px;padding:3px}.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-row input[type=color]::-webkit-color-swatch{border:1px solid var(--line-soft);border-radius:2px}.color-row input[type=color]::-moz-color-swatch{border:1px solid var(--line-soft);border-radius:2px}.color-row input[type=text]{font-family:var(--mono);text-transform:lowercase;min-width:0}input[type=range]{width:100%;accent-color:var(--cobalt);min-height:40px;margin:0}:root[data-theme=dark] input[type=range],:root[data-theme=dark] .check input{accent-color:var(--lemon)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) input[type=range],:root:not([data-theme=light]) .check input{accent-color:var(--lemon)}}.range-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.range-head output{font-family:var(--mono);background:var(--surface-sunk);border:1px solid var(--line-soft);border-radius:3px;padding:1px 6px;font-size:.85rem;font-weight:700}.examples{flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:.85rem;display:flex}.examples>span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.75rem}.example-btn{border:2px dashed var(--line);border-radius:var(--r-sm);min-height:36px;color:var(--ink);font:600 .85rem/1 var(--font);cursor:pointer;background:0 0;padding:4px 10px}.example-btn:hover{background:var(--lemon-soft);color:#111;border-style:solid}.input-group{gap:8px;display:flex}.input-group input{flex:1;min-width:0}.dropzone{text-align:center;border:2px dashed var(--line);border-radius:var(--r);background:repeating-linear-gradient(-45deg, transparent 0 10px, var(--grid-line) 10px 20px);place-items:center;gap:8px;padding:22px 16px;transition:background-color .12s;display:grid;position:relative}.dropzone.is-over{background-color:var(--lemon-soft);color:#111;border-style:solid}.dropzone p{margin:0;font-size:.92rem}.dropzone .hint{margin:0}.tabs{border-bottom:2px solid var(--line);scrollbar-width:thin;gap:0;display:flex;overflow-x:auto}.tabs [role=tab]{min-height:48px;color:var(--ink);border:0;border-right:2px solid var(--line);font:700 .92rem/1 var(--font);cursor:pointer;white-space:nowrap;background:0 0;flex:1 0 auto;justify-content:center;align-items:center;gap:6px;padding:8px 14px;display:inline-flex}.tabs [role=tab]:last-child{border-right:0}.tabs [role=tab]:hover{background:var(--surface-sunk)}.tabs [role=tab][aria-selected=true]{background:var(--ink);color:var(--paper)}.tabs [role=tab]:focus-visible{outline-offset:-4px}@media (width<=520px){.tabs{grid-template-columns:repeat(5,minmax(0,1fr));display:grid;overflow:visible}.tabs [role=tab]{min-width:0;padding:8px 2px;font-size:.8rem}.lead{font-size:1.02rem}.hero{padding-top:22px}}.tab-panel{padding:18px 16px 20px}@media (width>=720px){.tab-panel{padding:20px}}.tab-panel[hidden]{display:none}.hero{padding-top:30px;padding-bottom:20px}.hero h1{margin-bottom:10px}.hero .lead{margin-bottom:0}.ws{grid-template-columns:minmax(0,1fr);grid-template-areas:"content""preview""style";gap:22px;display:grid}.ws-content{grid-area:content}.ws-style{grid-area:style}.ws-preview{grid-area:preview}@media (width>=940px){.ws{grid-template-columns:minmax(0,1fr) minmax(340px,400px);grid-template-areas:"content preview""style preview";align-items:start;gap:26px}.ws-preview{position:sticky;top:16px}}.content-meta{font-family:var(--mono);color:var(--muted);flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;font-size:.75rem;display:flex}.preview-stage{border:2px solid var(--line);border-radius:var(--r-sm);background-color:var(--check-b);background-image:linear-gradient(45deg, var(--check-a) 25%, transparent 25%), linear-gradient(-45deg, var(--check-a) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--check-a) 75%), linear-gradient(-45deg, transparent 75%, var(--check-a) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;padding:14px}.preview{aspect-ratio:1;place-items:center;width:100%;max-width:340px;margin:0 auto;display:grid}.preview svg{width:100%;height:100%;display:block}.preview-empty{text-align:center;background:var(--surface);border:2px dashed var(--line-soft);width:100%;height:100%;color:var(--muted);place-items:center;gap:8px;padding:20px;font-size:.9rem;display:grid}.verdict{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--line);color:var(--chip-ink);background:var(--surface-sunk);border-radius:3px;align-items:center;gap:6px;padding:4px 9px;font-size:.75rem;font-weight:700;display:inline-flex}.verdict[data-v=good]{background:var(--ok)}.verdict[data-v=fair]{background:var(--warn)}.verdict[data-v=poor]{background:var(--bad)}.verdict[data-v=""]{color:var(--muted)}.checks{gap:6px;margin:14px 0 0;padding:0;font-size:.86rem;line-height:1.4;list-style:none;display:grid}.checks li{align-items:flex-start;gap:8px;display:flex}.checks .icon{width:17px;height:17px;margin-top:1px}.checks .lvl-ok .icon{color:#138a3d}.checks .lvl-warn .icon{color:#a86b00}.checks .lvl-bad .icon{color:#d4183d}:root[data-theme=dark] .checks .lvl-ok .icon{color:#7ee79b}:root[data-theme=dark] .checks .lvl-warn .icon{color:#ffe14a}:root[data-theme=dark] .checks .lvl-bad .icon{color:#ff9191}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .checks .lvl-ok .icon{color:#7ee79b}:root:not([data-theme=light]) .checks .lvl-warn .icon{color:#ffe14a}:root:not([data-theme=light]) .checks .lvl-bad .icon{color:#ff9191}}.selftest{border:2px dashed var(--line-soft);border-radius:var(--r-sm);align-items:center;gap:8px;min-height:40px;margin:10px 0 0;padding:8px 10px;font-size:.85rem;display:flex}.selftest[data-state=pass]{border-style:solid;border-color:var(--line);background:var(--ok);color:#111}.selftest[data-state=fail]{border-style:solid;border-color:var(--line);background:var(--bad);color:#111}.export{border-top:2px solid var(--line);gap:12px;margin-top:16px;padding-top:16px;display:grid}.export__size{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;display:grid}.export__size label{margin:0}.export__buttons{grid-template-columns:1fr 1fr;gap:12px;display:grid}.export__buttons .btn--primary{grid-column:1/-1}.logo-preview{border:2px solid var(--line);border-radius:var(--r-sm);background:var(--surface-sunk);align-items:center;gap:12px;margin-top:12px;padding:10px;display:flex}.logo-preview img{object-fit:contain;border:1px solid var(--line-soft);background:#fff;border-radius:3px;width:52px;height:52px}.logo-preview p{overflow-wrap:anywhere;flex:1;min-width:0;margin:0;font-size:.86rem}.note{border:2px solid var(--line);border-radius:var(--r-sm);background:var(--lemon-soft);color:#111;align-items:flex-start;gap:8px;margin:12px 0 0;padding:10px 12px;font-size:.86rem;display:flex}.note .icon{margin-top:2px}.section{padding-top:56px}.section__head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px;margin-bottom:22px;display:flex}.section__head h2{margin:0}.section__head p{color:var(--ink-soft);max-width:56ch;margin:0}.masonry{columns:4 210px;column-gap:20px}.preset{break-inside:avoid;background:var(--surface);width:100%;color:var(--ink);border:2px solid var(--line);border-radius:var(--r);box-shadow:5px 5px 0 var(--shadow);text-align:left;font:inherit;cursor:pointer;margin:0 0 20px;padding:0;transition:transform .1s,box-shadow .1s;display:block}.preset:hover{box-shadow:7px 7px 0 var(--shadow);transform:translate(-2px,-2px)}.preset:active{box-shadow:1px 1px 0 var(--shadow);transform:translate(4px,4px)}.preset__art{border-bottom:2px solid var(--line);border-radius:calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0;background:var(--preset-bg,#fff);padding:14px;display:block}.preset--tall .preset__art{padding:26px 22px}.preset__art span{aspect-ratio:1;display:block}.preset__art svg{width:100%;height:100%;display:block}.preset__body{padding:12px 14px 14px;display:block}.preset__name{justify-content:space-between;align-items:center;gap:8px;font-size:1.02rem;font-weight:700;display:flex}.preset__apply{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--line);background:var(--lemon);color:#111;border-radius:3px;padding:1px 6px;font-size:.7rem}.preset__desc{color:var(--ink-soft);margin-top:4px;font-size:.86rem;display:block}.preset__spec{font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:8px;font-size:.7rem;display:block}.preset__swatches{gap:4px;margin-top:8px;display:flex}.preset__swatches i{border:2px solid var(--line);background:var(--c);border-radius:2px;width:18px;height:18px}.page-intro{padding:30px 0 22px}.page-intro h1{margin-bottom:10px}.page-intro .lead{margin:0}.tool-layout{grid-template-columns:minmax(0,1fr);gap:22px;display:grid}@media (width>=940px){.tool-layout{grid-template-columns:minmax(0,1fr) minmax(330px,390px);align-items:start;gap:26px}.tool-layout>.qr-out,.tool-layout>.sticky{position:sticky;top:16px}}.qr-out .preview{max-width:300px}.quick-style{grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;display:grid}.quick-style .field+.field{margin-top:0}.quick-style label{font-size:.82rem}.quick-style .color-row input[type=color]{width:100%;min-width:0}.out-actions{border-top:2px solid var(--line);grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:16px;display:grid}.out-actions .btn--primary{grid-column:1/-1}.encoded{border:2px solid var(--line);border-radius:var(--r-sm);margin-top:16px}.encoded summary{cursor:pointer;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:8px 12px;font-size:.9rem;font-weight:700;list-style:none;display:flex}.encoded summary::-webkit-details-marker{display:none}.encoded[open] summary{border-bottom:2px solid var(--line)}.encoded[open] summary .icon{transform:rotate(180deg)}.encoded pre{white-space:pre-wrap;word-break:break-all;background:var(--surface-sunk);max-height:220px;margin:0;padding:12px;font-size:.8rem;overflow:auto}.encoded .btn-row{padding:10px 12px 12px}.handoff{justify-content:center;margin-top:14px;display:flex}.form-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;display:grid}.form-grid .span-all{grid-column:1/-1}.form-grid .field+.field{margin-top:0}.form-section{border-top:2px dashed var(--line-soft);margin-top:22px;padding-top:18px}.form-section:first-child{border-top:0;margin-top:0;padding-top:0}.form-grid .color-row input[type=color]{width:100%}.form-section h3{font-size:.82rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin:0 0 12px}.problems{gap:8px;margin:16px 0 0;padding:0;list-style:none;display:grid}.problems:empty{display:none}.problems li{border:2px solid var(--line);border-radius:var(--r-sm);color:#111;align-items:flex-start;gap:8px;padding:8px 10px;font-size:.88rem;display:flex}.problems .p-error{background:var(--bad)}.problems .p-warn{background:var(--lemon-soft)}.problems .icon{margin-top:2px}.result-kind{align-items:center;gap:10px;margin:0 0 6px;display:flex}.result-kind .badge{background:var(--cobalt);color:#fff;border:2px solid var(--line);border-radius:var(--r-sm);place-items:center;width:40px;height:40px;display:inline-grid}:root[data-theme=dark] .result-kind .badge{background:var(--lemon);color:#111}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .result-kind .badge{background:var(--lemon);color:#111}}.result-kind h3{margin:0;font-size:1.2rem}.kv{border:2px solid var(--line);border-radius:var(--r-sm);grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:0;margin:14px 0 0;display:grid;overflow:hidden}.kv dt,.kv dd{border-bottom:1px solid var(--line-soft);min-width:0;margin:0;padding:8px 12px}.kv dt{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:var(--surface-sunk);border-right:2px solid var(--line);align-items:center;font-size:.75rem;display:flex}.kv dd{overflow-wrap:anywhere;white-space:pre-wrap;justify-content:space-between;align-items:center;gap:8px;font-weight:600;display:flex}.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}@media (width<=460px){.kv{grid-template-columns:minmax(0,1fr)}.kv dt{border-bottom:0;border-right:0;padding-bottom:2px}}.notes{gap:8px;margin:14px 0 0;padding:0;list-style:none;display:grid}.notes li{border:2px solid var(--line);border-radius:var(--r-sm);color:#111;background:var(--surface-sunk);align-items:flex-start;gap:8px;padding:9px 11px;font-size:.9rem;display:flex}.notes li.n-info{color:var(--ink)}.notes li.n-warn{background:var(--lemon-soft)}.notes li.n-danger{background:var(--bad)}.notes .icon{margin-top:2px}.raw-label{margin-top:16px}.raw{font-family:var(--mono);background:var(--surface-sunk);min-height:96px;font-size:.85rem}.camera-box{border:2px solid var(--line);border-radius:var(--r-sm);aspect-ratio:4/3;background:#000;margin-top:14px;position:relative;overflow:hidden}.camera-box[hidden]{display:none}.camera-box video{object-fit:cover;width:100%;height:100%;display:block}.camera-box .reticle{border:3px solid var(--lemon);pointer-events:none;border-radius:8px;position:absolute;inset:16%;box-shadow:0 0 0 999px #00000059}.scan-source{gap:14px;display:grid}.or-sep{font-family:var(--mono);text-transform:uppercase;color:var(--muted);align-items:center;gap:10px;font-size:.75rem;display:flex}.or-sep:before,.or-sep:after{content:"";border-top:2px dashed var(--line-soft);flex:1}.thumb{border:2px solid var(--line);border-radius:var(--r-sm);background:#fff;max-height:180px;margin:12px auto 0;display:block}.progress{border:2px solid var(--line);background:var(--surface-sunk);border-radius:3px;height:18px;margin-top:12px;overflow:hidden}.progress span{background:repeating-linear-gradient(-45deg, var(--cobalt) 0 8px, var(--cobalt-deep) 8px 16px);width:0;height:100%;transition:width .15s linear;display:block}:root[data-theme=dark] .progress span{background:repeating-linear-gradient(-45deg,#ffe14a 0 8px,#e8c623 8px 16px)}.table-wrap{border:2px solid var(--line);border-radius:var(--r-sm);margin-top:14px;overflow-x:auto}.table-wrap table{border-collapse:collapse;width:100%;font-size:.85rem}.table-wrap th,.table-wrap td{text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;padding:7px 10px}.table-wrap th{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;background:var(--surface-sunk);border-bottom:2px solid var(--line);font-size:.72rem}.table-wrap td{overflow-wrap:anywhere}.table-wrap td.mono{font-family:var(--mono);font-size:.8rem}.barcode-stage{border:2px solid var(--line);border-radius:var(--r-sm);background-color:var(--check-b);background-image:linear-gradient(45deg, var(--check-a) 25%, transparent 25%), linear-gradient(-45deg, var(--check-a) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--check-a) 75%), linear-gradient(-45deg, transparent 75%, var(--check-a) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;place-items:center;min-height:200px;padding:16px;display:grid;overflow:auto}.barcode-stage svg{max-width:100%;height:auto;display:block}.content{padding-top:52px}.prose{max-width:760px}.prose h2{margin-top:0}.prose h3{margin-top:1.6em}.prose ul,.prose ol{margin:0 0 1em;padding-left:1.3em}.prose li{margin-bottom:.4em}.prose li::marker{color:var(--muted)}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:0;padding:0;list-style:none;display:grid}.tool-card{background:var(--surface);height:100%;color:var(--ink);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--off-sm) var(--off-sm) 0 var(--shadow);grid-template-rows:auto 1fr;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;padding:16px;text-decoration:none;transition:transform .1s,box-shadow .1s;display:grid}.tool-card:hover{box-shadow:calc(var(--off-sm) + 2px) calc(var(--off-sm) + 2px) 0 var(--shadow);text-decoration:none;transform:translate(-2px,-2px)}.tool-card__icon{background:var(--cobalt);color:#fff;border:2px solid var(--line);border-radius:var(--r-sm);grid-row:1/span 2;place-items:center;width:46px;height:46px;display:grid}.tool-grid>li:nth-child(3n+2) .tool-card__icon{background:var(--lemon);color:#111}.tool-grid>li:nth-child(3n) .tool-card__icon{background:var(--ink);color:var(--paper)}.tool-card__icon .icon{width:22px;height:22px}.tool-card__title{font-size:1.05rem;font-weight:700;line-height:1.25}.tool-card__desc{color:var(--ink-soft);font-size:.88rem}.reco-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;display:grid}.reco{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--off) var(--off) 0 var(--shadow);flex-direction:column;gap:10px;padding:20px;display:flex;position:relative}.reco__tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--line);background:var(--lemon);color:#111;border-radius:3px;align-self:flex-start;padding:2px 8px;font-size:.7rem}.reco h3{margin:0;font-size:1.3rem}.reco p{color:var(--ink-soft);margin:0}.reco ul{color:var(--ink-soft);margin:0;padding-left:1.2em;font-size:.92rem}.reco .btn{align-self:flex-start;margin-top:auto}.callout{background:var(--surface);border:2px solid var(--line);border-left-width:8px;border-left-color:var(--cobalt);border-radius:var(--r-sm);box-shadow:var(--off-sm) var(--off-sm) 0 var(--shadow);align-items:flex-start;gap:12px;margin:1.4em 0;padding:14px 16px;display:flex}:root[data-theme=dark] .callout{border-left-color:var(--lemon)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .callout{border-left-color:var(--lemon)}}.callout>.icon{width:22px;height:22px;margin-top:2px}.callout p{margin:0;font-size:.94rem}.callout .callout__title{margin-bottom:4px;font-weight:700}.tool-callout{margin:18px 0 0}.faq{gap:12px;max-width:860px;display:grid}.faq details{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-sm);box-shadow:3px 3px 0 var(--shadow)}.faq summary{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:12px 16px;font-weight:700;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq details[open] summary{border-bottom:2px solid var(--line);background:var(--lemon);color:#111}.faq details[open] summary .icon{transform:rotate(180deg)}.faq details>div{padding:12px 16px 2px}.faq details>div p{color:var(--ink-soft)}.site-footer{background:var(--footer-bg);color:var(--footer-ink);border-top:2px solid var(--line);padding:44px 0 24px;font-size:.92rem}.site-footer a{color:var(--footer-ink);text-decoration-color:#ffffff59}.site-footer a:hover{-webkit-text-decoration-color:var(--lemon);text-decoration-color:var(--lemon)}.footer-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;display:grid}@media (width>=1000px){.footer-grid{grid-template-columns:1.2fr 1fr 1.6fr 1.1fr}}.footer-col h2{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--footer-head);margin:0 0 12px;font-size:.78rem}.footer-col ul{gap:6px;margin:0;padding:0;list-style:none;display:grid}.footer-col li{line-height:1.35}@media (pointer:coarse){.footer-col a{align-items:center;min-height:40px;display:inline-flex}.footer-col ul{gap:0}}.footer-col .desc{color:var(--footer-muted);font-size:.8rem;display:block}.footer-sisters ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.footer-about p{color:var(--footer-muted);margin-top:12px}.footer-about .brand{color:var(--footer-ink)}.footer-about .brand__tld{color:var(--footer-muted)}.footer-bottom{color:var(--footer-muted);border-top:1px solid #fff3;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:34px;padding-top:18px;display:flex}.footer-bottom p{margin:0}.footer-bottom ul{gap:18px;margin:0;padding:0;list-style:none;display:flex}.footer-bottom a{align-items:center;min-height:40px;display:inline-flex}.toast-region{z-index:200;pointer-events:none;width:max-content;max-width:calc(100vw - 32px);position:fixed;bottom:22px;left:50%;transform:translate(-50%)}.toast{background:var(--lemon);color:#111;border-radius:var(--r-sm);opacity:0;border:2px solid #111;align-items:center;gap:10px;padding:10px 16px;font-weight:700;transition:opacity .18s,transform .18s;display:flex;transform:translateY(10px);box-shadow:4px 4px #111}.toast.is-visible{opacity:1;transform:none}.toast.is-error{background:var(--bad)}.notfound{padding-top:40px}.notfound .big{font-family:var(--mono);letter-spacing:-.04em;background:var(--lemon);color:#111;border:2px solid var(--line);box-shadow:var(--off) var(--off) 0 var(--shadow);margin:0 0 10px;padding:0 18px;font-size:clamp(4rem,14vw,8rem);font-weight:700;line-height:1;display:inline-block}.notfound .tool-grid{margin-top:26px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}.btn:hover,.btn:active,.icon-btn:hover,.icon-btn:active,.preset:hover,.preset:active,.tool-card:hover{transform:none}}