:root{
    --bg: #0b0b0f;
    --bg-2: #14141a;
    --fg: #f7f7fb;
    --muted:#a7a7b3;
    --brand:#6ea8fe;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 16px;
    --btn-bg:#1e1e27;
    --btn-fg:#f7f7fb;
  }

  body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#fff; margin:0; color:#111;}
  a{color:#0b63ff; text-decoration:none;}
  a:hover{text-decoration:underline;}

  /* Trigger link */
  .open-link{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.7rem 1rem; border-radius:999px;
    background:#0b63ff; color:#fff; font-weight:600;
    box-shadow: var(--shadow);
  }
  .open-link svg{width:1.2rem; height:1.2rem;}

  /* Modal shell */
  .modal{
    position:fixed; inset:0; display:none; place-items:center;
    background:rgba(8,10,16,.55);
    -webkit-backdrop-filter:saturate(120%) blur(10px);
    backdrop-filter:saturate(120%) blur(10px);
    z-index:9999;
  }
  .modal[aria-hidden="false"]{display:grid;}
  .modal__dialog{
    background:linear-gradient(180deg, var(--bg), var(--bg-2));
    color:var(--fg);
    width:min(100vw, 920px);
    max-height:90vh;
    border-radius:var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
    display:flex; flex-direction:column;
  }

  /* Header */
  .modal__header{
    display:flex; align-items:center; justify-content:space-between;
    padding: .8rem 1rem .6rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .modal__title{font-size:1rem; font-weight:700; letter-spacing:.2px;}
  .modal__close{
    border:0; background:transparent; color:var(--muted);
    padding:.4rem; border-radius:8px; cursor:pointer;
  }
  .modal__close:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
  .modal__close svg{width:22px; height:22px;}

  /* Carousel viewport */
  .carousel{
    position:relative; overflow:hidden; width:100%;
    background: #0e0e14;
  }
  .track{
    display:flex; transition: transform .4s ease;
    will-change: transform;
    touch-action: pan-y;
  }
  .slide{
    min-width:100%; display:flex; align-items:center; justify-content:center;
    padding: 8px 8px 0;
  }
  .slide img{
    width:100%; height:auto; object-fit:contain;
    max-height: 58vh;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    background:#111;
  }

  /* Controls */
  .nav{
    position:absolute; inset-block:0; inset-inline:0;
    display:flex; align-items:center; justify-content:space-between;
    pointer-events:none;
  }
  .btn{
    pointer-events:auto; border:0; cursor:pointer;
    width:44px; height:44px; border-radius:999px;
    background:rgba(20,20,26,.75);
    color:var(--fg); display:grid; place-items:center;
    margin-inline:.5rem; box-shadow: var(--shadow);
  }
  .btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
  .btn svg{width:22px; height:22px;}

  /* Dots */
  .dots{
    display:flex; gap:.4rem; justify-content:center; align-items:center;
    padding:.6rem .8rem .2rem;
  }
  .dot{
    width:8px; height:8px; border-radius:999px; background:#444;
    border:0; padding:0; cursor:pointer;
  }
  .dot[aria-current="true"]{background:#d9d9e3; transform:scale(1.15);}

  /* Caption */
  .caption{
    padding: .6rem 1rem 1rem; color:var(--muted); font-size:.95rem;
    line-height:1.35; min-height:2.6lh;
  }
  .caption b{color:#fafafb;}
  .caption small{color:#9aa0ad;}

  /* Footer (optional actions) */
  .modal__footer{
    display:flex; justify-content:flex-end; gap:.6rem;
    padding: .6rem 1rem 1rem;
  }
  .cta{
    background:var(--btn-bg); color:var(--btn-fg);
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px; padding:.6rem .9rem; font-weight:600; cursor:pointer;
  }
  .cta:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

  /* Small screens: modal fills the screen */
  @media (max-width: 640px){
    .modal__dialog{width:100vw; height:100vh; max-height:none; border-radius:0;}
    .slide img{max-height: 62vh;}
    .modal__header{padding: .9rem .9rem;}
    .caption{padding: .6rem .9rem 1rem;}
    .modal__footer{padding: .4rem .9rem 1rem;}
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce){
    .track{transition: none;}
  }