/* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: monospace;
      background: #fff;
      overflow: hidden;
      height: 100vh;
      width: 100vw;
    }

    /* ══════════════════════════════════════════
       UPLOAD SCREEN
    ══════════════════════════════════════════ */
    #upload-screen {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 10;
      background: #fff;
    }

    #drop-zone {
      border: 1px dashed #ccc;
      width: min(440px, 90vw);
      padding: 3.5rem 2rem;
      text-align: center;
      cursor: pointer;
      transition: border-color 150ms ease, background 150ms ease;
      position: relative;
      user-select: none;
    }

    #drop-zone.drag-over {
      border-color: #000;
      background: rgba(0, 0, 0, 0.02);
    }

    #drop-zone input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
    }

    #drop-zone-label {
      font-size: 12px;
      color: #aaa;
      line-height: 2.2;
      pointer-events: none;
    }

    #drop-zone-label strong {
      display: block;
      font-size: 13px;
      color: #333;
      margin-bottom: 0.4rem;
      letter-spacing: 0.02em;
    }

    /* Options panel */
    #options {
      margin-top: 2rem;
      width: min(440px, 90vw);
      font-size: 12px;
    }

    .option-group { margin-bottom: 1.4rem; }

    .option-group-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #bbb;
      margin-bottom: 0.6rem;
    }

    .radio-row,
    .checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
      margin-bottom: 0.4rem;
      cursor: pointer;
      color: #555;
      line-height: 1.5;
    }

    .radio-row input,
    .checkbox-row input {
      margin-top: 2px;
      accent-color: #000;
      cursor: pointer;
      flex-shrink: 0;
    }

    .radio-row label,
    .checkbox-row label { cursor: pointer; }

    #file-count {
      font-size: 11px;
      color: #bbb;
      margin-bottom: 1rem;
      min-height: 1.4em;
      letter-spacing: 0.02em;
    }

    #begin-btn {
      display: none;
      font-family: monospace;
      font-size: 12px;
      background: #000;
      color: #fff;
      border: none;
      padding: 0.65rem 1.6rem;
      cursor: pointer;
      letter-spacing: 0.06em;
      transition: background 150ms ease;
    }

    #begin-btn:hover { background: #333; }

    /* ══════════════════════════════════════════
       TIMELINE SCREEN
    ══════════════════════════════════════════ */
    #timeline-screen {
      position: fixed;
      inset: 0;
      display: none;
      background: #fff;
    }

    /* Center preview container */
    #preview-container {
      position: absolute;
      inset: 0 0 3rem 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #fff;
    }

    /* Empty state hint */
    #empty-hint {
      font-size: 11px;
      color: #ddd;
      letter-spacing: 0.05em;
      position: absolute;
      pointer-events: none;
      z-index: 1;
    }

    /* Media elements */
    #preview-img,
    #preview-video {
      max-height: 75vh;
      max-width: 90vw;
      object-fit: contain;
      position: absolute;
      opacity: 0;
      transition: opacity 100ms ease-in-out;
      display: block;
      /*
        Corner-dominant edge fade — matches the reference:
        Two linear gradients intersected. At corners both are fading → full
        transparency. At edge midpoints only one fades → gentle fade.
        The result is a soft rounded-rectangle window aligned to the image bounds.
      */
      -webkit-mask-image:
        linear-gradient(to right,  transparent 0%, rgba(0,0,0,0.45) 9%, black 21%, black 79%, rgba(0,0,0,0.45) 91%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 9%, black 21%, black 79%, rgba(0,0,0,0.45) 91%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to right,  transparent 0%, rgba(0,0,0,0.45) 9%, black 21%, black 79%, rgba(0,0,0,0.45) 91%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 9%, black 21%, black 79%, rgba(0,0,0,0.45) 91%, transparent 100%);
      mask-composite: intersect;
      mask-size: 100% 100%;
    }

    /*
      Residual vignette — very subtle, just softens the outermost pixel ring
      so the masked image boundary doesn't produce a faint hard edge on some
      displays. Pointer-events off so hover still reaches the scrubber.
    */
    #vignette {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      background: radial-gradient(
        ellipse 90% 85% at center,
        transparent 60%,
        rgba(255, 255, 255, 0.18) 78%,
        rgba(255, 255, 255, 0.55) 89%,
        white 100%
      );
    }

    /* Metadata panel — bottom-left, above scrubber */
    #metadata-panel {
      position: absolute;
      bottom: 3.75rem;
      left: 1.4rem;
      font-family: monospace;
      font-size: 12px;
      color: #777;
      line-height: 1.75;
      pointer-events: none;
      z-index: 3;
      opacity: 0;
      transition: opacity 220ms ease;
    }

    #metadata-panel.visible { opacity: 1; }

    #m-age {
      color: #111;
      font-size: 13px;
      letter-spacing: -0.02em;
    }

    #m-index { color: #bbb; }


    /* Scrubber strip */
    #scrubber {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3.75rem;
      display: flex;
      align-items: center;
      padding: 0 1.4rem;
      gap: 2px;
      overflow-x: auto;
      overflow-y: hidden;
      background: #fff;
      scrollbar-width: none;
      z-index: 4;
    }

    #scrubber::-webkit-scrollbar { display: none; }

    .bar {
      flex: 0 0 1.5rem;
      height: 3rem;
      background: #e0e0e0;
      border-radius: 4px;
      cursor: pointer;
      transition: 80ms ease, transform 100ms ease;
      will-change: transform;
      overflow: hidden;
      margin: 0.1rem;
      position: relative;
    }

    .bar-thumb {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }

    .bar:hover {
      background: #aaa;
      flex: 0 0 3rem;
      opacity: 50%;
    }

    .bar.active          { background: #111; }
    .bar.active:hover    { background: #111; }

    /* Back link */
    #back-btn {
      position: fixed;
      bottom: 3.75rem;
      right: 1.4rem;
      font-family: monospace;
      font-size: 11px;
      color: #ccc;
      cursor: pointer;
      z-index: 5;
      letter-spacing: 0.04em;
      border: none;
      background: none;
      padding: 0;
      transition: color 150ms;
    }

    #back-btn:hover { color: #999; }