:root{
    --amber:#E8A33D;
    --cyan:#4FC9BB;
    --line:#2A2E33;
  }
  html{scroll-behavior:smooth;}
  body{background:#0B0D10;}
  ::selection{background:var(--amber); color:#0B0D10;}

  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:3px;
    border-radius:2px;
  }

  .filmstrip{
    height:22px;
    background-image:
      repeating-linear-gradient(90deg, transparent 0 10px, rgba(232,163,61,0.55) 10px 16px, transparent 16px 26px);
    background-position:center;
    opacity:.35;
    mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }

  .viewfinder{position:relative;}
  .viewfinder::before, .viewfinder::after,
  .viewfinder .vf-tl, .viewfinder .vf-tr, .viewfinder .vf-bl, .viewfinder .vf-br{content:'';}
  .vf-corner{
    position:absolute; width:16px; height:16px;
    border-color:var(--amber);
    opacity:.55;
    transition:opacity .25s ease, width .25s ease, height .25s ease;
    pointer-events:none;
  }
  .viewfinder:hover .vf-corner{opacity:1; width:20px; height:20px;}
  .vf-tl{top:8px; left:8px; border-top:2px solid; border-left:2px solid;}
  .vf-tr{top:8px; right:8px; border-top:2px solid; border-right:2px solid;}
  .vf-bl{bottom:8px; left:8px; border-bottom:2px solid; border-left:2px solid;}
  .vf-br{bottom:8px; right:8px; border-bottom:2px solid; border-right:2px solid;}

  .tab-btn{position:relative;}
  .tab-btn[data-active="true"]{color:var(--amber);}
  .tab-btn[data-active="true"]::after{
    content:'';
    position:absolute; left:0; right:0; bottom:-9px; height:2px;
    background:var(--amber);
  }

  .clip-card{transition:transform .3s ease, box-shadow .3s ease;}
  .clip-card:hover{transform:translateY(-4px);}

  .rec-dot{
    width:7px; height:7px; border-radius:999px; background:var(--amber);
    box-shadow:0 0 0 0 rgba(232,163,61,.6);
    animation:recpulse 2.2s ease-out infinite;
  }
  @keyframes recpulse{
    0%{box-shadow:0 0 0 0 rgba(232,163,61,.45);}
    70%{box-shadow:0 0 0 8px rgba(232,163,61,0);}
    100%{box-shadow:0 0 0 0 rgba(232,163,61,0);}
  }

  .play-glyph{
    width:52px; height:52px; border-radius:999px;
    background:rgba(11,13,16,.55);
    border:1px solid rgba(244,241,234,.35);
    backdrop-filter:blur(2px);
    transition:transform .25s ease, background .25s ease, border-color .25s ease;
  }
  .clip-card:hover .play-glyph{transform:scale(1.08); border-color:var(--amber);}

  .aspect-9-16{aspect-ratio:9/16;}
  .aspect-16-9{aspect-ratio:16/9;}

  .marquee-mask{
    overflow:hidden;
    mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  }
  .marquee-track{
    display:flex;
    width:max-content;
    animation:marquee-scroll 32s linear infinite;
  }
  .marquee-track:hover{animation-play-state:paused;}
  @keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .rec-dot{animation:none;}
    .clip-card, .clip-card:hover{transform:none; transition:none;}
    .marquee-track{animation:none;}
    .marquee-mask{overflow-x:auto;}
  }

  ::-webkit-scrollbar{width:10px; height:10px;}
  ::-webkit-scrollbar-track{background:#0B0D10;}
  ::-webkit-scrollbar-thumb{background:#2A2E33; border-radius:999px;}