.visual{isolation:isolate;background:radial-gradient(70% 90% at 12% 18%, color-mix(in oklab, var(--v2) 78%, transparent), transparent 70%), radial-gradient(60% 80% at 92% 20%, color-mix(in oklab, var(--v4) 55%, transparent), transparent 72%), radial-gradient(85% 100% at 70% 112%, color-mix(in oklab, var(--v2) 55%, var(--v1)), transparent 75%), var(--v1);width:100%;height:100%;position:relative;overflow:hidden;container-type:size}.visual:after{content:"";z-index:2;pointer-events:none;mix-blend-mode:soft-light;opacity:.45;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");position:absolute;inset:0}.visual-stage{--u:min(1cqw, 1.6cqh);place-items:center;display:grid;position:absolute;inset:0}.mock-line{width:100%;height:calc(.9 * var(--u));border-radius:calc(1 * var(--u));background:#0b0b0b1a;display:block}.mock-line-short{width:55%}.mock-line-xs{width:calc(5 * var(--u));height:calc(.7 * var(--u))}.mock-pill{width:calc(12 * var(--u));height:calc(3 * var(--u));background:var(--v2);border-radius:999px;display:block}.mock-pill-wide{width:100%;height:calc(2.4 * var(--u));background:var(--v3)}.mock-browser{width:calc(64 * var(--u));border-radius:calc(1.2 * var(--u));box-shadow:0 0 0 1px #0b0b0b0f, 0 calc(3 * var(--u)) calc(7 * var(--u)) -calc(2.5 * var(--u)) #0b0b0b66;background:#fff;overflow:hidden}.mock-browser-bar{align-items:center;gap:calc(.7 * var(--u));height:calc(3 * var(--u));padding:0 calc(1.4 * var(--u));background:#f1efeb;display:flex}.mock-browser-bar i{width:calc(.9 * var(--u));height:calc(.9 * var(--u));background:#0b0b0b29;border-radius:50%}.mock-url{width:26%;height:calc(1.3 * var(--u));background:#fff;border-radius:999px;margin-inline:auto}.mock-browser-body{gap:calc(2 * var(--u));padding:calc(2.4 * var(--u));flex-direction:column;display:flex}.mock-phone{width:calc(22 * var(--u));aspect-ratio:9/19;padding:calc(1.1 * var(--u));border-radius:calc(3.8 * var(--u));box-shadow:0 calc(3 * var(--u)) calc(7 * var(--u)) -calc(2.5 * var(--u)) #0b0b0b80;background:#111;position:relative}.mock-phone-notch{top:calc(1.9 * var(--u));z-index:1;width:calc(6 * var(--u));height:calc(1.5 * var(--u));background:#111;border-radius:999px;position:absolute;left:50%;transform:translate(-50%)}.mock-phone-body{gap:calc(1.2 * var(--u));height:100%;padding:calc(4 * var(--u)) calc(1.6 * var(--u)) calc(1.6 * var(--u));border-radius:calc(2.8 * var(--u));background:#fff;flex-direction:column;display:flex;overflow:hidden}.mock-phone .mock-line{height:calc(.7 * var(--u))}.mock-nav{align-items:center;gap:calc(1.4 * var(--u));display:flex}.mock-dot{width:calc(2 * var(--u));height:calc(2 * var(--u));background:var(--v3);border-radius:50%;margin-right:auto}.mock-hero{gap:calc(1.1 * var(--u));padding-block:calc(1.6 * var(--u));flex-direction:column;display:flex}.mock-title{width:72%;height:calc(2.6 * var(--u));border-radius:calc(.6 * var(--u));background:var(--v3);display:block}.mock-title-short{width:46%;margin-bottom:calc(.8 * var(--u))}.mock-cols{gap:calc(1.4 * var(--u));grid-template-columns:repeat(3,1fr);display:grid}.mock-tile{aspect-ratio:4/3;border-radius:calc(1 * var(--u));background:linear-gradient(140deg, color-mix(in oklab, var(--v2) 55%, white), color-mix(in oklab, var(--v1) 80%, white))}.mock-tile:nth-child(2){background:linear-gradient(140deg, color-mix(in oklab, var(--v3) 70%, white), color-mix(in oklab, var(--v2) 40%, white))}.mock-cart{width:calc(2.4 * var(--u));height:calc(2.4 * var(--u));border-radius:calc(.6 * var(--u));background:var(--v2)}.mock-products{gap:calc(1.6 * var(--u));grid-template-columns:repeat(4,1fr);display:grid}.mock-product{gap:calc(.8 * var(--u));flex-direction:column;display:flex}.mock-product-image{aspect-ratio:3/4;border-radius:calc(.8 * var(--u));background:linear-gradient(160deg, color-mix(in oklab, var(--v2) 60%, white), color-mix(in oklab, var(--v2) 85%, var(--v3)));display:block}.mock-product:nth-child(2n) .mock-product-image,.mock-cart-row:nth-child(2n) .mock-product-image{background:linear-gradient(160deg, color-mix(in oklab, var(--v1) 70%, white), color-mix(in oklab, var(--v3) 55%, var(--v1)))}.mock-app-title{width:60%;height:calc(1.6 * var(--u));border-radius:calc(.5 * var(--u));background:var(--v3);display:block}.mock-card{align-items:center;gap:calc(1.2 * var(--u));padding:calc(1.4 * var(--u));border-radius:calc(1.6 * var(--u));background:linear-gradient(140deg, var(--v2), color-mix(in oklab, var(--v2) 60%, var(--v3)));display:flex}.mock-card>div{gap:calc(.7 * var(--u));flex-direction:column;flex:1;display:flex}.mock-card .mock-line{background:#ffffff8c}.mock-ring{width:calc(4.4 * var(--u));height:calc(4.4 * var(--u));border:calc(.8 * var(--u)) solid #ffffffe6;border-right-color:#ffffff4d;border-radius:50%;flex:none}.mock-row{align-items:center;gap:calc(1 * var(--u));display:flex}.mock-avatar{width:calc(2.6 * var(--u));height:calc(2.6 * var(--u));background:color-mix(in oklab, var(--v2) 45%, white);border-radius:50%;flex:none}.mock-phone .mock-pill-wide{margin-top:auto}.mock-pair{place-items:center;display:grid;position:relative}.mock-pair>*{grid-area:1/1}.mock-pair-back{transform:translateX(-calc(9 * var(--u))) rotate(-7deg) scale(.9);opacity:.92}.mock-pair-front{transform:translateX(calc(8 * var(--u))) rotate(4deg)}.mock-dashboard{gap:calc(2 * var(--u));display:flex}.mock-sidebar{gap:calc(1.2 * var(--u));width:20%;padding:calc(1.4 * var(--u));border-radius:calc(1 * var(--u));background:#0b0b0b0a;flex-direction:column;flex:none;display:flex}.mock-dashboard-main{gap:calc(1.6 * var(--u));flex-direction:column;flex:1;min-width:0;display:flex}.mock-stats{gap:calc(1.2 * var(--u));grid-template-columns:repeat(3,1fr);display:grid}.mock-stat{aspect-ratio:2;border-radius:calc(.8 * var(--u));background:color-mix(in oklab, var(--v2) 16%, white);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--v2) 30%, white)}.mock-stat:first-child{background:var(--v3);box-shadow:none}.mock-chart{width:100%;height:calc(14 * var(--u))}.mock-chart path{fill:color-mix(in oklab, var(--v2) 24%, transparent)}.mock-chart .mock-chart-line{fill:none;stroke:var(--v2);stroke-width:2px;vector-effect:non-scaling-stroke}.mock-admin-top{height:calc(2.4 * var(--u));margin:-calc(2.4 * var(--u)) -calc(2.4 * var(--u)) calc(2 * var(--u));background:#1b1b1b}.mock-setting{justify-content:space-between;align-items:center;gap:calc(2 * var(--u));padding-block:calc(.9 * var(--u));border-bottom:1px solid #0b0b0b12;display:flex}.mock-setting .mock-line{width:50%}.mock-toggle{width:calc(3.6 * var(--u));height:calc(2 * var(--u));background:var(--v2);border-radius:999px;flex:none;position:relative}.mock-toggle:after{content:"";top:calc(.3 * var(--u));right:calc(.3 * var(--u));width:calc(1.4 * var(--u));height:calc(1.4 * var(--u));background:#fff;border-radius:50%;position:absolute}.mock-toggle.is-off{background:#0b0b0b26}.mock-toggle.is-off:after{right:auto;left:calc(.3 * var(--u))}.mock-sync{width:100%;height:100%;position:relative}.mock-sync-laptop{width:calc(52 * var(--u));position:absolute;top:50%;left:10%;transform:translateY(-50%)}.mock-sync-phone{width:calc(18 * var(--u));position:absolute;top:50%;right:12%;transform:translateY(-46%)}.mock-sync-badge{z-index:1;width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--v3);box-shadow:0 calc(1.6 * var(--u)) calc(4 * var(--u)) -calc(1 * var(--u)) #0b0b0b80;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:60%;transform:translate(-50%,-50%)}.mock-sync-badge svg{fill:none;stroke:#fff;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:52%}.mock-cart-rows{gap:calc(1.4 * var(--u));flex-direction:column;display:flex}.mock-cart-row{align-items:center;gap:calc(1.4 * var(--u));display:flex}.mock-cart-row .mock-product-image{width:calc(5 * var(--u));aspect-ratio:1;flex:none}.mock-cart-row>div{gap:calc(.7 * var(--u));flex-direction:column;flex:1;display:flex}.mock-phone .mock-cart-rows{gap:calc(1 * var(--u));height:100%}.mock-phone .mock-cart-row .mock-product-image{width:calc(3.6 * var(--u))}.mock-phone .mock-cart-rows .mock-pill-wide{margin-top:auto}