.oklume,.oklume *,.oklume *:before,.oklume *:after{box-sizing:border-box;margin:0;padding:0}.oklume{line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--oklume-bg: oklch(1 0 0);--oklume-border: oklch(.9 0 0);--oklume-text: oklch(.25 0 0);--oklume-text-muted: oklch(.45 0 0);--oklume-accent: oklch(.5 .25 250);--oklume-max-width: min(350px, 100vw - 32px);--oklume-border-width: 1px;--oklume-preview-height: clamp(10px, 20vw, 120px);--oklume-swatch-size: clamp(28px, 8vw, 36px);--oklume-swatch-radius: clamp(3px, 1vw, 6px);--oklume-palette-max-height: 100%;--oklume-palette-padding: 4px;--oklume-scrollbar-height: 8px;--oklume-scrollbar-radius: 4px;--oklume-slider-height: clamp(6px, 2vw, 8px);--oklume-slider-radius: 3px;--oklume-thumb-size: clamp(20px, 5vw, 24px);--oklume-thumb-scale-hover: 1.2;--oklume-value-padding-block: clamp(10px, 3vw, 12px);--oklume-value-padding-inline: clamp(12px, 3.5vw, 14px);--oklume-value-radius: clamp(3px, 1vw, 5px);--oklume-value-border-width: 1px;--oklume-gap: clamp(3px, 1vw, 6px);--oklume-gap-small: clamp(6px, 2vw, 8px);--oklume-gap-medium: clamp(8px, 2.5vw, 12px);--oklume-gap-slider: clamp(6px, 2vw, 10px);--oklume-gap-section: clamp(12px, 4vw, 20px);--oklume-gap-large: clamp(16px, 5vw, 24px);--oklume-padding: clamp(8px, 3vw, 16px);--oklume-radius: clamp(4px, 1.5vw, 8px);--oklume-font-size-label: clamp(13px, 3.5vw, 15px);--oklume-font-size-value: clamp(12px, 3.5vw, 14px);--oklume-swatch-scale-hover: 1.15;--oklume-swatch-scale-active: .95;--oklume-transition-speed: .2s;--oklume-transition-easing: cubic-bezier(.4, 0, .2, 1)}.oklume--expanded{display:block;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--oklume-bg);border:var(--oklume-border-width) solid var(--oklume-border);border-radius:var(--oklume-radius);padding:var(--oklume-padding);width:100%;max-width:var(--oklume-max-width);color:var(--oklume-text);overflow:hidden;position:relative;min-width:0}.oklume--compact{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--oklume-text);position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10000;overflow:hidden}.oklume-preview{width:100%;margin-bottom:var(--oklume-gap-section);min-width:0}.oklume-preview-box{display:block;width:100%;height:var(--oklume-preview-height);border-radius:var(--oklume-radius);transition:background-color var(--oklume-transition-speed) var(--oklume-transition-easing);box-shadow:0 2px 8px #0000001a;will-change:background-color}.oklume--expanded .oklume-content,.oklume--compact .oklume-content{display:flex;flex-direction:column;gap:var(--oklume-gap-section);min-width:0}.oklume-palette{display:grid;grid-template-rows:repeat(8,var(--oklume-swatch-size));grid-auto-flow:column;grid-auto-columns:var(--oklume-swatch-size);gap:var(--oklume-gap);width:100%;max-height:var(--oklume-palette-max-height);overflow-x:auto;overflow-y:hidden;padding:var(--oklume-palette-padding);min-width:0;scrollbar-width:thin;scrollbar-color:oklch(.8 0 0) oklch(.95 0 0)}.oklume-palette::-webkit-scrollbar{height:var(--oklume-scrollbar-height)}.oklume-palette::-webkit-scrollbar-track{background:#eee;border-radius:var(--oklume-scrollbar-radius)}.oklume-palette::-webkit-scrollbar-thumb{background:#bebebe;border-radius:var(--oklume-scrollbar-radius)}@media(hover:hover){.oklume-palette::-webkit-scrollbar-thumb:hover{background:gray}}.oklume-swatch{display:block;width:var(--oklume-swatch-size);height:var(--oklume-swatch-size);border:none;box-shadow:0 2px 8px #0000001a;border-radius:var(--oklume-swatch-radius);cursor:pointer;transition:all var(--oklume-transition-speed) var(--oklume-transition-easing);background:none;padding:0;touch-action:manipulation;flex-shrink:0;will-change:transform}@media(hover:hover){.oklume-swatch:hover{transform:scale(var(--oklume-swatch-scale-hover));box-shadow:0 4px 12px #00000026;z-index:10}}.oklume-swatch:active{transform:scale(var(--oklume-swatch-scale-active))}.oklume-sliders{display:flex;flex-direction:column;gap:var(--oklume-gap-section);min-width:0}.oklume-slider{display:flex;flex-direction:column;gap:var(--oklume-gap-slider);min-width:0}.oklume-slider label{display:flex;justify-content:space-between;align-items:center;gap:var(--oklume-gap-small);font-size:var(--oklume-font-size-label);color:var(--oklume-text-muted);min-width:0}.oklume-slider label strong{color:var(--oklume-text);font-family:ui-monospace,SF Mono,Monaco,Cascadia Code,Courier New,monospace;white-space:nowrap;flex-shrink:0}.oklume-slider input[type=range]{display:block;width:100%;height:var(--oklume-slider-height);appearance:none;-webkit-appearance:none;border-radius:var(--oklume-slider-radius);outline:none;cursor:pointer;touch-action:manipulation;background:transparent;min-width:0}.oklume-slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--oklume-thumb-size);height:var(--oklume-thumb-size);background:var(--oklume-accent);border-radius:50%;cursor:pointer;transition:all var(--oklume-transition-speed) var(--oklume-transition-easing);box-shadow:0 2px 4px #0003;will-change:transform}.oklume-slider input[type=range]::-moz-range-thumb{width:var(--oklume-thumb-size);height:var(--oklume-thumb-size);background:var(--oklume-accent);border-radius:50%;cursor:pointer;border:none;transition:all var(--oklume-transition-speed) var(--oklume-transition-easing);box-shadow:0 2px 4px #0003;will-change:transform}@media(hover:hover){.oklume-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(var(--oklume-thumb-scale-hover))}.oklume-slider input[type=range]::-moz-range-thumb:hover{transform:scale(var(--oklume-thumb-scale-hover))}}.oklume-output{display:flex;flex-direction:column;gap:var(--oklume-gap-medium);min-width:0}.oklume-format{display:flex;flex-direction:column;align-items:stretch;gap:var(--oklume-gap-small);min-width:0}.oklume-format label{font-size:var(--oklume-font-size-label);font-weight:600;color:var(--oklume-text)}.oklume-value{background:var(--oklume-bg);display:block;width:100%;font-family:ui-monospace,SF Mono,Monaco,Cascadia Code,Courier New,monospace;font-size:var(--oklume-font-size-value);color:var(--oklume-text);padding:var(--oklume-value-padding-block) var(--oklume-value-padding-inline);border-radius:var(--oklume-value-radius);border:var(--oklume-value-border-width) solid var(--oklume-border);cursor:text;transition:all var(--oklume-transition-speed) var(--oklume-transition-easing);outline:none;touch-action:manipulation;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@media(hover:hover){.oklume-value:hover{border-color:var(--oklume-accent)}}.oklume-value:focus{border-color:var(--oklume-accent);box-shadow:0 0 0 3px #0065b01a;box-shadow:0 0 0 3px oklch(.5 .25 250 / .1)}.oklume-save{display:block;width:100%;font-family:ui-monospace,SF Mono,Monaco,Cascadia Code,Courier New,monospace;font-size:var(--oklume-font-size-value);color:var(--oklume-text);padding:var(--oklume-value-padding-block) var(--oklume-value-padding-inline);border-radius:var(--oklume-value-radius);border:var(--oklume-value-border-width) solid var(--oklume-border);background:var(--oklume-bg);cursor:pointer;transition:all var(--oklume-transition-speed) var(--oklume-transition-easing);outline:none;touch-action:manipulation;text-align:center;font-weight:600;min-width:0}@media(hover:hover){.oklume-save:hover{border-color:var(--oklume-accent);background:#f8f8f8}}.oklume-save:active{transform:scale(.98)}.oklume-save:focus-visible{border-color:var(--oklume-accent);box-shadow:0 0 0 3px #0065b01a;box-shadow:0 0 0 3px oklch(.5 .25 250 / .1)}.oklume--compact .oklume-popup{display:none;pointer-events:auto;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 32px);max-width:var(--oklume-max-width);max-height:calc(100vh - 40px);background:var(--oklume-bg);border:var(--oklume-border-width) solid var(--oklume-border);border-radius:var(--oklume-radius);box-shadow:0 20px 60px #0000004d;padding:var(--oklume-padding);overflow-y:auto;overflow-x:hidden;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:oklch(.7 0 0) oklch(.95 0 0)}.oklume--compact.oklume--open .oklume-popup{display:flex;flex-direction:column;gap:var(--oklume-gap-section);animation:oklume-popup-fadein .2s var(--oklume-transition-easing)}.oklume--compact.oklume--open:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;pointer-events:auto;animation:oklume-backdrop-fadein .2s var(--oklume-transition-easing);z-index:-1}.oklume--compact .oklume-popup::-webkit-scrollbar{width:8px}.oklume--compact .oklume-popup::-webkit-scrollbar-track{background:#eee;border-radius:4px}.oklume--compact .oklume-popup::-webkit-scrollbar-thumb{background:#9e9e9e;border-radius:4px}@media(hover:hover){.oklume--compact .oklume-popup::-webkit-scrollbar-thumb:hover{background:#636363}}@keyframes oklume-popup-fadein{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes oklume-backdrop-fadein{0%{opacity:0}to{opacity:1}}@media(max-height:700px){.oklume--compact .oklume-popup{max-height:calc(100vh - 20px)}}@media(max-width:480px){.oklume--compact .oklume-popup{width:calc(100vw - 32px);max-height:calc(100vh - 20px)}}@media(prefers-reduced-motion:reduce){.oklume *,.oklume *:before,.oklume *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.oklume-swatch:focus-visible,.oklume-slider input[type=range]:focus-visible,.oklume-value:focus-visible,.oklume-close:focus-visible{outline:2px solid var(--oklume-accent);outline-offset:2px}@media print{.oklume--expanded{border:1px solid #000;box-shadow:none}.oklume--compact.oklume--open .oklume-popup{position:static;transform:none;box-shadow:none}.oklume--compact.oklume--open:before{display:none}}:root{--oklume-bg: var(--gray-50);--oklume-border: var(--gray-200);--oklume-text: var(--gray-950);--oklume-text-muted: var(--gray-500);--oklume-accent: var(--primary-600);--oklume-radius: .75rem;--oklume-value-radius: .5rem;--oklume-swatch-radius: .5rem}.dark{--oklume-bg: var(--gray-900);--oklume-border: color-mix(in oklch, white 10%, transparent);--oklume-text: var(--gray-100);--oklume-text-muted: var(--gray-400);--oklume-accent: var(--primary-500)}.oklume--expanded,.oklume--compact{font-family:var(--font-family),ui-sans-serif,system-ui,sans-serif}.oklume-slider label strong,.oklume-value{font-family:var(--mono-font-family),ui-monospace,monospace}.oklume--compact .oklume-popup{border:none;box-shadow:0 0 0 1px var(--oklume-border),0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.oklume--compact .oklume-popup{max-width:min(40rem,calc(100vw - 32px))}.oklume--compact .oklume-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:var(--oklume-gap-large)}.oklume--compact .oklume-palette,.oklume--compact .oklume-sliders{grid-column:1}.oklume--compact .oklume-output{grid-column:2;grid-row:1 / 3}@media(max-width:480px){.oklume--compact .oklume-content{grid-template-columns:1fr}.oklume--compact .oklume-output{grid-column:1;grid-row:auto}}.oklume--compact.oklume--open:before{background:color-mix(in oklch,var(--gray-950) 50%,transparent)}.dark .oklume--compact.oklume--open:before{background:color-mix(in oklch,var(--gray-950) 75%,transparent)}.oklume-value{border:none;box-shadow:0 1px 2px #0000000d,0 0 0 1px var(--oklume-border)}.oklume-value:focus{box-shadow:0 1px 2px #0000000d,0 0 0 2px var(--oklume-accent)}.oklume-save{font-family:var(--font-family),ui-sans-serif,system-ui,sans-serif;font-size:var(--oklume-font-size-value);font-weight:600;border:none;background:var(--primary-600);color:#fff}@media(hover:hover){.oklume-save:hover{background:var(--primary-500)}}.oklume-save:focus-visible{box-shadow:0 0 0 2px var(--oklume-bg),0 0 0 4px var(--primary-600)}