.site-color-picker{min-width:0}.site-color-picker__trigger{border:1px solid var(--line);width:100%;min-height:54px;color:var(--text-muted);text-align:left;cursor:pointer;transition:border-color .2s var(--ease-response), background .2s var(--ease-response), transform .2s var(--ease-response);background:0 0;border-radius:12px;align-items:center;gap:10px;padding:0 12px;font:600 .7rem Mona Sans Variable,sans-serif;display:flex}.site-color-picker__trigger:hover,.site-color-picker[data-open] .site-color-picker__trigger{border-color:var(--line-strong);background:var(--surface-raised)}.site-color-picker__trigger:active{transform:scale(.992)}.site-color-picker__trigger>span{flex:1;min-width:0}.site-color-picker__sample{border:1px solid #fff3;border-radius:7px;flex:none;width:34px;height:28px;box-shadow:0 2px 9px #00000026}.site-color-picker__trigger code{color:var(--text-faint);font:600 .6rem ui-monospace,monospace}.site-color-picker__chevron{width:7px;height:7px;transition:transform .24s var(--ease-travel);border-bottom:1px solid;border-right:1px solid;margin:-3px 2px 0 3px;transform:rotate(45deg)}.site-color-picker[data-open] .site-color-picker__chevron{transform:translateY(3px)rotate(225deg)}.site-color-picker__reveal{overflow:hidden}.site-color-picker__panel{border:1px solid var(--line-strong);background:var(--surface-raised);border-radius:14px;gap:11px;margin-top:8px;padding:11px;display:grid;box-shadow:0 12px 30px #0000001f}.site-color-picker__plane{background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--picker-hue);cursor:crosshair;touch-action:none;border:1px solid #ffffff29;border-radius:9px;width:100%;height:104px;position:relative;overflow:hidden}.site-color-picker__handle{pointer-events:none;border:2px solid #fff;border-radius:50%;width:15px;height:15px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 5px #0009}.site-color-picker__hue,.site-color-picker__fine label{color:var(--text-faint);gap:7px;font-size:.6rem;font-weight:650;display:grid}.site-color-picker input[type=range]{cursor:pointer;appearance:none;background:0 0;width:100%;height:18px;margin:0}.site-color-picker input[type=range]::-webkit-slider-runnable-track{background:var(--line-strong);border-radius:999px;height:8px}.site-color-picker__hue input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#f33,#ff3,#3f3,#3ff,#33f,#f3f,#f33)}.site-color-picker input[type=range]::-webkit-slider-thumb{background:var(--picker-hue);appearance:none;border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin-top:-4px;box-shadow:0 1px 5px #00000061}.site-color-picker__fine{grid-template-columns:1fr 1fr;gap:14px;display:grid}.site-color-picker__bottom{border-top:1px solid var(--line);gap:11px;padding-top:9px;display:grid}.site-color-picker__hex{color:var(--text-faint);align-items:center;gap:10px;font-size:.59rem;font-weight:700;display:flex}.site-color-picker__hex input{border:1px solid var(--line-strong);background:var(--surface-root);width:112px;min-height:34px;color:var(--text-primary);text-transform:uppercase;border-radius:7px;padding:0 9px;font:700 .68rem ui-monospace,monospace}.site-color-picker__hex input[aria-invalid=true]{border-color:#d65e6b}.site-color-picker__swatches{flex-wrap:wrap;gap:8px;display:flex}.site-color-picker__swatches button{cursor:pointer;width:23px;height:23px;transition:transform .18s var(--ease-response), outline-color .18s var(--ease-response);border:1px solid #ffffff47;border-radius:50%;padding:0;box-shadow:0 2px 5px #00000026}.site-color-picker__swatches button:hover{transform:translateY(-2px)scale(1.08)}.site-color-picker__swatches button[data-active]{outline:2px solid var(--text-primary);outline-offset:2px}.site-color-picker__advanced,.timer-studio__properties .site-color-picker__advanced{border:0;border-top:1px solid var(--line);margin:0}.site-color-picker__advanced summary,.timer-studio__properties .site-color-picker__advanced summary{color:var(--text-faint);cursor:pointer;padding:7px 0 1px;font-size:.6rem;font-weight:650}.site-color-picker__advanced .site-color-picker__fine{padding-top:12px}.site-color-picker button:focus-visible,.site-color-picker input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}html[data-motion=reduced] .site-color-picker *,html[data-motion=reduced] .site-color-picker :before,html[data-motion=reduced] .site-color-picker :after{transition:none!important}