.cpx-app {
    --cpx-primary: #7567ff;
    --cpx-primary-deep: #4b3be8;
    --cpx-cyan: #25d9e9;
    --cpx-aqua: #7df6e7;
    --cpx-bg: #f4f6fb;
    --cpx-bg-2: #eef1f8;
    --cpx-panel: rgba(255,255,255,.84);
    --cpx-panel-solid: #ffffff;
    --cpx-soft: #f4f6fb;
    --cpx-soft-2: #e9edf6;
    --cpx-text: #101426;
    --cpx-muted: #626a80;
    --cpx-faint: #8d95a9;
    --cpx-line: rgba(54,64,92,.14);
    --cpx-line-strong: rgba(54,64,92,.22);
    --cpx-success: #15945d;
    --cpx-warning: #be7415;
    --cpx-danger: #d24655;
    --cpx-shadow-sm: 0 10px 30px rgba(35,42,68,.08);
    --cpx-shadow-md: 0 24px 70px rgba(35,42,68,.12);
    --cpx-shadow-lg: 0 40px 110px rgba(35,42,68,.18);
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    color: var(--cpx-text);
    background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,246,251,.95) 17%, var(--cpx-bg) 100%);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

.cpx-app[data-theme="dark"] {
    --cpx-bg: #070912;
    --cpx-bg-2: #0b0f1c;
    --cpx-panel: rgba(15,19,34,.82);
    --cpx-panel-solid: #111626;
    --cpx-soft: #141a2b;
    --cpx-soft-2: #1b2338;
    --cpx-text: #f7f8ff;
    --cpx-muted: #b5bdd1;
    --cpx-faint: #7f899f;
    --cpx-line: rgba(170,182,220,.14);
    --cpx-line-strong: rgba(170,182,220,.24);
    --cpx-shadow-sm: 0 12px 34px rgba(0,0,0,.24);
    --cpx-shadow-md: 0 28px 76px rgba(0,0,0,.34);
    --cpx-shadow-lg: 0 45px 120px rgba(0,0,0,.46);
    background:
        radial-gradient(circle at 50% -15%, rgba(117,103,255,.16), transparent 30%),
        linear-gradient(180deg, #090c16, var(--cpx-bg));
}

.cpx-app *, .cpx-app *::before, .cpx-app *::after { box-sizing: border-box; }
.cpx-app button, .cpx-app input, .cpx-app select { font: inherit; }
.cpx-app button { cursor: pointer; }
.cpx-app button:disabled { cursor: not-allowed; opacity: .48; }
.cpx-app a { color: inherit; text-decoration: none; }
.cpx-app img, .cpx-app canvas, .cpx-app svg { display: block; max-width: 100%; }
.cpx-app [hidden] { display: none !important; }
.cpx-app.is-processing { cursor: wait; }
.cpx-app .cpx-shell { position: relative; z-index: 3; width: min(calc(100% - 36px), 1380px); margin-inline: auto; }

.cpx-ambient { position: absolute; z-index: 0; border-radius: 999px; filter: blur(12px); pointer-events: none; opacity: .7; }
.cpx-ambient-one { top: 120px; left: -170px; width: 430px; height: 430px; background: radial-gradient(circle, rgba(117,103,255,.18), transparent 70%); animation: cpxFloatA 12s ease-in-out infinite alternate; }
.cpx-ambient-two { top: 520px; right: -220px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(37,217,233,.15), transparent 70%); animation: cpxFloatB 14s ease-in-out infinite alternate; }
@keyframes cpxFloatA { to { transform: translate(60px,80px) scale(1.08); } }
@keyframes cpxFloatB { to { transform: translate(-70px,-55px) scale(.92); } }

