:root{--color-primary:#4f46e5;--color-primary-hover:#4338ca;--color-bg:#fafbfc;--color-surface:#fff;--color-text:#1e293b;--color-text-muted:#64748b;--color-border:#e2e8f0;--color-accent-green:#22c55e;--color-accent-red:#ef4444;--radius:8px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--max-width:1280px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1.6}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit}h1,h2,h3{line-height:1.3}img{max-width:100%;display:block}.tool-page{max-width:var(--max-width);grid-template-columns:280px 1fr;gap:2rem;min-height:calc(100vh - 140px);margin:0 auto;padding:2rem;display:grid}.tool-controls{flex-direction:column;gap:1.5rem;display:flex}.controls-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);flex-direction:column;gap:1rem;padding:1.25rem;display:flex}.controls-panel h3{text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:.25rem;font-size:.875rem}.control-group{flex-direction:column;gap:.375rem;display:flex}.control-group label{color:var(--color-text);font-size:.8125rem;font-weight:600}.control-group input[type=range]{width:100%;accent-color:var(--color-primary)}.control-group input[type=color]{border:1px solid var(--color-border);cursor:pointer;border-radius:4px;width:100%;height:36px;padding:2px}.control-group select{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);width:100%;color:var(--color-text);padding:.5rem;font-size:.875rem}.range-value{color:var(--color-text-muted);text-align:right;font-size:.75rem}.checkbox-group{align-items:center;gap:.5rem;display:flex}.checkbox-group input[type=checkbox]{accent-color:var(--color-primary);width:16px;height:16px}.action-bar{flex-direction:column;gap:.5rem;display:flex}.action-bar button{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);padding:.625rem 1rem;font-size:.875rem;font-weight:500;transition:background .15s,border-color .15s}.action-bar button:hover{background:var(--color-bg);border-color:var(--color-primary)}.action-bar button.primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.action-bar button.primary:hover{background:var(--color-primary-hover)}.tool-output{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);justify-content:center;align-items:center;min-height:500px;padding:1.5rem;display:flex;overflow:auto}.tool-output canvas{max-width:100%;height:auto}.tool-header{max-width:var(--max-width);margin:0 auto;padding:2rem 2rem 0}.tool-header h1{color:var(--color-text);font-size:1.75rem;font-weight:700}.tool-header p{color:var(--color-text-muted);margin-top:.25rem}.tool-placeholder{text-align:center;color:var(--color-text-muted)}.tool-placeholder h2{margin-bottom:.5rem;font-size:1.25rem}@media (width<=768px){.tool-page{grid-template-columns:1fr;padding:1rem}.tool-header{padding:1rem 1rem 0}.tool-controls{order:1}.tool-output{order:0;min-height:300px}}@media print{header,footer,nav,.tool-controls,.no-print{display:none!important}.tool-output{width:100%;height:100%;position:fixed;top:0;left:0}.tool-output canvas,.tool-output svg{max-width:100%;height:auto}*{box-shadow:none!important;background:0 0!important}@page{margin:.5in;size:letter portrait}}