.interface-screen{aspect-ratio:700/480}.demo-ui{--demo-accent:#b59aff;height:100%;display:flex;background:radial-gradient(ellipse at 75% 40%,#35215d55,transparent 75%),#0e0c20;color:#beb5d7;font:12px Arial;direction:ltr}.demo-nav{width:12%;min-width:65px;padding:12px 6px;background:#09081788;display:flex;flex-direction:column;gap:12px}.demo-nav>img{width:38px;height:38px;margin:0 auto;object-fit:contain}.demo-nav nav{display:flex;flex-direction:column;gap:5px}.demo-ui button{color:inherit;border:1px solid transparent;background:#ffffff04;border-radius:9px;transition:background .2s,transform .2s;font:inherit;cursor:pointer}.demo-nav button{width:100%;padding:8px 2px;font-size:9px;display:flex;align-items:center;flex-direction:column;gap:3px}.demo-nav button span{font-size:21px;color:var(--demo-accent)}.demo-ui button[aria-pressed=true]{background:#b59aff24;border-color:#b59aff50;color:#f4efff}.demo-ui button:hover{background:#b59aff30}.demo-main{min-width:0;flex:1;display:flex;flex-direction:column}.demo-main header{height:55px;flex-shrink:0;padding:12px;gap:10px;border:0}.demo-main header strong{font-size:16px;color:#ece7fc;margin-right:auto}.demo-badge{font-size:7px;letter-spacing:1px}.demo-main header button{padding:6px 12px;font-size:8px;color:var(--demo-accent)}.demo-tabs{display:flex;gap:7px;padding:0 12px 12px}.demo-tabs button{padding:7px 15px;font-size:10px}.demo-content{overflow:auto;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 10px 10px;align-content:start;scrollbar-color:#6a568d #0f0c23;scrollbar-width:thin}.demo-content section{border:1px solid #b59aff20;border-radius:11px;background:#15102780;min-width:0;padding:0 9px 9px}.demo-content h4{text-align:center;font-size:10px;font-weight:normal;border-bottom:1px solid #b59aff20;margin:0 0 7px;padding:13px 0}.demo-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;font-size:11px}.demo-row input[type=checkbox]{appearance:none;width:18px;height:18px;flex-shrink:0;border:1px solid #b59aff40;border-radius:6px;background:#b59aff09;cursor:pointer}.demo-row input[type=checkbox]:checked{background:var(--demo-accent)}.demo-row input[type=checkbox]:checked:after{content:'✓';display:block;text-align:center;color:#161020;font-size:13px}.demo-row input[type=range]{width:45%;accent-color:var(--demo-accent)}.demo-row input[type=color]{width:30px;height:24px;padding:0;border:0;background:none}.demo-row select,.demo-text{max-width:100%;background:#110c24;border:1px solid #b59aff30;border-radius:6px;padding:7px;color:#ddd3fa}.demo-action{display:block;width:100%;padding:10px;margin-top:10px}.demo-content p{font-size:10px;line-height:1.6;color:#8f84a8}.demo-main footer{margin:0;padding:9px 12px;font-size:8px;flex-shrink:0;background:#09071655;border:0;gap:10px;display:flex;justify-content:space-between}.demo-enter{animation:demo-enter .3s ease-out}@keyframes demo-enter{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}@media(max-width:700px){.interface-screen{aspect-ratio:auto;height:430px}.demo-badge{display:none}.demo-content{grid-template-columns:1fr}.demo-nav{min-width:60px}.demo-main header strong{font-size:14px}.demo-row{min-height:36px}.demo-main footer{font-size:7px}}

.demo-ui [hidden]{display:none!important}.demo-nav{overflow-y:auto;scrollbar-width:thin}.demo-ui input:focus-visible,.demo-ui select:focus-visible{outline:2px solid var(--demo-accent);outline-offset:2px}
.demo-modes{display:flex;gap:3px}.demo-main header .demo-modes button{padding:6px 8px}.demo-config{background:#1e1731;color:#a69bbb;border:0;border-radius:8px;font:8px Arial;padding:7px;max-width:100px}.demo-popup{color:#ddd3f5;background:#151026;border:1px solid #b59aff55;border-radius:14px;width:min(420px,calc(100% - 30px));padding:15px}.demo-popup::backdrop{background:#060510aa;backdrop-filter:blur(5px)}.demo-popup header{height:auto;padding:5px 0 15px;border-bottom:1px solid #b59aff30}.demo-popup header strong{font-size:14px}.demo-popup button{padding:5px 9px}.demo-settings{margin-left:auto;padding:3px!important;font-size:17px!important;color:#a39ab8!important}.demo-row>label{margin-right:auto;line-height:1.3}.demo-row output{font-size:8px}.demo-row input[type=color]{width:15px;height:15px;border-radius:50%;overflow:hidden;flex-shrink:0}.demo-row select{font-size:9px;max-width:48%}.demo-row input[type=text]{min-width:0;width:50%;padding:7px;color:white;background:#171027;border:1px solid #b59aff30;border-radius:6px}.demo-row button{font-size:10px;padding:6px 9px}.demo-content h4{padding:12px 0}.demo-ui .demo-nav{width:84px;min-width:84px}.demo-nav button{padding:7px 2px}.demo-nav button span{font-size:24px}.demo-main header{height:55px}.demo-row{min-height:36px}.demo-content{gap:10px}.demo-content section{padding-inline:9px}@media(max-width:700px){.demo-config{display:none}.demo-ui .demo-nav{width:65px;min-width:65px}.demo-main header{gap:4px}.demo-main header .demo-modes button{padding:6px}.demo-content{grid-template-columns:1fr}}

@font-face{font-family:EvexIcons;src:url('/evex-icons.ttf') format('truetype');font-display:swap}.demo-nav button span{font-family:EvexIcons}.demo-popup{max-height:80vh;overflow:auto}