#ld-demo{--lm-primary:#c2d96b;--lm-on-primary:#26320b;--lm-surface:#151b14;--lm-container:#20271e;--lm-high:#2c3428;--lm-text:#e7ecdf;--lm-muted:#aeb7a4;--lm-line:#3d4736;--lm-selected:#354626;--lm-radius:24px;--lm-duration:32s;--lm-ease:cubic-bezier(.4,0,.2,1);font:14px/1.5 'Segoe UI',Roboto,Arial,sans-serif;color:var(--lm-text);color-scheme:dark;max-width:1040px;width:100%;margin:auto;-webkit-font-smoothing:antialiased}
#ld-demo *{box-sizing:border-box}
#ld-demo button,#ld-demo input{font:inherit}
#ld-demo button{color:inherit}
#ld-demo button:focus-visible,#ld-demo input:focus-visible{outline:2px solid var(--lm-primary);outline-offset:4px}
#ld-demo button{border:0;background:none}
#ld-demo h1,#ld-demo h2,#ld-demo h3,#ld-demo p{margin:0}
#ld-demo .lm-shell{position:relative;background:var(--lm-surface);border:1px solid #384330;border-radius:28px;overflow:hidden;}
#ld-demo .lm-appbar{min-height:80px;display:flex;align-items:center;gap:24px;padding:16px 28px;background:#1b2218;border-bottom:1px solid #323c2b}
#ld-demo .lm-logo{display:block;width:140px;height:auto;flex:none}
#ld-demo .lm-app-label{font-size:12px;color:var(--lm-muted);border-left:1px solid var(--lm-line);padding-left:24px}
#ld-demo .lm-preset{margin-left:auto;display:flex;align-items:center;gap:10px;background:var(--lm-high);border-radius:16px;padding:11px 16px;font-size:13px;white-space:nowrap}
#ld-demo .lm-preset-dot{width:7px;height:7px;background:var(--lm-primary);border-radius:50%}
#ld-demo .lm-preset-auto{font-size:11px;color:var(--lm-muted);padding-left:6px}
#ld-demo .lm-layout{display:grid;grid-template-columns:246px minmax(0,1fr)}
#ld-demo .lm-sidebar{padding:30px 16px 24px;background:#191f16;border-right:1px solid #30392a;display:flex;flex-direction:column}
#ld-demo .lm-sidebar-title{display:flex;align-items:center;justify-content:space-between;padding:0 12px}
#ld-demo h2{font-weight:500;font-size:17px;line-height:1.4;letter-spacing:-.15px}
#ld-demo .lm-count{font-size:12px;font-variant-numeric:tabular-nums;color:var(--lm-muted);padding:3px 9px;border-radius:9px;background:var(--lm-high)}
#ld-demo .lm-muted{color:var(--lm-muted);font-size:13px}
#ld-demo .lm-sidebar-description{padding:7px 12px 22px;font-size:12px}
#ld-demo .lm-layer-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#ld-demo .lm-layer{display:flex;align-items:center;gap:11px;min-height:66px;padding:10px 8px 10px 12px;border-radius:18px;transition:background .2s}
#ld-demo .lm-layer:hover{background:#293224}
#ld-demo .lm-order{font-size:11px;color:#849179;font-variant-numeric:tabular-nums}
#ld-demo .lm-layer-name{flex:1;min-width:0;font-size:13px;font-weight:500;line-height:1.4}
#ld-demo .lm-layer-name small{display:block;color:var(--lm-muted);font-size:11px;font-weight:400;margin-top:3px}
#ld-demo .lm-eye-button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;transition:background .18s}
#ld-demo .lm-eye-button:hover{background:#e0eccb12}
#ld-demo .lm-eye{position:relative;display:block;width:16px;height:11px;border:1.5px solid currentColor;border-radius:65% 65%;color:#b5c3a4}
#ld-demo .lm-eye:before{content:'';position:absolute;width:5px;height:5px;left:4px;top:1.5px;border-radius:50%;background:currentColor}
#ld-demo .lm-eye:after{content:'';position:absolute;width:21px;height:1.5px;left:-4px;top:3px;transform:rotate(-45deg);background:currentColor;box-shadow:0 1px var(--lm-surface);opacity:0}
#ld-demo .lm-layer[data-off=true] .lm-eye:after{opacity:1}
#ld-demo .lm-layer[data-off=true] .lm-layer-name{color:#a3ab9a}
#ld-demo .lm-layer[data-off=true] .lm-eye{color:#7e8b72}
#ld-demo .lm-selected,#ld-demo .lm-selected:hover{background:var(--lm-selected)}
#ld-demo .lm-selected .lm-order,#ld-demo .lm-selected .lm-layer-name small,#ld-demo .lm-selected .lm-eye{color:var(--lm-primary)}
#ld-demo .lm-selected .lm-layer-name{color:#e6f1cb}
#ld-demo .lm-stack-note{display:flex;gap:12px;align-items:flex-start;margin:32px 12px 0;padding-top:18px;border-top:1px solid #333e2b;color:var(--lm-muted);font-size:11px;line-height:1.6}
#ld-demo .lm-stack-note>span{font-size:20px;line-height:1}
#ld-demo .lm-editor{padding:28px;min-width:0}
#ld-demo .lm-editor-title{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:26px}
#ld-demo .lm-overline{color:var(--lm-primary);font-size:10px;letter-spacing:1.7px;font-weight:600}
#ld-demo h1{font-size:32px;font-weight:500;line-height:1.2;letter-spacing:-1.1px;margin:6px 0 7px}
#ld-demo .lm-effect-toggle{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--lm-muted);position:relative}
#ld-demo .lm-effect-toggle input,#ld-demo .lm-performance input{position:absolute;width:48px;height:32px;margin:0;opacity:0;z-index:1}
#ld-demo .lm-switch{display:block;position:relative;width:48px;height:28px;border-radius:16px;border:2px solid #78896a;background:#343f2c;flex:none;transition:background .2s}
#ld-demo .lm-switch:after{content:'';position:absolute;left:5px;top:5px;width:14px;height:14px;border-radius:50%;background:#afbb9f;transition:transform .2s,background .2s,width .2s,height .2s,top .2s,left .2s}
#ld-demo input:checked+.lm-switch{background:var(--lm-primary);border-color:var(--lm-primary)}
#ld-demo input:checked+.lm-switch:after{width:20px;height:20px;top:2px;left:2px;background:var(--lm-on-primary);transform:translateX(20px)}
#ld-demo input:focus-visible+.lm-switch{outline:2px solid var(--lm-primary);outline-offset:4px}
#ld-demo .lm-settings{display:grid;gap:14px;transition:opacity .2s}
#ld-demo[data-effect-off=true] .lm-settings{opacity:.45}
#ld-demo .lm-section{background:var(--lm-container);border-radius:var(--lm-radius);padding:22px 24px}
#ld-demo .lm-section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px}
#ld-demo .lm-section-caption{font-size:11px;color:var(--lm-muted)}
#ld-demo .lm-basic-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
#ld-demo .lm-control{display:block;min-width:0;border-radius:12px}
#ld-demo .lm-control-header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:12px}
#ld-demo output{font-variant-numeric:tabular-nums;font-size:12px;color:#cdd5c3}
#ld-demo .lm-control output{background:var(--lm-high);border-radius:8px;min-width:58px;padding:5px 9px;text-align:center;transition:background .18s,color .18s}
#ld-demo .lm-control[data-active=true] output{background:var(--lm-primary);color:var(--lm-on-primary)}
#ld-demo input[type=range]{--pct:50%;display:block;appearance:none;-webkit-appearance:none;width:100%;height:28px;padding:0;margin:0;background:transparent;accent-color:var(--lm-primary);touch-action:none;cursor:ew-resize}
#ld-demo input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:9px;background:linear-gradient(90deg,var(--lm-primary) 0 var(--pct),#414e34 var(--pct) 100%)}
#ld-demo input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:4px;height:28px;margin-top:-8px;border-radius:3px;background:#d4e793;box-shadow:0 0 0 3px var(--lm-container)}
#ld-demo input[type=range]::-moz-range-track{height:12px;border-radius:9px;background:#414e34}
#ld-demo input[type=range]::-moz-range-progress{height:12px;border-radius:9px;background:var(--lm-primary)}
#ld-demo input[type=range]::-moz-range-thumb{width:4px;height:28px;border:0;border-radius:3px;background:#d4e793;box-shadow:0 0 0 3px var(--lm-container)}
#ld-demo .lm-range-labels{display:flex;justify-content:space-between;color:#a2ad95;font-size:10px;margin-top:5px}
#ld-demo .lm-wheels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#ld-demo .lm-wheel-group{text-align:center;min-width:0}
#ld-demo h3{font-size:12px;font-weight:400;color:#dce4d1;margin-bottom:13px}
#ld-demo .lm-wheel{width:96px;height:96px;position:relative;border-radius:50%;margin:0 auto 12px;background:conic-gradient(#9f72d8,#d674bc,#dd7676,#dbb677,#bfd774,#81bf86,#70bfc5,#719edf,#9f72d8);touch-action:none;cursor:crosshair;box-shadow:0 0 0 4px #c2d96b00;transition:box-shadow .2s}
#ld-demo .lm-wheel-group[data-active=true] .lm-wheel{box-shadow:0 0 0 5px #c2d96b20}
#ld-demo .lm-wheel-inner{position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at center,#333e2e,#1c241b);box-shadow:inset 0 0 0 1px #17201460}
#ld-demo .lm-cross{position:absolute;left:calc(50% - 5px);top:calc(50% - 5px);width:10px;height:10px;background:linear-gradient(90deg,transparent 4px,#d7e1ca30 4px 5px,transparent 5px),linear-gradient(0deg,transparent 4px,#d7e1ca30 4px 5px,transparent 5px)}
#ld-demo .lm-wheel-dot{position:absolute;left:calc(50% - 5px);top:calc(50% - 5px);width:10px;height:10px;border:2px solid #f1f6e9;border-radius:50%;background:#c2d96b;box-shadow:0 1px 5px #0006}
#ld-demo [data-wheel=shadow] .lm-wheel-dot{transform:translate(calc(var(--lm-sx)*1px),calc(var(--lm-sy)*1px))}
#ld-demo [data-wheel=mid] .lm-wheel-dot{transform:translate(calc(var(--lm-mx)*1px),calc(var(--lm-my)*1px))}
#ld-demo [data-wheel=high] .lm-wheel-dot{transform:translate(calc(var(--lm-hx,0)*1px),calc(var(--lm-hy,0)*1px))}
#ld-demo .lm-wheel-value{font-size:11px;color:var(--lm-muted)}
#ld-demo .lm-wheel-inputs{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
#ld-demo .lm-wheel-inputs:focus-within{position:relative;clip-path:none;width:auto;height:auto;overflow:visible;display:grid;gap:4px;font-size:11px;margin:6px 0}
#ld-demo .lm-channel-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
#ld-demo .lm-swatches{display:flex;gap:5px;flex-wrap:wrap}
#ld-demo .lm-swatch{width:34px;height:34px;border-radius:50%;position:relative;flex:none;padding:0}
#ld-demo .lm-swatch:before{content:'';position:absolute;inset:6px;background:var(--swatch);border-radius:50%}
#ld-demo .lm-swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--lm-primary);background:#c2d96b0c}
#ld-demo .lm-swatch[aria-pressed=true]:after{content:'';position:absolute;width:8px;height:4px;border:solid #1c2715;border-width:0 0 2px 2px;transform:rotate(-45deg);left:13px;top:14px}
#ld-demo .lm-channel-name{color:var(--lm-muted);font-size:12px}
#ld-demo .lm-hsl-controls{display:grid;gap:18px}
#ld-demo .lm-hsl-controls .lm-control{display:grid;grid-template-columns:156px minmax(0,1fr);gap:20px;align-items:center}
#ld-demo .lm-hsl-controls .lm-control-header{margin:0;font-size:12px}
#ld-demo .lm-hsl-controls output{min-width:52px;font-size:11px}
#ld-demo .lm-channel-footer{margin-top:23px;display:flex;gap:8px;align-items:center;font-size:11px;color:var(--lm-muted)}
#ld-demo .lm-channel-preview{width:8px;height:8px;flex:none;border-radius:50%;background:#ef6b66}
#ld-demo .lm-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
#ld-demo .lm-reset{padding:10px 14px;border-radius:22px;color:var(--lm-primary);font-size:12px;min-height:44px;transition:background .2s}
#ld-demo .lm-reset:hover,#ld-demo .lm-reset[data-active=true]{background:#c2d96b16}
#ld-demo .lm-reset>span{font-size:20px;vertical-align:-1px;margin-right:5px}
#ld-demo .lm-performance{display:flex;position:relative;align-items:center;gap:10px;font-size:11px;color:var(--lm-muted)}
@media(max-width:860px){#ld-demo .lm-layout{grid-template-columns:220px minmax(0,1fr)}#ld-demo .lm-editor{padding:24px 18px}#ld-demo .lm-section{padding:20px 18px}#ld-demo .lm-app-label{display:none}#ld-demo .lm-hsl-controls .lm-control{grid-template-columns:1fr;gap:3px}#ld-demo .lm-channel-name{display:none}#ld-demo .lm-basic-grid{gap:20px}#ld-demo .lm-section-caption{display:none}#ld-demo .lm-editor-footer{flex-wrap:wrap}}
@media(max-width:660px){#ld-demo .lm-layout{display:flex;flex-direction:column}#ld-demo .lm-editor{order:0;padding:24px 16px}#ld-demo .lm-sidebar{order:1;border-right:0;border-top:1px solid var(--lm-line);padding:24px 16px}#ld-demo .lm-layer-list{grid-template-columns:1fr 1fr;gap:4px}#ld-demo .lm-sidebar-description{padding-bottom:14px}#ld-demo .lm-appbar{padding:16px 20px;gap:12px}#ld-demo .lm-logo{width:116px}#ld-demo .lm-preset{padding:9px 12px;font-size:12px}#ld-demo .lm-preset-auto{display:none}#ld-demo .lm-stack-note{margin-top:20px}#ld-demo .lm-section{border-radius:20px}#ld-demo .lm-editor-title{margin-bottom:22px}#ld-demo .lm-effect-label{display:none}#ld-demo .lm-demo-state{display:none}}
@media(max-width:400px){#ld-demo .lm-layer-list{grid-template-columns:1fr}#ld-demo .lm-wheels{gap:8px}#ld-demo .lm-wheel{width:74px;height:74px}#ld-demo .lm-section{padding:18px 14px}#ld-demo .lm-basic-grid{grid-template-columns:1fr;gap:20px}#ld-demo .lm-swatches{gap:2px}#ld-demo .lm-swatch{width:31px;height:34px}#ld-demo h1{font-size:28px}#ld-demo .lm-editor-title .lm-muted{font-size:11px}#ld-demo .lm-layer{min-height:60px}#ld-demo .lm-control-header{font-size:13px}}
@media(prefers-reduced-motion:reduce){#ld-demo *,#ld-demo *:before,#ld-demo *:after{transition:none!important}}