.grad-app{flex:1;min-height:0;display:flex;overflow:hidden}.panel{background:var(--bg-raised);border-right:1px solid var(--border);flex-direction:column;width:300px;min-width:300px;display:flex}.panel-scroll{scrollbar-width:thin;scrollbar-color:var(--border-hover) transparent;flex:1;min-height:0;overflow-y:auto}.panel-scroll::-webkit-scrollbar{width:4px}.panel-scroll::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:2px}.section{padding:12px 16px}.section-head{color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:10px;font-weight:500;display:flex}.sep{background:var(--border);height:1px;margin:0 16px}.ctrl{flex-direction:column;gap:3px;margin-bottom:10px;display:flex}.ctrl:last-child{margin-bottom:0}.ctrl>label{color:var(--text-dim);font-size:10px;font-weight:500}.ctrl-row{align-items:center;gap:8px;min-width:0;display:flex}.ctrl-row input[type=range]{flex:1}.ctrl-num{border:1px solid var(--border);background:var(--bg);width:44px;font-family:var(--font-sans);color:var(--text);text-align:center;border-radius:3px;padding:3px 2px;font-size:11px}.ctrl-num:focus{border-color:var(--text);outline:none}.ctrl-num:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.ctrl-split{gap:8px;display:flex}.ctrl-split>.ctrl{flex:1;min-width:0}.grad-app input[type=range]{-webkit-appearance:none;appearance:none;background:var(--border-hover);cursor:pointer;outline:none;min-width:0;height:2px}.grad-app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);cursor:pointer;border:none;border-radius:50%;width:11px;height:11px}.grad-app input[type=range]::-moz-range-thumb{background:var(--text);cursor:pointer;border:none;border-radius:50%;width:11px;height:11px}.grad-app select{border:1px solid var(--border);background:var(--bg);width:100%;min-width:0;font-family:var(--font-sans);color:var(--text);cursor:pointer;border-radius:3px;padding:5px 6px;font-size:11px}.grad-app select:focus{border-color:var(--text);outline:none}.stop-bar{border:1px solid var(--border);background-image:linear-gradient(45deg, var(--border) 25%, transparent 25%), linear-gradient(-45deg, var(--border) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border) 75%), linear-gradient(-45deg, transparent 75%, var(--border) 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border-radius:4px;height:16px;margin-bottom:10px}.stop-bar>div{border-radius:3px;height:100%}.stop-row{align-items:center;gap:6px;margin-bottom:8px;display:flex}.stop-swatch{border:1px solid var(--border);cursor:pointer;background:var(--bg);border-radius:4px;flex-shrink:0;width:28px;height:28px;padding:1px}.stop-fields{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.stop-hex{border:1px solid var(--border);background:var(--bg);width:100%;font-family:var(--font-mono);color:var(--text);border-radius:3px;padding:3px 6px;font-size:11px}.stop-hex:focus{border-color:var(--text);outline:none}.stop-hex.bad{border-color:#e0533c}.stop-sliders{align-items:center;gap:8px;display:flex}.stop-sliders label{color:var(--text-mute);flex-shrink:0;font-size:9px}.stop-sliders input[type=range]{flex:1}.stop-del{width:22px;height:22px;color:var(--text-mute);cursor:pointer;background:0 0;border:none;border-radius:3px;flex-shrink:0;font-size:15px;line-height:1}.stop-del:hover{color:var(--text);background:var(--accent-faint)}.stop-del:disabled{opacity:.2;cursor:default}.reset-link{font-family:var(--font-sans);color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:11px}.reset-link:hover{color:var(--text)}.ctrl-num.wide{width:100%}.panel-foot{border-top:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:8px;padding:12px 16px;display:flex}.dl-btn{background:var(--text);width:100%;color:var(--bg);font-family:var(--font-sans);cursor:pointer;letter-spacing:.02em;border:none;border-radius:4px;padding:9px;font-size:12px;font-weight:500}.dl-btn:hover{opacity:.85}.dl-btn.ok{color:#fff;background:#2f9e6e}.dl-ghost{background:var(--bg);color:var(--text);border:1px solid var(--border)}.dl-ghost:hover{border-color:var(--text);opacity:1}.viewport{flex:1;justify-content:center;align-items:center;min-width:0;padding:32px;display:flex;overflow:auto}.preview{border-radius:12px;max-width:100%;max-height:100%;box-shadow:0 4px 24px #00000040}@media (pointer:coarse){.grad-app input[type=range]::-webkit-slider-thumb{width:18px;height:18px}.grad-app input[type=range]::-moz-range-thumb{width:18px;height:18px}}@media (width<=700px){.grad-app{flex-direction:column;overflow:hidden}.viewport{flex:1 1 0;order:-1;min-height:120px;padding:14px}.panel{border-right:none;border-top:1px solid var(--border);flex:0 auto;order:1;width:100%;min-width:100%;max-height:52vh}}