@font-face { font-family: "Axis"; src: url("../fonts/Axis-ExtraBold.otf") format("opentype"); font-weight: 800; }
@font-face { font-family: "Source Sans"; src: url("../fonts/SourceSansPro-Light.ttf"); font-weight: 300; }
@font-face { font-family: "Source Sans"; src: url("../fonts/SourceSansPro-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Source Sans"; src: url("../fonts/SourceSansPro-Italic.ttf"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Source Sans"; src: url("../fonts/SourceSansPro-Semibold.ttf"); font-weight: 600; }
@font-face { font-family: "Source Sans"; src: url("../fonts/SourceSansPro-Bold.ttf"); font-weight: 700; }
@font-face { font-family: "Source Sans"; src: url("../fonts/SourceSansPro-Black.ttf"); font-weight: 900; }

:root {
  --sable: #E7D4C3;
  --caramel: #DA9978;
  --cacao: #6E473F;
  --nuit: #2E2F32;
  --blanc: #FFFFFF;
  /* Canvas: 5000 x 1500 px = 10 m x 3 m (1 px = 2 mm) */
  --W: 5000px;
  --H: 1500px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #1d1e20; color: var(--nuit); font-family: "Source Sans", sans-serif; }

.toolbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; gap: 12px; align-items: center;
  padding: 10px 16px; background: var(--nuit); color: var(--sable);
  font: 600 14px "Source Sans", sans-serif;
}
.toolbar a { color: var(--sable); text-decoration: none; opacity: .6; }
.toolbar a.on, .toolbar a:hover { opacity: 1; }
.toolbar .sep { flex: 1; }
.toolbar button {
  background: transparent; color: var(--sable); border: 1px solid var(--sable);
  border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer;
}
.toolbar button.on { background: var(--sable); color: var(--nuit); }

.stage { margin-top: 56px; padding: 20px; overflow-x: auto; }
.stage-inner { position: relative; }
.canvas {
  position: absolute; top: 0; left: 0;
  width: var(--W); height: var(--H); overflow: hidden;
  transform-origin: 0 0; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.axis { font-family: "Axis", sans-serif; font-weight: 800; letter-spacing: .01em; }
.ruler { color: var(--sable); opacity: .5; font-size: 12px; margin-top: 8px; }