@font-face{font-family:InterVariable;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable.woff2)format("woff2")}@font-face{font-family:InterVariable;font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable-Italic.woff2)format("woff2")}:root{--paper:#fff;--translation-gradient:linear-gradient(125deg, #d9591d 0%, #c9401f 38%, #c9401f 68%, #b83520 100%);--translation-ink:#fff;--sheet:#fbf9f4;--ink:#1b1a17;--ink-soft:#514c43;--ink-faint:#625b50;--rule:#ddd6c6;--red:#c9401f;--green:#1f7d59;--blue:#2e56cf;--sans:InterVariable, Inter, system-ui, -apple-system, sans-serif;--serif:var(--sans);--mono:var(--sans);--measure:34rem;--gutter:clamp(1.5rem, 5vw, 4rem);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html{scrollbar-width:none;background:var(--paper);margin:0;padding:0;font-size:16px}html::-webkit-scrollbar{display:none}body{background:var(--paper);color:var(--ink);font:1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;padding:0}body.session-active{background:#000;overflow:hidden}video{pointer-events:none;object-fit:fill;background:#000;display:none;position:absolute;top:0;left:0}body.session-active video{display:block}#intro{z-index:2000;position:relative}.github-corner{z-index:1;fill:var(--ink);color:var(--paper);position:absolute;top:0;right:0}.github-corner svg{border:0;display:block}.github-corner:hover .octo-arm{transform-origin:130px 106px;animation:.56s ease-in-out octocat-wave}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{transform-origin:130px 106px;animation:.56s ease-in-out octocat-wave}}@media (prefers-reduced-motion:reduce){.github-corner .octo-arm,.github-corner:hover .octo-arm{animation:none}}.guide{max-width:58rem;padding:clamp(2.25rem, 5vw, 3.5rem) var(--gutter) 3rem;margin:0 auto}.masthead{text-align:center}.wordmark{font-family:var(--serif);letter-spacing:-.02em;margin:0;font-size:clamp(2rem,5vw,2.75rem);font-weight:400;line-height:1.05}.tagline{max-width:32rem;color:var(--ink-soft);margin:.5rem auto 0;font-size:1.0625rem;line-height:1.5}.actions{flex-direction:column;align-items:center;gap:1.25rem;margin-top:clamp(2rem,4vw,2.75rem);display:flex}.unsupported{border:1px solid var(--red);max-width:30rem;font-family:var(--mono);color:var(--red);border-radius:10px;margin:1.375rem auto 0;padding:.75rem 1.125rem;font-size:.75rem;line-height:1.55}.hint{font-family:var(--mono);color:var(--ink-faint);margin:1.375rem 0 0;font-size:.75rem;line-height:1.55}#share-btn{font-family:var(--serif);cursor:pointer;color:var(--paper);background:var(--ink);border:none;border-radius:999px;padding:1rem 2.25rem;font-size:1.0625rem;line-height:1;transition:transform .15s,background .15s}#share-btn:disabled{cursor:not-allowed;color:var(--ink-faint);background:var(--rule)}#share-btn:disabled:hover{background:var(--rule);transform:none}#share-btn:hover{background:var(--red);transform:translateY(-1px)}#share-btn:active{transform:translateY(0)scale(.985)}#share-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.desktop-demo{max-width:40rem;margin:clamp(2.25rem,5vw,3rem) auto 0;container-type:inline-size}.desktop-monitor{padding:clamp(4px,.85cqw,8px);background:linear-gradient(#f5f6f5,#e9ebe9);border:1px solid #e2e4e2;border-radius:clamp(4px,.9cqw,8px);padding-bottom:clamp(6px,1.25cqw,11px);box-shadow:0 10px 24px -22px #2b3a3459}.desktop-screen{aspect-ratio:16/9;background:linear-gradient(150deg,#f7f8f5,#eef1ee 55%,#e6ecea);border-radius:0;overflow:hidden;box-shadow:inset 0 0 0 1px #1b332b0f}.desktop-stand{flex-direction:column;align-items:center;margin-bottom:12px;display:flex}.desktop-neck{aspect-ratio:12/5;background:#e7eae8;width:16%;-webkit-mask:radial-gradient(11% 26% at 50% 0,#0000 98%,#000 100%);mask:radial-gradient(11% 26% at 50% 0,#0000 98%,#000 100%)}.desktop-foot{background:#dde1df;width:20%;height:clamp(3px,.8cqw,6px)}.desktop-caption{text-align:center;color:var(--ink-soft);margin:0;font-size:12px}.compare{box-sizing:border-box;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-content:center;align-items:start;gap:clamp(6px,1.7cqw,14px);height:100%;padding:clamp(10px,3.4cqw,29px);display:grid}.compare-arrow{color:var(--red);opacity:.75;align-self:center;display:flex}.compare-arrow svg{width:clamp(15px,4.2cqw,34px);height:auto}.browser{flex-direction:column;min-width:0;margin:0;display:flex}.browser-bar{background:var(--sheet);border:1px solid var(--rule);border-bottom:none;border-radius:8px 8px 0 0;align-items:center;gap:.375rem;padding:.5rem .625rem;display:flex}.mock-dot{background:var(--rule);border-radius:50%;width:.5rem;height:.5rem}.browser-url{background:var(--paper);min-width:0;font-family:var(--mono);color:var(--ink-faint);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;flex:1;margin-left:.25rem;padding:.15rem .5rem;font-size:.5625rem;overflow:hidden}.browser-page{background-color:var(--sheet);border:1px solid var(--rule);background-image:url(/example-waves.svg);background-position:50%;background-size:cover;border-radius:0 0 8px 8px;padding:.875rem .875rem 1.125rem}.browser-page p{font-family:var(--serif);color:var(--ink-faint);margin:0 0 .3rem;font-size:.8125rem;line-height:1.55}.browser-page p:last-child{margin-bottom:0}.browser-page .browser-title{color:var(--ink);margin-bottom:.55rem;font-size:1.0625rem;line-height:1.3}.hl{-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--translation-ink);background:var(--translation-gradient) fixed;background-size:100vw 100vh;border-radius:3px;margin:0 -.15em;padding:.05em .3em}.compare figcaption{text-align:center;margin-top:.875rem}.example-badge{cursor:pointer;color:var(--ink-soft);white-space:nowrap;background:linear-gradient(#fff,#f8f6f1);border:1px solid #dfdbd2;border-radius:999px;align-items:center;gap:.35rem;padding:.375rem .75rem;font-size:.6875rem;line-height:1.4;display:inline-flex;position:relative;box-shadow:inset 0 1px #fff,0 2px 4px #40331b08}.example-badge strong{font-weight:600}.example-badge:after{content:"";border-bottom:1px solid;border-right:1px solid;width:.42em;height:.42em;margin:-.25em .08em 0 .4em;transform:rotate(45deg)}.badge-select{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.example-badge:hover{border-color:currentColor}.example-badge:focus-within{outline-offset:3px;outline:2px solid}.example-badge:has(select:disabled){opacity:.5;cursor:not-allowed}.badge-select:disabled{cursor:not-allowed}.example-badge.is-translated{color:#a63b20;background:linear-gradient(#fffaf7,#fceee7);border-color:#efcbbc}.desktop-demo .browser-bar{gap:clamp(2px,.65cqw,6px);padding:clamp(4px,1cqw,8px)}.desktop-demo .mock-dot{width:clamp(3px,.9cqw,7px);height:clamp(3px,.9cqw,7px)}.desktop-demo .browser-url{margin-left:0;padding:.15em .6em;font-size:clamp(6px,1.4cqw,11px)}.desktop-demo .browser-page{min-height:24cqw;padding:clamp(6px,1.7cqw,14px)}.desktop-demo .browser-page p{margin-bottom:.4em;font-size:clamp(7px,2.05cqw,16px)}.desktop-demo .browser-page .browser-title{margin-bottom:.55em;font-size:clamp(9px,2.7cqw,21px)}.desktop-demo .example-badge{gap:.3em;padding:.45em .85em;font-size:clamp(7px,2.05cqw,16px)}.desktop-demo .compare figcaption{margin-top:clamp(7px,1.7cqw,14px)}.how{max-width:46rem;margin:clamp(2.25rem,5vw,3rem) auto 0}.how-heading{text-align:center;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem;font-size:.625rem;font-weight:500}.how-grid{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.25rem;display:grid}.how-item{border-top:2px solid var(--rule);padding-top:.75rem}.how-item p{color:var(--ink-soft);margin:0;font-size:.9375rem;line-height:1.5}.how-title{font-family:var(--serif);color:var(--tone,var(--ink));margin:0 0 .15rem;font-size:1.0625rem;font-style:italic;font-weight:400}.how a,.colophon a{color:inherit;text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:1px;-webkit-text-decoration-color:var(--ink-faint);text-decoration-color:var(--ink-faint)}.how a:hover,.colophon a:hover{text-decoration-color:currentColor}.colophon{text-align:center;margin-top:clamp(2.5rem,6vw,3.5rem);padding-top:1.25rem}.colophon p{font-family:var(--mono);color:var(--ink-faint);margin:0;font-size:.75rem}.tone-red{--tone:var(--red);--on-tone:#fff}.tone-green{--tone:var(--green);--on-tone:#fff}.tone-blue{--tone:var(--blue);--on-tone:#fff}.lang-controls{border-radius:999px;align-items:center;gap:4px;padding:5px;display:inline-flex}.lang-field{cursor:pointer;border-radius:999px;transition:background-color .15s;display:flex;position:relative}.lang-label{text-transform:uppercase;letter-spacing:.09em;opacity:1;pointer-events:none;font-size:.5625rem;font-weight:600;line-height:1;position:absolute;top:6px}.lang-select{appearance:none;letter-spacing:-.01em;cursor:pointer;background-color:#0000;background-position:right 14px top calc(50% + 5px),right 9px top calc(50% + 5px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;border:none;border-radius:999px;margin:0;padding:15px 30px 5px 15px;font-family:inherit;font-size:.875rem;font-weight:600;line-height:1.2;transition:background-color .15s}.lang-controls.is-disabled{color:var(--ink-soft)}.lang-controls.is-disabled .lang-field,.lang-controls.is-disabled .lang-select,.lang-controls.is-disabled .lang-swap{cursor:not-allowed}.lang-swap{width:34px;height:34px;font-family:var(--sans);cursor:pointer;border-radius:999px;flex:none;justify-content:center;align-items:center;font-size:1rem;line-height:1;transition:background-color .15s,color .15s,transform .35s cubic-bezier(.34,1.56,.64,1);display:inline-flex}#intro-lang{display:flex}.lang-controls{background:var(--sheet);border:1px solid var(--rule);padding:8px}.lang-controls .lang-label{color:var(--ink);left:22px}.lang-controls .lang-select{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);font-family:var(--serif);background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);padding:16px 38px 6px 22px;font-size:1.0625rem;font-weight:400}.lang-controls .lang-field:hover{background-color:var(--paper)}.lang-controls .lang-select:focus-visible{outline:2px solid var(--blue);outline-offset:1px}.lang-controls .lang-swap{color:#fff;background-color:var(--red);border:none;width:38px;height:38px}.lang-controls .lang-swap:hover{background-color:var(--ink)}.lang-controls.intro{color:var(--ink-soft);background:0 0;border:none;border-radius:0;flex-wrap:wrap;justify-content:center;gap:.35rem;padding:0}.lang-controls.intro .lang-field{border-radius:0;align-items:baseline;gap:.25rem}.lang-controls.intro .lang-label{color:var(--ink-soft);text-transform:none;letter-spacing:normal;font-size:.9375rem;font-weight:400;line-height:1.5;position:static}.lang-controls.intro .lang-select{field-sizing:content;text-underline-offset:4px;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:right 7px center,right 2px center;border-radius:2px;padding:.2rem 1.25rem .2rem 0;font-size:.9375rem;font-weight:500;text-decoration:underline;text-decoration-thickness:1px}.lang-controls.intro .lang-field:hover{background:0 0}#lang-bar{z-index:2100;display:none;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}#lang-bar.visible{animation:.4s cubic-bezier(.34,1.56,.64,1) lang-bar-in;display:block}@keyframes lang-bar-in{0%{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%)}}#translate-overlay{z-index:900;pointer-events:none;contain:strict;position:absolute;top:0;left:0;overflow:hidden}.translate-boxes{contain:layout paint style;will-change:transform;width:100%;height:100%;position:absolute;inset:0}.translate-box{background-image:var(--translation-gradient);background-size:var(--gradient-width) var(--gradient-height);background-position:var(--gradient-x) calc(var(--gradient-y) - var(--gradient-scroll,0px));color:var(--translation-ink);font-family:var(--sans);box-sizing:border-box;overflow-wrap:anywhere;white-space:normal;text-align:left;transform-origin:0 0;contain:layout paint style;background-color:#c9401f;background-repeat:no-repeat;border-radius:4px;justify-content:flex-start;align-items:center;padding:4px;line-height:1.15;display:flex;position:absolute;overflow:hidden}.translate-box.is-single-line{white-space:nowrap;overflow-wrap:normal}.translate-box.is-centered{text-align:center;justify-content:center}.translate-status{-webkit-backdrop-filter:blur(12px);color:#fff;font-family:var(--sans);letter-spacing:-.01em;pointer-events:none;text-align:center;overflow-wrap:anywhere;z-index:2200;background:#000000b3;border:1px solid #ffffff59;border-radius:999px;max-width:min(680px,100vw - 48px);padding:8px 16px;font-size:13px;font-weight:500;line-height:1.35;position:fixed;top:24px;left:50%;transform:translate(-50%)}.translate-status:empty{display:none}#perf-hud{z-index:3000;color:#8dff9c;font:11px/1.45 var(--mono);pointer-events:none;background:#000000d1;border:1px solid #ffffff4d;border-radius:8px;margin:0;padding:10px 12px;position:fixed;top:12px;right:12px}@media (prefers-reduced-motion:reduce){#lang-bar.visible{animation:none}.lang-swap{transition:background-color .15s}#share-btn:disabled{cursor:not-allowed;color:var(--ink-faint);background:var(--rule)}#share-btn:disabled:hover{background:var(--rule);transform:none}#share-btn:hover{transform:none}}.pipe-demo{border-top:1px solid var(--rule);margin-top:56px;padding:24px 0 8px}.pipe-stage{isolation:isolate;grid-template-columns:minmax(0,1fr) clamp(88px,22%,148px) minmax(0,1fr);align-items:center;height:170px;display:grid;position:relative;container-type:inline-size}.pipe-lane{height:50px;position:relative;overflow:hidden}.pipe-lane-in{-webkit-mask-image:linear-gradient(90deg,#0000,#000 20%,#000);mask-image:linear-gradient(90deg,#0000,#000 20%,#000)}.pipe-lane-out{--pipe-art-width:calc(clamp(88px, 22cqw, 148px) + 20px);--mouth-radius:calc(var(--pipe-art-width) * 7 / 184);z-index:2;margin-left:calc(10px - var(--pipe-art-width) * 28 / 184);height:calc(var(--pipe-art-width) * 66 / 184);clip-path:polygon(var(--mouth-radius) 0, 100% 0, 100% 100%, var(--mouth-radius) 100%, calc(var(--mouth-radius) * .34) 87.5%, calc(var(--mouth-radius) * .08) 70%, 0 50%, calc(var(--mouth-radius) * .08) 30%, calc(var(--mouth-radius) * .34) 12.5%);-webkit-mask-image:linear-gradient(90deg,#000,#000 80%,#0000);mask-image:linear-gradient(90deg,#000,#000 80%,#0000)}.pipe-track{width:max-content;height:100%;animation:18s linear infinite pipe-flow;display:flex}.pipe-word-group{flex:none;align-items:center;display:flex}.pipe-word{box-sizing:border-box;text-align:center;white-space:nowrap;letter-spacing:-.04em;flex:none;width:170px;padding-right:30px;font-size:clamp(12px,2.4vw,20px);font-weight:550}.pipe-lane-out .pipe-word{color:#237b36}.translation-pipe{z-index:1;filter:drop-shadow(0 7px 5px #214d2926);width:calc(100% + 20px);max-width:none;height:auto;margin-left:-10px;display:block;position:relative;overflow:visible}@keyframes pipe-flow{0%{transform:translate(-50%)}to{transform:translate(0)}}@media (prefers-reduced-motion:reduce){.pipe-stage *{animation:none}.pipe-track,.pipe-word-group{justify-content:center;width:100%}.pipe-word-group+.pipe-word-group,.pipe-word+.pipe-word{display:none}.pipe-word{width:auto;padding:0}}