:root{
      --bar-h: 44px;
      --pad-x: 14px;
      --tick-area-h: 18px;
      --label-h: 18px;
      --glass: rgba(20, 26, 28, .55);
      --glass-2: rgba(20, 26, 28, .35);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --line: rgba(255,255,255,.85);
      --line-muted: rgba(255,255,255,.35);
      --shadow: 0 10px 20px rgba(0,0,0,.25);
    }

    .timelinedate {
      position:fixed;
      left: 40px;
      /*right: 40px;*/
      bottom: 70px;
      height: var(--bar-h);
      padding: 8px var(--pad-x);
      border-radius: 10px;
      background: linear-gradient(180deg, var(--glass), var(--glass-2));
      box-shadow: var(--shadow);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      user-select:none;
      touch-action:none; /* important for drag on mobile */
    }

    .timeline {
      position:fixed;
      left: 40px;
      right: 40px;
      bottom: 24px;
      height: var(--bar-h);
      padding: 8px var(--pad-x);
      border-radius: 10px;
      background: linear-gradient(180deg, var(--glass), var(--glass-2));
      box-shadow: var(--shadow);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      user-select:none;
      touch-action:none; /* important for drag on mobile */
    }

    .track {
      position:relative;
      height:100%;
    }

    /* Tick row (marks) */
    .ticks {
      position:absolute;
      left:0; right:0;
      top: 6px;
      height: var(--tick-area-h);
    }

    .tick {
      position:absolute;
      top:0;
      width:1px;
      background: var(--line-muted);
      transform: translateX(-0.5px);
    }
    .tick.major { height: 14px; background: rgba(255,255,255,.55); }
    .tick.minor { height: 8px;  }

    /* Labels row */
    .labels {
      position:absolute;
      left:0; right:0;
      bottom: 0px;
      height: var(--label-h);
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .2px;
    }
    .label {
      position:absolute;
      bottom:0;
      transform: translateX(-50%);
      white-space:nowrap;
      pointer-events:none;
    }

    /* Playhead */
    .playhead {
      position:absolute;
      top: 2px;
      bottom: 4px;
      width: 2px;
      background: var(--line);
      transform: translateX(-1px);
      pointer-events:none;
    }

    /* Draggable knob (wider hitbox) */
    .knob {
      position:absolute;
      top: -2px;
      width: 22px;
      height: 100%;
      transform: translateX(-11px);
      cursor: grab;
      pointer-events:auto;
      outline:none;
    }
    .knob:active { cursor: grabbing; }

    /* Bubble tooltip */
    .bubble {
      position:absolute;
      top: -34px;
      transform: translateX(-50%);
      padding: 6px 10px;
      font-size: 12px;
      color: var(--text);
      background: rgba(0,0,0,.70);
      border-radius: 8px;
      white-space: nowrap;
      box-shadow: 0 6px 16px rgba(0,0,0,.25);
      pointer-events:none;
    }
    .bubble:after{
      content:"";
      position:absolute;
      left:50%;
      bottom:-6px;
      transform: translateX(-50%);
      width:0;height:0;
      border-left:6px solid transparent;
      border-right:6px solid transparent;
      border-top:6px solid rgba(0,0,0,.70);
    }

    /* Optional: subtle “progress” fill to the left of playhead */
    .fill {
      position:absolute;
      top: 6px;
      bottom: 6px;
      left:0;
      background: rgba(255,255,255,.08);
      border-radius: 6px;
      pointer-events:none;
      width:0;
    }

    .hint{
      position:fixed;
      left:40px;
      bottom: calc(24px + var(--bar-h) + 10px);
      color: rgba(255,255,255,.65);
      font-size: 12px;
    }