:root{--cb-bg: #f6f8fa;--cb-text: #24292f;--cb-header-bg: #eaecef;--cb-header-border: #d0d7de;--cb-border: #d0d7de;--cb-shadow: 0 2px 8px rgba(0, 0, 0, .07);--cb-lang-color: var(--color-accent);--cb-btn-color: var(--color-text-secondary);--cb-btn-border: var(--color-border);--cb-btn-hover-bg: var(--color-surface-alt);--cb-btn-hover-border:var(--color-accent);--cb-copied: var(--color-success);--cb-scrollbar: #c0c4cc;--cb-scrollbar-bg: #f6f8fa;--t-comment: #6e7781;--t-punct: #24292f;--t-selector: #6f42c1;--t-property: #0550ae;--t-string: #0a3069;--t-number: #0550ae;--t-keyword: #cf222e;--t-function: #8250df;--t-tag: #116329;--t-attr-name: #953800;--t-attr-value: #0a3069;--t-important: #cf222e}[data-theme=dark]{--cb-bg: #1e1e1e;--cb-text: #d4d4d4;--cb-header-bg: #252526;--cb-header-border: #3c3c3c;--cb-border: #2d2d2d;--cb-shadow: 0 4px 16px rgba(0, 0, 0, .35);--cb-lang-color: #9cdcfe;--cb-btn-color: #abb2bf;--cb-btn-border: #4a4a4a;--cb-btn-hover-bg: #3c3c3c;--cb-btn-hover-border:#6a6a6a;--cb-copied: #4ec9b0;--cb-scrollbar: #4a4a4a;--cb-scrollbar-bg: #1e1e1e;--t-comment: #6a9955;--t-punct: #d4d4d4;--t-selector: #d7ba7d;--t-property: #9cdcfe;--t-string: #ce9178;--t-number: #b5cea8;--t-keyword: #569cd6;--t-function: #dcdcaa;--t-tag: #4ec9b0;--t-attr-name: #9cdcfe;--t-attr-value: #ce9178;--t-important: #569cd6}.hdr-badge{margin-bottom:var(--space-3);display:inline-flex}.tool-layout{display:grid;grid-template-columns:320px 1fr;gap:var(--space-8);align-items:start}.controls-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}.control-group{display:flex;flex-direction:column;gap:var(--space-2)}.control-header{display:flex;align-items:center;justify-content:space-between}.control-label{font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary)}.control-value{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-accent);min-width:52px;text-align:right}.text-input{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);outline:none;font-family:var(--font-sans)}.text-input:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 3px #3b82f633}.select-input{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);outline:none;font-family:var(--font-sans);cursor:pointer}.select-input:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 3px #3b82f633}.range-input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-full);background:var(--color-border);cursor:pointer;outline:none}.range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-accent);cursor:pointer;border:2px solid var(--color-surface);box-shadow:0 1px 3px #00000040;transition:transform var(--t-fast)}.range-input::-webkit-slider-thumb:hover{transform:scale(1.15)}.range-input::-webkit-slider-thumb:active{transform:scale(1)}.range-input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-accent);cursor:pointer;border:2px solid var(--color-surface);box-shadow:0 1px 3px #00000040}.range-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}.range-ticks{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted)}.color-row{display:flex;align-items:center;gap:var(--space-3)}.color-input{width:44px;height:44px;border-radius:var(--radius-md);border:1.5px solid var(--color-border);cursor:pointer;padding:3px;background:none;flex-shrink:0;-webkit-appearance:none;appearance:none}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:calc(var(--radius-md) - 2px)}.color-hex{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted);background:var(--color-surface-alt);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.reset-btn{width:100%;justify-content:center;margin-top:var(--space-1)}.output-panel{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}.preview-area{border:1px solid var(--color-border);border-radius:var(--radius-lg);min-height:160px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);overflow:hidden}.output-block{border:1px solid var(--cb-border);border-radius:var(--radius-lg);overflow:hidden;min-width:0;box-shadow:var(--cb-shadow)}.output-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--cb-header-border);background:var(--cb-header-bg);gap:var(--space-3)}.output-lang{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cb-lang-color)}.output-lang:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cb-lang-color);flex-shrink:0}.output-actions{display:flex;align-items:center;gap:var(--space-3)}.output-header .btn{color:var(--cb-btn-color);border-color:var(--cb-btn-border);background:transparent;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.02em}.output-header .btn:hover{color:var(--color-text-primary);border-color:var(--cb-btn-hover-border);background:var(--cb-btn-hover-bg);transform:none;box-shadow:none}.copy-feedback{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;color:var(--cb-copied)}.code-block{margin:0;padding:1.25rem 1.5rem;font-family:var(--font-mono);font-size:.8125rem;line-height:1.8;color:var(--cb-text);background:var(--cb-bg);overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--cb-scrollbar) var(--cb-scrollbar-bg)}.code-block::-webkit-scrollbar{height:6px}.code-block::-webkit-scrollbar-track{background:var(--cb-scrollbar-bg)}.code-block::-webkit-scrollbar-thumb{background:var(--cb-scrollbar);border-radius:3px}.code-block::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--t-comment);font-style:italic}.token.punctuation{color:var(--t-punct)}.token.property{color:var(--t-property)}.token.selector{color:var(--t-selector)}.token.string,.token.url{color:var(--t-string)}.token.number,.token.unit,.token.hex-color{color:var(--t-number)}.token.keyword{color:var(--t-keyword)}.token.function{color:var(--t-function)}.token.important{color:var(--t-important);font-weight:700}.token.tag{color:var(--t-tag)}.token.attr-name{color:var(--t-attr-name)}.token.attr-value,.token.attr-value .token.punctuation{color:var(--t-attr-value)}.seo-band{background:var(--color-surface);border-top:1px solid var(--color-border)}.seo-content{max-width:720px}.seo-content h2{font-size:var(--text-2xl);margin-bottom:var(--space-4)}.seo-content h3{font-size:var(--text-xl);margin-top:var(--space-8);margin-bottom:var(--space-4)}.seo-content p{margin-bottom:var(--space-4);line-height:1.75}.seo-content code{font-family:var(--font-mono);font-size:.9em;background:var(--color-code-bg);padding:2px 6px;border-radius:var(--radius-sm);color:var(--color-text-primary)}.guide-list{list-style:disc;padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.guide-list li{color:var(--color-text-secondary);line-height:1.6}.back-link{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-border)}.controls-panel{min-width:0}@media(max-width:900px){.tool-layout{grid-template-columns:1fr}}@media(max-width:640px){.controls-panel{padding:var(--space-4)}.output-header{flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3)}.output-actions{width:100%;justify-content:flex-end}.output-actions .btn{padding:var(--space-2) var(--space-3)}.code-block{padding:1rem;font-size:.75rem}}.related-band[data-astro-cid-3jd3xusc]{border-top:1px solid var(--color-border)}.related-heading[data-astro-cid-3jd3xusc]{font-size:var(--text-xl);margin-bottom:var(--space-6)}.related-grid[data-astro-cid-3jd3xusc]{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-5);list-style:none;margin:0;padding:0}.related-card[data-astro-cid-3jd3xusc]{display:flex;flex-direction:column;gap:var(--space-3)}.related-title[data-astro-cid-3jd3xusc]{font-size:var(--text-lg);margin:0}.related-desc[data-astro-cid-3jd3xusc]{font-size:var(--text-sm);color:var(--color-text-muted);flex:1;margin:0}.related-arrow[data-astro-cid-3jd3xusc]{font-size:var(--text-lg);color:var(--color-accent);transition:transform var(--t-fast);display:inline-block}.card-link[data-astro-cid-3jd3xusc]:hover .related-arrow[data-astro-cid-3jd3xusc]{transform:translate(4px)}