/* Before and After Pro demos: the real widget, driven by a fingertip, inside a settings-panel look. */
.demo-wrap{padding-bottom:84px}
.demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:30px}
.demo{margin:0}
.d-frame{position:relative;aspect-ratio:1;border-radius:16px;background:#ecebf6;overflow:hidden;border:1px solid #2c2c2c}
.d-vp{position:absolute;left:0;top:0;width:400px;height:400px;transform-origin:0 0;font:14px/1.45 'DM Sans',system-ui,sans-serif;color:#20303c}
.d-screen{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;padding:20px}
.d-screen *{min-width:0}
.d-screen [hidden]{display:none!important}
.d-finger{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;background:rgba(122,59,217,.22);border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .25s,scale .15s;pointer-events:none;z-index:5}
.d-finger.show{opacity:1}.d-finger.press{scale:.78;background:rgba(122,59,217,.42)}.d-finger.drag{transition:opacity .25s,scale .15s}
.d-pressed{filter:brightness(.93);transform:translateY(1px)}
.d-in{animation:dIn .36s cubic-bezier(.22,1,.36,1) both}
@keyframes dIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.d-card{padding:16px;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(32,48,60,.1)}
.d-card h5{margin:0 0 10px;font-size:13px;font-weight:700}
.d-wid{display:block;height:190px;border-radius:6px;overflow:hidden;background:#f3f3f5}
.d-wid.tall{height:226px}.d-wid.auto{height:auto}
.d-wid before-after-pro{display:block;width:100%;height:100%}

/* Upload slots */
.d-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.d-slot{display:grid;gap:6px}
.d-slot label{font-size:11.5px;font-weight:650;color:#3b4a55}
.d-drop{height:92px;border:1.5px dashed #b9c3d9;border-radius:8px;display:grid;place-items:center;background:#f6f8fe center/cover no-repeat;color:#116dff;font-size:12.5px;font-weight:650;transition:border-color .2s}
.d-drop.set{border:1.5px solid #e1e5ee;color:transparent}
.d-ok{margin:10px 0 0;color:#17704c;font-size:12.5px;font-weight:650}

/* Choice cards, like the panel's visual pickers */
.d-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}
.d-cards span{display:grid;justify-items:center;gap:5px;padding:8px 4px 7px;border:1.5px solid #e1e5ee;border-radius:8px;font-size:11px;font-weight:650;color:#3b4a55;transition:border-color .2s,background .2s}
.d-cards i{width:38px;height:24px;border-radius:4px;background:linear-gradient(90deg,#9aa3ad 50%,#4f86c9 50%)}
.d-cards .rv{background:radial-gradient(circle at 55% 50%,#4f86c9 0 32%,#9aa3ad 34%)}
.d-cards .px{background:conic-gradient(from 90deg at 50% 50%,#4f86c9 25%,#9aa3ad 0 50%,#4f86c9 0 75%,#9aa3ad 0) 0 0/12px 12px}
.d-cards .bl{background:linear-gradient(90deg,#c9ced6,#4f86c9);filter:blur(1.5px)}
.d-cards .on{border-color:#116dff;background:#eef4ff}

/* Swatches and shapes */
.d-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.d-row b{font-size:12px;font-weight:650;color:#3b4a55}
.d-sw{display:flex;gap:7px}
.d-sw span{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d7dbe3;transition:box-shadow .2s}
.d-sw .on{box-shadow:0 0 0 2px #116dff}
.d-shapes{display:flex;gap:6px}
.d-shapes span{padding:5px 10px;border:1.5px solid #e1e5ee;border-radius:7px;font-size:11.5px;font-weight:650;color:#3b4a55;transition:border-color .2s,background .2s}
.d-shapes .on{border-color:#116dff;background:#eef4ff}
.d-btn{display:flex;align-items:center;justify-content:center;min-height:40px;margin-top:12px;border-radius:20px;background:#116dff;color:#fff;font-weight:650;font-size:13px}
.d-btn.ghost{background:#eef4ff;color:#116dff}
@media(max-width:640px){.demos{grid-template-columns:minmax(0,1fr);gap:18px}}