:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", "Roboto Mono", monospace;--bg: #ffffff;--bg-secondary: #f7f7f7;--bg-hover: #f0f0f0;--bg-input: #ffffff;--text: #0a0a0a;--text-secondary: #555555;--text-muted: #888888;--text-placeholder: #aaaaaa;--border: #cccccc;--border-light: #dddddd;--border-focus: #0a0a0a;--accent: #111111;--radius: 3px;--transition: 100ms ease;--max-width: 1140px;--sidebar-width: 220px;--diff-add: #1a7f37;--diff-add-bg: rgba(26, 127, 55, 0.08);--diff-del: #cf222e;--diff-del-bg: rgba(207, 34, 46, 0.08)}:root.dark{--bg: #111111;--bg-secondary: #191919;--bg-hover: #1e1e1e;--bg-input: #161616;--text: #e5e5e5;--text-secondary: #999999;--text-muted: #555555;--text-placeholder: #444444;--border: #333333;--border-light: #2a2a2a;--border-focus: #e5e5e5;--accent: #e5e5e5;--regex-hl: rgba(250, 204, 21, 0.25);--diff-add: #3fb950;--diff-add-bg: rgba(63, 185, 80, 0.12);--diff-del: #f85149;--diff-del-bg: rgba(248, 81, 73, 0.12)}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}[hidden]{display:none !important}::selection{background:var(--text);color:var(--bg)}html{font-size:15px}body{font-family:var(--font-sans);font-size:.875rem;line-height:1.5;color:var(--text);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased}a{color:var(--text);text-decoration:none}a:hover{text-decoration:underline}.header{border-bottom:1.5px solid var(--border);height:48px;display:flex;align-items:center;padding:0 24px;justify-content:space-between;position:sticky;top:0;background:var(--bg);z-index:100}.header__logo{display:flex;align-items:center;text-decoration:none}.header__logo:hover{text-decoration:none}.header__logo-img{height:22px;width:auto;display:block}.header__logo-img--dark{display:none}.header__right{display:flex;align-items:center;gap:20px}.header__nav{display:flex;gap:20px}.header__nav a{font-size:.8rem;color:var(--text-secondary)}.header__nav a:hover{color:var(--text);text-decoration:none}.header__theme-btn{font-family:var(--font-sans);font-size:.8rem;color:var(--text-secondary);background:none;border:none;cursor:pointer;padding:0;line-height:1}.header__theme-btn:hover{color:var(--text)}.header__search{position:relative}.header__search input{font-family:var(--font-sans);font-size:.8rem;padding:5px 10px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);width:200px;outline:none}.header__search input::placeholder{color:var(--text-placeholder)}.header__search input:focus{border-color:var(--border-focus)}.header__search kbd{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--font-sans);font-size:.65rem;color:var(--text-muted);border:1px solid var(--border);padding:1px 5px;border-radius:2px;line-height:1.4}@media(max-width: 640px){.header{padding:0 16px;gap:12px}.header__right{gap:14px}.header__nav{gap:14px}.header__search input{width:160px;padding-right:10px}.header__search kbd{display:none}}@media(max-width: 460px){.header__nav{display:none}.header__logo-img{height:20px}.header__right{flex:1;justify-content:flex-end;min-width:0}.header__search{flex:1;min-width:0}.header__search input{width:100%}}.home-intro{padding:48px 0 36px;max-width:560px;border-bottom:1px solid var(--border);margin-bottom:0}@media(max-width: 640px){.home-intro{padding:28px 0 24px}}.home-intro__title{font-size:1.4rem;font-weight:600;line-height:1.35;letter-spacing:-0.4px;margin-bottom:12px}.home-intro__desc{font-size:.875rem;color:var(--text-secondary);line-height:1.7;margin-bottom:20px}.home-intro__search input{font-family:var(--font-sans);font-size:.875rem;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);width:100%;max-width:360px;outline:none}.home-intro__search input::placeholder{color:var(--text-placeholder)}.home-intro__search input:focus{border-color:var(--border-focus)}.home-empty{padding:32px 0;font-size:.875rem;color:var(--text-muted)}.search-results{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;max-width:320px;max-height:60vh;overflow-y:auto;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 24px rgba(0,0,0,.12);z-index:200}.search-results__item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 12px;color:var(--text);text-decoration:none}.search-results__item:hover{text-decoration:none}.search-results__item.active{background:var(--bg-hover)}.search-results__title{font-size:.8rem}.search-results__cat{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}.search-results__empty{padding:9px 12px;font-size:.8rem;color:var(--text-muted)}@media(max-width: 460px){.search-results{left:0;right:0;max-width:none}}.tool-section{padding:32px 0}.tool-section+.tool-section{border-top:1px solid var(--border)}.tool-section__title{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}.tool-links{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:0}.tool-link{display:block;padding:7px 0;font-size:.875rem;color:var(--text);text-decoration:none}.tool-link:hover{text-decoration:underline}.tool-layout{display:flex;min-height:calc(100vh - 48px)}.sidebar{width:var(--sidebar-width);border-right:1.5px solid var(--border);padding:20px 0;flex-shrink:0;overflow-y:auto;height:calc(100vh - 48px);position:sticky;top:48px}@media(max-width: 860px){.sidebar{display:none}}.sidebar__group{margin-bottom:20px}.sidebar__title{font-size:.7rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;padding:0 20px;margin-bottom:4px}.sidebar__link{display:block;padding:4px 20px;font-size:.8rem;color:var(--text-muted);text-decoration:none;border-left:2px solid rgba(0,0,0,0)}.sidebar__link:hover{color:var(--text);text-decoration:none}.sidebar__link.active{color:var(--text);font-weight:500;border-left-color:var(--text)}.main{flex:1;min-width:0;padding:24px 32px}@media(max-width: 860px){.main{padding:20px 16px}}.tool-header{margin-bottom:20px}.tool-header__title{font-size:1.25rem;font-weight:600;letter-spacing:-0.3px;margin-bottom:4px}.tool-header__desc{font-size:.8rem;color:var(--text-secondary)}.options{display:flex;align-items:center;gap:16px;padding:10px 0;margin-bottom:12px;border-bottom:1px solid var(--border);flex-wrap:wrap}.options__group{display:flex;align-items:center;gap:6px}.options__label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.options__text-input{font-family:var(--font-mono);font-size:.75rem;padding:4px 8px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);outline:none;width:160px;flex:1;min-width:120px;max-width:360px}.options__text-input:focus{border-color:var(--border-focus)}.options__text-input::placeholder{color:var(--text-placeholder)}@media(max-width: 480px){.options__text-input{max-width:none}}.options .toggle-opt{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}.options .toggle-opt input[type=checkbox]{display:none}.options .toggle-opt__track{width:28px;height:16px;background:var(--border);border-radius:8px;position:relative;transition:background 150ms ease;flex-shrink:0}.options .toggle-opt__track::after{content:"";position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform 150ms ease}.options .toggle-opt__label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.options .toggle-opt:has(input:checked) .toggle-opt__track{background:var(--text)}.options .toggle-opt:has(input:checked) .toggle-opt__track::after{transform:translateX(12px)}.options select,.options input[type=number]{font-family:var(--font-sans);font-size:.75rem;padding:4px 6px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none}.options select:focus,.options input[type=number]:focus{border-color:var(--border-focus)}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;height:max(480px,60vh)}@media(max-width: 700px){.workspace{grid-template-columns:1fr;height:auto;max-height:none}}.workspace--no-input{grid-template-columns:1fr;height:auto;max-height:max(480px,60vh)}@media(max-width: 700px){.workspace:not(.workspace--no-input):not(.workspace--color) .panel{height:55vh;min-height:300px}.panel__actions{gap:14px}.panel__btn{padding:4px 1px}}.panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}.panel+.panel{border-left:1.5px solid var(--border)}@media(max-width: 700px){.panel+.panel{border-left:none;border-top:1.5px solid var(--border)}}.panel__bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1.5px solid var(--border);background:var(--bg-secondary);flex-shrink:0}.panel__bar--inner{border-top:1.5px solid var(--border)}.panel__label{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-weight:600;display:flex;align-items:baseline;gap:0}.panel__label-parens{font-weight:normal;letter-spacing:0;color:var(--text-muted)}.panel__label-filename{font-family:var(--font-mono);font-size:.7rem;font-weight:normal;text-transform:none;letter-spacing:0;color:var(--text-muted);background:rgba(0,0,0,0);border:none;outline:none;width:80px;padding:0 1px;line-height:inherit}.panel__label-filename:focus{color:var(--text-secondary)}.panel__actions{display:flex;align-items:center;gap:8px}.panel__sep{width:1px;height:10px;background:var(--border);flex-shrink:0}.panel__btn{font-family:var(--font-sans);font-size:.7rem;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:2px 0}.panel__btn:hover{color:var(--text)}.panel__btn:disabled{opacity:.5;cursor:default}.panel__url-bar{display:flex;align-items:center;gap:6px;padding:5px 12px;border-bottom:1.5px solid var(--border);background:var(--bg-secondary);flex-shrink:0}.panel__url-input{flex:1;font-family:var(--font-mono);font-size:.75rem;padding:2px 6px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);outline:none;min-width:0}.panel__url-input:focus{border-color:var(--border-focus)}.panel__url-input::placeholder{color:var(--text-placeholder)}.panel__body{flex:1;position:relative;overflow:auto;min-height:0}.panel textarea{position:absolute;top:0;left:0;width:100%;height:100%;padding:12px;font-family:var(--font-mono);font-size:.8rem;line-height:1.7;color:var(--text);background:var(--bg-input);border:none;outline:none;resize:none}.panel textarea::placeholder{color:var(--text-placeholder)}.panel__output{padding:12px;font-family:var(--font-mono);font-size:.8rem;line-height:1.7;white-space:pre-wrap;word-break:break-all;color:var(--text)}.code-editor{position:absolute;top:0;left:0;width:100%;height:100%}.code-editor__highlight{position:absolute;top:0;left:0;width:100%;height:100%;padding:12px;margin:0;font-family:var(--font-mono);font-size:.8rem;line-height:1.7;white-space:pre-wrap;word-break:break-all;overflow:auto;background:var(--bg-input);pointer-events:none;tab-size:2}.code-editor__highlight code{font-family:inherit;font-size:inherit;line-height:inherit;background:none;padding:0;display:block;color:var(--text)}.code-editor textarea{position:absolute;top:0;left:0;width:100%;height:100%;padding:12px;font-family:var(--font-mono);font-size:.8rem;line-height:1.7;white-space:pre-wrap;word-break:break-all;overflow:auto;background:rgba(0,0,0,0);color:rgba(0,0,0,0);caret-color:var(--text);-webkit-text-fill-color:rgba(0,0,0,0);border:none;outline:none;resize:none;z-index:1;tab-size:2}.code-editor textarea::placeholder{-webkit-text-fill-color:var(--text-placeholder);color:var(--text-placeholder)}.code-editor textarea::selection{background:rgba(100,100,100,.3);-webkit-text-fill-color:rgba(0,0,0,0)}:root{--hl-keyword: #7c3aed;--hl-string: #16a34a;--hl-number: #b45309;--hl-comment: var(--text-muted);--hl-tag: #dc2626;--hl-attr: #b45309;--hl-builtin: #2563eb;--hl-section: #2563eb;--hl-literal: #b45309;--hl-punctuation: var(--text-secondary)}:root.dark{--hl-keyword: #a78bfa;--hl-string: #4ade80;--hl-number: #fbbf24;--hl-tag: #f87171;--hl-attr: #fbbf24;--hl-builtin: #60a5fa;--hl-section: #60a5fa;--hl-literal: #fbbf24;--hl-punctuation: var(--text-secondary)}.hljs-keyword,.hljs-selector-tag{color:var(--hl-keyword)}.hljs-string,.hljs-doctag,.hljs-regexp{color:var(--hl-string)}.hljs-number,.hljs-literal{color:var(--hl-number)}.hljs-comment{color:var(--hl-comment);font-style:italic}.hljs-tag,.hljs-name{color:var(--hl-tag)}.hljs-attr,.hljs-attribute{color:var(--hl-attr)}.hljs-built_in,.hljs-type,.hljs-selector-class{color:var(--hl-builtin)}.hljs-section,.hljs-title{color:var(--hl-section)}.hljs-meta,.hljs-meta .hljs-keyword{color:var(--hl-punctuation)}.hljs-symbol,.hljs-bullet{color:var(--hl-literal)}.hljs-deletion{color:var(--diff-del)}.hljs-addition{color:var(--diff-add)}.editor-settings-wrap{position:relative;display:flex;align-items:center}.editor-settings-btn{position:relative}.editor-settings{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;z-index:50;min-width:140px;display:flex;flex-direction:column;gap:8px}.editor-settings__row{display:flex;align-items:center;justify-content:space-between;gap:8px}.editor-settings__label{font-size:.65rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.editor-settings__btns{display:flex;gap:0}.editor-settings__opt{font-family:var(--font-sans);font-size:.65rem;padding:2px 8px;background:var(--bg);color:var(--text-muted);border:1px solid var(--border);cursor:pointer;line-height:1.4}.editor-settings__opt:first-child{border-radius:var(--radius) 0 0 var(--radius)}.editor-settings__opt:last-child{border-radius:0 var(--radius) var(--radius) 0}.editor-settings__opt+.editor-settings__opt{border-left:none}.editor-settings__opt:hover{color:var(--text)}.editor-settings__opt.active{background:var(--text);color:var(--bg);border-color:var(--text)}.btn{font-family:var(--font-sans);font-size:.75rem;padding:4px 14px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);cursor:pointer;transition:background var(--transition)}.btn:hover{background:var(--bg-hover)}.btn--primary{background:var(--text);color:var(--bg);border-color:var(--text)}.btn--primary:hover{opacity:.85;background:var(--text)}.related{margin-top:40px;padding-top:24px;border-top:1px solid var(--border)}.related__title{font-size:.7rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}.related__list{display:flex;flex-wrap:wrap;gap:0 24px}.related__link{font-size:.8rem;color:var(--text-muted);padding:4px 0}.related__link:hover{color:var(--text)}.workspace--color{display:block;min-height:480px}.workspace--color .panel{display:none}.color-tool{display:flex;border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;min-height:480px}@media(max-width: 600px){.color-tool{flex-direction:column;min-height:0}}.color-picker-panel{flex:0 0 36%;border-right:1.5px solid var(--border);background:var(--bg);display:flex;flex-direction:column}@media(max-width: 600px){.color-picker-panel{flex:none;width:100%;border-right:none;border-bottom:1.5px solid var(--border)}}.color-sb-area{position:relative;flex:1;cursor:crosshair;min-height:320px;user-select:none;-webkit-user-select:none}.color-sb-area canvas{display:block;width:100%;height:100%}.color-sb-cursor{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.5);transform:translate(-50%, -50%);pointer-events:none;top:0;left:0}.color-hue-wrap{padding:11px 16px;border-top:1.5px solid var(--border)}.color-hue-input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;border-radius:6px;background:linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);outline:none;cursor:pointer;border:none}.color-hue-input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:1.5px solid rgba(0,0,0,.2);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}.color-hue-input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:1.5px solid rgba(0,0,0,.2);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}.color-values-panel{flex:1;display:flex;flex-direction:column;min-width:0}.color-preview{flex:1;min-height:160px;background:#ff6b35;display:flex;align-items:flex-end;padding:16px 20px}.color-preview__hex{font-family:var(--font-mono);font-size:1.1rem;font-weight:600;letter-spacing:1px;color:hsla(0,0%,100%,.92);text-shadow:0 1px 6px rgba(0,0,0,.5)}.color-rows{padding:18px 20px;display:flex;flex-direction:column;gap:11px;background:var(--bg-secondary);border-top:1.5px solid var(--border)}.color-row{display:flex;align-items:center;gap:8px}.color-row__label{width:32px;flex-shrink:0;font-size:.65rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}.color-row__input{flex:1;font-family:var(--font-mono);font-size:.82rem;padding:6px 9px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);outline:none;min-width:0;transition:border-color 120ms ease}.color-row__input:focus{border-color:var(--border-focus)}.color-row__input::placeholder{color:var(--text-placeholder)}.color-row__copy{flex-shrink:0;width:48px;text-align:center}.large-warn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;min-height:120px;padding:24px;text-align:center}.large-warn__text{font-size:.8rem;color:var(--text-muted)}.large-warn__size{color:var(--text-secondary);font-weight:600}.large-warn__btn{font-family:var(--font-sans);font-size:.75rem;padding:5px 16px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);cursor:pointer}.large-warn__btn:hover{background:var(--bg-hover)}.swatch-row{display:flex;align-items:center;gap:12px;padding:6px 0}.swatch-row+.swatch-row{border-top:1px solid var(--border-light)}.swatch{width:32px;height:32px;flex-shrink:0;border:1.5px solid var(--border);border-radius:var(--radius)}.swatch-label{font-family:var(--font-mono);font-size:.8rem;color:var(--text);user-select:all}.workspace--diff{display:flex;flex-direction:column;border:none;min-height:0}.diff-inputs{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;height:max(300px,35vh)}@media(max-width: 700px){.diff-inputs{grid-template-columns:1fr;height:auto;max-height:none}.diff-inputs .panel{height:42vh;min-height:220px}}.diff-inputs .panel+.panel{border-left:1.5px solid var(--border)}@media(max-width: 700px){.diff-inputs .panel+.panel{border-left:none;border-top:1.5px solid var(--border)}}.diff-output-panel{border:1.5px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);max-height:max(200px,35vh)}.diff-output-panel .panel__output{white-space:pre;word-break:normal;overflow-x:auto}.diff-summary{color:var(--text-muted);font-size:.75rem}.diff-add{color:var(--diff-add);background:var(--diff-add-bg);display:block;margin:0 -12px;padding:0 12px}.diff-del{color:var(--diff-del);background:var(--diff-del-bg);display:block;margin:0 -12px;padding:0 12px}.diff-ctx{color:var(--text-muted)}:root{--regex-hl: #fef08a}.regex-pattern-row{display:flex;align-items:center;padding:8px 12px;border-bottom:1.5px solid var(--border);gap:4px;background:var(--bg-input);flex-shrink:0}.regex-pattern-row input{font-family:var(--font-mono);font-size:.8rem;color:var(--text);background:rgba(0,0,0,0);border:none;outline:none}.regex-pattern-row input::placeholder{color:var(--text-placeholder)}.regex-pattern-row #regex-pattern{flex:1;min-width:0}.regex-pattern-row #regex-flags{width:48px;flex-shrink:0;color:var(--text-secondary)}.regex-slash{font-family:var(--font-mono);font-size:.9rem;color:var(--text-muted);user-select:none;flex-shrink:0}.regex-output{padding:12px;font-family:var(--font-mono);font-size:.8rem;line-height:1.7;overflow:auto;height:100%}.regex-count{font-size:.75rem;color:var(--text-muted);margin-bottom:10px}.regex-preview{white-space:pre-wrap;word-break:break-all;margin-bottom:14px;padding:8px 10px;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border-light);line-height:1.9}mark.regex-match{background:var(--regex-hl);color:inherit;border-radius:2px;padding:0 1px}.regex-matches{color:var(--text);white-space:pre-wrap}.footer{border-top:1.5px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;font-size:.7rem;color:var(--text-muted);margin-top:auto}.footer a{color:var(--text-muted)}.footer a:hover{color:var(--text-secondary)}.footer__links{display:flex;gap:16px}@media(max-width: 480px){.footer{padding:14px 16px}}:root.dark .header__logo-img--light{display:none}:root.dark .header__logo-img--dark{display:block}