:root { --bg:#f3efe4; --ink:#172d26; --muted:#6d746f; --panel:#fbfaf6; }
*{box-sizing:border-box} body{margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} canvas{position:fixed;inset:0;width:100vw;height:100vh}.panel{position:fixed;top:16px;left:16px;width:340px;max-height:calc(100vh - 32px);overflow:auto;padding:16px;border-radius:20px;background:rgba(251,250,246,.86);backdrop-filter:blur(18px);border:1px solid rgba(23,45,38,.12);box-shadow:0 22px 70px rgba(23,45,38,.12);z-index:2}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}.eyebrow{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}h1{margin:0;font-size:22px;letter-spacing:-.04em}h2{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.section{padding:14px 0;border-top:1px solid rgba(23,45,38,.1)}label,.range{display:block;margin:10px 0;font-size:13px;font-weight:600}.range span{display:block;margin-bottom:5px}input,select{width:100%;margin-top:6px}input[type=text],select{border:1px solid rgba(23,45,38,.18);background:#fffdf8;border-radius:10px;padding:9px 10px;color:var(--ink)}input[type=color]{height:34px;border:0;padding:0;background:transparent}input[type=range]{accent-color:#172d26}.check{display:flex;gap:8px;align-items:center}.check input{width:auto;margin:0}.buttons{display:grid;gap:8px;margin-top:10px}.buttons.two{grid-template-columns:1fr 1fr}button{border:0;border-radius:11px;background:#172d26;color:#fff;padding:10px 12px;cursor:pointer;font-weight:650}button:hover{opacity:.88}.icon-button{width:30px;height:30px;padding:0;border-radius:50%;background:rgba(23,45,38,.09);color:var(--ink)}.note{font-size:12px;line-height:1.4;color:var(--muted);margin:12px 0 0}.show-panel{display:none;position:fixed;top:16px;left:16px;z-index:3}.panel.hidden{display:none}.show-panel.visible{display:block}@media(max-width:760px){.panel{width:calc(100vw - 32px)}}

.range {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 8px;
  align-items: center;
}

.range input {
  grid-column: 1 / -1;
}

.range-value {
  font-size: 11px;
  opacity: 0.55;
  text-align: right;
  font-variant-numeric: tabular-nums;
}