.demo-app{--demo-violet:#635bff;--demo-border:#e8e8f0;color:#11111d;background:#f8f8fa;min-height:100vh;font-family:Manrope,system-ui,sans-serif}.demo-app button,.demo-app input,.demo-app select,.demo-app textarea{font:inherit}.demo-app button{cursor:pointer}.demo-app button:disabled{cursor:not-allowed;opacity:.46}.demo-header{border-bottom:1px solid var(--demo-border);background:#fff;justify-content:space-between;align-items:center;gap:16px;height:66px;padding:0 26px;display:flex}.demo-header-left,.demo-header-actions,.demo-story-actions,.demo-card-head,.demo-card-actions,.demo-page-head{align-items:center;gap:14px;display:flex}.demo-header-left{min-width:0}.demo-header-divider{background:#d9d9e3;width:1px;height:23px}.demo-header-title{white-space:nowrap;font-size:15px;font-weight:800}.demo-sample-badge{color:#574df0;letter-spacing:.08em;white-space:nowrap;background:#f4f3ff;border:1px solid #dad8ff;border-radius:5px;padding:5px 8px;font-size:11px;font-weight:800}.demo-header-actions button{color:#585872;background:0 0;border:0;border-radius:6px;align-items:center;gap:7px;padding:8px;font-size:13px;font-weight:700;display:flex}.demo-header-actions button:hover{color:#171727;background:#f1f1f6}.demo-storybar{justify-content:space-between;align-items:end;gap:20px;padding:21px 26px 17px;display:flex}.demo-eyebrow{color:#787892;letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:800;line-height:1.4}.demo-storybar h1{letter-spacing:-.045em;margin:4px 0 3px;font-size:clamp(25px,2.3vw,34px);line-height:1.1}.demo-storybar p{color:#65657e;margin:0;font-size:14px}.demo-story-actions button{background:#fff;border:1px solid #dedeea;border-radius:5px;justify-content:center;align-items:center;width:33px;height:33px;display:inline-flex}.demo-story-actions button:hover{border-color:var(--demo-violet);color:var(--demo-violet)}.demo-chapters{scrollbar-width:thin;gap:5px;padding:0 26px 18px;display:flex;overflow-x:auto}.demo-chapters button{white-space:nowrap;color:#77778b;text-align:left;background:#f0f0f5;border:1px solid #0000;border-radius:5px;flex:1 0 auto;padding:8px 10px;font-size:12px;font-weight:800}.demo-chapters button span{opacity:.6;margin-right:8px;font-size:10px}.demo-chapters button.active{color:#5149de;background:#ecebff;border-color:#cbc8ff}.demo-chapters button:hover{color:#5149de}.demo-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;height:min(75vh,830px);min-height:610px;padding:0 26px;display:grid}.demo-workspace{background:#fff;border:1px solid #dcdce7;border-radius:7px;flex-direction:column;min-width:0;display:flex;overflow:hidden;box-shadow:0 12px 34px #0c0a2312}.demo-workspace-top{color:#54546a;letter-spacing:.09em;background:#f3f3f7;border-bottom:1px solid #e5e5ee;flex:0 0 33px;justify-content:space-between;align-items:center;height:33px;padding:0 12px;font-size:10px;font-weight:800;display:flex}.demo-workspace-top>div{align-items:center;gap:7px;display:flex}.demo-workspace-top>span{color:#9a9aaf;letter-spacing:0;font-weight:600}.demo-live-dot{background:#635bff;border-radius:50%;width:7px;height:7px;display:inline-block}.demo-workspace-body{flex:1;min-height:0;display:flex}.demo-sidebar{color:#f7f7ff;background:#040310;flex-direction:column;flex:0 0 170px;width:170px;display:flex}.demo-sidebar-brand{border-bottom:1px solid #ffffff17;align-items:center;gap:9px;height:61px;padding:10px 13px;display:flex}.demo-brand-avatar{color:#fff;background:linear-gradient(135deg,#635bff,#8b85ff);border-radius:4px;flex:0 0 31px;justify-content:center;align-items:center;width:31px;height:31px;font-size:12px;font-weight:900;display:flex}.demo-sidebar-name{color:#aaaabd;text-overflow:ellipsis;white-space:nowrap;padding:13px 13px 7px;font-size:11px;font-weight:700;overflow:hidden}.demo-sidebar nav{flex-direction:column;gap:3px;padding:5px 8px;display:flex;overflow-y:auto}.demo-sidebar nav button{text-align:left;color:#b2b2c7;background:0 0;border:1px solid #0000;border-radius:4px;align-items:center;gap:9px;width:100%;min-height:37px;padding:8px 9px;font-size:11px;font-weight:650;display:flex}.demo-sidebar nav button span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.demo-sidebar nav button:hover{color:#fff;background:#151329}.demo-sidebar nav button.active{color:#fff;background:#211e48;border-color:#3d368a}.demo-nav-dot{background:#8b85ff;border-radius:50%;width:5px;height:5px}.demo-sidebar-bottom{color:#8c8ca7;border-top:1px solid #ffffff17;align-items:center;gap:8px;margin-top:auto;padding:13px;font-size:10px;display:flex}.demo-content{background:#f8f8fa;flex-direction:column;flex:1;min-width:0;display:flex}.demo-content-top{border-bottom:1px solid var(--demo-border);color:#696982;background:#fff;flex:0 0 51px;justify-content:space-between;align-items:center;height:51px;padding:0 17px;font-size:11px;font-weight:800;display:flex}.demo-content-scroll{flex:1;min-height:0;padding:20px 16px 28px;overflow-y:auto}.demo-page-head{justify-content:space-between;align-items:end;margin-bottom:18px}.demo-page-head h2{letter-spacing:-.04em;margin:5px 0 4px;font-size:clamp(20px,2vw,27px);line-height:1.1}.demo-page-head p{color:#7b7b91;margin:0;font-size:12px;line-height:1.45}.demo-card{border:1px solid var(--demo-border);background:#fff;border-radius:6px;margin-bottom:13px;padding:17px;box-shadow:0 2px 7px #0d0c2106}.demo-card-head{justify-content:space-between;align-items:start;margin-bottom:15px}.demo-card h3{letter-spacing:-.025em;margin:3px 0 0;font-size:16px;line-height:1.25}.demo-primary,.demo-secondary{white-space:nowrap;border-radius:4px;justify-content:center;align-items:center;gap:8px;min-height:34px;padding:7px 11px;font-size:11px;font-weight:800;display:inline-flex}.demo-primary{color:#fff;background:#635bff;border:1px solid #635bff}.demo-primary:hover:not(:disabled){background:#5048eb}.demo-secondary{color:#5149e4;background:#fff;border:1px solid #cbc8ff}.demo-secondary:hover:not(:disabled){background:#f4f3ff}.demo-status{color:#635bff;white-space:nowrap;background:#efeeff;border:1px solid #dedbff;border-radius:3px;flex:none;padding:4px 7px;font-size:10px;font-weight:800}.demo-status-submitted,.demo-status-draft{color:#3174cf;background:#eef5ff;border-color:#d9e9ff}.demo-status-under-review,.demo-status-artwork{color:#7755ba;background:#f3efff;border-color:#e6ddff}.demo-status-pending,.demo-status-revision-requested,.demo-status-awaiting-signature,.demo-status-wait-for-release-date{color:#aa7418;background:#fff8eb;border-color:#ffe5b6}.demo-status-signed,.demo-status-active,.demo-status-released{color:#27844c;background:#e9f9ee;border-color:#ccebd5}.demo-field{color:#45455b;flex-direction:column;gap:6px;margin:12px 0;font-size:11px;font-weight:800;display:flex}.demo-field input,.demo-field select,.demo-field textarea,.demo-input-readonly{color:#1b1b2b;resize:vertical;background:#fafafd;border:1px solid #dedee9;border-radius:4px;width:100%;min-height:36px;padding:8px 10px;font-size:12px;font-weight:600}.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus{outline-offset:1px;outline:2px solid #aaa5ff}.demo-input-readonly{color:#85859b;align-items:center;display:flex}.demo-field-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.demo-card-actions{flex-wrap:wrap;justify-content:flex-end;margin-top:14px}.demo-filter{color:#51516a;background:#fafafd;border:1px solid #dfdfeb;border-radius:4px;max-width:120px;padding:5px 6px;font-size:10px}.demo-track-list{border-top:1px solid #efeff4}.demo-track{border-bottom:1px solid #efeff4;align-items:center;gap:9px;min-width:0;padding:10px 0;display:flex}.demo-track:last-child{border-bottom:0}.demo-cover{color:#fff;background:linear-gradient(135deg,#1d1b42,#6d63cf);border-radius:3px;flex:0 0 36px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.demo-track-info{flex-direction:column;flex:1;min-width:0;display:flex}.demo-track-info strong{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.demo-track-info span{color:#89899d;text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.demo-empty{color:#9292a4;text-align:center;padding:22px 6px;font-size:12px}.demo-audio{color:#6b64db;background:#f7f6ff;border-radius:5px;align-items:center;gap:9px;padding:10px;display:flex}.demo-audio-icon{color:#fff;background:#635bff;border-radius:50%;flex:0 0 28px;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.demo-audio>span{color:#9290ad;white-space:nowrap;font-size:9px}.demo-waveform{flex:1;align-items:center;gap:2px;height:35px;display:flex;overflow:hidden}.demo-waveform i{background:#a9a4f9;border-radius:3px;flex:1 0 2px}.demo-body-copy{color:#68687f;margin:11px 0;font-size:12px;line-height:1.5}.demo-note{background:#f6f6fa;border-left:3px solid #8b85ff;flex-direction:column;gap:4px;margin:12px 0;padding:10px;font-size:11px;line-height:1.45;display:flex}.demo-note span{color:#67677e}.demo-divider{border-top:1px solid #eeeef4;margin:15px 0}.demo-muted{color:#89899e;font-size:11px}.demo-row{text-align:left;border-bottom:1px solid #efeff4;align-items:center;gap:10px;width:100%;min-height:56px;display:flex}.demo-row:last-child{border-bottom:0}.demo-row-button{background:0 0;border-top:0;border-left:0;border-right:0;padding:0}.demo-row-button:hover{background:#f8f7ff}.demo-row-icon{color:#635bff;background:#f1f0ff;border-radius:4px;flex:0 0 31px;justify-content:center;align-items:center;width:31px;height:31px;display:flex}.demo-row-copy{flex-direction:column;flex:1;min-width:0;display:flex}.demo-row-copy strong{white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.demo-row-copy small{color:#8d8da1;white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.demo-row-right{color:#7b79a4;flex:none;font-size:10px;font-weight:800}.demo-terms{background:#f9f9fb;border:1px solid #ededf3;border-radius:4px;margin:12px 0;padding:11px;font-size:11px}.demo-terms p{color:#717188;margin:5px 0 0;line-height:1.5}.demo-signed{color:#23824c;background:#edfaf1;border:1px solid #cfeedd;border-radius:4px;gap:10px;margin-top:13px;padding:11px;font-size:11px;display:flex}.demo-signed div{flex-direction:column;gap:3px;display:flex}.demo-signed span{color:#58826a}.demo-stat-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px;display:grid}.demo-stat{border:1px solid var(--demo-border);background:#fff;border-radius:5px;flex-direction:column;gap:8px;min-height:82px;padding:14px;display:flex}.demo-stat span{color:#85859a;font-size:10px;font-weight:700}.demo-stat strong{letter-spacing:-.04em;white-space:nowrap;text-overflow:ellipsis;font-size:22px;line-height:1;overflow:hidden}.demo-cover-art{color:#fff;background:linear-gradient(135deg,#0d0a2d,#312676 62%,#635bff);border-radius:5px;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:115px;margin-bottom:9px;display:flex}.demo-cover-art span{font-size:13px;font-weight:800}.demo-cover-art small{color:#c9c4fa;font-size:10px}.demo-inline-form{align-items:end;gap:10px;margin-top:12px;display:flex}.demo-inline-form .demo-field{flex:1;margin:0}.demo-upload{color:#635bff;text-align:center;background:#f8f7ff;border:1px dashed #b5b0f7;border-radius:5px;flex-direction:column;align-items:center;gap:5px;margin-top:14px;padding:16px;display:flex}.demo-upload strong{font-size:11px}.demo-upload span{color:#9290b4;font-size:10px}.demo-upload-button{cursor:pointer;background:#fff;border:1px solid #c8c3ff;border-radius:4px;margin-top:6px;padding:7px 9px;font-size:11px;font-weight:800}.demo-upload-button input{display:none}.demo-activity{flex-direction:column;gap:10px;display:flex}.demo-activity>div{color:#67677e;align-items:start;gap:9px;font-size:11px;line-height:1.4;display:flex}.demo-activity-dot{background:#635bff;border-radius:50%;flex:0 0 6px;width:6px;height:6px;margin-top:5px}.demo-profile-banner{color:#fff;background:linear-gradient(135deg,#181439,#554aca);border-radius:5px;align-items:center;gap:13px;padding:17px;display:flex}.demo-profile-avatar{background:#aaa2ff;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;font-size:15px;font-weight:900;display:flex}.demo-profile-banner>div:last-child{flex-direction:column;gap:3px;font-size:13px;display:flex}.demo-profile-banner span{color:#d8d3ff;font-size:10px}.demo-footer{color:#8a8aa0;justify-content:space-between;align-items:center;gap:20px;padding:11px 26px 18px;font-size:11px;display:flex}.demo-footer div{align-items:center;gap:7px;display:flex}.demo-modal-backdrop{z-index:30;background:#040310a3;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.demo-modal{background:#fff;border-radius:7px;width:min(440px,100%);padding:26px;position:relative;box-shadow:0 20px 80px #00000040}.demo-modal h2{margin:5px 0 10px;font-size:26px}.demo-modal p{color:#66667e;font-size:14px;line-height:1.55}.demo-modal-close{background:0 0;border:0;position:absolute;top:14px;right:14px}@media (width<=1180px){.demo-sidebar{flex-basis:56px;width:56px}.demo-sidebar-brand{justify-content:center;padding:7px}.demo-sidebar-brand img,.demo-sidebar-name,.demo-sidebar nav button span,.demo-sidebar-bottom span{display:none}.demo-sidebar nav button,.demo-sidebar-bottom{justify-content:center}}@media (width<=790px){.demo-header{padding:0 14px}.demo-header-actions span,.demo-header-title,.demo-header-divider{display:none}.demo-storybar{padding:18px 14px 14px}.demo-chapters{padding:0 14px 14px}.demo-split{grid-template-columns:1fr;height:auto;min-height:0;padding:0 14px}.demo-workspace{height:520px}.demo-footer{flex-direction:column;align-items:start;padding:12px 14px}}@media (width<=480px){.demo-sample-badge{display:none}.demo-content-scroll{padding:15px 11px}.demo-card{padding:13px}.demo-field-grid{grid-template-columns:1fr;gap:0}.demo-track{flex-wrap:wrap}.demo-track .demo-status{margin-left:46px}.demo-inline-form{flex-direction:column;align-items:stretch}}