@charset "utf-8";
/*
 *Last modified: 2025-08-15 18:28:29
 */
:root {
  --w-body: var(--_w-xl);
  --w-menu: 280px;
  --w-aside: 280px;
  --offset-top: calc(var(--_rem-root)*5.4 + var(--_rem-max));
  --gap-col: var(--_rem-max);
  --m-top: var(--_rem-display);
}
/*全局*/
menu {
  width: var(--w-menu);
  margin-inline-end: var(--gap-col);
}
menu .inner {
  position: sticky;
  inset-block-start: var(--offset-top);
}
menu .inner:has(.menu-api) {
  max-height: calc(100vh - var(--offset-top));
  overflow-y: auto;
}
aside {
  width: var(--w-aside);
  margin-inline-start: var(--gap-col);
}
aside .inner {
  position: sticky;
  inset-block-start: var(--offset-top);
}
aside .inner:has(ax-anchors) {
  max-height: calc(100vh - var(--offset-top));
  overflow-y: auto;
}
aside ax-anchors {
  --_anch-pos: initial;
  --_anchor-p: 0;
}
aside:has(.inner ax-anchors ul._reset:empty) {
  display: none;
}
main {
  width: 0;
  margin-block-start: var(--m-top);
  flex: auto;
}
.alt-info {
  margin-block-start: var(--m-top);
}
.list-post > * {
  margin-block-end: var(--m-top);
}
.list-search {
  margin-block-end: var(--m-top);
}
.list-search .search-tips {
  color: var(--_c-brief);
  font-size: var(--_fs-caption);
}
.list-filter {
  margin-block-end: var(--m-top);
}
@media (max-width: 1535px) {
  body.body-user {
    background-position: -20px -20px;
    background-size: min(100%,400px) auto;
  }
  .user-center {
    --user-m: var(--_rem-display);
    --user-w: 100%;
    --user-menu: 100%;
    display: block;
  }
}
.index-user {
  --height: 480px;
  --padding: var(--_rem-display);
  --margin: var(--_rem-display);
  --avatar: 64px;
  margin: var(--_margin) auto;
}
.index-user li {
  border-radius: var(--_r-input-lg);
  background-color: var(--_c-stage);
  box-shadow: 1px 0 0 var(--_c-text-bd), -1px 0 0 var(--_c-text-bd), 0 1px 0 var(--_c-text-bd), 0 -1px 0 var(--_c-text-bd), 0 calc(var(--_rem-root)*0.4) calc(var(--_rem-root)*0.6) var(--_c-black-8);
  padding-block-start: var(--padding);
  padding-block-end: 0;
  padding-inline: var(--padding);
  box-sizing: border-box;
  height: var(--height);
  position: relative;
  transition: all var(--_dur-2) linear;
}
.index-user li:hover {
  box-shadow: 1px 2px calc(var(--_rem-root)*2) var(--_c-prim-sd), 0px 0px 0px 2px var(--_c-prim);
}
.index-user li:hover .btn {
  color: var(--_c-white);
  background-color: var(--_c-prim);
  border-color: var(--_c-prim);
}
.index-user li:hover .r01 {
  animation: updown 1s infinite;
}
.index-user .r01 {
  --_user-bg: var(--_c-text-bd);
  font-size: var(--_rem-lead);
  font-weight: bold;
  line-height: var(--_rem-input);
  padding-block: 0;
  padding-inline: var(--_rem-body);
  background-color: var(--_user-bg);
  border-radius: var(--_r-input);
  position: relative;
}
.index-user .r01:before {
  content: '';
  position: absolute;
  inset-block-end: -4px;
  inset-inline-start: 18px;
  width: 8px;
  height: 8px;
  background-color: var(--_user-bg);
  transform: rotate(45deg);
}
@keyframes updown {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 -4px;
  }
  100% {
    translate: 0 0;
  }
}
.index-user .r02 {
  margin-block-start: var(--_rem-body);
  margin-block-end: var(--margin);
}
.index-user .quote {
  margin-block-start: var(--margin);
}
.index-user .right {
  color: var(--_c-brief);
}
.index-user .right [class*=icon] {
  color: var(--_c-caption);
}
.index-user .left {
  margin-inline-end: var(--margin);
}
.index-user .left img {
  width: var(--avatar);
  aspect-ratio: 1/1;
  border-radius: 100%;
  margin: auto;
  transition: all var(--_dur-2) linear;
}
.index-user .left img:hover {
  scale: 1.2;
}
.index-user .btn {
  line-height: var(--_rem-hero);
  width: 100%;
  text-align: center;
  display: block;
  border-block-start: 1px solid var(--_c-text-bd);
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  transition: all var(--_dur-2) linear;
}
@media (max-width: 1535px) {
  .index-user {
    --height: auto;
    --padding: var(--_rem-body);
    --margin: var(--_rem-body);
    --avatar: var(--_rem-input);
  }
  .index-user .btn {
    position: relative;
    width: calc(100% + var(--_rem-body)*2);
    margin-inline-start: calc(-1*var(--_rem-body));
  }
  .index-user .quote {
    margin-block-end: var(--margin);
  }
  .index-user [class*=_flex]:not(:last-child) {
    margin-block-end: var(--_font);
  }
}
.index-dev {
  --radius: var(--_rem-list);
  --height: 400px;
  --padding: var(--_rem-display);
  color: var(--_c-white);
}
.index-dev ._container-xl {
  background: linear-gradient(135deg, #dc3848 0%, #0f3357 8%, #661aff 100%);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  height: var(--height);
  display: flex;
  align-items: center;
}
.index-dev .image {
  height: 140%;
  position: absolute;
  inset-block-start: 0px;
  inset-inline-end: 0px;
}
.index-dev .text {
  margin-inline-start: calc(var(--_rem-root)*14);
  position: relative;
  z-index: 2;
}
.index-dev .title {
  --fs: var(--_rem-input);
  --lh: 1.2;
  font-size: var(--fs);
  font-weight: bold;
  line-height: var(--lh);
}
.index-dev ul {
  --fs: var(--_fs-lead);
  --lh: var(--_rem-input);
  font-size: var(--fs);
  line-height: var(--lh);
  margin-block-start: var(--padding);
  margin-block-end: var(--padding);
}
.index-dev ul i {
  font-size: var(--_rem-caption);
  width: var(--_fs-lead);
  line-height: var(--_fs-lead);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-inline-end: var(--_rem-space);
  border: 1px solid var(--_c-white);
  border-radius: var(--_r-input);
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .index-dev {
    --radius: var(--_r-input-lg);
    --height: 600px;
    --padding: var(--_rem-body);
  }
  .index-dev ._container-xl {
    flex-direction: column;
    align-items: flex-start;
  }
  .index-dev .text {
    margin-inline-start: var(--padding);
  }
  .index-dev .title {
    --fs: var(--_rem-list);
    margin-block-start: var(--padding);
  }
  .index-dev ul {
    --fs: var(--_fs-body);
    --lh: var(--_rem-display);
  }
  .index-dev .image {
    width: 100%;
    height: 100vw;
    inset-block-start: auto;
    inset-block-end: -10%;
  }
}
@media (max-width: 599px) {
  .index-dev .image {
    height: 60vw;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .index-dev {
    --padding: var(--_rem-display);
  }
  .index-dev .image {
    height: 60vw;
    inset-inline-end: -20%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .index-dev {
    --padding: var(--_rem-display);
  }
  .index-dev .image {
    height: 60vw;
    inset-inline-end: -20%;
    inset-block-end: -40%;
  }
}
.index-feature {
  --padding: var(--_rem-display);
  --height: 240px;
}
.index-feature li {
  border-radius: var(--_r-input-lg);
  background-color: var(--_c-stage);
  box-shadow: 1px 0 0 var(--_c-text-bd), -1px 0 0 var(--_c-text-bd), 0 1px 0 var(--_c-text-bd), 0 -1px 0 var(--_c-text-bd), 0 calc(var(--_rem-root)*0.4) calc(var(--_rem-root)*0.6) var(--_c-black-8);
  padding: var(--padding) var(--padding) 0 var(--padding);
  box-sizing: border-box;
  height: var(--height);
  position: relative;
  transition: all var(--_dur-2) linear;
}
.index-feature li:hover {
  box-shadow: 1px 2px calc(var(--_rem-root)*2) var(--_c-prim-sd), 0px 0px 0px 2px var(--_c-prim);
  translate: 0 -10px;
}
.index-feature li:hover .btn {
  background-color: var(--_c-prim);
  color: var(--_c-white);
}
.index-feature .r01 {
  font-size: var(--_rem-subtitle);
  font-weight: bold;
  margin-block-end: var(--_m);
}
.index-feature .r02 {
  color: var(--_c-brief);
}
.index-feature .break {
  height: 2px;
  width: var(--_h-input);
  background-color: var(--_c-prim);
  margin-block-end: var(--_rem-body);
}
.index-feature .btn {
  color: var(--_c-caption);
  font-size: var(--_rem-list);
  height: var(--_rem-hero);
  line-height: var(--_rem-hero);
  aspect-ratio: 1/1;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset-inline-end: var(--padding);
  inset-block-end: var(--padding);
}
@media (max-width: 899px) {
  .index-feature {
    --padding: var(--_rem-body);
    --height: auto;
  }
  .index-feature li {
    padding: var(--padding);
  }
  .index-feature li:hover {
    translate: 0;
  }
  .index-feature .btn {
    inset-block-end: auto;
    inset-block-start: var(--padding);
  }
}
.index-code section {
  display: flex;
}
.index-code .code {
  width: 60%;
}
.index-code .box-type {
  margin: 0;
}
.index-code ._tab-head {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: 3;
}
.index-code .text {
  flex: auto;
  display: flex;
  flex-direction: column;
  padding-block-start: calc(var(--_rem-max)*2);
}
.index-code .title {
  --fs: var(--_rem-input);
  --lh: var(--_rem-hero);
  font-size: var(--fs);
  font-weight: bold;
  line-height: var(--lh);
}
.index-code .brief {
  --fs: var(--_fs-lead);
  --lh: var(--_rem-input);
  --m: var(--_rem-list);
  font-size: var(--fs);
  line-height: var(--lh);
  margin-block: var(--m);
}
.index-code .box-type-output {
  justify-content: center;
}
@media (max-width: 1199px) {
  .index-code section {
    display: block;
  }
  .index-code .text {
    text-align: center;
    margin-block-end: var(--_rem-display);
    padding-block-start: var(--_rem-display);
  }
  .index-code .brief {
    --fs: var(--_fs-body);
    --lh: var(--_rem-display);
    --m: var(--_rem-body);
  }
  .index-code .code {
    width: 100%;
  }
  .index-code ._tab-head {
    position: relative;
    justify-content: center;
  }
}
.index-demos .demos > li {
  border-radius: var(--_r-input-lg);
  background-color: var(--_c-stage);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 0 0 var(--_c-text-bd), -1px 0 0 var(--_c-text-bd), 0 1px 0 var(--_c-text-bd), 0 -1px 0 var(--_c-text-bd), 0 calc(var(--_rem-root)*0.4) calc(var(--_rem-root)*0.6) var(--_c-black-8);
  transition: all var(--_dur-2) linear;
}
.index-demos .demos > li:hover {
  box-shadow: 1px 2px calc(var(--_rem-root)*2) var(--_c-prim-sd), 0px 0px 0px 2px var(--_c-prim);
  translate: 0 -10px;
}
.index-demos .box {
  padding: var(--_rem-display);
  box-sizing: border-box;
  width: 100%;
}
.index-demos .link {
  font-size: var(--_fs-caption);
  display: block;
  height: var(--_rem-display);
  line-height: var(--_rem-display);
  text-align: center;
  aspect-ratio: 1/1;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}
@media (hover: hover) {
  .index-demos .link {
    display: none;
  }
  .index-demos .demos > li:hover .link {
    display: block;
  }
}
footer {
  margin-block-start: var(--_rem-hero);
  margin-block-end: var(--_m);
  display: flex;
}
footer .left {
  flex: auto;
}
footer .left a {
  color: var(--_c-brief);
  margin-inline-end: var(--_rem-display);
}
footer .left a:hover {
  color: var(--_c-prim);
}
.body {
  display: flex;
}
.content ._hr {
  margin: var(--_rem-input) auto;
}
.content > table {
  margin: var(--_m) auto;
}
.content .res-intro img,
.content > img {
  --img-w: 800px;
  width: min(100%,var(--img-w));
  margin: var(--_rem-display) auto;
  border-radius: var(--_r-input-lg);
  border: var(--_px-body) solid var(--_c-stage);
  box-shadow: 1px 0 0 var(--_c-text-bd), -1px 0 0 var(--_c-text-bd), 0 1px 0 var(--_c-text-bd), 0 -1px 0 var(--_c-text-bd), 0 calc(var(--_rem-root)*0.4) calc(var(--_rem-root)*0.6) var(--_c-black-8);
  display: block;
  box-sizing: border-box;
  transition: all var(--_dur-2) linear;
}
.content .res-intro img:hover,
.content > img:hover {
  scale: 1.02;
}
.lock {
  --padding: calc(var(--_rem-root)*10);
  padding: var(--padding) 0;
  border-radius: var(--_r-input-lg);
  box-sizing: border-box;
  transition: all var(--_dur-2) linear;
  box-shadow: 1px 0 0 var(--_c-text-bd), -1px 0 0 var(--_c-text-bd), 0 1px 0 var(--_c-text-bd), 0 -1px 0 var(--_c-text-bd), 0 calc(var(--_rem-root)*0.4) calc(var(--_rem-root)*0.6) var(--_c-black-8);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: var(--_rem-display) auto;
  background-image: url(../images/lock-bg-l.svg), url(../images/lock-bg-r.svg);
  background-repeat: no-repeat;
  background-position: -100px -100px, calc(100% + 300px) center;
  background-size: auto 100%, auto 150%;
}
.lock .text {
  width: 90%;
}
.lock .icon {
  margin-block-end: var(--_rem-body);
}
.lock .r01 {
  font-size: var(--_fs-lead);
  margin-block-end: var(--_rem-body);
}
.lock:hover {
  box-shadow: 1px 2px calc(var(--_rem-root)*2) var(--_c-prim-sd), 0px 0px 0px 2px var(--_c-prim);
}
.coin {
  --padding: calc(var(--_rem-root)*10);
  padding: var(--padding) 0;
  border-radius: var(--_r-input-lg);
  box-sizing: border-box;
  transition: all var(--_dur-2) linear;
  box-shadow: 1px 0 0 var(--_c-text-bd), -1px 0 0 var(--_c-text-bd), 0 1px 0 var(--_c-text-bd), 0 -1px 0 var(--_c-text-bd), 0 calc(var(--_rem-root)*0.4) calc(var(--_rem-root)*0.6) var(--_c-black-8);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: var(--_rem-display) auto;
  background-image: url(../images/lock-bg-l.svg), url(../images/lock-bg-r.svg);
  background-repeat: no-repeat;
  background-position: -150px -150px, calc(100% + 350px) center;
  background-size: auto 100%, auto 150%;
}
.coin .text {
  width: 90%;
}
.coin .icon {
  margin-block-end: var(--_rem-body);
}
.coin .r01 {
  font-size: var(--_fs-lead);
  margin-block-end: var(--_rem-body);
}
.coin .r01 i {
  color: var(--_c-black);
  font-size: var(--_rem-caption);
  border-radius: var(--_r);
  background-color: var(--_c-warn);
  height: var(--_rem-subtitle);
  line-height: var(--_rem-subtitle);
  padding: 0 var(--_rem-min);
  margin: 0 var(--_rem-min);
}
.coin .r03 {
  margin-block-start: var(--_rem-input);
}
.coin:hover {
  box-shadow: 1px 2px calc(var(--_rem-root)*2) var(--_c-issue-sd), 0px 0px 0px 2px var(--_c-issue);
}
.prenext > * {
  color: var(--_c-text);
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input-lg);
  box-sizing: border-box;
  padding: var(--_rem-space) var(--_rem-body);
  transition: all var(--_dur-2) linear;
}
.prenext > *:hover {
  box-shadow: 0 calc(var(--_rem-root)*0.4) var(--_rem-root) var(--_c-black-12);
  translate: 0 -10px;
}
.prenext .r01 {
  color: var(--_c-caption);
  font-size: var(--_rem-caption);
}
.prenext .r03 {
  color: var(--_c-brief);
  font-size: var(--_rem-caption);
}
.prenext .r03 > * {
  margin-inline-end: var(--_rem-space);
}
.download-r > * {
  margin-block-end: var(--_rem-body);
}
.download-r .r01 {
  border-radius: var(--_r-input);
  aspect-ratio: 16/9;
}
.download-r .r01 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.download-r .r03 {
  color: var(--_c-brief);
  font-size: var(--_rem-caption);
}
.download-r .r03 > * {
  margin-inline-end: var(--_rem-space);
}
.user-center {
  --user-m: calc(var(--_rem-max)*2);
  --user-w: calc(var(--_w-input)*2);
  --user-p: var(--_rem-input);
  --user-menu: calc(var(--_rem-root)*20);
  margin: var(--user-m) auto;
  display: flex;
  position: relative;
  /*   .image {
        flex: auto;
        height: inherit;
        background: linear-gradient(125deg, var(--_c-info-aj) 0%, #0F054C 12%,#0F054C 100%);
        border-start-start-radius: inherit;
        border-end-start-radius: inherit;
        .v3-flex-center;
        
        img{
            width: 70%;
            height: 70%;
        }
    } */
}
.user-center.user-entry {
  justify-content: center;
}
.user-center .inner {
  padding: var(--user-p);
  width: min(var(--user-w),100%);
  box-shadow: 1px 0 0 var(--_c-text-bd), -1px 0 0 var(--_c-text-bd), 0 1px 0 var(--_c-text-bd), 0 -1px 0 var(--_c-text-bd), 0 calc(var(--_rem-root)*0.4) calc(var(--_rem-root)*0.6) var(--_c-black-8);
  border-radius: var(--_r-input-lg);
  background-color: var(--_c-stage);
  position: relative;
  box-sizing: border-box;
}
.user-center .inner .title {
  text-align: center;
  margin-block-end: var(--_rem-body);
}
.user-center .inner .r01 {
  font-size: var(--_rem-display);
  line-height: var(--_rem-input);
  font-weight: bold;
}
.user-center .inner .r02 {
  font-size: var(--_fs-caption);
  color: var(--_c-brief);
}
.user-center .inner .inputs {
  width: inherit;
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input);
}
.user-center .inner .inputs section:first-child {
  border: 0;
}
.user-center .inner .inputs ._field-label i:first-child {
  color: var(--_c-prim-gy);
}
.user-center .inner .storage {
  margin: var(--_rem-body) auto;
}
.user-center .inner .other {
  width: inherit;
  display: flex;
  margin-block-start: var(--_rem-input);
}
.user-center .inner .activation {
  line-height: var(--_rem-input);
  margin: var(--_rem-body) auto;
}
.user-center.user-info {
  --user-w: 100%;
}
.user-center.user-info .inner {
  display: flex;
}
.user-center.user-info .user-left {
  width: var(--user-menu);
  margin-inline-end: var(--_rem-input);
}
.user-center.user-info .user-left ul li {
  padding: var(--_rem-min) 0;
}
.user-center.user-info .user-left ul a {
  --_link-c: var(--_c-text);
  font-size: var(--_fs-lead);
  line-height: var(--_rem-input);
  border-radius: var(--_r-input);
  padding-inline-start: var(--_rem-body);
  display: block;
}
.user-center.user-info .user-left ul a i {
  color: var(--_c-prim-fc);
}
.user-center.user-info .user-left ul a[selected] {
  --_link-c: var(--_c-white);
  --_link-bg: var(--_c-prim);
}
.user-center.user-info .user-left ul a[selected] i {
  color: var(--_link-c);
}
.user-center.user-info .user-left ul a:not([selected]):hover {
  background-color: var(--_c-prim-bg);
}
.user-center.user-info .user-right {
  flex: auto;
  padding-inline-start: var(--user-p);
}
.user-center.user-info .user-right .days {
  color: var(--_c-brief);
  font-size: var(--_fs-caption);
  margin-block-start: var(--_rem-body);
}
.user-center.user-info .user-right .basic {
  display: flex;
}
.user-center.user-info .user-right AX-AVATAR {
  margin-inline-end: var(--_rem-body);
}
.user-center.user-info .user-right .files {
  flex: auto;
}
.user-center.user-info .user-right .stats {
  margin: var(--_rem-display) 0;
}
.user-center.user-info .user-right .stats > * {
  margin-inline-end: var(--_rem-input);
}
.user-center.user-info .user-right .block-head {
  font-size: var(--_fs-lead);
}
.user-center.user-info .user-right .block-head i {
  color: var(--_c-caption);
  font-size: var(--_fs-body);
}
.user-center.user-info .user-right .coin-types .block-body {
  margin-block-start: var(--_rem-space);
}
.user-center.user-info .user-right .coin-types input {
  display: none;
}
.user-center.user-info .user-right .coin-types label {
  box-sizing: border-box;
  padding: var(--_rem-body);
  display: block;
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input);
  text-align: center;
  transition: all var(--_dur-2) linear;
  position: relative;
}
.user-center.user-info .user-right .coin-types label:hover {
  border-color: var(--_c-prim);
}
.user-center.user-info .user-right .coin-types label:has(input:checked) {
  box-shadow: 0 0 0 2px var(--_c-prim) inset;
  border-color: var(--_c-prim);
}
.user-center.user-info .user-right .coin-types .type-name {
  margin-block-end: var(--_rem-body);
  position: absolute;
  inset-inline-start: var(--_px-space);
  inset-block-start: var(--_px-space);
}
.user-center.user-info .user-right .coin-types .type-money {
  color: var(--_c-issue);
  margin: var(--_rem-body) auto;
  line-height: var(--_rem-input);
}
.user-center.user-info .user-right .coin-types .type-money * {
  vertical-align: middle;
}
.user-center.user-info .user-right .coin-types .type-money i {
  font-size: var(--_rem-list);
}
.user-center.user-info .user-right .coin-types .type-money s {
  font-size: var(--_rem-input);
}
.user-center.user-info .user-right .coin-types .type-brief {
  color: var(--_c-brief);
  line-height: var(--_rem-list);
}
.user-center.user-info .user-right .confirm-bill .block-body {
  margin-block-start: var(--_rem-space);
}
.user-center.user-info .user-right .pay-types .block-body {
  margin-block-start: var(--_rem-space);
}
@media (max-width: 899px) {
  body.body-user {
    background: none;
  }
  .user-center {
    --user-m: var(--_rem-display);
    --user-w: 100%;
    --user-menu: 100%;
    --user-p: 0;
    display: block;
  }
  .user-center .inner {
    box-shadow: none;
  }
  .user-center .inner > ax-line {
    display: none;
  }
  .user-center.user-info {
    --user-m: var(--_rem-body);
  }
  .user-center.user-info .inner {
    display: block;
  }
  .user-center.user-info .user-left {
    margin-inline-end: 0;
    margin-block-end: var(--_rem-space);
    overflow: scroll;
  }
  .user-center.user-info .user-left ul {
    display: flex;
  }
  .user-center.user-info .user-left ul a {
    font-size: var(--_fs-body);
    line-height: var(--_rem-display);
    padding-inline-end: var(--_rem-body);
  }
}
.about-block {
  --block-p: var(--_rem-display);
  --block-h: calc(var(--_rem-root)*50);
  --block-w-head: min(20vw,20rem);
  margin-block-start: var(--_rem-input);
  box-shadow: 1px 0 0 var(--_c-text-bd), -1px 0 0 var(--_c-text-bd), 0 1px 0 var(--_c-text-bd), 0 -1px 0 var(--_c-text-bd), 0 calc(var(--_rem-root)*0.4) calc(var(--_rem-root)*0.6) var(--_c-black-8);
  border-radius: var(--_r-input-lg);
  background-color: var(--_c-stage);
  position: relative;
  display: flex;
}
.about-block .block-head {
  padding: var(--block-p);
  width: var(--block-w-head);
}
.about-block .block-head .title {
  font-size: var(--_rem-list);
}
.about-block .block-head .brief {
  font-size: var(--_rem-max);
  line-height: 1.5em;
  color: var(--_c-text-bd);
}
.about-block .block-head .break {
  width: var(--_rem-display);
  height: 2px;
  background-color: var(--_c-prim);
  margin-block-start: var(--_rem-body);
}
.about-block .block-body {
  padding: var(--block-p);
  box-sizing: border-box;
  flex: auto;
}
.about-block .block-body .inner {
  max-height: var(--block-h);
  overflow: auto;
  box-sizing: border-box;
}
.about-block .figure {
  display: block;
  border-radius: var(--_r-input);
  width: min(100%,60rem);
}
.about-block .group-block {
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input);
  display: flex;
  width: min(100%,60rem);
  padding: var(--_rem-body);
  box-sizing: border-box;
}
.about-block .group-block .left {
  height: calc(var(--_rem-display)*4);
  margin-inline-end: var(--_rem-body);
}
.about-block .group-block .right {
  flex: auto;
}
.about-block .feed {
  display: block;
  width: min(100%,60rem);
}
.about-block .feed .inputs {
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input);
}
.about-block .feed .inputs section:first-child {
  border: none;
}
@media (max-width: 899px) {
  .about-block {
    --block-p: 0;
    --block-h: auto;
    --block-w-head: auto;
    box-shadow: none;
    margin-block-start: var(--_rem-body);
    display: block;
  }
  .about-block .block-head .text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .about-block .block-head .title {
    font-size: var(--_fs-body);
  }
  .about-block .block-head .brief {
    font-size: var(--_fs-lead);
  }
  .about-block .block-head .break {
    margin: var(--_rem-space) auto;
  }
}
code[class*=language-],
pre[class*=language-] {
  line-height: 1.8em;
  font-family: var(--_ff-code);
  font-size: var(--_fs-caption);
}
pre[class*=language-] {
  padding: var(--_p);
  margin: 0 !important;
  border-radius: var(--_r-input-lg);
  outline: 0;
}
pre[class*=language-]:where(:not(.prism-lt))::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
}
:not(pre) > code[class*=language-],
pre[class*=language-] {
  background: #2d2d2d;
}
:not(pre) > code[class*=language-]:where(.prism-lt),
pre[class*=language-]:where(.prism-lt) {
  background: var(--_c-stage);
  border: 1px solid var(--_c-text-bd);
}
div.code-toolbar > .toolbar {
  inset-block-start: calc(var(--_g)*2);
  inset-inline-end: calc(var(--_g)*2);
}
div.code-toolbar > .toolbar > .toolbar-item > button {
  font-size: var(--_fs-caption);
  height: var(--_rem-display);
  box-shadow: none;
  outline: none;
}
div.code-toolbar:not(:has(.prism-lt)) > .toolbar > .toolbar-item > button {
  color: var(--_c-white);
}
div.code-toolbar:not(:has(.prism-lt)) > .toolbar > .toolbar-item > button:hover {
  color: var(--_c-white);
}
div.code-toolbar:has(.prism-lt) > .toolbar > .toolbar-item > button {
  /* color: var(--_c-white);

    &:hover {
        color: var(--_c-white);
    } */
}
:not(pre) > code[class*=language-]:where(:not(.prism-lt)),
pre[class*=language-]:where(:not(.prism-lt)) {
  background-color: hsl(var(--_h-prim), 10%, 15%);
}
.code-toolbar {
  margin: var(--_rem-list) auto;
}
.prism-lt {
  color: var(--_c-brief) !important;
  background-color: var(--_c-stage) !important;
}
.prism-lt .token.comment,
.prism-lt .token.prolog,
.prism-lt .token.doctype,
.prism-lt .token.cdata {
  color: #93a1a1;
}
.prism-lt .token.punctuation {
  color: #586e75;
}
.prism-lt .token.namespace {
  opacity: 0.7;
}
.prism-lt .token.property,
.prism-lt .token.tag,
.prism-lt .token.boolean,
.prism-lt .token.number,
.prism-lt .token.constant,
.prism-lt .token.symbol,
.prism-lt .token.deleted {
  color: #268bd2;
}
.prism-lt .token.selector,
.prism-lt .token.attr-name,
.prism-lt .token.string,
.prism-lt .token.char,
.prism-lt .token.builtin,
.prism-lt .token.url,
.prism-lt .token.inserted {
  color: #2aa198;
  /* cyan */
}
.prism-lt .token.entity {
  color: #657b83;
  /* base00 */
  background: #eee8d5;
  /* base2 */
}
.prism-lt .token.atrule,
.prism-lt .token.attr-value,
.prism-lt .token.keyword {
  color: #859900;
  /* green */
}
.prism-lt .token.function,
.prism-lt .token.class-name {
  color: #b58900;
  /* yellow */
}
.prism-lt .token.regex,
.prism-lt .token.important,
.prism-lt .token.variable {
  color: #cb4b16;
  /* orange */
}
.box-demo {
  margin: var(--_rem-list) auto;
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input-lg);
}
.box-demo .box-demo-header {
  height: var(--_rem-input);
  line-height: var(--_rem-input);
  padding: 0 var(--_p);
  border-block-end: 1px solid var(--_c-text-bd);
  box-sizing: border-box;
  display: flex;
}
.box-demo .box-demo-title {
  flex: auto;
}
.box-demo .box-demo-try {
  color: var(--_c-text);
}
.box-demo .box-demo-try:hover {
  color: var(--_c-prim);
}
.box-demo .box-demo-body {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  display: flex;
  overflow: hidden;
}
.box-code {
  margin: var(--_rem-list) auto;
}
.box-code .box-code-header {
  border-inline-start: 1px solid var(--_c-text-bd);
  border-inline-end: 1px solid var(--_c-text-bd);
  border-block-start: 1px solid var(--_c-text-bd);
  border-start-start-radius: var(--_r-input-lg);
  border-start-end-radius: var(--_r-input-lg);
  height: var(--_rem-input);
  line-height: var(--_rem-input);
  padding-inline-start: var(--_p);
  box-sizing: border-box;
}
.box-code .box-code-title {
  flex: auto;
}
.box-tab {
  margin: var(--_rem-list) auto;
  border-radius: var(--_r-input-lg);
  border: 1px solid var(--_c-text-bd);
  position: relative;
}
.box-tab > ._tab-body,
.box-tab > ._tab-body > *,
.box-tab > ._tab-body > * .code-output {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.box-tab > ._tab-head:where(:not(:has(+ ._tab-body [active] .code-toolbar))) {
  border-block-end: 1px solid var(--_c-text-bd);
}
.box-tab .code-output {
  background: linear-gradient(45deg, var(--_c-caption-bg) 0, var(--_c-caption-bg) 25%, transparent 25%, transparent 50%, var(--_c-caption-bg) 50%, var(--_c-caption-bg) 75%, transparent 75%, transparent);
  background-size: 30px 30px;
  padding: var(--_p);
  box-sizing: border-box;
}
.box-tab .code-output + a {
  color: var(--_c-text);
  line-height: var(--_rem-input);
  position: absolute;
  inset-inline-end: var(--_m);
  inset-block-start: calc(-1*var(--_rem-input));
}
.box-tab .code-output + a:hover {
  color: var(--_c-prim);
}
.box-code .code-toolbar,
.box-tab .code-toolbar {
  margin: 0;
}
.box-code pre,
.box-tab pre {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
.box-code div.code-toolbar > .toolbar,
.box-tab div.code-toolbar > .toolbar {
  opacity: 1;
  line-height: var(--_rem-input);
  inset-block-start: calc(-1*var(--_rem-input));
  inset-inline-end: 0;
  right: auto;
  inset-inline-end: 0.2em;
}
.box-code div.code-toolbar > .toolbar > .toolbar-item > button,
.box-tab div.code-toolbar > .toolbar > .toolbar-item > button {
  color: var(--_c-brief);
  height: var(--_rem-input);
  box-shadow: none;
  background: transparent;
  margin-inline-end: var(--_p);
  padding: 0;
  outline: 0;
}
.box-code div.code-toolbar > .toolbar > .toolbar-item > button:hover,
.box-tab div.code-toolbar > .toolbar > .toolbar-item > button:hover {
  color: var(--_c-brief);
}
.box-iframe {
  margin: var(--_rem-list) auto;
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input-lg);
}
.box-iframe .box-iframe-header {
  height: var(--_rem-input);
  line-height: var(--_rem-input);
  padding-inline-start: var(--_p);
  border-block-end: 1px solid var(--_c-text-bd);
  box-sizing: border-box;
  display: flex;
}
.box-iframe .box-iframe-title {
  flex: auto;
}
.box-iframe .box-iframe-tools {
  display: inline-flex;
}
.box-iframe .box-iframe-tools span {
  padding: 0 var(--_p);
  cursor: pointer;
  position: relative;
  transition: all 200ms linear;
}
.box-iframe .box-iframe-tools span:after {
  width: 1px;
  height: var(--_rem-root);
  background-color: var(--_c-text-bd);
  inset-inline-end: 0;
  inset-block-start: 50%;
  margin-block-start: calc(-0.5*var(--_rem-root));
  position: absolute;
  content: '';
}
.box-iframe .box-iframe-tools span:last-child:after {
  display: none;
}
.box-iframe .box-iframe-tools span:hover {
  color: var(--_c-prim);
}
.box-iframe .box-iframe-body {
  background: linear-gradient(45deg, var(--_c-caption-bg) 0, var(--_c-caption-bg) 25%, transparent 25%, transparent 50%, var(--_c-caption-bg) 50%, var(--_c-caption-bg) 75%, transparent 75%, transparent);
  background-size: 30px 30px;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  display: flex;
  overflow: hidden;
}
.box-iframe iframe {
  display: block;
  max-height: 500px;
}
.box-iframe iframe:after {
  clear: both;
}
.box-codepen {
  margin: var(--_rem-list) auto;
  border-radius: var(--_r-input-lg);
  border: 1px solid var(--_c-text-bd);
  overflow: hidden;
  position: relative;
}
.box-codepen .cp_embed_containerper {
  width: calc(100% + 2px);
}
.box-codepen iframe {
  margin: -1px;
}
.box-codepen:after {
  font-family: var(--_ff-code);
  background-color: var(--_c-stage);
  content: 'Playground ➞';
  pointer-events: none;
  padding-inline-end: var(--_p);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 50px;
  width: 120px;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  z-index: 2;
}
.box-codepen:hover:after {
  color: var(--_c-prim);
}
.box-type {
  --box-h-output: 240px;
  --box-h-code: 100px;
  --box-p: var(--_rem-display);
  margin: var(--_rem-list) auto;
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input-lg);
  position: relative;
}
.box-type .box-type-btns {
  position: absolute;
  inset-block-start: var(--_rem-body);
  inset-inline-end: var(--_rem-body);
}
.box-type .box-type-btns * {
  width: 12px;
  aspect-ratio: 1/1;
  border-radius: 100%;
  margin: 4px;
}
.box-type .box-type-btns *:nth-child(1) {
  background-color: var(--_c-error-sd);
}
.box-type .box-type-btns *:nth-child(2) {
  background-color: var(--_c-warn-sd);
}
.box-type .box-type-btns *:nth-child(3) {
  background-color: var(--_c-info-sd);
}
.box-type .box-type-output {
  padding: 0 var(--box-p);
  min-height: var(--box-h-output);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--_c-text-bd);
  position: relative;
}
.box-type .box-type-input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.box-type .box-type-code {
  background-color: var(--_c-caption-bg);
  position: relative;
}
.box-type .box-type-control {
  color: var(--_c-brief);
  font-size: var(--_fs-caption);
  height: var(--box-p);
  line-height: var(--box-p);
  aspect-ratio: 1/1;
  text-align: center;
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  transition: 200;
}
.box-type .box-type-control:hover {
  color: var(--_c-prim);
  cursor: pointer;
}
.box-type .prism-lt {
  background-color: transparent !important;
  border: none !important;
}
.box-type .code-toolbar {
  margin: 0;
  padding: var(--box-p) var(--box-p) 0 var(--box-p);
  min-height: var(--box-h-code);
}
.box-type pre[class*=language-] {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-inline-start: 0;
  border-inline-end: 0;
  border-block-end: 0;
  padding: 0;
}
.box-type code {
  font-size: var(--_fs-body) !important;
}
.layout-item {
  color: var(--_c-caption);
  height: 100px;
  border: 1px solid var(--_c-text-bd);
  background-color: var(--_c-stage);
  border-radius: var(--_r);
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.layout-free {
  color: var(--_c-caption);
  border: 1px solid var(--_c-text-bd);
  background-color: var(--_c-stage);
  border-radius: var(--_r);
  padding: var(--_p);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-item {
  color: var(--_c-caption);
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.grid-wrap:where(:not([class*=_ratio])) .grid-item {
  height: 100px;
}
.grid-wrap:where(:not(._fence, ._fluid)) .grid-item {
  border: 1px solid var(--_c-text-bd);
}
.grid-wrap > *:nth-child(even) {
  background-color: var(--_c-stage);
}
.grid-wrap > *:nth-child(odd) {
  background-color: var(--_c-text-bs);
}
.icon-item {
  text-align: center;
}
.icon-item .r01 {
  height: calc(var(--_rem-root)*8);
  line-height: calc(var(--_rem-root)*8);
}
.icon-item .r01 span {
  font-size: calc(var(--_rem-root)*2.8);
}
.icon-item .r02 {
  font-size: var(--_rem-caption);
  height: calc(var(--_rem-root)*3.8);
  line-height: calc(var(--_rem-root)*3.8);
  white-space: nowrap;
  color: var(--_c-brief);
}
.align-item {
  color: var(--_c-caption);
  border: 1px solid var(--_c-text-bd);
  height: 100px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
}
.align-wrap > *:nth-child(even) {
  background-color: var(--_c-stage);
}
.align-wrap > *:nth-child(odd) {
  background-color: var(--_c-caption-bg);
}
.shadow-wrap {
  display: flex;
  flex-wrap: wrap;
}
.shadow-item {
  background-color: var(--_c-stage);
  width: 100px;
  height: 60px;
  border-radius: var(--_r-input-lg);
  margin: var(--_rem-list);
  display: flex;
  justify-content: center;
  align-items: center;
}
.gradient-wrap > * {
  border-radius: var(--_r);
  color: var(--_c-white);
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.background-wrap > * {
  border-radius: var(--_r);
  color: var(--_c-white);
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.background-wrap > *[class*=-lt] {
  color: var(--_c-text);
}
.color-wrap > * {
  border-radius: var(--_r);
  color: var(--_c-white);
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.color-group {
  text-align: center;
  line-height: var(--_rem-subtitle);
}
.color-group div:nth-child(1) div {
  padding: var(--_rem-body) 0;
  color: var(--_c-white);
}
.color-group div:nth-child(2) div {
  padding: var(--_rem-body) 0;
}
.pop {
  background-color: var(--_c-prim);
  color: var(--_c-white);
  text-align: center;
  width: 400px;
  height: 200px;
  line-height: 200px;
  position: absolute;
  z-index: 81;
  display: none;
}
.color-group.color-prim div:nth-child(1) div:nth-child(1) {
  background-color: var(--_c-prim);
}
.color-group.color-prim div:nth-child(1) div:nth-child(2) {
  background-color: var(--_c-prim-dp);
}
.color-group.color-prim div:nth-child(1) div:nth-child(3) {
  background-color: var(--_c-prim-dk);
}
.color-group.color-prim div:nth-child(2) div:nth-child(1) {
  background-color: var(--_c-prim-ht);
}
.color-group.color-prim div:nth-child(2) div:nth-child(2) {
  background-color: var(--_c-prim-bd);
}
.color-group.color-prim div:nth-child(2) div:nth-child(3) {
  background-color: var(--_c-prim-bg);
}
.color-group.color-succ div:nth-child(1) div:nth-child(1) {
  background-color: var(--_c-succ);
}
.color-group.color-succ div:nth-child(1) div:nth-child(2) {
  background-color: var(--_c-succ-dp);
}
.color-group.color-succ div:nth-child(2) div:nth-child(1) {
  background-color: var(--_c-succ-ht);
}
.color-group.color-succ div:nth-child(2) div:nth-child(2) {
  background-color: var(--_c-succ-bd);
}
.color-group.color-succ div:nth-child(2) div:nth-child(3) {
  background-color: var(--_c-succ-bg);
}
.color-group.color-error div:nth-child(1) div:nth-child(1) {
  background-color: var(--_c-error);
}
.color-group.color-error div:nth-child(1) div:nth-child(2) {
  background-color: var(--_c-error-dp);
}
.color-group.color-error div:nth-child(2) div:nth-child(1) {
  background-color: var(--_c-error-ht);
}
.color-group.color-error div:nth-child(2) div:nth-child(2) {
  background-color: var(--_c-error-bd);
}
.color-group.color-error div:nth-child(2) div:nth-child(3) {
  background-color: var(--_c-error-bg);
}
.color-group.color-info div:nth-child(1) div:nth-child(1) {
  background-color: var(--_c-info);
}
.color-group.color-info div:nth-child(1) div:nth-child(2) {
  background-color: var(--_c-info-dp);
}
.color-group.color-info div:nth-child(2) div:nth-child(1) {
  background-color: var(--_c-info-ht);
}
.color-group.color-info div:nth-child(2) div:nth-child(2) {
  background-color: var(--_c-info-bd);
}
.color-group.color-info div:nth-child(2) div:nth-child(3) {
  background-color: var(--_c-info-bg);
}
.color-group.color-warn div:nth-child(1) div:nth-child(1) {
  background-color: var(--_c-warn);
}
.color-group.color-warn div:nth-child(1) div:nth-child(2) {
  background-color: var(--_c-warn-dp);
}
.color-group.color-warn div:nth-child(2) div:nth-child(1) {
  background-color: var(--_c-warn-ht);
}
.color-group.color-warn div:nth-child(2) div:nth-child(2) {
  background-color: var(--_c-warn-bd);
}
.color-group.color-warn div:nth-child(2) div:nth-child(3) {
  background-color: var(--_c-warn-bg);
}
.color-group.color-issue div:nth-child(1) div:nth-child(1) {
  background-color: var(--_c-issue);
}
.color-group.color-issue div:nth-child(1) div:nth-child(2) {
  background-color: var(--_c-issue-dp);
}
.color-group.color-issue div:nth-child(2) div:nth-child(1) {
  background-color: var(--_c-issue-ht);
}
.color-group.color-issue div:nth-child(2) div:nth-child(2) {
  background-color: var(--_c-issue-bd);
}
.color-group.color-issue div:nth-child(2) div:nth-child(3) {
  background-color: var(--_c-issue-bg);
}
.color-group.color-text div:nth-child(1) div:nth-child(1) {
  background-color: var(--_c-text);
}
.color-group.color-text div:nth-child(1) div:nth-child(2) {
  background-color: var(--_c-text-dp);
}
.color-group.color-text div:nth-child(2) div:nth-child(1) {
  background-color: var(--_c-text-ht);
}
.color-group.color-text div:nth-child(2) div:nth-child(2) {
  background-color: var(--_c-text-bd);
}
.color-group.color-text div:nth-child(2) div:nth-child(3) {
  background-color: var(--_c-text-bg);
}
.scroll-parent {
  border: 1px solid var(--_c-text-bd);
}
.scroll-parent ._scroll-wrap {
  background-color: var(--_c-text-bg);
}
.scroll-parent .small,
.scroll-parent .big {
  display: flex;
  justify-content: center;
  align-items: center;
}
.scroll-parent[flow=h] {
  height: 200px;
}
.scroll-parent[flow=h] .small {
  width: 300px;
  height: 100%;
}
.scroll-parent[flow=h] .big {
  width: 150%;
  height: 100%;
}
.scroll-parent[flow=v] {
  height: 300px;
}
.scroll-parent[flow=v] .small {
  height: 100px;
}
.scroll-parent[flow=v] .big {
  height: 200%;
}
.scroll-parent > ul > li {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.scroll-parent > ul > li:nth-child(odd) {
  background-color: bisque;
}
.scroll-parent > ul > li:nth-child(even) {
  background-color: darksalmon;
}
.scroll-parent[flow=v] > ul > li {
  height: 80px;
}
.scroll-parent[flow=h] > ul {
  height: 100%;
}
.scroll-parent[flow=h] > ul > li {
  height: 100%;
  width: 200px;
}
.scroll-parent[gridded][flow=h] > ul > li {
  height: 100px;
}
.scroll-parent[gridded][flow=v] > ul > li {
  height: 150px;
  width: 25%;
}
.scroll-parent [class*=_box-],
.scroll-parent [rep=media] {
  height: inherit;
}
.scroll-parent img {
  height: inherit;
  object-fit: cover;
}
.scroll-parent iframe,
.scroll-parent video,
.scroll-parent audio {
  height: inherit;
}
.scroll-nest {
  width: 100%;
  height: 100%;
}
.scroll-nest > ul > li {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.scroll-nest > ul > li:nth-child(odd) {
  background-color: lightslategrey;
}
.scroll-nest > ul > li:nth-child(even) {
  background-color: lightsteelblue;
}
.scroll-nest[flow=v] > ul > li {
  height: 50px;
}
.scroll-nest[flow=h] > ul {
  height: 100%;
}
.scroll-nest[flow=h] > ul > li {
  height: 100%;
  width: 200px;
}
.scroll-nest [class*=_box-],
.scroll-nest [rep=media] {
  height: inherit;
}
.scroll-nest img {
  height: inherit;
  object-fit: cover;
}
.scroll-nest iframe,
.scroll-nest video,
.scroll-nest audio {
  height: inherit;
}
.masonrys {
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r);
}
.masonrys > * {
  background-color: var(--_c-text-bg);
  border-radius: var(--_r);
  text-align: center;
}
.masonrys img {
  width: 100%;
  display: block;
}
.swipes {
  border: 1px solid var(--_c-text-bd);
  width: 100%;
}
.swipes > ._swipe-wrap > li {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.swipes > ._swipe-wrap > li:nth-child(odd) {
  background-color: antiquewhite;
}
.swipes > ._swipe-wrap > li:nth-child(even) {
  background-color: lightsalmon;
}
.swipes[flow=h] {
  height: 300px;
}
.swipes[flow=h] > ._swipe-wrap > :not(.swipe-nest) > ._swipe-wrap > li {
  width: 100px;
  height: 300px;
}
.swipes[flow=v] {
  height: 500px;
}
.swipes[flow=v] > ._swipe-wrap > li {
  height: 100px;
}
.swipes[flow=h] > ._swipe-wrap > li.s01,
.swipes[flow=h] > ._swipe-wrap > li.s04,
.swipes[flow=h] > ._swipe-wrap > li.s06,
.swipes[flow=h] > ._swipe-wrap > li.s09,
.swipes[flow=h] > ._swipe-wrap > li.s13 {
  width: 200px;
}
.swipes[flow=h] > ._swipe-wrap > li.s02,
.swipes[flow=h] > ._swipe-wrap > li.s08,
.swipes[flow=h] > ._swipe-wrap > li.s10,
.swipes[flow=h] > ._swipe-wrap > li.s15,
.swipes[flow=h] > ._swipe-wrap > li.s17 {
  width: 160px;
}
.swipes[flow=h] > ._swipe-wrap > li.s03,
.swipes[flow=h] > ._swipe-wrap > li.s07,
.swipes[flow=h] > ._swipe-wrap > li.s12,
.swipes[flow=h] > ._swipe-wrap > li.s16,
.swipes[flow=h] > ._swipe-wrap > li.s18 {
  width: 260px;
}
.swipes[flow=v] > ._swipe-wrap > li.s01,
.swipes[flow=v] > ._swipe-wrap > li.s04,
.swipes[flow=v] > ._swipe-wrap > li.s06,
.swipes[flow=v] > ._swipe-wrap > li.s09,
.swipes[flow=v] > ._swipe-wrap > li.s13 {
  height: 200px;
}
.swipes[flow=v] > ._swipe-wrap > li.s02,
.swipes[flow=v] > ._swipe-wrap > li.s08,
.swipes[flow=v] > ._swipe-wrap > li.s10,
.swipes[flow=v] > ._swipe-wrap > li.s15,
.swipes[flow=v] > ._swipe-wrap > li.s17 {
  height: 160px;
}
.swipes[flow=v] > ._swipe-wrap > li.s03,
.swipes[flow=v] > ._swipe-wrap > li.s07,
.swipes[flow=v] > ._swipe-wrap > li.s12,
.swipes[flow=v] > ._swipe-wrap > li.s16,
.swipes[flow=v] > ._swipe-wrap > li.s18 {
  height: 260px;
}
._swipe-pgn.mypagi[type=lamp] > * {
  background-color: rgba(250, 0, 0, 0.5);
}
._swipe-pgn.mypagi[type=lamp] [active] {
  background-color: red;
}
._swipe-prev.mynavi,
._swipe-next.mynavi {
  color: red;
}
._swipe-prev.mynavi[disabled],
._swipe-next.mynavi[disabled] {
  color: rgba(250, 0, 0, 0.5);
}
.swipe-nest {
  width: 100%;
  height: 100%;
}
.swipe-nest > ._swipe-wrap > li:nth-child(odd) {
  background-color: papayawhip;
}
.swipe-nest > ._swipe-wrap > li:nth-child(even) {
  background-color: navajowhite;
}
.inf-demo {
  height: 400px;
  overflow-y: scroll;
}
.inf-demo li {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inf-demo li:nth-child(odd) {
  background-color: papayawhip;
}
.inf-demo li:nth-child(even) {
  background-color: navajowhite;
}
.virts {
  border: 1px solid var(--_c-text-bd);
}
.virts section {
  line-height: 28px;
  padding: 14px;
  box-sizing: border-box;
}
.virts[axis=y] {
  height: 400px;
}
.virts[axis=y] section {
  border-block-end: 1px solid var(--_c-text-bd);
}
.virts[axis=x] {
  height: 200px;
}
.virts[axis=x] ._virt-wrap,
.virts[axis=x] ._virt-cont,
.virts[axis=x] ._virt-list {
  height: inherit;
}
.virts[axis=x] ._virt-list {
  display: flex;
}
.virts[axis=x] section {
  height: 100%;
  border-inline-end: 1px solid var(--_c-text-bd);
}
.ani {
  color: var(--_c-white);
  background-color: var(--_c-prim);
  width: 100px;
  border-radius: var(--_r);
  aspect-ratio: 1/1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.opacity-wrap > * {
  color: var(--_c-stage);
  text-align: center;
  height: var(--_h-input);
  line-height: var(--_h-input);
  background-color: var(--_c-prim);
  border-radius: var(--_r);
}
.flip-demo {
  --theme: var(--_c-prim);
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input);
}
.flip-demo > * {
  background-color: var(--theme);
  color: var(--_c-white);
  height: var(--_h-input);
  border: 2px dashed var(--theme);
  box-sizing: border-box;
  margin: var(--_rem-body);
  border-radius: calc(var(--_r)*2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.flip-demo > *.moving {
  color: transparent;
  background-color: transparent;
  border: 2px dashed var(--_c-text-bd);
}
.flip-demo > *.moving * {
  opacity: 0;
}
.flip-demo > *.candrag {
  cursor: grab;
}
.flip-demo > *:active {
  cursor: grabbing;
}
.flip-demo > *[dropping] {
  opacity: 0.5;
}
.drag-demo {
  --theme: var(--_c-stage);
  border: 1px solid var(--_c-text-bd);
  border-radius: var(--_r-input);
  min-height: var(--_rem-max);
}
.drag-demo[dropping] {
  border-color: var(--_c-prim);
}
.drag-demo li {
  background-color: var(--theme);
  border: 1px solid var(--_c-text-bd);
  box-sizing: border-box;
  margin: var(--_rem-body);
  padding: var(--_rem-body);
  border-radius: var(--_r);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drag-demo li li {
  background-color: var(--_c-text-bg);
  margin: auto;
  margin-block-start: var(--_rem-body);
  width: 100%;
}
.drag-demo li:has(>li, >._holder-drop, >.embedbox) {
  flex-direction: column;
}
.drag-demo li[dropping] {
  border-color: var(--_c-prim);
}
.drag-demo li[dropped] {
  border-color: var(--_c-succ);
}
.drag-demo .embedbox {
  border: 1px solid var(--_c-prim-bd);
  background-color: var(--_c-prim-bg);
  padding: var(--_rem-body);
  box-sizing: border-box;
  border-radius: var(--_r-input);
  width: 100%;
}
.drag-box {
  color: var(--_c-white);
  background-color: var(--_c-prim);
  border-radius: var(--_r-input);
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--_w-input);
  height: var(--_h-input);
}
.drop-box {
  background-color: var(--_c-text-bg);
  border-radius: var(--_r-input);
  border: 1px solid var(--_c-text-bd);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: var(--_w-input);
  min-height: calc(var(--_h-input)*3);
  padding: var(--_rem-body);
  margin: var(--_rem-body) 0;
  box-sizing: border-box;
  position: relative;
}
.drop-box .drag-box {
  width: 100%;
}
.drop-box[dropping] {
  border-color: var(--_c-prim);
}
@media (max-width: 899px) {
  :root {
    --w-body: 100%;
    --m-top: var(--_rem-body);
  }
  menu,
  aside:where(:not(.alt-info)) {
    position: absolute;
    inset-inline-start: -10000px;
  }
  .index-stats ax-stats {
    margin-block-end: var(--_font);
  }
  .lock,
  .coin {
    --padding: var(--_rem-max);
  }
  .body:where(:has(.alt-info)) {
    display: block;
  }
  .body:where(:has(.alt-info)) main {
    width: auto;
  }
  .body:where(:has(.alt-info)) .alt-info {
    margin-inline-start: 0;
    margin-block-start: var(--_rem-display);
    width: auto;
  }
}
@media (max-width: 599px) {
  .lock,
  .coin {
    background: none;
  }
  h2 a,
  h3 a {
    display: none;
  }
  .list-post li {
    margin-block-end: var(--_rem-display);
  }
}