/* THE SHOWCASES' LOOK (ask-eden-show.js), for the chat-led concept and the Ask Eden drawer. On Eden's tokens. */
/* the showcases */
.cx-show{position:relative}
.cx-stage{position:relative;width:100%;max-width:1232px;height:520px;overflow:hidden;border-radius:16px}
.cx-stage-in{position:absolute;left:0;top:0;width:880px;height:520px;transform-origin:0 0}
.cx-stage .sr-st{pointer-events:none}
.cx-vg{width:560px;max-width:100%}
.cx-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cx-plan{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:14px;background:var(--eden-black);box-shadow:inset 0 0 0 1px var(--eden-line)}
.cx-plan.is-lead{box-shadow:inset 0 0 0 1px var(--eden-line-strong)}
.cx-plan small{color:var(--eden-ink-3);font:600 11px/1.2 var(--eden-text-ui-family);letter-spacing:.14em;text-transform:uppercase}
.cx-plan b{font-family:var(--eden-text-section-family);font-size:30px;font-weight:var(--eden-w-medium);line-height:1.05}
.cx-plan b span{color:var(--eden-ink-3);font-size:15px;font-weight:400}
.cx-plan p{color:var(--eden-ink-2);font:14px/1.5 var(--eden-text-body-family)}
.cx-vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-vs > div{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:14px;background:var(--eden-black);box-shadow:inset 0 0 0 1px var(--eden-line)}
.cx-vs > div:last-child{box-shadow:inset 0 0 0 1px var(--eden-line-strong)}
.cx-vs small{color:var(--eden-ink-3);font:600 11px/1.2 var(--eden-text-ui-family);letter-spacing:.14em;text-transform:uppercase}
.cx-vs p{font-family:var(--eden-text-title-family);font-size:22px;line-height:1.25}
.cx-code{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-file{border-radius:14px;background:var(--eden-black);box-shadow:inset 0 0 0 1px var(--eden-line);overflow:hidden}
.cx-file header{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--eden-line);color:var(--eden-ink-2);font:500 12.5px/1 var(--eden-text-ui-family)}
.cx-file pre{margin:0;padding:16px;max-height:300px;overflow:hidden;color:var(--eden-ink-2);font:13px/1.6 var(--eden-text-ui-family);font-variant-numeric:tabular-nums;white-space:pre-wrap;word-break:break-all}
.cx-file pre em{font-style:normal;color:var(--eden-ink)}
.cx-layers{display:flex;flex-direction:column;gap:6px}
.cx-layer{display:grid;grid-template-columns:48px 1fr auto;align-items:baseline;gap:16px;padding:18px 0;border-top:1px solid var(--eden-line)}
.cx-layer small{color:var(--eden-ink-3);font:600 12px/1 var(--eden-text-ui-family);font-variant-numeric:tabular-nums}
.cx-layer p{font-family:var(--eden-text-section-family);font-size:clamp(24px,2.6vw,36px);font-weight:var(--eden-w-medium);line-height:1.1;letter-spacing:-.01em}
.cx-layer span{color:var(--eden-ink-3);font:13px/1 var(--eden-text-ui-family)}
.cx-in-way{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:28px;border-radius:14px;background:var(--eden-black);box-shadow:inset 0 0 0 1px var(--eden-line-strong)}
.cx-in-way p{max-width:34em;color:var(--eden-ink-2);font:16px/1.5 var(--eden-text-body-family)}
/* inside the drawer: narrower, so the plans pair up and the comparison and the code stack */
.ae .cx-plans{grid-template-columns:1fr 1fr}
.ae .cx-vs,.ae .cx-code{grid-template-columns:1fr}
.ae .cx-plan b{font-size:24px}
.ae .cx-vs p{font-size:18px}
.ae .cx-layer{grid-template-columns:36px 1fr}
.ae .cx-layer span{display:none}
.ae .cx-layer p{font-size:20px}
.ae .cx-vg{width:100%}
.ae .cx-file pre{max-height:170px}