.demo-page{min-height:100vh;padding:24px max(16px,env(safe-area-inset-right))24px max(16px,env(safe-area-inset-left));background:radial-gradient(100% 80% at 80% 0,#4a2245,#24101f 65%);place-items:center;display:grid}.demo-box{color:#2a1826;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#fff;border-radius:18px;gap:16px;width:min(100%,560px);padding:28px;display:grid;box-shadow:0 24px 60px rgba(0,0,0,.35)}.demo-mark{letter-spacing:.16em;color:#7a3a70;font-family:Cinzel,Georgia,serif;font-size:20px;font-weight:600}.demo-tag{letter-spacing:.08em;text-transform:uppercase;color:#24101f;background:#c49a5a;border-radius:999px;justify-self:start;padding:3px 10px;font-size:11px;font-weight:700}.demo-h1{color:#2a1826;margin:0 0 4px;font-size:22px}.demo-box .muted{color:#6c5a66}.demo-box .field span{color:#2a1826;font-size:13px;font-weight:600}.demo-box .input{color:#2a1826;background:#fff;border:1px solid #d9ccd3}.demo-box .input:focus{outline-offset:1px;border-color:#c49a5a;outline:2px solid #c49a5a}.demo-box .btn-primary{color:#fff;box-shadow:none;background:#5b2453;border-color:#5b2453}.demo-box .btn-primary:hover{background:#6e2c65}.demo-box .btn-primary[disabled]{opacity:.7}.demo-err{color:#b91c1c;background:rgba(220,38,38,.1);border-radius:8px;padding:10px 12px;font-size:13.5px}.demo-roles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}@media (max-width:520px){.demo-roles{grid-template-columns:repeat(2,minmax(0,1fr))}}.demo-role{text-align:left;cursor:pointer;color:#2a1826;font:inherit;background:#faf6f8;border:1.5px solid #e3d8d6;border-radius:12px;gap:2px;padding:12px;display:grid}.demo-role:hover{border-color:#7a3a70}.demo-role b{font-size:15px}.demo-role span{font-size:13px}.demo-role small{opacity:.7;font-size:12px;line-height:1.35}.demo-role[disabled]{cursor:wait;opacity:.7}.demo-link{color:#7a3a70;font-size:14px;font-weight:600;text-decoration:none}.demo-switch{z-index:1000;left:max(12px,env(safe-area-inset-left));bottom:calc(84px + env(safe-area-inset-bottom));font-family:inherit;position:fixed}@media (min-width:1080px){.demo-switch{bottom:calc(16px + env(safe-area-inset-bottom))}}.demo-switch-btn{color:#f5ece3;cursor:pointer;background:#24101f;border:0;border-radius:999px;align-items:center;gap:8px;padding:9px 14px;font:600 13px/1 inherit;display:inline-flex;box-shadow:0 6px 20px rgba(0,0,0,.3)}.demo-switch-dot{background:#c49a5a;border-radius:50%;width:8px;height:8px}.demo-switch-menu{color:#2a1826;background:#fff;border-radius:12px;min-width:220px;padding:6px;display:grid;position:absolute;bottom:calc(100% + 8px);left:0;box-shadow:0 12px 32px rgba(0,0,0,.28)}.demo-switch-head{letter-spacing:.06em;text-transform:uppercase;color:#8a6330;padding:8px 10px 6px;font-size:11px;font-weight:700}.demo-switch-menu button,.demo-switch-menu a{text-align:left;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;font:500 14px/1.2 inherit;text-decoration:none;display:flex}.demo-switch-menu button:hover:not([disabled]),.demo-switch-menu a:hover{background:#f4eef2}.demo-switch-menu button[disabled]{cursor:default;opacity:.65}.demo-switch-menu button span{color:#1f6b3f;font-size:11px;font-weight:700}.demo-switch-sub{color:#6c5a66!important;border-top:1px solid #eee!important;border-radius:0!important;font-size:13px!important}