:root{--color-bg:#fafafa;--color-surface:#fff;--color-text:#0f0f0f;--color-muted:#6b6b6b;--color-border:#e5e5e5;--color-accent:#0f0f0f;--color-accent-bg:#f0f0f0;--max-width:960px;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;font-size:16px}body{flex-direction:column;align-items:center;min-height:100vh;display:flex}main{width:100%;max-width:var(--max-width);padding:0 1.5rem}a{color:var(--color-text);text-decoration:none}a:hover{opacity:.7}img{max-width:100%;height:auto}.tool-card{border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;will-change:transform, box-shadow;opacity:1;border-radius:8px;align-items:center;gap:1rem;padding:1rem 1.25rem;transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s cubic-bezier(.23,1,.32,1),border-color .15s;display:flex;transform:translateY(0)}.tool-card:hover{border-color:#c8c8c8;transform:translateY(-3px)scale(1.005);box-shadow:0 10px 25px -5px #0000000f,0 8px 10px -6px #0000000a}.tool-card:active{transition-duration:80ms;transform:translateY(-1px)scale(.995)}.tool-card-icon{transition:transform .2s cubic-bezier(.23,1,.32,1)}.tool-card:hover .tool-card-icon{transform:scale(1.08)rotate(1deg)}.tool-card-arrow{transition:transform .2s cubic-bezier(.23,1,.32,1),color .15s}.tool-card:hover .tool-card-arrow{color:var(--color-text);transform:translate(3px)}.tool-card-icon{background:var(--color-accent-bg);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;display:flex}.tool-card-info{flex:1;min-width:0}.tool-card-name{font-size:.9rem;font-weight:500}.tool-card-desc{color:var(--color-muted);margin-top:.15rem;font-size:.8rem}.tool-card-arrow{color:var(--color-muted);flex-shrink:0;font-size:.85rem}.cat-badge{border:1px solid var(--color-border);color:var(--color-muted);cursor:pointer;border-radius:999px;padding:.25rem .6rem;font-size:.7rem;transition:all .15s;display:inline-block}.cat-badge:hover,.cat-badge.active{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent);opacity:1}.input{border:1px solid var(--color-border);background:var(--color-surface);width:100%;color:var(--color-text);border-radius:6px;outline:none;padding:.6rem .8rem;font-family:inherit;font-size:.875rem;transition:border-color .15s}.input:focus{border-color:#999}.btn{border:1px solid var(--color-accent);background:var(--color-accent);color:var(--color-bg);cursor:pointer;border-radius:6px;padding:.5rem 1rem;font-family:inherit;font-size:.8rem;transition:opacity .15s}.btn:hover{opacity:.85}.btn-outline{color:var(--color-text);border-color:var(--color-border);background:0 0}.btn-outline:hover{border-color:var(--color-text)}.tool-page{padding:2rem 0 3rem}.tool-page-back{color:var(--color-muted);align-items:center;gap:.35rem;margin-bottom:1rem;font-size:.8rem;display:inline-flex}.tool-page-back:hover{color:var(--color-text);opacity:1}.tool-page-title{font-size:1.5rem;font-weight:600}.tool-page-desc{color:var(--color-muted);margin-top:.5rem;font-size:.875rem;line-height:1.6}.tool-container{border:1px solid var(--color-border);background:var(--color-surface);border-radius:8px;margin-top:1.5rem;padding:1.5rem}.code-block{border:1px solid var(--color-border);resize:vertical;background:#f5f5f5;border-radius:6px;outline:none;width:100%;padding:.75rem 1rem;font-family:SF Mono,Fira Code,monospace;font-size:.85rem}.code-block:focus{border-color:#999}.label{color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem;font-size:.75rem;font-weight:500;display:block}.no-results{text-align:center;color:var(--color-muted);padding:4rem 1rem}.no-results p:first-child{margin-bottom:.5rem;font-size:2rem}.toast{background:var(--color-accent);color:var(--color-bg);z-index:1000;border-radius:6px;padding:.6rem 1.2rem;font-size:.8rem;animation:.2s ease-out toastIn;position:fixed;bottom:1.5rem;right:1.5rem}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}