:root{
  --bg:#0e0d0b;
  --panel:#17140f;
  --panel-2:#1f1a13;
  --line:#332a1c;
  --amber:#e8952f;
  --amber-dim:#8a5c1f;
  --text:#e9e2d3;
  --text-dim:#8c8474;
  --mono: 'JetBrains Mono', 'Consolas', monospace;
  --sans: 'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html, body{
  /* Hard boundary: nothing inside this page can ever push the document
     wider than the viewport. Without this, any single element that's too
     wide (a canvas's pixel buffer, a long unbroken string, an image before
     it loads) silently expands the whole page and shoves everything after
     it off-screen — which is what kept happening one element at a time.
     This makes that class of bug impossible instead of patching each
     instance as it's found. */
  overflow-x: hidden;
  max-width: 100vw;
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans);
  height:100vh; width:100vw; display:flex; flex-direction:column;
}
header{
  padding:14px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px; background:var(--panel);
  flex-wrap:wrap; /* button drops to its own line rather than forcing overflow on narrow windows */
}
header h1{
  font-size:15px; letter-spacing:0.08em; text-transform:uppercase;
  margin:0; color:var(--amber); font-weight:700;
}
header .sub{ color:var(--text-dim); font-size:12px; font-family:var(--mono); }
.filebtn{
  background:var(--panel-2); border:1px solid var(--amber-dim);
  color:var(--amber); padding:8px 14px; font-size:12px; letter-spacing:0.05em;
  text-transform:uppercase; cursor:pointer; border-radius:2px; font-family:var(--mono);
  flex-shrink:0;
}
#pickBlueprintBtn{ margin-left:auto; }
.filebtn:hover{ background:var(--amber-dim); color:#0e0d0b; }
.filebtn-primary{ background:var(--amber); color:#0e0d0b; font-weight:700; }
.filebtn-primary:hover{ background:#fff; }
.hidden-input{ display:none; }
main{ flex:1; display:flex; min-height:0; min-width:0; overflow:hidden; }
#canvasWrap{ flex:1; min-width:0; position:relative; background:
  radial-gradient(circle at 50% 40%, #171310 0%, #0e0d0b 70%); }
canvas{ display:block; width:100%; height:100%; cursor:grab; }
canvas:active{ cursor:grabbing; }
#empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; color:var(--text-dim); font-family:var(--mono); font-size:13px;
  text-align:center; padding:20px;
}
#empty b{ color:var(--amber); }
aside{
  width:300px; flex-shrink:0; min-width:0;
  border-left:1px solid var(--line); background:var(--panel);
  overflow-y:auto; overflow-x:hidden; padding:14px; font-family:var(--mono); font-size:12px;
}
aside h2{
  font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-dim); margin:18px 0 8px; font-family:var(--sans); font-weight:600;
}
aside h2:first-child{ margin-top:0; }
.legend-row{ display:flex; align-items:center; gap:8px; padding:3px 0; cursor:pointer; }
.legend-row:hover{ color:var(--amber); }
.legend-row img{ width:16px; height:16px; flex:none; image-rendering:pixelated; }
.swatch{ width:10px; height:10px; flex:none; border-radius:2px; }
.legend-row span.id{ color:var(--text-dim); font-size:10px; margin-left:auto; }
#tooltip{
  position:fixed; pointer-events:none; background:#0a0908; border:1px solid var(--amber-dim);
  padding:10px 12px; font-family:var(--mono); font-size:11px; line-height:1.5;
  color:var(--text); display:none; z-index:10; max-width:260px; border-radius:2px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
#tooltip b{ color:var(--amber); }
#exportBtn{
  width:100%; margin-top:14px; background:transparent; border:1px solid var(--amber-dim);
  color:var(--amber); padding:8px; font-family:var(--mono); font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; cursor:pointer; border-radius:2px;
}
#exportBtn:hover{ background:var(--amber-dim); color:#0e0d0b; }
#exportBtn:disabled{ opacity:0.35; cursor:default; }
.stat{ display:flex; justify-content:space-between; padding:2px 0; color:var(--text-dim); }
.stat b{ color:var(--text); font-weight:400; }
.warn{
  margin-top:14px; padding:8px 10px; border-left:2px solid var(--amber-dim);
  background:rgba(232,149,47,0.06); color:var(--text-dim); font-size:10.5px; line-height:1.5;
}