:root{
  /* NOTE: real palette is mapped in ui/animator-theme.css via --st-* tokens.
     These are safe fallbacks for standalone runs. */
  --bg:#0b0b0c;
  --panel:#121215;
  --panel2:#0f0f12;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.12);
  --chip:rgba(255,255,255,.06);
  --chip2:rgba(255,255,255,.10);
  --accent: rgba(56,189,248,1);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --border: 1px solid rgba(255,255,255,.12);
  --border-strong: 1px solid rgba(255,255,255,.20);
  --shadow-soft: 0 18px 60px rgba(0,0,0,.55);
}
html,body{height:100%; margin:0; background:var(--bg); color:var(--text); font-family:system-ui, sans-serif;}

.st-animator{--timeline-h:280px; --timeline-resizer-h:6px;height:100vh; display:grid; grid-template-rows: 54px 1fr var(--timeline-resizer-h) var(--timeline-h);}

/* HEADER */
.st-animator__header{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items:center;
  padding: 10px 12px;
  border-bottom: var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 92%, white 8%), var(--panel));
  box-shadow: var(--shadow-soft);
}
.st-animator__header-left,.st-animator__header-center,.st-animator__header-right{display:flex; gap:10px; align-items:center;}
.st-animator__header-center{justify-content:center;}
.st-animator__header-right{justify-content:flex-end;}
.brand{font-weight:800; letter-spacing:.2px;}
.btn{cursor:pointer; border: var(--border); background: var(--chip); color: var(--text); padding:6px 10px; border-radius: var(--radius-sm); font-size:13px; user-select:none;}
.btn:active{transform: translateY(1px);}
.pill{border: var(--border); background: color-mix(in oklab, var(--panel2) 72%, white 28%); padding: 4px 10px; border-radius: 999px; font-size:12px; color: var(--text);}

/* MAIN */
.st-animator__main{
  display:grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
}

.st-animator__sidebar{
  border-right: var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  min-width: 220px;
  max-width: 520px;
  overflow:hidden;
}

.st-animator__center{min-width:0; overflow:hidden;}

.st-animator__split{
  height:100%;
  display:grid;
  grid-template-columns: 380px 8px 1fr;
  min-height:0;
}

.splitter{cursor: col-resize; background: rgba(255,255,255,.05);}
.splitter:hover{background: rgba(255,255,255,.10);}

.st-animator__panel{display:flex; flex-direction:column; min-width:0; min-height:0;}
.panelHeader{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-bottom: var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel2) 85%, white 15%), var(--panel2));
}
.panelTitle{font-weight:800; font-size:13px;}
.panelSub{color:var(--muted); font-size:12px;}
.panelRight{margin-left:auto;}
.panelBody{padding: 12px; overflow:hidden; min-height:0; flex:1;}

.previewBody{
  position:relative;
  padding:0;
  background: url("../assets/table.jpg") center/cover no-repeat;
}

/* Preview stage (content area) */
.previewStage{
  position:absolute;
  inset:0;
  /* Must be ABOVE the WebGL canvas (canvas has z-index:1) so grid/handles can receive pointer events */
  z-index:4;
}

/* Preview footer (fixed inside preview panel) */
.previewFooter{
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding: 0 12px;
  border-top: var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.10));
  color: rgba(255,255,255,.75);
  font-size: 12px;
  user-select:none;
}
.previewOverlay{
  position:absolute;
  left:10px; bottom:10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  z-index:2;
  font-size:12px;
  color: rgba(255,255,255,.85);
  user-select:none;
}
.previewBody canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;}

/* Sidebar content */
.sectionTitle{font-weight:750; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.8); margin: 4px 0 8px;}
.list{display:grid; gap:8px;}
.item{width:100%; text-align:left; padding: 10px 10px; border-radius: 12px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: rgba(255,255,255,.92); cursor:pointer;}
.item:disabled{opacity:.45; cursor:not-allowed;}

