:root {
      --bg: #f8fafc;
      --card: #fff;
      --bd: #e2e8f0;
      --tx: #1e293b;
      --hd: #0f172a;
      --mu: #64748b;
      --soft: #f1f5f9;
      --sky: #dc2626
    }

    html.dark {
      --bg: #020617;
      --card: #0f172a;
      --bd: #1e293b;
      --tx: #f1f5f9;
      --hd: #fff;
      --mu: #94a3b8;
      --soft: #1e293b;
      --sky: #f87171
    }

    * {
      box-sizing: border-box;
      margin: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--tx);
      font-family: Inter, 'Noto Sans Arabic', system-ui, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      -webkit-font-smoothing: antialiased;
      transition: background .3s, color .3s
    }

    html[dir=rtl] body {
      font-family: 'Noto Sans Arabic', Inter, system-ui, sans-serif
    }

    .ic {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: none
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button {
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
      cursor: pointer
    }

    .wrap {
      max-width: 72rem;
      margin: 0 auto;
      padding: 0 1rem
    }

    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(12px);
      background: color-mix(in srgb, var(--card) 80%, transparent);
      border-bottom: 1px solid var(--bd)
    }

    header .wrap {
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .75rem;
      min-width: 0
    }

    .logo {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: .75rem;
      background: linear-gradient(to top right, #dc2626, #7f1d1d);
      color: #fff;
      font-weight: 700;
      font-size: 1.25rem;
      display: grid;
      place-items: center;
      box-shadow: 0 4px 8px #0003;
      flex: none
    }

    .brand h1 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--hd);
      line-height: 1.2
    }

    .brand p {
      font-size: .72rem;
      color: var(--mu)
    }

    .tools {
      display: flex;
      align-items: center;
      gap: .5rem
    }

    .ctl {
      height: 2.25rem;
      padding: 0 .75rem;
      border-radius: .5rem;
      border: 1px solid var(--bd);
      background: var(--soft);
      color: var(--mu);
      font-size: .75rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: .375rem;
      transition: color .2s
    }

    .ctl:hover {
      color: var(--sky)
    }

    .search {
      position: relative;
      width: 12rem
    }

    .search .ic {
      position: absolute;
      inset-inline-start: .75rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--mu);
      width: 14px
    }

    .search input {
      width: 100%;
      height: 2.25rem;
      padding: 0 .75rem 0 2.25rem;
      padding-inline: 2.25rem .75rem;
      border-radius: .5rem;
      border: 1px solid var(--bd);
      background: var(--soft);
      color: var(--tx);
      font-size: .75rem;
      outline: 0
    }

    .search input:focus {
      box-shadow: 0 0 0 2px #ef4444
    }

    .sun {
      display: none
    }

    html.dark .sun {
      display: block
    }

    html.dark .moon {
      display: none
    }

    main {
      flex: 1;
      width: 100%
    }

    main.wrap {
      padding-top: 2rem;
      padding-bottom: 3rem
    }

    @media(min-width:640px) {
      main.wrap {
        padding-top: 3rem;
        padding-bottom: 3rem
      }
    }

    .card {
      position: relative;
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 1px 2px #0000000d;
      margin-bottom: 1.5rem
    }

    .bar {
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(90deg, var(--a, #0ea5e9), var(--b, #6366f1))
    }

    .hero {
      background: var(--card)
    }

    .hero .bar {
      background: linear-gradient(90deg, #7f1d1d, #ff1a2e, #fb7185)
    }

    .hero h2 {
      font-size: clamp(1.9rem, 4vw, 2.5rem);
      font-weight: 800;
      color: var(--hd);
      letter-spacing: -.02em
    }

    .hero .sub {
      color: var(--mu);
      margin-top: .5rem;
      font-size: .9rem;
      max-width: none;
      line-height: 1.7
    }

    .pills {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: .9rem
    }

    .pill {
      padding: .25rem .75rem;
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 600;
      border: 1px solid
    }

    .p1 {
      background: #d1fae5;
      color: #065f46;
      border-color: #a7f3d0
    }

    .p2 {
      background: #f3e8ff;
      color: #6b21a8;
      border-color: #e9d5ff
    }

    .p3 {
      background: #e0f2fe;
      color: #075985;
      border-color: #bae6fd
    }

    .p4 {
      background: #fef3c7;
      color: #92400e;
      border-color: #fde68a
    }

    html.dark .p1 {
      background: #022c22cc;
      color: #6ee7b7;
      border-color: #065f46
    }

    html.dark .p2 {
      background: #3b0764cc;
      color: #d8b4fe;
      border-color: #6b21a8
    }

    html.dark .p3 {
      background: #082f49cc;
      color: #7dd3fc;
      border-color: #075985
    }

    html.dark .p4 {
      background: #451a03cc;
      color: #fcd34d;
      border-color: #92400e
    }

    .hero .frame {
      aspect-ratio: 3/1
    }

    /* neon red pulse on first card */
    .card.hero {
      margin-bottom: 2.75rem;
      --neon: #ff1a2e;
      --neon-hi: #ff5566;
      background: color-mix(in srgb, var(--neon) 16%, var(--card));
      border: 1.5px solid var(--neon);
      animation: neonPulse 2.6s ease-in-out infinite;
      will-change: box-shadow
    }

    @keyframes neonPulse {

      0%,
      100% {
        border-color: color-mix(in srgb, var(--neon) 80%, transparent);
        box-shadow: 0 0 3px var(--neon), 0 0 10px color-mix(in srgb, var(--neon) 50%, transparent), 0 0 22px color-mix(in srgb, var(--neon) 28%, transparent)
      }

      50% {
        border-color: var(--neon-hi);
        box-shadow: 0 0 4px var(--neon-hi), 0 0 15px color-mix(in srgb, var(--neon-hi) 85%, transparent), 0 0 30px color-mix(in srgb, var(--neon) 55%, transparent)
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .card.hero {
        animation: none;
        box-shadow: 0 0 8px var(--neon), 0 0 24px color-mix(in srgb, var(--neon) 45%, transparent)
      }
    }

    @media print {
      .card.hero {
        animation: none;
        box-shadow: none
      }
    }

    .tabs {
      display: inline-flex;
      flex-wrap: wrap;
      gap: .25rem;
      padding: .25rem;
      background: color-mix(in srgb, var(--bd) 60%, transparent);
      border-radius: .75rem;
      margin-bottom: 1.5rem
    }

    .tab {
      padding: .375rem .875rem;
      border-radius: .5rem;
      font-size: .8rem;
      font-weight: 600;
      color: var(--mu)
    }

    .tab.on {
      background: var(--card);
      color: var(--sky);
      box-shadow: 0 1px 2px #0003
    }

    .head {
      display: flex;
      align-items: flex-start;
      gap: .9rem;
      flex-wrap: wrap;
      margin-top: .25rem
    }

    .ib {
      width: 3rem;
      height: 3rem;
      border-radius: .75rem;
      display: grid;
      place-items: center;
      flex: none;
      color: var(--a);
      background: color-mix(in srgb, var(--a) 14%, transparent)
    }

    .ib .ic {
      width: 22px;
      height: 22px
    }

    .min {
      flex: 1;
      min-width: 15rem
    }

    .head h3 {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--hd)
    }

    .desc {
      font-size: .85rem;
      color: var(--mu);
      line-height: 1.65;
      margin-top: .25rem;
      max-width: none
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: .375rem;
      padding: .4rem .875rem;
      border-radius: .5rem;
      font-size: .75rem;
      font-weight: 600;
      background: var(--soft);
      border: 1px solid var(--bd);
      color: var(--tx);
      transition: border-color .35s ease, box-shadow .35s ease, color .35s ease
    }

    .btn.pri {
      border-color: var(--a)
    }

    .btn:hover,
    .btn:focus-visible {
      border-color: var(--a);
      color: var(--a);
      outline: 0;
      box-shadow: 0 0 0 1px var(--a), 0 0 8px 1px var(--a), 0 0 18px 2px color-mix(in srgb, var(--a) 55%, transparent)
    }

    .grid {
      display: grid;
      gap: 1rem;
      margin-top: 1.4rem;
      grid-template-columns: 1fr
    }

    @media(min-width:640px) {

      .grid.n2,
      .grid.n3 {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(min-width:1024px) {
      .grid.n3 {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    .grid.n1 {
      grid-template-columns: 1fr
    }

    .shot figcaption {
      font-size: .75rem;
      font-weight: 600;
      color: var(--mu);
      margin-top: .5rem;
      text-align: center
    }

    .frame {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: .75rem;
      overflow: hidden;
      border: 1.5px dashed color-mix(in srgb, var(--a, #0ea5e9) 55%, var(--bd));
      background: color-mix(in srgb, var(--a, #0ea5e9) 7%, var(--soft))
    }

    .frame.has {
      border-style: solid;
      border-width: 2px;
      border-color: color-mix(in srgb, var(--a, #0ea5e9) 75%, var(--bd));
      cursor: zoom-in
    }

    .hero .frame,
    .hero .frame *,
    .hero .frame.has {
      cursor: default
    }

    .frame img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    /* logo image */
    .logo {
      overflow: hidden
    }

    .logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: .8
    }

    /* screenshots: 0.8 opacity + gap between image and frame border */
    .frame img {
      opacity: .8
    }

    .frame:not([data-key="hero"]) img {
      inset: .5rem;
      width: calc(100% - 1rem);
      height: calc(100% - 1rem);
      border-radius: .5rem
    }

    /* hero cover: full opacity + red frame */
    .hero .frame img {
      opacity: 1
    }

    .hero .frame {
      border: 2px dashed #dc2626
    }

    .hero .frame.has {
      border-style: solid
    }

    /* transparent "open in new tab" button on screenshots */
    .shot {
      position: relative
    }

    .open-tab {
      position: absolute;
      top: .9rem;
      inset-inline-end: .9rem;
      z-index: 2;
      width: 2.25rem;
      height: 2.25rem;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: .6rem;
      border: 1px solid #ffffff55;
      background: #00000040;
      color: #fff;
      cursor: pointer;
      opacity: .6;
      backdrop-filter: blur(2px);
      transition: opacity .15s, background .15s
    }

    .open-tab:hover,
    .open-tab:focus-visible {
      opacity: 1;
      background: #000000a0
    }

    .open-tab svg {
      width: 1.1rem;
      height: 1.1rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .frame:not(.has)~.open-tab {
      display: none
    }

    .ph {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      color: var(--mu)
    }

    .ph .ic {
      width: 26px;
      height: 26px;
      opacity: .7
    }

    .ph small {
      font-size: .72rem
    }

    .frame.has .ph {
      display: none
    }

    #none {
      display: none;
      text-align: center;
      padding: 3rem 1rem;
      color: var(--mu)
    }

    #none.show {
      display: block
    }

    .hide {
      display: none !important
    }

    footer {
      border-top: 1px solid var(--bd);
      padding: 1.25rem 1rem;
      text-align: center;
      font-size: .75rem;
      color: var(--mu)
    }

    #lb {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: #000d;
      display: none;
      place-items: center;
      padding: 1rem;
      cursor: zoom-out
    }

    #lb.on {
      display: grid
    }

    #lb img {
      max-width: 100%;
      max-height: 100%;
      border-radius: .5rem
    }

    @media(max-width:700px) {
      .search {
        width: 8rem
      }

      .hide-sm {
        display: none
      }
    }

    @media print {

      header,
      .tabs,
      .actions,
      #lb {
        display: none !important
      }

      body {
        background: #fff
      }

      .card {
        break-inside: avoid;
        box-shadow: none
      }
    }