:root{
  --paper:#FBF7EC; --ink:#1C1B19; --teal:#018A9E; --violet:#BC9BBA;
  --line:#e4ddca; --track:#e9e2ce;
  /* layout — panel width must stay in sync with PANEL_W in script.js */
  --panel:340px; --rail:82px; --pane-pad:20px; --sw-gap:5px;
  /* one swatch's edge, derived from the same math the 6-column grids resolve to.
     The topbar buttons take their height from this so controls and swatches
     line up on a single size. */
  --swatch:calc((var(--panel) - 2px - var(--rail) - var(--pane-pad)*2 - var(--sw-gap)*5) / 6);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--ink);background:var(--paper);
  height:100vh;overflow:hidden;position:relative;
}
#stage{
  position:fixed;inset:0;
}
#stage canvas{display:block}

/* panel = vertical tab rail + scrolling content column */
#panel{
  position:fixed;right:0;top:0;height:100vh;width:var(--panel);z-index:10;overflow:hidden;
  background:#fff;border-left:1px solid var(--line);display:flex;
}
#rail{
  flex:0 0 var(--rail);display:flex;flex-direction:column;gap:2px;padding:10px 6px;
  background:#faf8f2;border-right:1px solid var(--line);
}
.vtab{
  font:inherit;font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  cursor:pointer;background:none;border:none;color:#9a927c;
  padding:12px 3px;border-radius:4px;text-align:center;position:relative;white-space:nowrap;
}
.vtab:hover{color:var(--ink);background:#f2ede0}
.vtab.active{color:var(--teal);background:#eef9fb}
/* teal marker flush to the rail's outer edge */
.vtab.active::before{content:"";position:absolute;left:-6px;top:7px;bottom:7px;width:2px;
  background:var(--teal);border-radius:0 2px 2px 0}
#content{flex:1;min-width:0;overflow-y:auto;padding-bottom:40px}
/* toggles float left, the action sits right — always one line */
#topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;
  padding:10px 14px;gap:6px}
.tb-left{display:flex;align-items:center;gap:6px}

/* toggle buttons: a checkbox then a label, one swatch tall */
.tbtn{display:flex;align-items:center;gap:5px;height:var(--swatch);padding:0 8px;
  font:inherit;font-size:9px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  white-space:nowrap;cursor:pointer;color:#9a927c;background:#fff;
  border:1px solid var(--line);border-radius:4px;transition:border-color .12s,color .12s}
.tbtn:hover{border-color:var(--teal);color:var(--ink)}
.tbtn.on{color:var(--ink)}
.tbtn .chk{width:12px;height:12px;flex:0 0 auto;background:#fff;
  border:1px solid var(--line);border-radius:2px;
  display:flex;align-items:center;justify-content:center}
.tbtn.on .chk{background:var(--teal);border-color:var(--teal)}
.tbtn.on .chk::after{content:"";width:6px;height:3px;margin-top:-2px;
  border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
/* primary action, split with a chevron that opens the options flyout */
.cogwrap{position:relative}
.split{display:flex;align-items:stretch;flex:0 0 auto}
.cta,.cta-chev{height:var(--swatch);font:inherit;font-size:9px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);
  transition:background .12s,border-color .12s}
.cta{padding:0 9px;border-right:none;border-radius:4px 0 0 4px}
.cta-chev{position:relative;width:20px;display:flex;align-items:center;justify-content:center;
  font-size:9px;letter-spacing:0;border-radius:0 4px 4px 0}
.cta-chev::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:rgba(251,247,236,.32)}
.cta:hover,.cta-chev:hover{background:var(--teal);border-color:var(--teal)}
/* backgrounds: 6 across (one column per family) x 3 down (light / medium / deep).
   Same grid + swatch geometry as the color palette so the two read as a pair. */
.bg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.bg-grid .bg-sw:nth-child(n+7){margin-top:2px}   /* air between tone rows */
.bg-sw:hover{transform:scale(1.08)}
.bg-sw.sel{outline:2px solid var(--ink);outline-offset:1px}
.flyout{position:absolute;right:0;top:calc(var(--swatch) + 6px);
  background:#fff;border:1px solid var(--line);
  border-radius:6px;box-shadow:0 10px 30px rgba(28,27,25,.16);padding:10px;width:150px;z-index:60;
  display:flex;flex-direction:column;gap:7px}
