.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)}}.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}@font-face{font-family:Orbitron Fallback;font-display:swap;src:local(Arial),local(Helvetica),local(Liberation Sans),local(DejaVu Sans),local(Noto Sans);font-weight:400 900;size-adjust:128.98%;ascent-override:78.38%;descent-override:18.84%;line-gap-override:0%}@font-face{font-family:Share Tech Mono Fallback;font-display:swap;src:local(Courier New),local(Liberation Mono),local(DejaVu Sans Mono);size-adjust:90.65%;ascent-override:97.63%;descent-override:26.7%;line-gap-override:0%}@font-face{font-family:Orbitron;font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/orbitron-var.woff2)format("woff2")}@font-face{font-family:Share Tech Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/share-tech-mono-400.woff2)format("woff2")}:root{--bg:#07090e;--bg-2:#0d111a;--bg-3:#131926;--cyan:#00f0b5;--cyan-dim:#00b88c;--pink:#f43f5e;--purple:#b76bf8;--yellow:#eab308;--blue:#38bdf8;--text:#f1f5f9;--text-dim:#94a3b8;--line:#ffffff1a;--line-soft:#ffffff0f;--panel:#0d111aeb;--bg-card:#0d111aeb;--code-bg:#070a12d9;--input-bg:#07090ed9;--btn-tool-bg:linear-gradient(180deg, #ffffff0f 0%, #00000040 100%);--clip:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));--clip-sm:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));--skillgroup-grad:linear-gradient(172deg, #162032f5 0%, #0c101af0 45%, #070a10fa 100%);--elevation-3:0 22px 45px -4px #000000e6, 0 6px 14px -2px #000000b3, 0 0 20px #00f0b52e;--glow-pink-sm:0 0 6px #f43f5e80;--glow-pink-md:0 0 12px #f43f5e66;--glow-pink-lg:0 0 16px #f43f5e4d;--glow-cyan-sm:0 0 6px #00f0b580;--glow-cyan-md:0 0 12px #00f0b566;--glow-cyan-lg:0 0 16px #00f0b54d;--glow-blue-md:0 0 12px #38bdf866;--glow-yellow-md:0 0 12px #eab30866;--glow-purple-md:0 0 12px #b76bf866;--chip-bg:#ffffff08;--chip-line:#ffffff14;--bevel-top:#ffffff2e;--bevel-bottom:#0009;--font-mono:"Share Tech Mono", "Share Tech Mono Fallback", monospace;--font-display:"Orbitron", "Orbitron Fallback", sans-serif}:root[data-theme=light]{--bg:#f8fafc;--bg-2:#f1f5f9;--bg-3:#e2e8f0;--cyan:#0f766e;--cyan-dim:#115e59;--pink:#be123c;--purple:#6d28d9;--yellow:#92400e;--blue:#0369a1;--text:#0f172a;--text-dim:#475569;--line:#0f172a1a;--line-soft:#0f172a0f;--panel:#ffffffe6;--bg-card:#ffffffe6;--code-bg:#f1f5f9e6;--input-bg:#ffffffe6;--btn-tool-bg:linear-gradient(180deg, #0000000a 0%, #00000014 100%)}*{box-sizing:border-box}html,body{background-color:var(--bg);color:var(--text);font-family:var(--font-mono);min-height:100vh;margin:0;padding:0}.mono{font-family:var(--font-mono)}.cyan{color:var(--cyan)}.pink{color:var(--pink)}.yellow{color:var(--yellow)}.purple{color:var(--purple)}.blue{color:var(--blue)}.dim{color:var(--text-dim)}.tools-shell{flex-direction:column;gap:1.5rem;max-width:1440px;min-height:100vh;margin:0 auto;padding:1.5rem;display:flex}.tools-nav{background:var(--panel);border:1px solid var(--line);clip-path:var(--clip-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.4rem;display:flex}.tools-brand{align-items:center;gap:1.2rem;display:flex}.tools-back-btn{letter-spacing:.1em;border:1px solid var(--blue);color:var(--blue);clip-path:var(--clip-sm);background:#38bdf81f;padding:.4rem .8rem;font-size:.78rem;text-decoration:none;transition:background .2s,transform .2s}.tools-back-btn:hover{background:#38bdf840;transform:translate(-2px)}.tools-title-group{flex-direction:column;display:flex}.tools-main-title{font-family:var(--font-display);letter-spacing:.08em;color:var(--text);text-shadow:var(--glow-blue-md);margin:0;font-size:1.1rem}.tools-subtitle{color:var(--text-dim);letter-spacing:.14em;font-size:.72rem}.tools-tabs{flex-wrap:wrap;gap:.5rem;display:flex}.tools-tab-btn{font-family:var(--font-mono);letter-spacing:.08em;background:var(--chip-bg);border:1px solid var(--chip-line);color:var(--text-dim);clip-path:var(--clip-sm);cursor:pointer;align-items:center;gap:.5rem;padding:.45rem .9rem;font-size:.78rem;transition:all .2s;display:inline-flex}.tools-tab-btn:hover{color:var(--text);border-color:var(--line)}.tools-tab-btn.active{border-color:var(--blue);color:var(--blue);background:#38bdf826;box-shadow:0 0 10px #38bdf833}.tools-content{flex-direction:column;gap:2rem;display:flex}.tool-section-wrapper{background:var(--panel);border:1px solid var(--line);clip-path:var(--clip);box-shadow:var(--elevation-3);padding:2rem;position:relative}.tool-header-row{border-bottom:1px solid var(--line-soft);flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.tool-badge-pill{letter-spacing:.15em;clip-path:var(--clip-sm);border:1px solid;padding:.25rem .6rem;font-size:.72rem}.tool-footer{border-top:1px dashed var(--line-soft);color:var(--text-dim);flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1rem;font-size:.75rem;display:flex}