/* the bench, printed in its own ink. see DESIGN.md.
   a rag-paper page; every line, label and shadow on it in prussian blue;
   the things of the craft sit on top as objects. */

:root {
  --paper: #f4f1ea;
  --paper-2: #ebe6da;
  --card: #fbfaf6;
  --ink: #22385e;
  --ink-deep: #13233e;
  --ink-80: rgba(34, 56, 94, 0.8);
  --ink-60: rgba(34, 56, 94, 0.6);
  --ink-35: rgba(34, 56, 94, 0.35);
  --ink-15: rgba(34, 56, 94, 0.15);
  --ink-08: rgba(34, 56, 94, 0.08);
  --cyan: #dbe6ef;
  --sens: #d6d68a;
  --sens-deep: #b4b65a;
  --graphite: #5d5a55;
  --sun: #f3cf62;
  --uv: #8f6be0;
  --tea: #9a6a3a;
  --coffee: #4a3022;
  --r: 8px;
  --sh: 4px 4px 0 var(--ink);
  --sh-sm: 3px 3px 0 var(--ink);
  --sans: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand: "Reenie Beanie", "Comic Sans MS", cursive;
  /* rag paper: a little fibre and flock, nothing loud */
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.35' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.2 0 0 0 0 0.34 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E");
  /* paper tooth: noise lit from the top left */
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11' numOctaves='3' seed='3'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='2.6'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.55' intercept='0.52'/%3E%3CfeFuncG type='linear' slope='0.55' intercept='0.52'/%3E%3CfeFuncB type='linear' slope='0.55' intercept='0.52'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23t)'/%3E%3C/svg%3E");
  --smooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='2' seed='5'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='0.7'%3E%3CfeDistantLight azimuth='225' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.58'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.58'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.58'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23t)'/%3E%3C/svg%3E");
  /* kozo: long, wandering bast fibres */
  --strands: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.32' numOctaves='2' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.26 0 0 0 -7 3.4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23s)' transform='rotate(-62 80 80)'/%3E%3C/svg%3E");
  --flock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background-color: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--fibre), var(--flock);
  font: 500 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
kbd { font: 600 11px var(--mono); border: 1.5px solid var(--ink); border-radius: 4px; padding: 0 5px; box-shadow: 1.5px 1.5px 0 var(--ink); background: var(--card); }

.eyebrow {
  margin: 0;
  font: 600 10.5px/1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* ------------------------------------------------------------ header -- */
.top {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px 4px;
}
.brand { margin: 0; flex: none; line-height: 0; font-size: inherit; }
.mark { display: block; flex: none; line-height: 0; }
.mark svg { height: 54px; width: auto; overflow: visible; }
.mark .fern { color: var(--paper); fill: var(--paper); }
.mark-word { font: 800 27px var(--sans); letter-spacing: -0.01em; fill: var(--paper); }
.tag { margin: 0; font: 500 12px var(--mono); color: var(--ink-60); }
.top nav { margin-left: auto; display: flex; gap: 18px; font: 600 12px var(--mono); }
.top nav a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.top nav a:hover { text-decoration: none; }

/* --------------------------------------------------------------- cards -- */
.card {
  background-color: var(--card);
  background-image: var(--fibre);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.card-head .eyebrow { white-space: nowrap; }
.card-head .hint { margin-left: auto; font: 500 11px var(--mono); color: var(--ink-60); text-align: right; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 12px;
  font: 700 13px/1 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--sh-sm);
  transition: transform 0.07s, box-shadow 0.07s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn[aria-pressed="true"] { background: var(--cyan); }
.btn:disabled { opacity: 0.45; transform: none; box-shadow: var(--sh-sm); }
.btn.sm { min-height: 30px; padding: 4px 9px; font-size: 12px; box-shadow: 2px 2px 0 var(--ink); }
.btn.sm:active { transform: translate(2px, 2px); box-shadow: none; }
.btn.primary {
  width: 100%; min-height: 52px;
  font-size: 15px; letter-spacing: 0.01em;
  color: var(--paper); background: var(--ink);
  box-shadow: 4px 4px 0 var(--ink-deep);
}
.btn.primary:hover { box-shadow: 3px 3px 0 var(--ink-deep); }
.btn.primary:active { transform: translate(4px, 4px); box-shadow: none; }
.btn.primary:disabled { opacity: 0.7; }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  #run::after {
    content: "space"; margin-left: 10px; padding: 1px 6px 2px;
    font: 500 10px var(--mono); letter-spacing: 0.04em;
    border: 1.5px solid rgba(244, 241, 234, 0.45); border-radius: 4px; opacity: 0.75;
  }
}
.btn.ghost { box-shadow: none; background: transparent; border-style: dashed; font-weight: 600; }
.btn.ghost:hover { transform: none; background: var(--ink-08); }

