:root{
    --bg:#1a1a1f; --panel:#131317; --track:#2a2a30;
    --tick:#4a4a50; --tickMajor:#777;
    --yellow:#ffcc00; --yellow-2:#ffd54d; --muted:#8b8b95;
  }

  body{margin:0; background:var(--panel); color:#eee; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif}
  .wrap{max-width:960px; margin:24px auto; padding:0 0px}

  .row{display:flex; align-items:center; gap:8px; margin-bottom:12px}
  .row input[type=file]{color:#ddd}
  .muted{color:var(--muted)}

  /* Timeline shell */
  .timeline{
    position:relative;
    height:94px;
    border-radius:12px;
    background:linear-gradient(#18181d,#121218);
    box-shadow:inset 0 0 0 1px #25252b, 0 6px 24px rgba(0,0,0,.25);
    overflow:hidden;
    user-select:none;
  }

  /* ticks at top */
  .ticks{
    position:absolute; left:16px; right:16px; top:8px; height:12px; pointer-events:none;
    mask-image: linear-gradient(to right, transparent 0px, black 12px, black calc(100% - 12px), transparent 100%);
  }
  .ticks::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(to right, var(--tick) 0, var(--tick) 1px, transparent 1px, transparent 10px);
    opacity:.75;
  }
  .ticks::after{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(to right, var(--tickMajor) 0, var(--tickMajor) 2px, transparent 2px, transparent 100px);
    mix-blend-mode:screen; opacity:.9;
  }

  /* filmstrip track */
  .track{
    position:absolute; left:16px; right:16px; top:24px; bottom:16px;
    background:var(--track); border-radius:10px; overflow:hidden;
  }
  .thumbs{position:absolute; inset:0; display:flex}
  .thumbs img{display:block; height:100%; object-fit:cover; flex:0 0 auto; filter:saturate(.95) contrast(1.05)}

  /* dim region before cut (left) */
  .precut-dim{
    position:absolute; top:24px; bottom:16px; left:16px;
    background:linear-gradient( to right, rgba(0,0,0,.45), rgba(0,0,0,.25) );
    pointer-events:none; border-radius:10px 0 0 10px;
  }

  /* selection highlight (transparent interior so thumbs stay visible) */
  .sel{
    position:absolute; top:24px; height:54px;
    background:rgba(255,204,0,0.20);      /* light overlay – set to 0 for border-only */
    border:3px solid var(--yellow);       /* strong border */
    border-radius:10px;
    box-shadow:0 0 10px rgba(255,204,0,.35);
    cursor:default;
  }
  .handle{
    position:absolute; right:-6px; top:8px; width:12px; height:38px;
    background:var(--yellow-2); border:2px solid #111; border-radius:8px;
    box-shadow:0 1px 0 rgba(0,0,0,.25);
    cursor:ew-resize; display:grid; place-items:center; font-size:16px; color:#111; font-weight:800;
  }

  /* cut line + scissors */
  .cutline{
    position:absolute; top:6px; bottom:10px; width:0; border-left:2px dashed rgba(255,255,255,.65); pointer-events:none;
  }
  .scissors{
    position:absolute; top:-2px; transform:translate(-50%,0); pointer-events:none; font-size:18px;
  }
  .badge{
    position:absolute; top:16px; /* aligned above selection end */
    background:var(--yellow); color:#111; font-weight:700; font-size:12px; padding:4px 8px; border-radius:8px;
    box-shadow:0 2px 0 rgba(0,0,0,.35); pointer-events:none;
    transform:translate(-50%,-75%); /* place above the end */
  }