@charset "UTF-8";
.website-player-demo{padding-block:80px;scroll-margin-top:110px}
.website-player-demo .section-heading{margin-bottom:30px}
.demo-layout{display:grid;grid-template-columns:.6fr 1.4fr;gap:25px;align-items:start}
.demo-options{min-width:0;padding:25px;border:1px solid #48364f;border-radius:17px;background:linear-gradient(150deg,#271e30,#1b1822)}
.demo-options fieldset{padding:0;margin:0;border:0;min-width:0}
.demo-options legend{font-size:15px;font-weight:600;margin-bottom:22px}
.demo-choice-label{font-size:10px;color:#b6a5c8;margin-bottom:10px}
.demo-designs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:22px}
.demo-option{position:relative;cursor:pointer;display:block}
.demo-option input{position:absolute;width:1px;height:1px;opacity:0}
.demo-option>span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #5a4668;border-radius:8px;font-size:11px;color:#d3c5e2;gap:7px;padding:9px}
.demo-option input:checked+span{border-color:var(--mint);color:var(--mint);background:#adffd908;box-shadow:inset 0 0 0 1px #adffd93d}
.demo-option input:focus-visible+span{outline:2px solid var(--mint);outline-offset:3px}
.demo-option:hover>span{background:#a68bff12}
.demo-colors{display:flex;flex-wrap:wrap;gap:7px}
.demo-colors .demo-option>span{font-size:10px;min-height:36px;padding:7px 10px}
.demo-swatch{width:9px;height:9px;display:block;border-radius:50%;background:var(--swatch)}
.demo-options fieldset:disabled{opacity:.55}
.demo-options>p{font-size:10px;line-height:1.9;color:#b4a3c6;margin-top:18px}
.demo-recovery{display:flex;align-items:center;flex-wrap:wrap;gap:10px 15px;margin-top:14px}
.demo-recovery[hidden]{display:none}
.demo-recovery button{min-height:44px;padding:10px 13px;border:1px solid var(--mint);border-radius:8px;background:#adffd90d;color:var(--mint);font-size:11px;line-height:1.6;text-align:left;cursor:pointer}
.demo-recovery button:hover{background:#adffd91c}
.demo-recovery a{display:inline-flex;align-items:center;min-height:44px;color:#d9cbea;font-size:11px;line-height:1.6;text-decoration:underline;text-underline-offset:3px}
.demo-screen{min-width:0;overflow:hidden;border:1px solid #55435e;border-radius:17px;background:#121016;box-shadow:0 18px 45px #0002}
.demo-screen-header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 18px;border-bottom:1px solid #403249;font-size:10px;color:#bcabcc}
.demo-screen-header strong{font-size:10px;font-weight:500;color:var(--mint)}
.demo-screen iframe{display:block;border:0;width:100%;aspect-ratio:16/9;background:#09090e}
.demo-caption{display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#a699b6;padding:13px 18px;line-height:1.8}
.demo-caption a{color:#d9cbea;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.website-player-demo.is-theater .demo-layout{grid-template-columns:1fr}
.website-player-demo.is-theater .demo-options{display:none}
@media(max-width:1000px){.demo-layout{grid-template-columns:1fr;gap:18px}.demo-options{padding:21px}.demo-options fieldset{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.demo-options legend{margin-bottom:15px}.demo-designs{grid-template-columns:repeat(4,1fr);margin-bottom:0}.demo-choice-label{display:none}.demo-options>p{margin-top:13px}.demo-colors{gap:6px}}
@media(max-width:700px){.website-player-demo{padding-block:60px}.demo-designs{gap:7px;width:100%}.demo-option>span{font-size:10px;padding:8px;min-height:40px}.demo-options{padding:19px}.demo-screen{border-radius:13px}.demo-screen-header{padding:12px 14px;font-size:9px}.demo-screen-header strong{font-size:9px}.demo-caption{padding:12px 14px;flex-wrap:wrap;font-size:9px}.demo-caption a{white-space:normal}}