.jil-editor{position:absolute;inset:0;z-index:40;pointer-events:none;color:rgba(255,255,255,.9);font:13px/1.5 Arial,"PingFang SC","Microsoft YaHei",sans-serif}
.jil-editor[hidden]{display:none!important}.jil-editor *{box-sizing:border-box}.jil-editor button,.jil-editor input{font:inherit;color:inherit}.jil-editor button{cursor:pointer}.jil-editor button:disabled,.jil-editor input:disabled{cursor:default;opacity:.5}.jil-editor button:focus-visible,.jil-editor input:focus-visible,.jil-editor [tabindex="0"]:focus-visible{outline:1px solid #b3bec9;outline-offset:2px}
.jil-layout{position:absolute;display:flex;gap:12px;align-items:flex-start;width:786px;max-width:calc(100% - 16px);max-height:calc(100% - 16px);overflow:auto;pointer-events:auto;scrollbar-width:thin;overscroll-behavior:contain;container-type:inline-size}
.jil-panel,.jil-drawer{border:1px solid rgba(255,255,255,.08);background:#1a1a1a;border-radius:24px;flex-shrink:0}.jil-panel{width:554px;min-height:397.333px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}.jil-header{display:flex;justify-content:space-between;align-items:center;height:28.667px}.jil-header strong{font-size:14px;font-weight:500}.jil-reset{display:flex;align-items:center;gap:4px;border:0;background:none;padding:0;color:rgba(255,255,255,.6)!important}.jil-editor .jil-reset svg{width:12px;height:12px;order:-1}
.jil-columns{display:flex;gap:12px}.jil-preview{position:relative;flex:0 0 250.667px;height:324.667px;overflow:hidden;border-radius:16px;background:#151515}.jil-sphere{position:absolute;inset:0;z-index:0;cursor:grab;touch-action:none;outline-offset:-2px!important}.jil-sphere:active{cursor:grabbing}.jil-canvas{display:block;width:250.667px;height:324.667px;pointer-events:none}.jil-options{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}.jil-options button{border:0;background:none}.jil-views{position:absolute;z-index:1;top:12px;left:12px;right:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px;height:32px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.08);padding:2px}.jil-view{border:0;border-radius:6px;background:none;font-size:12px!important}.jil-view[aria-selected=true]{background:rgba(255,255,255,.12)}.jil-position{position:absolute;z-index:1;bottom:12px;left:0;right:0;text-align:center;color:rgba(255,255,255,.6);font-size:12px;pointer-events:none}.jil-nudge{position:absolute;z-index:1;width:20px;height:20px;border:0;border-radius:6px;padding:4px;background:transparent;color:rgba(255,255,255,.35)!important}.jil-editor .jil-nudge svg{display:block;width:12px;height:12px}.jil-nudge-up{top:73px;left:calc(50% - 10px)}.jil-nudge-down{bottom:23px;left:calc(50% - 10px)}.jil-nudge-left{top:calc(50% + 15px);left:8px}.jil-nudge-right{top:calc(50% + 15px);right:8px}
.jil-controls{width:256px;min-width:0;display:flex;flex-direction:column}.jil-heading{font-size:13px;margin-bottom:14px}.jil-label{color:rgba(255,255,255,.6);font-size:12px}.jil-color-group{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.jil-color-box{height:28px;display:flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:3px 8px;background:rgba(255,255,255,.04)}.jil-swatch{width:16px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,.2)}.jil-color{border:0;background:none;outline:none;width:45.313px;padding:0;font-size:12px!important;line-height:20px;text-transform:uppercase}.jil-color[aria-invalid=true]{color:#ff8d8d}.jil-row{display:flex;justify-content:space-between;align-items:center}.jil-output{font-size:12px;color:rgba(255,255,255,.6)}.jil-range{width:100%;height:16px;margin:4px 0 14px;accent-color:#eee;cursor:pointer}.jil-direction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}.jil-direction{height:32px;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:0;background:none}.jil-direction[aria-pressed=true]{background:rgba(255,255,255,.12)}.jil-diffuse-label{margin-top:14px}.jil-diffuse{display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.04);padding:2px;margin-top:6px;height:30px}.jil-diffuse-choice{height:24px;min-height:0;border:0;background:none;border-radius:6px;padding:0}.jil-diffuse-choice[aria-checked=true]{background:rgba(255,255,255,.12)}.jil-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:12px}.jil-pending{color:rgba(255,255,255,.5);font-size:12px}.jil-save{height:32px;min-width:80px;border:0;border-radius:16px;background:#e8e8e8;color:#202020!important;padding:0 12px;font-weight:500!important}
.jil-drawer{width:220px;height:400px;display:flex;flex-direction:column;padding:14px 0 16px;overflow:hidden}.jil-preset-heading{display:block;flex-shrink:0;height:28px;padding:0 16px;margin:0 0 8px;font-size:13px;line-height:22px;font-weight:500}.jil-preset-grid{display:grid;flex:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:90px;align-content:start;gap:8px;padding:4px 16px;overflow-x:hidden;overflow-y:auto;min-height:0;scrollbar-width:none;overscroll-behavior:contain}.jil-preset{position:relative;min-width:0;width:100%;height:auto;aspect-ratio:1;border:1px solid transparent;border-radius:8px;background:rgba(255,255,255,.08);padding:0;overflow:hidden}.jil-preset[aria-pressed=true]{border-color:rgba(255,255,255,.85)}.jil-preset-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}.jil-preset-state{position:absolute;inset:0;display:grid;place-items:center;padding:4px 4px 20px;text-align:center;color:rgba(255,255,255,.5);font-size:10px}.jil-preset-image[hidden],.jil-preset-state[hidden]{display:none}.jil-preset-name{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;height:32px;padding:0 8px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);text-align:left;font-size:10px;line-height:18px;font-weight:500;pointer-events:none}
.jil-editor button:hover:not(:disabled){filter:brightness(1.16)}.jil-editor[data-narrow=true] .jil-layout{width:554px;flex-direction:column;align-items:stretch}.jil-editor[data-narrow=true] .jil-panel{max-width:100%;width:554px}.jil-editor[data-narrow=true] .jil-drawer{width:100%;height:164px}.jil-editor[data-narrow=true] .jil-preset-grid{display:flex;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;mask-image:none}.jil-editor[data-narrow=true] .jil-preset{flex:0 0 90px;width:90px;height:90px}
.jil-editor .jil-swatch{flex:0 0 16px;padding:0;cursor:pointer}.jil-color-picker{position:absolute;z-index:2;display:flex;flex-direction:column;gap:12px;width:240px;max-width:calc(100% - 16px);height:232px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#262626;box-shadow:0 8px 32px #0006;pointer-events:auto}.jil-color-field{display:flex;flex-direction:column;gap:8px}.jil-sv{position:relative;width:100%;height:132px;flex-shrink:0;border:1px solid rgba(255,255,255,.12);border-radius:8px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);background-origin:border-box;cursor:crosshair;touch-action:none}.jil-sv-thumb{position:absolute;top:0;left:0;width:8px;height:8px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px #0008;pointer-events:none}.jil-editor .jil-hue{appearance:none;-webkit-appearance:none;display:block;flex-shrink:0;width:100%;height:12px;margin:0;padding:0;border:0;border-radius:4px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:pointer;touch-action:none}.jil-hue::-webkit-slider-runnable-track{height:12px;background:transparent;border-radius:4px}.jil-hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;margin-top:2px;border:2px solid #fff;border-radius:50%;background:transparent;box-shadow:0 1px 3px #0008}.jil-hue::-moz-range-track{height:12px;background:transparent}.jil-hue::-moz-range-thumb{width:5px;height:5px;border:2px solid #fff;border-radius:50%;background:transparent}.jil-recommended{display:flex;flex-direction:column;gap:4px}.jil-recommended-label{font-size:10px;line-height:18px;color:rgba(255,255,255,.35)}.jil-recommended-row{display:flex;justify-content:space-between;gap:2px}.jil-editor .jil-recommended-swatch{width:20px;height:20px;flex:0 0 20px;border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:0;transition:transform .1s}.jil-editor .jil-recommended-swatch:hover{transform:scale(1.1)}.jil-recommended-swatch[aria-pressed=true]{box-shadow:0 0 0 1px #262626,0 0 0 2px #fff}
@media(max-width:600px){.jil-columns{flex-direction:column;align-items:center}.jil-controls{width:100%}.jil-panel{min-width:0}.jil-preview{flex-basis:auto}.jil-layout{max-height:calc(100% - 16px)}.jil-heading{margin-top:8px}}
@container(max-width:530px){.jil-columns{flex-direction:column;align-items:center}.jil-controls{width:100%}.jil-preview{flex-basis:auto}.jil-heading{margin-top:8px}}
.jil-controls{position:relative;display:block;height:324.667px}.jil-controls>.jil-heading{position:absolute;top:0;left:0;margin:0}.jil-color-group{position:absolute;top:29.333px;left:0;right:0;display:grid;grid-template-columns:32px minmax(0,1fr);height:32px;margin:0}.jil-color-box{justify-self:start;width:max-content;justify-content:flex-start;height:32px;padding:0 8px;gap:0}.jil-color-box>.jil-swatch{margin-right:4px}.jil-brightness-group{position:absolute;top:63.333px;left:0;right:0;display:grid;grid-template-columns:36px minmax(0,1fr) 48px;align-items:center;gap:0;height:32px}.jil-brightness-track{position:relative;display:block;min-width:0;height:20px}.jil-brightness-group .jil-range{appearance:none;-webkit-appearance:none;display:block;min-width:0;width:100%;height:20px;margin:0;background:none}.jil-range::-webkit-slider-runnable-track{height:12px;border-radius:4px;background:linear-gradient(to right,rgba(255,255,255,.2) 0 var(--jil-brightness-percent,44.444444%),transparent var(--jil-brightness-percent,44.444444%) 100%),rgba(255,255,255,.08)}.jil-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:4px;height:16px;margin-top:-2px;border:1px solid transparent;border-radius:11px;background:#fff}.jil-range::-moz-range-track{height:12px;border-radius:4px;background:linear-gradient(to right,rgba(255,255,255,.2) 0 var(--jil-brightness-percent,44.444444%),transparent var(--jil-brightness-percent,44.444444%) 100%),rgba(255,255,255,.08)}.jil-range::-moz-range-progress{height:12px;border-radius:4px;background:transparent}.jil-range::-moz-range-thumb{box-sizing:border-box;width:4px;height:16px;border:1px solid transparent;border-radius:11px;background:#fff}.jil-brightness-ticks{position:absolute;left:0;right:0;top:50%;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}.jil-brightness-ticks>span{flex:0 0 1px;width:1px;height:4px;background:rgba(255,255,255,.2)}.jil-brightness-ticks>span:first-child,.jil-brightness-ticks>span:last-child{visibility:hidden}.jil-range:disabled+.jil-brightness-ticks{opacity:.5}.jil-brightness-group .jil-output{text-align:right}.jil-direction-label{position:absolute;top:104.667px;left:0}.jil-direction-grid{position:absolute;top:131.333px;left:0;right:0;margin:0}.jil-diffuse-label{position:absolute;top:216.667px;left:0;margin:0}.jil-diffuse{position:absolute;top:242.667px;left:0;right:0;margin:0}.jil-footer{position:absolute;bottom:0;left:0;right:0;margin:0;padding:0;height:32px}
.jil-editor .jil-source{position:absolute;z-index:1;left:125.333px;top:188px;display:block;width:72px;height:72px;max-width:none;max-height:none;object-fit:contain;pointer-events:none;user-select:none;transform:translate(-50%,-50%) perspective(350px) rotateX(-25deg) rotateY(-20deg);transform-origin:center}.jil-editor .jil-source[data-view=front]{transform:translate(-50%,-50%)}
.jil-canvas{position:absolute;inset:0;z-index:0}.jil-sphere{isolation:isolate}.jil-beam{z-index:2;mix-blend-mode:plus-lighter}.jil-foreground{z-index:3}.jil-options{z-index:4}

.jil-editor[data-narrow="false"] .jil-preset-grid{mask-image:linear-gradient(to bottom,transparent,#000 var(--preset-fade-top,0px),#000 calc(100% - var(--preset-fade-bottom,0px)),transparent)}
.jil-editor[data-narrow="false"] .jil-preset-grid::-webkit-scrollbar{display:none}
.jil-color-picker{max-height:calc(100% - 16px);overflow-y:auto;overscroll-behavior:contain}
.jil-color-field,.jil-recommended{flex-shrink:0}
.jil-preview-frame{display:contents}
.jil-editor[data-mobile="true"] .jil-columns{flex-direction:column;align-items:center}
.jil-editor[data-mobile="true"] .jil-controls{width:100%;flex:0 0 324.667px}
.jil-editor[data-mobile="true"] .jil-preview-frame{position:relative;display:block;flex:0 0 auto}
.jil-editor[data-mobile="true"] .jil-preview{position:absolute;top:0;left:0;width:250.667px;transform-origin:top left}
.jil-editor[data-mobile="true"] .jil-panel{min-height:0}

.jil-editor .jil-nudge:hover:not(:disabled){background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)!important}.jil-editor .jil-nudge:disabled{opacity:1;color:rgba(255,255,255,.2)!important}