/* Minimalist, Tufte-ish, Japandi-inspired */
:root {
  --paper: #f7f5ef;
  --ink: #222;
  --subtle: #7a7a7a;
  --accent: #8a4a43;   /* warm terracotta */
  --cool: #2f4f6f;     /* deep slate blue */
  --grid-gap: 3px;
  --tile-size: 96px;   /* each 28×28 tile scaled to ~96px for balance */
}

/* Crimson Pro SC — manual CSS version */
@font-face {
  font-family: "Crimson Pro SC";
  src: url("fonts/crimson-pro-sc/CrimsonProSC-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Crimson Pro SC";
  src: url("fonts/crimson-pro-sc/CrimsonProSC-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: "Crimson Pro SC", serif; font-weight: 400; font-variant: small-caps; letter-spacing: 0.07em; text-transform: lowercase;}
header { padding: 24px 24px 8px; }
.title { font-size: 25px; font-weight: 400; font-style: italic; font-variant: normal; letter-spacing: normal; text-transform: none;}
.subtitle { color: var(--subtle); margin-top: 4px; font-size: 20px; font-variant: small-caps; letter-spacing: 0.07em;}

.controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.controls button, .controls select, .controls input[type="range"] {font-family: 'Crimson Pro SC'; font-weight: 400; font-variant: small-caps; letter-spacing: 0.05em; text-transform: lowercase; font-size: 20px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.15); background: #fff; }
.controls .file-label { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.controls .file-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.controls .file-label span { display: inline-block; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.15); background: white; font-size: 20px; }

.controls .toggle { display: inline-flex; align-items: center; gap: 6px; }
.stepinfo { display: inline-flex; align-items: center; gap: 8px; color: var(--subtle); }

/* main { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 20px 24px 40px; }
.meta { font-size: 20px; color: var(--subtle); position: sticky; top: 12px; align-self: start; } */
/* Top info bar (epoch/step/loss...) */
.infobar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  padding: 16px 0 4px;
  color: var(--subtle);
  font-size: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Container spacing */
main {
  display: block;
  padding: 20px 24px 40px;
}

/* Three columns underneath the infobar */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* left: L1, middle: L2, right: L3 */
  gap: 24px;
  margin-top: 20px;
}

.panel h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ink);
  margin: 8px 0 8px;
}

.rowlabel {
  font-size: 11px;
  color: var(--subtle);
  margin: 8px 0 4px;
}

/* Keep your existing grid for 64 tiles */
.grid64 {
  display: grid;
  grid-template-columns: repeat(8, var(--tile-size));
  grid-auto-rows: var(--tile-size);
  gap: var(--grid-gap);
}

/* Crispy pixels, no CSS stretching (JS sets sizes) */
.grid64 canvas,
#W2, #W3, #b1, #b2, #b3 {
  width: auto;
  height: auto;
  image-rendering: pixelated;
}

/* Panel surfaces (keep your existing look) */
.square, .rect, .bar, .grid64 canvas {
  background: #fff;
  border-radius: 0px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 10px 24px rgba(0,0,0,0.05) inset;
}

/* Responsive: stack to 1 column on narrow screens */
@media (max-width: 1100px) {
  .panels {
    grid-template-columns: 1fr;
  }
}
.panel { margin-bottom: 18px; }
.panel h2 { font-size: 20px; font-weight: 400; letter-spacing: 0.07em; color: var(--ink); margin: 18px 0 8px; }
.rowlabel { font-size: 20px; color: var(--subtle); margin: 8px 0 4px; }

/* .grid64 { display: grid; grid-template-columns: repeat(8, var(--tile-size)); grid-auto-rows: var(--tile-size); gap: var(--grid-gap); border-radius: 0px;} */
.grid64 canvas,
#W2, #W3, #b1, #b2, #b3 {
  width: auto;
  height: auto;
  image-rendering: pixelated; /* reinforce nearest-neighbor */
}
/* .grid64 canvas { width: var(--tile-size); height: var(--tile-size); border-radius: 0px; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 10px 24px rgba(0,0,0,0.05) inset; background: #fff; } */

.square, .rect, .bar { background: #fff; border-radius: 0px; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 10px 24px rgba(0,0,0,0.05) inset; }

footer { padding: 12px 24px 24px; color: var(--subtle); font-size: 20px; border-top: 1px solid rgba(0,0,0,0.06); }

#prevBtn, #nextBtn {
  font-size: 10px;               /* smaller arrow */
  width: 28px;                   /* fixed square size */
  height: 28px;
  padding: 0;                    /* remove internal text padding */
  display: inline-flex;          /* center the arrow */
  align-items: center;
  justify-content: center;
  line-height: 1;                /* prevent vertical offset */
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  background: white;
  color: #999;
  vertical-align: middle;
}

#prevBtn:enabled, #nextBtn:enabled {
  color: #333;
  border-color: rgba(0,0,0,0.2);
}

#prevBtn:hover:enabled, #nextBtn:hover:enabled {
  background: #f5f5f5;
  cursor: pointer;
}