.t-colorpicker{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.t-colorpicker,.t-colorpicker *{box-sizing:border-box}.t-colorpicker,.t-colorpicker{color:#1b1c1a;background:#f3f0e8;min-height:100%;margin:0}.t-colorpicker{font-family:DM Sans,sans-serif}.t-colorpicker button,.t-colorpicker input{font:inherit}.t-colorpicker button,.t-colorpicker a{-webkit-tap-highlight-color:transparent}.t-colorpicker a{color:inherit;text-decoration:none}.t-colorpicker ::selection{color:#f3f0e8;background:#1b1c1a}.t-colorpicker :focus-visible{outline-offset:4px;outline:2px solid #1b1c1a}.t-colorpicker .picker-shell{width:min(1240px,100% - 64px);min-height:100vh;margin:0 auto}.t-colorpicker .picker-nav{color:#74736d;letter-spacing:.08em;border-bottom:1px solid #c9c4b9;justify-content:space-between;align-items:center;min-height:76px;font:10px DM Mono,monospace;display:flex}.t-colorpicker .picker-brand{color:#1b1c1a;align-items:center;gap:9px;font-weight:500;display:flex}.t-colorpicker .picker-nav span{align-items:center;gap:12px;display:flex}.t-colorpicker .picker-nav i{background:#8a45d4;border-radius:50%;width:5px;height:5px}.t-colorpicker .picker-hero{grid-template-columns:minmax(0,1fr) 320px;gap:50px;padding:92px 0 72px;display:grid}.t-colorpicker .picker-kicker,.t-colorpicker .picker-stage-top,.t-colorpicker .picker-stage-bottom span,.t-colorpicker .picker-readout-head,.t-colorpicker .picker-hex-field span,.t-colorpicker .picker-rgb-fields span,.t-colorpicker .picker-output>span,.t-colorpicker .picker-footer{letter-spacing:.1em;font:10px DM Mono,monospace}.t-colorpicker .picker-kicker{color:#8a45d4;margin:0 0 24px}.t-colorpicker .picker-hero h1{letter-spacing:-.095em;margin:0;font-size:clamp(3.4rem,8vw,8rem);font-weight:500;line-height:.87}.t-colorpicker .picker-hero h1 em{color:#8a45d4;font-style:normal}.t-colorpicker .picker-hero>p:last-child{color:#6b6a64;align-self:end;max-width:280px;margin:0;font-size:17px;line-height:1.5}.t-colorpicker .picker-lab{border-top:1px solid #1b1c1a;border-bottom:1px solid #1b1c1a;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);min-height:520px;display:grid}.t-colorpicker .picker-stage{color:#fff;isolation:isolate;flex-direction:column;justify-content:space-between;min-height:520px;padding:24px;transition:background-color .2s;display:flex;position:relative}.t-colorpicker .picker-stage:after{content:"";z-index:-1;opacity:.18;mix-blend-mode:soft-light;background-image:linear-gradient(45deg,#fff 25%,#0000 25%),linear-gradient(-45deg,#fff 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#fff 75%),linear-gradient(-45deg,#0000 75%,#fff 75%);background-position:0 0,0 16px,16px -16px,-16px 0;background-size:32px 32px;position:absolute;inset:0}.t-colorpicker .picker-stage-top,.t-colorpicker .picker-stage-bottom{text-shadow:0 1px 6px #00000052;justify-content:space-between;align-items:center;gap:20px;display:flex}.t-colorpicker .picker-stage-bottom strong{letter-spacing:-.08em;font:500 clamp(1.7rem,4vw,3.6rem) DM Mono,monospace}.t-colorpicker .picker-native-input{cursor:pointer;align-items:center;gap:8px;font:10px DM Mono,monospace;display:flex}.t-colorpicker .picker-native-input input{opacity:0;pointer-events:none;position:absolute}.t-colorpicker .picker-native-input:hover{text-underline-offset:4px;text-decoration:underline}.t-colorpicker .picker-readout{background:#f8f6ef;padding:24px 28px 28px}.t-colorpicker .picker-readout-head{color:#797770;border-bottom:1px solid #d0ccc2;justify-content:space-between;padding-bottom:19px;display:flex}.t-colorpicker .picker-hex-field,.t-colorpicker .picker-rgb-fields label{display:block}.t-colorpicker .picker-hex-field{margin-top:28px}.t-colorpicker .picker-hex-field span,.t-colorpicker .picker-rgb-fields span{color:#77756e;margin-bottom:7px;display:block}.t-colorpicker .picker-hex-field input,.t-colorpicker .picker-rgb-fields input{color:#1b1c1a;background:0 0;border:1px solid #c9c4b9;border-radius:0;outline:0;width:100%;font:500 18px DM Mono,monospace}.t-colorpicker .picker-hex-field input{padding:13px 14px}.t-colorpicker .picker-hex-field input:focus,.t-colorpicker .picker-rgb-fields input:focus{border-color:#1b1c1a}.t-colorpicker .picker-rgb-fields{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;display:grid}.t-colorpicker .picker-rgb-fields input{padding:10px}.t-colorpicker .picker-output-list{border-top:1px solid #d0ccc2;margin-top:32px}.t-colorpicker .picker-output{border-bottom:1px solid #d0ccc2;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:55px;display:grid}.t-colorpicker .picker-output>span{color:#77756e}.t-colorpicker .picker-output code{color:#1b1c1a;font:14px DM Mono,monospace}.t-colorpicker .picker-output button{color:#8a45d4;background:0 0;border:0;align-items:center;gap:6px;padding:7px 0;font:10px DM Mono,monospace;display:flex}.t-colorpicker .picker-output button:hover{color:#512681}.t-colorpicker .picker-note{color:#77756e;margin:20px 0 0;font:11px/1.6 DM Mono,monospace}.t-colorpicker .picker-footer{color:#87857e;justify-content:space-between;padding:24px 0;display:flex}@media (max-width:800px){.t-colorpicker .picker-shell{width:min(100% - 32px,1240px)}.t-colorpicker .picker-hero{padding:68px 0 54px;display:block}.t-colorpicker .picker-hero>p:last-child{margin-top:28px}.t-colorpicker .picker-lab{display:block}.t-colorpicker .picker-stage{min-height:390px}}@media (max-width:520px){.t-colorpicker .picker-nav span{text-align:right;max-width:135px;line-height:1.5}.t-colorpicker .picker-hero h1{font-size:clamp(3.1rem,15vw,5rem)}.t-colorpicker .picker-readout{padding:22px 16px 24px}.t-colorpicker .picker-output{grid-template-columns:36px minmax(0,1fr);gap:8px;padding:9px 0}.t-colorpicker .picker-output button{grid-column:2;justify-self:start}.t-colorpicker .picker-footer{line-height:1.8;display:block}.t-colorpicker .picker-footer span:last-child{margin-top:5px;display:block}}@media (prefers-reduced-motion:reduce){.t-colorpicker .picker-stage{transition:none}}