.tool-panel{--tool-accent:var(--cyan);--title-glow:var(--glow-cyan-md);padding:2rem}.tool-head{margin-bottom:1.6rem}.tool-label{letter-spacing:.2em;color:var(--text-dim);margin-bottom:.7rem;font-size:.75rem}.tool-title{text-transform:uppercase;color:var(--text);text-shadow:var(--title-glow);margin-bottom:.5rem;font-size:clamp(1.4rem,3vw,2rem)}.tool-desc{color:var(--text-dim);max-width:62ch;font-size:1.02rem}.tool-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:1.4rem;display:grid}.tool-grid>*{min-width:0}@media (max-width:820px){.tool-grid{grid-template-columns:1fr}.tool-panel{padding:1.4rem}}.tool-input,.tool-output,.tool-field input,.tool-field textarea{background:var(--input-bg);border:1px solid var(--line);width:100%;color:var(--text);font-family:var(--font-mono);clip-path:var(--clip-sm);font-size:.9rem;line-height:1.6}.tool-input::placeholder,.tool-output::placeholder,.tool-field input::placeholder,.tool-field textarea::placeholder{color:var(--text-dim);opacity:.7}.tool-input:focus,.tool-output:focus,.tool-field input:focus,.tool-field textarea:focus{border-color:var(--tool-accent);outline:none}.tool-input,.tool-output{resize:vertical;min-height:180px;box-shadow:var(--input-shadow);padding:.9rem 1rem}.tool-output{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;min-height:120px}.tool-grid .tool-output{min-height:180px}.tool-actions{flex-wrap:wrap;gap:.7rem;margin-top:.9rem;display:flex}.tool-btn{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tool-accent);background:var(--btn-tool-bg);border:1px solid var(--tool-accent);cursor:pointer;min-height:2.75rem;box-shadow:var(--btn-tool-shadow);padding:.5rem .9rem;font-size:.82rem;transition:color .2s,background .2s,box-shadow .2s,transform .15s}.tool-btn:hover{color:var(--btn-hover-fg);background:var(--tool-accent);box-shadow:inset 0 1px 0 #ffffff80, 0 0 22px -2px var(--tool-accent);transform:translateY(-2px)}.tool-btn:active{box-shadow:var(--btn-tool-active-shadow);transform:translateY(2px)}.tool-btn:disabled{opacity:.4;cursor:not-allowed}.tool-btn-copied{border-color:var(--yellow)!important;color:var(--yellow)!important}.tool-meta{font-family:var(--font-mono);letter-spacing:.1em;color:var(--text-dim);margin-top:.8rem;font-size:.75rem}.tool-ok{color:var(--cyan);text-shadow:var(--glow-cyan-sm)}.tool-err{color:var(--pink);text-shadow:var(--glow-pink-sm)}.tool-field{margin-bottom:1.1rem}.tool-field label{font-family:var(--font-mono);letter-spacing:.14em;color:var(--text-dim);text-transform:uppercase;margin-bottom:.4rem;font-size:.72rem;display:block}.tool-field input,.tool-field textarea{box-shadow:var(--input-field-shadow);padding:.55rem .7rem}.tool-inline{align-items:center;gap:.6rem;display:inline-flex}.tool-inline .tool-btn{flex-shrink:0}.tool-section[data-astro-cid-pvemfoxy]{scroll-margin-top:5rem}.tool-output code{font-family:var(--font-mono)}.plain{color:var(--text-dim);white-space:pre-wrap;word-break:break-word}.match{background:color-mix(in srgb, var(--tool-accent) 30%, transparent);color:var(--text);box-shadow:0 0 8px -2px var(--tool-accent);border-radius:2px}.swatch{border:1px solid var(--line);height:140px;clip-path:var(--clip-sm);box-shadow:0 0 22px -6px var(--tool-accent)}.tool-sub-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin:0 0 .4rem;font-size:.7rem}.swatch-values{flex-direction:column;gap:.55rem;display:flex}.swatch-row{align-items:center;gap:.6rem;font-size:.85rem;display:flex}.swatch-row span{letter-spacing:.12em;flex:0 0 48px;font-size:.7rem}.swatch-row code{word-break:break-all;color:var(--text);flex:1}.swatch-row .tool-btn{padding:.3rem .6rem;font-size:.7rem}.swatch-color-picker{border:1px solid var(--line);background:var(--code-bg);cursor:pointer;width:48px;height:38px;padding:2px}.benchmark-panel{flex-direction:column;gap:1.4rem;display:flex}.benchmark-title-wrap{flex-direction:column;gap:.2rem;display:flex}.benchmark-subtitle{font-family:var(--font-mono);color:var(--text-dim);letter-spacing:.12em;font-size:.72rem}.benchmark-btn{font-family:var(--font-mono);letter-spacing:.08em;background:color-mix(in srgb, var(--cyan) 12%, transparent);border:1px solid var(--cyan);color:var(--text);cursor:pointer;clip-path:var(--clip-sm);box-shadow:inset 0 1px 0 var(--bevel-top);align-items:center;gap:.5rem;padding:.6rem 1.2rem;font-size:.8rem;transition:all .2s;display:inline-flex}.benchmark-btn:hover:not(:disabled){background:color-mix(in srgb, var(--cyan) 25%, transparent);box-shadow:var(--btn-hover-glow);transform:translateY(-2px)}.benchmark-btn:disabled{opacity:.5;cursor:not-allowed}.benchmark-stats-grid{grid-template-columns:repeat(5,1fr);gap:.9rem;display:grid}.metric-card{background:var(--chip-bg);border:1px solid var(--line-soft);clip-path:var(--clip-sm);text-align:center;flex-direction:column;align-items:center;gap:.3rem;padding:1rem .8rem;display:flex}.metric-label{font-family:var(--font-mono);letter-spacing:.14em;color:var(--text-dim);font-size:.68rem}.metric-val{font-family:var(--font-display);letter-spacing:.04em;font-size:1.35rem;font-weight:700}.benchmark-chart-wrap{background:var(--code-bg);border:1px solid var(--line);clip-path:var(--clip-sm);flex-direction:column;gap:.8rem;padding:1.2rem;display:flex}.chart-header{font-family:var(--font-mono);color:var(--text-dim);justify-content:space-between;font-size:.72rem;display:flex}.chart-bars-list{flex-direction:column;gap:.5rem;display:flex}.sample-row{font-family:var(--font-mono);grid-template-columns:80px 1fr 70px;align-items:center;gap:1rem;font-size:.75rem;display:grid}.sample-bar-track{background:var(--chip-line);border-radius:4px;height:8px;overflow:hidden}.sample-bar-fill{background:linear-gradient(90deg, var(--cyan), var(--purple));border-radius:4px;height:100%;transition:width .3s cubic-bezier(.16,1,.3,1)}@media (max-width:800px){.benchmark-stats-grid{grid-template-columns:repeat(2,1fr)}}.body-sec[data-astro-cid-jsfgzirp]{padding-bottom:1rem}.lab-hint[data-astro-cid-jsfgzirp]{letter-spacing:.1em;color:var(--text-dim);margin-top:1.6rem;font-size:.82rem}