.cpx-topbar { position: sticky; top: 12px; z-index: 50; display: flex; align-items: center; gap: 28px; min-height: 72px; margin-top: 12px; padding: 10px 14px 10px 16px; border: 1px solid var(--cpx-line); border-radius: 22px; background: color-mix(in srgb, var(--cpx-panel-solid) 78%, transparent); box-shadow: var(--cpx-shadow-sm); backdrop-filter: blur(22px) saturate(1.25); }
.cpx-brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cpx-brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 17px 11px 17px 11px; background: linear-gradient(145deg, var(--cpx-primary), var(--cpx-cyan)); box-shadow: 0 13px 30px rgba(92,76,243,.28); transform: rotate(-4deg); overflow: hidden; }
.cpx-brand-mark::before { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.38); border-radius:13px 8px 13px 8px; }
.cpx-brand-mark i, .cpx-brand-mark b, .cpx-brand-mark em { position:absolute; display:block; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 14px #fff; }
.cpx-brand-mark i { left:12px; top:13px; }
.cpx-brand-mark b { right:12px; bottom:12px; }
.cpx-brand-mark em { left:22px; top:24px; width:5px; height:5px; }
.cpx-brand-copy { display:flex; flex-direction:column; line-height:1.13; }
.cpx-brand-copy strong { font-size:18px; font-weight:850; letter-spacing:-.4px; color:var(--cpx-text); }
.cpx-brand-copy small { margin-top:5px; color:var(--cpx-faint); font-size:10px; font-weight:750; letter-spacing:.25px; }
.cpx-nav { display:flex; align-items:center; justify-content:center; gap:4px; margin-left:auto; }
.cpx-nav a { padding:10px 12px; border-radius:11px; color:var(--cpx-muted); font-size:13px; font-weight:750; transition:.22s ease; }
.cpx-nav a:hover { background:rgba(117,103,255,.11); color:var(--cpx-primary); transform:translateY(-1px); }
.cpx-theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:88px; min-height:42px; padding:8px 12px; border:1px solid var(--cpx-line); border-radius:13px; color:var(--cpx-text); background:var(--cpx-panel-solid); box-shadow:var(--cpx-shadow-sm); font-size:13px; font-weight:800; transition:.22s ease; }
.cpx-theme-toggle:hover { transform:translateY(-2px); border-color:rgba(117,103,255,.48); }
.cpx-theme-icon { font-size:17px; }