/* Layers row (Phase 2.1 base) */
.layerRow{display:flex; align-items:center; gap:8px;}
.layerBtn{
  flex:1;
  text-align:left;
  padding: 10px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.layerBtn.active{
  border-color: rgba(255,255,255,.28);
  background: rgba(2,132,199,.12);
}
.layerActions{display:flex; gap:6px;}
.layerActions .iconBtn{width:30px; height:30px; border-radius:10px;}
.layerActions .iconBtn.is-off{opacity:.55;}
.layerActions .iconBtn.is-on{border-color: rgba(255,255,255,.22);}
.divider{height:1px; background: var(--line); margin: 12px 0;}
.kv{display:grid; grid-template-columns: 120px 1fr; gap:10px; align-items:center; font-size:13px;}
.k{color: rgba(255,255,255,.75);}
.v{color: rgba(255,255,255,.92); font-variant-numeric: tabular-nums;}
.field{display:grid; gap:6px; margin: 10px 0; font-size:12px; color: rgba(255,255,255,.85);}
.field input[type="range"]{width:100%;}
.hint{font-size:12px; color: rgba(255,255,255,.72); line-height:1.35;}

/* Keyframe editor (2.5-A) */
#keyframeEditor{display:none;}
#keyframeEditor.isVisible{display:block;}
#keyframeEmptyHint{display:block;}
#keyframeEmptyHint.isHidden{display:none;}

/* TIMELINE */
.st-animator__timeline{
  border-top: var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 90%, white 10%), var(--panel));
  display:flex;
  flex-direction:column;
  min-height: 0;
}
.timelineHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: var(--border);
}

.timelineHeaderMid{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex:1;
}
.timelineControls{
  display:flex;
  gap:12px;
  align-items:center;
}
.zoomGroup{display:flex; gap:10px; align-items:center;}

.iconBtn{
  width:38px; height:38px;
  border-radius: 12px;
  border: var(--border);
  background: var(--chip);
  color: var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  user-select:none;
}
.iconBtn .ico{font-size:14px; letter-spacing: .5px;}
.iconBtn:hover{background: color-mix(in oklab, var(--chip) 55%, white 45%); border-color: color-mix(in oklab, var(--line) 70%, white 30%);} 
.iconBtn:active{transform: translateY(1px);}
.iconBtn:focus{outline: 2px solid rgba(255,255,255,.18); outline-offset:2px;}
.iconBtn[disabled]{opacity:.45; cursor:not-allowed;}

/* Active timeline tool button (jump-to-track) */
.iconBtn.isActive{
  border-color: color-mix(in oklab, var(--accent) 65%, white 35%);
  background: color-mix(in oklab, var(--accent) 18%, var(--chip));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 28%, transparent);
}

.kfHeader{
  display:flex;
  align-items:center;
  gap:10px;
}
.kfHeader .hint{
  opacity:.75;
  font-size:12px;
  white-space:nowrap;
}
.kfHeader .kv{
  display:flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  white-space:nowrap;
}
.kfHeader .kv .k{opacity:.70; font-size:12px;}
.kfHeader .kv .v{font-weight:600; font-size:12px;}

.kfInterpField{
  display:flex;
  align-items:center;
  gap:8px;
}
.kfInterpField > span{
  opacity:.75;
  font-size:12px;
  white-space:nowrap;
}
.selectWrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.selectWrap select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding: 8px 34px 8px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  cursor:pointer;
}
.selectWrap .caret{
  position:absolute;
  right: 10px;
  pointer-events:none;
  opacity:.8;
  font-size: 12px;
}
.selectWrap select:hover{border-color: rgba(255,255,255,.20); background: rgba(0,0,0,.30);}
.timelineControls{display:flex; gap:10px; align-items:center;}
.timelineBody{min-height:0; padding: 12px; position:relative;}

/* Split timeline into main + right mini sidebar (like video editors) */
.timelineGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  height: 100%;
  min-height: 0;
}
.timelineMain{
  position:relative;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.10);
  padding: 10px;
}
.timelineSideTitle{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 8px;
}
.timelineToolBtns{display:grid; gap:8px;}
.toolBtn{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 10px 10px;
  cursor:pointer;
}
.toolBtn:hover{background: rgba(255,255,255,.07);}
.toolBtn:active{transform: translateY(1px);}

/* Playhead (timeline scrubber) */
.playhead{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.35);
  cursor:ew-resize;
  z-index:10;
}
.playhead::after{
  content:"";
  position:absolute;
  top:0;
  left:-6px;
  width:14px;
  height:14px;
  border-radius:10px;
  background:rgba(255,255,255,.75);
  box-shadow:0 0 0 1px rgba(0,0,0,.75);
}

/* StepC-like tracks */
.tracks{display:grid; gap:10px;}
.track{
  border: var(--border);
  background: color-mix(in oklab, var(--panel2) 90%, black 10%);
  border-radius: 14px;
  padding: 10px;
}

/* Focused track (jump from header tools) */
.track.isFocused{
  border-color: color-mix(in oklab, var(--accent) 60%, white 40%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent 75%);
  background: color-mix(in oklab, var(--panel2) 82%, var(--accent) 18%);
}
.trackHead{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom: 8px;}

