:root{
    --bg: #17140f;
    --bg-soft: #1f1b15;
    --paper: #ece5d6;
    --paper-dim: #b8ae99;
    --safelight: #c23b2b;
    --safelight-dim: #7a2a20;
    --amber: #d99a3c;
    --sprocket: #0e0c09;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      radial-gradient(ellipse at top, #221d16 0%, var(--bg) 60%);
    color:var(--paper);
    font-family:'IBM Plex Mono', monospace;
    min-height:100vh;
    padding-bottom:60px;
  }

  /* Header */
  @keyframes headerIn{
    from{opacity:0; transform:translateY(-14px);}
    to{opacity:1; transform:translateY(0);}
  }
  header{
    padding:36px 20px 22px;
    text-align:center;
    border-bottom:1px solid #332c22;
    animation:headerIn .5s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes safelightPulse{
    0%,100%{opacity:1;}
    50%{opacity:0.5;}
  }
  .kicker{
    font-size:11px;
    letter-spacing:0.35em;
    color:var(--safelight);
    text-transform:uppercase;
    margin-bottom:10px;
    animation:safelightPulse 2.4s ease-in-out infinite;
  }
  h1{
    font-family:'Bebas Neue', sans-serif;
    font-size:clamp(38px,8vw,64px);
    letter-spacing:0.04em;
    margin:0;
    color:var(--paper);
    line-height:0.95;
  }
  h1 span{color:var(--amber);}
  .sub{
    font-size:12px;
    color:var(--paper-dim);
    margin-top:10px;
    letter-spacing:0.02em;
  }

  /* Upload bar */
  .filmstrip-controls{
    max-width:1000px;
    margin:26px auto 0;
    padding:0 20px;
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
  }
  .btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    background:var(--safelight);
    color:#1a1410;
    border:none;
    padding:12px 20px;
    border-radius:2px;
    cursor:pointer;
    font-weight:600;
    transition:transform .15s ease, background .15s ease;
  }
  .btn:hover{background:var(--amber); transform:translateY(-1px);}
  .btn:active{transform:scale(0.95);}
  .btn:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
  input[type=file]{display:none;}
  .count-tag{
    font-size:11px;
    color:var(--paper-dim);
    letter-spacing:0.1em;
  }
  .status{
    font-size:11px;
    color:var(--amber);
    letter-spacing:0.05em;
    min-height:14px;
  }
  @keyframes statusIn{
    from{opacity:0; transform:translateY(-3px);}
    to{opacity:1; transform:translateY(0);}
  }
  .status:not(:empty){
    animation:statusIn .2s ease;
  }

  /* Film strip gallery */
  .roll{
    max-width:1000px;
    margin:30px auto;
    padding:0 20px;
  }
  .strip{
    background:
      radial-gradient(ellipse at 50% 0%, rgba(217,154,60,0.07), transparent 55%),
      radial-gradient(ellipse at 50% 100%, rgba(217,154,60,0.05), transparent 55%),
      linear-gradient(180deg, #211a13 0%, #0d0a07 12%, #0a0806 50%, #0d0a07 88%, #211a13 100%);
    border-radius:6px;
    padding:20px 0;
    position:relative;
    overflow:hidden;
    border-top:1px solid rgba(217,154,60,0.1);
    border-bottom:1px solid rgba(217,154,60,0.1);
    box-shadow:
      inset 0 0 50px rgba(0,0,0,0.7),
      inset 0 1px 0 rgba(255,255,255,0.04),
      0 10px 30px rgba(0,0,0,0.45);
  }
  .strip::before{
    content:'';
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:0.05;
    mix-blend-mode:overlay;
    pointer-events:none;
  }
  .strip::after{
    content:'';
    position:absolute; inset:0;
    background:repeating-linear-gradient(115deg, transparent 0 42px, rgba(255,255,255,0.025) 43px, transparent 44px 92px);
    pointer-events:none;
  }
  .sprockets{
    position:absolute;
    left:0; right:0;
    height:14px;
    display:flex;
    justify-content:space-around;
    padding:0 14px;
    z-index:1;
  }
  .sprockets.top{top:6px;}
  .sprockets.bottom{bottom:6px;}
  .sprockets span{
    width:10px;height:7px;
    background:linear-gradient(180deg, #040302, #000);
    border-radius:2px;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.1),
      inset 0 -2px 2px rgba(0,0,0,0.9),
      0 0 5px rgba(217,154,60,0.15);
  }
  .frames{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
    gap:14px;
    padding:22px 20px;
    position:relative;
    z-index:1;
    background:radial-gradient(ellipse at center, rgba(217,154,60,0.04), transparent 70%);
  }
  @keyframes frameIn{
    from{opacity:0; transform:translateY(10px) scale(0.94);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }
  @keyframes frameOut{
    to{opacity:0; transform:scale(0.82) rotate(-3deg);}
  }
  @keyframes develop{
    from{filter:sepia(0.75) brightness(0.55) contrast(1.15); opacity:0.4;}
    to{filter:sepia(0.08) contrast(1.03); opacity:1;}
  }
  .frame{
    background:#0b0a08;
    border:1px solid #2a241c;
    position:relative;
    cursor:pointer;
    aspect-ratio:1/1;
    overflow:hidden;
    transition:transform .18s ease, border-color .18s ease;
    animation:frameIn .45s cubic-bezier(.2,.8,.2,1) both;
  }
  .frame.removing{
    animation:frameOut .25s ease forwards;
    pointer-events:none;
  }
  .frame:hover{transform:scale(1.03); border-color:var(--safelight);}
  .frame:hover img{transform:scale(1.06);}
  .frame img{
    width:100%;height:100%;object-fit:cover;
    filter:sepia(0.08) contrast(1.03);
    transition:transform .3s ease;
    animation:develop .6s ease both;
  }
  .frame-num{
    position:absolute;
    bottom:0; left:0; right:0;
    font-size:10px;
    color:var(--amber);
    background:linear-gradient(transparent, rgba(0,0,0,0.75) 40%);
    padding:14px 6px 5px;
    letter-spacing:0.08em;
  }
  .delete-x{
    position:absolute;
    top:4px; right:4px;
    width:20px;height:20px;
    background:rgba(20,16,12,0.85);
    color:var(--safelight);
    border:1px solid var(--safelight-dim);
    border-radius:2px;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;
    cursor:pointer;
    opacity:0;
    transform:scale(0.8);
    transition:opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease;
  }
  .frame:hover .delete-x{opacity:1; transform:scale(1);}
  .delete-x:hover{background:var(--safelight); color:#1a1410;}
  .play-badge{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:42px;height:42px;
    border-radius:50%;
    background:rgba(10,8,6,0.55);
    border:1px solid rgba(236,229,214,0.35);
    color:var(--paper);
    display:flex;align-items:center;justify-content:center;
    font-size:15px;
    padding-left:3px;
    pointer-events:none;
    backdrop-filter:blur(2px);
    transition:transform .18s ease, background .18s ease, color .18s ease;
  }
  .frame:hover .play-badge{
    transform:translate(-50%,-50%) scale(1.12);
    background:var(--safelight);
    color:#1a1410;
  }

  /* Empty state */
  @keyframes reelSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  @keyframes emptyIn{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
  }
  .empty{
    text-align:center;
    padding:70px 20px;
    color:var(--paper-dim);
    animation:emptyIn .4s ease both;
  }
  .empty .reel{
    display:inline-block;
    font-size:38px;
    margin-bottom:14px;
    color:var(--safelight-dim);
    animation:reelSpin 6s linear infinite;
  }
  .empty p{font-size:13px; letter-spacing:0.03em; max-width:340px; margin:6px auto 0;}

  /* Lightbox */
  .lightbox{
    position:fixed; inset:0;
    background:rgba(10,8,6,0.94);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:30px;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility 0s linear .25s;
  }
  .lightbox.open{
    opacity:1;
    visibility:visible;
    transition:opacity .25s ease, visibility 0s linear;
  }
  .lightbox img, .lightbox video{
    max-width:90vw; max-height:80vh;
    border:1px solid #3a3226;
    box-shadow:0 20px 60px rgba(0,0,0,0.6);
    transform:scale(0.92) translateY(8px);
    transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .15s ease;
    background:#000;
  }
  .lightbox video{display:none;}
  .lightbox.open img, .lightbox.open video{transform:scale(1) translateY(0);}
  .lightbox-close{
    position:absolute;
    top:22px; right:26px;
    color:var(--paper);
    font-size:26px;
    cursor:pointer;
    background:none;
    border:1px solid #3a3226;
    width:40px;height:40px;
    border-radius:2px;
    transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .lightbox-close:hover{background:var(--safelight); color:#1a1410; transform:rotate(90deg);}
  .lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:var(--paper);
    font-size:30px;
    line-height:1;
    cursor:pointer;
    background:rgba(20,16,12,0.55);
    border:1px solid #3a3226;
    width:48px;height:48px;
    border-radius:2px;
    display:flex;align-items:center;justify-content:center;
    transition:transform .15s ease, background .15s ease, color .15s ease, opacity .15s ease;
  }
  .lightbox-nav.prev{left:18px;}
  .lightbox-nav.next{right:18px;}
  .lightbox-nav:hover{background:var(--safelight); color:#1a1410;}
  .lightbox-nav.prev:hover{transform:translateY(-50%) translateX(-3px);}
  .lightbox-nav.next:hover{transform:translateY(-50%) translateX(3px);}
  @media (max-width:640px){
    .lightbox-nav{width:38px;height:38px; font-size:24px;}
    .lightbox-nav.prev{left:6px;}
    .lightbox-nav.next{right:6px;}
  }
  .lightbox-meta{
    position:absolute;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    font-size:11px;
    color:var(--amber);
    letter-spacing:0.1em;
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important;}
  }