:root{
  /* Strictly neutral greys: any hue here would bias colour judgement of the reference. */
  --bg:#2b2b2b;
  --panel:#232323;
  --panel-2:#1c1c1c;
  --line:#3a3a3a;
  --line-soft:#333;
  --ink:#ececec;
  --ink-2:#9a9a9a;
  --ink-3:#6e6e6e;
  --rail:300px;
  --bar:52px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- top bar ---------- */
.bar{
  height:var(--bar);
  display:flex;align-items:center;gap:20px;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
  position:relative;z-index:5;
}
.mark{display:flex;align-items:center;gap:9px;flex-shrink:0}
.ramp{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.ramp i{display:block;width:9px;height:16px}
.ramp i:nth-child(1){background:#000}
.ramp i:nth-child(2){background:#777}
.ramp i:nth-child(3){background:#fff}
.wordmark{font-weight:600;letter-spacing:-.01em}

.bar-end{margin-left:auto;display:flex;align-items:center;gap:6px}
.ghost{
  padding:6px 12px;border:1px solid var(--line);border-radius:3px;
  color:var(--ink-2);font-weight:500;white-space:nowrap;
  transition:border-color .12s,color .12s;
}
.ghost:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.ghost:disabled{opacity:.35;cursor:default}

/* ---------- layout ---------- */
.shell{display:flex;flex-direction:column;height:calc(100% - var(--bar))}
.stage{
  flex:1;min-width:0;min-height:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
canvas{
  display:block;
  box-shadow:0 0 0 1px var(--line), 0 18px 50px rgba(0,0,0,.45);
}
.hidden{display:none !important}

/* ---------- the two panes ---------- */
.pair{display:flex;gap:16px;width:100%;height:100%;align-items:stretch;justify-content:center}
.pair.stack{flex-direction:column}
.pane{
  flex:1 1 0;min-width:0;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
}
.frame{
  position:relative;display:flex;align-items:center;justify-content:center;
  flex:0 1 auto;min-width:0;min-height:0;max-width:100%;max-height:100%;
}
/* Shrink-wraps the canvas so the grid overlay tracks the image exactly,
   in normal layout and in full screen alike. align/justify center keep the
   canvas from being flex-stretched off its aspect ratio. */
.canvas-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:0;max-width:100%;max-height:100%;
}
.canvas-wrap canvas{display:block;max-width:100%;max-height:100%}
.cap{color:var(--ink-2);font-size:12.5px;flex-shrink:0}

/* Detail drives only the Simplified study, so its control rides on the bottom
   of that image (fading backdrop so it reads over any value). Being inside the
   canvas wrap, it spans exactly the image — in normal layout and full screen. */
.pane-ctl{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:10px 14px 12px;
  background:linear-gradient(to top, rgba(18,18,18,.85), rgba(18,18,18,.55) 65%, transparent);
}
.pane-ctl label{color:#fff;font-weight:600;letter-spacing:-.01em;flex-shrink:0;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.pane-ctl input[type=range]{margin:0;flex:1 1 auto}
.pane-ctl input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.5)}
.pane-ctl input[type=range]::-moz-range-track{background:rgba(255,255,255,.5)}

/* ---------- sketching grid overlay ---------- */
/* Only shown while an image is full screen — the 3-up view stays clean.
   `difference` keeps the lines visible over any value, light or dark. */
.grid-ov{
  position:absolute;inset:0;pointer-events:none;display:none;
  mix-blend-mode:difference;background-repeat:no-repeat;
}
.frame:fullscreen .grid-ov{display:block}
.frame:-webkit-full-screen .grid-ov{display:block}
.pair.grid-3 .grid-ov{
  background-image:
    linear-gradient(#c8c8c8,#c8c8c8),linear-gradient(#c8c8c8,#c8c8c8),
    linear-gradient(#c8c8c8,#c8c8c8),linear-gradient(#c8c8c8,#c8c8c8);
  background-size:1px 100%,1px 100%, 100% 1px,100% 1px;
  background-position:33.333% 0,66.667% 0, 0 33.333%,0 66.667%;
}
.pair.grid-4 .grid-ov{
  background-image:
    linear-gradient(#c8c8c8,#c8c8c8),linear-gradient(#c8c8c8,#c8c8c8),linear-gradient(#c8c8c8,#c8c8c8),
    linear-gradient(#c8c8c8,#c8c8c8),linear-gradient(#c8c8c8,#c8c8c8),linear-gradient(#c8c8c8,#c8c8c8);
  background-size:1px 100%,1px 100%,1px 100%, 100% 1px,100% 1px,100% 1px;
  background-position:25% 0,50% 0,75% 0, 0 25%,0 50%,0 75%;
}

/* Grid picker lives on the image and only appears in full screen. */
.grid-ctl{
  position:absolute;top:8px;left:8px;z-index:2;
  display:none;gap:2px;
  background:rgba(28,28,28,.72);border:1px solid var(--line);border-radius:3px;padding:2px;
}
.frame:fullscreen .grid-ctl{display:flex}
.frame:-webkit-full-screen .grid-ctl{display:flex}
.grid-ctl button{
  padding:6px 11px;border-radius:2px;color:var(--ink-2);font-weight:500;font-size:12.5px;
  white-space:nowrap;transition:background .12s,color .12s;
}
.grid-ctl button:hover{color:var(--ink)}
.grid-ctl button[aria-pressed="true"]{background:var(--ink);color:#1a1a1a}

/* ---------- full-screen button on each image ---------- */
.fs{
  position:absolute;top:8px;right:8px;
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  color:var(--ink-2);
  background:rgba(28,28,28,.72);
  border:1px solid var(--line);border-radius:3px;
  opacity:0;
  transition:opacity .12s,color .12s,border-color .12s,background .12s;
}
.frame:hover .fs,.fs:focus-visible{opacity:1}
.fs:hover{color:var(--ink);border-color:var(--ink-3);background:rgba(28,28,28,.9)}
.fs .ic{display:block;width:16px;height:16px}
.fs .ic-collapse{display:none}

.frame:fullscreen{
  width:100vw;height:100vh;max-width:none;max-height:none;
  align-items:center;justify-content:center;background:var(--bg);
}
.frame:fullscreen .canvas-wrap{max-width:100vw;max-height:100vh}
.frame:fullscreen canvas{max-width:100vw !important;max-height:100vh !important}
.frame:fullscreen .fs{opacity:1}
.frame:fullscreen .ic-expand{display:none}
.frame:fullscreen .ic-collapse{display:block}
.frame:-webkit-full-screen{
  width:100vw;height:100vh;max-width:none;max-height:none;
  align-items:center;justify-content:center;background:var(--bg);
}
.frame:-webkit-full-screen .canvas-wrap{max-width:100vw;max-height:100vh}
.frame:-webkit-full-screen canvas{max-width:100vw !important;max-height:100vh !important}
.frame:-webkit-full-screen .fs{opacity:1}
.frame:-webkit-full-screen .ic-expand{display:none}
.frame:-webkit-full-screen .ic-collapse{display:block}

/* ---------- empty state ---------- */
.drop{
  position:absolute;inset:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  border:1px dashed var(--line);border-radius:4px;
  color:var(--ink-2);text-align:center;padding:24px;
  transition:border-color .15s,color .15s;
}
.drop.over{border-color:var(--ink);color:var(--ink)}
.drop h1{margin:0;font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.drop p{margin:0;max-width:46ch}
.pick{
  padding:9px 18px;border:1px solid var(--ink-3);border-radius:3px;
  color:var(--ink);font-weight:500;transition:background .12s,color .12s;
}
.pick:hover{background:var(--ink);color:#1a1a1a}
.fine{font-size:12.5px;color:var(--ink-3)}

/* ---------- busy ---------- */
.busy{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:3px;
  padding:7px 13px;color:var(--ink-2);font-size:12.5px;
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ink-2);animation:p 1.1s ease-in-out infinite}
@keyframes p{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- control panel (horizontal, above the stage) ---------- */
/* Left-aligned with the first image (matches the stage's 24px side padding). */
.rail{
  flex-shrink:0;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  display:flex;
  padding:10px 24px;
}
/* Label and its controls share a line so the strip stays short and the
   images keep the height. */
.grp{
  display:flex;align-items:center;gap:14px;min-width:0;
}
.grp .note{display:none}   /* the strip stays compact; controls speak for themselves */
.grp-head{display:flex;align-items:baseline;gap:12px;margin:0;flex-shrink:0}
.grp-head h2{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em}
.readout{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:12.5px}
.note{margin:10px 0 0;color:var(--ink-3);font-size:12.5px;line-height:1.5}

/* segmented */
.seg{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:2px;
}
.seg button{
  padding:7px 2px;border-radius:2px;color:var(--ink-2);font-weight:500;font-size:12.5px;
  white-space:nowrap;
  transition:background .12s,color .12s;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#1a1a1a}

/* slider */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;background:none;margin:6px 0 0;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line);border-radius:2px}
input[type=range]::-moz-range-track{height:2px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--ink);margin-top:-6px;border:none;cursor:grab;
}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:none;cursor:grab}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}
.ticks{display:flex;justify-content:space-between;margin-top:7px;color:var(--ink-3);font-size:12px}

@media (max-width:820px){
  :root{--rail:auto}
  .shell{flex-direction:column}
  .bar{gap:10px;padding:0 12px}
  .wordmark{display:none}      /* the ramp mark carries it; buttons need the room */
  .ghost{padding:6px 10px;font-size:13px}

  /* Smoothing sits above the images and stays put while the stage scrolls. */
  .rail{
    flex-direction:column;align-items:stretch;
    width:100%;flex-shrink:0;
    padding:12px 14px 14px;
    overflow:visible;
  }
  .grp{flex-direction:column;align-items:stretch;gap:9px}
  .grp-head{justify-content:space-between}
  .fs{opacity:1}   /* no hover on touch, so keep the control visible */

  /* One pane per screenful, snapping, so each image gets the full height
     instead of both being squeezed into half each. */
  .stage{
    display:block;
    flex:1;min-height:0;
    padding:12px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:y mandatory;
  }
  .pair{flex-direction:column;height:auto;gap:0}
  .pane{flex:0 0 auto;height:var(--pane-h,60vh);min-height:0;scroll-snap-align:center}
  .pane .frame{max-height:calc(100% - 28px)}

  .busy{position:fixed;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}