:root{
  --lv-bg:#f4f4f2; --lv-panel:#ffffff; --lv-ink:#1c1c1c; --lv-muted:#6f6f6f;
  --lv-line:#e2e2df; --lv-accent:#3fae5a; --lv-accent-ink:#ffffff;
}
.lv-cfg *{box-sizing:border-box}
.lv-cfg{
  position:relative; display:grid; grid-template-columns:1fr 340px;
  height:min(78vh,760px); min-height:520px; background:var(--lv-bg);
  border:1px solid var(--lv-line); border-radius:4px; overflow:hidden;
  font-family:inherit; color:var(--lv-ink);
}
.lv-stage{position:relative; min-width:0}
.lv-stage canvas{display:block; width:100%; height:100%; outline:none}
.lv-crumb{
  position:absolute; top:14px; left:16px; z-index:3; font-size:13px; letter-spacing:.02em;
  color:var(--lv-ink); background:rgba(255,255,255,.82); backdrop-filter:blur(6px);
  padding:7px 12px; border-radius:3px; border:1px solid var(--lv-line); max-width:calc(100% - 32px);
}
.lv-crumb b{font-weight:600}
.lv-hint{
  position:absolute; bottom:14px; left:16px; z-index:3; font-size:12px; color:var(--lv-muted);
  background:rgba(255,255,255,.7); padding:5px 10px; border-radius:3px;
}
.lv-loading{
  position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:var(--lv-bg); font-size:14px; color:var(--lv-muted); transition:opacity .4s;
}
.lv-loading.is-done{opacity:0; pointer-events:none}

.lv-side{
  background:var(--lv-panel); border-left:1px solid var(--lv-line);
  overflow-y:auto; padding:18px 18px 26px;
}
.lv-cfg .lv-side h2{
  margin:0 0 16px; font-size:15px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--lv-ink); background:none; padding:0;
}
/* the theme styles headings globally - keep them out of the panel */
.lv-cfg .lv-side h2, .lv-cfg .lv-side label, .lv-cfg .lv-swname{
  font-family:inherit; text-align:left;
}
.lv-group{margin-bottom:20px}
.lv-group>label{
  display:block; font-size:11px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--lv-muted); margin-bottom:8px;
}
.lv-chips{display:flex; flex-wrap:wrap; gap:6px}
.lv-chip{
  font:inherit; font-size:13px; padding:7px 12px; cursor:pointer;
  background:#fff; border:1px solid var(--lv-line); border-radius:3px; color:var(--lv-ink);
  transition:border-color .15s, background .15s;
}
.lv-chip:hover{border-color:#b9b9b4}
.lv-chip[aria-pressed="true"]{border-color:var(--lv-ink); background:var(--lv-ink); color:#fff}

.lv-swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.lv-sw{
  position:relative; aspect-ratio:1; padding:0; cursor:pointer; border-radius:3px;
  border:1px solid var(--lv-line); background-size:cover; background-position:center;
  transition:transform .12s, box-shadow .12s;
}
.lv-sw:hover{transform:translateY(-1px)}
.lv-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--lv-ink); border-color:var(--lv-ink)}
.lv-swname{
  margin-top:8px; font-size:13px; min-height:1.2em; color:var(--lv-ink);
}
.lv-note{
  font-size:13px; line-height:1.45; color:var(--lv-muted);
  background:#fafaf8; border:1px solid var(--lv-line); border-radius:3px; padding:10px 12px;
}
.lv-range{display:flex; align-items:center; gap:10px}
.lv-range input{flex:1}
.lv-range output{font-size:12px; color:var(--lv-muted); min-width:8.6em; text-align:right; white-space:nowrap}

.lv-actions{display:grid; gap:8px; margin-top:22px}
.lv-btn{
  font:inherit; font-size:13px; padding:10px 14px; cursor:pointer; text-align:center;
  border-radius:3px; border:1px solid var(--lv-line); background:#fff; color:var(--lv-ink);
  text-decoration:none; display:block; transition:border-color .15s, background .15s;
}
.lv-btn:hover{border-color:#b9b9b4; background:#fafaf8}
.lv-btn--primary{
  background:var(--lv-accent); border-color:var(--lv-accent); color:var(--lv-accent-ink); font-weight:600;
}
.lv-btn--primary:hover{background:#379a4f; border-color:#379a4f; color:#fff}
.lv-said{font-size:12px; color:var(--lv-accent); min-height:1.2em; text-align:center}

@media (max-width:900px){
  .lv-cfg{grid-template-columns:1fr; height:auto}
  .lv-stage{height:56vh; min-height:320px}
  .lv-side{border-left:0; border-top:1px solid var(--lv-line); max-height:none}
  .lv-swatches{grid-template-columns:repeat(8,1fr)}
}
@media (max-width:520px){
  .lv-swatches{grid-template-columns:repeat(6,1fr)}
}