.cssw-top{display:grid;grid-template-columns:minmax(240px,.95fr) minmax(0,1.05fr);gap:var(--sp-4);align-items:stretch}.cssw-controls{display:flex;flex-direction:column;min-width:0;gap:var(--sp-3)}.cssw-picker-col{min-width:0}.cssw-hexfield{margin-bottom:0}.cssw-hexfield label{display:block;margin:0 0 .3rem;font-weight:600;font-size:.9rem;color:var(--ink)}.cssw-hex{width:100%;font-family:var(--font-mono);text-transform:uppercase;padding:.5rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--paper, #fff);color:var(--ink)}.cssw-sliders{margin-block:auto;padding-block:var(--sp-2)}.cssw-sliders>label{display:block;margin:0 0 .3rem;font-weight:600;font-size:.9rem;color:var(--ink)}.cssw-slider-row{display:grid;grid-template-columns:1.4rem minmax(0,1fr) 2.6rem auto;align-items:center;gap:.6rem;margin-bottom:.35rem}.cssw-slider-row:last-child{margin-bottom:0}.cssw-slider-tag{font-family:var(--font-mono);font-weight:700;text-align:center}.cssw-range{width:100%;min-height:34px}.cssw-range[data-ch=r]{accent-color:#f7827e}.cssw-range[data-ch=g]{accent-color:#b7e396}.cssw-range[data-ch=b]{accent-color:#71bbde}.cssw-slider-val{font-family:var(--font-mono);font-size:.9rem;color:var(--ink-dim);text-align:right}.cssw-stepper{display:inline-grid;grid-template-columns:repeat(2,1.7rem);gap:.18rem}.cssw-stepper button,.cssw-nudge{min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:#faf9f5d1;color:var(--ink);font-family:var(--font-mono);font-weight:700;line-height:1;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}.cssw-stepper button{width:1.7rem;height:1.7rem;padding:0}.cssw-stepper button:hover,.cssw-nudge:hover{background:var(--paper);border-color:var(--ink-faint);box-shadow:0 2px 8px #1414141a;transform:translateY(-1px)}.cssw-stepper button:active,.cssw-nudge:active{transform:translateY(0)}.cssw-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.cssw-quick .btn{width:100%;min-width:0;white-space:nowrap}.cssw .btn.cssw-tool-btn{--btn-bg: #f0eee6;--btn-border: #e3dacc;--btn-hover-bg: #e3dacc;--btn-hover-border: #d8cfbd;color:#141414}.cssw-quick.no-eyedropper .cssw-random{grid-column:1 / -1}.cssw-col-title{display:block;margin:0 0 .45rem;font-family:var(--font-display, inherit);font-weight:700;font-size:1.05rem;line-height:1.2;color:var(--ink)}.cssw-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:var(--sp-3)}.cssw-preset{display:inline-flex;align-items:center;gap:.4rem;justify-content:center;padding:.45rem .6rem;min-height:40px;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--paper-warm, #f0eee6);color:var(--ink);font-weight:600;font-size:.86rem}.cssw-preset:hover{border-color:var(--ink-faint)}.cssw-preset-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.25);flex:0 0 auto}.cssw-picker-stage{--picker-nudge-size: 1.85rem;--picker-nudge-gap: .52rem;position:relative;max-width:17rem;margin-inline:auto;padding:calc(var(--picker-nudge-size) + var(--picker-nudge-gap))}.cssw-sv{position:relative;width:100%;aspect-ratio:1 / 1;border:1px solid color-mix(in srgb,var(--ink) 12%,var(--paper));border-radius:var(--radius);background:#0080ff;background-clip:padding-box;cursor:crosshair;overflow:hidden;touch-action:none;outline:none}.cssw-sv:focus-visible{box-shadow:var(--focus, 0 0 0 3px color-mix(in srgb, var(--ink) 22%, transparent))}.cssw-sv-white,.cssw-sv-black{position:absolute;inset:0}.cssw-sv-white{background:linear-gradient(to right,#fff,#fff0)}.cssw-sv-black{background:linear-gradient(to top,#000,#0000)}.cssw-knob{position:absolute;left:100%;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0000006b;pointer-events:none}.cssw-nudge{position:absolute;z-index:3;width:var(--picker-nudge-size);height:var(--picker-nudge-size);padding:0;background:#faf9f5bd;backdrop-filter:blur(4px)}.cssw-nudge-up{top:var(--picker-nudge-gap);left:50%;transform:translate(-50%)}.cssw-nudge-down{bottom:var(--picker-nudge-gap);left:50%;transform:translate(-50%)}.cssw-nudge-left{left:var(--picker-nudge-gap);top:50%;transform:translateY(-50%)}.cssw-nudge-right{right:var(--picker-nudge-gap);top:50%;transform:translateY(-50%)}.cssw-nudge-up:hover,.cssw-nudge-down:hover{transform:translate(-50%) translateY(-1px)}.cssw-nudge-left:hover,.cssw-nudge-right:hover{transform:translateY(-50%) translateY(-1px)}.cssw-hue-col{grid-column:1 / -1;min-width:0;margin-top:-.15rem}.cssw-slider-label{display:block;margin:0 0 .25rem;color:var(--ink-faint);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.cssw-hue-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.6rem}.cssw-hue{-webkit-appearance:none;appearance:none;width:100%;height:14px;border:1px solid var(--border);border-radius:999px;outline:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cssw-hue::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border:2px solid var(--ink);border-radius:50%;background:#fff;box-shadow:0 0 0 1px #0000003d;cursor:pointer}.cssw-hue::-moz-range-thumb{width:15px;height:15px;border:2px solid var(--ink);border-radius:50%;background:#fff;cursor:pointer}.cssw-compact .cssw-top{grid-template-columns:1fr}.cssw-compact .cssw-picker-col{order:-1}.cssw-compact .cssw-picker-stage{max-width:14rem}.cssw-compact .cssw-hue-col{grid-column:auto}@media(max-width:560px){.cssw-top{grid-template-columns:1fr}.cssw-picker-col{order:-1}}