:root {
  --scene-tint:rgba(120,100,70,.06); --scene-line:#c3b49a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --scene-tint:rgba(255,238,205,.038); --scene-line:#544c3e;
  }
}

/* Scene markers + banding — a scene reads as one tinted band running from its
   start marker down through its messages to the end marker, tied together by a
   left rail (--scene-line). The feed lays items out with a flex gap, so each
   item inside a scene draws a ::before sliver that fills the gap above it,
   keeping the rail unbroken from marker to marker. */
.scene-marker { display:flex; align-items:center; gap:.45rem; padding:.3rem .5rem .3rem .4rem; border-radius:0 3px 3px 0;
  background:var(--bg2); border:1px solid var(--border); border-left:2px solid var(--scene-line); color:var(--text2); flex-shrink:0; }
.scene-toggle { background:none; border:none; color:var(--accent); cursor:pointer; font-size:10px; padding:.1rem .3rem; border-radius:4px; flex-shrink:0; line-height:1; }
.scene-toggle:hover { background:var(--bg3); }
.scene-icon { flex-shrink:0; font-size:11px; opacity:.75; }
.scene-label { flex:1; font-size:12.5px; font-style:italic; color:var(--text2); }
.scene-edit { opacity:0; background:none; border:none; color:var(--text3); font-size:12px; cursor:pointer; padding:.1rem .3rem; border-radius:4px; }
.scene-marker:hover .scene-edit { opacity:1; }
.scene-edit:hover { background:var(--bg3); color:var(--text); }
.scene-marker-end { position:relative; background:none; border:none; border-left:2px solid var(--scene-line);
  border-top:1px dashed var(--border); border-radius:0; padding:.25rem .5rem .05rem .5rem; }
.scene-end-label { text-align:center; color:var(--text3); font-size:10px; }