.demo-create:has(.demo-example){max-width:1380px;grid-template-columns:minmax(0,1fr) minmax(380px,500px);align-items:start;gap:32px}.demo-create:has(.demo-example) .demo-intro{grid-column:1/-1}.demo-create:has(.demo-example) .demo-example{grid-column:1;grid-row:2}.demo-create:has(.demo-example) .demo-form{grid-column:2;grid-row:2;position:sticky;top:82px}.demo-example{min-width:0;border:1px solid #ccd6d1;border-radius:24px;background:#fff;overflow:hidden;box-shadow:0 34px 90px #10182820}.demo-browser-bar{height:54px;display:grid;grid-template-columns:90px minmax(0,1fr) 110px;align-items:center;gap:12px;padding:0 16px;background:#f1f4f2;border-bottom:1px solid #dce3df}.browser-dots{display:flex;gap:7px}.browser-dots i{width:10px;height:10px;border-radius:50%;background:#ff665c}.browser-dots i:nth-child(2){background:#f5bd3f}.browser-dots i:nth-child(3){background:#43c45d}.browser-address{height:32px;border:1px solid #d6ded9;border-radius:9px;background:#fff;display:flex;align-items:center;gap:7px;padding:0 12px;overflow:hidden}.browser-address span{font-size:8px;color:#176b52}.browser-address b{font-size:11px;color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-browser-bar>a{text-align:right;color:#176b52;font-size:11px;font-weight:900;text-decoration:none}.demo-browser-screen{height:620px;background:#e7ece9;overflow:hidden}.demo-browser-screen iframe{width:100%;height:100%;border:0;background:#fff}.demo-example-caption{display:flex;align-items:center;gap:14px;padding:17px 20px;border-top:1px solid #e5e9e7}.demo-example-caption>span{padding:7px 10px;border-radius:999px;background:#e8f3ee;color:#176b52;font-size:10px;font-weight:950;text-transform:uppercase;white-space:nowrap}.demo-example-caption strong,.demo-example-caption small{display:block}.demo-example-caption small{color:#667085;margin-top:3px}
@media(max-width:900px){.demo-create:has(.demo-example){grid-template-columns:1fr}.demo-create:has(.demo-example) .demo-intro,.demo-create:has(.demo-example) .demo-example,.demo-create:has(.demo-example) .demo-form{grid-column:1;grid-row:auto}.demo-create:has(.demo-example) .demo-form{position:static}.demo-browser-screen{height:520px}}
@media(max-width:520px){.demo-browser-bar{grid-template-columns:55px minmax(0,1fr);padding:0 10px}.demo-browser-bar>a{display:none}.demo-browser-screen{height:440px}.demo-example{border-radius:17px}.demo-example-caption{align-items:flex-start;padding:14px}.demo-example-caption small{font-size:11px}}