/* 2.4: visual lane with keyframe markers */
.trackLane{
  position: relative;
  height: 18px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-bottom: 10px;
  overflow: hidden;
  cursor: pointer;
}
.trackLane::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0,
    rgba(255,255,255,.05) 1px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0) 32px
  );
  pointer-events:none;
  opacity:.35;
}
.trackMarker{
  position:absolute;
  top:50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
  cursor: grab;
}
.trackMarker:active{cursor: grabbing;}
.trackMarker.is-dragging{opacity:.9;}
.trackMarker.isSelected{
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 0 0 2px rgba(0,0,0,.65);
}
.badge{font-size:11px; padding: 2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.88);}
.kf{display:grid; grid-template-columns: 54px 1fr 72px 32px; gap:8px; align-items:center; padding:8px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14);}
.kf.isSelected{
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.06);
}
.kf input{width:100%; padding:6px 8px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); outline:none; font-size:12px;}
.iconBtn{width:32px; height:32px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); cursor:pointer; user-select:none; color: rgba(255,255,255,.92);}
.iconBtn:active{transform: translateY(1px);}

/* Settings (gear) */
.settingsWrap{position:relative; display:flex; align-items:center;}
.settingsWrap .gear{font-size:16px; line-height:1; color: rgba(255,255,255,.92);}
.settingsMenu{
  position:absolute;
  right:0;
  top: 40px;
  min-width: 220px;
  padding: 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  z-index: 50;
}
.settingsTitle{font-weight:800; font-size:13px; margin-bottom: 8px;}
.settingsRow{display:grid; grid-template-columns: 1fr 1fr; gap:10px; align-items:center; font-size:12px; color: rgba(255,255,255,.85);}
.settingsRow select{
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}

.settingsRow select option{background:#0e0e12; color:rgba(255,255,255,.92);}

/* Collapsed states */
.st-animator.is-sidebar-collapsed{grid-template-columns: 1fr;}
.st-animator.is-sidebar-collapsed .st-animator__main{grid-template-columns: 0 1fr;}
.st-animator.is-sidebar-collapsed .st-animator__sidebar{display:none;}

.st-animator.is-inspector-collapsed .st-animator__split{grid-template-columns: 0 8px 1fr;}
.st-animator.is-inspector-collapsed #inspector{display:none;}
.st-animator.is-inspector-collapsed #splitter{display:none;}


/* ===== Visual polish (Phase 1) ===== */
.panelHeader{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.panelTitle{letter-spacing:.2px;}
.sectionTitle{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  font-size: 11px;
  color: rgba(255,255,255,.72);
}
.btn, .iconBtn{
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.btn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.btn:active{transform: translateY(1px);}
.iconBtn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.item{
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.item:active{transform: translateY(1px);}
.list{gap:8px;}
.divider{opacity:.9;}
/* Better focus */
.btn:focus-visible, .iconBtn:focus-visible, .item:focus-visible, select:focus-visible, input:focus-visible{
  outline: 2px solid rgba(120,180,255,.55);
  outline-offset: 2px;
}
/* Scrollbar (webkit) */
*::-webkit-scrollbar{height:10px;width:10px;}
*::-webkit-scrollbar-track{background: rgba(255,255,255,.04); border-radius:10px;}
*::-webkit-scrollbar-thumb{background: rgba(255,255,255,.16); border-radius:10px; border:2px solid rgba(0,0,0,.0);}
*::-webkit-scrollbar-thumb:hover{background: rgba(255,255,255,.24);}
/* Timeline readability */
.st-animator__timeline .trackName{font-weight:800; color: rgba(255,255,255,.92);}
.st-animator__timeline .kfBtn{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);}
.st-animator__timeline .kfBtn:hover{background: rgba(255,255,255,.10);}

.st-animator.isTimelineHidden{--timeline-h:0px; --timeline-resizer-h:0px;}

.timelineResizer{
  height: var(--timeline-resizer-h);
  cursor: row-resize;
  background: rgba(255,255,255,.035);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(0,0,0,.35);
}
.timelineResizer:hover{ background: rgba(255,255,255,.06); }
.timelineResizer.isDragging{ background: rgba(255,255,255,.08); }


/* Timeline collapse */
.st-animator.timelineHidden{ --timeline-h: 0px; --timeline-resizer-h: 0px; }
.st-animator.timelineHidden .st-animator__timeline{ display:none; }
.st-animator.timelineHidden #timelineResizer{ display:none; }

body.noSelect{ user-select:none; cursor:ns-resize; }


.timelineEmpty{padding:14px 12px;color:rgba(255,255,255,.55);font-size:12px;}

/* 2.5-B: custom interpolation dropdown (stays open until click outside) */
.interpDD{position:relative;display:inline-block;}
.interpBtn{
  cursor:pointer;
  user-select:none;
  min-width:140px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.92);
  font-size:12px;
  text-align:left;
}
.interpBtn:after{content:"▾";float:right;opacity:.75;}
.interpMenu{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:180px;
  z-index:9999;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(10,10,10,0.96);
  box-shadow:0 12px 32px rgba(0,0,0,0.55);
  padding:6px;
}
.interpItem{
  width:100%;
  text-align:left;
  border:0;
  border-radius:10px;
  padding:8px 10px;
  background:transparent;
  color:rgba(255,255,255,0.92);
  font-size:12px;
  cursor:pointer;
}
.interpItem:hover{background:rgba(255,255,255,0.07);}
.interpItem.isActive{background:rgba(255,255,255,0.11);}


/* =========================================================
   Window+Train Timeline (virtual time ruler + lanes)
   - No layout stretching by "1 hour width"
   - Zoom via secondsVisible, pan via startSec
========================================================= */
.wtTimeline{display:flex; flex-direction:column; gap:10px; min-height:0; position:relative;}
.wtGrid{
  display:grid;
  grid-template-columns: 220px 1fr;
  grid-auto-rows: 38px;
  gap: 8px 10px;
  align-items:stretch;
}
.wtSpacer{border-radius:12px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.08);}
.wtRulerCell{border-radius:12px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.10); overflow:hidden;}
.wtRulerViewport{
  position:relative;
  height: 38px;
  width:100%;
  overflow:hidden;
  cursor: grab;
}
.wtRulerViewport.isDragging{cursor: grabbing;}
.wtRulerCanvas{position:absolute; inset:0;}
.wtPlayhead{
  position:absolute;
  top:0; bottom:0;
  width:2px;
  background:rgba(255,255,255,.65);
  box-shadow:0 0 0 1px rgba(0,0,0,.65);
  cursor: ew-resize;
}
.wtPlayhead::after{
  content:"";
  position:absolute;
  top:0;
  left:-6px;
  width:14px; height:14px;
  border-radius:10px;
  background:rgba(255,255,255,.80);
  box-shadow:0 0 0 1px rgba(0,0,0,.75);
}
.wtPlayhead.isDragging{opacity:.95;}

