.grad{--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-primary-ring: #3b82f6;--color-primary-tint: #eff6ff;--color-surface: #ffffff;--color-surface-muted: #f9fafb;--color-border: #e5e7eb;--color-border-input: #d1d5db;--color-text-heading: #111827;--color-text-body: #374151;--color-text-secondary: #4b5563;--color-text-muted: #6b7280;--gradient-hero: linear-gradient(to right, #eef2ff, #ffffff, #fdf2f8);--radius-input: .5rem;--radius-card: 1rem;--shadow-card: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-raised: 0 10px 15px -3px rgb(0 0 0 / .1);color:var(--color-text-body);background:#fcfcfd;line-height:1.5;-webkit-font-smoothing:antialiased}.grad *{box-sizing:border-box}.grad-container{max-width:72rem;margin-inline:auto;padding-inline:1rem;padding-bottom:1rem}@media (min-width: 640px){.grad-container{padding-inline:1.5rem}}@media (min-width: 1024px){.grad-container{padding-inline:2rem}}.grad .card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:1.5rem}.grad .card--raised{box-shadow:var(--shadow-raised)}.grad .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--color-primary);color:#fff;font-weight:600;padding:.55rem 1.25rem;border-radius:var(--radius-input);border:0;cursor:pointer;text-decoration:none;transition:.15s;font-size:1rem}.grad .btn:hover{background:var(--color-primary-hover)}.grad .btn:focus-visible{outline:2px solid var(--color-primary-ring);outline-offset:2px}.grad .btn:disabled{opacity:.5;cursor:not-allowed}.grad .btn--sm{padding:.38rem .8rem;font-size:.82rem}.grad .btn--ghost{background:var(--color-surface);color:var(--color-text-body);border:1px solid var(--color-border-input)}.grad .btn--ghost:hover:not(:disabled){background:var(--color-surface-muted)}.grad h2.section{font-size:1.5rem;font-weight:700;color:var(--color-text-heading);letter-spacing:-.01em;margin:0}.grad h3.panel{font-size:1.125rem;font-weight:600;color:var(--color-text-heading);margin:0 0 1.1rem}.grad .muted{color:var(--color-text-muted)}.grad label.field{display:block;font-size:.875rem;font-weight:600;color:var(--color-text-body)}.grad code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:.35rem;padding:.05rem .3rem}.grad .layout{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:2rem}@media (min-width: 920px){.grad .layout{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}.grad .side-card{position:sticky;top:1.5rem}}.grad .preview-card{padding:1rem}.grad .preview{width:100%;min-height:300px;height:42vh;max-height:460px;border-radius:.75rem;border:1px solid var(--color-border);background:linear-gradient(90deg,#6366f1,#ec4899)}.grad .out-card{margin-top:1.25rem}.grad .out-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}.grad .out-actions{display:inline-flex;gap:.4rem;flex-wrap:wrap}.grad .css-out{width:100%;resize:vertical;padding:.75rem .85rem;border:1px solid var(--color-border-input);border-radius:var(--radius-input);background:var(--color-surface-muted);color:var(--color-text-heading);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.55;word-break:break-all}.grad .css-out:focus{outline:2px solid var(--color-primary-ring);outline-offset:1px;border-color:var(--color-primary-ring)}.grad .note{margin:.7rem 0 0;padding:.6rem .8rem;border-radius:var(--radius-input);font-size:.84rem;line-height:1.45;background:var(--color-primary-tint);color:var(--color-primary-hover);border:1px solid #bfdbfe}.grad .control{margin-bottom:1.4rem}.grad .control:last-of-type{margin-bottom:0}.grad .control__label{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:.55rem;text-transform:uppercase;letter-spacing:.03em}.grad .control__val{font-variant-numeric:tabular-nums;color:var(--color-primary);font-weight:700;text-transform:none;letter-spacing:0}.grad .seg{display:flex;padding:.25rem;gap:.25rem;background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-input)}.grad .seg__btn{flex:1;border:0;background:transparent;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--color-text-muted);padding:.45rem 1rem;border-radius:.4rem;transition:.15s}.grad .seg__btn:hover{color:var(--color-text-heading)}.grad .seg__btn.is-active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-card)}.grad .seg__btn:focus-visible{outline:2px solid var(--color-primary-ring);outline-offset:2px}.grad .angle-row{display:flex;align-items:center;gap:.75rem}.grad input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--color-border);border-radius:999px;cursor:pointer;outline-offset:3px}.grad input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;box-shadow:var(--shadow-card);cursor:pointer}.grad input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;cursor:pointer}.grad .num{width:4.5rem;padding:.4rem .5rem;border:1px solid var(--color-border-input);border-radius:var(--radius-input);background:var(--color-surface);color:var(--color-text-heading);font-size:.9rem;font-family:inherit;text-align:center}.grad .num:focus{outline:2px solid var(--color-primary-ring);outline-offset:1px;border-color:var(--color-primary-ring)}.grad .chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}.grad .chip{border:1px solid var(--color-border-input);background:var(--color-surface);color:var(--color-text-secondary);font-size:.78rem;font-weight:600;padding:.3rem .6rem;border-radius:999px;cursor:pointer;transition:.15s}.grad .chip:hover{background:var(--color-surface-muted);color:var(--color-text-heading)}.grad .chip:focus-visible{outline:2px solid var(--color-primary-ring);outline-offset:2px}.grad .select{width:100%;padding:.55rem .7rem;border:1px solid var(--color-border-input);border-radius:var(--radius-input);background:var(--color-surface);color:var(--color-text-heading);font-size:.92rem;font-family:inherit;cursor:pointer}.grad .select:focus{outline:2px solid var(--color-primary-ring);outline-offset:1px;border-color:var(--color-primary-ring)}.grad .stops-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}.grad .stops-head .control__label{margin-bottom:0}.grad .stops{display:flex;flex-direction:column;gap:.6rem}.grad .stop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:.5rem;border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface-muted)}.grad .stop__color{width:2.2rem;height:2.2rem;padding:0;border:1px solid var(--color-border-input);border-radius:.4rem;background:none;cursor:pointer}.grad .stop__color::-webkit-color-swatch-wrapper{padding:2px}.grad .stop__color::-webkit-color-swatch{border:0;border-radius:.25rem}.grad .stop__color::-moz-color-swatch{border:0;border-radius:.25rem}.grad .stop__hex{width:100%;min-width:0;padding:.4rem .5rem;border:1px solid var(--color-border-input);border-radius:.4rem;background:var(--color-surface);color:var(--color-text-heading);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;text-transform:uppercase}.grad .stop__hex:focus{outline:2px solid var(--color-primary-ring);outline-offset:1px;border-color:var(--color-primary-ring)}.grad .stop__pos{grid-column:1 / -1;display:flex;align-items:center;gap:.6rem}.grad .stop__posval{font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--color-text-muted);min-width:3ch;text-align:right}.grad .stop__del{width:1.9rem;height:1.9rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-border-input);background:var(--color-surface);color:var(--color-text-muted);border-radius:.4rem;cursor:pointer;font-size:1.1rem;line-height:1;transition:.15s}.grad .stop__del:hover:not(:disabled){background:#fef2f2;color:#dc2626;border-color:#fecaca}.grad .stop__del:disabled{opacity:.4;cursor:not-allowed}.grad .hint{margin:.6rem 0 0;font-size:.8rem;color:var(--color-text-muted)}.grad .side-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--color-border)}.grad .how{margin-top:3.25rem}.grad .how h2.section{text-align:center}.grad .how__lead{text-align:center;color:var(--color-text-secondary);margin:.6rem auto 1.75rem;max-width:46rem}.grad .steps{display:grid;grid-template-columns:1fr;gap:1.1rem}@media (min-width: 720px){.grad .steps{grid-template-columns:repeat(3,1fr)}}.grad .step{text-align:center;padding:1.75rem 1.25rem}.grad .step__n{width:2.5rem;height:2.5rem;margin:0 auto .9rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:var(--color-primary);background:var(--color-primary-tint);border:1px solid #bfdbfe}.grad .step h3{font-size:1.05rem;font-weight:700;color:var(--color-text-heading);margin:0 0 .4rem}.grad .step p{margin:0;font-size:.9rem;color:var(--color-text-secondary)}.grad .about{margin-top:2rem;max-width:52rem;margin-inline:auto}.grad .about h3{font-size:1.2rem;font-weight:700;color:var(--color-text-heading);margin:0 0 .75rem}.grad .about p{margin:0 0 1rem;color:var(--color-text-body);font-size:.98rem;line-height:1.65}.grad .about p:last-child{margin-bottom:0}.grad .about strong{color:var(--color-text-heading)}.grad .privacy-line{margin-top:1.75rem;display:flex;align-items:center;gap:1rem;background:#ecfdf5;border:1px solid #a7f3d0}.grad .privacy-line__icon{font-size:1.5rem;flex:0 0 auto}.grad .privacy-line strong{color:#065f46}.grad .privacy-line p{margin:0;color:#047857;font-size:.95rem}.grad .foot{margin:2.5rem 0 1rem;padding-top:1.25rem;border-top:1px solid var(--color-border);text-align:center}.grad .foot p{margin:0;font-size:.85rem}