html,body,#root{height:100%}body{background:#0b1626;overflow:hidden}.demo{display:grid;grid-template-columns:320px minmax(0,1fr);height:100vh;height:100dvh;color:#dbe5f2}.demo.is-collapsed{grid-template-columns:minmax(0,1fr)}.demo-panel{overflow-y:auto;padding:22px 20px 28px;background:#0f1d31;border-right:1px solid #1c2e47;scrollbar-color:#2b4163 transparent}.demo-panel[hidden]{display:none}.demo-panel__kicker{font-size:12px;font-weight:600;color:#f0b45a}.demo-panel__title{margin-top:4px;font-size:18px;font-weight:700;color:#fff;line-height:1.3}.demo-panel__note{margin-top:10px;font-size:13px;color:#9fb2cb}.demo-sec{margin-top:22px;padding-top:18px;border-top:1px solid #1c2e47;display:flex;flex-direction:column;gap:10px}.demo-sec__title{font-size:13px;font-weight:700;color:#fff}.demo-sec__text{font-size:12.5px;color:#9fb2cb;line-height:1.5}.demo-sec__hint{font-size:12px;color:#f0b45a}.demo-seg{display:inline-flex;padding:3px;gap:2px;border-radius:10px;background:#18293f}.demo-seg--block{display:flex}.demo-seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#9fb2cb;font-size:13px;font-weight:600;white-space:nowrap}.demo-seg button:hover{color:#fff}.demo-seg button.is-on{background:#2d5ea3;color:#fff}.demo-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.demo-links button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#dbe5f2;font-size:13px;text-align:left}.demo-links button:hover{background:#18293f;color:#fff}.demo-links svg{flex:none;color:#5d7aa3}.demo-reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.demo-reqs li{padding:10px 12px;border-radius:10px;background:#142338;border:1px solid #1c2e47}.demo-reqs__title{font-size:13px;font-weight:600;color:#fff}.demo-reqs__meta{font-size:12px;color:#9fb2cb}.demo-reqs__actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.demo-btn{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:7px;border:1px solid #2b4163;background:#18293f;color:#dbe5f2;font-size:12px;font-weight:600}.demo-btn:hover{border-color:#4b6f9f;color:#fff}.demo-btn--primary{background:#2d5ea3;border-color:#2d5ea3;color:#fff}.demo-btn--primary:hover{background:#3a6fb8}.demo-btn--danger{color:#ffb4ad;border-color:#5a2d33;background:#2a1a22}.demo-switch{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#fff;cursor:pointer}.demo-switch input{position:absolute;opacity:0}.demo-switch__track{position:relative;flex:none;width:34px;height:20px;border-radius:10px;background:#2b4163;transition:background .16s}.demo-switch__track:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .16s}.demo-switch input:checked+.demo-switch__track{background:#c77700}.demo-switch input:checked+.demo-switch__track:after{transform:translate(14px)}.demo-switch input:focus-visible+.demo-switch__track{box-shadow:0 0 0 3px #f0b45a66}.demo-json summary{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#9fb2cb;cursor:pointer}.demo-json pre{max-height:260px;overflow:auto;margin:8px 0 0;padding:10px;border-radius:8px;background:#0b1626;color:#b9cbe3;font-size:11px;line-height:1.45}.demo__stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}.demo__bar{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;background:#0f1d31;border-bottom:1px solid #1c2e47}.demo__toggle,.demo__open{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#9fb2cb;font-size:13px;font-weight:600;text-decoration:none}.demo__toggle:hover,.demo__open:hover{background:#18293f;color:#fff}.demo__open{margin-left:auto}.demo__desktop{flex:1;min-height:0;background:var(--canvas)}.demo__frame{display:block;width:100%;height:100%;border:0}.demo__mobile{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:12px;background:radial-gradient(80% 60% at 50% 40%,#16294a,#0b1626 70%)}.demo__caption{font-size:12.5px;color:#9fb2cb;text-align:center}.phone{position:relative;flex:none}.phone__body{width:414px;height:868px;padding:12px;border-radius:54px;background:#05090f;box-shadow:0 0 0 2px #26364d,0 30px 80px #0000008c;transform-origin:top left}.phone__screen{display:block;border:0;border-radius:42px;background:#fff}@media(max-width:899px){.demo{grid-template-columns:minmax(0,1fr)}.demo-panel:not([hidden]){position:fixed;inset:52px 0 0;z-index:10}.demo__open span,.demo__toggle span{display:none}}