.cwnt-preview-wrap { margin-top:1.2rem; padding:1rem; border-radius:10px; background:#0d0b0f; color:#f5f2f6; border:1px solid rgba(183,155,199,.25); }
.cwnt-preview-label { display:block; font-weight:650; margin-bottom:.75rem; }
.cwnt-preview { --cwnt-base:#151217; --cwnt-accent:#6B3D80; position:relative; width:min(100%,580px); aspect-ratio:145/34; background:var(--cwnt-base); border:5px solid var(--cwnt-accent); border-radius:18px 9px 9px 18px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-sizing:border-box; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.cwnt-preview:after { content:""; position:absolute; right:-1px; top:0; width:23px; height:100%; background:var(--cwnt-base); clip-path:polygon(0 0,100% 50%,0 100%); border-left:4px solid var(--cwnt-accent); }
.cwnt-hole { position:absolute; left:12px; width:18px; height:18px; border-radius:50%; background:#0f0d12; border:3px solid var(--cwnt-accent); z-index:2; }
.cwnt-preview-text { position:relative; z-index:2; color:var(--cwnt-accent); font-weight:800; letter-spacing:.04em; line-height:1; max-width:77%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cwnt-detail { position:absolute; right:42px; width:26px; height:4px; border-radius:3px; background:var(--cwnt-accent); z-index:2; }
.cwnt-detail-one { top:27%; }
.cwnt-detail-two { bottom:27%; }
.cwnt-dimensions { display:block; margin-top:.5rem; opacity:.65; font-size:.9rem; line-height:1.4; }
.cwnt-edit-configuration { font-weight:700; }
@media(max-width:600px){.cwnt-preview-text{max-width:67%}.cwnt-detail{display:none}}