/*
 *Last modified: 2025-06-22 07:36:55
 */
:root {
    --w-body: var(--_w-xl);
    --w-menu: 280px;
    --w-aside: 280px;
    --m-top: var(--_rem-display);
    --offset-top: calc(5.4rem + var(--m-top));
    --gap-col: var(--_rem-max);
}
/*全局*/
OC-HEADER {
    --_header-bw: 0;
    ._header-wrap {
        box-shadow: 0 0px 0 1px var(--_c-black-12);
    }
}
body.body-index {
    OC-DIVIDER {
        width: 30rem;
    }
}
header {}
menu {
    width: var(--w-menu);
    margin-inline-end: var(--gap-col);
    .inner {
        position: sticky;
        inset-block-start: var(--offset-top);
    }
    .inner:has(.menu-api) {
        max-height: calc(100vh - var(--offset-top));
        overflow-y: auto;
    }
    .menu-api {
    }
}
aside {
    width: var(--w-aside);
    margin-inline-start: var(--gap-col);
    .menu-sub {
    }
    .inner {
        position: sticky;
        inset-block-start: var(--offset-top);
    }
    .inner:has(OC-ANCHORS) {
        max-height: calc(100vh - var(--offset-top));
        overflow-y: auto;
    }
    OC-ANCHORS {
        --_anch-pos: initial;
        --_anchor-p: 0;
    }
    &:has(.inner OC-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);
    .search-tips {
        color: var(--_c-brief);
        font-size: var(--_fs-caption);
    }
}
.list-filter {
    margin-block-end: var(--m-top);
}
.index-intro {
    --aligin: start;
    color: var(--_c-white);
    text-align: var(--align);
    height: min(calc(100vh - var(--_rem-hero) - 1rem),940px);
    background-image: url(../images/index-bg-r.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 90%;
    background-color: #302c94;
    position: relative;
}
.index-intro ._container-xl {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.index-intro .text {
    flex: auto;
}
.index-intro .r01 {
    --fs: var(--_fs-hero);
    --lh: 1.2;
    --m: var(--_rem-display);
    font-size: var(--fs);
    font-weight: bold;
    line-height: var(--lh);
    margin-block-end: var(--m);
    background: linear-gradient(170deg, var(--_c-prim-fc) 0%, var(--_c-white) 30%, var(--_c-white) 60%, var(--_c-prim-aj) 100%);
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.index-intro .break {
    height: 3px;
    width: var(--_rem-max);
    background-color: var(--_c-prim-aj);
    margin-block-end: var(--_rem-list);
}
.index-intro .r02 {
    color: var(--_c-white);
    padding-block-end: var(--_rem-display);
}
.index-intro .r03 {
    padding-block-end: var(--_rem-display);
}
.index-intro .r04 {
    font-size: 1.2rem;
    a {
        --_link-c: var(--_c-white-60);
        --_link-c-hov: var(--_c-white);
    }
}
.index-intro .r05 {
    color: var(--_c-white-60);
    margin-block-start: var(--_rem-max);
    >* {
        font-size: 1.8rem;
        margin-inline-end: var(--_rem-display);
    }
    >a {
        --_link-c: var(--_c-white-60);
    }
}
.index-intro .image {
    img {
        height: min(70vh,700px);
    }
}
@media (max-width: calc(1200px - 1px)),
(min-width: 1200px) and (max-width:calc(1536px - 1px)) and (hover:none) {
    .index-intro {
        --align: center;
        height: auto;
        padding: var(--_rem-max) 0;
        .r01 {
            --fs: var(--_fs-title);
            --m: var(--_rem-body);
        }
        .r05 {
            margin-block-start: var(--_rem-display);
        }
        .break {
            margin-inline-start: auto;
            margin-inline-end: auto;
            margin-block-end: var(--_rem-body);
        }
        .notices {
            position: relative;
            inset-block-end: 0;
            margin-block-start: var(--_rem-display);
            order: 3;
        }
    }
    .index-intro ._container-xl {
        flex-direction: column;
        .image {
            order: 1;
            width: 50%;
            img {
                height: auto;
                width: 100%;
                translate: 0 0;
                margin-bottom: var(--_rem-max);
            }
        }
        .text {
            order: 2;
        }
    }
    .index-intro OC-BTN {
        width: 100%;
        margin-block-end: var(--_rem-body);
    }
    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;
    }
}
@media (max-width: calc(600px - 1px)),
(min-width: 600px) and (max-width: calc(900px - 1px)) and (orientation:landscape) {
    .index-intro {
        padding: var(--_rem-body) 0;
    }
    .index-intro ._container-xl {
        .image {
            width: min(80%,260px);
            img {
                margin-bottom: var(--_rem-body);
            }
        }
    }
}
.index-user {
    --height: 400px;
    --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 .2rem .6rem rgba(0, 0, 0, .08);
    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;
    &:hover {
        box-shadow: 1px 2px 2rem var(--_c-prim-sd), 0px 0px 0px 2px var(--_c-prim);
        .btn {
            color: var(--_c-white);
            background-color: var(--_c-prim);
            border-color: var(--_c-prim);
        }
        .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;
    &: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);
    [class*=icon] {
        color: var(--_c-caption);
        font-size: var(--_rem-subtitle);
    }
}
.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;
    &: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:calc(1536px - 1px)) {
    .index-user {
        --height: auto;
        --padding: var(--_rem-body);
        --margin: var(--_rem-body);
        --avatar: var(--_rem-input);
        .btn {
            position: relative;
            width: calc(100% + var(--_rem-body)*2);
            margin-inline-start: calc(var(--_rem-body)*-1);
        }
        .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, rgb(220, 56, 72) 0%, rgb(15, 51, 87) 8%, rgb(102, 26, 255) 100%);
    border-radius: var(--radius);
    position: relative;
    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: 14rem;
    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);
    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;
    }
}
.index-dev .btn {}
@media (max-width:calc(1200px - 1px)) {
    .index-dev {
        --radius: var(--_r-input-lg);
        --height: 600px;
        --padding: var(--_rem-body);
        ._container-xl {
            flex-direction: column;
            align-items: flex-start;
        }
        .text {
            margin-inline-start: var(--padding);
        }
        .title {
            --fs: var(--_rem-list);
            margin-block-start: var(--padding);
        }
        ul {
            --fs: var(--_fs-body);
            --lh: var(--_rem-display);
        }
        .image {
            width: 100%;
            height: 100vw;
            inset-block-start: auto;
            inset-block-end: -10%;
        }
    }
}
@media (max-width:calc(600px - 1px)) {
    .index-dev .image {
        height: 60vw;
    }
}
@media (min-width:600px) and (max-width:calc(900px - 1px)) {
    .index-dev {
        --padding: var(--_rem-display);
    }
    .index-dev .image {
        height: 60vw;
        inset-inline-end: -20%;
    }
}
@media (min-width:(900px)) and (max-width:calc(1200px - 1px)) {
    .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 .2rem .6rem rgba(0, 0, 0, .08);
    padding: var(--padding) var(--padding) 0 var(--padding);
    box-sizing: border-box;
    height: var(--height);
    position: relative;
    transition: all var(--_dur-2) linear;
    &:hover {
        box-shadow: 1px 2px 2rem var(--_c-prim-sd), 0px 0px 0px 2px var(--_c-prim);
        translate: 0 -10px;
        .btn {
            background-color: var(--_c-prim);
            color: var(--_c-white);
        }
    }
}
.index-feature .text {}
.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:calc(900px - 1px)) {
    .index-feature {
        --padding: var(--_rem-body);
        --height: auto;
        li {
            padding: var(--padding);
            &:hover {
                translate: 0;
            }
        }
        .btn {
            inset-block-end: auto;
            inset-block-start: var(--padding);
        }
    }
}
.index-code {
    section {
        display: flex;
    }
    .code {
        width: 56%;
    }
    .box-type {
        margin: 0;
    }
    ._tab-head {
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        z-index: 3;
    }
    .text {
        flex: auto;
        display: flex;
        flex-direction: column;
        padding-block-start: calc(var(--_rem-max)*2);
    }
    .title {
        --fs: var(--_rem-input);
        --lh: var(--_rem-hero);
        font-size: var(--fs);
        font-weight: bold;
        line-height: var(--lh);
    }
    .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);
    }
    .btn {}
    .box-type-output {
        justify-content: center;
    }
}
@media (max-width:calc(1200px - 1px)) {
    .index-code {
        section {
            display: block;
        }
        .text {
            text-align: center;
            margin-block-end: var(--_rem-display);
            padding-block-start: var(--_rem-display);
        }
        .brief {
            --fs: var(--_fs-body);
            --lh: var(--_rem-display);
            --m: var(--_rem-body);
        }
        .code {
            width: 100%;
        }
        ._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 .2rem .6rem rgba(0, 0, 0, .08);
        transition: all var(--_dur-2) linear;
    }
    .demos>li:hover {
        box-shadow: 1px 2px 2rem var(--_c-prim-sd), 0px 0px 0px 2px var(--_c-prim);
        translate: 0 -10px;
    }
    .box {
        padding: var(--_rem-display);
        box-sizing: border-box;
        width: 100%;
    }
    .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;
        }
        .demos>li:hover .link {
            display: block;
        }
    }
}
.btm-ad {
    color: var(--_c-white);
    padding: 80px 0;
    background-color: #302c94;
    text-align: center;
    background-image: url(../images/bg-btm.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    .r03 {
        margin-top: var(--_px-display);
    }
}
@media (max-width: calc(600px - 1px)),
(min-width: 600px) and (max-width: (900px - 1px)) and (orientation:landscape) {
    .btm-ad {
        padding: var(--_rem-display) 0;
    }
}
.brandings {
    text-align: center;
    margin-top: var(--_rem-display);
    li {
        box-sizing: border-box;
        aspect-ratio: 1/1;
        border-radius: var(--_r-input);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: min(60%,300px);
    }
}
footer {}
/* footer {
    margin-block-start: var(--_rem-hero);
    margin-block-end: var(--_m);
    display: flex;
    .left {
        flex: auto;
        a {
            color: var(--_c-brief);
            margin-inline-end: var(--_rem-display);
        }
        a:hover {
            color: var(--_c-prim);
        }
    }
    .right {}
} */
._footer {
    position: relative;
    z-index: 999;
    .gt-parent {
        position: relative;
        z-index: 3;
    }
    .gt_white_content {
        height: 714px;
        max-height: calc(100vh - 200px);
        width: 1200px;
        max-width: calc(100vw - 48px);
        box-sizing: border-box;
        margin: auto;
        transform: translate(-50%, -50%);
        border-radius: var(--_r-bubble);
    }
    [rep=security] {
        >a {
            border: 1px solid var(--_c-text-bd);
            border-radius: var(--_r-input);
            overflow: hidden;
        }
    }
    [rep=policy] {
        >a {
            --_link-c: var(--_c-brief);
            margin-inline-end: var(--_px-body);
        }
    }
}
@media (max-width:calc(600px - 1px)) {
    ._footer {}
}
.col-head {
    padding: 48px 0;
    background-color: #302c94;
    color: var(--_c-white);
    text-align: center;
    background-image: url(../images/bg-cat.svg);
    background-repeat: no-repeat;
    background-size: 200%;
    background-position: center;
    h1 {
        background: linear-gradient(170deg, var(--_c-prim-fc) 0%, var(--_c-white) 30%, var(--_c-white) 60%, var(--_c-prim-aj) 100%);
        background-clip: text;
        color: transparent;
        display: inline-block;
    }
}
@media (max-width: calc(600px - 1px)),
(min-width: 600px) and (max-width: (900px - 1px)) and (orientation:landscape) {
    .col-head {
        padding: var(--_rem-body) 0;
    }
}
.body {
    display: flex;
}
.content {
    ._hr {
        margin: var(--_rem-input) auto;
    }
    >table {
        margin: var(--_m) auto;
    }
    .res-intro img,
    >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 .2rem .6rem rgba(0, 0, 0, .08);
        display: block;
        box-sizing: border-box;
        transition: all var(--_dur-2) linear;
        &:hover {
            scale: 1.02;
        }
    }
}
.buy-membership {
    margin: calc(var(--_rem-max)*2) auto var(--_rem-max) auto;
    &[disabled] {
        opacity: 0.5;
    }
    .membership {
        line-height: var(--_rem-display);
        border: 1px solid var(--_c-text-bd);
        border-radius: var(--_r-input-lg);
        overflow: hidden;
        transition: all var(--_dur-2) linear;
        &:hover {
            border-color: var(--_c-prim);
            box-shadow: 0 0 0 1px var(--_c-prim), 2px 2px 10px 0 var(--_c-prim-fc);
        }
        &[disabled] {
            opacity: 0.5;
        }
    }
    .inner {
        box-sizing: border-box;
        padding: var(--_rem-subtitle);
    }
    .membership:where(:has(.popular)) {
        border-color: var(--_c-prim);
        margin-top: calc(var(--_rem-display)*-1);
    }
    .popular {
        background-color: var(--_c-prim);
        text-align: center;
        color: var(--_c-white);
    }
    ._t-lc {
        color: var(--_c-caption);
    }
    .price {
        font-size: var(--_fs-h1);
        font-weight: bold;
    }
    .r01 {
        font-size: var(--_fs-subtitle);
        font-weight: bold;
    }
    .r02 {
        color: var(--_c-brief);
    }
    .r04 {
        color: var(--_c-prim);
        padding: var(--_rem-body) 0;
    }
    .r05 {
        >*:before {
            font-family: var(--_ff-icon);
            width: var(--_rem-list);
            display: inline-flex;
        }
        >*:where(:not([disabled])):before {
            content: 'check-o-f';
            color: var(--_c-prim-lt);
        }
        >*:where([disabled]):before {
            content: 'close-o-f';
            color: var(--_c-error-lt);
        }
        [disabled] {
            color: var(--_c-brief);
        }
    }
}
@media (max-width:calc(1200px - 1px)) {
    .buy-membership {
        margin: auto;
        .premium:where(:has(.popular)) {
            margin-top: 0;
        }
    }
}
.about {
    width: min(120rem,100%);
    margin: auto;
    box-sizing: border-box;
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_r-input-lg);
    padding: var(--_rem-display);
    box-shadow: 10px 10px 0 0 var(--_c-text-bg);
}
@media (max-width: calc(600px - 1px)),
(min-width: 600px) and (max-width: (900px - 1px)) and (orientation:landscape) {
    .about {
        padding: 0;
        border: none;
        box-shadow: none;
    }
}
.swpm-partial-protection-msg,
.swpm-partial-protection,
.swpm-partial-protection-text {
    display: block;
}
.has-login {
    padding: var(--_rem-display) 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 .2rem .6rem rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: var(--_rem-display) auto;
    &:hover {
        box-shadow: 1px 2px 2rem var(--_c-prim-sd), 0px 0px 0px 2px var(--_c-prim);
    }
}
.lock {
    --padding: 10rem;
    --margin: var(--_rem-display);
    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 .2rem .6rem rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: var(--margin) 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%;
    .text {
        width: 90%;
    }
    .icon {
        margin-block-end: var(--_rem-body);
    }
    .r01 {
        font-size: var(--_fs-lead);
        margin-block-end: var(--_rem-body);
    }
    &:hover {
        box-shadow: 1px 2px 2rem var(--_c-prim-sd), 0px 0px 0px 2px var(--_c-prim);
    }
    &.lock-cont {
        --padding: 4rem;
        --margin: var(--_rem-body);
        background-position: -50px -50px, calc(100% + 250px) center;
        background-size: auto 100%, auto 200%;
    }
}
.coin {
    --padding: 10rem;
    --margin: var(--_rem-display);
    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 .2rem .6rem rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: var(--margin) 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%;
    .text {
        width: 90%;
    }
    .icon {
        margin-block-end: var(--_rem-body);
    }
    .r01 {
        font-size: var(--_fs-lead);
        margin-block-end: var(--_rem-body);
        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);
        }
    }
    .r03 {
        margin-block-start: var(--_rem-input);
    }
    &:hover {
        box-shadow: 1px 2px 2rem var(--_c-issue-sd), 0px 0px 0px 2px var(--_c-issue);
    }
    &.lock-cont {
        --padding: 4rem;
        --margin: var(--_rem-body);
        background-position: -50px -50px, calc(100% + 250px) center;
        background-size: auto 100%, auto 200%;
    }
}
.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;
        &:hover {
            box-shadow: 0 .2rem 1.0rem rgba(0, 0, 0, .12);
            translate: 0 -10px;
        }
    }
    .r01 {
        color: var(--_c-caption);
        font-size: var(--_rem-caption);
    }
    .r03 {
        color: var(--_c-brief);
        font-size: var(--_rem-caption);
        >* {
            margin-inline-end: var(--_rem-space);
        }
    }
}
.download-r {
    >* {
        margin-block-end: var(--_rem-body);
    }
    .r01 {
        border-radius: var(--_r-input);
        aspect-ratio: 16/9;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
        }
    }
    .r02 {}
    .r03 {
        color: var(--_c-brief);
        font-size: var(--_rem-caption);
        >* {
            margin-inline-end: var(--_rem-space);
        }
    }
}
.swpm-login-action-msg {
    margin-top: var(--_rem-display);
    [class*="-error"] {
        color: var(--_c-error);
    }
}
[id*="swpm_paypal_button"] {
    width: min(100%,500px)!important;
}
.membership-paid {
    text-align: center;
}
.buy-to-reg {
    background-color: var(--_c-prim-bg);
    width: min(80%,500px);
    border-radius: var(--_r-input);
    margin: var(--_rem-display) auto;
    padding: var(--_rem-body);
}
.swpm-form-desc {
    color: var(--_c-error);
    ul {
        padding: 0;
    }
    li:before {
        display: none;
    }
}
.swpm_error {
    margin-bottom: var(--_rem-body);
    ul {
        color: var(--_c-error);
    }
}
.swpm_success {
    margin-bottom: var(--_rem-body);
}
.swpm-profile-update-success {
    color: var(--_c-succ);
}
.swpm-login-error-msg,
.swpm-reset-pw-error,
.swpm-pw-reset-widget-error,
.swpm-pw-reset-key-invalid-error {
    color: var(--_c-error);
}
.swpm-pw-reset-widget-error {
    color: var(--_c-error);
    margin-bottom: var(--_rem-body);
}
.login-msg:has(>div:empty) {
    display: none;
}
.user-block {
    background-color: #302c94;
    background-image: url(../images/bg-login.svg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto 80%;
    padding: 1px 0;
}
.user-center {
    --user-m: calc(var(--_rem-max)*2);
    --user-w: calc(var(--_w-input)*2);
    --user-p: var(--_rem-input);
    --user-menu: 24rem;
    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;
        .v1-flex-center;
        img{
            width: 70%;
            height: 70%;
        }
    } */
    &.user-entry {
        justify-content: center;
    }
    .inner {
        padding: var(--user-p);
        width: min(var(--user-w),100%);
        box-shadow: 10px 10px 0 0 var(--_c-black-16);
        border-radius: var(--_r-input-lg);
        background-color: var(--_c-stage);
        position: relative;
        box-sizing: border-box;
        form {}
        .title {
            text-align: center;
            margin-block-end: var(--_rem-body);
            .r01 {
                font-size: var(--_rem-display);
                line-height: var(--_rem-input);
                font-weight: bold;
            }
            .r02 {
                font-size: var(--_fs-caption);
                color: var(--_c-brief);
                line-height: var(--_rem-input);
            }
        }
        .inputs {
            width: inherit;
            border: 1px solid var(--_c-text-bd);
            border-radius: var(--_r-input);
            section:first-child {
                border: 0;
            }
            ._field-label i:first-child {
                color: var(--_c-prim-gy);
            }
        }
        .storage {
            margin: var(--_rem-body) auto;
        }
        .other {
            width: inherit;
            display: flex;
            margin-block-start: var(--_rem-input);
        }
        .activation {
            line-height: var(--_rem-input);
            margin: var(--_rem-body) auto;
        }
    }
    &.user-info {
        --user-w: 100%;
    }
    &.user-info .inner {
        display: flex;
    }
    &.user-info .user-left {
        width: var(--user-menu);
        margin-inline-end: var(--_rem-input);
        ul {
            li {
                padding: var(--_rem-min) 0;
            }
            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;
                i {
                    color: var(--_c-prim-fc);
                }
                &[selected] {
                    --_link-c: var(--_c-white);
                    --_link-bg: var(--_c-prim);
                    i {
                        color: var(--_link-c);
                    }
                }
                &:not([selected]):hover {
                    background-color: var(--_c-prim-bg);
                }
            }
        }
    }
    &.user-info .user-right {
        flex: auto;
        padding-inline-start: var(--user-p);
        .days {
            color: var(--_c-brief);
            font-size: var(--_fs-caption);
            margin-block-start: var(--_rem-body);
        }
        .basic {
            display: flex;
        }
        OC-AVATAR {
            margin-inline-end: var(--_rem-body);
        }
        .files {
            flex: auto;
        }
        .stats {
            margin: var(--_rem-display) 0;
            >* {
                margin-inline-end: var(--_rem-input);
            }
        }
        .block-head {
            font-size: var(--_fs-lead);
            i {
                color: var(--_c-caption);
                font-size: var(--_fs-body);
            }
        }
        .block-body {}
        .coin-types {
            .block-body {
                margin-block-start: var(--_rem-space);
            }
            input {
                display: none
            }
            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;
                &:hover {
                    border-color: var(--_c-prim);
                }
                &:has(input:checked) {
                    box-shadow: 0 0 0 2px var(--_c-prim) inset;
                    border-color: var(--_c-prim);
                }
            }
            .type-name {
                margin-block-end: var(--_rem-body);
                position: absolute;
                inset-inline-start: var(--_px-space);
                inset-block-start: var(--_px-space);
            }
            .type-money {
                color: var(--_c-issue);
                margin: var(--_rem-body) auto;
                line-height: var(--_rem-input);
                * {
                    vertical-align: middle;
                }
                i {
                    font-size: var(--_rem-list);
                }
                s {
                    font-size: var(--_rem-input);
                }
            }
            .type-brief {
                color: var(--_c-brief);
                line-height: var(--_rem-list);
            }
        }
        .confirm-bill .block-body {
            margin-block-start: var(--_rem-space);
        }
        .pay-types .block-body {
            margin-block-start: var(--_rem-space);
        }
    }
}
@media (max-width:calc(900px - 1px)) {
    .buy-to-reg {
        width: 100%;
    }
    .user-block {
        background-color: transparent;
        background-image: none;
    }
    body.body-user {
        background: none;
    }
    .user-center {
        --user-m: var(--_rem-display);
        --user-w: 100%;
        --user-menu: 100%;
        --user-p: 0;
        display: block;
        .inner {
            box-shadow: none;
            >OC-LINE {
                display: none;
            }
        }
        &.user-info {
            --user-m: var(--_rem-body);
        }
        &.user-info .inner {
            display: block;
        }
        &.user-info .user-left {
            margin-inline-end: 0;
            margin-block-end: var(--_rem-space);
            overflow: scroll;
            ul {
                display: flex;
            }
        }
        &.user-info .user-left ul a {
            font-size: var(--_fs-body);
            line-height: var(--_rem-display);
            padding-inline-end: var(--_rem-body);
        }
    }
}
.about {}
.about-block {
    --block-p: var(--_rem-display);
    --block-h: 30rem;
    --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 .2rem .6rem rgba(0, 0, 0, .08);
    border-radius: var(--_r-input-lg);
    background-color: var(--_c-stage);
    position: relative;
    display: flex;
    .block-head {
        padding: var(--block-p);
        width: var(--block-w-head);
        .title {
            font-size: var(--_rem-list);
        }
        .brief {
            font-size: var(--_rem-max);
            line-height: 1.5em;
            color: var(--_c-text-bd);
        }
        .break {
            width: var(--_rem-display);
            height: 2px;
            background-color: var(--_c-prim);
            margin-block-start: var(--_rem-body);
        }
    }
    .block-body {
        padding: var(--block-p);
        box-sizing: border-box;
        flex: auto;
        .inner {
            max-height: var(--block-h);
            overflow: auto;
            box-sizing: border-box;
        }
    }
    .figure {
        display: block;
        border-radius: var(--_r-input);
        width: min(100%,60rem);
    }
    .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;
        .left {
            height: calc(var(--_rem-display)*4);
            margin-inline-end: var(--_rem-body);
        }
        .right {
            flex: auto;
        }
    }
    .feed {
        display: block;
        width: min(100%,60rem);
        .inputs {
            border: 1px solid var(--_c-text-bd);
            border-radius: var(--_r-input);
            section:first-child {
                border: none;
            }
        }
    }
}
@media (max-width:calc(900px - 1px)) {
    .about-block {
        --block-p: 0;
        --block-h: auto;
        --block-w-head: auto;
        box-shadow: none;
        margin-block-start: var(--_rem-body);
        display: block;
        .block-head {
            .text {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .title {
                font-size: var(--_fs-body);
            }
            .brief {
                font-size: var(--_fs-lead);
            }
            .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;
    &:where(:not(.prism-lt))::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, .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);
    &: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;
    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata {
        color: #93a1a1;
    }
    .token.punctuation {
        color: #586e75;
    }
    .token.namespace {
        opacity: .7;
    }
    .token.property,
    .token.tag,
    .token.boolean,
    .token.number,
    .token.constant,
    .token.symbol,
    .token.deleted {
        color: #268bd2;
    }
    .token.selector,
    .token.attr-name,
    .token.string,
    .token.char,
    .token.builtin,
    .token.url,
    .token.inserted {
        color: #2aa198;
        /* cyan */
    }
    .token.entity {
        color: #657b83;
        /* base00 */
        background: #eee8d5;
        /* base2 */
    }
    .token.atrule,
    .token.attr-value,
    .token.keyword {
        color: #859900;
        /* green */
    }
    .token.function,
    .token.class-name {
        color: #b58900;
        /* yellow */
    }
    .token.regex,
    .token.important,
    .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-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-title {
        flex: auto;
    }
    .box-demo-try {
        color: var(--_c-text);
        &:hover {
            color: var(--_c-prim);
        }
    }
    .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-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-title {
        flex: auto;
    }
    .box-code-body {}
}
.box-tab {
    margin: var(--_rem-list) auto;
    border-radius: var(--_r-input-lg);
    border: 1px solid var(--_c-text-bd);
    position: relative;
    &>._tab-body,
    &>._tab-body>*,
    &>._tab-body>* .code-output {
        border-end-start-radius: inherit;
        border-end-end-radius: inherit;
    }
    &>._tab-head:where(:not(:has(+ ._tab-body [active] .code-toolbar))) {
        border-block-end: 1px solid var(--_c-text-bd);
    }
    .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;
        +a {
            color: var(--_c-text);
            line-height: var(--_rem-input);
            position: absolute;
            inset-inline-end: var(--_m);
            inset-block-start: calc(var(--_rem-input)*-1);
            &:hover {
                color: var(--_c-prim);
            }
        }
    }
}
.box-code,
.box-tab {
    .code-toolbar {
        margin: 0;
    }
    pre {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
    }
    div.code-toolbar>.toolbar {
        opacity: 1;
        line-height: var(--_rem-input);
        inset-block-start: calc(var(--_rem-input)*-1);
        inset-inline-end: 0;
        right: auto;
        inset-inline-end: .2em;
    }
    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;
        &: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-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-title {
        flex: auto;
    }
    .box-iframe-tools {
        display: inline-flex;
        span {
            padding: 0 var(--_p);
            cursor: pointer;
            position: relative;
            transition: all 200ms linear;
        }
        span:after {
            width: 1px;
            height: 1rem;
            background-color: var(--_c-text-bd);
            inset-inline-end: 0;
            inset-block-start: 50%;
            margin-block-start: -0.5rem;
            position: absolute;
            content: '';
        }
        span:last-child:after {
            display: none;
        }
        span:hover {
            color: var(--_c-prim);
        }
    }
    .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;
    }
    iframe {
        display: block;
        max-height: 500px;
        &: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;
    .cp_embed_containerper {
        width: calc(100% + 2px);
    }
    iframe {
        margin: -1px;
    }
    &: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;
    }
    &: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-btns {
        position: absolute;
        inset-block-start: var(--_rem-body);
        inset-inline-end: var(--_rem-body);
        * {
            width: 12px;
            aspect-ratio: 1/1;
            border-radius: 100%;
            margin: 4px;
        }
        *:nth-child(1) {
            background-color: var(--_c-error-sd);
        }
        *:nth-child(2) {
            background-color: var(--_c-warn-sd);
        }
        *:nth-child(3) {
            background-color: var(--_c-info-sd);
        }
    }
    .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-input {
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }
    .box-type-code {
        background-color: var(--_c-caption-bg);
        position: relative;
    }
    .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;
        &:hover {
            color: var(--_c-prim);
            cursor: pointer;
        }
    }
    .prism-lt {
        background-color: transparent !important;
        border: none !important;
    }
    .code-toolbar {
        margin: 0;
        padding: var(--box-p) var(--box-p) 0 var(--box-p);
        min-height: var(--box-h-code);
    }
    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;
    }
    code {
        font-size: var(--_fs-body) !important;
    }
}
.layout-wrap {}
.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-caption-bg);
}
.icon-item {
    text-align: center;
    .r01 {
        height: 8rem;
        line-height: 8rem;
    }
    .r01 span {
        font-size: 2.8rem;
    }
    .r02 {
        font-size: 1.2rem;
        height: 3.8rem;
        line-height: 3.8rem;
        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;
    &[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: 1.8rem;
}
.color-group div:nth-child(1) div {
    padding: 1.4rem 0;
    color: var(--_c-white);
}
.color-group div:nth-child(2) div {
    padding: 1.4rem 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-wrap {
        background-color: var(--_c-text-bg);
    }
    .small,
    .big {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    &[axis=x] {
        height: 200px;
    }
    &[axis=x] .small {
        width: 300px;
        height: 100%;
    }
    &[axis=x] .big {
        width: 150%;
        height: 100%;
    }
    &[axis=y] {
        height: 300px;
    }
    &[axis=y] .small {
        height: 100px;
    }
    &[axis=y] .big {
        height: 200%;
    }
    >ul {
        >li {
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        >li:nth-child(odd) {
            background-color: bisque;
        }
        >li:nth-child(even) {
            background-color: darksalmon;
        }
    }
    &[axis=y]>ul {
        >li {
            height: 80px;
        }
    }
    &[axis=x]>ul {
        height: 100%;
        >li {
            height: 100%;
            width: 200px;
        }
    }
    &[gridded][axis=x]>ul>li {
        height: 100px;
    }
    &[gridded][axis=y]>ul>li {
        height: 150px;
        width: 25%;
    }
    [class*=_box-],
    [rep=media] {
        height: inherit;
    }
    img {
        height: inherit;
        object-fit: cover;
    }
    iframe,
    video,
    audio {
        height: inherit;
    }
}
.scroll-nest {
    width: 100%;
    height: 100%;
    >ul {
        >li {
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        >li:nth-child(odd) {
            background-color: lightslategrey;
        }
        >li:nth-child(even) {
            background-color: lightsteelblue;
        }
    }
    &[axis=y]>ul {
        >li {
            height: 50px;
        }
    }
    &[axis=x]>ul {
        height: 100%;
        >li {
            height: 100%;
            width: 200px;
        }
    }
    [class*=_box-],
    [rep=media] {
        height: inherit;
    }
    img {
        height: inherit;
        object-fit: cover;
    }
    iframe,
    video,
    audio {
        height: inherit;
    }
}
.masonrys {
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_r);
    >* {
        background-color: var(--_c-text-bg);
        border-radius: var(--_r);
        text-align: center;
    }
    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[axis=x] {
    height: 300px;
}
.swipes[axis=x]>._swipe-wrap>:not(.swipe-nest)>._swipe-wrap>li {
    width: 100px;
    height: 300px;
}
.swipes[axis=y] {
    height: 500px;
}
.swipes[axis=y]>._swipe-wrap>li {
    height: 100px;
}
.swipes[axis=x]>._swipe-wrap>li.s01,
.swipes[axis=x]>._swipe-wrap>li.s04,
.swipes[axis=x]>._swipe-wrap>li.s06,
.swipes[axis=x]>._swipe-wrap>li.s09,
.swipes[axis=x]>._swipe-wrap>li.s13 {
    width: 200px;
}
.swipes[axis=x]>._swipe-wrap>li.s02,
.swipes[axis=x]>._swipe-wrap>li.s08,
.swipes[axis=x]>._swipe-wrap>li.s10,
.swipes[axis=x]>._swipe-wrap>li.s15,
.swipes[axis=x]>._swipe-wrap>li.s17 {
    width: 160px;
}
.swipes[axis=x]>._swipe-wrap>li.s03,
.swipes[axis=x]>._swipe-wrap>li.s07,
.swipes[axis=x]>._swipe-wrap>li.s12,
.swipes[axis=x]>._swipe-wrap>li.s16,
.swipes[axis=x]>._swipe-wrap>li.s18 {
    width: 260px;
}
.swipes[axis=y]>._swipe-wrap>li.s01,
.swipes[axis=y]>._swipe-wrap>li.s04,
.swipes[axis=y]>._swipe-wrap>li.s06,
.swipes[axis=y]>._swipe-wrap>li.s09,
.swipes[axis=y]>._swipe-wrap>li.s13 {
    height: 200px;
}
.swipes[axis=y]>._swipe-wrap>li.s02,
.swipes[axis=y]>._swipe-wrap>li.s08,
.swipes[axis=y]>._swipe-wrap>li.s10,
.swipes[axis=y]>._swipe-wrap>li.s15,
.swipes[axis=y]>._swipe-wrap>li.s17 {
    height: 160px;
}
.swipes[axis=y]>._swipe-wrap>li.s03,
.swipes[axis=y]>._swipe-wrap>li.s07,
.swipes[axis=y]>._swipe-wrap>li.s12,
.swipes[axis=y]>._swipe-wrap>li.s16,
.swipes[axis=y]>._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;
    li {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    li:nth-child(odd) {
        background-color: papayawhip;
    }
    li:nth-child(even) {
        background-color: navajowhite;
    }
}
.virts {
    border: 1px solid var(--_c-text-bd);
    section {
        line-height: 28px;
        padding: 14px;
        box-sizing: border-box;
    }
    &[axis=y] {
        height: 400px;
        section {
            border-block-end: 1px solid var(--_c-text-bd);
        }
    }
    &[axis=x] {
        height: 200px;
        ._virt-wrap,
        ._virt-cont,
        ._virt-list {
            height: inherit;
        }
        ._virt-list {
            display: flex;
        }
        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);
    >* {
        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;
        &.moving {
            color: transparent;
            background-color: transparent;
            border: 2px dashed var(--_c-text-bd);
            * {
                opacity: 0;
            }
        }
        &.candrag {
            cursor: grab;
        }
        &:active {
            cursor: grabbing;
        }
        &[dropping] {
            opacity: .5;
        }
    }
}
.drag-demo {
    --theme: var(--_c-stage);
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_r-input);
    min-height: var(--_rem-max);
    &[dropping] {
        border-color: var(--_c-prim);
    }
    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;
        li {
            background-color: var(--_c-text-bg);
            margin: auto;
            margin-block-start: var(--_rem-body);
            width: 100%;
        }
        &:has(>li, >._holder-drop, >.embedbox) {
            flex-direction: column;
        }
    }
    li[dropping] {
        border-color: var(--_c-prim);
    }
    li[dropped] {
        border-color: var(--_c-succ);
    }
    .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;
    .drag-box {
        width: 100%;
    }
    &[dropping] {
        border-color: var(--_c-prim);
    }
}
@media (max-width: calc(1200px - 1px)),
(min-width: 1200px) and (max-width:(1536px - 1px)) and (hover:none) {
    :root {
        --w-body: 100%;
        --m-top: var(--_rem-body);
    }
    menu,
    aside:where(:not(.alt-info)) {
        position: absolute;
        inset-inline-start: -10000px;
    }
    .index-stats OC-STATS {
        margin-block-end: var(--_font);
    }
    .lock,
    .coin {
        --padding: var(--_rem-max);
    }
    .body:where(:has(.alt-info)) {
        display: block;
        main {
            width: auto;
        }
        .alt-info {
            margin-inline-start: 0;
            margin-block-start: var(--_rem-display);
            width: auto;
        }
    }
}
@media (max-width: calc(600px - 1px)),
(min-width: 600px) and (max-width: calc(900px - 1px)) and (orientation:landscape) {
    .lock,
    .coin {
        background: none;
    }
    h2 a,
    h3 a {
        display: none;
    }
    .list-post li {
        margin-block-end: var(--_rem-display);
    }
}