.ck-demo{gap:var(--pm-space-4);display:grid}.ck-demo__controls{gap:var(--pm-space-4) var(--pm-space-8);padding:var(--pm-space-5) var(--pm-space-6);border:1px solid var(--mk-line);border-radius:var(--pm-radius-xl);background:var(--pm-surface);flex-wrap:wrap;align-items:flex-end;display:flex}.ck-demo__field{gap:var(--pm-space-2);display:grid}.ck-demo__field>span{color:var(--mk-deep);font-size:var(--pm-text-xs);letter-spacing:var(--pm-tracking-eyebrow);text-transform:uppercase;font-weight:700}.ck-demo__field select{min-height:40px;padding:0 var(--pm-space-3);border:1px solid var(--pm-line-strong);border-radius:var(--pm-radius-md);background:var(--pm-surface);font:inherit;font-weight:600}.ck-demo__segment{border-radius:var(--pm-radius-pill);background:var(--pm-surface-alt);padding:3px;display:inline-flex}.ck-demo__segment label{position:relative}.ck-demo__segment input{opacity:0;position:absolute}.ck-demo__segment span{min-height:34px;padding:var(--pm-space-1) var(--pm-space-4);border-radius:var(--pm-radius-pill);font-size:var(--pm-text-sm);cursor:pointer;font-weight:600;line-height:26px;display:block}.ck-demo__segment input:checked+span{background:var(--pm-black);color:var(--pm-on-dark)}.ck-demo__segment label:has(input:focus-visible){outline:2px solid var(--pm-blue);outline-offset:2px;border-radius:var(--pm-radius-pill)}.ck-demo__swatches{gap:var(--pm-space-4);align-items:center;min-height:44px;display:flex}.ck-demo__swatches button{border:2px solid var(--pm-surface);width:30px;height:30px;box-shadow:0 0 0 1px var(--pm-line-strong);cursor:pointer;border-radius:50%;position:relative}.ck-demo__swatches button:before{content:"";position:absolute;inset:-9px}.ck-demo__swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--pm-ink)}.ck-demo__frame{border:1px solid var(--pm-line-strong);border-radius:var(--pm-radius-xl);background:var(--pm-surface);height:520px;box-shadow:var(--pm-shadow-lg);overflow:hidden}.ck-demo__frame iframe{border:0;width:100%;height:100%;display:block}.ck-demo__note{color:var(--pm-ink-soft);font-size:var(--pm-text-sm);text-align:center;margin:0}.ck-steps{gap:var(--pm-space-4);grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.ck-steps li{padding:var(--pm-space-6);border-radius:var(--pm-radius-xl);background:var(--pm-surface)}.ck-steps__num{width:44px;height:44px;margin-bottom:var(--pm-space-4);background:var(--pm-black);color:var(--pm-on-dark);font-family:var(--pm-font-display);font-size:var(--pm-text-h4);border-radius:50%;place-items:center;font-weight:800;display:grid}.ck-steps h3{font-size:var(--pm-text-h4);margin:0;font-weight:700}.ck-steps p{margin:var(--pm-space-2) 0 0;color:var(--pm-ink-soft);font-size:var(--pm-text-sm)}.ck-features{gap:var(--pm-space-4);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.ck-code pre{padding:var(--pm-space-6);font-size:var(--pm-text-xs)}.ck-compare{border:1px solid var(--pm-line);border-radius:var(--pm-radius-xl);background:var(--pm-surface);overflow-x:auto}.ck-compare table{border-collapse:collapse;width:100%}.ck-compare th,.ck-compare td{padding:var(--pm-space-4) var(--pm-space-6);border-top:1px solid var(--pm-line);text-align:left}.ck-compare thead th{font-size:var(--pm-text-sm);border-top:0}.ck-compare tbody th{font-weight:600}.ck-compare td{color:var(--pm-ink-soft)}.ck-compare__us{font-weight:600;color:var(--pm-ink)!important}.ck-cta{gap:var(--pm-space-3);flex-wrap:wrap;justify-content:center;display:flex}@media (max-width:1099px){.ck-steps,.ck-features{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:699px){.ck-steps,.ck-features{grid-template-columns:minmax(0,1fr)}.ck-demo__frame{height:600px}}