.mcui {
    --mcui-green:#174e42;
    --mcui-deep:#0b302a;
    --mcui-gold:#b89555;
    --mcui-ink:#243a34;
    --mcui-muted:#77847d;
    --mcui-line:#e3e9e3;
    position:relative;
    container-type:inline-size;
    width:100%;
    max-width:100%;
    margin:0;
    color:var(--mcui-ink);
    font-size:14px;
    line-height:1.45;
    text-align:left;
    isolation:isolate
}
.mcui * {
    box-sizing:border-box
}
.mcui p,.mcui h4,.mcui dl,.mcui dd {
    margin:0
}
.mcui strong,.mcui b {
    font-weight:600
}
.mcui-stage {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:420px;
    padding:24px 16px 18px;
    overflow:hidden
}
.mcui-stage small {
    font-size:.76em;
    color:var(--mcui-muted)
}
.mcui-stage h4 {
    font-size:1em
}
.mcui-statusbar {
    display:flex;
    justify-content:space-between;
    padding:10px 12px 5px;
    font-size:9px;
    font-weight:600
}
.mcui-phone {
    position:relative;
    flex-shrink:0;
    width:225px;
    max-width:58%;
    padding:3px 3px 0;
    overflow:hidden;
    border:5px solid #283b34;
    border-radius:28px;
    background:#fff;
    box-shadow:0 16px 36px #15372b20;
    font-size:11px;
    line-height:1.45
}
.mcui-phone:before {
    content:"";
    position:absolute;
    top:6px;
    left:calc(50% - 23px);
    width:46px;
    height:9px;
    border-radius:10px;
    background:#283b34;
    z-index:2
}
.mcui-phone-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:7px 10px 10px;
    font-size:1.06em;
    font-weight:600
}
.mcui-phone-title>span {
    font-size:12px;
    letter-spacing:1px
}
.mcui-phone-nav {
    display:flex;
    justify-content:space-around;
    padding:12px 2px 13px;
    margin-top:8px;
    border-top:1px solid #edf0eb;
    color:#89958e;
    font-size:.82em
}
.mcui-phone-nav b {
    color:var(--mcui-green)
}
.mcui-phone-primary {
    z-index:2
}
.mcui-phone-secondary {
    z-index:1
}
.mcui-hero .mcui-stage {
    min-height:575px;
    padding-top:34px
}
.mcui-hero .mcui-phone-primary {
    margin:0 21% 0 0;
    transform:rotate(-5deg)
}
.mcui-member-phone {
    position:absolute;
    right:17%;
    bottom:36px;
    transform:rotate(8deg) scale(.88);
    transform-origin:50% 100%;
    background:#f6f7f2
}
.mcui-hero-halo {
    position:absolute;
    width:88%;
    aspect-ratio:1;
    left:6%;
    top:3%;
    border:1px solid #ccb98866;
    border-radius:50%;
    background:radial-gradient(ellipse at center,#d4bf8c20,transparent 68%);
    box-shadow:0 0 0 36px #cfb37508,0 0 0 70px #cfb37505;
    z-index:-1
}
.mcui-search {
    margin:0 8px 4px;
    padding:6px 9px;
    border-radius:20px;
    background:#f1f4ef;
    color:#95a096;
    font-size:.8em
}
.mcui-store-tabs {
    display:flex;
    justify-content:space-around;
    padding:8px 3px;
    color:#849287;
    font-size:.92em
}
.mcui-store-tabs b {
    color:var(--mcui-green);
    border-bottom:2px solid;
    padding-bottom:3px
}
.mcui-store-banner {
    position:relative;
    height:120px;
    padding:17px 12px;
    overflow:hidden;
    background:linear-gradient(110deg,#e8eee2,#d0ddc9);
    color:var(--mcui-green)
}
.mcui-store-banner>span {
    position:relative;
    font-size:.68em;
    z-index:1
}
.mcui-store-banner>strong {
    position:relative;
    display:block;
    max-width:64%;
    margin:6px 0 18px;
    font-size:1.45em;
    z-index:1
}
.mcui-store-banner>small {
    position:relative;
    z-index:1;
    color:#577263;
    font-size:.63em
}
.mcui-art {
    position:absolute;
    width:95px;
    height:90px;
    right:6px;
    bottom:3px;
    transform:rotate(-9deg)
}
.mcui-art-cup:after {
    content:"";
    position:absolute;
    bottom:1px;
    left:5%;
    width:100%;
    height:14px;
    background:#233e3029;
    border-radius:50%;
    filter:blur(4px)
}
.mcui-art-cup i {
    position:absolute;
    top:18%;
    left:18%;
    width:58%;
    height:72%;
    border-radius:10% 10% 35% 35%;
    background:linear-gradient(90deg,#efead7 0%,#fffdf0 32%,#f6f0da 64%,#d1c8ae 100%);
    box-shadow:inset 2px 0 0 #fff8,-5px 9px 16px #133b251c
}
.mcui-art-cup i:before {
    content:"";
    position:absolute;
    width:48%;
    height:55%;
    top:12%;
    right:-32%;
    border:7px solid #e5dcc4;
    border-left-width:5px;
    border-radius:50%;
    z-index:-1
}
.mcui-art-cup i:after {
    content:"";
    position:absolute;
    top:-4%;
    left:2%;
    width:96%;
    height:14%;
    border:3px solid #f6f1dc;
    border-radius:50%;
    background:#aea487
}
.mcui-shortcuts {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:3px;
    padding:13px 6px 8px;
    text-align:center;
    font-size:.62em;
    color:#748377
}
.mcui-shortcuts i {
    display:block;
    width:26px;
    height:26px;
    line-height:26px;
    margin:0 auto 5px;
    background:#eaf0e5;
    border-radius:50%;
    color:var(--mcui-green);
    font-size:1.55em;
    font-style:normal
}
.mcui-shortcuts span:nth-child(2n) i {
    background:#f4eddc;
    color:#a98947
}
.mcui-phone-section {
    padding:8px
}
.mcui-phone-section>strong {
    display:block;
    margin-bottom:9px;
    font-size:1em
}
.mcui-phone-section>strong>small {
    float:right;
    font-weight:400
}
.mcui-product-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    font-size:.76em
}
.mcui-product-grid>div>span {
    display:block;
    margin:6px 0 2px
}
.mcui-product-grid>div>b {
    color:#a47b3e
}
.mcui-product-art {
    display:flex;
    justify-content:center;
    align-items:center;
    height:80px;
    border-radius:6px;
    background:#edf0e7
}
.mcui-product-art-sand {
    background:#f1eadd
}
.mcui-mini-cup,.mcui-mini-bag,.mcui-mini-box {
    position:relative;
    display:block;
    flex-shrink:0;
    width:35px;
    height:33px;
    margin:6px 9px 4px 5px;
    border-radius:3px 3px 12px 12px;
    background:linear-gradient(100deg,#d9cfb5,#f5eddc 50%,#c8ba9a);
    box-shadow:0 6px 8px #5d5b3e1a
}
.mcui-mini-cup:before {
    content:"";
    position:absolute;
    width:15px;
    height:20px;
    top:4px;
    right:-10px;
    border:4px solid #d8caaa;
    border-left:0;
    border-radius:0 10px 10px 0
}
.mcui-mini-bag {
    height:36px;
    background:linear-gradient(100deg,#ceb993,#e1d2b3);
    border-radius:3px
}
.mcui-mini-bag:before {
    content:"";
    position:absolute;
    top:-12px;
    left:8px;
    width:19px;
    height:20px;
    border:3px solid #b59d77;
    border-bottom:0;
    border-radius:14px 14px 0 0
}
.mcui-mini-box {
    width:39px;
    height:32px;
    border-radius:2px;
    background:linear-gradient(90deg,#436c59 43%,#c3aa72 43%,#c3aa72 57%,#436c59 57%)
}
.mcui-mini-box:before {
    content:"";
    position:absolute;
    inset:3px -2px auto;
    height:6px;
    background:#59826c
}
.mcui-vip-card {
    margin:5px 9px 11px;
    padding:15px 14px 12px;
    border-radius:9px;
    background:linear-gradient(125deg,#203f31,#0b241d);
    color:#ead6a3;
    box-shadow:0 8px 15px #122f2712
}
.mcui-vip-card>span {
    font-size:.72em
}
.mcui-vip-card>strong {
    display:block;
    margin:16px 0 15px;
    font-size:1.65em;
    line-height:1.45
}
.mcui-vip-card>small {
    letter-spacing:3px;
    font-size:.6em;
    color:#b3a078
}
.mcui-member-stats {
    display:flex;
    justify-content:space-around;
    padding:6px 8px 12px;
    text-align:center;
    color:#849187;
    font-size:.72em
}
.mcui-member-stats b {
    display:block;
    margin-bottom:4px;
    color:var(--mcui-green);
    font-size:1.5em
}
.mcui-rights {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:12px
}
.mcui-rights span {
    padding:13px 4px;
    background:#fff;
    border:1px solid #e9ece3;
    border-radius:5px;
    text-align:center;
    font-size:.82em;
    color:#92784e
}
.mcui-cell {
    display:flex;
    justify-content:space-between;
    padding:12px 9px;
    border-top:1px solid #e9ece5;
    font-size:.82em
}
.mcui-cell>span {
    color:#8e998f;
    font-size:.8em
}
.mcui-floating-label {
    position:absolute;
    z-index:3;
    padding:10px 17px;
    border:1px solid #c9b48177;
    border-radius:6px;
    background:#fcfaf0ed;
    box-shadow:0 10px 30px #172f2320;
    color:var(--mcui-green);
    font-size:13px
}
.mcui-label-store {
    left:5%;
    bottom:20%
}
.mcui-label-member {
    right:2%;
    top:25%
}
.mcui-window {
    width:100%;
    max-width:100%;
    overflow:hidden;
    border:1px solid #d1dbd2;
    border-radius:10px;
    background:#fff;
    box-shadow:0 18px 38px #173d2920;
    font-size:clamp(10px,1.75cqi,13px)
}
.mcui-window-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    min-height:38px;
    padding:11px 14px;
    background:#f6f8f3;
    border-bottom:1px solid var(--mcui-line);
    font-size:.8em
}
.mcui-window-bar>span:last-child {
    color:#7f8b80;
    font-size:.83em
}
.mcui-window-dots {
    font-size:8px;
    letter-spacing:2px;
    color:#b2bdb0;
    white-space:nowrap
}
.mcui-window-bar strong {
    font-weight:600;
    color:var(--mcui-green)
}
.mcui-channel-window {
    position:relative;
    width:76%;
    margin-right:19%;
    transform:translateY(-10px)
}
.mcui-obs-preview {
    position:relative;
    height:195px;
    overflow:hidden;
    background:linear-gradient(130deg,#123c31,#6b8e70)
}
.mcui-obs-preview>.mcui-art {
    width:150px;
    height:150px;
    right:26%;
    bottom:24px
}
.mcui-obs-preview>span {
    position:absolute;
    left:20px;
    bottom:15px;
    color:#f0eddf;
    font-size:1em
}
.mcui-obs-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:12px;
    background:#28372f;
    color:#b3bfb4;
    font-size:.82em
}
.mcui-obs-bottom>div {
    display:flex;
    flex-direction:column;
    gap:6px
}
.mcui-obs-bottom b {
    color:#f0f3e9
}
.mcui-audio-meter {
    display:block;
    width:92%;
    height:4px;
    background:repeating-linear-gradient(90deg,#a2b968 0,#a2b968 4px,#344235 4px,#344235 6px)
}
.mcui-channel-phone {
    position:absolute;
    right:1%;
    top:35px;
    width:190px;
    max-width:38%;
    font-size:10px
}
.mcui-channel-phone .mcui-live-scene {
    height:228px
}
.mcui-live-scene {
    position:relative;
    overflow:hidden;
    min-height:170px;
    background:linear-gradient(145deg,#486d52,#123c30 72%);
    color:#f1ead9
}
.mcui-live-scene>strong {
    position:absolute;
    top:46px;
    left:15px;
    font-size:1.8em;
    line-height:1.4;
    font-weight:500
}
.mcui-live-scene>.mcui-art {
    width:116px;
    height:125px;
    right:9px;
    bottom:14px
}
.mcui-onair {
    position:relative;
    display:inline-block;
    margin:11px 8px;
    padding:3px 6px;
    border-radius:10px;
    background:#0a2b246b;
    color:#eeeddd;
    font-size:.62em
}
.mcui-live-comment {
    position:absolute;
    right:6px;
    bottom:8px;
    left:6px;
    padding:5px;
    background:#0e2a216b;
    border-radius:4px;
    color:#e8f0e5;
    font-size:.66em
}
.mcui-live-product {
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 6px;
    background:#fff;
    font-size:.76em
}
.mcui-live-product>b,.mcui-live-product b {
    color:#a48148;
    font-weight:500
}
.mcui-live-product>.mcui-mini-cup {
    width:25px;
    height:26px;
    margin-right:10px
}
.mcui-live-product>.mcui-mini-cup:before {
    width:10px;
    height:17px;
    border-width:3px;
    right:-7px
}
.mcui-channel-labels {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    padding: 12px 0 8px;
}
.mcui-channel-labels span {
    white-space: nowrap;
    padding:7px 12px;
    border:1px solid #dfe6da;
    border-radius:4px;
    background:#fff;
    color:var(--mcui-green);
    font-size:11px
}
.mcui-control-layout {
    display:grid;
    grid-template-columns:27% 31% 42%;
    padding:8px;
    gap:0;
    background:#f4f6f1
}
.mcui-control-preview {
    padding-right:8px
}
.mcui-control-preview .mcui-live-scene {
    height:270px;
    border-radius:4px
}
.mcui-control-preview .mcui-live-scene>strong {
    font-size:1.6em;
    left:9px
}
.mcui-control-preview .mcui-art {
    right:8%;
    bottom:25px;
    width:90px;
    height:100px
}
.mcui-control-comments,.mcui-control-goods {
    padding:12px 10px;
    background:#fff;
    border-radius:4px
}
.mcui-control-comments {
    border-right:7px solid #f4f6f1
}
.mcui-control-comments>p {
    margin-top:13px;
    font-size:.75em;
    line-height:1.75
}
.mcui-control-comments>p>b {
    display:block;
    color:#8e978e;
    font-weight:400
}
.mcui-control-comments>p.mcui-comment-official {
    padding:5px 6px;
    background:#eff5ed
}
.mcui-comment-official>b {
    color:#47795c!important
}
.mcui-control-tools {
    margin:15px 0;
    padding:9px 0;
    border-block:1px solid #edf0e9
}
.mcui-control-tools>h4 {
    margin-bottom:8px
}
.mcui-control-tools>span {
    display:inline-block;
    margin:2px 2px 0 0;
    padding:4px 6px;
    background:#f4efdf;
    color:#a18b50;
    font-size:.72em
}
.mcui-viewer {
    display:flex;
    align-items:center;
    gap:5px;
    padding-top:10px;
    font-size:.72em
}
.mcui-viewer>i,.mcui-comment>i {
    display:block;
    width:19px;
    height:19px;
    flex-shrink:0;
    border-radius:50%;
    background:#ebefdf;
    color:#64825c;
    font-size:10px;
    line-height:19px;
    font-style:normal;
    text-align:center
}
.mcui-viewer small {
    margin-left:auto;
    font-size:.8em
}
.mcui-control-goods>h4 {
    display:flex;
    justify-content:space-between;
    gap:4px;
    margin-bottom:12px
}
.mcui-control-goods>h4>span {
    font-size:.7em;
    font-weight:400;
    color:#8b998d
}
.mcui-goods-row {
    display:flex;
    align-items:center;
    gap:7px;
    min-height:68px;
    padding:10px 0;
    border-bottom:1px solid #edf0e9;
    font-size:.75em
}
.mcui-goods-row>div {
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:5px
}
.mcui-goods-row b {
    font-weight:500;
    line-height:1.4
}
.mcui-goods-row small {
    font-size:.86em;
    color:#a28650
}
.mcui-goods-row>div>span {
    color:#94a08f;
    font-size:.79em
}
.mcui-goods-row .mcui-mini-cup,.mcui-goods-row .mcui-mini-bag,.mcui-goods-row .mcui-mini-box {
    transform:scale(.85);
    margin-left:0;
    margin-right:3px
}
.mcui-goods-row .mcui-state-tag {
    align-self:flex-start;
    background:#edf4e9;
    border-radius:3px;
    padding:2px 5px;
    color:#517247
}
.mcui-stock-note {
    margin-top:20px;
    padding:12px 8px;
    border:1px solid #dce7d8;
    border-radius:5px;
    background:#f7faf3;
    font-size:.77em
}
.mcui-stock-note>span {
    display:block;
    margin-top:8px;
    color:#90a085;
    font-size:.85em
}
.mcui-control-metrics {
    display:flex;
    justify-content:space-around;
    padding:13px 4px;
    background:#fff;
    font-size:.76em
}
.mcui-control-metrics b {
    display:block;
    margin-top:4px;
    color:var(--mcui-green);
    font-size:1.7em
}
.mcui-live-engage .mcui-stage,.mcui-live-commerce .mcui-stage {
    min-height:490px
}
.mcui-live-primary {
    margin-left:-20px;
    transform:translateY(-12px)
}
.mcui-live-secondary {
    transform:translate(-15px,19px) rotate(-5deg);
    width:200px
}
.mcui-live-primary .mcui-live-scene {
    height:185px
}
.mcui-live-secondary .mcui-live-scene {
    height:230px
}
.mcui-live-sheet {
    position:relative;
    margin-top:-7px;
    padding:15px 10px 12px;
    border-radius:12px 12px 0 0;
    background:#fff
}
.mcui-live-sheet>strong {
    display:block;
    text-align:center;
    font-size:1em
}
.mcui-gift-sheet {
    background:linear-gradient(#e6ecd7,#f9fbf2);
    text-align:center;
    border:2px solid #fff
}
.mcui-gift-icon {
    position:absolute;
    right:10px;
    top:8px;
    font-size:23px;
    color:#b39851
}
.mcui-gift-sheet>p {
    margin:6px 0 12px;
    font-size:.73em;
    color:#8b996e
}
.mcui-gift-task {
    display:flex;
    justify-content:space-between;
    margin:8px 0;
    font-size:.8em
}
.mcui-gift-task>b {
    color:#718352;
    font-size:.88em
}
.mcui-sheet-status {
    margin-top:13px;
    padding:8px 5px;
    border-radius:20px;
    background:var(--mcui-green);
    color:#ececd8;
    text-align:center;
    font-size:.82em
}
.mcui-coupon {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 10px;
    margin:12px 0 4px;
    background:#f7efdc;
    color:#9e7c3c;
    border-left:3px dotted #fff
}
.mcui-coupon>b {
    font-size:1.75em
}
.mcui-coupon>span {
    font-size:.72em
}
.mcui-coupon small {
    display:block;
    margin-top:4px;
    color:#b19868
}
.mcui-price-row {
    display:flex;
    align-items:baseline;
    gap:10px;
    padding-top:13px;
    font-size:.8em;
    color:#9f814a
}
.mcui-price-row strong {
    font-size:2em
}
.mcui-price-row s {
    font-size:.8em;
    color:#97a08f
}
.mcui-dashboard {
    display:grid;
    grid-template-columns:95px 1fr;
    background:#f4f7f1
}
.mcui-dashboard-menu {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:20px 9px;
    background:#fff;
    font-size:.8em
}
.mcui-dashboard-menu>strong {
    padding:0 9px 18px;
    color:var(--mcui-green);
    font-size:1.2em
}
.mcui-dashboard-menu>span {
    padding:8px 9px;
    color:#879380
}
.mcui-dashboard-menu>.mcui-menu-active {
    background:#edf3e6;
    border-radius:4px;
    color:var(--mcui-green)
}
.mcui-dashboard-main {
    min-width:0;
    padding:18px 15px 15px
}
.mcui-dashboard-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px
}
.mcui-dashboard-heading>span {
    font-size:.73em;
    color:#8d9a85
}
.mcui-stat-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px
}
.mcui-stat-grid>div {
    padding:13px 9px;
    background:#fff;
    border-radius:4px
}
.mcui-stat-grid strong {
    display:block;
    margin-top:5px;
    font-size:clamp(12px,2.35cqi,17px);
    font-weight:500;
    white-space:nowrap
}
.mcui-stat-grid small {
    font-size:.73em
}
.mcui-chart-panel {
    margin-top:13px;
    padding:15px 12px 10px;
    background:#fff;
    border-radius:4px
}
.mcui-chart-panel>h4 {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:.82em
}
.mcui-chart-panel>h4>small {
    font-size:.8em;
    color:#80a270;
    font-weight:400
}
.mcui-chart {
    display:flex;
    gap:8px;
    align-items:stretch;
    margin-top:22px
}
.mcui-chart-scale {
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    min-width:15px;
    color:#a5b09c;
    font-size:.56em
}
.mcui-chart svg {
    display:block;
    width:calc(100% - 22px);
    height:130px;
    overflow:visible
}
.mcui-chart-grid {
    stroke:#edf0e7;
    stroke-width:1;
    fill:none
}
.mcui-chart-area {
    fill:#e8efdf;
    opacity:.8
}
.mcui-chart-line {
    stroke:#739563;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none
}
.mcui-chart-dates {
    display:flex;
    justify-content:space-between;
    margin-left:23px;
    color:#a4ac9d;
    font-size:.61em
}
.mcui-ranking {
    margin-top:12px;
    padding:12px;
    background:#fff;
    font-size:.77em
}
.mcui-ranking>h4 {
    margin-bottom:8px
}
.mcui-ranking>div {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    padding:8px 3px;
    gap:5px;
    border-bottom:1px solid #eef1ea;
    color:#86937e;
    font-size:.9em
}
.mcui-ranking>div>span:not(:first-child) {
    text-align:right
}
.mcui-ranking b {
    color:#a89056;
    font-size:.9em
}
.mcui-ranking>div:last-child {
    border-bottom:0
}
.mcui-live-distribution .mcui-stage {
    gap:28px;
    min-height:470px
}
.mcui-share-phone {
    width:215px
}
.mcui-share-poster {
    position:relative;
    min-height:300px;
    margin:0 8px;
    padding:18px 11px 12px;
    overflow:hidden;
    background:linear-gradient(145deg,#e8ede0,#baceb5);
    text-align:center;
    color:var(--mcui-green)
}
.mcui-share-poster>span {
    font-size:.7em;
    letter-spacing:2px
}
.mcui-share-poster>strong {
    display:block;
    margin:17px 0;
    font-size:2.1em;
    line-height:1.45;
    letter-spacing:2px
}
.mcui-share-poster>.mcui-art {
    width:105px;
    height:110px;
    right:22%;
    bottom:50px
}
.mcui-share-poster>small {
    position:absolute;
    bottom:13px;
    left:10px;
    font-size:.65em;
    color:#68825c
}
.mcui-poster-code {
    position:absolute;
    bottom:8px;
    right:9px;
    width:29px;
    height:29px;
    border:3px solid #fff;
    background:repeating-linear-gradient(45deg,#446642 0,#446642 3px,#fff 3px,#fff 6px);
    opacity:.6
}
.mcui-share-options {
    display:flex;
    justify-content:space-around;
    padding:18px 5px;
    color:#719263;
    font-size:.8em
}
.mcui-share-flow {
    width:46%;
    max-width:250px;
    text-align:center
}
.mcui-flow-card {
    padding:16px 10px;
    border:1px solid #d9e3ce;
    border-radius:9px;
    background:#fff;
    box-shadow:0 5px 13px #29482008
}
.mcui-flow-card>strong {
    display:block;
    font-size:14px
}
.mcui-flow-card>small {
    display:block;
    margin-top:5px;
    font-size:10px
}
.mcui-flow-avatar {
    display:block;
    width:34px;
    height:34px;
    line-height:34px;
    margin:0 auto 8px;
    border-radius:50%;
    background:#e4eedc;
    color:#62814f;
    font-size:13px
}
.mcui-flow-down {
    display:block;
    margin:9px;
    color:#a3b98a;
    font-size:23px
}
.mcui-flow-friends {
    display:flex;
    justify-content:space-between;
    gap:6px
}
.mcui-flow-friends>span {
    padding:10px 8px;
    border:1px solid #e2e7d9;
    background:#f9fbf5;
    border-radius:5px;
    font-size:10px;
    white-space:nowrap
}
.mcui-commission {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:16px;
    padding:13px 12px;
    background:#f4ecda;
    border-radius:7px;
    color:#9a824c;
    font-size:11px
}
.mcui-commission>strong {
    font-size:21px;
    font-weight:500
}
.mcui-commission>small {
    flex-basis:100%;
    text-align:right;
    color:#aa976b;
    font-size:9px
}
.mcui-multi .mcui-stage,.mcui-interfaces .mcui-stage {
    flex-direction:column;
    min-height:380px;
    padding:28px 5px
}
.mcui-multi-hub,.mcui-interface-hub {
    position:relative;
    padding:24px 46px;
    border:1px solid #c3d2bc;
    border-radius:12px;
    background:linear-gradient(125deg,#f9fbf2,#e8efdf);
    box-shadow:0 14px 26px #2140260c;
    text-align:center
}
.mcui-multi-hub>span,.mcui-interface-hub>span {
    display:block;
    margin-bottom:5px;
    color:#829170;
    font-size:11px;
    letter-spacing:2px
}
.mcui-multi-hub>strong,.mcui-interface-hub>strong {
    display:block;
    font-size:22px;
    color:var(--mcui-green)
}
.mcui-multi-hub>small,.mcui-interface-hub>small {
    display:block;
    margin-top:9px;
    font-size:11px
}
.mcui-multi-line {
    width:80%;
    height:35px;
    border:1px solid #c6d8b9;
    border-bottom:0;
    margin-top:27px;
    position:relative
}
.mcui-multi-line:before {
    content:"";
    position:absolute;
    left:50%;
    top:-28px;
    height:28px;
    border-left:1px solid #c6d8b9
}
.mcui-multi-devices {
    display:grid;
    grid-template-columns:1fr 1fr 1.6fr 1fr 1fr;
    gap:12px;
    align-items:end;
    width:96%;
    text-align:center
}
.mcui-multi-devices>div>strong {
    display:block;
    margin-top:13px;
    font-size:11px;
    font-weight:500;
    color:#76876a
}
.mcui-device-icon {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    background:#f9fcf4;
    border:3px solid #56704c;
    border-radius:8px;
    font-style:normal;
    color:#648456
}
.mcui-device-phone {
    width:42px;
    height:74px
}
.mcui-device-phone:before {
    content:"";
    position:absolute;
    top:4px;
    width:12px;
    height:2px;
    background:#8fa583
}
.mcui-device-phone>b {
    padding:5px 2px;
    border-radius:5px;
    background:#e5eddb;
    font-size:10px
}
.mcui-device-desktop {
    width:110px;
    height:73px;
    border-radius:5px
}
.mcui-device-desktop>b {
    position:absolute;
    top:8px;
    left:6px;
    font-size:6px
}
.mcui-device-desktop>span {
    position:absolute;
    left:7px;
    right:7px;
    top:22px;
    height:32px;
    background:linear-gradient(110deg,#ecf1e5 50%,#cbdcbf 50%)
}
.mcui-device-desktop:before {
    content:"";
    position:absolute;
    bottom:-11px;
    width:20px;
    height:10px;
    background:#8ba17f
}
.mcui-device-desktop:after {
    content:"";
    position:absolute;
    bottom:-13px;
    width:50px;
    height:3px;
    border-radius:4px;
    background:#8ba17f
}
.mcui-multi-footer {
    display:flex;
    gap:25px;
    margin-top:27px;
    color:#8d9c82;
    font-size:11px
}
.mcui-interface-hub {
    width:74%;
    margin-bottom:44px
}
.mcui-interface-hub:after {
    content:"";
    position:absolute;
    left:50%;
    height:44px;
    top:100%;
    border-left:1px solid #bdd0b0
}
.mcui-interface-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    width:100%;
    gap:12px;
    position:relative
}
.mcui-interface-grid:before {
    content:"";
    position:absolute;
    top:-20px;
    left:12%;
    right:12%;
    border-top:1px solid #bdd0b0
}
.mcui-interface-grid>div {
    position:relative;
    padding:15px 5px;
    border:1px solid #e3e9da;
    border-radius:8px;
    background:#fff;
    text-align:center
}
.mcui-interface-grid>div:before {
    content:"";
    position:absolute;
    left:50%;
    top:-21px;
    height:20px;
    border-left:1px solid #bdd0b0
}
.mcui-interface-icon {
    display:block;
    width:43px;
    height:43px;
    line-height:43px;
    margin:0 auto 12px;
    border-radius:11px;
    background:#edf2e5;
    color:var(--mcui-green);
    font-size:12px
}
.mcui-interface-grid strong {
    display:block;
    font-size:13px
}
.mcui-interface-grid small {
    display:block;
    margin-top:6px;
    font-size:9px
}
.mcui-diy-layout {
    display:grid;
    grid-template-columns:28% 44% 28%;
    min-height:365px;
    background:#f1f5ec
}
.mcui-module-list {
    padding:18px 12px;
    background:#fff
}
.mcui-module-list h4 {
    font-size:.95em;
    margin-bottom:15px
}
.mcui-module-list>div:not(.mcui-color-swatches) {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-bottom:26px
}
.mcui-module-list span {
    padding:13px 2px;
    border:1px solid #e8edde;
    background:#f9fbf4;
    text-align:center;
    font-size:.7em
}
.mcui-color-swatches {
    display:flex;
    flex-wrap:wrap;
    gap:7px
}
.mcui-color-swatches>i {
    width:15px;
    height:15px;
    background:#436e50;
    border-radius:50%
}
.mcui-color-swatches>i:nth-child(2) {
    background:#b89b5f
}
.mcui-color-swatches>i:nth-child(3) {
    background:#7a99a2
}
.mcui-color-swatches>i:nth-child(4) {
    background:#b67d6a
}
.mcui-color-swatches>i:nth-child(5) {
    background:#8d81a2
}
.mcui-diy-preview {
    margin:20px 17px 15px;
    border:1px solid #d8e0cf;
    border-radius:4px;
    background:#fff;
    align-self:start;
    overflow:hidden;
    font-size:.9em
}
.mcui-diy-preview .mcui-store-banner {
    height:126px;
    padding:14px 9px
}
.mcui-diy-preview .mcui-store-banner>strong {
    font-size:1.45em;
    max-width:75%;
    line-height:1.6
}
.mcui-diy-preview .mcui-art {
    width:70px;
    height:78px;
    right:4px;
    bottom:2px
}
.mcui-selected-module {
    padding:8px 7px;
    border:2px dashed #85a171
}
.mcui-selected-module>small {
    display:block;
    margin-bottom:8px;
    color:#759362;
    font-size:.72em
}
.mcui-diy-preview .mcui-product-art {
    height:66px
}
.mcui-diy-properties {
    padding:20px 11px;
    background:#fff;
    border-left:1px solid #e7ecdf
}
.mcui-diy-properties>span {
    display:block;
    margin:17px 0;
    padding:7px;
    background:#f0f5e9;
    border-radius:4px;
    color:#71935b;
    font-size:.75em
}
.mcui-property {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:18px 0;
    color:#9aa48f;
    font-size:.72em
}
.mcui-property>b {
    padding:6px;
    border:1px solid #e4eadc;
    border-radius:3px;
    color:#6e8061;
    font-weight:400
}
.mcui-community .mcui-stage {
    min-height:515px;
    padding-right:0;
    padding-left:0
}
.mcui-community-main {
    width:225px;
    margin-right:-8%;
    margin-left:-8%;
    transform:translateY(-10px);
    font-size:10.5px
}
.mcui-community-side {
    width:192px;
    max-width:34%;
    font-size:9px;
    z-index:1
}
.mcui-community-comments {
    transform:translateY(34px) rotate(-8deg)
}
.mcui-community-products {
    transform:translateY(18px) rotate(8deg)
}
.mcui-community-cover {
    position:relative;
    height:165px;
    padding:19px 12px;
    overflow:hidden;
    background:linear-gradient(145deg,#5e7b55,#183d2d);
    color:#e4ecd8
}
.mcui-community-cover>span {
    position:relative;
    z-index:1;
    font-size:.7em;
    letter-spacing:1px
}
.mcui-community-cover>strong {
    position:relative;
    display:block;
    z-index:1;
    margin-top:14px;
    font-size:2em;
    line-height:1.5;
    font-weight:500;
    letter-spacing:2px
}
.mcui-community-cover .mcui-art {
    width:106px;
    height:112px;
    right:10px;
    bottom:15px
}
.mcui-community-main .mcui-community-cover {
    height:220px
}
.mcui-community-main .mcui-community-cover .mcui-art {
    width:118px;
    height:125px;
    right:7px;
    bottom:13px
}
.mcui-community-sheet {
    padding:15px 10px 9px;
    position:relative;
    margin-top:-7px;
    border-radius:10px 10px 0 0;
    background:#fff
}
.mcui-community-sheet>strong {
    display:block;
    margin-bottom:10px;
    text-align:center;
    font-size:1.05em
}
.mcui-comment {
    display:flex;
    gap:7px;
    margin:17px 0;
    font-size:.92em;
    line-height:1.7
}
.mcui-comment p>b {
    display:block;
    color:#8f9a87;
    font-weight:400
}
.mcui-comment p>small {
    display:block;
    color:#b0b8a8;
    font-size:.75em;
    margin-top:4px
}
.mcui-note-content {
    padding:13px 10px 0;
    font-size:.88em
}
.mcui-note-content>b {
    font-size:.86em
}
.mcui-note-content>p {
    margin:6px 0;
    line-height:1.6
}
.mcui-note-content>span {
    color:#7f9a65;
    font-size:.86em
}
.mcui-note-social {
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    padding:6px 0 9px;
    border-bottom:1px solid #edf0e8;
    color:#a0ab95;
    font-size:.8em
}
.mcui-community-main .mcui-phone-nav {
    margin-top:0;
    padding:9px 0
}
.mcui-community-main .mcui-live-product {
    font-size:.7em
}
.mcui-community-products .mcui-goods-row {
    font-size:.85em;
    gap:4px;
    min-height:71px
}
.mcui-community-products .mcui-goods-row .mcui-mini-cup,.mcui-community-products .mcui-goods-row .mcui-mini-bag,.mcui-community-products .mcui-goods-row .mcui-mini-box {
    transform:scale(.7);
    margin-left:-4px;
    margin-right:-3px
}
.mcui-ai-layout {
    display:grid;
    grid-template-columns:44% 56%;
    padding:16px;
    background:#f4f7f0;
    gap:0
}
.mcui-ai-product {
    position:relative;
    padding:15px;
    background:#fff;
    border-radius:5px;
    margin-right:14px
}
.mcui-ai-product-photo {
    height:145px;
    position:relative;
    background:#edf0e2;
    border-radius:5px;
    margin:15px 0
}
.mcui-ai-product-photo>.mcui-art {
    width:113px;
    height:117px;
    right:calc(50% - 49px);
    bottom:10px
}
.mcui-ai-product dl>div {
    padding:9px 0;
    border-bottom:1px solid #edf0e5;
    font-size:.75em;
    line-height:1.65
}
.mcui-ai-product dt {
    color:#98a38d;
    font-size:.86em;
    margin-bottom:5px
}
.mcui-ai-product dd {
    padding:6px 8px;
    border:1px solid #e4eadb;
    border-radius:3px;
    color:#6e7f62
}
.mcui-ai-tag {
    display:inline-block;
    margin-top:13px;
    padding:5px 9px;
    border-radius:4px;
    background:#edf4e4;
    color:#77915c;
    font-size:.75em
}
.mcui-ai-assistant {
    padding:17px 15px;
    background:#fff;
    border:1px solid #dce6ce;
    border-radius:6px
}
.mcui-ai-heading {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:1.08em
}
.mcui-ai-heading>span {
    display:block;
    width:30px;
    height:30px;
    background:#e7f0dd;
    border-radius:8px;
    text-align:center;
    line-height:30px;
    color:#839f60;
    font-size:23px
}
.mcui-ai-prompt {
    margin:23px 0 17px!important;
    padding:13px 12px;
    background:#f1f4e9;
    border-radius:6px;
    color:#768969;
    font-size:.83em;
    line-height:1.8
}
.mcui-ai-answer {
    padding:15px 12px;
    border:1px solid #e6edda;
    border-radius:7px;
    font-size:.83em
}
.mcui-ai-answer>strong {
    display:block;
    margin-bottom:12px;
    color:var(--mcui-green);
    font-size:1.05em
}
.mcui-ai-answer>p {
    color:#819071;
    font-size:.96em;
    line-height:2
}
.mcui-ai-result-label {
    margin-top:13px;
    color:#a1af92;
    font-size:.75em
}
.mcui-ai-usecases {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:18px
}
.mcui-ai-usecases>span {
    padding:5px 8px;
    border:1px solid #e5ecda;
    border-radius:4px;
    color:#91a07c;
    font-size:.65em
}
@container (max-width:480px) {
    .mcui-stage {
        min-height:330px;
        padding:15px 5px
    }
    .mcui-window {
        font-size:11px
    }
    .mcui-hero .mcui-stage {
        min-height:535px
    }
    .mcui-hero .mcui-phone-primary {
        width:225px;
        max-width:65%;
        margin:0 20% 0 0
    }
    .mcui-member-phone {
        width:200px;
        max-width:58%;
        right:12%;
        bottom:30px;
        transform:rotate(7deg) scale(.84)
    }
    .mcui-label-store {
        left:1%;
        bottom:11%;
        font-size:10px;
        padding:8px 10px
    }
    .mcui-label-member {
        right:0;
        top:16%;
        font-size:10px;
        padding:8px 10px
    }
    .mcui-channel-window {
        width:76%;
        margin-right:17%
    }
    .mcui-obs-preview {
        height:170px
    }
    .mcui-obs-preview>.mcui-art {
        width:110px;
        height:115px;
        right:31%;
        bottom:27px
    }
    .mcui-channel-phone {
        top:20px;
        font-size:8px;
        max-width:40%;
        border-width:4px;
        border-radius:22px
    }
    .mcui-channel-phone .mcui-live-scene {
        height:215px
    }
    .mcui-channel-phone .mcui-live-scene>strong {
        font-size:1.7em;
        left:9px
    }
    .mcui-channel-phone .mcui-art {
        width:88px;
        height:97px;
        right:8px
    }
    .mcui-channel-phone .mcui-phone-title {
        font-size:.9em;
        padding-inline:5px
    }
    .mcui-channel-labels { gap: 6px; }
    .mcui-channel-labels>span {
        font-size:10px;
        padding:6px 8px;
    }
    .mcui-live-channels .mcui-stage {
        min-height:380px
    }
    .mcui-control-layout {
        grid-template-columns:44% 56%;
        padding:5px
    }
    .mcui-control-preview {
        display:none
    }
    .mcui-control-comments,.mcui-control-goods {
        padding:12px 8px
    }
    .mcui-control-comments>p {
        font-size:.83em
    }
    .mcui-control-comments {
        border-right-width:5px
    }
    .mcui-control-goods .mcui-goods-row {
        font-size:.78em
    }
    .mcui-control-goods .mcui-stock-note {
        margin-top:15px
    }
    .mcui-control-tools>span {
        font-size:.76em
    }
    .mcui-dashboard {
        grid-template-columns:1fr
    }
    .mcui-dashboard-menu {
        display:none
    }
    .mcui-dashboard-main {
        padding:13px 9px
    }
    .mcui-stat-grid {
        gap:5px
    }
    .mcui-stat-grid>div {
        padding:11px 6px
    }
    .mcui-stat-grid strong {
        font-size:14px
    }
    .mcui-stat-grid small {
        font-size:8px
    }
    .mcui-chart svg {
        height:110px
    }
    .mcui-live-engage .mcui-stage,.mcui-live-commerce .mcui-stage {
        min-height:460px
    }
    .mcui-live-secondary {
        width:175px;
        max-width:47%;
        font-size:9px;
        transform:translate(-1px,10px) rotate(-5deg)
    }
    .mcui-live-primary {
        width:205px;
        max-width:59%;
        margin-left:-30px;
        font-size:10px
    }
    .mcui-share-phone {
        width:195px;
        max-width:52%;
        font-size:10px
    }
    .mcui-live-distribution .mcui-stage {
        gap:12px;
        min-height:440px
    }
    .mcui-share-poster {
        min-height:290px;
        padding:15px 5px
    }
    .mcui-share-poster>strong {
        font-size:1.9em
    }
    .mcui-share-flow {
        width:45%
    }
    .mcui-flow-card {
        padding:14px 6px
    }
    .mcui-flow-card>strong {
        font-size:12px
    }
    .mcui-flow-card>small {
        font-size:9px
    }
    .mcui-flow-friends {
        gap:3px
    }
    .mcui-flow-friends>span {
        padding:8px 4px;
        font-size:8px
    }
    .mcui-commission {
        padding:11px 8px;
        font-size:10px
    }
    .mcui-commission>strong {
        font-size:18px
    }
    .mcui-diy-layout {
        grid-template-columns:34% 66%;
        min-height:345px
    }
    .mcui-diy-properties {
        display:none
    }
    .mcui-module-list {
        padding:16px 9px
    }
    .mcui-module-list>div:not(.mcui-color-swatches) {
        grid-template-columns:1fr
    }
    .mcui-module-list span {
        padding:9px 3px;
        font-size:9px
    }
    .mcui-module-list h4 {
        font-size:10px
    }
    .mcui-diy-preview {
        margin:18px 15px 15px;
        font-size:11px
    }
    .mcui-diy-preview .mcui-store-banner {
        height:135px
    }
    .mcui-diy-preview .mcui-product-art {
        height:78px
    }
    .mcui-color-swatches {
        gap:5px
    }
    .mcui-color-swatches>i {
        width:11px;
        height:11px
    }
    .mcui-multi-devices {
        gap:7px;
        width:100%
    }
    .mcui-device-desktop {
        width:75px;
        height:59px
    }
    .mcui-device-desktop>span {
        height:25px;
        top:20px
    }
    .mcui-device-phone {
        width:34px;
        height:61px
    }
    .mcui-multi-devices>div>strong {
        font-size:9px
    }
    .mcui-multi-hub,.mcui-interface-hub {
        padding:22px 25px
    }
    .mcui-multi-hub>strong,.mcui-interface-hub>strong {
        font-size:20px
    }
    .mcui-interface-grid {
        gap:6px
    }
    .mcui-interface-grid>div {
        padding:13px 4px
    }
    .mcui-interface-grid strong {
        font-size:11px
    }
    .mcui-interface-grid small {
        font-size:8px;
        line-height:1.8
    }
    .mcui-interface-icon {
        width:36px;
        height:36px;
        line-height:36px;
        font-size:11px
    }
    .mcui-community .mcui-stage {
        min-height:490px
    }
    .mcui-community-main {
        max-width:55%;
        font-size:9.5px;
        margin-inline:-13%
    }
    .mcui-community-side {
        max-width:37%;
        font-size:8px
    }
    .mcui-community-comments {
        transform:translateY(20px) rotate(-6deg)
    }
    .mcui-community-products {
        transform:translateY(13px) rotate(6deg)
    }
    .mcui-community-side .mcui-goods-row {
        gap:0
    }
    .mcui-community-side .mcui-goods-row>.mcui-mini-cup,.mcui-community-side .mcui-goods-row>.mcui-mini-bag,.mcui-community-side .mcui-goods-row>.mcui-mini-box {
        display:none
    }
    .mcui-community-side .mcui-goods-row>div {
        padding-left:4px
    }
    .mcui-community-main .mcui-community-cover {
        height:210px
    }
    .mcui-community-main .mcui-art {
        width:100px;
        height:110px;
        right:5px
    }
    .mcui-ai-layout {
        padding:9px;
        grid-template-columns:43% 57%
    }
    .mcui-ai-product {
        padding:10px;
        margin-right:7px
    }
    .mcui-ai-product>h4 {
        font-size:10px
    }
    .mcui-ai-product-photo {
        height:125px
    }
    .mcui-ai-product-photo>.mcui-art {
        width:85px;
        height:92px;
        right:calc(50% - 40px)
    }
    .mcui-ai-product dl>div {
        font-size:9px
    }
    .mcui-ai-product dd {
        padding:5px
    }
    .mcui-ai-assistant {
        padding:13px 10px
    }
    .mcui-ai-heading {
        font-size:11px;
        gap:5px
    }
    .mcui-ai-heading>span {
        width:23px;
        height:23px;
        line-height:23px;
        font-size:20px
    }
    .mcui-ai-prompt {
        padding:11px 8px;
        font-size:10px;
        margin:16px 0 12px!important
    }
    .mcui-ai-answer {
        padding:12px 8px;
        font-size:10px
    }
    .mcui-ai-usecases {
        margin-top:12px;
        gap:4px
    }
    .mcui-ai-usecases>span {
        font-size:8px;
        padding:4px
    }
    .mcui figcaption {
        font-size:10px
    }
}
@container (max-width:340px) {
    .mcui-hero .mcui-stage {
        min-height:510px
    }
    .mcui-hero .mcui-phone-primary {
        max-width:75%;
        margin-right:0;
        margin-left:0;
        transform:rotate(-3deg)
    }
    .mcui-hero .mcui-member-phone {
        display:none
    }
    .mcui-label-member {
        display:none
    }
    .mcui-community-side {
        display:none
    }
    .mcui-community-main {
        max-width:80%;
        margin-inline:0;
        font-size:10px;
        transform:none
    }
    .mcui-community .mcui-stage {
        min-height:510px
    }
    .mcui-live-secondary {
        display:none
    }
    .mcui-live-primary {
        max-width:79%;
        margin-left:0;
        font-size:10px;
        transform:none
    }
    .mcui-live-engage .mcui-stage,.mcui-live-commerce .mcui-stage {
        min-height:470px
    }
    .mcui-channel-phone {
        max-width:47%
    }
    .mcui-channel-labels>span {
        font-size:10px;
        padding:6px;
    }
    .mcui-flow-friends>span:last-child {
        display:none
    }
    .mcui-interface-grid {
        grid-template-columns:1fr 1fr;
        gap:10px
    }
    .mcui-interface-grid:before,.mcui-interface-grid>div:before {
        display:none
    }
    .mcui-interface-hub {
        margin-bottom:24px
    }
    .mcui-interface-hub:after {
        height:24px
    }
    .mcui-ai-layout {
        grid-template-columns:1fr
    }
    .mcui-ai-product {
        display:none
    }
    .mcui-ai-assistant {
        padding:17px
    }
    .mcui-ai-prompt,.mcui-ai-answer {
        font-size:11px
    }
    .mcui-ai-heading {
        font-size:13px
    }
    .mcui-ai-usecases>span {
        font-size:10px
    }
    .mcui-ai .mcui-stage {
        min-height:410px
    }
    .mcui-window-bar {
        padding:10px 8px;
        gap:5px
    }
    .mcui-window-bar>span:last-child {
        font-size:8px
    }
    .mcui-stat-grid strong {
        font-size:12px
    }
    .mcui-diy-preview {
        margin:18px 9px
    }
    .mcui-multi-devices {
        gap:5px
    }
    .mcui-device-desktop {
        width:62px
    }
    .mcui-device-phone {
        width:29px;
        height:55px
    }
    .mcui-multi-devices>div>strong {
        font-size:8px
    }
    .mcui-multi-hub>strong {
        font-size:18px
    }
    .mcui-multi-footer {
        gap:13px;
        font-size:10px
    }
}