.cx-wrap{margin-top:72px;margin-bottom:24px}.cx{border:1px solid var(--line);background:var(--white);border-radius:32px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:48px;padding:48px;transition:box-shadow .4s,border-color .4s;display:grid}.cx:hover{box-shadow:var(--shadow-card);border-color:#cdd5dc}.cx-tile{background:var(--ui-bg);width:48px;height:48px;color:var(--ink);border-radius:16px;place-items:center;margin-bottom:24px;display:grid}.cx .cx-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-size:12px;line-height:16px}.cx h2{letter-spacing:-.04em;text-wrap:balance;margin:0 0 16px;font-size:36px;font-weight:500;line-height:40px}.cx-text{color:var(--muted);max-width:460px;margin:0 0 24px;font-size:16px;line-height:26px}.cx-points{gap:12px;margin:0 0 32px;padding:0;list-style:none;display:grid}.cx-points li{align-items:center;gap:12px;font-size:15px;line-height:24px;transition:transform .3s;display:flex}.cx-points li svg{background:var(--ui-bg);border-radius:50%;flex:none;width:24px;height:24px;padding:4px;transition:background .3s,color .3s}.cx-points li:hover{transform:translate(4px)}.cx-points li:hover svg{background:var(--ink);color:var(--white)}.cx-actions{flex-wrap:wrap;align-items:center;gap:16px 24px;display:flex}.cx-fine{color:var(--muted);align-items:center;gap:8px;margin:16px 0 0;font-size:13px;line-height:20px;display:flex}.cx-visual{min-width:0;container-type:inline-size}.cx-tabs{grid-template-columns:repeat(var(--n), 1fr);background:var(--ui-bg);border:1px solid var(--line);border-radius:99px;width:100%;margin:0 0 16px;padding:4px;display:grid;position:relative}.cx-thumb{width:calc((100% - 8px) / var(--n));background:var(--white);box-shadow:0 2px 8px -2px #1a161526, 0 0 0 1px var(--line);transform:translateX(calc(var(--i) * 100%));border-radius:99px;transition:transform .45s cubic-bezier(.34,1.3,.5,1);position:absolute;top:4px;bottom:4px;left:4px}.cx-tab{z-index:1;min-width:0;font:inherit;color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:99px;justify-content:center;align-items:center;gap:8px;padding:8px 12px;font-size:13px;line-height:20px;transition:color .25s;display:flex;position:relative}.cx-tab:hover,.cx-tab[aria-pressed=true]{color:var(--ink)}.cx-tab svg{flex:none;transition:transform .3s}.cx-tab span{text-overflow:ellipsis;min-width:0;overflow:hidden}@container (max-width:560px){.cx-tab svg{display:none}}.cx-tab[aria-pressed=true] svg{transform:scale(1.15)}.cx-tab:focus-visible{box-shadow:var(--focus);outline:none}.cx-shot{aspect-ratio:1536/1000;border:1px solid var(--line);background:var(--paper);border-radius:12px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,aspect-ratio .45s;position:relative;overflow:hidden}.cx-shot:hover{box-shadow:var(--shadow-card);border-color:#cdd5dc}.cx-shot:hover .cx-chip{animation-play-state:paused;transform:translateY(-4px)scale(1.06)}.cx-shot[data-screen=send-test]:after{display:none}.cx-shot img{object-fit:cover;object-position:top left;opacity:0;width:100%;height:100%;transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0;transform:scale(1.03)translateY(8px)}.cx-shot img[data-on]{opacity:1;transform:none}.cx-shot:after{content:"";pointer-events:none;background:linear-gradient(#fff0,#fff);height:56px;position:absolute;inset:auto 0 0}.cx-chip{z-index:2;background:var(--white);border:1px solid var(--line);border-radius:99px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;line-height:20px;animation:5s ease-in-out infinite cx-float;display:flex;position:absolute;top:16px;right:16px;box-shadow:0 12px 24px -12px #1a161540}@keyframes cx-float{50%{transform:translateY(-6px)}}.cx-calc{gap:16px;margin:0 0 32px;display:grid}.cx-calc label{color:var(--muted);grid-template-columns:1fr auto;gap:8px 16px;font-size:14px;line-height:20px;display:grid}.cx-calc b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}.cx-calc input[type=range]{cursor:pointer;appearance:none;touch-action:pan-y;background:0 0;grid-column:1/-1;width:100%;height:32px;margin:0}.cx-calc input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--ink), var(--ink)) 0 / var(--fill,50%) 100% no-repeat, var(--line);border-radius:99px;height:8px}.cx-calc input[type=range]::-moz-range-track{background:var(--line);border-radius:99px;height:8px}.cx-calc input[type=range]::-moz-range-progress{background:var(--ink);border-radius:99px;height:8px}.cx-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);border:4px solid var(--white);width:32px;height:32px;box-shadow:0 0 0 1px var(--line), 0 4px 10px -2px #1a161540;border-radius:50%;margin-top:-12px;transition:transform .2s,box-shadow .2s}.cx-calc input[type=range]::-moz-range-thumb{box-sizing:border-box;background:var(--ink);border:4px solid var(--white);width:32px;height:32px;box-shadow:0 0 0 1px var(--line), 0 4px 10px -2px #1a161540;border-radius:50%;transition:transform .2s}.cx-calc input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08)}.cx-calc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14)}.cx-calc input[type=range]:focus-visible{outline:none}.cx-calc input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus)}.cx-calc input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--focus)}.cx-result{border-top:1px solid var(--line);align-items:baseline;gap:12px;margin:8px 0 0;padding-top:16px;display:flex}.cx-result strong{color:var(--ink);letter-spacing:-.05em;font-variant-numeric:tabular-nums;font-size:56px;font-weight:500;line-height:56px;animation:.35s cubic-bezier(.34,1.56,.64,1) cx-pop}.cx-result span{color:var(--muted);font-size:15px}@keyframes cx-pop{0%{opacity:.4;transform:translateY(6px)}}.cx-bar{z-index:40;left:50%;bottom:max(16px, env(safe-area-inset-bottom,0px));border:1px solid var(--line);background:var(--white);opacity:0;pointer-events:none;border-radius:99px;align-items:center;gap:16px;width:min(640px,100% - 32px);padding:8px 8px 8px 24px;transition:transform .5s cubic-bezier(.34,1.3,.5,1),opacity .3s;display:flex;position:fixed;transform:translate(-50%,140%);box-shadow:0 16px 44px -16px #1a161540}.cx-bar[data-show]{opacity:1;pointer-events:auto;transform:translate(-50%)}.cx-bar>span{flex:1;min-width:0;font-size:14px;line-height:20px}.cx-sio{border-radius:11px;flex:none;width:36px;height:36px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}.cx-bar:hover .cx-sio{transform:rotate(-8deg)scale(1.1)}.cx-bar .button{flex:none;padding-block:10px}.cx-bar>button{width:32px;height:32px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;place-items:center;transition:background .2s,color .2s,transform .3s;display:grid}.cx-bar>button:hover{background:var(--ui-bg);color:var(--ink);transform:rotate(90deg)}.cx-inline{border:1px solid var(--line);background:var(--ui-bg);border-radius:20px;margin:24px 0;padding:20px 24px}.cx-inline .cx-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-size:12px;line-height:16px}.cx-inline-text{text-wrap:balance;margin:0 0 16px;font-size:16px;line-height:24px}.cx-inline-row{flex-wrap:wrap;align-items:center;gap:12px 20px;display:flex}.cx-inline .cx-fine{margin:0}@media (max-width:960px){.cx{grid-template-columns:minmax(0,1fr);gap:32px;padding:32px}.cx-text{max-width:none}}@media (max-width:640px){.cx-wrap{margin-top:48px}.cx{border-radius:28px;gap:24px;padding:24px 20px}.cx h2{font-size:28px;line-height:32px}.cx-text{margin-bottom:20px;font-size:15px;line-height:24px}.cx-points{margin-bottom:24px}.cx-actions{text-align:center;flex-direction:column;align-items:stretch;gap:16px}.cx-actions .button{justify-content:center;width:100%}.cx-fine{justify-content:center}.cx-tab{padding:8px 6px;font-size:12px}.cx-shot{border-radius:10px}.cx-chip{padding:6px 12px;font-size:12px;top:12px;right:12px}.cx-result strong{font-size:48px;line-height:48px}.cx-inline{padding:16px}.cx-inline-row .button{justify-content:center;width:100%}.cx-bar{border-radius:28px;flex-wrap:wrap;gap:12px;padding:12px}.cx-sio{width:32px;height:32px}.cx-bar>span{-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:13px;line-height:18px;display:-webkit-box;overflow:hidden}.cx-bar>button{order:2}.cx-bar .button{flex:100%;order:3;justify-content:center;padding-inline:18px}}@media (prefers-reduced-motion:reduce){.cx *,.cx-bar,.cx-bar *{transition:none!important;animation:none!important}}@media (hover:none){.cx:hover,.cx-shot:hover{box-shadow:none}}html[data-cx-off] .cx-bar{display:none}