@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-font-weight:initial;--tw-border-style:solid;--tw-tracking:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}.hero-section{background-color:var(--color-theme-light,#fbf9f3);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 16)}.feature-box{border-radius:var(--radius-lg,.5rem);background-color:#fffc}@supports (color:color-mix(in lab,red,red)){.feature-box{background-color:color-mix(in oklab,var(--color-white,#fff) 80%,transparent)}}.feature-box{padding:calc(var(--spacing,.25rem) * 4);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-backdrop-blur:blur(var(--blur-sm,8px));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.section-container{max-width:var(--container-4xl,56rem);margin-inline:auto}.section-container-wide{max-width:var(--container-7xl,80rem);margin-inline:auto}.section-title{margin-bottom:calc(var(--spacing,.25rem) * 4);text-align:center;font-size:var(--text-3xl,1.875rem);line-height:var(--tw-leading,var(--text-3xl--line-height, 1.2 ));--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);color:var(--color-theme-darker,#242222)}.subsection-title{margin-bottom:calc(var(--spacing,.25rem) * 2);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-theme-darker,#242222)}.tool-section{background-color:var(--color-theme-lighter,#fcfaf6);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 10)}.converter-card{border-radius:var(--radius-2xl,1rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-white,#fff);padding:calc(var(--spacing,.25rem) * 6);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(min-width:48rem){.converter-card{padding:calc(var(--spacing,.25rem) * 8)}}.tab-bar{margin-bottom:calc(var(--spacing,.25rem) * 6);gap:calc(var(--spacing,.25rem) * 1);border-radius:var(--radius-xl,.75rem);background-color:var(--color-theme-lighter,#fcfaf6);padding:calc(var(--spacing,.25rem) * 1);display:flex}.tab-btn{cursor:pointer;border-radius:var(--radius-lg,.5rem);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2.5);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-theme-5,#484445);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));flex:1}@media(hover:hover){.tab-btn:hover{color:var(--color-theme-darker,#242222)}}.tab-btn.active{background-color:var(--color-white,#fff);color:var(--color-theme-darker,#242222);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.input-group{gap:calc(var(--spacing,.25rem) * 2);flex-direction:column;display:flex}.input-label{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-theme-darker,#242222)}.input-field{border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-white,#fff);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 3);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));color:var(--color-theme-darker,#242222);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.input-field:focus{border-color:var(--color-theme-3,#497b78);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:#497b7866}@supports (color:color-mix(in lab,red,red)){.input-field:focus{--tw-ring-color:color-mix(in oklab, var(--color-theme-3,#497b78) 40%, transparent)}}.input-field:focus{--tw-outline-style:none;outline-style:none}.input-field::-moz-placeholder{color:#48444599}.input-field::placeholder{color:#48444599}@supports (color:color-mix(in lab,red,red)){.input-field::-moz-placeholder{color:color-mix(in oklab,var(--color-theme-5,#484445) 60%,transparent)}.input-field::placeholder{color:color-mix(in oklab,var(--color-theme-5,#484445) 60%,transparent)}}.input-row{gap:calc(var(--spacing,.25rem) * 3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.color-preview{height:calc(var(--spacing,.25rem) * 32);border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);width:100%;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)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));justify-content:center;align-items:center;display:flex}.color-preview-large{height:calc(var(--spacing,.25rem) * 48);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-2xl,1rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);width:100%;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)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));flex-direction:column;display:flex}@media(min-width:48rem){.color-preview-large{height:calc(var(--spacing,.25rem) * 56)}}.result-grid{margin-top:calc(var(--spacing,.25rem) * 6);gap:calc(var(--spacing,.25rem) * 4);grid-template-columns:repeat(1,minmax(0,1fr));display:grid}@media(min-width:48rem){.result-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.result-card{border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-theme-lighter,#fcfaf6);padding:calc(var(--spacing,.25rem) * 4);text-align:center}.result-label{margin-bottom:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);--tw-tracking:var(--tracking-wider,.05em);letter-spacing:var(--tracking-wider,.05em);color:var(--color-theme-5,#484445);text-transform:uppercase}.result-value{font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);color:var(--color-theme-darker,#242222)}.copy-btn{margin-left:calc(var(--spacing,.25rem) * 2);cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 1);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:#497b784d;display:inline-flex}@supports (color:color-mix(in lab,red,red)){.copy-btn{border-color:color-mix(in oklab,var(--color-theme-3,#497b78) 30%,transparent)}}.copy-btn{padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-theme-3,#497b78);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)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){.copy-btn:hover{background-color:var(--color-theme-3,#497b78);color:var(--color-white,#fff)}}.palette-section{margin-top:calc(var(--spacing,.25rem) * 10)}.palette-grid{gap:calc(var(--spacing,.25rem) * 2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}@media(min-width:40rem){.palette-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:48rem){.palette-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(min-width:64rem){.palette-grid{grid-template-columns:repeat(10,minmax(0,1fr))}}.palette-swatch{aspect-ratio:1;cursor:pointer;border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:relative}@media(hover:hover){.palette-swatch:hover{z-index:10;--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.palette-swatch.selected{z-index:10;--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-theme-3,#497b78);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.palette-tooltip{pointer-events:none;z-index:20;margin-bottom:calc(var(--spacing,.25rem) * 2);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-radius:var(--radius-lg,.5rem);background-color:var(--color-theme-darker,#242222);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);white-space:nowrap;color:var(--color-white,#fff);opacity:0;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:absolute;bottom:100%;left:50%}.palette-swatch:hover .palette-tooltip{opacity:1}.filter-bar{margin-bottom:calc(var(--spacing,.25rem) * 4);gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;display:flex}.filter-chip{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-theme-5,#484445);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-radius:3.40282e38px}@media(hover:hover){.filter-chip:hover{border-color:var(--color-theme-3,#497b78);color:var(--color-theme-3,#497b78)}}.filter-chip.active{border-color:var(--color-theme-3,#497b78);background-color:var(--color-theme-3,#497b78);color:var(--color-white,#fff)}.search-wrapper{margin-bottom:calc(var(--spacing,.25rem) * 4);position:relative}.search-input{border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-white,#fff);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2.5);padding-left:calc(var(--spacing,.25rem) * 10);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-theme-darker,#242222)}.search-input:focus{border-color:var(--color-theme-3,#497b78);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:#497b7866}@supports (color:color-mix(in lab,red,red)){.search-input:focus{--tw-ring-color:color-mix(in oklab, var(--color-theme-3,#497b78) 40%, transparent)}}.search-input:focus{--tw-outline-style:none;outline-style:none}.search-icon{top:50%;left:calc(var(--spacing,.25rem) * 3);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);color:#48444580;position:absolute}@supports (color:color-mix(in lab,red,red)){.search-icon{color:color-mix(in oklab,var(--color-theme-5,#484445) 50%,transparent)}}.card-sm{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-white,#fff);padding:calc(var(--spacing,.25rem) * 6);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.highlight-box-gray{border-top-right-radius:var(--radius-lg,.5rem);border-bottom-right-radius:var(--radius-lg,.5rem);border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--color-theme-5,#484445);background-color:var(--color-theme-lighter,#fcfaf6);padding:calc(var(--spacing,.25rem) * 6)}.highlight-box-green{border-top-right-radius:var(--radius-lg,.5rem);border-bottom-right-radius:var(--radius-lg,.5rem);border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--color-theme-3,#497b78);background-color:var(--color-theme-light,#fbf9f3);padding:calc(var(--spacing,.25rem) * 6)}.step-icon{margin-inline:auto;margin-bottom:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 16);width:calc(var(--spacing,.25rem) * 16);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-theme-lighter,#fcfaf6);font-size:var(--text-3xl,1.875rem);line-height:var(--tw-leading,var(--text-3xl--line-height, 1.2 ));border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}.autocomplete-dropdown{top:100%;right:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);z-index:30;margin-top:calc(var(--spacing,.25rem) * 1);max-height:calc(var(--spacing,.25rem) * 64);border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-white,#fff);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:absolute;overflow-y:auto}.autocomplete-item{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2.5);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)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:flex}@media(hover:hover){.autocomplete-item:hover{background-color:var(--color-theme-lighter,#fcfaf6)}}.autocomplete-swatch{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);flex-shrink:0}.action-btn{cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-xl,.75rem);background-color:var(--color-theme-3,#497b78);padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-white,#fff);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:flex}@media(hover:hover){.action-btn:hover{background-color:var(--color-theme-darker,#242222)}}.action-btn:disabled{cursor:not-allowed;opacity:.6}.action-btn-secondary{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-theme-lighter,#fcfaf6);color:var(--color-theme-darker,#242222)}@media(hover:hover){.action-btn-secondary:hover{background-color:var(--color-theme-2,#f2eddc);color:var(--color-theme-darker,#242222)}}.harmonies-section{border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-theme-lighter,#fcfaf6);padding:calc(var(--spacing,.25rem) * 5)}.harmony-card{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc);background-color:var(--color-white,#fff);padding:calc(var(--spacing,.25rem) * 3)}.harmony-label{margin-bottom:calc(var(--spacing,.25rem) * 2);align-items:center;gap:calc(var(--spacing,.25rem) * 1.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-theme-5,#484445);display:flex}.harmony-swatches{gap:calc(var(--spacing,.25rem) * 1.5);display:flex}.harmony-swatch{height:calc(var(--spacing,.25rem) * 10);width:calc(var(--spacing,.25rem) * 10);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-theme-2,#f2eddc)}.harmony-swatch.clickable{cursor:pointer;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}@media(hover:hover){.harmony-swatch.clickable:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}@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-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@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}