:root{--primary-50:#fefce8;--primary-100:#fef9c3;--primary-200:#fef08a;--primary-300:#fde047;--primary-400:#facc15;--primary-500:#eab308;--primary-600:#ca8a04;--primary-700:#a16207;--primary-800:#854d0e;--primary-900:#713f12;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-700:#334155;--gray-900:#0f172a;--bg:#ffffff;--bg-subtle:var(--gray-50);--surface:#ffffff;--border:var(--gray-200);--border-strong:var(--gray-300);--text:var(--gray-700);--text-strong:var(--gray-900);--text-muted:var(--gray-500);--link:var(--primary-700);--ink:var(--primary-400);--ink-inverse:#1c1917;--code-bg:var(--gray-50);--code-border:var(--gray-200);--font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--radius:6px;--radius-lg:8px;--shadow-1:0 1px 2px rgba(15,23,42,0.06);--container:1200px}[data-theme=dark]{--bg:#0b1120;--bg-subtle:#0f172a;--surface:#0f172a;--border:#1e293b;--border-strong:#334155;--text:#cbd5e1;--text-strong:#f1f5f9;--text-muted:#94a3b8;--link:var(--primary-300);--ink:var(--primary-400);--ink-inverse:#1c1917;--code-bg:#020617;--code-border:#1e293b}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3{color:var(--text-strong);line-height:1.25}p{margin:0 0 var(--sp-4)}a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}img,svg{vertical-align:middle}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px;border-radius:2px}[data-theme=dark] :focus-visible{outline-color:var(--primary-400)}.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-6)}.site-header{border-bottom:1px solid var(--border);background:var(--bg)}.site-header .container{gap:var(--sp-6);height:64px}.brand,.site-header .container{display:flex;align-items:center}.brand{gap:var(--sp-2);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--text-strong)}.brand:hover{text-decoration:none}.brand svg{display:block}.brand .logo-dark,[data-theme=dark] .brand .logo-light{display:none}[data-theme=dark] .brand .logo-dark{display:block}.site-nav{display:flex;gap:var(--sp-2);margin-left:auto}.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-3);color:var(--text);font-size:15px;border-radius:var(--radius)}.site-nav a:hover{color:var(--text-strong);text-decoration:none;background:var(--bg-subtle)}@media (max-width:480px){.site-nav a:not(.nav-tools){display:none}}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--text)}.theme-toggle:hover{border-color:var(--border-strong);color:var(--text-strong)}.theme-toggle .icon-moon,[data-theme=dark] .theme-toggle .icon-sun{display:none}[data-theme=dark] .theme-toggle .icon-moon{display:block}.site-footer{border-top:1px solid var(--border);margin-top:var(--sp-16);padding:var(--sp-8) 0;font-size:14px;color:var(--text-muted)}.site-footer .container{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}.site-footer nav{margin-left:auto;display:flex;gap:var(--sp-4)}.site-footer a{color:var(--text-muted);min-height:44px;display:inline-flex;align-items:center}.btn,.site-footer a:hover{color:var(--text-strong)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-4);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}.btn:hover{background:var(--bg-subtle);border-color:var(--gray-400)}.btn:active{transform:translateY(.5px)}.btn-primary{background:var(--primary-400);border-color:var(--primary-400);color:#1c1917}.btn-primary:hover{background:var(--primary-300);border-color:var(--primary-300)}.btn-quiet{border-color:transparent;background:transparent}.btn-quiet:hover{background:var(--bg-subtle);border-color:transparent}.tool-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-2);background:var(--bg-subtle);border:1px solid var(--border);border-radius:999px;width:-moz-fit-content;width:fit-content;max-width:100%}.tool-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-5);border-radius:999px;font-size:15px;font-weight:500;color:var(--text)}.tool-tabs a:hover{text-decoration:none;color:var(--text-strong)}.tool-tabs a.active{background:var(--ink);color:var(--ink-inverse)}.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2);font-size:14px;color:var(--text-muted)}.breadcrumb li{display:flex;align-items:center;gap:var(--sp-2)}.breadcrumb li+li:before{content:"›";color:var(--gray-400)}.breadcrumb a{color:var(--text-muted)}.breadcrumb a:hover{color:var(--text-strong)}.breadcrumb [aria-current]{color:var(--text)}.tool-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1);padding:var(--sp-6);margin:var(--sp-5) 0}.tool-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--sp-4);gap:var(--sp-4)}@media (max-width:768px){.tool-grid{grid-template-columns:1fr}}.ctl-label,.tool-grid label{display:block;font-size:13px;font-weight:600;color:var(--text-strong);margin-bottom:var(--sp-2)}.tool-grid textarea{width:100%;min-height:280px;resize:vertical;padding:var(--sp-3);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--code-bg);color:var(--text-strong);font-family:var(--font-mono);font-size:13px;line-height:1.6}.tool-grid textarea:focus{border-color:var(--primary-500);outline:none}.tool-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}.tool-actions .spacer{flex:1 1}.tool-note{font-size:13px;color:var(--text-muted);margin-top:var(--sp-3)}.tool-note.warn{color:#b45309;font-weight:500}[data-theme=dark] .tool-note.warn{color:var(--primary-300)}.checks{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-4)}.check{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:14px;color:var(--text);cursor:pointer}.check input{width:16px;height:16px;accent-color:var(--primary-500);margin:0;flex:none}.copied{color:var(--primary-700);font-weight:600;font-size:13px;align-self:center}[data-theme=dark] .copied{color:var(--primary-300)}.dv-grid{display:grid;grid-template-columns:320px 1fr;grid-gap:var(--sp-6);gap:var(--sp-6)}@media (max-width:768px){.dv-grid{grid-template-columns:1fr}}.ctl{margin-bottom:var(--sp-4)}.ctl input[type=color]{width:44px;height:32px;padding:2px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);cursor:pointer;vertical-align:middle}.ctl-value{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);margin-left:var(--sp-2)}.ctl input[type=range]{width:100%;accent-color:var(--primary-500);cursor:pointer;background:transparent}.seg{display:flex;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden}.seg label{flex:1 1;position:relative;cursor:pointer}.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}.seg span{display:flex;align-items:center;justify-content:center;min-height:40px;font-size:13px;color:var(--text)}.seg input:checked+span{background:var(--ink);color:var(--ink-inverse);font-weight:600}.dv-preview{border:1px dashed var(--border-strong);border-radius:var(--radius);padding:var(--sp-8) var(--sp-5);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);background-image:linear-gradient(45deg,var(--bg-subtle) 25%,transparent 25%,transparent 75%,var(--bg-subtle) 75%);background-size:16px 16px;background-position:0 0,8px 8px}.code-out{width:100%;min-height:84px;resize:vertical;padding:var(--sp-3);border:1px solid var(--code-border);border-radius:var(--radius);background:var(--code-bg);color:var(--text-strong);font-family:var(--font-mono);font-size:13px;line-height:1.6}.doc{max-width:800px}.doc h2{font-size:22px;margin:var(--sp-10) 0 var(--sp-4)}.doc h3{font-size:17px;margin:var(--sp-6) 0 var(--sp-3)}.doc ol,.doc ul{margin:0 0 var(--sp-4) 22px}.doc li{margin-bottom:var(--sp-2)}.doc pre{background:var(--code-bg);border:1px solid var(--code-border);border-radius:var(--radius);padding:var(--sp-4);overflow-x:auto;margin-bottom:var(--sp-4)}.doc pre code{font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--text-strong)}.doc table{border-collapse:collapse;width:100%;margin-bottom:var(--sp-4);font-size:14px}.doc td,.doc th{border:1px solid var(--border);padding:var(--sp-2) var(--sp-3);text-align:left}.doc th{background:var(--bg-subtle);color:var(--text-strong)}.doc details{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);background:var(--surface)}.doc details summary{cursor:pointer;font-weight:600;color:var(--text-strong);min-height:32px;display:flex;align-items:center}.doc details p:last-child{margin-bottom:0}.doc .steps li{margin-bottom:var(--sp-3)}.doc .steps li::marker{color:var(--primary-700);font-weight:700}.last-updated{font-size:13px;color:var(--text-muted);margin-top:var(--sp-8)}.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-gap:var(--sp-4);gap:var(--sp-4);margin-top:var(--sp-4)}.related-card{display:block;border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-4);background:var(--surface)}.related-card:hover{text-decoration:none;border-color:var(--primary-600);box-shadow:var(--shadow-1)}.related-card b{display:block;color:var(--text-strong);margin-bottom:var(--sp-1)}.related-card span{font-size:13.5px;color:var(--text-muted)}.hero{padding:var(--sp-10) 0 var(--sp-2)}.hero h1{font-size:clamp(26px,4vw,34px);margin-bottom:var(--sp-2)}.hero .sub{font-size:16px;color:var(--text-muted);max-width:720px}.home-section{padding:var(--sp-6) 0}.site-about{background:var(--bg-subtle);border-top:1px solid var(--border);margin-top:var(--sp-10);padding:var(--sp-10) 0}.site-about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:var(--sp-6);gap:var(--sp-6)}.site-about-grid h2{font-size:17px;margin-bottom:var(--sp-2)}.site-about-grid p{font-size:14.5px;color:var(--text-muted);margin:0}.site-about-grid svg{color:var(--primary-600);flex:none}@media (max-width:480px){.brand span{display:none}}.page{max-width:800px}.page h1{font-size:30px;margin:var(--sp-10) 0 var(--sp-4)}.page h2{font-size:20px;margin:var(--sp-8) 0 var(--sp-3)}