.rumahl-color-picker{--cp-color:#64748b;--cp-hue:215;--surface:#292d30;--surface-2:#30353a;--surface-hover:#33383d;--border:#3b4146;--border-hover:#46505a;--text:#eef2f5;--muted:#91a2b2;position:relative;width:100%;max-width:360px;color:var(--text)}.rumahl-color-picker *,.rumahl-color-picker :after,.rumahl-color-picker :before{box-sizing:border-box}.rumahl-color-picker__trigger{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.rumahl-color-picker__trigger:hover{background:var(--surface-hover);border-color:var(--border-hover);transform:translateY(-1px)}.rumahl-color-picker__trigger-swatch{width:31px;height:31px;flex:none;border:1px solid rgb(255 255 255/10%);border-radius:8px;background:var(--cp-color);box-shadow:inset 0 1px 0 rgb(255 255 255/8%)}.rumahl-color-picker__trigger-content{min-width:0;flex:1;text-align:left}.rumahl-color-picker__label{display:block;margin-bottom:2px;color:var(--muted);font-size:10px;line-height:1.1}.rumahl-color-picker__value{display:block;color:#f1f4f6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:600}.rumahl-color-picker__chevron{width:16px;height:16px;color:#7f919f;transition:transform .18s ease}.rumahl-color-picker__trigger[aria-expanded=true] .rumahl-color-picker__chevron{transform:rotate(180deg)}.rumahl-color-picker__popover{position:absolute;z-index:100;top:calc(100% + 8px);left:0;width:100%;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 22px 48px rgb(0 0 0/28%),inset 0 1px 0 rgb(255 255 255/2%)}.rumahl-color-picker__color-area-wrapper{position:relative}.rumahl-color-picker__color-area{position:relative;width:100%;height:200px;overflow:hidden;cursor:crosshair;touch-action:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--cp-hue) 100% 50%);border-bottom:1px solid rgb(255 255 255/5.5%)}.rumahl-color-picker__color-area:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 24%,rgb(255 255 255/8%),transparent 30%),linear-gradient(180deg,rgb(255 255 255/3%),transparent 30%,rgb(0 0 0/8%))}.rumahl-color-picker__color-area:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgb(255 255 255/5%) 1px,transparent 0),linear-gradient(90deg,rgb(255 255 255/5%) 1px,transparent 0);background-size:10px 10px;opacity:.28;mix-blend-mode:soft-light}.rumahl-color-picker__color-cursor{position:absolute;z-index:3;width:19px;height:19px;transform:translate(-50%,-50%);border:2px solid rgb(255 255 255/95%);border-radius:50%;background:var(--cp-color);box-shadow:0 0 0 1px rgb(0 0 0/42%),0 3px 8px rgb(0 0 0/38%),inset 0 0 0 2px rgb(0 0 0/8%);pointer-events:none}.rumahl-color-picker__color-value{position:absolute;right:12px;bottom:10px;padding:4px 7px;border:1px solid rgb(255 255 255/6%);border-radius:6px;background:rgb(20 23 25/32%);backdrop-filter:blur(8px);color:rgb(255 255 255/72%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:500;pointer-events:none}.rumahl-color-picker__body{display:grid;gap:13px;padding:13px}.rumahl-color-picker__hue-wrapper{position:relative;padding:3px 0}.rumahl-color-picker__hue-track{position:relative;height:15px;overflow:visible;border-radius:999px;background:linear-gradient(90deg,#ff3b30,#ffcc00,#34c759,#32d7d5,#0a84ff,#5e5ce6,#bf5af2,#ff375f,#ff3b30);box-shadow:inset 0 0 0 1px rgb(255 255 255/11%),inset 0 -1px 2px rgb(0 0 0/18%),0 1px 2px rgb(0 0 0/16%)}.rumahl-color-picker__hue-track:after{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(180deg,rgb(255 255 255/18%),transparent 48%,rgb(0 0 0/6%));pointer-events:none}.rumahl-color-picker__hue{position:absolute;z-index:2;inset:-8px 0;width:100%;height:31px;margin:0;appearance:none;background:transparent;cursor:pointer}.rumahl-color-picker__hue::-webkit-slider-runnable-track{height:15px;background:transparent}.rumahl-color-picker__hue::-webkit-slider-thumb{width:23px;height:23px;margin-top:-4px;appearance:none;border:3px solid #e7edf1;border-radius:50%;background:hsl(var(--cp-hue) 100% 50%);box-shadow:0 0 0 1px rgb(0 0 0/32%),0 3px 9px rgb(0 0 0/42%),inset 0 0 0 1px rgb(255 255 255/20%);cursor:pointer}.rumahl-color-picker__hue::-moz-range-track{height:15px;background:transparent}.rumahl-color-picker__hue::-moz-range-thumb{width:17px;height:17px;border:3px solid #e7edf1;border-radius:50%;background:hsl(var(--cp-hue) 100% 50%);box-shadow:0 0 0 1px rgb(0 0 0/32%),0 3px 9px rgb(0 0 0/42%);cursor:pointer}.rumahl-color-picker__format-row{display:grid;grid-template-columns:82px minmax(0,1fr);gap:7px}.rumahl-color-picker select,.rumahl-color-picker__input,.rumahl-color-picker__rgb input{min-height:40px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);font-size:13px;transition:background .15s ease,border-color .15s ease}.rumahl-color-picker select{padding:0 9px}.rumahl-color-picker__input{width:100%;padding:0 11px}.rumahl-color-picker__hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.rumahl-color-picker select:hover,.rumahl-color-picker__input:hover,.rumahl-color-picker__rgb input:hover{border-color:var(--border-hover);background:var(--surface-hover)}.rumahl-color-picker__rgb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.rumahl-color-picker__rgb-field{min-width:0}.rumahl-color-picker__rgb-field>span{display:block;margin:0 0 4px 3px;color:var(--muted);font-size:9px;letter-spacing:.08em}.rumahl-color-picker__rgb-field input{width:100%;padding:0 5px;text-align:center}.rumahl-color-picker__divider{height:1px;background:rgb(255 255 255/4.5%)}.rumahl-color-picker__preset-header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.rumahl-color-picker__presets{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:7px}.rumahl-color-picker__preset{min-width:0;aspect-ratio:1;padding:0;border:1px solid rgb(255 255 255/6%);border-radius:7px;box-shadow:inset 0 1px 0 rgb(255 255 255/8%);cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.rumahl-color-picker__preset:hover{transform:translateY(-1px);border-color:rgb(255 255 255/18%)}.rumahl-color-picker__preset[aria-pressed=true]{border-color:#a9b8c6;box-shadow:0 0 0 2px #526579,inset 0 1px 0 rgb(255 255 255/12%)}.rumahl-color-picker :where(button,input,select,[tabindex]):focus-visible{outline:2px solid #71869f;outline-offset:2px}@media (prefers-reduced-motion:reduce){.rumahl-color-picker *{transition:none!important}}.light .rumahl-color-picker{--surface:#ffffff;--surface-2:#f8fafc;--surface-hover:#f1f5f9;--border:#d7dee6;--border-hover:#9fb0c0;--text:#1f2933;--muted:#64748b}.light .rumahl-color-picker__value{color:#1f2933}.light .rumahl-color-picker__chevron{color:#64748b}.light .rumahl-color-picker__trigger-swatch{border-color:rgb(15 23 42/12%);box-shadow:inset 0 1px 0 rgb(255 255 255/60%)}.light .rumahl-color-picker__popover{box-shadow:0 22px 48px rgb(15 23 42/16%),inset 0 1px 0 rgb(255 255 255/70%)}.light .rumahl-color-picker__color-area{border-bottom-color:rgb(15 23 42/8%)}.light .rumahl-color-picker__hue-track{box-shadow:inset 0 0 0 1px rgb(15 23 42/10%),inset 0 -1px 2px rgb(15 23 42/8%),0 1px 2px rgb(15 23 42/12%)}.light .rumahl-color-picker__divider{background:rgb(15 23 42/8%)}.light .rumahl-color-picker__preset{border-color:rgb(15 23 42/12%);box-shadow:inset 0 1px 0 rgb(255 255 255/60%)}.light .rumahl-color-picker__preset:hover{border-color:rgb(15 23 42/28%)}.light .rumahl-color-picker__preset[aria-pressed=true]{border-color:#526579;box-shadow:0 0 0 2px #a9b8c6,inset 0 1px 0 rgb(255 255 255/60%)}.light .rumahl-color-picker :where(button,input,select,[tabindex]):focus-visible{outline-color:#3d5b7d}