:root{--color-brand-50:#f5f3ff;--color-brand-100:#ede9fe;--color-brand-200:#ddd6fe;--color-brand-300:#c4b5fd;--color-brand-400:#a78bfa;--color-brand-500:#8b5cf6;--color-brand-600:#7c3aed;--color-brand-700:#6d28d9;--color-brand-800:#5b21b6;--color-brand-900:#4c1d95;--color-bg:#fff;--color-bg-subtle:#fafafa;--color-surface:#fff;--color-border:#e5e7eb;--color-border-strong:#d1d5db;--color-text:#111827;--color-text-muted:#6b7280;--color-text-subtle:#9ca3af;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:#3b82f6;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--border-width:1px;--color-border-default:var(--color-border);--z-base:0;--z-dropdown:100;--z-sticky:200;--z-modal:300;--z-toast:400}*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{min-height:100vh;line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}a{color:inherit;text-decoration:none}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}.container{width:100%;max-width:1200px;padding-inline:var(--space-4);margin:0 auto}@media (width>=768px){.container{padding-inline:var(--space-6)}}h1{font-size:2.5rem;font-weight:var(--font-bold);letter-spacing:-.03em;line-height:1.1}h2{font-size:1.5rem;font-weight:var(--font-semibold);letter-spacing:-.02em}@media (width>=768px){h1{font-size:3.5rem}}.text-muted{color:var(--color-text-muted)}.text-subtle{color:#8b949e}#main-header{z-index:var(--z-sticky);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);background:#ffffffd9;position:sticky;top:0}.badge{border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);background:var(--color-bg-subtle);color:var(--color-text-muted);border:1px solid var(--color-border);align-items:center;padding:6px 12px;display:inline-flex}.badge-brand{background:var(--color-brand-50);color:var(--color-brand-700);border-color:var(--color-brand-200)}.btn{justify-content:center;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-medium);border-radius:var(--radius-md);cursor:pointer;border:1px solid #0000;padding:8px 16px;transition:all .2s;display:inline-flex}.btn-primary{background:var(--color-brand-500);color:#fff}.btn-primary:hover{background:var(--color-brand-600)}.btn-outline{border-color:var(--color-border);color:var(--color-text);background:0 0}.btn-outline:hover{background:var(--color-bg-subtle);border-color:var(--color-border-strong)}.search-wrapper{width:100%;max-width:640px;margin:0 auto;position:relative}.search-wrapper svg{color:var(--color-text-muted);width:20px;height:20px;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.search-input{border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;font-size:var(--text-base);background:var(--color-surface);padding:16px 16px 16px 48px;transition:border-color .2s,box-shadow .2s;box-shadow:0 2px 8px #00000005}.search-input:focus{border-color:var(--color-brand-400);box-shadow:0 0 0 4px var(--color-brand-100);outline:none}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;display:grid}.card{background:var(--color-surface);border:1px solid var(--color-border);color:inherit;border-radius:12px;flex-direction:column;padding:24px;text-decoration:none;transition:all .2s;display:flex;position:relative}.card:hover{border-color:var(--color-brand-300);transform:translateY(-2px);box-shadow:0 8px 30px #0000000a}.card-icon-box{background:var(--color-brand-50);width:44px;height:44px;color:var(--color-brand-600);border:1px solid var(--color-brand-100);border-radius:8px;justify-content:center;align-items:center;margin-bottom:16px;display:flex}.card-icon-box svg{width:22px;height:22px}.card-tag{color:#64748b;text-transform:uppercase;letter-spacing:.05em;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;position:absolute;top:24px;right:24px}.card-title{color:var(--color-text);letter-spacing:-.01em;margin-bottom:8px;font-size:18px;font-weight:600}.card-desc{color:var(--color-text-muted);flex-grow:1;font-size:14px;line-height:1.6}.card-footer{border-top:1px solid var(--color-border);justify-content:space-between;align-items:center;margin-top:24px;padding-top:16px;display:flex}.card-meta{color:#8b949e;font-size:12px;font-family:var(--font-mono)}.card-action{color:var(--color-brand-600);align-items:center;gap:4px;font-size:14px;font-weight:500;display:flex}.tool-container{padding-block:var(--space-8);max-width:1000px;margin:0 auto}.tool-header{margin-bottom:var(--space-6);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-6)}.dev-textarea{width:100%;height:400px;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-family:var(--font-mono);background:var(--color-surface);resize:vertical;font-size:14px;line-height:1.6;transition:border-color .2s,box-shadow .2s}.dev-textarea:focus{border-color:var(--color-brand-400);box-shadow:0 0 0 4px var(--color-brand-100);outline:none}.split-pane{gap:var(--space-4);grid-template-columns:1fr;display:grid}@media (width>=768px){.split-pane{grid-template-columns:1fr 1fr}}