h1,
h2,
h4,
h5,
p {
  margin: 0;
}
html {
  background: #fff;
  color: #222;
  font: 14px "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body {
  margin: 0;
}
button,
textarea {
  font: inherit;
}
h2,
h4 {
  font-weight: 600;
}
button:focus,
textarea:focus {
  outline: 0;
}
::selection {
  background: rgba(0, 149, 255, 0.1);
}
a {
  text-decoration: none;
  color: #004cff;
}
img {
  border: 0;
}
#el {
  padding: 20px;
}
.rolling-box {
  position: relative;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  margin: auto;
  --rolling-width: 300px;
  --short-side: min(100vw, 100vh);
  --rolling-all-width: min(1000px, var(--short-side));
  --rolling-margin: calc(var(--rolling-all-width) * 0.025);
  --rolling-width: calc(var(--rolling-all-width) * 0.3);
  --rolling-out-width: calc(var(--rolling-width) + var(--rolling-margin));
  width: calc(var(--rolling-out-width) * 3 - var(--rolling-margin));
  height: calc(var(--rolling-out-width) * 3 - var(--rolling-margin));
}
.rolling-box .rolling-item {
  position: absolute;
  width: var(--rolling-width);
  height: var(--rolling-width);
  border-radius: 4px;
  background: #123 url(peako.jpg) no-repeat;
  background-size: calc(var(--rolling-width) * 3) calc(var(--rolling-width) * 3);
  transition: top 0.3s ease, left 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.rolling-box .rolling-item[data-can-flip="true"] {
  cursor: pointer;
  pointer-events: auto;
}
.rolling-box .rolling-item[data-key="0"] {
  background-position: 0 0;
}
.rolling-box .rolling-item[data-key="1"] {
  background-position: calc(var(--rolling-width) * -1) 0;
}
.rolling-box .rolling-item[data-key="2"] {
  background-position: calc(var(--rolling-width) * -2) 0;
}
.rolling-box .rolling-item[data-key="3"] {
  background-position: 0 calc(var(--rolling-width) * -1);
}
.rolling-box .rolling-item[data-key="4"] {
  z-index: 0;
  background-position: calc(var(--rolling-width) * -1) calc(var(--rolling-width) * -1);
}
.rolling-box .rolling-item[data-key="5"] {
  background-position: calc(var(--rolling-width) * -2) calc(var(--rolling-width) * -1);
}
.rolling-box .rolling-item[data-key="6"] {
  background-position: 0 calc(var(--rolling-width) * -2);
}
.rolling-box .rolling-item[data-key="7"] {
  background-position: calc(var(--rolling-width) * -1) calc(var(--rolling-width) * -2);
}
.rolling-box .rolling-item[data-key="8"] {
  background-position: calc(var(--rolling-width) * -2) calc(var(--rolling-width) * -2);
}
.rolling-box .rolling-item[data-index="0"] {
  left: 0;
  top: 0;
}
.rolling-box .rolling-item[data-index="1"] {
  left: calc(var(--rolling-out-width) * 1);
  top: 0;
}
.rolling-box .rolling-item[data-index="2"] {
  left: calc(var(--rolling-out-width) * 2);
  top: 0;
}
.rolling-box .rolling-item[data-index="3"] {
  left: 0;
  top: calc(var(--rolling-out-width) * 1);
}
.rolling-box .rolling-item[data-index="4"] {
  left: calc(var(--rolling-out-width) * 1);
  top: calc(var(--rolling-out-width) * 1);
}
.rolling-box .rolling-item[data-index="5"] {
  left: calc(var(--rolling-out-width) * 2);
  top: calc(var(--rolling-out-width) * 1);
}
.rolling-box .rolling-item[data-index="6"] {
  left: 0;
  top: calc(var(--rolling-out-width) * 2);
}
.rolling-box .rolling-item[data-index="7"] {
  left: calc(var(--rolling-out-width) * 1);
  top: calc(var(--rolling-out-width) * 2);
}
.rolling-box .rolling-item[data-index="8"] {
  left: calc(var(--rolling-out-width) * 2);
  top: calc(var(--rolling-out-width) * 2);
}
.rolling-box[data-checked="true"] .rolling-item {
  pointer-events: none;
}
.rolling-box[data-checked="true"] .rolling-item[data-key="4"] {
  cursor: pointer;
  pointer-events: auto;
}