.page-products{
  --card-radius:16px;
  --card-shadow:0 10px 26px rgba(0,0,0,.1);
  background:
    radial-gradient(70% 42% at 94% 6%, rgba(108,169,58,.09), transparent 62%),
    radial-gradient(40% 30% at 4% 28%, rgba(255,212,0,.08), transparent 58%),
    var(--paper);
  scroll-behavior:smooth;
}
.page-products .page-anchor{
  position:absolute;
  top:0;left:0;
  width:1px;height:1px;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}
.page-products a:focus-visible,
.page-products .console-tab:focus-visible,
.page-products .sort-option:focus-visible{
  outline:3px solid var(--lime);
  outline-offset:2px;
}
.page-products .breadcrumb{
  max-width:1240px;
  margin:0 auto;
  padding:16px 16px 4px;
}
.page-products .library-hero{
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:30px 16px 14px;
  overflow:hidden;
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.page-products .hero-bg-num{
  position:absolute;
  top:8px;right:-4px;
  font-family:var(--mono);
  font-size:clamp(84px,22vw,176px);
  font-weight:800;
  line-height:.82;
  letter-spacing:-.05em;
  color:rgba(108,169,58,.13);
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.page-products .section-mark{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kiwi-deep);
}
.page-products .section-mark::before{
  content:"";
  width:22px;height:6px;
  background:var(--kiwi);
  border-radius:2px;
  flex:0 0 auto;
}
.page-products .library-hero h1{
  position:relative;
  z-index:1;
  margin:12px 0 14px;
  max-width:14em;
  font-family:var(--headline);
  font-size:clamp(28px,4.6vw,50px);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--ink);
}
.page-products .hero-intro{
  position:relative;
  z-index:1;
  max-width:64ch;
  margin:0;
  font-size:1rem;
  line-height:1.8;
  color:#343a40;
}
.page-products .hero-intro strong{
  color:var(--kiwi-deep);
  font-weight:700;
}
.page-products .hero-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:22px 0 0;
}
.page-products .hero-stats dl{
  display:contents;
}
.page-products .hero-stats .stat-block{
  position:relative;
  padding:12px 14px;
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.page-products .hero-stats .stat-block::after{
  content:"";
  position:absolute;
  right:-10px;top:-10px;
  width:30px;height:30px;
  background:var(--lime);
  opacity:.38;
  transform:rotate(16deg);
}
.page-products .hero-stats dt{
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--kiwi-deep);
  font-weight:600;
}
.page-products .hero-stats dd{
  margin:2px 0 0;
  font-family:var(--mono);
  font-size:1.4rem;
  font-weight:700;
  color:var(--ink);
}
.page-products .version-strip{
  display:flex;
  align-items:flex-start;
  gap:12px;
  max-width:1240px;
  margin:18px auto 0;
  padding:10px 16px 10px 12px;
  background:var(--lime);
  border-radius:12px;
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.page-products .version-badge{
  flex:0 0 auto;
  margin-top:2px;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.05em;
  padding:3px 8px;
  background:var(--ink);
  color:var(--lime);
  border-radius:7px;
}
.page-products .version-text{
  margin:0;
  font-size:.84rem;
  line-height:1.7;
  color:var(--ink);
}
.page-products .library-banner{
  max-width:1240px;
  margin:14px auto 0;
  padding:0 16px;
  position:relative;
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.page-products .library-banner img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius) var(--radius) 4px var(--radius);
  background:var(--mist);
}
.page-products .library-banner::after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:0;
  height:6px;
  border-radius:0 0 4px 4px;
  background:repeating-linear-gradient(90deg,var(--kiwi) 0 14px,var(--lime) 14px 26px);
}
.page-products .app-browser{
  max-width:1240px;
  margin:0 auto;
  padding:34px 16px 8px;
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.page-products .filter-input,
.page-products .sort-input{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;
  padding:0;
  border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}
.page-products .browser-head{
  margin-bottom:8px;
}
.page-products .section-head .section-title{
  margin:8px 0 8px;
  font-family:var(--headline);
  font-size:clamp(1.35rem,3vw,1.75rem);
  line-height:1.2;
  color:var(--ink);
}
.page-products .section-head .section-intro{
  margin:0 0 18px;
  max-width:66ch;
  font-size:.92rem;
  line-height:1.75;
  color:#4a5058;
}
.page-products .console-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.page-products .console-tabs::-webkit-scrollbar{
  height:4px;
}
.page-products .console-tabs::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:4px;
}
.page-products .console-tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:.875rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
.page-products .console-tab span{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--kiwi-deep);
}
.page-products .console-tab:hover{
  background:var(--mist);
  border-color:var(--kiwi);
}
.page-products .console-tab.tab--action{--tab-bg:var(--kiwi);--tab-ink:#fff;}
.page-products .console-tab.tab--strategy{--tab-bg:var(--grape);--tab-ink:#fff;}
.page-products .console-tab.tab--casual{--tab-bg:var(--lime);--tab-ink:var(--ink);}
.page-products .console-tab.tab--simulation{--tab-bg:var(--orange);--tab-ink:var(--ink);}
.page-products #cat-all:checked ~ .browser-head .console-tab[for="cat-all"],
.page-products #cat-action:checked ~ .browser-head .console-tab[for="cat-action"],
.page-products #cat-strategy:checked ~ .browser-head .console-tab[for="cat-strategy"],
.page-products #cat-casual:checked ~ .browser-head .console-tab[for="cat-casual"],
.page-products #cat-simulation:checked ~ .browser-head .console-tab[for="cat-simulation"]{
  background:var(--tab-bg,var(--kiwi));
  border-color:var(--tab-bg,var(--kiwi));
  color:var(--tab-ink,#fff);
}
.page-products #cat-all:checked ~ .browser-head .console-tab[for="cat-all"] span,
.page-products #cat-action:checked ~ .browser-head .console-tab[for="cat-action"] span,
.page-products #cat-strategy:checked ~ .browser-head .console-tab[for="cat-strategy"] span,
.page-products #cat-casual:checked ~ .browser-head .console-tab[for="cat-casual"] span,
.page-products #cat-simulation:checked ~ .browser-head .console-tab[for="cat-simulation"] span{
  color:inherit;
  opacity:.85;
}
.page-products .console-sort{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:14px;
}
.page-products .sort-label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--kiwi-deep);
  margin-right:4px;
}
.page-products .sort-option{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  font-size:.8rem;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
.page-products .sort-option:hover{
  border-color:var(--kiwi);
  background:var(--mist);
}
.page-products #sort-popular:checked ~ .browser-head .sort-option[for="sort-popular"],
.page-products #sort-updated:checked ~ .browser-head .sort-option[for="sort-updated"],
.page-products #sort-size:checked ~ .browser-head .sort-option[for="sort-size"]{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.page-products .app-browser:has(.filter-input:focus-visible) .console-tabs,
.page-products .app-browser:has(.sort-input:focus-visible) .console-sort{
  outline:2px dashed var(--kiwi-deep);
  outline-offset:4px;
  border-radius:12px;
}
.page-products .grid-result-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:30px 0 16px;
  padding-top:16px;
  border-top:2px solid var(--ink);
}
.page-products .grid-result-head .section-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-family:var(--headline);
  font-size:clamp(1.2rem,2.4vw,1.5rem);
  color:var(--ink);
}
.page-products .grid-result-head .section-title::before{
  content:"";
  width:10px;height:10px;
  background:var(--kiwi);
  transform:rotate(45deg);
  flex:0 0 auto;
}
.page-products .grid-result-head .result-count{
  margin:0;
  font-family:var(--mono);
  font-size:.76rem;
  white-space:nowrap;
  color:#5a6268;
}
.page-products .grid-result-head .result-count strong{
  color:var(--kiwi-deep);
}
.page-products .app-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.page-products .app-card{
  --tag-bg:var(--kiwi);
  --tag-ink:#fff;
  grid-column:span 1;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(rgba(18,21,26,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,21,26,.028) 1px,transparent 1px),
    #fff;
  background-size:18px 18px;
  background-position:-1px -1px;
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  overflow:hidden;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  order:var(--pop,1);
  transition:transform .25s ease-out,box-shadow .25s ease-out,border-color .25s ease-out,background .25s ease-out;
}
.page-products .app-card:nth-child(1),
.page-products .app-card:nth-child(4),
.page-products .app-card:nth-child(7),
.page-products .app-card:nth-child(10){
  grid-column:span 2;
}
.page-products .app-card[data-cat="action"]{--tag-bg:var(--kiwi);--tag-ink:#fff;}
.page-products .app-card[data-cat="strategy"]{--tag-bg:var(--grape);--tag-ink:#fff;}
.page-products .app-card[data-cat="casual"]{--tag-bg:var(--lime);--tag-ink:var(--ink);}
.page-products .app-card[data-cat="simulation"]{--tag-bg:var(--orange);--tag-ink:var(--ink);}
.page-products .app-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--card-shadow),0 0 0 1px var(--kiwi) inset;
  border-color:var(--kiwi);
  background-color:#fffdf8;
}
.page-products .app-card:hover .card-action .btn{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink);
}
.page-products .card-media{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--mist);
}
.page-products .card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease-out;
}
.page-products .app-card:hover .card-media img{
  transform:scale(1.03);
}
.page-products .card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,rgba(18,21,26,.16),transparent 42%);
  pointer-events:none;
}
.page-products .card-tag{
  position:absolute;
  top:10px;left:10px;
  z-index:2;
  padding:5px 10px 5px 12px;
  background:var(--tag-bg);
  color:var(--tag-ink);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  border-radius:4px 12px 4px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.page-products .card-glyph{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:
    radial-gradient(78% 68% at 82% 18%,rgba(255,212,0,.24),transparent 56%),
    linear-gradient(140deg,var(--mist),#fff);
}
.page-products .card-glyph .glyph-char{
  position:relative;
  z-index:1;
  font-family:var(--headline);
  font-size:64px;
  font-weight:800;
  color:var(--ink);
  opacity:.82;
}
.page-products .card-glyph .glyph-line{
  position:absolute;
  left:-20%;
  top:58%;
  width:160%;
  height:22px;
  background:var(--tag-bg);
  opacity:.16;
  transform:rotate(-16deg);
}
.page-products .card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:8px;
  padding:14px;
}
.page-products .card-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.page-products .card-name{
  margin:0;
  font-family:var(--headline);
  font-size:1.12rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.25;
}
.page-products .card-version{
  flex:0 0 auto;
  padding:2px 8px;
  border-radius:999px;
  background:var(--mist);
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--kiwi-deep);
  white-space:nowrap;
}
.page-products .card-desc{
  flex:1;
  margin:0;
  font-size:.85rem;
  line-height:1.65;
  color:#3c424a;
}
.page-products .card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:8px;
  border-top:1px dashed var(--line);
  font-size:.74rem;
  color:#5a6268;
}
.page-products .meta-size{
  font-family:var(--mono);
}
.page-products .meta-update{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.page-products .meta-update::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--kiwi);
}
.page-products .card-action{
  margin-top:auto;
}
.page-products .card-action .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
.page-products .card-action .btn:focus-visible{
  outline:3px solid var(--lime);
  outline-offset:2px;
}
.page-products .member-channel{
  position:relative;
  max-width:1240px;
  margin:42px auto 0;
  padding:32px 22px;
  border-radius:var(--radius);
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(80% 75% at 92% 12%,rgba(255,212,0,.16),transparent 56%),
    radial-gradient(40% 35% at 4% 88%,rgba(108,169,58,.22),transparent 60%),
    var(--ink);
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.page-products .member-channel::before{
  content:"VIP";
  position:absolute;
  right:-8px;
  bottom:-26px;
  font-family:var(--mono);
  font-size:130px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.05em;
  color:rgba(255,255,255,.055);
  pointer-events:none;
}
.page-products .member-inner{
  position:relative;
  z-index:1;
  max-width:760px;
}
.page-products .member-mark{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lime);
}
.page-products .member-mark::before{
  content:"";
  width:24px;height:6px;
  background:var(--lime);
  border-radius:2px;
}
.page-products .member-inner h2{
  margin:12px 0 12px;
  font-family:var(--headline);
  font-size:clamp(1.5rem,3.8vw,2.1rem);
  line-height:1.22;
  color:#fff;
}
.page-products .member-inner > p{
  margin:0;
  max-width:62ch;
  font-size:.95rem;
  line-height:1.8;
  color:rgba(255,255,255,.78);
}
.page-products .member-perks{
  list-style:none;
  margin:18px 0 10px;
  padding:0;
  display:grid;
  gap:10px;
}
.page-products .member-perks li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(255,255,255,.07);
  font-size:.86rem;
  line-height:1.6;
  color:rgba(255,255,255,.86);
}
.page-products .member-perks li::before{
  content:"";
  flex:0 0 auto;
  width:8px;height:8px;
  margin-top:6px;
  border-radius:2px;
  background:var(--lime);
  transform:rotate(45deg);
}
.page-products .member-levels{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:16px 0 20px;
}
.page-products .member-levels span{
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  font-size:.74rem;
  color:rgba(255,255,255,.72);
}
.page-products .member-levels .level-vip{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink);
  font-weight:700;
}
.page-products .member-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.page-products .member-actions .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-radius:14px;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
.page-products .member-actions .btn--lime{
  background:var(--lime);
  border:1px solid var(--lime);
  color:var(--ink);
}
.page-products .member-actions .btn--lime:hover,
.page-products .member-actions .btn--lime:focus-visible{
  background:#ffe14d;
  border-color:#ffe14d;
}
.page-products .member-actions .btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  color:rgba(255,255,255,.9);
}
.page-products .member-actions .btn--ghost:hover,
.page-products .member-actions .btn--ghost:focus-visible{
  border-color:var(--lime);
  color:var(--lime);
  background:rgba(255,255,255,.05);
}
.page-products .download-note{
  max-width:1240px;
  margin:0 auto;
  padding:40px 16px 64px;
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.page-products .note-panel{
  position:relative;
  max-width:900px;
  padding:28px 24px;
  border:1px solid var(--line);
  border-left:6px solid var(--grape);
  border-radius:var(--radius) 4px var(--radius) 4px;
  background:var(--mist);
  overflow:hidden;
}
.page-products .note-panel::before{
  content:"";
  position:absolute;
  top:-8px;
  right:26px;
  width:74px;
  height:16px;
  background:var(--lime);
  opacity:.5;
  transform:rotate(-14deg);
  border-radius:4px;
}
.page-products .note-mark{
  color:var(--grape);
}
.page-products .note-mark::before{
  background:var(--grape);
}
.page-products .note-panel h2{
  margin:10px 0 12px;
  font-family:var(--headline);
  font-size:clamp(1.3rem,2.8vw,1.7rem);
  color:var(--ink);
}
.page-products .note-panel p,
.page-products .note-panel li{
  font-size:.9rem;
  line-height:1.8;
  color:#3a4048;
}
.page-products .note-panel ul{
  margin:14px 0 0;
  padding-left:1.2em;
}
.page-products .note-panel li + li{
  margin-top:6px;
}
.page-products .note-panel a{
  color:var(--kiwi-deep);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(47,110,50,.4);
}
.page-products .note-panel a:hover{
  text-decoration-color:var(--kiwi);
}
.page-products .note-more{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px dashed var(--line);
}
@media (min-width:640px){
  .page-products .hero-stats{
    grid-template-columns:repeat(4,1fr);
  }
  .page-products .console-sort{
    justify-content:flex-end;
  }
  .page-products .browser-head{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
  }
  .page-products .section-head{
    flex:0 0 100%;
  }
  .page-products .app-grid{
    gap:16px;
  }
}
@media (min-width:860px){
  .page-products .library-hero{
    padding:38px 24px 18px;
  }
  .page-products .app-browser{
    padding:38px 24px 10px;
  }
  .page-products .app-grid{
    grid-template-columns:repeat(5,1fr);
  }
  .page-products .app-card{
    grid-column:span 2;
  }
  .page-products .app-card:nth-child(1),
  .page-products .app-card:nth-child(4),
  .page-products .app-card:nth-child(7),
  .page-products .app-card:nth-child(10){
    grid-column:span 3;
  }
  .page-products .member-channel{
    padding:40px 36px;
  }
  .page-products .note-panel{
    padding:32px 34px;
  }
  .page-products .library-banner{
    padding:0 24px;
  }
  .page-products .library-banner::after{
    left:24px;
    right:24px;
  }
  .page-products .version-strip{
    margin-left:24px;
    margin-right:24px;
  }
}
@media (min-width:1240px){
  .page-products .library-hero,
  .page-products .app-browser,
  .page-products .member-channel,
  .page-products .download-note,
  .page-products .library-banner,
  .page-products .version-strip{
    margin-left:auto;
    margin-right:auto;
  }
}
@media (prefers-reduced-motion:reduce){
  .page-products .app-card,
  .page-products .card-media img,
  .page-products .card-action .btn,
  .page-products .member-actions .btn{
    transition:none;
  }
  .page-products .app-card:hover{
    transform:none;
  }
  .page-products .app-card:hover .card-media img{
    transform:none;
  }
}

.page-products {
  --pop: inherit;
}