:root{--cxs-live-preview-morph:820ms;--cxs-live-preview-ease:cubic-bezier(.16,1,.3,1);--cxs-live-preview-desktop-w:1440px;--cxs-live-preview-desktop-h:900px;--cxs-live-preview-mobile-w:430px;--cxs-live-preview-mobile-h:932px}
body.cxs-live-preview-open{overscroll-behavior:none}
.cxs-live-preview-entry{display:inline-flex}
.cxs-live-preview-stage[hidden]{display:none!important}
.cxs-live-preview-stage{position:fixed;inset:0;z-index:2147480000;overflow:hidden;contain:layout paint style;color:#f7fbff;font-family:Manrope,system-ui,-apple-system,sans-serif}
.cxs-live-preview-stage__backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,rgba(25,74,145,.24),transparent 38%),rgba(3,10,22,.94);backdrop-filter:blur(20px)}
.cxs-live-preview-stage__panel{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;min-height:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));box-sizing:border-box}
.cxs-live-preview-toolbar{position:relative;z-index:4;display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);align-items:center;gap:16px;min-height:58px;width:min(1540px,100%);margin:0 auto 10px;padding:8px 10px 8px 16px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(7,18,37,.76);box-shadow:0 18px 60px rgba(0,0,0,.22);backdrop-filter:blur(18px);box-sizing:border-box}
.cxs-live-preview-toolbar__identity{display:grid;min-width:0;gap:2px}.cxs-live-preview-toolbar__identity span{font:800 9px/1 Sora,sans-serif;letter-spacing:.14em;color:#68c7ff}.cxs-live-preview-toolbar__identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 13px/1.3 Sora,sans-serif;color:#fff}
.cxs-live-preview-toolbar__devices{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px;border-radius:13px;background:rgba(255,255,255,.07);isolation:isolate}
.cxs-live-preview-toolbar__devices button,.cxs-live-preview-toolbar__actions button,.cxs-live-preview-toolbar__actions a{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;border:0;border-radius:10px;padding:0 13px;background:transparent;color:#d9e6f7;font:700 12px/1 Sora,sans-serif;text-decoration:none;cursor:pointer;transition:color .2s ease,background-color .2s ease,transform .2s ease}
.cxs-live-preview-toolbar__devices button:focus-visible,.cxs-live-preview-toolbar__actions button:focus-visible,.cxs-live-preview-toolbar__actions a:focus-visible{outline:2px solid #58c6ff;outline-offset:2px}
.cxs-live-preview-toolbar__devices button:active,.cxs-live-preview-toolbar__actions button:active,.cxs-live-preview-toolbar__actions a:active{transform:scale(.97)}
.cxs-live-preview-toolbar__indicator{position:absolute;z-index:1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:10px;background:linear-gradient(180deg,#1d7fff,#0e5ed3);box-shadow:0 8px 20px rgba(15,104,224,.28);transition:transform .3s var(--cxs-live-preview-ease)}
[data-cxs-live-preview][data-device-mode="mobile"] .cxs-live-preview-toolbar__indicator{transform:translateX(100%)}
.cxs-live-preview-toolbar__actions{display:flex;justify-content:flex-end;gap:4px;min-width:0}.cxs-live-preview-toolbar__actions button,.cxs-live-preview-toolbar__actions a{background:rgba(255,255,255,.055)}.cxs-live-preview-toolbar__actions button:hover,.cxs-live-preview-toolbar__actions a:hover{background:rgba(255,255,255,.11);color:#fff}.cxs-live-preview-toolbar__actions [data-cxs-live-preview-close]{font-size:24px;line-height:1;padding:0;width:38px}
.cxs-live-preview-canvas{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;width:100%;overflow:hidden;isolation:isolate}
.cxs-live-preview-device-shell{position:relative;flex:0 0 auto;width:1488px;height:1000px;padding:22px 24px 78px;border-radius:32px;box-sizing:border-box;background:linear-gradient(145deg,#252b33 0%,#0a0e14 42%,#2b313a 100%);box-shadow:0 50px 110px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.16);transform:scale(var(--cxs-live-preview-scale,0.72));transform-origin:center center;transition:width var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),height var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),padding var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),border-radius var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),background var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),box-shadow var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),transform var(--cxs-live-preview-morph) var(--cxs-live-preview-ease)}
.cxs-live-preview-device-shell__screen{position:relative;width:var(--cxs-live-preview-desktop-w);height:var(--cxs-live-preview-desktop-h);overflow:hidden;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:width var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),height var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),border-radius var(--cxs-live-preview-morph) var(--cxs-live-preview-ease)}
.cxs-live-preview-device-shell__viewport,.cxs-live-preview-device-shell__viewport iframe{display:block;width:100%;height:100%;border:0;background:#fff}.cxs-live-preview-device-shell__viewport iframe{position:absolute;inset:0}
.cxs-live-preview-device-shell__camera{position:absolute;z-index:3;top:22px;left:50%;width:116px;height:22px;transform:translateX(-50%);border-radius:0 0 13px 13px;background:#080b10;opacity:.96;transition:width var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),height var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),top var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),border-radius var(--cxs-live-preview-morph) var(--cxs-live-preview-ease)}
.cxs-live-preview-device-shell__camera:after{content:"";position:absolute;right:22px;top:7px;width:7px;height:7px;border-radius:50%;background:#17283f;box-shadow:0 0 0 2px #05070a}
.cxs-live-preview-device-shell__base{position:absolute;left:50%;bottom:12px;width:1560px;height:54px;transform:translateX(-50%);border-radius:0 0 58px 58px;background:linear-gradient(180deg,#c9ced5 0%,#818791 28%,#d6d9dd 72%,#777d85 100%);box-shadow:0 24px 38px rgba(0,0,0,.35);transition:opacity .45s ease,transform var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),width var(--cxs-live-preview-morph) var(--cxs-live-preview-ease),height var(--cxs-live-preview-morph) var(--cxs-live-preview-ease)}
.cxs-live-preview-device-shell__base:after{content:"";position:absolute;top:0;left:50%;width:220px;height:8px;transform:translateX(-50%);border-radius:0 0 12px 12px;background:#696f77}
[data-cxs-live-preview][data-device-mode="desktop"] .cxs-live-preview-device-shell__screen{width:1440px;height:900px}
[data-cxs-live-preview][data-device-mode="mobile"] .cxs-live-preview-device-shell{width:458px;height:960px;padding:14px;border-radius:58px;background:linear-gradient(145deg,#b9bec7 0%,#484e58 12%,#0d1118 44%,#8e949e 92%,#c8ccd3 100%);box-shadow:0 38px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.42)}
[data-cxs-live-preview][data-device-mode="mobile"] .cxs-live-preview-device-shell__screen{width:430px;height:932px;border-radius:46px}
[data-cxs-live-preview][data-device-mode="mobile"] .cxs-live-preview-device-shell__camera{top:22px;width:128px;height:34px;border-radius:18px;background:#020306}
[data-cxs-live-preview][data-device-mode="mobile"] .cxs-live-preview-device-shell__camera:after{display:none}
[data-cxs-live-preview][data-device-mode="mobile"] .cxs-live-preview-device-shell__base{width:250px;height:30px;opacity:0;transform:translate(-50%,40px) scale(.6)}
.cxs-live-preview-state{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:34px;text-align:center;background:linear-gradient(180deg,rgba(5,15,31,.97),rgba(8,25,49,.95));color:#fff}.cxs-live-preview-state[hidden]{display:none!important}.cxs-live-preview-state--loading span{width:28px;height:28px;border:2px solid rgba(255,255,255,.2);border-top-color:#56c7ff;border-radius:50%;animation:cxs-live-preview-spin .8s linear infinite}.cxs-live-preview-state strong{font:700 16px/1.4 Sora,sans-serif}.cxs-live-preview-state p{max-width:390px;margin:0;color:#bac8dc;font-size:14px;line-height:1.6}.cxs-live-preview-state a{display:inline-flex;margin-top:6px;padding:11px 15px;border-radius:12px;background:#1476ea;color:#fff;text-decoration:none;font-weight:800}
@keyframes cxs-live-preview-spin{to{transform:rotate(360deg)}}
[data-cxs-live-preview][data-frame-state="ready"] .cxs-live-preview-device-shell__screen{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(84,172,255,.06)}
@media(max-width:1024px){.cxs-live-preview-stage__panel{padding:10px}.cxs-live-preview-toolbar{grid-template-columns:1fr auto;gap:8px}.cxs-live-preview-toolbar__identity{display:none}.cxs-live-preview-toolbar__devices{justify-self:start}.cxs-live-preview-toolbar__actions{justify-self:end}}
@media(max-width:768px){.cxs-live-preview-toolbar{min-height:52px;padding:6px 7px;border-radius:15px}.cxs-live-preview-toolbar__devices button,.cxs-live-preview-toolbar__actions button,.cxs-live-preview-toolbar__actions a{min-height:34px;padding:0 10px;font-size:11px}.cxs-live-preview-toolbar__actions span{display:none}.cxs-live-preview-canvas{margin-top:2px}}
@media(max-width:390px){.cxs-live-preview-stage__panel{padding:max(7px,env(safe-area-inset-top)) 7px max(7px,env(safe-area-inset-bottom))}.cxs-live-preview-toolbar{gap:5px;margin-bottom:5px}.cxs-live-preview-toolbar__devices button{padding:0 8px}.cxs-live-preview-toolbar__actions button,.cxs-live-preview-toolbar__actions a{width:34px;padding:0}.cxs-live-preview-toolbar__actions [data-cxs-live-preview-close]{width:34px}.cxs-live-preview-state{padding:26px}}
@media(max-width:320px){.cxs-live-preview-toolbar__devices button{font-size:10px;padding:0 6px}.cxs-live-preview-toolbar__actions{gap:2px}.cxs-live-preview-toolbar__actions button,.cxs-live-preview-toolbar__actions a{width:31px;min-height:31px}.cxs-live-preview-toolbar__actions [data-cxs-live-preview-close]{width:31px}.cxs-live-preview-state p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.cxs-live-preview-device-shell,.cxs-live-preview-device-shell__screen,.cxs-live-preview-device-shell__camera,.cxs-live-preview-device-shell__base,.cxs-live-preview-toolbar__indicator{transition:none!important}.cxs-live-preview-state--loading span{animation:none}}
@media (prefers-reduced-motion: reduce){[data-cxs-live-preview] *{scroll-behavior:auto!important}}