.cpx-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.28fr) minmax(340px,.72fr); align-items:center; gap:72px; min-height:650px; padding:86px 42px 76px; }
.cpx-kicker { display:inline-flex; align-items:center; gap:9px; color:var(--cpx-primary); font-size:11px; font-weight:850; letter-spacing:1.4px; text-transform:uppercase; }
.cpx-kicker > span { width:28px; height:2px; border-radius:999px; background:linear-gradient(90deg,var(--cpx-primary),var(--cpx-cyan)); }
.cpx-hero h1 { max-width:830px; margin:17px 0 0; color:var(--cpx-text); font-size:clamp(44px,5.7vw,78px); line-height:1.01; letter-spacing:-4.5px; font-weight:860; }
.cpx-hero h1 em { display:inline; color:transparent; background:linear-gradient(110deg,var(--cpx-primary),var(--cpx-cyan)); background-clip:text; -webkit-background-clip:text; font-style:normal; }
.cpx-hero-copy > p { max-width:790px; margin:26px 0 0; color:var(--cpx-muted); font-size:17px; line-height:1.82; }
.cpx-benefit-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.cpx-benefit-row span { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--cpx-line); border-radius:999px; background:var(--cpx-panel); box-shadow:var(--cpx-shadow-sm); color:var(--cpx-muted); font-size:12px; font-weight:760; }
.cpx-benefit-row i { color:var(--cpx-success); font-style:normal; }
.cpx-primary-link { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; margin-top:30px; padding:13px 22px; border-radius:14px; color:#fff; background:linear-gradient(120deg,var(--cpx-primary),var(--cpx-primary-deep)); box-shadow:0 18px 40px rgba(90,70,234,.28); font-size:13px; font-weight:850; transition:.22s ease; }
.cpx-primary-link b { font-size:18px; transition:.22s ease; }
.cpx-primary-link:hover { transform:translateY(-3px); box-shadow:0 23px 48px rgba(90,70,234,.36); }
.cpx-primary-link:hover b { transform:translateX(3px); }

.cpx-orbit-card { position:relative; display:flex; align-items:center; justify-content:center; width:min(100%,430px); aspect-ratio:1; margin-inline:auto; border:1px solid var(--cpx-line); border-radius:44% 56% 56% 44% / 54% 42% 58% 46%; background:linear-gradient(145deg,rgba(117,103,255,.13),rgba(37,217,233,.08)); box-shadow:var(--cpx-shadow-lg); animation:cpxMorph 10s ease-in-out infinite alternate; }
@keyframes cpxMorph { to { border-radius:57% 43% 41% 59% / 43% 61% 39% 57%; transform:translateY(-8px) rotate(1.5deg); } }
.cpx-orbit-card::before { content:""; position:absolute; inset:12%; border:1px dashed rgba(117,103,255,.28); border-radius:50%; animation:cpxSpin 18s linear infinite; }
.cpx-orbit-ring { position:absolute; border:1px solid rgba(117,103,255,.23); border-radius:50%; }
.cpx-ring-one { width:82%; height:45%; transform:rotate(25deg); animation:cpxSpin 16s linear infinite; }
.cpx-ring-two { width:72%; height:38%; transform:rotate(-40deg); animation:cpxSpinReverse 19s linear infinite; }
@keyframes cpxSpin { to { transform:rotate(385deg); } }
@keyframes cpxSpinReverse { to { transform:rotate(-400deg); } }
.cpx-orbit-core { position:relative; z-index:3; display:flex; align-items:center; justify-content:center; width:48%; aspect-ratio:1; border:1px solid rgba(255,255,255,.3); border-radius:34px; overflow:hidden; background:linear-gradient(145deg,#5d4ee9,#20bdcf); box-shadow:0 27px 60px rgba(60,50,180,.34); }
.cpx-orbit-core svg { width:72%; }
.cpx-scan-line { position:absolute; inset:auto 8% 0; height:3px; border-radius:999px; background:linear-gradient(90deg,transparent,#fff,transparent); filter:drop-shadow(0 0 8px #fff); animation:cpxScan 2.8s ease-in-out infinite; }
@keyframes cpxScan { 0%,100%{transform:translateY(-145px);opacity:0} 15%,85%{opacity:.95} 50%{transform:translateY(-6px)} }
.cpx-floating-pill { position:absolute; z-index:5; padding:10px 14px; border:1px solid rgba(255,255,255,.5); border-radius:999px; background:color-mix(in srgb,var(--cpx-panel-solid) 82%,transparent); box-shadow:var(--cpx-shadow-md); backdrop-filter:blur(16px); color:var(--cpx-text); font-size:11px; font-weight:850; }
.cpx-pill-one { top:18%; left:-3%; animation:cpxBob 4s ease-in-out infinite alternate; }
.cpx-pill-two { right:-2%; bottom:20%; animation:cpxBob 4.7s ease-in-out infinite alternate-reverse; }
@keyframes cpxBob { to { transform:translateY(-12px) rotate(2deg); } }

.cpx-ad-slot { display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:104px; margin:0 0 38px; padding:18px; border:1px dashed var(--cpx-line-strong); border-radius:20px; background:var(--cpx-panel); color:var(--cpx-faint); text-align:center; }
.cpx-ad-slot span { font-size:10px; font-weight:850; letter-spacing:1.4px; text-transform:uppercase; }
.cpx-ad-slot p { margin:4px 0 0; font-size:12px; }

.cpx-tool-section { padding:76px 0 92px; }
.cpx-section-heading { max-width:850px; margin:0 auto 42px; text-align:center; }
.cpx-section-heading h2 { margin:11px 0 0; color:var(--cpx-text); font-size:clamp(31px,4vw,49px); line-height:1.12; letter-spacing:-2px; }
.cpx-section-heading p { margin:14px 0 0; color:var(--cpx-muted); }
.cpx-workbench { display:grid; grid-template-columns:minmax(370px,.75fr) minmax(0,1.25fr); align-items:start; gap:26px; }
.cpx-controls, .cpx-preview-panel { min-width:0; border:1px solid var(--cpx-line); border-radius:28px; background:var(--cpx-panel); box-shadow:var(--cpx-shadow-md); backdrop-filter:blur(16px); }
.cpx-controls { padding:27px; }
.cpx-preview-panel { overflow:hidden; min-height:760px; }
.cpx-panel-title, .cpx-settings-title, .cpx-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.cpx-panel-title > div > span, .cpx-settings-title > div > span, .cpx-preview-head > div > span { color:var(--cpx-primary); font-size:10px; font-weight:850; letter-spacing:1px; text-transform:uppercase; }
.cpx-panel-title h3, .cpx-settings-title h3, .cpx-preview-head h3 { margin:3px 0 0; color:var(--cpx-text); font-size:20px; line-height:1.25; }
.cpx-private-badge { display:inline-flex; align-items:center; gap:5px; padding:7px 10px; border:1px solid rgba(21,148,93,.2); border-radius:999px; color:var(--cpx-success); background:rgba(21,148,93,.1); font-size:10px; }

.cpx-upload-zone { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:238px; margin-top:20px; padding:26px; overflow:hidden; border:1px dashed var(--cpx-line-strong); border-radius:23px; background:linear-gradient(145deg,var(--cpx-soft),color-mix(in srgb,var(--cpx-panel-solid) 84%,transparent)); text-align:center; transition:.24s ease; }
.cpx-upload-zone::before { content:""; position:absolute; inset:-30%; background:conic-gradient(from 90deg,transparent,rgba(117,103,255,.13),transparent 32%,rgba(37,217,233,.12),transparent 68%); opacity:0; animation:cpxSpin 8s linear infinite; transition:.24s ease; }
.cpx-upload-zone:hover, .cpx-upload-zone.is-dragover { border-color:rgba(117,103,255,.7); transform:translateY(-3px); box-shadow:0 0 0 5px rgba(117,103,255,.08); }
.cpx-upload-zone:hover::before, .cpx-upload-zone.is-dragover::before { opacity:1; }
.cpx-upload-zone > * { position:relative; z-index:2; }
.cpx-upload-visual { position:relative; display:flex; align-items:center; justify-content:center; width:72px; height:72px; margin-bottom:17px; border-radius:24px 15px 24px 15px; background:linear-gradient(145deg,var(--cpx-primary),var(--cpx-cyan)); color:#fff; box-shadow:0 18px 38px rgba(88,74,232,.28); }
.cpx-upload-visual i { position:absolute; inset:8px; border:1px solid rgba(255,255,255,.35); border-radius:18px 10px 18px 10px; }
.cpx-upload-visual b { font-size:30px; line-height:1; }
.cpx-upload-zone strong { color:var(--cpx-text); font-size:16px; }
.cpx-upload-zone p { margin:4px 0 1px; color:var(--cpx-muted); font-size:12px; }
.cpx-upload-zone small { color:var(--cpx-faint); font-size:10px; }
.cpx-file-card { display:flex; align-items:center; gap:12px; margin-top:13px; padding:11px; border:1px solid var(--cpx-line); border-radius:14px; background:var(--cpx-soft); }
.cpx-file-card img { width:52px; height:52px; flex:0 0 52px; border-radius:11px; object-fit:cover; background:var(--cpx-soft-2); }
.cpx-file-card > span { display:flex; min-width:0; flex:1; flex-direction:column; }
.cpx-file-card strong { overflow:hidden; color:var(--cpx-text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.cpx-file-card small { margin-top:3px; color:var(--cpx-faint); font-size:10px; }
.cpx-file-card button { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--cpx-line); border-radius:10px; color:var(--cpx-muted); background:var(--cpx-panel-solid); font-size:18px; transition:.2s ease; }
.cpx-file-card button:hover { color:var(--cpx-danger); border-color:rgba(210,70,85,.4); background:rgba(210,70,85,.08); }

.cpx-settings { margin-top:27px; padding-top:24px; border-top:1px solid var(--cpx-line); }
.cpx-settings-title { margin-bottom:19px; }
.cpx-settings-title button { padding:6px 9px; border:0; border-radius:9px; color:var(--cpx-primary); background:transparent; font-size:11px; font-weight:850; }
.cpx-settings-title button:hover { background:rgba(117,103,255,.1); }
.cpx-field { display:grid; gap:9px; margin-bottom:19px; }
.cpx-field > span { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; color:var(--cpx-text); font-size:12px; font-weight:790; }
.cpx-field > span small { display:block; margin-top:2px; color:var(--cpx-faint); font-size:9px; font-weight:550; }
.cpx-field > span b { flex-shrink:0; color:var(--cpx-primary); font-size:11px; }
.cpx-field select { width:100%; min-height:47px; padding:10px 12px; border:1px solid var(--cpx-line-strong); border-radius:12px; outline:none; color:var(--cpx-text); background:var(--cpx-panel-solid); font-size:12px; transition:.2s ease; }
.cpx-field select:focus { border-color:var(--cpx-primary); box-shadow:0 0 0 4px rgba(117,103,255,.1); }
.cpx-field input[type="range"] { width:100%; height:7px; accent-color:var(--cpx-primary); }
.cpx-range-hints { display:flex; justify-content:space-between; gap:10px; color:var(--cpx-faint); }
.cpx-range-hints i { font-size:9px; font-style:normal; }
.cpx-switch-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; margin-top:11px; padding:12px 13px; border:1px solid var(--cpx-line); border-radius:14px; background:var(--cpx-soft); }
.cpx-switch-row > span { display:flex; flex:1; flex-direction:column; color:var(--cpx-text); font-size:12px; font-weight:790; }
.cpx-switch-row small { margin-top:3px; color:var(--cpx-faint); font-size:9px; font-weight:550; }
.cpx-switch-row input { position:absolute; opacity:0; pointer-events:none; }
.cpx-switch-row > i { position:relative; width:46px; height:26px; flex:0 0 46px; border-radius:999px; background:var(--cpx-soft-2); transition:.2s ease; }
.cpx-switch-row > i::before { content:""; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.2); transition:.2s ease; }
.cpx-switch-row input:checked + i { background:linear-gradient(90deg,var(--cpx-primary),var(--cpx-cyan)); }
.cpx-switch-row input:checked + i::before { transform:translateX(20px); }
.cpx-output-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:19px; }
.cpx-output-grid .cpx-field { margin-bottom:0; }

.cpx-process-button { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:55px; gap:9px; margin-top:24px; padding:13px 18px; border:0; border-radius:14px; color:#fff; background:linear-gradient(120deg,var(--cpx-primary),var(--cpx-primary-deep)); box-shadow:0 18px 38px rgba(88,74,232,.27); font-size:12px; font-weight:860; transition:.22s ease; }
.cpx-process-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 23px 45px rgba(88,74,232,.35); }
.cpx-process-spark { font-size:17px; }
.cpx-process-button > i { width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:cpxSpinLoader .72s linear infinite; }
@keyframes cpxSpinLoader { to { transform:rotate(360deg); } }
.cpx-progress { margin-top:16px; padding:14px; border:1px solid var(--cpx-line); border-radius:13px; background:var(--cpx-soft); }
.cpx-progress > div { display:flex; justify-content:space-between; gap:14px; color:var(--cpx-muted); font-size:10px; font-weight:750; }
.cpx-progress > div b { color:var(--cpx-primary); }
.cpx-progress > p { height:8px; margin:10px 0 0; overflow:hidden; border-radius:999px; background:var(--cpx-soft-2); }
.cpx-progress > p i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cpx-primary),var(--cpx-cyan)); transition:width .25s ease; }
.cpx-message { display:none; margin-top:15px; padding:12px 13px; border-radius:12px; font-size:11px; font-weight:700; }
.cpx-message.is-visible { display:block; }
.cpx-message.is-success { color:var(--cpx-success); background:rgba(21,148,93,.1); border:1px solid rgba(21,148,93,.22); }
.cpx-message.is-warning { color:var(--cpx-warning); background:rgba(190,116,21,.1); border:1px solid rgba(190,116,21,.22); }
.cpx-message.is-error { color:var(--cpx-danger); background:rgba(210,70,85,.1); border:1px solid rgba(210,70,85,.22); }

.cpx-preview-head { padding:23px 24px; border-bottom:1px solid var(--cpx-line); background:linear-gradient(120deg,var(--cpx-panel-solid),rgba(117,103,255,.08)); }
.cpx-preview-head > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }
.cpx-secondary-button, .cpx-download-button { display:inline-flex; align-items:center; justify-content:center; min-height:41px; padding:9px 13px; border-radius:11px; font-size:11px; font-weight:850; transition:.2s ease; }
.cpx-secondary-button { border:1px solid var(--cpx-line-strong); color:var(--cpx-text); background:var(--cpx-panel-solid); }
.cpx-download-button { border:1px solid transparent; color:#fff; background:linear-gradient(120deg,var(--cpx-primary),var(--cpx-primary-deep)); }
.cpx-secondary-button:hover:not(:disabled), .cpx-download-button:hover:not(:disabled) { transform:translateY(-2px); }
.cpx-empty-preview { display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:650px; padding:40px; text-align:center; }
.cpx-empty-visual { position:relative; display:flex; align-items:center; justify-content:center; width:100px; height:100px; margin-bottom:24px; border:1px solid var(--cpx-line); border-radius:36% 64% 58% 42% / 50% 42% 58% 50%; background:var(--cpx-soft); animation:cpxMorph 7s ease-in-out infinite alternate; }
.cpx-empty-visual span { position:absolute; inset:12px; border:1px dashed rgba(117,103,255,.26); border-radius:inherit; }
.cpx-empty-visual i { color:var(--cpx-primary); font-size:38px; font-style:normal; }
.cpx-empty-preview h4 { margin:0; color:var(--cpx-text); font-size:18px; }
.cpx-empty-preview p { margin:7px 0 0; color:var(--cpx-faint); font-size:12px; }
.cpx-comparison { padding:20px; }
.cpx-tabs { display:flex; gap:6px; margin-bottom:15px; padding:6px; border:1px solid var(--cpx-line); border-radius:13px; background:var(--cpx-soft); }
.cpx-tabs button { flex:1; min-width:105px; min-height:39px; padding:7px 9px; border:0; border-radius:9px; color:var(--cpx-muted); background:transparent; font-size:10px; font-weight:850; transition:.2s ease; }
.cpx-tabs button.is-active { color:var(--cpx-primary); background:var(--cpx-panel-solid); box-shadow:var(--cpx-shadow-sm); }
.cpx-canvas-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:520px; overflow:hidden; border:1px solid var(--cpx-line); border-radius:20px; background-color:var(--cpx-panel-solid); background-image:linear-gradient(45deg,var(--cpx-soft) 25%,transparent 25%),linear-gradient(-45deg,var(--cpx-soft) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--cpx-soft) 75%),linear-gradient(-45deg,transparent 75%,var(--cpx-soft) 75%); background-position:0 0,0 11px,11px -11px,-11px 0; background-size:22px 22px; }
.cpx-canvas-fit { position:relative; display:inline-block; max-width:100%; max-height:640px; line-height:0; }
.cpx-canvas-fit canvas { width:auto; height:auto; max-width:100%; max-height:640px; }
.cpx-canvas-fit > canvas:first-child { position:relative; z-index:1; }
.cpx-result-clip { position:absolute; inset:0 auto 0 0; z-index:2; width:50%; overflow:hidden; }
.cpx-result-clip canvas { position:absolute; left:0; top:0; max-width:none; max-height:none; }
.cpx-mask-canvas { position:absolute; inset:0; z-index:4; width:100% !important; height:100% !important; opacity:.76; mix-blend-mode:screen; }
.cpx-compare-line { position:absolute; top:0; bottom:0; left:50%; z-index:5; width:3px; background:#fff; box-shadow:0 0 0 1px rgba(20,24,40,.18); transform:translateX(-50%); pointer-events:none; }
.cpx-compare-line span { position:absolute; top:50%; left:50%; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:3px solid #fff; border-radius:50%; color:#fff; background:var(--cpx-primary); box-shadow:var(--cpx-shadow-md); font-size:16px; transform:translate(-50%,-50%); }
.cpx-label { position:absolute; top:13px; z-index:6; padding:6px 9px; border-radius:999px; color:#fff; background:rgba(12,15,26,.78); font-size:9px; font-weight:850; letter-spacing:.7px; line-height:1.4; text-transform:uppercase; }
.cpx-before-label { left:13px; }
.cpx-after-label { right:13px; }
.cpx-compare-slider { width:100%; margin-top:15px; accent-color:var(--cpx-primary); }
.cpx-canvas-stage.is-original .cpx-result-clip, .cpx-canvas-stage.is-original .cpx-compare-line, .cpx-canvas-stage.is-original .cpx-after-label { display:none; }
.cpx-canvas-stage.is-result .cpx-canvas-fit > canvas:first-child, .cpx-canvas-stage.is-result .cpx-compare-line, .cpx-canvas-stage.is-result .cpx-before-label { display:none; }
.cpx-canvas-stage.is-result .cpx-result-clip { position:relative; inset:auto; width:auto; overflow:visible; }
.cpx-canvas-stage.is-result .cpx-result-clip canvas { position:relative; left:auto; top:auto; max-width:100%; max-height:640px; }
.cpx-canvas-stage.is-mask .cpx-canvas-fit > canvas:first-child, .cpx-canvas-stage.is-mask .cpx-result-clip, .cpx-canvas-stage.is-mask .cpx-compare-line, .cpx-canvas-stage.is-mask .cpx-label { display:none; }
.cpx-canvas-stage.is-mask .cpx-mask-canvas { position:relative; inset:auto; display:block !important; opacity:1; mix-blend-mode:normal; }
.cpx-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:17px; }
.cpx-stats article { min-width:0; padding:14px; border:1px solid var(--cpx-line); border-radius:13px; background:var(--cpx-soft); }
.cpx-stats span { display:block; color:var(--cpx-faint); font-size:8px; font-weight:850; letter-spacing:.65px; text-transform:uppercase; }
.cpx-stats strong { display:block; margin-top:6px; color:var(--cpx-text); font-size:12px; overflow-wrap:anywhere; }

.cpx-warning { display:flex; align-items:flex-start; gap:18px; margin:0 0 80px; padding:24px; border:1px solid rgba(190,116,21,.24); border-radius:20px; background:rgba(190,116,21,.08); }
.cpx-warning > span { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; border-radius:15px 10px 15px 10px; color:#fff; background:var(--cpx-warning); font-size:20px; font-weight:850; }
.cpx-warning h2 { margin:0; color:var(--cpx-text); font-size:19px; }
.cpx-warning p { margin:6px 0 0; color:var(--cpx-muted); font-size:12px; }
.cpx-features, .cpx-how, .cpx-faq { padding:84px 0; }
.cpx-feature-grid, .cpx-step-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.cpx-feature-grid article, .cpx-step-grid article { position:relative; overflow:hidden; padding:25px; border:1px solid var(--cpx-line); border-radius:22px; background:var(--cpx-panel); box-shadow:var(--cpx-shadow-sm); transition:.24s ease; }
.cpx-feature-grid article::before, .cpx-step-grid article::before { content:""; position:absolute; right:-35px; bottom:-35px; width:100px; height:100px; border-radius:50%; background:radial-gradient(circle,rgba(117,103,255,.13),transparent 70%); }
.cpx-feature-grid article:hover, .cpx-step-grid article:hover { transform:translateY(-7px) rotate(.3deg); border-color:rgba(117,103,255,.35); box-shadow:var(--cpx-shadow-md); }
.cpx-feature-grid i { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:20px 12px 20px 12px; color:var(--cpx-primary); background:rgba(117,103,255,.11); font-size:24px; font-style:normal; }
.cpx-feature-grid h3, .cpx-step-grid h3 { margin:18px 0 7px; color:var(--cpx-text); font-size:17px; }
.cpx-feature-grid p, .cpx-step-grid p { margin:0; color:var(--cpx-muted); font-size:12px; }
.cpx-step-grid b { display:inline-flex; align-items:center; justify-content:center; min-width:48px; height:35px; padding:0 11px; border-radius:12px; color:var(--cpx-primary); background:rgba(117,103,255,.11); font-size:11px; }
.cpx-faq-list { display:grid; max-width:920px; gap:12px; margin-inline:auto; }
.cpx-faq-list article { overflow:hidden; border:1px solid var(--cpx-line); border-radius:16px; background:var(--cpx-panel); }
.cpx-faq-list button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:65px; gap:20px; padding:15px 18px; border:0; color:var(--cpx-text); background:transparent; text-align:left; font-size:13px; font-weight:800; }
.cpx-faq-list button:hover { background:var(--cpx-soft); }
.cpx-faq-list button i { display:inline-flex; align-items:center; justify-content:center; width:31px; height:31px; flex:0 0 31px; border-radius:50%; color:var(--cpx-primary); background:rgba(117,103,255,.11); font-size:18px; font-style:normal; transition:.2s ease; }
.cpx-faq-list button[aria-expanded="true"] i { transform:rotate(45deg); }
.cpx-faq-list article > div { padding:0 18px 18px; }
.cpx-faq-list p { margin:0; color:var(--cpx-muted); font-size:12px; }

.cpx-reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; }
.cpx-reveal.is-visible { opacity:1; transform:none; }
.cpx-app button:focus-visible, .cpx-app a:focus-visible, .cpx-app select:focus-visible, .cpx-app input:focus-visible, .cpx-upload-zone:focus-within { outline:3px solid rgba(117,103,255,.28); outline-offset:2px; }

@media (prefers-reduced-motion: reduce) {
    .cpx-app *, .cpx-app *::before, .cpx-app *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}

@media (max-width: 1280px) {
    .cpx-hero { gap:48px; padding-inline:24px; }
    .cpx-workbench { grid-template-columns:minmax(350px,.82fr) minmax(0,1.18fr); }
}
@media (max-width: 1120px) {
    .cpx-nav { display:none; }
    .cpx-theme-toggle { margin-left:auto; }
    .cpx-hero { grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); }
    .cpx-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cpx-feature-grid, .cpx-step-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
    .cpx-hero { grid-template-columns:1fr; min-height:auto; padding-top:70px; }
    .cpx-orbit-card { width:min(100%,470px); }
    .cpx-workbench { grid-template-columns:1fr; }
    .cpx-preview-panel { min-height:650px; }
}
@media (max-width: 820px) {
    .cpx-topbar { top:8px; border-radius:18px; }
    .cpx-hero { padding-inline:8px; }
    .cpx-hero h1 { letter-spacing:-3px; }
    .cpx-empty-preview { min-height:520px; }
    .cpx-canvas-stage { min-height:440px; }
}
@media (max-width: 700px) {
    .cpx-app .cpx-shell { width:min(calc(100% - 24px),1380px); }
    .cpx-brand-copy small, .cpx-theme-text { display:none; }
    .cpx-theme-toggle { min-width:44px; padding-inline:10px; }
    .cpx-hero { padding-top:54px; padding-bottom:60px; }
    .cpx-hero h1 { font-size:42px; letter-spacing:-2.2px; }
    .cpx-hero-copy > p { font-size:15px; }
    .cpx-benefit-row { flex-direction:column; align-items:stretch; }
    .cpx-benefit-row span, .cpx-primary-link { width:100%; }
    .cpx-orbit-card { max-width:390px; }
    .cpx-controls { padding:20px; }
    .cpx-preview-head { align-items:flex-start; flex-direction:column; padding:20px; }
    .cpx-preview-head > div:last-child { width:100%; }
    .cpx-preview-head button { flex:1; }
    .cpx-tabs { display:grid; grid-template-columns:1fr 1fr; }
    .cpx-tabs button { min-width:0; }
    .cpx-canvas-stage { min-height:360px; }
    .cpx-feature-grid, .cpx-step-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
    .cpx-topbar { min-height:66px; margin-top:8px; padding:8px 10px; }
    .cpx-brand-mark { width:43px; height:43px; }
    .cpx-brand-copy strong { font-size:16px; }
    .cpx-hero { padding-inline:0; }
    .cpx-hero h1 { font-size:37px; }
    .cpx-orbit-card { border-radius:32px; animation:none; }
    .cpx-floating-pill { font-size:9px; }
    .cpx-tool-section { padding-top:60px; }
    .cpx-section-heading h2 { font-size:31px; }
    .cpx-output-grid { grid-template-columns:1fr; }
    .cpx-tabs { grid-template-columns:1fr; }
    .cpx-comparison { padding:13px; }
    .cpx-canvas-stage { min-height:320px; border-radius:15px; }
    .cpx-stats { grid-template-columns:1fr 1fr; }
    .cpx-warning { flex-direction:column; }
}
@media (max-width: 460px) {
    .cpx-app .cpx-shell { width:min(calc(100% - 18px),1380px); }
    .cpx-brand-copy { display:none; }
    .cpx-theme-toggle { margin-left:auto; }
    .cpx-hero h1 { font-size:33px; letter-spacing:-1.8px; }
    .cpx-hero-copy > p { font-size:14px; }
    .cpx-orbit-card { max-width:330px; }
    .cpx-controls { padding:16px; border-radius:22px; }
    .cpx-upload-zone { min-height:210px; padding:20px 14px; }
    .cpx-panel-title, .cpx-settings-title { flex-direction:column; }
    .cpx-preview-head > div:last-child { flex-direction:column; }
    .cpx-preview-head button { width:100%; }
    .cpx-canvas-stage { min-height:285px; }
    .cpx-stats { grid-template-columns:1fr; }
}
@media (max-width: 390px) {
    .cpx-hero h1 { font-size:30px; }
    .cpx-section-heading h2 { font-size:28px; }
    .cpx-upload-visual { width:64px; height:64px; }
    .cpx-switch-row { align-items:flex-start; }
}
@media (max-width: 340px) {
    .cpx-topbar { border-radius:15px; }
    .cpx-brand-mark { width:39px; height:39px; }
    .cpx-theme-toggle { min-width:40px; min-height:40px; }
    .cpx-hero h1 { font-size:27px; }
    .cpx-controls { padding:13px; }
    .cpx-preview-head { padding:16px; }
}