/* segmented: a little two-way switch */
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--card); }
.seg button {
  border: 0; background: transparent; padding: 5px 11px;
  font: 700 12px var(--sans); color: var(--ink-80);
  -webkit-tap-highlight-color: transparent;
}
.seg button + button { border-left: 2px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------- layout -- */
.app {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr) 352px;
  grid-template-areas: "neg bench proc";
  gap: 22px;
  align-items: start;
  padding: 12px 24px 28px;
  max-width: 1720px;
  margin: 0 auto;
}
.negative { grid-area: neg; padding: 14px 16px 16px; }
/* once the light has been on the sheet, the negative is spoken for */
.negative.locked .neg-row { opacity: 0.45; }
.bench { grid-area: bench; min-width: 0; }
.process { grid-area: proc; padding: 14px 16px 0; }
.foot { grid-area: foot; }

/* --------------------------------------------------------- light box -- */
.lightbox {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  background: #f6f2e6;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.5);
}
.lightbox canvas { display: block; width: 100%; aspect-ratio: 1; }

/* slides: little mounts with a window */
/* a strip of mounted slides: scrolls sideways when there are more than fit */
.slides {
  display: flex; gap: 10px; margin: 14px -4px 8px; padding: 2px 4px 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 4px;
  scrollbar-width: thin; scrollbar-color: var(--ink-35) transparent;
}
.slides.more-r { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.slides.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
.slides.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.slide {
  flex: 0 0 62px; min-width: 0; scroll-snap-align: start;
  white-space: nowrap;
  display: grid; gap: 5px; justify-items: center;
  padding: 0; border: 0; background: none;
  font: 600 10.5px var(--mono); color: var(--ink-80);
  -webkit-tap-highlight-color: transparent;
}
.slide .mount {
  position: relative; display: block;
  width: 100%; aspect-ratio: 1;
  max-width: 62px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fffdf8;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.07s, box-shadow 0.07s;
}
.slide .mount i {
  position: absolute; inset: 7px;
  border-radius: 3px;
  background: #e9e4d8 center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.slide:hover .mount { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.slide:active .mount { transform: translate(2px, 2px); box-shadow: none; }
.slide[aria-pressed="true"] .mount { background: var(--cyan); }
.slide[aria-pressed="true"] { color: var(--ink); }
.slide.add .mount { border-style: dashed; box-shadow: none; display: grid; place-items: center; font: 600 22px var(--sans); }
.adjust { display: flex; flex-wrap: wrap; gap: 8px; }
.neg-row { display: block; }
.adjust .btn span { font-weight: 600; }

/* --------------------------------------------------------------- bench -- */
.bench-frame {
  position: relative;
  width: 100%; height: 100%; min-height: 240px;
  padding: 5px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--sh);
  background: var(--card);
  line-height: 0;
}
#print { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; border-radius: 7px; background: #6b4a2f; box-shadow: 0 0 0 1.5px var(--ink-35); }
#print.brushable { cursor: crosshair; }
#print.dragging { cursor: grabbing; }

.tools { position: absolute; top: 12px; right: 12px; display: grid; gap: 8px; line-height: 1; }
.tool {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 8px;
  background: rgba(251, 250, 246, 0.94);
  box-shadow: 2px 2px 0 var(--ink);
  font: 700 11px var(--mono); padding: 0;
  transition: transform 0.07s, box-shadow 0.07s;
  -webkit-tap-highlight-color: transparent;
}
.tool svg { width: 19px; height: 19px; }
.tool:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.tool:active { transform: translate(2px, 2px); box-shadow: none; }
.tool[aria-pressed="true"] { background: var(--cyan); }

.status {
  position: absolute; left: 12px; bottom: 12px; right: 64px;
  display: flex; line-height: 1.2; pointer-events: none;
}
/* one small tag: what's happening, and the clock while one runs */
.readout {
  display: flex; align-items: center; min-width: 0; max-width: 100%; white-space: nowrap;
  padding: 5px 9px;
  border: 2px solid var(--ink); border-radius: 6px;
  background: rgba(251, 250, 246, 0.94);
  box-shadow: 2px 2px 0 var(--ink);
  font: 500 12px var(--mono);
}
.readout .said { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.readout.live::before {
  content: ""; flex: none; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--sens-deep); vertical-align: 1px;
  animation: pulse 1.2s ease-in-out infinite;
}
.clock { flex: none; margin-left: 8px; padding-left: 8px; border-left: 1.5px solid var(--ink-35); font-weight: 600; font-variant-numeric: tabular-nums; }
.clock[hidden] { display: none; }
@keyframes pulse { 50% { opacity: 0.3; } }

.note {
  position: absolute; left: 16px; top: 12px; right: 64px;
  font: 400 25px/1.05 var(--hand);
  color: #f6efe0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  line-height: 1.05;
}

/* ------------------------------------------------------- the process -- */
/* progress as a step tablet: paper, then sensitizer, then blue */
.tablet {
  list-style: none; margin: 0 0 6px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 2px solid var(--ink); border-radius: 6px; overflow: hidden;
}
.tablet li {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  min-height: 40px; padding: 4px 7px;
  background: var(--paper) repeating-linear-gradient(135deg, transparent 0 6px, var(--ink-08) 6px 7px);
  transition: background-color 0.4s;
}
.tablet li + li { border-left: 2px solid var(--ink); }
.tablet li span { position: absolute; top: 4px; left: 6px; font: 600 10px var(--mono); opacity: 0.7; }
.tablet li b { font: 700 11.5px var(--sans); }
.tablet li.on { background: var(--sens); }
.tablet li.on b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--ink); animation: pulse 1.2s infinite; }
.tablet li.done { color: var(--paper); }
.tablet li.done:nth-child(1) { background: #9fbad3; color: var(--ink); }
.tablet li.done:nth-child(2) { background: #5f84ae; }
.tablet li.done:nth-child(3) { background: #3a5f8c; }
.tablet li.done:nth-child(4) { background: #22385e; }

.steps { margin: 4px 0 0; }
.step { border-top: 1.5px dashed var(--ink-35); }
.step:first-child { border-top: 0; }
.step-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 0; border: 0; background: none; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.step-head .n {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 50%;
  font: 700 11px var(--mono);
  background: var(--card);
}
.step-head b { font: 800 14.5px var(--sans); letter-spacing: -0.01em; }
.step-head .sum {
  margin-left: auto; min-width: 0;
  font: 500 11px var(--mono); color: var(--ink-60);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step-head::after { content: "+"; flex: none; width: 14px; font: 600 15px var(--mono); color: var(--ink-60); text-align: center; }
.step.open .step-head::after { content: "–"; }
.step.active .step-head .n { background: var(--sens); }
.step.done .step-head .n { background: var(--ink); color: var(--paper); }
.step.done .step-head::after, .step.active .step-head::after { content: ""; }
.step.done .step-head { cursor: default; }
.step.done .step-head .sum { font-family: var(--hand); font-size: 19px; color: var(--graphite); letter-spacing: 0.01em; }
.step-body { display: none; padding: 2px 0 12px; }
.step.open .step-body { display: block; animation: open 0.18s ease-out; }
@keyframes open { from { opacity: 0; transform: translateY(-4px); } }

.field + .field { margin-top: 12px; }
/* a step that has run: its controls fade and stop; its "?" still answers */
.field.locked [inert] { opacity: 0.5; }
.label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.label output { font: 600 12px var(--sans); color: var(--ink); text-align: right; }

/* what does this do? */
.qm {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px; margin-left: 4px; padding: 0; vertical-align: 1px;
  border: 1.5px solid var(--ink-60); border-radius: 50%;
  background: transparent; color: var(--ink-80);
  font: 700 10px/1 var(--sans); letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.qm::before { content: ''; position: absolute; inset: -6px; }   /* a finger-sized target */
.qm:hover, .qm[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.help {
  position: relative;
  margin: 2px 0 12px; padding: 10px 12px 2px;
  border: 1.5px solid var(--ink); border-radius: 6px;
  background: var(--paper) var(--fibre);
  box-shadow: 2px 2px 0 var(--ink-35);
  font: 500 12.5px/1.45 var(--sans); color: var(--ink);
  text-transform: none; letter-spacing: 0;
  animation: open 0.15s ease-out;
}
.help p, .help ul { margin: 0 0 8px; }
.help ul { padding-left: 16px; }
.help li + li { margin-top: 3px; }
.help b { font-weight: 800; }

/* paper samples */
.papers { display: flex; gap: 8px; }
.paper-pick {
  flex: 1 1 0; min-width: 0; height: 42px;
  padding: 0; border: 0; background: none;
  -webkit-tap-highlight-color: transparent;
}
.paper-pick i {
  display: block; height: 100%;
  background-color: var(--c);
  background-image: var(--smooth), var(--fibre);
  background-blend-mode: multiply, normal;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 1px 2px 4px rgba(20, 30, 50, 0.25);
  transition: transform 0.12s, box-shadow 0.12s;
}
.paper-pick.tooth i { background-image: var(--tooth), var(--fibre); background-size: 70px 70px, auto; }
.paper-pick.fibrous i { background-image: var(--strands), var(--smooth), var(--fibre); background-size: 90px 90px, auto, auto; background-blend-mode: normal, multiply, normal; }
.paper-pick.deckle i { clip-path: polygon(0 3%, 12% 0, 28% 2%, 45% 0, 63% 3%, 80% 0, 100% 2%, 97% 20%, 100% 41%, 98% 62%, 100% 83%, 97% 100%, 78% 97%, 55% 100%, 33% 98%, 14% 100%, 0 97%, 3% 75%, 0 52%, 2% 30%); }
.paper-pick.flecks i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cellipse cx='54.3' cy='67.2' rx='1.23' ry='0.84' fill='%234d4d4d' opacity='0.42' transform='rotate%2891 54.3 67.2%29'/%3E%3Cellipse cx='96.5' cy='57.1' rx='0.95' ry='0.49' fill='%236b5d4c' opacity='0.38' transform='rotate%2880 96.5 57.1%29'/%3E%3Cellipse cx='97.2' cy='83.2' rx='0.44' ry='0.43' fill='%234d4d4d' opacity='0.58' transform='rotate%28174 97.2 83.2%29'/%3E%3Cellipse cx='74.8' cy='99.8' rx='0.46' ry='0.19' fill='%234d4d4d' opacity='0.36' transform='rotate%28158 74.8 99.8%29'/%3E%3Cellipse cx='55.7' cy='52.9' rx='1.16' ry='0.82' fill='%238a6d4a' opacity='0.35' transform='rotate%28115 55.7 52.9%29'/%3E%3Cellipse cx='10.2' cy='78.6' rx='0.77' ry='0.56' fill='%235a4d40' opacity='0.60' transform='rotate%28168 10.2 78.6%29'/%3E%3Cellipse cx='37.8' cy='27.6' rx='0.66' ry='0.29' fill='%238a6d4a' opacity='0.39' transform='rotate%28138 37.8 27.6%29'/%3E%3Cellipse cx='34.9' cy='8.0' rx='0.42' ry='0.34' fill='%235a4d40' opacity='0.51' transform='rotate%2838 34.9 8.0%29'/%3E%3Cellipse cx='117.6' cy='47.7' rx='0.47' ry='0.36' fill='%233d5a86' opacity='0.47' transform='rotate%28140 117.6 47.7%29'/%3E%3Cellipse cx='37.3' cy='1.8' rx='0.77' ry='0.73' fill='%235a4d40' opacity='0.35' transform='rotate%2824 37.3 1.8%29'/%3E%3Cellipse cx='55.8' cy='58.4' rx='1.01' ry='0.52' fill='%236b5d4c' opacity='0.50' transform='rotate%2892 55.8 58.4%29'/%3E%3Cellipse cx='46.1' cy='47.4' rx='1.29' ry='0.52' fill='%234d4d4d' opacity='0.46' transform='rotate%28156 46.1 47.4%29'/%3E%3Cellipse cx='106.2' cy='25.3' rx='0.75' ry='0.69' fill='%235a4d40' opacity='0.36' transform='rotate%28116 106.2 25.3%29'/%3E%3Cellipse cx='17.6' cy='53.0' rx='0.41' ry='0.31' fill='%238a6d4a' opacity='0.38' transform='rotate%28149 17.6 53.0%29'/%3E%3Cellipse cx='10.8' cy='69.9' rx='0.62' ry='0.47' fill='%238a6d4a' opacity='0.39' transform='rotate%2867 10.8 69.9%29'/%3E%3Cellipse cx='70.5' cy='99.9' rx='0.52' ry='0.33' fill='%233d5a86' opacity='0.67' transform='rotate%28113 70.5 99.9%29'/%3E%3Cellipse cx='98.1' cy='29.9' rx='0.57' ry='0.48' fill='%236b5d4c' opacity='0.59' transform='rotate%28169 98.1 29.9%29'/%3E%3Cellipse cx='46.6' cy='57.9' rx='0.47' ry='0.20' fill='%234d4d4d' opacity='0.69' transform='rotate%2820 46.6 57.9%29'/%3E%3Cellipse cx='28.6' cy='84.5' rx='0.63' ry='0.56' fill='%233d5a86' opacity='0.53' transform='rotate%28107 28.6 84.5%29'/%3E%3Cellipse cx='111.5' cy='117.3' rx='0.51' ry='0.35' fill='%234d4d4d' opacity='0.57' transform='rotate%28118 111.5 117.3%29'/%3E%3Cellipse cx='33.6' cy='110.1' rx='0.58' ry='0.24' fill='%238a6d4a' opacity='0.44' transform='rotate%2848 33.6 110.1%29'/%3E%3Cellipse cx='5.6' cy='33.8' rx='0.88' ry='0.86' fill='%236b5d4c' opacity='0.66' transform='rotate%2817 5.6 33.8%29'/%3E%3Cellipse cx='117.7' cy='78.8' rx='1.02' ry='0.77' fill='%235a4d40' opacity='0.67' transform='rotate%2825 117.7 78.8%29'/%3E%3Cellipse cx='57.0' cy='42.9' rx='0.68' ry='0.29' fill='%235a4d40' opacity='0.52' transform='rotate%28108 57.0 42.9%29'/%3E%3Cellipse cx='87.7' cy='38.3' rx='1.30' ry='0.58' fill='%235a4d40' opacity='0.67' transform='rotate%2898 87.7 38.3%29'/%3E%3Cellipse cx='88.5' cy='84.4' rx='1.11' ry='1.06' fill='%238a6d4a' opacity='0.67' transform='rotate%2863 88.5 84.4%29'/%3E%3C/svg%3E"), var(--tooth), var(--fibre); background-size: 60px 60px, 90px 90px, auto; background-blend-mode: normal, multiply, normal; }
.paper-pick:hover i { transform: translateY(-2px); }
.paper-pick[aria-pressed="true"] i { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--ink), 3px 4px 0 var(--ink); }

/* range: square thumb, hard shadow (as on collincollins.com) */
.range-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 500 11px var(--mono); color: var(--ink-60); }
.range-row output { min-width: 46px; text-align: right; font: 600 12px var(--mono); color: var(--ink); }
input[type="range"] {
  flex: 1; min-width: 0; height: 28px; margin: 0;
  background: transparent; appearance: none; -webkit-appearance: none;
  cursor: pointer; touch-action: none;
}
input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 0; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 18px; width: 13px; margin-top: -8px;
  border: 2px solid var(--ink); border-radius: 2px; background: var(--card);
  box-shadow: 2px 2px 0 var(--ink);
}
input[type="range"]::-moz-range-track { height: 4px; background: var(--paper-2); border: 1.5px solid var(--ink); }
input[type="range"]::-moz-range-thumb { height: 15px; width: 10px; border: 2px solid var(--ink); border-radius: 2px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); }

/* bottles you pick up */
.bottles { display: flex; align-items: flex-end; gap: 8px; }
.bottle-pick {
  display: grid; justify-items: center; gap: 2px;
  padding: 0 4px; border: 0; background: none;
  font: 700 12px var(--sans); color: var(--ink-80);
  -webkit-tap-highlight-color: transparent;
}
.bottle-pick svg { height: 84px; width: auto; overflow: visible; transition: transform 0.16s cubic-bezier(.3,1.6,.6,1), filter 0.16s; filter: drop-shadow(1px 2px 1px rgba(20, 20, 30, 0.25)); }
.bottle-pick:hover svg { transform: translateY(-2px); }
.bottle-pick[aria-pressed="true"] svg { transform: translateY(-7px); filter: drop-shadow(3px 9px 4px rgba(20, 20, 30, 0.28)); }
.bottle-pick span { padding: 1px 6px; border-radius: 4px; }
.bottle-pick[aria-pressed="true"] span { background: var(--ink); color: var(--paper); }
.coats { margin-left: auto; display: grid; gap: 6px; justify-items: end; align-self: center; }

/* illustrated tiles */
.tiles { display: grid; gap: 10px; }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tiles.two { grid-template-columns: repeat(2, 1fr); margin-bottom: 10px; }
.tile {
  display: grid; justify-items: center; gap: 1px;
  padding: 4px 4px 5px;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--card);
  box-shadow: var(--sh-sm);
  font: 700 11.5px var(--sans);
  transition: transform 0.07s, box-shadow 0.07s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tile svg { width: 40px; height: 26px; overflow: visible; }
.tiles.stack { grid-template-columns: 1fr; gap: 7px; }
.tiles.stack .tile { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; padding: 3px 10px; }
.tiles.stack .tile svg { width: 34px; height: 24px; }
.tile:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.tile:active { transform: translate(3px, 3px); box-shadow: none; }
.tile[aria-pressed="true"] { background: var(--cyan); }
.tile:disabled { opacity: 0.5; }
.ico .st { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico .hl { transition: fill 0.2s, opacity 0.2s; }
.ico .sunfill { fill: transparent; }
[aria-pressed="true"] .ico .sunfill { fill: var(--sun); }
.ico .uvfill { fill: transparent; }
[aria-pressed="true"] .ico .uvfill { fill: var(--uv); }
.ico .uvray { stroke: var(--uv); opacity: 0; }
[aria-pressed="true"] .ico .uvray { opacity: 0.8; }
.ico .cloudfill { fill: transparent; }
[aria-pressed="true"] .ico .cloudfill { fill: #fff; }
.ico .waterfill { fill: transparent; }
[aria-pressed="true"] .ico .waterfill { fill: #a9cbe6; }
.ico .teafill { fill: #e9dcc6; }
[aria-pressed="true"] .ico .teafill { fill: var(--tea); }
.ico .coffeefill { fill: #e9dcc6; }
[aria-pressed="true"] .ico .coffeefill { fill: var(--coffee); }
.ico .ink { fill: var(--ink); }
.ico .paperfill { fill: #fffdf8; }

/* the timer. light and timer share rows, so the light buttons sit level
   with the middle of the dial */
.expose-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.expose-row > .field { display: contents; }
#lightCtrl > .label, .timer-read { grid-row: 1; align-self: baseline; }
#lightCtrl > .tiles { grid-area: 2 / 1; }
.timer-read { grid-column: 2; margin-bottom: 18px; }
.dial { grid-area: 2 / 2; justify-self: center; flex: none; width: 138px; height: 138px; touch-action: none; }
#peek { grid-area: 3 / 2; justify-self: center; margin-top: 8px; }
.dial svg { width: 100%; height: 100%; overflow: visible; cursor: grab; }
.dial svg:active { cursor: grabbing; }
.dial[aria-disabled="true"] svg { cursor: default; }
.dial .face { transition: transform 0.05s linear; }
.dial .num { font: 700 12px var(--sans); fill: #1d1b18; letter-spacing: -0.02em; }
.dial .zero { font: 800 10px var(--sans); fill: #c8402e; }
.dial .mark { font: 400 17px var(--hand); fill: var(--graphite); }
.timer-read { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
/* as wide as the longest time (1:59:00), so the dial never moves */
.timer-read output { min-width: 7ch; text-align: right; font: 600 17px/1 var(--mono); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.actions {
  display: grid; gap: 8px; margin-top: 4px;
  position: sticky; bottom: 0; z-index: 4;
  padding: 14px 0 14px;
  background: linear-gradient(rgba(251, 250, 246, 0), var(--card) 12px);
}
.btn.ghost { min-height: 32px; }
.go { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.btn.hand { min-height: 52px; padding: 6px 11px; gap: 6px; font-size: 12px; box-shadow: var(--sh-sm); }
.go:has(#hand:not([hidden])) #run::after { display: none; }
.btn.hand svg { width: 20px; height: 20px; flex: none; }
.btn.hand[aria-pressed="true"] { background: var(--sensitizer, #d6d68a); }
.btn.hand[hidden] { display: none !important; }

.foot { margin: 0; padding: 4px 2px; font: 500 11px/1.6 var(--mono); color: var(--ink-60); }
.foot .nb { white-space: nowrap; }
/* one line, separated by dots, where there is the width for it */
#credits > * + *::before { content: "·"; display: inline-block; margin: 0 0.7ch; color: var(--ink-35); font-style: normal; text-decoration: none; }
.foot a { color: var(--ink-80); }

.fatal { padding: 30px; font: 500 14px var(--mono); color: var(--paper); line-height: 1.5; }

/* --------------------------------------------- desktop: one screen, no scroll -- */
@media (min-width: 901px) and (min-height: 600px) {
  body.benchpage { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  .top { flex: none; }
  .app {
    flex: 1 1 auto; min-height: 0; width: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "neg bench proc" "foot bench proc";
    align-items: start; padding-bottom: 24px;
  }
  .bench { height: 100%; }
  /* the process card holds the height; its steps scroll inside it */
  .process { display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
  .tablet { flex: none; }
  /* (a little room each side: the scroll box clips, and the chosen paper's ring sits outside it) */
  .steps { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -10px 0 -6px; padding: 2px 10px 0 6px; scrollbar-width: thin; scrollbar-color: var(--ink-35) transparent; }
  .actions { flex: none; position: static; background: none; padding: 10px 0 14px; border-top: 1.5px dashed var(--ink-35); }
  html:has(body.benchpage) { overflow: hidden; }
  /* a narrow column: one credit to a line */
  .foot { align-self: end; padding: 0 2px; display: grid; gap: 3px; line-height: 1.45; }
  #credits > * + *::before { content: none; }
  .foot a { justify-self: start; }
}

/* ------------------------------------------------- narrower desktops -- */
@media (max-width: 1240px) {
  .app { grid-template-columns: minmax(0, 1fr) 352px; grid-template-areas: "bench neg" "bench proc" "bench foot"; }
  .negative .lightbox { display: none; }
  .neg-row { display: flex; align-items: flex-start; gap: 12px; }
  .neg-row .slides { flex: 1 1 auto; min-width: 0; margin: 4px -4px 0; }
  .neg-row .adjust { flex: none; flex-direction: column; margin-top: 6px; }
  .neg-row .adjust .btn { justify-content: flex-start; }
}
@media (min-width: 901px) and (max-width: 1240px) and (min-height: 600px) {
  .app { grid-template-rows: auto minmax(0, 1fr) auto; }
}

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 900px), (pointer: coarse) and (max-height: 520px) {
  /* the page moves itself to the next step; anchoring would fight it */
  body { font-size: 14px; overflow-anchor: none; }
  .top { padding: 4px 12px 0; gap: 10px; }
  .mark svg { height: 42px; }
  .tag { display: none; }
  .top nav { gap: 12px; font-size: 11px; }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "bench" "neg" "proc" "foot";
    gap: 12px; padding: 2px 12px 20px;
  }
  /* the print stays in view while its controls scroll beneath it; it is
     wider than it is tall, so the step below has room */
  .bench { position: sticky; top: 0; z-index: 5; padding-top: 4px; background: linear-gradient(var(--paper) 85%, transparent); }
  .bench-frame { height: min(calc((100vw - 24px) * 0.84), 50vh); box-shadow: 3px 3px 0 var(--ink); }
  .negative { padding: 10px 12px 12px; }
  .negative .card-head { margin-bottom: 2px; }
  .slide { flex-basis: 72px; }
  .slide .mount { max-width: 72px; }
  .process { padding: 10px 12px 0; }
  /* done is done: the tablet up top says so */
  .step.done { display: none; }
  .actions {
    margin: 6px -12px 0; padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 2px solid var(--ink);
    border-radius: 0 0 6px 6px;
    grid-template-columns: 1fr auto;
  }
  .actions .go { grid-column: 1; }
  .actions .btn.ghost { grid-column: 2; grid-row: 1; min-height: 44px; }
  .btn.primary, .btn.hand { min-height: 44px; }
  /* one line, always: the type gives way on a narrow phone */
  .btn.primary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 8px; font-size: clamp(12.5px, 3.9vw, 15px); }
  .actions .btn.ghost { padding-inline: 10px; font-size: 13px; }
  .btn.hand span { display: none; }
  .btn.hand { padding: 6px 12px; }
  .tools { top: 8px; right: 8px; gap: 6px; }
  .tool { width: 32px; height: 32px; }
  .status { left: 8px; bottom: 8px; right: 50px; }
  .readout { font-size: 11px; padding: 4px 7px; }
  /* the steps read 1 coat, 2 expose: a thin strip */
  .tablet li { min-height: 0; padding: 7px 6px; align-items: baseline; justify-content: flex-start; gap: 5px; white-space: nowrap; }
  .tablet li span { position: static; }
  .tablet li.on b::after { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; margin: 0; }
  /* nothing to choose once it's exposed: out of the way */
  .negative.locked { display: none; }
  .note { font-size: 21px; left: 12px; top: 10px; }
  .dial { width: 128px; height: 128px; }
  .bottle-pick svg { height: 72px; }
  /* just the name: the credits are on the how-it-works page */
  .foot { padding: 4px 2px 2px; text-align: center; font-size: 10.5px; }
  #credits > :not(:last-child) { display: none; }
  #credits > * + *::before { content: none; }
}

/* the smallest phones: fresh sheet gets its own row */
@media (max-width: 340px) {
  .actions { grid-template-columns: minmax(0, 1fr); }
  .actions .btn.ghost { grid-column: 1; grid-row: auto; }
}

/* phones on their side: too short to pin the print */
@media (max-width: 900px) and (max-height: 520px), (pointer: coarse) and (max-height: 520px) {
  .bench { position: static; }
  .bench-frame { height: calc(100vh - 70px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}