:root{
      --bg:#f7f7f7;
      --accent:#111827;
      --overlay: rgba(0,0,0,0.9);
      --white: #ffffff;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      background:var(--bg);
      color:var(--accent);
    
    }

    h1{
      text-align:center;
      margin:6px 0 18px;
      font-weight:600;
    }

    /* FLEX GALLERY (thumbnails) */
    .gallery {
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:center;
      padding: 20px;
    }

    .gallery img {
      width:300px;
      height:260px;
      object-fit:cover;
      border-radius:8px;
      cursor:pointer;
      transition: transform .18s ease, box-shadow .18s ease;
      display:block;
    }

     .gallery video {
      width:300px;
      height:260px;
      object-fit:cover;
      border-radius:8px;
      cursor:pointer;
      transition: transform .18s ease, box-shadow .18s ease;
      display:block;
    }

    .gallery video:hover{
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    }

    .gallery img:hover{
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    }

    /* PREVIEW (fullscreen) */
    .preview-box{
      display:none; /* toggled by JS */
      position:fixed;
      inset:0;
      background:var(--overlay);
      z-index:1200;
      align-items:center;
      justify-content:center;
      padding:12px;
    }

    .preview-inner{
      position:relative;
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    /* Image takes as much screen as possible while preserving aspect ratio */
    .preview-img{
      max-width:100vw;
      max-height:100vh;
      width:auto;
      height:auto;
      border-radius:6px;
      object-fit:contain;
      display:block;
      transition: transform .12s ease;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }

    /* Controls: transparent background, formatted */
    .ctrl {
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      background: transparent; /* removed background as requested */
      color:var(--white);
      border: 2px solid rgba(255,255,255,0.92);
      padding:10px 12px;
      border-radius:50%;
      cursor:pointer;
      font-size:20px;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      user-select:none;
      transition: transform .08s ease, background .12s ease, opacity .12s ease;
      opacity:0.95;
      backdrop-filter: blur(4px);
    }
    .ctrl:focus{ outline:none; box-shadow:0 0 0 4px rgba(255,255,255,0.06); }
    .ctrl:hover{ transform: translateY(-50%) scale(1.05); opacity:1; background: rgba(255,255,255,0.03); }

    .prev{ left:18px; }
    .next{ right:18px; }

    /* Close button top-right, transparent too */
    .close-btn{
      position:absolute;
      top:18px;
      right:18px;
      background: transparent; /* removed bg */
      color:var(--white);
      border:2px solid rgba(255,255,255,0.92);
      padding:8px 10px;
      border-radius:8px;
      cursor:pointer;
      font-size:18px;
      font-weight:700;
      transition: transform .08s ease, background .12s ease;
    }
    .close-btn:hover{ transform: scale(1.03); background: rgba(255,255,255,0.03); }

    /* mobile tweaks */
    @media (max-width:700px){
      .gallery img{ width: 48%; height:120px; }
      .ctrl{ padding:10px; font-size:18px; }
      .close-btn{ top:12px; right:12px; padding:6px 8px; font-size:16px;}
      .prev{ left:8px } .next{ right:8px }
      body{ padding:12px; }
    }