.layers-anchor{
  position:absolute; top:calc(100% + 8px); right:0;
  width:min(320px, calc(100vw - 24px));
  z-index:210;
}
.lp{
  --lp-ink:var(--dr-ink, #1b1b1b);
  --lp-paper:var(--dr-paper, #f8f7f4);
  --lp-mute:var(--dr-mute, #5d594f);
  --lp-dim:var(--dr-dim, #9b968c);
  --lp-tray:var(--dr-tray, #e9e6e0);
  --lp-line:var(--dr-line, #d9d6cf);
  --lp-line-2:var(--dr-line-2, #cfcbc2);
  --lp-line-3:var(--dr-line-3, #c9c5bd);
  --lp-font-ui:var(--font-ui, 'Archivo','Helvetica Neue',system-ui,sans-serif);
  --lp-font-cond:var(--font-cond, 'Barlow Condensed','Archivo',system-ui,sans-serif);
  --lp-font-mono:var(--font-mono, 'IBM Plex Mono',ui-monospace,Menlo,monospace);
  --lp-float:0 0 0 1px var(--lp-line), 0 18px 44px rgba(27,27,27,.22);
  --lp-warn:#a3311f;
  --lp-sel:#dcd7ce;
  --lp-check:repeating-conic-gradient(#e2ded6 0% 25%, #fbfaf7 0% 50%) 0 0 / 8px 8px;
  --lp-ease:cubic-bezier(.22,1,.36,1);
  position:relative;
  display:none; flex-direction:column;
  width:100%; box-sizing:border-box;
  max-height:calc(100vh - 120px);
  border-radius:16px;
  background:var(--lp-paper); color:var(--lp-ink);
  box-shadow:var(--lp-float);
  font-family:var(--lp-font-ui); font-size:13px; line-height:1.3;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  text-align:left;
}
.lp.open{ display:flex; animation:lp-pop .16s ease both }
.lp *{ box-sizing:border-box; -webkit-user-drag:none }
:where(.lp) button{
  font:inherit; color:inherit; background:none; border:0; padding:0; margin:0;
  cursor:pointer; -webkit-appearance:none; appearance:none;
}
:where(.lp) input{ font:inherit; color:inherit; }
.lp [hidden]{ display:none !important }
.lp :focus{ outline:none }
.lp :focus-visible{ outline:2px solid var(--lp-ink); outline-offset:1px; border-radius:7px }
.lp svg{ display:block; flex:none }
@keyframes lp-pop{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
@keyframes lp-up{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
@keyframes lp-drop{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
.lp-head, .lp-sel{
  height:48px; flex:none;
  display:flex; align-items:center;
}
.lp-head{ gap:8px; padding:0 8px 0 16px }
.lp-cap{
  font-family:var(--lp-font-cond); font-size:12.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
}
.lp-count{ font-family:var(--lp-font-mono); font-size:11px; color:var(--lp-mute) }
.lp-gap{ flex:1 1 auto }
.lp-key{
  width:40px; height:32px; flex:none;
  display:grid; place-items:center;
  border-radius:7px;
  background:#fdfcfa; color:var(--lp-ink);
  box-shadow:inset 0 0 0 1px #dbd7cf, 0 1.5px 0 var(--lp-line-2);
}
.lp-key:active{ transform:translateY(1px); box-shadow:inset 0 0 0 1px #dbd7cf }
.lp-key.is-off{ background:#efece6; color:#aca79d; box-shadow:inset 0 0 0 1px #e0dcd4 }
.lp-sel{
  gap:4px; padding:0 6px 0 16px;
  background:var(--lp-ink); color:var(--lp-paper);
  border-radius:16px 16px 0 0;
  animation:lp-drop .14s ease both;
}
.lp-selcount{
  font-family:var(--lp-font-cond); font-size:12.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.lp-pill{
  height:28px; flex:none; padding:0 9px;
  border-radius:7px;
  background:var(--lp-paper); color:var(--lp-ink);
  font-size:12px; font-weight:600; letter-spacing:-.01em;
}
.lp-pill.is-off{ background:#4a4843; color:#9b968c }
.lp-ico{
  width:30px; height:32px; flex:none;
  display:grid; place-items:center; border-radius:7px;
  color:var(--lp-paper);
}
.lp-sel .lp-warn{ color:#f0a394 }
.lp-sel .lp-warn.is-off{ color:#7d6a64 }
.lp-sel :focus-visible{ outline-color:var(--lp-paper) }
.lp-list{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:0 6px 6px;
  display:flex; flex-direction:column; gap:2px;
}
.lp-note{
  flex:none; min-height:22px;
  display:flex; align-items:center; justify-content:center;
  padding:0 14px 6px;
  font-size:11px; letter-spacing:-.005em; line-height:1.35; text-align:center;
  color:var(--lp-mute);
}
.lp-note.is-reason{ color:var(--lp-ink) }
.lp-row{
  --depth:0;
  position:relative; flex:none;
  height:52px; border-radius:9px; overflow:hidden;
  touch-action:pan-y;
}
.lp-lead{
  position:absolute; left:0; top:0; bottom:0; width:0;
  display:flex; align-items:center; gap:7px; padding-left:14px;
  overflow:hidden; white-space:nowrap;
  background:var(--lp-sel); color:var(--lp-ink);
  font-size:12px; font-weight:600;
}
.lp-trail{
  position:absolute; right:0; top:0; bottom:0; width:144px;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
}
.lp-act{
  height:52px; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; font-weight:600; letter-spacing:-.01em;
  background:var(--lp-tray); color:var(--lp-ink);
}
.lp-act-del{ background:var(--lp-warn); color:var(--lp-paper) }
.lp-fore{
  position:absolute; left:0; top:0; width:100%; height:52px;
  display:flex; align-items:center; gap:10px;
  padding:0 4px 0 calc(6px + var(--depth) * 18px);
  border-radius:9px;
  background:var(--lp-paper); color:var(--lp-ink);
  -webkit-user-select:none; user-select:none;
}
.lp-fore.is-settling{ transition:transform .22s var(--lp-ease) }
.lp-row.is-primary .lp-fore{ background:var(--lp-ink); color:var(--lp-paper) }
.lp-row.is-sel .lp-fore{ background:var(--lp-sel); box-shadow:inset 0 0 0 1.5px var(--lp-ink) }
.lp-guide{
  position:absolute; top:8px; bottom:8px; width:1.5px; border-radius:1px;
  left:calc(6px + var(--depth) * 18px - 11px);
  background:#c3bfb6;
}
.lp-row.is-primary .lp-guide{ background:rgba(248,247,244,.35) }
.lp-thumb, .lp-mask{
  position:relative; width:40px; height:40px; flex:none;
  border-radius:3px; overflow:hidden;
  background:var(--lp-check);
}
.lp-thumb canvas, .lp-mask canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.lp-thumb::after, .lp-mask::after{
  content:""; position:absolute; inset:0; border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(27,27,27,.2); pointer-events:none;
}
.lp-mask{ margin-left:-4px; background:#000 }
.lp-mask::after{ box-shadow:inset 0 0 0 1px rgba(27,27,27,.25) }
.lp-mask.is-disabled::before{
  content:""; position:absolute; left:-6px; right:-6px; top:50%; height:2px; margin-top:-1px;
  background:var(--lp-warn); transform:rotate(-45deg); z-index:1;
}
.lp-thumb.is-brush, .lp-mask.is-brush{
  overflow:visible;
  box-shadow:0 0 0 2px var(--lp-paper), 0 0 0 3.5px var(--lp-ink);
}
.lp-row.is-primary .lp-thumb.is-brush, .lp-row.is-primary .lp-mask.is-brush{
  box-shadow:0 0 0 2px var(--lp-ink), 0 0 0 3.5px var(--lp-paper);
}
.lp-thumb.is-brush canvas, .lp-mask.is-brush canvas{ border-radius:3px }
.lp-row.is-sel .lp-thumb.is-brush, .lp-row.is-sel .lp-mask.is-brush{
  box-shadow:0 0 0 2px var(--lp-sel), 0 0 0 3.5px var(--lp-ink);
}
.lp-stack{ position:relative; width:40px; height:40px; flex:none }
.lp-back{
  position:absolute; left:4px; top:-4px; width:40px; height:40px; border-radius:3px;
  background:#dcd8d0; box-shadow:inset 0 0 0 1px rgba(27,27,27,.22);
}
.lp-stack .lp-thumb{ position:absolute; left:0; top:0 }
.lp-row.is-primary .lp-back{ background:#3d3b37; box-shadow:inset 0 0 0 1px rgba(248,247,244,.28) }
.lp-row.is-off .lp-thumb canvas, .lp-row.is-off .lp-mask canvas{ opacity:.35 }
.lp-name{
  flex:1 1 auto; min-width:0; height:44px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px;
  padding:0 0 0 2px; text-align:left;
}
.lp-title{
  max-width:100%;
  font-size:13.5px; font-weight:600; letter-spacing:-.01em; line-height:17px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lp-sub{
  max-width:100%;
  font-family:var(--lp-font-mono); font-size:10.5px; line-height:13px;
  color:var(--lp-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lp-row.is-primary .lp-sub{ color:#c9c4ba }
.lp-row.is-off .lp-title, .lp-row.is-off .lp-sub{ opacity:.45 }
.lp-rename{
  flex:1 1 auto; min-width:0; height:32px;
  padding:0 8px; border:0; border-radius:6px;
  background:var(--lp-paper); color:var(--lp-ink);
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 0 0 2px rgba(248,247,244,.35);
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
}
.lp-row:not(.is-primary) .lp-rename{ box-shadow:inset 0 0 0 1.5px var(--lp-ink) }
.lp-chev{
  width:28px; height:36px; flex:none; margin-right:-6px;
  display:grid; place-items:center; border-radius:7px;
}
.lp-chev svg{ transition:transform .18s ease }
.lp-chev[aria-expanded="true"] svg{ transform:rotate(90deg) }
.lp-eye{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center; border-radius:7px;
}
.lp-eye[aria-pressed="false"]{ color:var(--lp-dim) }
.lp-row.is-off .lp-eye[aria-pressed="true"]{ color:var(--lp-dim) }
.lp-row.is-primary .lp-eye[aria-pressed="false"]{ color:#8e897f }
.lp-row.is-primary .lp-eye[aria-pressed="true"]{ color:var(--lp-paper) }
.lp-row.is-lifted{
  z-index:3; overflow:visible;
  box-shadow:0 0 0 1px var(--lp-line), 0 12px 26px rgba(27,27,27,.26);
  scale:1.02;
}
.lp-bar, .lp-maskbar{
  height:56px; flex:none;
  display:flex; align-items:center;
  background:var(--lp-tray);
  box-shadow:inset 0 1px 0 var(--lp-line);
  border-radius:0 0 16px 16px;
}
.lp-bar{ gap:10px; padding:0 12px 0 10px }
.lp-maskbar{ gap:8px; padding:0 10px }
.lp-blend{
  width:auto; min-width:100px; max-width:136px; height:32px; flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:2px;
  padding:0 6px 0 10px; border-radius:7px;
  background:var(--lp-paper); color:var(--lp-ink);
  box-shadow:inset 0 0 0 1px var(--lp-line-3);
  font-size:12.5px; font-weight:600; letter-spacing:-.01em;
}
.lp-blend.is-open{ background:var(--lp-ink); color:var(--lp-paper); box-shadow:none }
.lp-blendname{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lp-val{
  width:34px; flex:none; text-align:right;
  font-family:var(--lp-font-mono); font-size:11px; color:var(--lp-mute);
}
.lp-slider{
  --f:100%;
  flex:1 1 auto; min-width:0; height:24px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent;
  touch-action:none;
}
.lp-slider:focus{ outline:none }
.lp-slider:focus-visible{ outline:2px solid var(--lp-ink); outline-offset:1px; border-radius:4px }
.lp-slider::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--lp-ink) 0 var(--f), #d6d1c8 var(--f) 100%);
}
.lp-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin-top:-7px; border-radius:9px;
  background:var(--lp-paper);
  box-shadow:0 0 0 1.4px var(--lp-ink), 0 1px 3px rgba(27,27,27,.28);
}
.lp-slider::-moz-range-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--lp-ink) 0 var(--f), #d6d1c8 var(--f) 100%);
}
.lp-slider::-moz-range-thumb{
  width:18px; height:18px; border:1.4px solid var(--lp-ink); border-radius:9px;
  background:var(--lp-paper); box-shadow:0 1px 3px rgba(27,27,27,.28);
}
.lp-tag{
  height:20px; flex:none;
  display:inline-flex; align-items:center; padding:0 7px; border-radius:3px;
  background:var(--lp-ink); color:var(--lp-paper);
  font-family:var(--lp-font-cond); font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
}
.lp-maskname{
  flex:1 1 auto; min-width:0;
  font-size:12.5px; color:var(--lp-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lp-done{ width:auto; padding:0 12px; font-size:12px; font-weight:600 }
.lp-menu, .lp-blends{
  position:absolute; z-index:30;
  padding:6px; border-radius:12px;
  background:var(--lp-paper); color:var(--lp-ink);
  box-shadow:var(--lp-float);
}
.lp-menu{
  left:8px; width:236px;
  display:flex; flex-direction:column; gap:1px;
  animation:lp-drop .14s ease both;
}
.lp-menu.is-up{ animation-name:lp-up }
.lp-blends{ left:8px; right:8px; animation:lp-up .14s ease both }
.lp-menucap{
  height:26px; flex:none;
  display:flex; align-items:center; padding:0 10px;
  font-family:var(--lp-font-cond); font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lp-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lp-item{
  min-height:38px; flex:none;
  display:flex; align-items:center; gap:10px;
  padding:0 10px; border-radius:7px;
  text-align:left;
}
.lp-item:active:not(.is-off){ background:#efece6 }
.lp-item.is-off{ color:#aca79d; cursor:default }
.lp-item.lp-warn{ color:var(--lp-warn) }
.lp-itemtext{ min-width:0; display:flex; flex-direction:column; gap:1px; padding:8px 0 }
.lp-itemlabel{ font-size:13.5px; font-weight:500; letter-spacing:-.01em; line-height:17px }
.lp-itemnote{ font-size:11px; font-weight:400; line-height:14px; color:var(--lp-mute) }
.lp-rule{ height:1px; margin:5px 8px; flex:none; background:var(--lp-line) }
.lp-blendgrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2px }
.lp-blendopt{
  height:34px;
  display:flex; align-items:center; padding:0 10px;
  border-radius:7px; text-align:left;
  font-size:13px; font-weight:500;
}
.lp-blendopt[aria-selected="true"]{ background:var(--lp-ink); color:var(--lp-paper) }
@media (hover:hover) and (pointer:fine){
  .lp-row:not(.is-primary):not(.is-sel) .lp-fore:hover{ background:#f1eee8 }
  .lp-item:hover:not(.is-off){ background:#efece6 }
  .lp-blendopt:hover:not([aria-selected="true"]){ background:#efece6 }
  .lp-eye:hover, .lp-chev:hover{ background:rgba(27,27,27,.06) }
  .lp-row.is-primary .lp-eye:hover, .lp-row.is-primary .lp-chev:hover{ background:rgba(248,247,244,.1) }
}
@media (prefers-reduced-motion:reduce){
  .lp, .lp *{ transition:none !important; animation:none !important }
}