:root{--bg:#0f0c29;--bg2:#1a1640;--surface:#ffffff0d;--border:#ffffff1a;--accent:#7c6bff;--accent2:#e040fb;--text:#f0f0ff;--text-muted:#f0f0ff80;--radius:16px;--radius-sm:8px;--nav-h:56px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;overflow-x:clip}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:.9rem;line-height:1.5}.site-nav{z-index:100;-webkit-backdrop-filter:blur(16px);background:#0f0c29d9;border-bottom:1px solid #ffffff14;position:sticky;top:0}.nav-inner{justify-content:space-between;align-items:center;max-width:1200px;height:52px;margin:0 auto;padding:0 24px;display:flex}.nav-brand{letter-spacing:.5px;color:var(--accent);font-size:.9rem;font-weight:800}.nav-links{gap:6px;display:flex}.nav-link{color:var(--text-muted);border:1px solid #0000;border-radius:99px;padding:6px 14px;font-size:.8rem;font-weight:600;text-decoration:none;transition:color .18s,background .18s,border-color .18s}.nav-link:hover{color:var(--text);background:#ffffff12}.nav-link.active{color:#fff;background:#7c6bff26;border-color:#7c6bff4d}.hero{text-align:center;background:radial-gradient(at 50% 0,#7c6bff2e 0%,#0000 70%);padding:80px 24px 56px}.hero-title{letter-spacing:-.5px;background:linear-gradient(135deg, #fff 30%, var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:16px;font-size:clamp(2rem,5vw,3.2rem);font-weight:800}.hero-sub{color:var(--text-muted);max-width:560px;margin:0 auto 10px;font-size:1.1rem}.hero-hint{color:#f0f0ff59;margin-bottom:28px;font-size:.82rem}.hero-btns{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.btn-primary{background:var(--accent);color:#fff;border-radius:50px;align-items:center;padding:11px 28px;font-size:.9rem;font-weight:700;text-decoration:none;transition:opacity .2s,transform .15s;display:inline-flex}.btn-primary:hover{opacity:.85;transform:translateY(-1px)}.btn-secondary{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:50px;align-items:center;padding:11px 28px;font-size:.9rem;font-weight:600;text-decoration:none;transition:background .2s,transform .15s;display:inline-flex}.btn-secondary:hover{background:#ffffff17;transform:translateY(-1px)}.app-shell{min-height:calc(100vh - var(--nav-h));grid-template-rows:1fr;grid-template-columns:280px 1fr 300px;gap:20px;max-width:1600px;margin:0 auto;padding:24px 24px 40px;display:grid}.glass-panel{border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff0a;padding:18px}.panel-title{letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-size:.7rem;font-weight:700}.controls-col{flex-direction:column;gap:0;display:flex}.controls-stack{flex-direction:column;gap:14px;display:flex}.controls-panel{margin-bottom:14px}.controls-panel:last-child{margin-bottom:0}.control-group{flex-direction:column;gap:6px;display:flex}.control-label{color:var(--text-muted);justify-content:space-between;font-size:.8rem;display:flex}.control-value{color:var(--text);font-weight:600}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;height:4px}.mode-toggle{border-radius:var(--radius-sm);background:#0003;grid-template-columns:1fr 1fr;gap:2px;padding:3px;display:grid}.mode-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:8px;font-size:.82rem;font-weight:600;transition:all .2s}.mode-btn.active{background:var(--accent);color:#fff}.type-grid{flex-wrap:wrap;gap:6px;display:flex}.type-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border-radius:50px;padding:6px 12px;font-size:.78rem;font-weight:600;transition:all .2s}.type-btn:hover{border-color:var(--accent);color:var(--text)}.type-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.direction-row{align-items:center;gap:14px;display:flex}.angle-wrap{flex-direction:column;flex-shrink:0;align-items:center;gap:6px;display:flex}.angle-wheel-wrap{cursor:pointer}#angle-wheel{border-radius:50%;display:block}.angle-val-wrap{align-items:center;gap:3px;display:flex}.angle-val-wrap input[type=number]{border:1px solid var(--border);border-radius:var(--radius-sm);width:52px;color:var(--text);text-align:center;-moz-appearance:textfield;background:#00000040;padding:4px 6px;font-size:.82rem}.angle-val-wrap input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.angle-val-wrap input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.angle-deg{color:var(--text-muted);font-size:.82rem}.angle-slider-wrap{flex:1}.angle-snaps{flex-wrap:wrap;gap:5px;margin-top:10px;display:flex}.angle-snap-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:50px;padding:4px 9px;font-size:.72rem;font-weight:600;transition:all .15s}.angle-snap-btn:hover{border-color:var(--accent);color:var(--text)}.angle-snap-btn.active{border-color:var(--accent);color:var(--text);background:#7c6bff26}.stop-bar-wrap{margin-bottom:14px}.stop-bar{cursor:crosshair;-webkit-user-select:none;user-select:none;height:56px;position:relative}.stop-bar-track{border-radius:var(--radius-sm);border:1px solid var(--border);background-image:linear-gradient(45deg,#333 25%,#0000 25%),linear-gradient(-45deg,#333 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#333 75%),linear-gradient(-45deg,#0000 75%,#333 75%);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;height:36px;position:absolute;top:0;left:0;right:0;overflow:hidden}.stop-bar-gradient{border-radius:var(--radius-sm);position:absolute;inset:0}.stop-handles{height:28px;position:absolute;top:28px;left:0;right:0}.stop-handle{cursor:grab;border:2px solid #fff;border-radius:50%;width:18px;height:18px;transition:box-shadow .15s;position:absolute;top:0;transform:translate(-50%);box-shadow:0 1px 4px #00000080}.stop-handle:active{cursor:grabbing}.stop-handle.selected{border-color:var(--accent);z-index:2;box-shadow:0 0 0 3px #7c6bff80,0 1px 4px #00000080}.stop-editor{border-radius:var(--radius-sm);border:1px solid var(--border);background:#00000026;flex-direction:column;gap:8px;min-height:52px;padding:10px;display:flex}.stop-editor-empty{color:var(--text-muted);margin:auto;font-size:.78rem}.stop-color-swatch{border:1px solid var(--border);cursor:pointer;border-radius:8px;flex-shrink:0;width:34px;height:34px;position:relative;overflow:hidden}.stop-color-swatch input[type=color]{cursor:pointer;opacity:0;border:none;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;position:absolute;inset:-4px}.stop-color-preview{pointer-events:none;border-radius:7px;position:absolute;inset:0}.stop-pos-wrap{flex:1;align-items:center;gap:4px;display:flex}.stop-pos-wrap input[type=number]{border:1px solid var(--border);border-radius:var(--radius-sm);width:54px;color:var(--text);-moz-appearance:textfield;background:#00000040;padding:5px 7px;font-size:.82rem}.stop-pos-wrap input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.stop-pos-wrap input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.stop-pos-unit{color:var(--text-muted);font-size:.78rem}.stop-delete-btn{border-radius:var(--radius-sm);color:#ff6b6b;cursor:pointer;background:#ff50501a;border:1px solid #ff50504d;flex-shrink:0;padding:5px 9px;font-size:.78rem;transition:all .2s}.stop-delete-btn:hover{background:#ff505033}.stop-editor-row{align-items:center;gap:10px;display:flex}.stop-alpha-row{align-items:center;gap:8px;display:flex}.stop-alpha-label{color:var(--text-muted);white-space:nowrap;min-width:44px;font-size:.75rem}.stop-alpha-row input[type=range]{accent-color:var(--accent);cursor:pointer;flex:1}.stop-alpha-val{color:var(--text-muted);text-align:right;min-width:32px;font-size:.75rem}.ctrl-btn{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;background:#ffffff0a;align-items:center;gap:6px;padding:8px 14px;font-size:.8rem;font-weight:600;transition:all .2s;display:inline-flex}.ctrl-btn:hover{border-color:var(--accent);color:var(--text);background:#7c6bff14}.editor-col{flex-direction:column;gap:12px;display:flex}.preview-panel{flex-direction:column;flex:1;gap:14px;display:flex}.preview-panel-header{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.preview-tabs{flex-wrap:wrap;gap:4px;display:flex}.preview-tab{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:50px;padding:5px 12px;font-size:.75rem;font-weight:600;transition:all .2s}.preview-tab.active{border-color:var(--accent);color:var(--text);background:#7c6bff26}.preview-stage{border-radius:var(--radius-sm);background:#111;flex:1;justify-content:center;align-items:center;min-height:280px;display:flex;position:relative;overflow:hidden}.preview-full-bg{border-radius:var(--radius-sm);transition:none;position:absolute;inset:0}.preview-card-wrap{background:#0f0c29;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;display:flex}.preview-card{border-radius:16px;width:280px;overflow:hidden;box-shadow:0 8px 40px #00000080}.preview-card-img{height:160px}.preview-card-body{background:#ffffff0f;padding:18px}.preview-card-title{margin-bottom:6px;font-size:1rem;font-weight:700}.preview-card-text{color:var(--text-muted);font-size:.8rem}.preview-btn-wrap{background:#0f0c29;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;height:100%;display:flex}.preview-button{color:#fff;cursor:pointer;letter-spacing:.3px;border:none;border-radius:50px;padding:14px 36px;font-size:1rem;font-weight:700;box-shadow:0 4px 20px #0000004d}.preview-button-sm{color:#fff;cursor:pointer;border:none;border-radius:50px;padding:9px 22px;font-size:.85rem;font-weight:600}.preview-text-wrap{background:#0f0c29;justify-content:center;align-items:center;width:100%;height:100%;padding:32px;display:flex}.preview-text-heading{-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;background-clip:text;font-size:2.4rem;font-weight:800;line-height:1.2}.editor-hint{color:var(--text-muted);text-align:center;font-size:.76rem}.output-col{flex-direction:column;gap:14px;display:flex}.output-panel{flex-direction:column;display:flex}.output-header{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;display:flex}.output-tab-group{gap:4px;display:flex}.output-tab{border:1px solid var(--border);color:var(--text-muted);letter-spacing:.5px;cursor:pointer;background:0 0;border-radius:50px;padding:5px 10px;font-size:.72rem;font-weight:700;transition:all .2s}.output-tab.active{border-color:var(--accent);color:var(--text);background:#7c6bff26}.copy-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:50px;align-items:center;gap:5px;margin-left:auto;padding:6px 12px;font-size:.75rem;font-weight:600;transition:all .2s;display:inline-flex}.copy-btn:hover{border-color:var(--accent);color:var(--text)}.copy-btn.copied{color:#4caf50;border-color:#4caf50}#gradient-output{color:#c9d1d9;white-space:pre;border-radius:var(--radius-sm);background:#0003;min-height:80px;max-height:300px;padding:14px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.78rem;line-height:1.7;overflow:auto}.vars-output{color:#c9d1d9;border-radius:var(--radius-sm);white-space:pre;background:#0003;padding:12px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:.75rem;line-height:1.7;overflow-x:auto}.compat-list{flex-direction:column;gap:6px;display:flex}.compat-item{color:var(--text-muted);align-items:center;gap:8px;font-size:.8rem;display:flex}.compat-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.compat-dot.green{background:#4caf50;box-shadow:0 0 6px #4caf50}.save-btn{border:1px solid var(--accent);border-radius:var(--radius-sm);color:var(--accent);cursor:pointer;background:#7c6bff1a;align-items:center;gap:8px;padding:10px 18px;font-size:.82rem;font-weight:700;transition:all .2s;display:inline-flex}.save-btn:hover{background:#7c6bff33}.presets-section{background:linear-gradient(#0000 0%,#7c6bff0a 100%);padding:60px 24px}.presets-inner{max-width:1200px;margin:0 auto}.section-header{margin-bottom:28px}.section-title{background:linear-gradient(135deg, #fff 30%, var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800}.section-sub{color:var(--text-muted);font-size:.9rem}.presets-filter{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.filter-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:50px;padding:7px 18px;font-size:.8rem;font-weight:600;transition:all .2s}.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.grad-presets-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;display:grid}.grad-preset-card{border-radius:var(--radius);cursor:pointer;border:1px solid var(--border);background:#ffffff08;transition:transform .2s,box-shadow .2s;overflow:hidden}.grad-preset-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px #0006}.grad-preset-thumb{height:100px;position:relative;overflow:hidden}.grad-preset-label{justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.grad-preset-name{font-size:.82rem;font-weight:600}.grad-preset-badge{letter-spacing:.8px;text-transform:uppercase;color:var(--accent);background:#7c6bff26;border-radius:50px;padding:2px 7px;font-size:.65rem;font-weight:700}.grad-preset-badge.anim{color:var(--accent2);background:#e040fb26}@keyframes thumb-breathe{0%,to{background-size:100% 100%}50%{background-size:200% 200%}}@keyframes thumb-move{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes thumb-aurora{0%{background-position:0%,100%,50% 0}to{background-position:100%,0%,50% 100%}}.anim-breathe{animation:3s ease-in-out infinite thumb-breathe}.anim-move{background-size:200% 200%;animation:3s infinite thumb-move}.anim-aurora{background-size:200% 200%,200% 200%,200% 200%;animation:5s ease-in-out infinite alternate thumb-aurora}.faq-section{padding:60px 24px 80px}.faq-inner{max-width:1000px;margin:0 auto}.faq-grid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;display:grid}.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:#ffffff08;padding:20px 24px}.faq-q{color:var(--text);margin-bottom:8px;font-size:.95rem;font-weight:700}.faq-a p{color:var(--text-muted);font-size:.85rem;line-height:1.6}.faq-a code{color:var(--accent);background:#7c6bff1f;border-radius:4px;padding:1px 5px;font-family:Cascadia Code,Fira Code,monospace;font-size:.82em}footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border);padding:32px 24px;font-size:.8rem}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}@media (width<=1100px){.app-shell{grid-template-columns:260px 1fr 280px}}@media (width<=900px){.app-shell{padding:16px;display:block}.controls-col,.editor-col{margin-bottom:16px}.preview-stage{min-height:220px}}@media (width<=600px){.hero{padding:56px 16px 40px}.faq-grid{grid-template-columns:1fr}.grad-presets-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.output-header{gap:6px}}.tok-prop{color:#79c0ff}.tok-colon{color:#c9d1d9}.tok-val{color:#a5d6ff}.tok-rgba{color:#ffa657}.tok-num{color:#d2a8ff}.tok-semi{color:#c9d1d9}.tok-unit{color:#7ee787}.tok-comment{color:#8b949e;font-style:italic}.tok-brace{color:#e2e8f0}