.flyout.hidden{display:none}
.flyout label{display:flex;align-items:center;gap:8px;font-size:12px;color:#4a463d;cursor:pointer}
.flyout input{accent-color:var(--teal);margin:0}
.pane{padding:18px var(--pane-pad) 0}
.pane.hidden{display:none}
.section{margin-bottom:22px}
.section > h2{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  margin:0 0 10px;font-weight:700;display:flex;align-items:center;gap:8px;
}
.section > h2::after{content:"";flex:1;height:1px;background:var(--line)}

/* clickable field -> opens a popover with the slider(s) */
.field{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;text-align:left;font:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:9px 11px;margin-bottom:7px;color:var(--ink);
  transition:border-color .12s, background .12s;
}
.field:hover{border-color:var(--teal)}
.field.active{border-color:var(--teal);background:#f2fafb}
.field .f-label{font-size:12px;color:#4a463d;letter-spacing:.02em;white-space:nowrap}
.field.active .f-label{color:var(--teal)}
.field .f-val{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
/* ---- hover tooltip: dark bubble + tail, pointing at the swatch ----
   one shared node, positioned in JS (fixed) so it can escape the panel's
   scroll clipping and the popovers' bounds. */
#tip{
  position:fixed;z-index:2000;pointer-events:none;
  background:var(--ink);color:var(--paper);
  font-family:inherit;font-size:11px;letter-spacing:.02em;line-height:1.35;
  padding:6px 9px;border-radius:5px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(28,27,25,.3);
  opacity:0;transform:translateY(3px);transition:opacity .11s ease, transform .11s ease;
}
#tip.show{opacity:1;transform:translateY(0)}
/* the tail — --tailx tracks the swatch center even when the bubble is
   clamped against a screen edge */
#tip::after{content:"";position:absolute;left:var(--tailx,50%);margin-left:-5px;
  border:5px solid transparent;width:0;height:0}
#tip.above::after{top:100%;border-top-color:var(--ink)}
#tip.below::after{bottom:100%;border-bottom-color:var(--ink)}
.palette-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
/* one swatch geometry, shared by the palette and the background grids */
.palette-grid .psw,.bg-grid .bg-sw{position:relative;width:100%;aspect-ratio:1;border-radius:4px;
  border:1px solid rgba(0,0,0,.14);cursor:pointer;padding:0;overflow:hidden}
.palette-grid .psw:hover{transform:scale(1.08)}
.palette-grid .psw:nth-child(n+7){margin-top:2px}   /* family row gutters, as in .swatch-grid */
.palette-grid .psw .hideicon{display:none;position:absolute;inset:0;align-items:center;justify-content:center;color:#2a2723;z-index:2}
.palette-grid .psw.off{opacity:.55}
.palette-grid .psw.off::after{content:"";position:absolute;inset:0;background:rgba(251,247,236,.55)}
.palette-grid .psw.off .hideicon{display:flex}

.popover{
  position:fixed;z-index:1000;width:228px;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 10px 34px rgba(28,27,25,.17);
  padding:14px 15px 16px;
}
.pop-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:12px}
.s-row{margin-bottom:13px}
.s-row:last-child{margin-bottom:0}
.s-head{display:flex;justify-content:space-between;font-size:11px;color:#9a927c;margin-bottom:2px}
.s-head .s-val{color:var(--ink);font-variant-numeric:tabular-nums}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--track);border-radius:2px;outline:none;margin:6px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);cursor:pointer;transition:border-color .12s}
input[type=range]::-webkit-slider-thumb:hover{border-color:var(--teal)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);cursor:pointer}
input[type=range]:focus-visible::-webkit-slider-thumb{border-color:var(--teal)}

@media (max-width:760px){
  :root{--panel:300px; --rail:70px}          /* --swatch + topbar follow automatically */
  .tbtn,.cta,.cta-chev{font-size:8px}
  .tbtn,.cta{padding:0 6px}
  .cta-chev{width:18px}
}