.wtLabelCell{
  border: var(--border);
  background: color-mix(in oklab, var(--panel2) 90%, black 10%);
  border-radius: 14px;
  padding: 8px 10px;
  display:flex;
  align-items:center;
}
.wtLabelTop{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;}
.wtTrackName{font-size:12px; font-weight:700; opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wtKfBtns{display:flex; align-items:center; gap:6px;}
.wtAddKfBtn{
  width:28px; height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  user-select:none;
}
.wtAddKfBtn:hover{background: rgba(255,255,255,.10);}
.wtAddKfBtn:active{transform: translateY(1px);}

.wtDelKfBtn{
  width:28px; height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  user-select:none;
}
.wtDelKfBtn:hover{background: rgba(255,255,255,.10);}
.wtDelKfBtn:active{transform: translateY(1px);}

.wtLaneCell{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
  border-radius: 14px;
  overflow:hidden;
}
.wtLaneViewport{
  position:relative;
  height: 38px;
  overflow:hidden;
}
.wtLaneViewport::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0,
    rgba(255,255,255,.05) 1px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0) 32px
  );
  pointer-events:none;
  opacity:.28;
}

.wtMarker{
  position:absolute;
  top:50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
  border:1px solid rgba(0,0,0,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55);
  cursor: grab;
}
.wtMarker.isActive{background: rgba(70, 220, 140, .95);}
.wtMarker.isInactive{background: rgba(235, 80, 80, .95);}
.wtMarker.isSelected{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}
.wtMarker.isDragging{cursor: grabbing; opacity:.95;}

.wtPairLine{
  position:absolute;
  top:50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(70, 220, 140, .85);
  border-radius: 999px;
  pointer-events:none;
}

.wtHScroll{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 6px 2px 2px;
}
.wtHScroll input[type="range"]{flex:1;}
.wtRangeLabel{
  font-size: 11px;
  opacity:.75;
  white-space:nowrap;
  min-width: 160px;
  text-align:right;
}


/* Global playhead line (covers ruler + all lanes) */
.wtPlayheadGlobal{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.65);
  pointer-events:none;
  z-index: 50;
}

