:root{--cb-bg:#fbfcfe;--cb-text:#24292f;--cb-header-bg:#f1f4f8;--cb-header-border:#d0d7de;--cb-border:#d0d7de;--cb-shadow:0 2px 8px #0f172a09;--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}[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 #00000059;--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}.hdr-badge{margin-bottom:var(--space-3);display:inline-flex}.tool-layout{gap:var(--space-6);grid-template-columns:minmax(260px,304px) minmax(0,1fr);align-items:start;display:grid}.controls-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);gap:var(--space-5);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.control-group{gap:var(--space-2);flex-direction:column;display:flex}.control-header{justify-content:space-between;align-items:center;display:flex}.control-label{font-size:var(--text-sm);color:var(--color-text-primary);font-weight:600}.control-value{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent);text-align:right;min-width:52px;font-weight:600}.text-input{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-sans)}.text-input:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 3px #3b82f633}.range-input{-webkit-appearance:none;appearance:none;border-radius:var(--radius-full);background:linear-gradient(var(--color-border), var(--color-border)) center / 100% 6px no-repeat;cursor:pointer;width:100%;height:24px}.range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--color-accent);cursor:pointer;border:2px solid var(--color-surface);width:18px;height:18px;transition:transform var(--t-fast);border-radius:50%;box-shadow:0 1px 3px #00000040}.range-input::-webkit-slider-thumb:hover{transform:scale(1.15)}.range-input::-webkit-slider-thumb:active{transform:scale(1)}.range-input::-moz-range-thumb{background:var(--color-accent);cursor:pointer;border:2px solid var(--color-surface);border-radius:50%;width:18px;height:18px;box-shadow:0 1px 3px #00000040}.range-ticks{font-size:var(--text-xs);color:var(--color-text-muted);justify-content:space-between;display:flex}.color-row{align-items:center;gap:var(--space-3);display:flex}.color-input{border-radius:var(--radius-md);border:1px solid var(--color-border);cursor:pointer;-webkit-appearance:none;appearance:none;background:0 0;flex-shrink:0;width:44px;height:44px;padding:3px}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border-radius:calc(var(--radius-md) - 2px);border:none}.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%;margin-top:var(--space-1);justify-content:center}.output-panel{gap:var(--space-6);flex-direction:column;min-width:0;display:flex}.preview-area{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);justify-content:center;align-items:center;min-height:160px;display:flex;overflow:auto}.output-block{border:1px solid var(--cb-border);border-radius:var(--radius-lg);min-width:0;box-shadow:var(--cb-shadow);overflow:hidden}.output-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--cb-header-border);background:var(--cb-header-bg);justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.output-lang{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--cb-lang-color);align-items:center;gap:6px;font-weight:700;display:inline-flex}.output-lang:before{content:"";background:var(--cb-lang-color);border-radius:50%;flex-shrink:0;width:8px;height:8px}.output-actions{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.output-header .btn{color:var(--cb-btn-color);border-color:var(--cb-btn-border);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.02em;background:0 0}.output-header .btn:hover{color:var(--color-text-primary);border-color:var(--cb-btn-hover-border);background:var(--cb-btn-hover-bg);box-shadow:none;transform:none}.copy-feedback{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--cb-copied);font-weight:600}.code-block{font-family:var(--font-mono);color:var(--cb-text);background:var(--cb-bg);white-space:pre;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--cb-scrollbar) var(--cb-scrollbar-bg);margin:0;padding:1.25rem 1.5rem;font-size:.875rem;line-height:1.75;overflow-x:auto}.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)}.seo-band{background:var(--color-surface);border-top:1px solid var(--color-border)}.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 :not(pre)>code{font-family:var(--font-mono);background:var(--color-code-bg);border-radius:var(--radius-sm);color:var(--color-text-primary);padding:2px 6px;font-size:.9em}.guide-list{padding-left:var(--space-6);gap:var(--space-3);margin-bottom:var(--space-4);flex-direction:column;list-style:outside;display:flex}.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 (width<=900px){.tool-layout{grid-template-columns:1fr}}@media (width<=640px){.controls-panel{padding:var(--space-4)}.output-header{gap:var(--space-2);padding:var(--space-2) var(--space-3);flex-wrap:wrap}.output-actions{justify-content:flex-end;width:100%}.output-actions .btn{padding:var(--space-2) var(--space-3)}.code-block{padding:1rem;font-size:.8125rem}}.output-header{flex-wrap:wrap}.copy-feedback{overflow-wrap:anywhere;flex-basis:100%;margin:0}.copy-feedback:empty{display:none}.copy-feedback[data-state=error]{color:var(--color-error)}.tool-breadcrumbs{margin-bottom:var(--space-6);font-size:var(--text-sm)}.tool-breadcrumbs ol{gap:var(--space-2);flex-wrap:wrap;display:flex}.tool-breadcrumbs li+li:before{content:"/";margin-right:var(--space-2);color:var(--color-text-muted)}.tool-notice{padding:var(--space-4);margin-bottom:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-md)}.range-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}textarea.text-input{resize:vertical;min-height:180px;font-family:var(--font-mono);line-height:1.5}.tool-error{color:var(--color-error);font-size:var(--text-sm);white-space:pre-wrap;overflow-wrap:anywhere}.tool-error:empty{display:none}.tool-help{font-size:var(--text-sm);color:var(--color-text-muted)}.tool-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.preview-frame{border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;width:100%;min-height:240px}@media (width<=640px){.text-input,.select-input{font-size:16px}}.container.tool-workspace-container{max-width:1480px;padding-inline:24px}.tool-workspace{width:100%;min-width:0}.tool-panel-heading{align-items:center;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border);margin:0;display:flex}.tool-panel-heading h2{color:var(--color-text-primary);letter-spacing:-.01em;margin:0;font-size:1rem;font-weight:700;line-height:1.4}.tool-panel-heading:before{content:"";background:var(--color-accent);border-radius:2px;flex-shrink:0;width:3px;height:16px}.output-panel>.tool-panel-heading{padding-top:var(--space-1)}.control-group{min-width:0}.control-header{gap:var(--space-3)}.control-label{line-height:1.5}.control-label input[type=checkbox]{accent-color:var(--color-accent);margin-right:.4rem}.text-input,.select-input{min-height:44px;transition:border-color var(--t-fast), box-shadow var(--t-fast);line-height:1.5}.text-input:hover,.select-input:hover{border-color:var(--color-text-muted)}.text-input::placeholder{color:var(--color-text-muted);opacity:1}.text-input[aria-invalid=true]{border-color:var(--color-error)}.tool-help{margin:0;line-height:1.6}.tool-actions{align-items:center}.controls-panel>.btn:last-child{justify-content:center;width:100%}.preview-area{box-shadow:inset 0 1px 2px #0f172a09}.output-block{isolation:isolate}.output-header{min-height:60px}.output-header .btn{border-radius:6px;min-height:34px}.output-lang{flex-shrink:0}.output-actions{gap:var(--space-2);margin-left:auto}.output-panel .output-block .code-block{min-height:5.5rem}.seo-content .code-block{border:1px solid var(--cb-border);border-radius:var(--radius-md);margin:var(--space-5) 0}.tool-breadcrumbs{line-height:1.5}.tool-breadcrumbs [aria-current=page]{color:var(--color-text-muted)}@media (width<=900px){.tool-layout{gap:var(--space-6)}.output-panel>.tool-panel-heading{padding-top:0}}@media (width<=640px){.tool-panel-heading{padding-bottom:var(--space-3)}.output-panel{gap:var(--space-4)}.output-header{min-height:56px;padding:var(--space-3)}.output-actions{justify-content:flex-start;margin-left:0}.output-actions .btn{flex:auto;justify-content:center}}.tool-breadcrumbs{font:11px/1.5 var(--font-mono);color:var(--color-text-muted)}.seo-band{background:var(--color-bg)}.seo-content{max-width:820px}@media (width<=600px){.container.tool-workspace-container{padding-inline:23px}}