@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-vietnamese-wght-normal-BUzh504Q.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:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-ext-wght-normal-CcLUaPy7.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:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/bricolage-grotesque-latin-wght-normal-DLoelf7F.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}@property --p{syntax:"<number>";inherits:false;initial-value:0}:root{--font-display:"Bricolage Grotesque Variable", ui-sans-serif, system-ui, sans-serif;--font-body:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;--bg:#faf8f4;--bg-alt:#f2eee7;--surface:#fff;--ink:#16181d;--ink-2:#4b5060;--line:#e2ddd3;--accent:#e0432c;--accent-hover:#c53520;--accent-ink:#fff;--accent-soft:#fde5df;--code-bg:#16181d;--code-ink:#f1f2f5;--shadow:0 1px 2px #16181d0f, 0 12px 32px -12px #16181d2e;--dark:#0e1117;--dark-2:#171b24;--dark-ink:#f3f4f7;--dark-ink-2:#a7aebd;--dark-line:#ffffff1f;--radius:18px;--radius-sm:10px;--gutter:16px;--max:1160px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f1218;--bg-alt:#141822;--surface:#1a1f2a;--ink:#eef0f4;--ink-2:#a8afbe;--line:#2a303d;--accent:#ff5d42;--accent-hover:#ff7a63;--accent-ink:#160805;--accent-soft:#3b1c17;--code-bg:#0a0c11;--shadow:0 1px 2px #0006, 0 16px 40px -16px #0009;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#0f1218;--bg-alt:#141822;--surface:#1a1f2a;--ink:#eef0f4;--ink-2:#a8afbe;--line:#2a303d;--accent:#ff5d42;--accent-hover:#ff7a63;--accent-ink:#160805;--accent-soft:#3b1c17;--code-bg:#0a0c11;--shadow:0 1px 2px #0006, 0 16px 40px -16px #0009;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (width>=720px){:root{--gutter:32px}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;margin:0;overflow-x:clip}img{max-width:100%;height:auto;display:block}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;text-wrap:balance;margin:0 0 .5em;font-weight:750;line-height:1.08}h1{font-size:clamp(2.3rem,1.4rem + 4vw,4.4rem)}h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem)}h3{font-size:1.25rem}p{text-wrap:pretty;margin:0 0 1em}a{color:inherit}code,pre{font-family:var(--font-mono);font-size:.9em}:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}::selection{background:var(--accent);color:var(--accent-ink)}[hidden]{display:none!important}.container{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));padding-inline:var(--gutter);margin-inline:auto}.narrow{max-width:calc(780px + 2 * var(--gutter))}.center{text-align:center}.skip-link{z-index:100;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-sm);padding:10px 16px;font-weight:700;text-decoration:none;position:absolute;top:-100px;left:12px}.skip-link:focus{top:12px}.btn{--btn-bg:var(--surface);--btn-ink:var(--ink);--btn-line:var(--line);border:1.5px solid var(--btn-line);background:var(--btn-bg);min-height:44px;color:var(--btn-ink);font:650 1rem/1.2 var(--font-body);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;text-decoration:none;transition:background-color .15s,border-color .15s,transform .15s;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-lg{min-height:52px;padding:12px 26px;font-size:1.0625rem}.btn-primary{--btn-bg:var(--accent);--btn-ink:var(--accent-ink);--btn-line:var(--accent)}.btn-primary:hover{--btn-bg:var(--accent-hover);--btn-line:var(--accent-hover)}.btn-ghost{--btn-bg:transparent}.btn-ghost:hover{--btn-line:var(--ink)}.btn-ghost-dark{--btn-bg:transparent;--btn-ink:var(--dark-ink);--btn-line:var(--dark-line)}.btn-ghost-dark:hover{--btn-line:var(--dark-ink)}.icon-btn{border:1.5px solid var(--line);background:var(--surface);width:44px;height:44px;color:var(--ink);cursor:pointer;border-radius:50%;place-items:center;transition:border-color .15s;display:inline-grid}.icon-btn:hover:not(:disabled){border-color:var(--ink)}.icon-btn:disabled{opacity:.35;cursor:default}.icon-btn svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.site-header{background:var(--dark);color:var(--dark-ink);border-bottom:1px solid var(--dark-line)}.header-inner{justify-content:space-between;align-items:center;gap:16px;min-height:72px;display:flex}.brand{color:var(--dark-ink);border-radius:8px;display:block}.brand .logo{width:auto;height:30px;display:block}.site-nav{gap:4px;display:flex}.site-nav a{color:var(--dark-ink-2);border-radius:999px;padding:8px 10px;font-size:.975rem;font-weight:600;text-decoration:none;transition:color .15s,background-color .15s}.site-nav a:hover{color:var(--dark-ink)}.site-nav a[aria-current=page]{color:var(--dark-ink);background:#ffffff1a}.nav-long{display:none}@media (width>=560px){.nav-long{display:inline}.brand .logo{height:46px}.site-nav a{padding-inline:12px}}.hero,.page-hero{isolation:isolate;background:var(--dark);color:var(--dark-ink);position:relative;overflow:hidden}.hero:before,.page-hero:before{content:"";z-index:-1;background:radial-gradient(60rem 30rem at 85% 10%,#e0432c59,#0000 60%),radial-gradient(40rem 26rem at 0 100%,#5865f238,#0000 60%);position:absolute;inset:0}.hero:after,.page-hero:after{content:"";z-index:-1;background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 85%);mask-image:linear-gradient(#000,#0000 85%)}.hero-grid{align-items:end;gap:24px;padding-block:56px 0;display:grid}@media (width>=900px){.hero-grid{grid-template-columns:1.25fr .75fr;padding-top:72px}}.hero-copy{padding-bottom:32px}@media (width>=900px){.hero-copy{padding-bottom:88px}}.eyebrow{color:var(--accent);font:700 .8rem/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:inline-block}.eyebrow-dark{color:#ff8a73}.hero-title{max-width:14ch}.hero-lines{color:var(--dark-ink-2);font:600 clamp(1.15rem, 1rem + .8vw, 1.5rem) / 1.35 var(--font-display);gap:4px;margin-bottom:8px;display:grid}.hero-strong{color:var(--dark-ink)}.instantly{font:800 clamp(3rem, 1.6rem + 7vw, 6.5rem) / .95 var(--font-display);letter-spacing:-.03em;background:linear-gradient(90deg,#ff5d42,#ffb199 60%,#ff5d42) 0 0/200% 100%;color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 28px;animation:6s linear infinite shimmer}.hero-actions{flex-wrap:wrap;gap:12px;display:flex}.hero-actions-center{justify-content:center}.hero-art{justify-self:center;width:min(100%,250px);position:relative}@media (width>=900px){.hero-art{justify-self:end;width:100%;max-width:380px}}.hero-art img{filter:drop-shadow(0 30px 40px #00000073);width:100%;position:relative;-webkit-mask-image:linear-gradient(#000 80%,#0000);mask-image:linear-gradient(#000 80%,#0000)}.hero-copy>*{animation:.7s cubic-bezier(.2,.7,.2,1) both rise}.hero-copy>:nth-child(2){animation-delay:80ms}.hero-copy>:nth-child(3){animation-delay:.3s}.hero-copy>:nth-child(4){animation-delay:.6s}.hero-copy>:nth-child(5){animation-delay:.75s}.page-hero>.container{padding-block:56px 48px}@media (width>=720px){.page-hero>.container{padding-block:80px 64px}}.page-hero h1{margin-bottom:.3em}.page-hero-lead{color:var(--dark-ink-2);max-width:56ch;font-size:1.15rem}.center .page-hero-lead{margin-inline:auto}.page-hero-tall>.container{padding-block:72px 88px}.big-404{font:800 clamp(6rem, 3rem + 14vw, 12rem) / .9 var(--font-display);letter-spacing:-.05em;color:var(--dark-ink);margin:0}.big-404 span{color:var(--accent)}.trust{padding:18px var(--gutter);border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-align:center;margin:0;font-size:.95rem;font-weight:600}.section{padding-block:64px}@media (width>=720px){.section{padding-block:96px}}.section-alt{background:var(--bg-alt)}.section-head{text-align:center;max-width:680px;margin:0 auto 40px}.section-head-row{text-align:left;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;max-width:none;display:flex}.section-head-row>div:first-child{max-width:620px}.section-head .lead,.section-head-row .lead{margin-bottom:0}.lead{color:var(--ink-2);font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}.tool{border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);background:var(--surface);max-width:980px;box-shadow:var(--shadow);margin-inline:auto;padding:20px}@media (width>=720px){.tool{padding:36px}}.step+.step{border-top:1px dashed var(--line);margin-top:28px;padding-top:28px}.step:not(:first-child):not([hidden]){animation:.45s cubic-bezier(.2,.7,.2,1) both rise}.step-title{font:700 clamp(1.1rem, 1rem + .5vw, 1.35rem) / 1.3 var(--font-display);align-items:baseline;gap:12px;margin-bottom:14px;display:flex}.step-num{background:var(--accent);width:30px;height:30px;color:var(--accent-ink);font:800 .95rem/1 var(--font-body);border-radius:50%;flex:none;place-items:center;display:inline-grid;transform:translateY(-2px)}.url-field input,#result{border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);width:100%;color:var(--ink);transition:border-color .15s,box-shadow .15s}.url-field input{min-height:56px;font:500 1.125rem/1.3 var(--font-body);padding:12px 16px}.url-field input::placeholder{color:var(--ink-2);opacity:.7}.url-field input:focus,#result:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);outline:none}.url-field input[aria-invalid=true]{border-color:var(--accent)}.hint{color:var(--ink-2);margin:8px 0 0;font-size:.9rem}.error{color:var(--accent);margin:4px 0 0;font-size:.95rem;font-weight:600}.error:empty{display:none}.canvas{--s:1;border-radius:var(--radius-sm);touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none;background-color:#fff;background-image:linear-gradient(#eef0f3 1px,#0000 1px),linear-gradient(90deg,#eef0f3 1px,#0000 1px);background-size:24px 24px;border:1.5px solid #cfd3da;padding:16px 12px 16px 0;position:relative;overflow:hidden}.doodle{height:calc(221px * var(--s));align-items:flex-start;display:flex}.doodle-base{width:calc(84px * var(--s));height:calc(221px * var(--s));margin-right:calc(-2px * var(--s));background:url(/img/doodle/balls.png) 0 0/100% 100% no-repeat;flex:none}.doodle-shaft{width:calc(2px * var(--s));height:calc(143px * var(--s));background:url(/img/doodle/shaft.png) 0 0/auto 100% repeat-x;flex:none}.doodle-tip{width:calc(143px * var(--s));height:calc(143px * var(--s));cursor:grab;touch-action:none;background:url(/img/doodle/tip.png) 0 0/100% 100% no-repeat;border-radius:0 50% 50% 0;flex:none;position:relative}.doodle-tip:active{cursor:grabbing}.doodle-tip:focus-visible{outline-offset:-2px}.tip-hint{background:var(--accent);color:#fff;font:700 .75rem/1.2 var(--font-body);white-space:nowrap;pointer-events:none;border-radius:999px;margin-left:4px;padding:4px 10px;animation:1.6s ease-in-out infinite nudge;position:absolute;top:50%;left:100%;transform:translateY(-50%)}.canvas.is-touched .tip-hint{display:none}.verdict{font:750 clamp(1.3rem, 1.1rem + 1vw, 1.8rem) / 1.2 var(--font-display);text-align:center;margin:14px 0 0}#result{min-height:140px;font:500 .85rem/1.55 var(--font-mono);word-break:break-all;resize:vertical;padding:14px 16px;display:block}.result-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;display:flex}.stats{color:var(--ink-2);font-variant-numeric:tabular-nums;margin:0;font-weight:600}.stats strong{color:var(--ink)}.result-actions{flex-wrap:wrap;gap:10px;display:flex}.features{gap:64px;display:grid}.feature{align-items:center;gap:24px;display:grid}@media (width>=820px){.feature{grid-template-columns:.8fr 1.2fr;gap:56px}.feature-flip .feature-art{order:2}}.feature-art{border-radius:var(--radius);background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--surface);border:1px solid var(--line);justify-self:center;width:min(100%,320px);padding:24px 24px 0;position:relative;overflow:hidden}.feature-copy h2{max-width:18ch}.rail-controls{gap:10px;display:flex}.rail{--peek:max(var(--gutter), calc((100vw - var(--max)) / 2));padding:4px var(--peek) 20px;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--peek);scrollbar-width:thin;grid-auto-columns:min(86vw,540px);grid-auto-flow:column;gap:20px;margin:0;list-style:none;display:grid;overflow-x:auto}.rail:focus-visible{outline-offset:-3px}.story{scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;overflow:hidden}.story img{aspect-ratio:662/429;object-fit:cover;width:100%}.skills{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;margin:0;padding:0;list-style:none;display:grid}@media (width>=820px){.skills{grid-template-columns:repeat(4,minmax(0,1fr))}}.skill{text-align:center}.skill p{margin:14px 0 0;font-weight:650}.ring{--p:0;aspect-ratio:1;background:conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0);border-radius:50%;place-items:center;width:min(100%,150px);margin-inline:auto;transition:--p 1.6s cubic-bezier(.2,.7,.2,1);display:grid;position:relative}.ring:before{content:"";background:var(--bg-alt);border-radius:50%;position:absolute;inset:12px}.ring span{font:800 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem) / 1 var(--font-display);font-variant-numeric:tabular-nums;position:relative}.prose h2{margin-top:2em;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}.prose h3{align-items:center;gap:10px;margin-top:1.6em;display:flex}.prose .prose-lead{margin-top:0;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.25}.prose p code,.prose td code{background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:.85em}.prose pre{border-radius:var(--radius-sm);background:var(--code-bg);color:var(--code-ink);tab-size:2;margin:0 0 1.25em;padding:18px 20px;line-height:1.55;overflow-x:auto}.prose pre code{font-size:.85rem}.terms{counter-reset:term;gap:12px;margin:24px 0 32px;padding:0;list-style:none;display:grid}.terms li{counter-increment:term;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);grid-template-columns:40px 1fr;align-items:start;gap:14px;padding:18px 20px;display:grid}.terms li:before{content:counter(term, decimal-leading-zero);color:var(--accent);font:800 1.1rem/1.5 var(--font-display)}.callout{border-left:4px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--accent-soft);padding:20px 22px}.endpoint{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow);flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px;padding:16px 18px;display:flex}.endpoint code{font-size:.95rem}.method,.badge{background:var(--accent);color:var(--accent-ink);font:800 .75rem/1.2 var(--font-body);letter-spacing:.06em;border-radius:999px;padding:4px 10px;display:inline-block}.badge{color:#fff;background:#1f9d55}.badge-warn{background:#b7791f}.table-wrap{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin-bottom:1em;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.975rem}th,td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:12px 16px}tr:last-child td{border-bottom:0}th{background:var(--bg-alt);font-weight:700}.footnote{color:var(--ink-2);font-size:.9rem}.beer{border-top:1px solid var(--line);background:var(--bg);padding-block:72px}.beer .lead{margin-inline:auto;max-width:54ch;margin-bottom:24px}.beer-icon{margin:0 0 8px;font-size:3rem;line-height:1}.site-footer{background:var(--dark);color:var(--dark-ink-2);font-size:.925rem}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:28px;display:flex}.footer-inner p{margin:0}.footer-links{flex-wrap:wrap;gap:4px 20px;margin:0;padding:0;list-style:none;display:flex}.footer-links a{color:var(--dark-ink);font-weight:600;text-decoration:none}.footer-links a:hover{text-decoration:underline}.toast{z-index:50;max-width:calc(100% - 2 * var(--gutter));background:var(--ink);color:var(--bg);box-shadow:var(--shadow);opacity:0;pointer-events:none;border-radius:999px;padding:12px 18px;font-weight:650;transition:opacity .2s,transform .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px)}.toast.is-visible{opacity:1;transform:translate(-50%)}.js .reveal{opacity:0;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1);transform:translateY(16px)}.js .reveal.is-visible{opacity:1;transform:none}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes shimmer{to{background-position:-200% 0}}@keyframes nudge{50%{transform:translate(6px,-50%)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.js .reveal{opacity:1;transform:none}}.logo{overflow:visible}.logo-url{fill:#ff5d42}.logo-word{fill:currentColor}.logo-shaft{transform-box:fill-box;transform-origin:0}.logo-sparkle{transform-box:fill-box;transform-origin:50%;animation:3.2s ease-in-out 1.4s infinite logo-twinkle}.logo-shaft,.logo-tip{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}.logo-shaft{animation:.9s cubic-bezier(.3,1.5,.5,1) .15s backwards logo-shaft-grow}.logo-tip{animation:.9s cubic-bezier(.3,1.5,.5,1) .15s backwards logo-tip-grow}@media (hover:hover){.brand:hover .logo-shaft,.brand:focus-visible .logo-shaft{transform:scaleX(1.2)}.brand:hover .logo-tip,.brand:focus-visible .logo-tip{transform:translate(47.3px)}}@keyframes logo-shaft-grow{0%{transform:scaleX(.35)}}@keyframes logo-tip-grow{0%{transform:translate(-153.7px)}}@keyframes logo-twinkle{0%,70%,to{transform:scale(1)rotate(0)}80%{transform:scale(1.5)rotate(45deg)}}