@font-face {
  font-family: 'Haltung';
  src: url('../fonts/Haltung-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Haltung';
  src: url('../fonts/Haltung-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;
  --stage-bg: #d9d7d3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--stage-bg);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px 340px 96px 32px; /* room for the panel (right) and media strip (bottom) */
}

#artboard-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

#artboard {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 214px); /* room for the timeline bar below */
  width: auto;
  height: auto;
}

/* ---- media strip ---- */
#media-strip {
  position: fixed;
  left: 24px;
  bottom: 20px;
  right: 340px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 20;
}

#import-btn {
  flex: none;
  font: 500 11px/1 Inter, sans-serif;
  letter-spacing: .04em;
  padding: 10px 14px;
  border: 1px solid #1b1b1b;
  background: #1b1b1b;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
}
#import-btn:hover { background: #333; }

#media-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
}

.thumb {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
}
.thumb img, .thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb .rm {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 2px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font: 600 10px/16px Inter, sans-serif;
  text-align: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}
.thumb:hover .rm { opacity: 1; }
.thumb .tag {
  position: absolute;
  left: 2px;
  bottom: 2px;
  font: 600 8px/1 Inter, sans-serif;
  letter-spacing: .06em;
  color: #fff;
  background: rgba(0,0,0,.65);
  padding: 2px 4px;
  border-radius: 2px;
  text-transform: uppercase;
}

/* ---- SSUI curve rows: the preset menu lives inside the label row, which
 * SSUI clips (overflow hidden) — let it spill out, above the graph.
 * Prefixed past SSUI's `.ssui-panel.ssui-panel *` reset (0,2,0). */
.ssui-panel .ssui-row--curve .ssui-row__label { overflow: visible; }
.ssui-panel .ssui-row--curve .ssui-curve__menu-wrap { z-index: 20; }
.ssui-panel .ssui-row--curve .ssui-select__menu { z-index: 20; }

/* ---- impulse timeline (dark ssui-style bar under the artboard) ---- */
.tl {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 14px;
}
.tl-lane {
  position: relative;
  height: 46px;
  background: #0e0e0e;
  border: 1px solid rgba(0,0,0,.4);
  border-radius: 10px;
  overflow: hidden;
  cursor: copy;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.tl-ticks i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.08);
}
.tl-head {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #f2f2f2;
  opacity: .85;
  pointer-events: none;
}
.tl-marks { position: absolute; inset: 0; }
.tl-mark {
  position: absolute;
  bottom: 5px;
  width: 8px;
  margin-left: -4px;
  border-radius: 4px;
  background: #8a8a8a;
  cursor: ew-resize;
  touch-action: none;
  transition: background .12s ease;
}
.tl-mark:hover { background: #c8c8c8; }
.tl-mark.rev { background: #b0503f; }
.tl-mark.rev:hover { background: #d96a55; }
.tl-mark.slow { background: #4f83b4; }        /* slow-mo: blue */
.tl-mark.slow:hover { background: #74a5d2; }
.tl-mark.flip { background: #c79a3d; }        /* reverse time: amber */
.tl-mark.flip:hover { background: #e0b45c; }
.tl-mark.sel { background: #f2f2f2; box-shadow: 0 0 0 1.5px rgba(255,255,255,.4); }
.tl-mark.rev.sel { background: #ff7a66; box-shadow: 0 0 0 1.5px rgba(255,122,102,.4); }
.tl-mark.slow.sel { background: #9cc4e8; box-shadow: 0 0 0 1.5px rgba(156,196,232,.4); }
.tl-mark.flip.sel { background: #ffd166; box-shadow: 0 0 0 1.5px rgba(255,209,102,.4); }
.tl-hint {
  margin: 6px 2px 0;
  font: 400 9px/1.5 Inter, sans-serif;
  letter-spacing: .03em;
  color: rgba(0,0,0,.42);
}

/* ---- drop overlay ---- */
#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(27,27,27,.82);
  color: #fff;
  font: 500 15px/1 Inter, sans-serif;
  letter-spacing: .05em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
#drop-overlay.on { opacity: 1; }
#drop-overlay span {
  border: 1px dashed rgba(255,255,255,.6);
  padding: 28px 44px;
  border-radius: 6px;
}

/* ---- recording badge ---- */
#rec-badge {
  position: fixed;
  top: 18px;
  left: 24px;
  z-index: 50;
  font: 600 11px/1 Inter, sans-serif;
  letter-spacing: .12em;
  color: #fff;
  background: #d23;
  padding: 8px 12px;
  border-radius: 3px;
  animation: recblink 1s steps(2) infinite;
}
@keyframes recblink { 50% { opacity: .45; } }