@layer properties;@layer components{.cd_canvas-wrapper{align-items:flex-start;align-self:stretch;background-color:var(--color-gray-100,#e6e6e6);border-color:var(--color-gray-400,#999);border-style:var(--tw-border-style);border-width:1px;display:flex;flex:1;justify-content:center;min-width:calc(var(--spacing, .25rem)*0);position:relative;width:100%;&:where(.dark,.dark *){border-color:var(--color-gray-600,#666)}&:where(.dark,.dark *){background-color:var(--color-gray-900,#1a1a1a)}}.cd_canvas{cursor:crosshair;display:block;max-height:70vh;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:none}.cd_loupe{align-items:center;display:flex;flex-direction:column;pointer-events:none;position:absolute;z-index:10;--tw-translate-x:-50%;--tw-translate-y:calc(-100% + -1rem)}.cd_loupe,.cd_loupe.cd_loupe--below{translate:var(--tw-translate-x) var(--tw-translate-y)}.cd_loupe.cd_loupe--below{--tw-translate-y:calc(var(--spacing, 0.25rem)*4)}.cd_loupe-canvas{border-color:var(--color-gray-0,#fff);border-radius:calc(infinity*1px);border-style:var(--tw-border-style);border-width:4px;height:calc(var(--spacing, .25rem)*32);width:calc(var(--spacing, .25rem)*32);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,rgba(0,0,0,.1)),0 4px 6px -4px var(--tw-shadow-color,rgba(0,0,0,.1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);image-rendering:pixelated;&:where(.dark,.dark *){border-color:var(--color-gray-950,#0d0d0d)}}.cd_loupe-hex{font-family:var(--font-mono,"Noto Sans Mono Variable",ui-monospace,monospace);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333));margin-top:calc(var(--spacing, .25rem)*1);padding-block:calc(var(--spacing, .25rem)*.5);padding-inline:calc(var(--spacing, .25rem)*2);--tw-font-weight:var(--font-weight-bold,700);background-color:var(--color-gray-950,#0d0d0d);border-radius:.25rem;color:var(--color-gray-50,#f2f2f2);font-weight:var(--font-weight-bold,700)}.cd_swatch{border-color:var(--color-gray-400,#999);border-style:var(--tw-border-style);border-width:1px;flex-shrink:0;height:calc(var(--spacing, .25rem)*20);width:calc(var(--spacing, .25rem)*20);&:where(.dark,.dark *){border-color:var(--color-gray-600,#666)}}#cd_swatch{height:34px}.cd_code-button{align-items:center;border-color:var(--color-gray-400,#999);border-style:var(--tw-border-style);border-width:1px;cursor:pointer;display:flex;gap:calc(var(--spacing, .25rem)*2);padding-block:calc(var(--spacing, .25rem)*1);padding-inline:calc(var(--spacing, .25rem)*2);transition-duration:var(--tw-duration,var(--default-transition-duration,.3s));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));width:100%;&:where(.dark,.dark *){border-color:var(--color-gray-600,#666)}&:hover{@media (hover:hover){border-color:var(--color-candir-500,var(--color-spring-500))}}}.cd_code-display{align-items:center;border-color:var(--color-gray-400,#999);border-style:var(--tw-border-style);border-width:1px;display:flex;gap:calc(var(--spacing, .25rem)*2);padding-block:calc(var(--spacing, .25rem)*1);padding-inline:calc(var(--spacing, .25rem)*2);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;&:where(.dark,.dark *){border-color:var(--color-gray-600,#666)}}.cd_code-button i{color:var(--color-gray-500,gray);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,1.55556));margin-left:auto}.cd_history-swatch{cursor:pointer}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial}}}