/* HyperMorph 3000 — NextWell Lab restyle */
* { box-sizing: border-box; }

:root {
  /* The app is black; without this the browser paints its light scrollbar and
     form controls, which inside the gallery frame reads as a white stripe down
     the right edge. */
  color-scheme: dark;
  --bg: #0b0b0c;
  --panel: #101012;
  --ink: #f0efe9;
  --ink-dim: #a5a49c;
  --ink-faint: #63625c;
  --acid: #b88cff;
  --acid-ink: #0b0b0c;
  --line: rgba(240, 239, 233, 0.14);
  --line-strong: rgba(240, 239, 233, 0.3);
  --display: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Firefox only: it has no ::-webkit-scrollbar, and the standard properties
   switch the WebKit rules below off wherever both are understood. */
@supports (-moz-appearance: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #2c2c31 var(--bg);
  }
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #2c2c31;
  border: 3px solid var(--bg);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #3c3c44; }

body {
  margin: 0;
  font-family: var(--display);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  min-height: 100vh;
}

/* header */
.hm-head { text-align: center; padding: 44px 16px 10px; }
.hm-eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-dim);
}
.hm-head h1 {
  margin: 0;
  font-size: clamp(34px, 7vw, 64px);
  font-weight: 700; letter-spacing: -.03em; text-transform: uppercase;
  line-height: 1;
  animation: hm-rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.hm-outline { color: transparent; -webkit-text-stroke: 2px var(--acid); }
.hm-sub {
  margin: 14px auto 0;
  max-width: 480px;
  font-size: 13px; line-height: 1.7;
  color: var(--ink-dim);
}
@keyframes hm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

button {
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
button:hover {
  border-color: var(--acid); color: var(--acid);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--acid) 28%, transparent);
  transform: translate(-2px, -2px);
}
button:active { transform: none; box-shadow: none; }

#app {
  text-align: center;
  padding: 26px 14px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
#app .group {
  display: inline-block;
  vertical-align: top;
  margin: 14px 12px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  animation: hm-rise .7s cubic-bezier(.2,.8,.2,1) both;
}
#app .group:nth-child(2) { animation-delay: .08s; }
#app .group button { display: block; margin: 0 auto 14px; }

#app .image-container {
  position: relative;
  display: inline-block;
  background: #000;
  border: 1px solid var(--line);
  margin: 4px;
  transition: border-color .18s;
}
#app .image-container:hover { border-color: var(--line-strong); }
#app .image-container .draw-area { text-align: left; overflow: hidden; }
#app .image-container input { position: absolute; z-index: -1; opacity: 0; }
#app .image-container label {
  display: block;
  padding: 9px 10px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .15s, color .15s;
}
#app .image-container label:hover { background: var(--acid); color: var(--acid-ink); }

#app .draw-area { position: relative; }
#app .draw-area canvas.img { display: block; }
#app .draw-area svg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}

/* triangulation overlay */
#app svg polygon {
  fill: color-mix(in srgb, var(--acid) 10%, transparent);
  stroke: color-mix(in srgb, var(--acid) 65%, transparent);
  stroke-width: 1;
}
#app svg polygon:hover { fill: color-mix(in srgb, var(--acid) 25%, transparent); }
#app svg circle {
  fill: url(#point-grad);
  stroke: var(--acid);
  stroke-width: 1.5;
  cursor: grab;
}
#app svg circle:active { cursor: grabbing; }
#app svg line.connector { stroke: var(--acid); stroke-dasharray: 3 3; }

#morph { position: relative; background: #000; border: 1px solid var(--line); }
#morph canvas { display: block; }
#morph canvas + canvas { position: absolute; top: 0; left: 0; }

#app pre {
  display: none; /* debug state dump */
}

@media (max-width: 760px) {
  .hm-head { padding-top: 30px; }
  #app { padding: 16px 6px 30px; }
  #app .group { display: block; margin: 12px auto; max-width: 100%; overflow-x: auto; }
}