.page-puzzle-index .puzzle-hero{
  background:
    radial-gradient(circle at 82% 20%,rgb(241 200 69 / 27%),transparent 21rem),
    linear-gradient(126deg,#3f7e89 0%,#4e8d9a 49%,#639d70 112%);
  color:#fff;
}
.page-puzzle-index .puzzle-hero__inner{
  width:var(--container);
  margin-inline:auto;
  padding-block:clamp(2rem,3.5vw,3rem);
}
.page-puzzle-index .puzzle-hero h1{
  max-width:56rem;
  margin:0;
  font-size:clamp(2.4rem,4.5vw,4rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.045em;
}
.page-puzzle-index .puzzle-hero p{
  max-width:38rem;
  margin:.8rem 0 0;
  color:rgb(255 255 255 / 87%);
  font-size:clamp(1rem,1.8vw,1.2rem);
  line-height:1.5;
}
.page-puzzle-index .puzzle-index__content,
.page-puzzle-material .puzzle-material__inner{
  width:min(calc(100% - 2rem),68rem);
  margin-inline:auto;
}
.page-puzzle-index .puzzle-index__content{
  padding-block:clamp(2.2rem,4vw,4rem);
}
.page-puzzle-index .puzzle-index__content h2{
  margin:0 0 1.5rem;
  font-size:clamp(1.75rem,3vw,2.35rem);
  line-height:1.1;
}
.page-puzzle-index .puzzle-material-group + .puzzle-material-group{
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
.page-puzzle-index .puzzle-material-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin:0;
  padding:0;
  list-style:none;
}
.page-puzzle-index .puzzle-material-list a{
  display:flex;
  min-height:11rem;
  height:100%;
  padding:1.5rem;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  color:inherit;
  text-decoration:none;
  transition:transform 180ms ease,box-shadow 180ms ease;
}
.page-puzzle-index .puzzle-material-list li:nth-child(1) a{background:#e8f2e6}
.page-puzzle-index .puzzle-material-list li:nth-child(2) a{background:#fff4c9}
.page-puzzle-index .puzzle-material-list li:nth-child(3) a{background:#e4f0f2}
.page-puzzle-index .puzzle-material-list li:nth-child(4) a{background:#ecebf5}
.page-puzzle-index .puzzle-material-list li:nth-child(5) a{background:#ffe2d4}
.page-puzzle-index .puzzle-material-list--compact{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.page-puzzle-index .puzzle-material-list--compact a{
  min-height:9.5rem;
  padding:1.25rem;
}
.page-puzzle-index .puzzle-material-list a::after{
  content:"→";
  margin-top:auto;
  padding-top:1.25rem;
  color:var(--accent);
  font-size:1.15rem;
  font-weight:800;
}
@media(hover:hover) and (pointer:fine){
  .page-puzzle-index .puzzle-material-list a:hover{
    transform:translateY(-.2rem);
    box-shadow:var(--shadow-md);
  }
}
.page-puzzle-index .puzzle-material-list a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:.25rem;
}
.page-puzzle-index .puzzle-material-list strong{
  margin-bottom:.65rem;
  font-size:1.14rem;
  line-height:1.25;
}
.page-puzzle-index .puzzle-material-list span{
  color:var(--muted);
  line-height:1.45;
}
.page-puzzle-material .puzzle-material{
  min-width:0;
}
.page-puzzle-material .puzzle-material__inner{
  min-width:0;
  padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,6vw,5rem);
}
.page-puzzle-material .puzzle-app{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
@media(max-width:64rem){
  .page-puzzle-index .puzzle-material-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:40rem){
  .page-puzzle-index .puzzle-material-list{grid-template-columns:1fr}
  .page-puzzle-index .puzzle-material-list a{min-height:9.5rem;padding:1.25rem}
  .page-puzzle-index .puzzle-hero__inner{padding-block:2rem 2.25rem}
  .page-puzzle-index .puzzle-hero h1{font-size:clamp(2.55rem,13vw,3.25rem)}
}
@media(max-width:30rem){
  .page-puzzle-index .puzzle-index__content,
  .page-puzzle-material .puzzle-material__inner{width:min(calc(100% - 1.25rem),68rem)}
}