:root{color-scheme:light dark;--theme-primary: #4f46e5;--theme-secondary: #06b6d4;--theme-bg-light: #ffffff;--theme-bg-dark: #0b0f19;--color-primary: var(--theme-primary);--color-secondary: var(--theme-secondary);--accent: var(--color-primary);--accent-hover: color-mix(in srgb, var(--color-primary) 85%, black);--accent-text: #ffffff;--bg: var(--theme-bg-light);--surface: color-mix(in srgb, var(--bg) 95%, var(--color-primary) 5%);--surface-hover: color-mix(in srgb, var(--bg) 90%, var(--color-primary) 10%);--surface-active: color-mix(in srgb, var(--bg) 84%, var(--color-primary) 16%);--text: #0f172a;--muted: #64748b;--border: color-mix(in srgb, var(--bg) 84%, #000000 16%);--border-hover: color-mix(in srgb, var(--bg) 70%, #000000 30%);--danger: #cf222e;--danger-bg: #ffebe9;--success: #16a34a;--success-bg: #dafbe1;--font-sans: "Space Grotesk", "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;--font-display: "Space Grotesk", "Host Grotesk", sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--radius-sm: 6px;--radius: 8px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 9999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--container: 1540px;--prose: 68ch;--card-bg: var(--surface);--surface-card: var(--surface);--surface-secondary: color-mix(in srgb, var(--surface) 60%, var(--bg) 40%);--text-muted: var(--muted);--text-main: var(--text);--border-color: var(--border);--primary: var(--color-primary);--primary-hover: var(--accent-hover)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg: var(--theme-bg-dark, #0b0f19);--surface: color-mix(in srgb, var(--bg) 88%, #ffffff 12%);--surface-hover: color-mix(in srgb, var(--bg) 80%, #ffffff 20%);--surface-active: color-mix(in srgb, var(--bg) 72%, #ffffff 28%);--text: #f8fafc;--muted: #94a3b8;--border: color-mix(in srgb, var(--bg) 74%, #ffffff 26%);--border-hover: color-mix(in srgb, var(--bg) 62%, #ffffff 38%);--accent: var(--color-primary);--accent-hover: color-mix(in srgb, var(--color-primary) 85%, white);--accent-text: #ffffff;--danger: #f85149;--danger-bg: #3c1e1e;--success: #22c55e;--success-bg: #142e1d;--card-bg: var(--surface);--bg-subtle: color-mix(in srgb, var(--surface) 75%, var(--bg) 25%)}}:root[data-theme=dark]{color-scheme:dark;--bg: var(--theme-bg-dark, #0b0f19);--surface: color-mix(in srgb, var(--bg) 88%, #ffffff 12%);--surface-hover: color-mix(in srgb, var(--bg) 80%, #ffffff 20%);--surface-active: color-mix(in srgb, var(--bg) 72%, #ffffff 28%);--text: #f8fafc;--muted: #94a3b8;--border: color-mix(in srgb, var(--bg) 74%, #ffffff 26%);--border-hover: color-mix(in srgb, var(--bg) 62%, #ffffff 38%);--accent: var(--color-primary);--accent-hover: color-mix(in srgb, var(--color-primary) 85%, white);--accent-text: #ffffff;--danger: #f85149;--danger-bg: #3c1e1e;--success: #22c55e;--success-bg: #142e1d;--card-bg: var(--surface);--bg-subtle: color-mix(in srgb, var(--surface) 75%, var(--bg) 25%)}:root[data-theme=light]{color-scheme:light;--bg: var(--theme-bg-light, #ffffff);--surface: color-mix(in srgb, var(--bg) 95%, var(--color-primary) 5%);--surface-hover: color-mix(in srgb, var(--bg) 90%, var(--color-primary) 10%);--surface-active: color-mix(in srgb, var(--bg) 84%, var(--color-primary) 16%);--text: #0f172a;--muted: #64748b;--border: color-mix(in srgb, var(--bg) 84%, #000000 16%);--border-hover: color-mix(in srgb, var(--bg) 70%, #000000 30%)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:.975rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4{font-family:var(--font-display, var(--font-sans));font-weight:600;line-height:1.25;margin:0 0 var(--space-3);letter-spacing:-.02em;color:var(--text)}h1{font-size:1.85rem}h2{font-size:1.35rem;margin-top:var(--space-7)}h3{font-size:1.1rem;margin-top:var(--space-5)}@media(min-width:900px){h1{font-size:2.15rem}}p{margin:0 0 var(--space-4);max-width:var(--prose)}ol,ul{max-width:var(--prose);padding-left:var(--space-5);margin:0 0 var(--space-4)}li{margin-bottom:var(--space-2)}a{color:var(--accent);text-decoration:underline;text-underline-offset:.15em}a:hover{text-decoration-thickness:2px}code,pre,kbd{font-family:var(--font-mono);font-size:.875rem}code{background:var(--surface);border:1px solid var(--border);padding:.15em .35em;border-radius:4px}pre code{background:transparent;border:0;padding:0}.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}main{padding-block:var(--space-5) var(--space-8)}.site-footer{color:var(--muted);font-size:.875rem;border-top:1px solid var(--border);justify-content:space-between}.site-footer a{color:var(--muted)}.site-footer a:hover{color:var(--text)}.tool{display:flex;flex-direction:column;gap:var(--space-3);margin-block:var(--space-4)}.tool-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.controls-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.tool-panes{display:grid;grid-template-columns:1fr;gap:var(--space-4);height:clamp(620px,calc(100vh - 240px),1200px);min-height:620px}@media(min-width:900px){.tool-panes{grid-template-columns:1fr 1fr}}.pane{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px #0000000a}.pane-header{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);background:var(--surface);border-bottom:1px solid var(--border);min-height:42px}.pane-header label,.pane-header .pane-title{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0}.pane-actions{display:flex;align-items:center;gap:var(--space-2);font-size:.8rem;color:var(--muted)}.pane textarea,.pane .output{flex:1 1 0;width:100%;height:100%;min-height:0;border:none;border-radius:0;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:.875rem;line-height:1.55;padding:var(--space-3);outline:none;resize:none;overflow:auto;box-sizing:border-box}.pane .output{margin:0;white-space:pre;word-break:normal}.pane:focus-within{border-color:var(--accent)}button,.button{font-family:var(--font-sans);font-size:.875rem;font-weight:500;min-height:36px;padding:0 var(--space-3);border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}button:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-hover)}.button-primary,button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}.button-primary:hover:not(:disabled),button.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.button-secondary,button.secondary{background:var(--surface);border-color:var(--border);color:var(--text);font-weight:500}.button-secondary:hover:not(:disabled),button.secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--color-primary);color:var(--color-primary)}button:disabled{opacity:.45;cursor:not-allowed}input,select,textarea,.control-select{height:36px;padding:0 var(--space-3);font-family:var(--font-sans);font-size:.875rem;background-color:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm, 6px);outline:none;transition:border-color .15s ease,background-color .15s ease}textarea{height:auto;min-height:80px;padding:var(--space-2) var(--space-3);line-height:1.5}select,.control-select{padding-right:2rem;font-weight:500;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .625rem center;background-size:13px 13px}select:hover:not(:disabled),.control-select:hover:not(:disabled){border-color:var(--border-hover, var(--color-primary));background-color:var(--surface-hover)}select:focus,.control-select:focus,input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=url]:focus,input[type=password]:focus,input[type=search]:focus,textarea:focus,.control-input:focus,.form-control:focus{border-color:var(--color-primary);outline:2px solid var(--color-primary);outline-offset:1px}input[type=color]{-webkit-appearance:none;appearance:none;border:1px solid var(--border);border-radius:var(--radius-sm, 6px);width:36px;height:36px;padding:2px;background:var(--surface);cursor:pointer;vertical-align:middle;transition:border-color .15s ease}input[type=color]:hover{border-color:var(--color-primary)}input[type=color]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}input[type=color]::-moz-color-swatch{border:none;border-radius:4px}.color-palette,.ink-colors{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:9999px;padding:.25rem .5rem;min-height:32px;box-sizing:border-box;flex-shrink:0}button.color-dot,.color-dot{width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;min-height:24px!important;max-height:24px!important;aspect-ratio:1 / 1!important;flex-shrink:0!important;box-sizing:border-box!important;border-radius:50%!important;border:1px solid rgba(0,0,0,.15)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;cursor:pointer;outline:none;color:#fff;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease;position:relative;line-height:1!important}.color-dot.is-light{color:#0f172a}.color-dot:hover{transform:scale(1.14)}button.color-dot.active,.color-dot.active,.color-dot[aria-checked=true]{transform:scale(1.08);box-shadow:0 0 0 2px var(--surface),0 0 0 4.5px var(--color-primary);border-color:transparent!important}.color-dot .check-icon{width:13px;height:13px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:color-mix(in srgb,var(--border) 80%,var(--surface));border-radius:var(--radius-full, 9999px);outline:none;margin-block:.5rem;cursor:pointer;transition:background .15s ease}input[type=range]:focus{background:color-mix(in srgb,var(--border) 60%,var(--color-primary) 40%)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);border:2px solid #ffffff;box-shadow:0 1px 3px #0003;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);border:2px solid #ffffff;box-shadow:0 1px 3px #0003;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}input[type=range]::-webkit-slider-thumb:hover,input[type=range]::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 25%,transparent)}input[type=range]:focus::-webkit-slider-thumb,input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 35%,transparent)}input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:1.5px solid var(--border);border-radius:5px;background:var(--surface);cursor:pointer;display:inline-grid;place-content:center;vertical-align:middle;margin:0;transition:all .15s ease;position:relative;flex-shrink:0}input[type=checkbox]:hover{border-color:var(--color-primary);background:var(--surface-hover)}input[type=checkbox]:checked{background:var(--color-primary);border-color:var(--color-primary)}input[type=checkbox]:checked:after{content:"";width:5px;height:9px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:2px}input[type=checkbox]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:1.5px solid var(--border);border-radius:50%;background:var(--surface);cursor:pointer;display:inline-grid;place-content:center;vertical-align:middle;margin:0;transition:all .15s ease;position:relative;flex-shrink:0}input[type=radio]:hover{border-color:var(--color-primary);background:var(--surface-hover)}input[type=radio]:checked{border-color:var(--color-primary);background:var(--surface)}input[type=radio]:checked:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-primary)}input[type=radio]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}label:has(input[type=checkbox]),label:has(input[type=radio]),.checkbox-label{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.tabs-nav,.tab-list{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.375rem;padding:.3rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md, 10px);margin-bottom:1.25rem}.tab-btn,.tab-item,[role=tab]{height:34px;padding:0 .875rem;border-radius:var(--radius-sm, 6px);border:1px solid transparent;background:transparent;color:var(--muted);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-sans)}.tab-btn:hover,.tab-item:hover,[role=tab]:hover{color:var(--text);background:var(--surface-hover)}.tab-btn.active,.tab-item.active,[role=tab][aria-selected=true]{background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary);font-weight:600;border-color:transparent;box-shadow:none}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.error{color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger);border-radius:var(--radius);padding:var(--space-2) var(--space-3);font-size:.875rem;margin:var(--space-2) 0 0}.success{color:var(--success);background:var(--success-bg);border:1px solid var(--success);border-radius:var(--radius);padding:var(--space-2) var(--space-3);font-size:.875rem;margin:var(--space-2) 0 0}.muted{color:var(--muted)}.row-list{list-style:none;padding:0;margin:0;max-width:var(--prose)}.row-list li{padding-block:var(--space-3);border-bottom:1px solid var(--border)}.row-list li:last-child{border-bottom:0}.row-list .desc{display:block;color:var(--muted);font-size:.9rem;margin-top:var(--space-1)}.tool-body,.prose-content{font-size:.975rem;line-height:1.7;color:var(--text);max-width:840px}.prose-page{font-size:.975rem;line-height:1.7;color:var(--text);max-width:860px;margin:0 auto;padding:2.5rem 1.25rem 4rem}.tool-body h2,.prose-content h2,.prose-page h2{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-top:2.25rem;margin-bottom:.75rem;color:var(--text)}.tool-body h3,.prose-content h3,.prose-page h3{font-size:1.125rem;font-weight:600;letter-spacing:-.015em;margin-top:1.75rem;margin-bottom:.5rem;color:var(--text)}.tool-body p,.prose-content p,.prose-page p{margin-top:0;margin-bottom:1.125rem;max-width:none;color:color-mix(in srgb,var(--text) 92%,var(--muted))}.tool-body strong,.prose-content strong,.prose-page strong{font-weight:600;color:var(--text)}.tool-body code,.prose-content code,.prose-page code{font-family:var(--font-mono);font-size:.875em;background:var(--surface);border:1px solid var(--border);padding:.15rem .4rem;border-radius:4px}.tool-body ul,.prose-content ul,.prose-page ul,.tool-body ol,.prose-content ol,.prose-page ol{padding-left:1.35rem;margin-bottom:1.25rem;max-width:none}.tool-body li,.prose-content li,.prose-page li{margin-bottom:.35rem;line-height:1.65}.tool-body blockquote,.prose-content blockquote,.prose-page blockquote{border-left:3px solid var(--color-primary);margin:1.5rem 0;padding:.75rem 1.25rem;background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;color:var(--muted)}.tool-body table,.prose-content table,.prose-page table{width:100%;border-collapse:collapse;margin-block:1.5rem;font-size:.9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.tool-body th,.prose-content th,.prose-page th{text-align:left;padding:.75rem 1rem;background:color-mix(in srgb,var(--surface) 90%,var(--color-primary) 10%);border-bottom:2px solid var(--border);font-weight:600;color:var(--text)}.tool-body td,.prose-content td,.prose-page td{padding:.75rem 1rem;border-bottom:1px solid var(--border)}.tool-body tr:last-child td,.prose-content tr:last-child td,.prose-page tr:last-child td{border-bottom:0}.ad{margin-block:var(--space-6)}.ad-label{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)}.ad-box{min-height:280px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.is-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:99999!important;background:var(--bg)!important;padding:1rem 1.5rem!important;box-sizing:border-box!important;margin:0!important;overflow:auto!important;display:flex!important;flex-direction:column!important;gap:var(--space-3, .75rem)!important}.is-fullscreen .tool-panes,.is-fullscreen .editors-grid,.is-fullscreen .split-panes,.is-fullscreen .preview-container,.is-fullscreen .diff-container,.is-fullscreen .table-container,.is-fullscreen .pdf-workspace,.is-fullscreen .canvas-wrap,.is-fullscreen .crop-container{flex:1 1 0!important;min-height:0!important;height:100%!important}.is-fullscreen textarea,.is-fullscreen .code-editor,.is-fullscreen .diff-editor,.is-fullscreen pre.output-box{min-height:280px;height:100%}