:root{--brand:oklch(57.72% .2324 260);--brand-hover:oklch(48.8% .243 264.376);--brand-ink:oklch(42.4% .199 265.638);--brand-wash:oklch(93.2% .032 255.6/.45);--ok-ink:oklch(43.2% .095 166.913);--ok-wash:oklch(96.2% .043 156.7/.57);--ok-mark:oklch(59.6% .145 163.225);--warn-wash:oklch(93.1% .107 94.6/.2);--warn-line:oklch(85% .08 90/.6);--warn-ink:oklch(45% .11 60);--warn-body:#4f4635;--hairline:#ebebeb;--line:#1414141a;--subtle:#737373;--strong:#171717;--ink:#26262b;--faint:#a3a3a3;--canvas:#fbfbfb;--surface:#fff;--recessed:#f4f4f5;--wide:1120px;--prose:52rem;--measure:46rem;--font:"Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;--ring:0 0 0 1px var(--hairline);--ring-strong:0 0 0 1px var(--line);--lift:0 0 0 1px var(--line), 0 4px 14px #0000000f}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--font);color:var(--ink);background:var(--canvas);font-feature-settings:"palt" 1;margin:0;font-size:14px;line-height:1.7}a{color:var(--brand-ink);text-underline-offset:3px}a:hover{text-decoration-thickness:2px}textarea:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline-offset:2px;outline:2px solid #141414}h1,h2,h3,h4{color:var(--strong);margin:0;font-weight:600;line-height:1.5}h1{font-size:clamp(24px,3vw,32px);line-height:1.35}p,ul,ol,dl,table{margin:0 0 12px}ul,ol{padding-left:1.4em}li{margin-bottom:6px}img{max-width:100%;height:auto}summary::-webkit-details-marker{display:none}.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:24px}.prose{width:min(100%, var(--prose))}.prose.narrow{width:min(100%, var(--measure))}.stack>*+*{margin-top:12px}[hidden]{display:none!important}.site-head{background:var(--surface);box-shadow:0 1px 0 var(--hairline)}.site-head .wrap{flex-wrap:wrap;align-items:center;gap:20px;min-height:56px;display:flex}.brand{color:var(--strong);margin-right:auto;font-size:15px;font-weight:600;text-decoration:none}.brand span{color:var(--brand)}.site-nav{flex-wrap:wrap;gap:20px;display:flex}.site-nav a{color:var(--subtle);font-size:14px;text-decoration:none}.site-nav a:hover{color:var(--strong)}.site-nav a[aria-current=page]{color:var(--strong);font-weight:500}.site-foot{box-shadow:0 -1px 0 var(--hairline);background:var(--surface);margin-top:80px;padding:36px 0 44px}.site-foot .cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px 36px;display:grid}.site-foot h2{margin:0 0 10px;font-size:13px}.site-foot ul{gap:7px;margin:0;padding:0;list-style:none;display:grid}.site-foot li{margin:0}.site-foot a{color:var(--subtle);font-size:13px;text-decoration:none}.site-foot a:hover{color:var(--strong)}.copyright{color:var(--faint);margin:28px 0 0;font-size:12px}.hero{padding:48px 0 0}.eyebrow{background:var(--brand-wash);color:var(--brand-ink);border-radius:999px;align-items:center;gap:6px;margin:0;padding:3px 10px;font-size:12px;font-weight:500;display:inline-flex}.eyebrow.free{background:var(--ok-wash);color:var(--ok-ink)}.eyebrow+h1{margin-top:14px}.lede{color:var(--subtle);max-width:var(--measure);margin:10px 0 0;font-size:14px;line-height:1.9}.lede strong{color:var(--strong);font-weight:600}.crumb{color:var(--subtle);margin:0 0 12px;font-size:12px}.crumb a{color:var(--subtle);text-decoration:none}.crumb a:hover{color:var(--strong)}.crumb span{margin:0 6px}.crumb b{color:var(--strong);font-weight:400}.tool{background:var(--surface);box-shadow:var(--lift);border-radius:14px;margin-top:24px;overflow:hidden}.tool .bar{box-shadow:0 1px 0 var(--hairline);flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;display:flex}.tool .bar .spacer{flex:1}.tool .panes{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));display:grid}.tool .inputs{flex-direction:column;gap:14px;min-width:0;padding:16px;display:flex}.tool .out{background:var(--canvas);box-shadow:-1px 0 0 var(--hairline);flex-direction:column;gap:10px;min-width:0;min-height:320px;padding:16px;display:flex}@media (width<=729px){.tool .out{box-shadow:0 -1px 0 var(--hairline);min-height:180px}}.tool.flat{flex-direction:column;gap:12px;padding:16px;display:flex}.tool.flat .row>input{flex:1;width:auto;min-width:240px}.tool.flat .row>.hint{white-space:nowrap;align-self:center}.tool label{color:var(--strong);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.tool .field{flex-direction:column;flex:1;display:flex}.tool textarea,.tool input[type=text],.tool input[type=url],.tool input[type=number]{width:100%;font:inherit;color:var(--ink);background:var(--surface);box-shadow:var(--ring-strong);resize:vertical;border:0;border-radius:9px;padding:9px 11px;font-size:14px;line-height:1.8}.tool textarea{flex:1;min-height:190px}@media (width<=729px){.tool textarea,.tool input[type=text],.tool input[type=url],.tool input[type=number]{font-size:16px}}.gauge{align-items:center;gap:12px;margin-top:9px;display:flex}.gauge .track{background:var(--recessed);border-radius:999px;flex:1;height:5px;overflow:hidden}.gauge .fill{background:var(--brand);border-radius:999px;height:100%;transition:width .15s ease-out}.gauge .fill.over{background:var(--warn-ink)}.gauge .num{font-feature-settings:"tnum" 1;color:var(--subtle);white-space:nowrap;font-size:12px}.opt{flex-direction:column;gap:5px;display:flex}.opt>span{color:var(--strong);font-size:13px;font-weight:500}.segc{background:var(--recessed);border-radius:10px;flex-wrap:wrap;align-self:flex-start;gap:2px;padding:3px;display:inline-flex}.sego{font:inherit;cursor:pointer;color:var(--subtle);white-space:nowrap;background:0 0;border:0;border-radius:7px;padding:5px 12px;font-size:13px;font-weight:500}.sego:hover{color:var(--strong)}.sego[aria-selected=true]{background:var(--surface);color:var(--strong);box-shadow:0 0 0 1px #14141414,0 1px 2px #0000000f}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.hint{color:var(--subtle);margin:0;font-size:12px;line-height:1.75}.pill{background:var(--recessed);color:#404040;white-space:nowrap;font-feature-settings:"tnum" 1;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:500}.pill.free{background:var(--ok-wash);color:var(--ok-ink)}.btn{font:inherit;cursor:pointer;white-space:nowrap;color:#fff;text-shadow:0 1px 1px oklch(0% 0 0/.15);background:linear-gradient(oklch(62% .2324 260),oklch(54% .2324 260));border:0;border-radius:9px;padding:8px 20px;font-size:14px;font-weight:500;text-decoration:none;display:inline-block;box-shadow:inset 0 1px oklch(100% 0 0/.22),inset 0 -1px oklch(0% 0 0/.18),0 1px 2px #0000002e}.btn:hover{background:linear-gradient(to bottom, oklch(57% .235 262), var(--brand-hover))}.btn[disabled]{opacity:.55;cursor:default}.btn-ghost,.copy-btn{font:inherit;cursor:pointer;white-space:nowrap;box-shadow:var(--ring-strong), inset 0 1px 0 #fff, 0 1px 2px #00000012;color:var(--strong);text-shadow:none;background:linear-gradient(#fff,#f6f6f7);border:0;border-radius:7px;padding:4px 11px;font-size:12px;font-weight:500;text-decoration:none;display:inline-block}.btn-ghost:hover,.copy-btn:hover{background:linear-gradient(#f8f8f9,#efeff1)}.btn-sm{padding:4px 11px;font-size:12px}.out h3{margin:0;font-size:13px}.out .body{white-space:pre-wrap;color:var(--ink);flex:1;margin:0;font-size:14px;line-height:2}.out .meta{font-feature-settings:"tnum" 1;color:var(--subtle);font-size:12px}.out .empty{text-align:center;flex:1;place-items:center;display:grid}.out .empty p{color:var(--faint);max-width:26ch;margin:0;font-size:13px;line-height:1.9}.out .redo{box-shadow:0 -1px 0 var(--hairline);flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;display:flex}.notice{background:var(--warn-wash);box-shadow:0 0 0 1px var(--warn-line);border-radius:10px;padding:12px 14px}.notice strong{color:var(--warn-ink);margin-bottom:4px;font-size:13.5px;font-weight:600;display:block}.notice p{color:var(--warn-body);white-space:pre-wrap;margin:0;font-size:13px;line-height:1.9}.notice .row{margin-top:10px}.cite-box{background:var(--canvas);box-shadow:var(--ring);border-radius:10px;padding:4px 14px}.cite-box h3{margin:12px 0 4px;font-size:13px}.cite-list{margin:0;padding:0;list-style:none}.cite-list li{box-shadow:0 -1px 0 var(--hairline);margin:0;padding:12px 0}.cite-head{align-items:center;gap:10px;display:flex}.cite-head .spacer{flex:1}.cite-style{letter-spacing:.03em;background:var(--brand-wash);color:var(--brand-ink);font-feature-settings:"tnum" 1;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600}.cite-text{word-break:break-word;margin:7px 0 0;font-size:14px;line-height:1.85}section{margin-top:72px}section>h2{margin:0 0 16px;font-size:20px}.duo{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:48px;margin-top:72px;display:grid}.duo>section,.duo>div>section{margin-top:0}.duo .col{align-content:start;gap:48px;display:grid}.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;display:grid}.card{background:var(--surface);box-shadow:var(--ring);border-radius:12px;padding:16px}.card h3{margin:0 0 4px;font-size:14px}.card p{color:var(--subtle);margin:0;font-size:13px;line-height:1.8}.uselist{gap:16px;display:grid}.uselist>div{gap:2px;display:grid}.uselist h3{margin:0;font-size:14px}.uselist p{color:var(--subtle);margin:0;font-size:13px;line-height:1.8}.steps{counter-reset:s;gap:16px;margin:0;padding:0;list-style:none;display:grid}.steps li{counter-increment:s;grid-template-columns:32px 1fr;margin:0;display:grid}.steps li:before{content:counter(s);background:var(--brand-wash);width:24px;height:24px;color:var(--brand-ink);font-feature-settings:"tnum" 1;border-radius:999px;grid-row:span 2;align-self:start;place-items:center;font-size:12px;font-weight:600;display:grid}.steps b{color:var(--strong);font-size:14px;font-weight:600;display:block}.steps p{color:var(--subtle);margin:2px 0 0;font-size:13px;line-height:1.8}.audience{gap:10px;margin:0;padding:0;list-style:none;display:grid}.audience li{margin:0;padding-left:22px;font-size:13px;line-height:1.8;position:relative}.audience li:before{content:"✓";color:var(--ok-mark);font-weight:600;position:absolute;left:0}.audience b{color:var(--strong);font-weight:600}.audience span{color:var(--subtle)}.hub{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;display:grid}.hub a{color:inherit;background:var(--surface);box-shadow:var(--ring);border-radius:12px;padding:13px 15px;text-decoration:none;display:block}.hub a:hover{background:#f5f5f5;text-decoration:none}.hub b{color:var(--strong);margin-bottom:2px;font-size:14px;font-weight:600;display:block}.hub span{color:var(--subtle);font-size:13px;line-height:1.7}.faq details{border-bottom:1px solid var(--hairline)}.faq summary{cursor:pointer;color:var(--strong);align-items:flex-start;gap:10px;padding:14px 2px;font-size:14px;font-weight:500;list-style:none;display:flex}.faq summary:before{content:"Q";color:var(--brand);font-weight:600}.faq .a{color:var(--subtle);padding:0 2px 16px 24px;font-size:13px;line-height:1.9}.faq .a p{margin:0 0 .7em}.faq .a p:last-child{margin-bottom:0}.cta{background:var(--brand-wash);border-radius:14px;flex-wrap:wrap;align-items:center;gap:20px;padding:20px;display:flex}.cta>div{flex:1;min-width:280px}.cta h2{margin:0 0 4px;font-size:17px}.cta p{color:#3f4a5c;margin:0;font-size:13px;line-height:1.85}.article{margin-top:56px}.hero+.article{margin-top:40px}.article h2{margin:32px 0 10px;font-size:20px}.article h2:first-child{margin-top:0}.article h3{margin:22px 0 6px;font-size:15px}.article p{margin:0 0 12px;line-height:1.9}.article ul,.article ol{margin:0 0 12px;padding-left:1.4em}.article li{margin-bottom:6px;line-height:1.9}.article strong{color:var(--strong);font-weight:600}.article small{color:var(--subtle);font-size:12px}.article code{background:var(--recessed);border-radius:5px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;font-size:.9em}.article blockquote{border-left:3px solid var(--brand);background:var(--surface);box-shadow:var(--ring);color:var(--subtle);border-radius:0 10px 10px 0;margin:0 0 12px;padding:10px 14px;line-height:1.9}.article table{border-collapse:collapse;background:var(--surface);width:100%;box-shadow:var(--ring);border-radius:10px;margin:0 0 12px;overflow:hidden}.article th{text-align:left;color:var(--subtle);border-bottom:1px solid var(--hairline);background:var(--recessed);white-space:nowrap;padding:9px 12px;font-size:12px;font-weight:600}.article td{border-bottom:1px solid var(--hairline);vertical-align:top;padding:10px 12px;line-height:1.8}.article tr:last-child td{border-bottom:0}.example{background:var(--surface);box-shadow:var(--ring);border-radius:12px;margin:0 0 12px;padding:14px 16px}.example h3,.example h4{color:var(--subtle);margin:0 0 6px;font-size:12px;font-weight:600}.example p{word-break:break-word;margin:0;line-height:1.9}.example p+p{margin-top:.7em}.example.mail h3{color:var(--strong);align-items:center;gap:8px;margin:0 0 8px;font-size:13px;display:flex}.example.mail h3:before{content:"";background:var(--brand);border-radius:999px;flex:none;width:5px;height:5px}.example.mail p{color:#3d3d42;font-size:13.5px;line-height:2}.pitfall{background:var(--warn-wash);box-shadow:0 0 0 1px var(--warn-line)}.pitfall h3{color:var(--warn-ink);margin:0 0 6px;font-size:13.5px;font-weight:600}.pitfall p{color:var(--warn-body);font-size:13px;line-height:1.9}.updated{color:var(--faint);margin-top:40px;font-size:12px}.rw{background:var(--brand-wash);border-radius:14px;margin-top:72px;padding:20px}.rw>h2{margin:0 0 4px;font-size:20px}.rw-note{color:#3f4a5c;max-width:var(--measure);margin:0 0 14px;font-size:13px;line-height:1.85}.rw .tool{margin-top:0}.rw .tool textarea{min-height:150px}.found{background:var(--warn-wash);box-shadow:0 0 0 1px var(--warn-line);border-radius:10px;padding:10px 12px}.found h4{color:var(--warn-ink);margin:0 0 6px;font-size:12px;font-weight:600}.found ul{gap:6px;margin:0;padding:0;list-style:none;display:grid}.found li{color:var(--warn-body);margin:0;font-size:12px;line-height:1.75}.found b{color:var(--warn-ink);font-weight:600;display:block}.alt-table td:first-child{white-space:nowrap}.tag{background:var(--recessed);color:#404040;white-space:nowrap;border-radius:999px;margin-top:4px;padding:1px 8px;font-size:11px;font-weight:500;display:inline-block}@media (width<=700px){.wrap{padding-inline:16px}.site-head .wrap{gap:12px 16px;padding:8px 16px}section,.duo{margin-top:48px}.duo,.duo .col{gap:32px}.site-foot{margin-top:56px}.article table{display:block;overflow-x:auto}.alt-table td{min-width:180px}.rw{padding:14px}}