/* Animator controls – unified timeline style */
.animator-controls button,
#btnPlay,#btnStop,#btnReverse,#btnToStart{
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:14px;
  cursor:pointer;
}
.animator-controls button:hover{
  background:rgba(255,255,255,.15);
}
.animator-controls button:active{
  transform:translateY(1px);
}

/* Time label style */
#timeLabel{
  font-size:12px;
  font-weight:600;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.1);
}


/* ===== Animator header buttons (Timeline style) ===== */
.st-animator__header .btn.tlBtn{
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.st-animator__header .btn.tlBtn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
.st-animator__header .btn.tlBtn:active{ transform: translateY(1px); }
.st-animator__header .btn.tlBtn.primary{
  border-color: rgba(70,220,140,.40);
  background: rgba(70,220,140,.18);
}

/* Time label chip (like timeline time chip) */
.st-animator__header .pill.timeChip{
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.70);
}

/* Make the Window+Train ruler look closer to the demo */
.wtRulerCell{ background: rgba(255,255,255,.03); }
.wtRulerViewport{ background: rgba(255,255,255,.02); }
.wtRulerViewport::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
  pointer-events:none;
}


/* STAGE2 TRANSPORT OVERRIDES */
#timelineTransport .btn{
      height:34px;
      padding:0 12px;
      border-radius:10px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      color:var(--text);
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:8px;
      user-select:none;
      white-space:nowrap;
    }
#timelineTransport .btn:hover{ border-color: var(--border2); background: rgba(255,255,255,.06); }
#timelineTransport .btn:active{ transform: translateY(1px); }

/* Transport: ensure play/stop show icons even when i18n replaces textContent */
#timelineTransport #btnPlay, 
#timelineTransport #btnStop{
  min-width: 92px;
  justify-content: center;
}
#timelineTransport .btn.primary{
      border-color: rgba(34,197,94,.35);
      background: rgba(34,197,94,.14);
    }
#timelineTransport .timeChip{
      height:34px;
      border-radius:10px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      padding:0 10px;
      display:flex;
      align-items:center;
      color:var(--muted);
      white-space:nowrap;
      font-variant-numeric: tabular-nums;
    }
#timelineTransport .spacer{ flex:1 1 auto; min-width:0; }
#timelineTransport{display:flex; align-items:center; gap:10px; flex-wrap:nowrap; white-space:nowrap;}
#timelineTransport .btn{line-height:1;}



/* --- Stage2 transport: equal width for Play/Stop (UA labels) --- */
#timelineTransport #btnPlay,
#timelineTransport #btnStop{
  min-width: 72px;
  justify-content: center;
}



/* === Transport icons + tints (scoped) === */
#timelineTransport .btnIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  font-size:14px;
  line-height:1;
  opacity:.92;
}
#timelineTransport .btnText{
  display:inline-block;
  min-width:0;
}

/* greenish Play */
#timelineTransport #btnPlay{
  background: rgba(46, 204, 113, 0.18);
  border-color: rgba(46, 204, 113, 0.35);
}
#timelineTransport #btnPlay:hover{
  background: rgba(46, 204, 113, 0.24);
  border-color: rgba(46, 204, 113, 0.45);
}
#timelineTransport #btnPlay:active{
  background: rgba(46, 204, 113, 0.14);
}

/* reddish Stop */
#timelineTransport #btnStop{
  background: rgba(231, 76, 60, 0.16);
  border-color: rgba(231, 76, 60, 0.34);
}
#timelineTransport #btnStop:hover{
  background: rgba(231, 76, 60, 0.22);
  border-color: rgba(231, 76, 60, 0.44);
}
#timelineTransport #btnStop:active{
  background: rgba(231, 76, 60, 0.12);
}


/* timeline transport (final) */
#timelineTransport{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
#timelineTransport .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
}
#timelineTransport #btnPlay,
#timelineTransport #btnStop{
  min-width: 92px;
}



/* === Transport buttons FINAL OVERRIDES (keep icons + spacing) === */
#timelineTransport{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}
#timelineTransport .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-width:96px !important;
  padding:8px 14px !important;
  white-space:nowrap !important;
}
#timelineTransport .btn .btnIcon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  font-size:16px !important;
  line-height:1 !important;
}
#timelineTransport #btnPlay.btn{ background:rgba(41, 140, 92, 0.22) !important; }
#timelineTransport #btnStop.btn{ background:rgba(176, 68, 78, 0.22) !important; }
#timelineTransport #btnPlay.btn:hover{ background:rgba(41, 140, 92, 0.3) !important; }
#timelineTransport #btnStop.btn:hover{ background:rgba(176, 68, 78, 0.3) !important; }