.demo-page{max-width:1160px;margin:0 auto;padding:40px 24px 80px}.demo-page-embed{padding-top:20px;padding-bottom:40px}.demo-note{font-size:13px;color:var(--muted);line-height:1.6;margin:6px 0 28px;max-width:640px}.demo-cols{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:24px;align-items:start}.demo-cell-skeleton{display:inline-block;width:42px;height:12px;border-radius:4px;background:var(--subtle);animation:skeleton-pulse 1.4s ease-in-out infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.45}}.demo-preview-btn{font-size:12px;color:var(--fg);background:none;border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;font-family:inherit;white-space:nowrap}.demo-preview-btn:hover{background:var(--subtle)}.demo-locked{border:1px dashed var(--border);border-radius:var(--radius);margin-top:16px;padding:12px 14px;font-size:12px;color:var(--muted);line-height:1.55}.demo-cta{margin-top:20px;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.demo-cta-text{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px}.demo-cta-text strong{font-size:14px;font-weight:600}.demo-cta-text span{font-size:12px;color:var(--muted);line-height:1.5}.notif-panel{position:sticky;top:24px}.notif-tabs{display:flex;gap:6px;margin-bottom:10px}.notif-tab{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;font-family:inherit;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:999px;padding:6px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.notif-tab:hover{background:var(--subtle)}.notif-tab.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}.notif-unread{min-width:17px;height:17px;border-radius:999px;background:#e01e5a;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}.notif-unread[hidden],.notif-win[hidden]{display:none}.mock-titlebar{background:var(--subtle);border-bottom:1px solid var(--border);height:34px;display:flex;align-items:center;padding:0 12px;gap:12px;flex-shrink:0}.mock-titlebar .title{flex:1;text-align:center;font-size:11px;color:var(--muted);font-family:var(--font-mono)}.mock-pop{animation:mock-rv .35s ease both}@keyframes mock-rv{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mock-pop{animation:none}}.slack-win{border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 16px 40px #00000024;background:#fff;display:flex;flex-direction:column}.slack-body{display:flex;min-height:0}.slack-main{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff}.slack-head{padding:9px 14px;border-bottom:1px solid #ddd;flex-shrink:0}.slack-head .chan{font-size:14px;font-weight:900;color:#1d1c1d}.slack-head .sub{font-size:11px;color:#616061;margin-top:1px}.slack-msgs{padding:12px 14px 6px;display:flex;flex-direction:column;gap:12px;height:440px;overflow-y:auto;scroll-behavior:smooth}.slack-day{display:flex;align-items:center;margin:2px 0;min-width:0}.slack-day:before,.slack-day:after{content:"";flex:1;height:1px;background:#ddd}.slack-day span{font-size:11px;font-weight:700;color:#1d1c1d;border:1px solid #ddd;border-radius:999px;padding:3px 12px;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%}.slack-msg{display:flex;gap:8px;min-width:0}.slack-avatar{width:36px;height:36px;border-radius:4px;background:#f4f4f4;border:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.slack-avatar img{width:22px;height:22px;display:block}.slack-msg-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.slack-msg-meta{display:flex;gap:6px;align-items:baseline}.slack-msg-meta .name{font-weight:900;font-size:13px;color:#1d1c1d}.slack-msg-meta .app{font-size:9px;font-weight:700;background:#e8e8e8;border-radius:2px;padding:1px 4px;color:#616061;text-transform:uppercase}.slack-msg-meta .time{font-size:11px;color:#616061}.slack-msg-text{font-size:12.5px;line-height:1.5;color:#1d1c1d;overflow-wrap:break-word}.slack-msg-text a{color:#1264a3;font-weight:600}.slack-msg-text .sub{font-size:11.5px;color:#616061;margin-top:2px}.slack-msg-text code{font-family:var(--font-mono);font-size:11px;color:#e01e5a;background:#f8f8f8;border:1px solid #e0e0e0;border-radius:3px;padding:0 3px}.slack-attach{border-left:4px solid #ddd;border-radius:2px;padding:2px 0 2px 10px;margin-top:2px}.slack-attach.warning{border-left-color:#e8912d}.slack-attach.critical{border-left-color:#e01e5a}.slack-attach.ok{border-left-color:#2eb67d}.slack-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.slack-action-btn{font-size:12px;font-weight:700;font-family:inherit;color:#1d1c1d;background:#fff;border:1px solid #bbb;border-radius:4px;padding:4px 12px;cursor:pointer;white-space:nowrap}.slack-action-btn:hover{background:#f8f8f8}.slack-action-btn.primary{background:#007a5a;border-color:#007a5a;color:#fff}.slack-action-btn.primary:hover{background:#148567}.slack-action-btn:disabled{opacity:.5;cursor:default}.slack-input{margin:4px 12px 12px;border:1px solid #8d8d8d;border-radius:8px;padding:8px 10px;display:flex;align-items:center;gap:8px;color:#616061;font-size:12.5px;flex-shrink:0}.slack-input .plus{width:20px;height:20px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:#616061;flex-shrink:0}.slack-input .send{margin-left:auto;color:#007a5a;font-size:13px}.disc-win{border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 16px 40px #00000024;background:#313338;display:flex;flex-direction:column}.disc-win .mock-titlebar{background:#1e1f22;border-bottom-color:#17181a}.disc-win .mock-titlebar .title{color:#949ba4}.disc-body{display:flex;min-height:0}.disc-main{flex:1;min-width:0;display:flex;flex-direction:column;background:#313338}.disc-head{padding:9px 14px;border-bottom:1px solid #26272b;flex-shrink:0}.disc-head .chan{font-size:14px;font-weight:700;color:#f2f3f5}.disc-head .chan .hash{color:#80848e;margin-right:4px}.disc-head .sub{font-size:11px;color:#949ba4;margin-top:1px}.disc-msgs{padding:12px 14px 6px;display:flex;flex-direction:column;gap:14px;height:440px;overflow-y:auto;scroll-behavior:smooth}.disc-day{display:flex;align-items:center;gap:8px;margin:2px 0;min-width:0}.disc-day:before,.disc-day:after{content:"";flex:1;height:1px;background:#3f4147}.disc-day span{font-size:10.5px;font-weight:600;color:#949ba4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}.disc-msg{display:flex;gap:10px;min-width:0}.disc-avatar{width:36px;height:36px;border-radius:50%;background:#f2f3f5;display:flex;align-items:center;justify-content:center;flex-shrink:0}.disc-avatar img{width:22px;height:22px;display:block}.disc-msg-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.disc-msg-meta{display:flex;gap:6px;align-items:baseline}.disc-msg-meta .name{font-weight:600;font-size:13px;color:#f2f3f5}.disc-msg-meta .bot{font-size:9px;font-weight:700;background:#5865f2;border-radius:3px;padding:1px 4px;color:#fff;text-transform:uppercase}.disc-msg-meta .time{font-size:10.5px;color:#949ba4}.disc-msg-text{font-size:12.5px;line-height:1.5;color:#dbdee1;overflow-wrap:break-word}.disc-msg-text a{color:#00a8fc;font-weight:500}.disc-msg-text .sub{font-size:11.5px;color:#949ba4;margin-top:2px}.disc-msg-text code{font-family:var(--font-mono);font-size:11px;color:#dbdee1;background:#1e1f22;border-radius:3px;padding:1px 4px}.disc-embed{background:#2b2d31;border-left:4px solid #4e5058;border-radius:4px;padding:8px 12px;margin-top:3px;max-width:100%}.disc-embed.warning{border-left-color:#faa61a}.disc-embed.critical{border-left-color:#da373c}.disc-embed.ok{border-left-color:#23a55a}.disc-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.disc-btn{font-size:12px;font-weight:600;font-family:inherit;color:#fff;background:#5865f2;border:none;border-radius:3px;padding:6px 14px;cursor:pointer;white-space:nowrap}.disc-btn:hover{background:#4752c4}.disc-btn:disabled{opacity:.5;cursor:default}.disc-input{margin:4px 12px 12px;background:#383a40;border-radius:8px;padding:9px 12px;display:flex;align-items:center;gap:8px;color:#6d6f78;font-size:12.5px;flex-shrink:0}.disc-input .plus{width:20px;height:20px;border-radius:50%;background:#b5bac1;color:#383a40;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;font-weight:700;flex-shrink:0}.mail-win{border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 16px 40px #00000024;background:#fff;display:flex;flex-direction:column}.mail-head{padding:9px 14px;border-bottom:1px solid #e5e5e5;flex-shrink:0;display:flex;align-items:baseline;gap:8px}.mail-head .box{font-size:14px;font-weight:700;color:#1d1c1d}.mail-head .addr{font-size:11px;color:#757575}.mail-list{height:481px;overflow-y:auto;scroll-behavior:smooth}.mail-item{border-bottom:1px solid #ececec;padding:10px 14px;cursor:pointer}.mail-item:hover{background:#fafafa}.mail-row1{display:flex;align-items:baseline;gap:8px}.mail-from{font-size:12.5px;font-weight:700;color:#1d1c1d}.mail-from .via{font-weight:400;font-size:11px;color:#757575}.mail-time{margin-left:auto;font-size:11px;color:#757575;white-space:nowrap}.mail-dot{width:8px;height:8px;border-radius:50%;background:#1a73e8;flex-shrink:0;align-self:center}.mail-item.read .mail-dot{visibility:hidden}.mail-subj{font-size:12.5px;font-weight:700;color:#1d1c1d;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-item.read .mail-subj{font-weight:400}.mail-snippet{font-size:11.5px;color:#757575;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-body{display:none;font-size:12.5px;line-height:1.6;color:#1d1c1d;margin-top:10px;padding:12px;border:1px solid #ececec;border-radius:8px;background:#fff}.mail-item.open .mail-body{display:block}.mail-item.open .mail-snippet{display:none}.mail-body code{font-family:var(--font-mono);font-size:11px;background:#f5f5f5;border-radius:3px;padding:0 3px}.mail-body .sub{font-size:11.5px;color:#757575;margin-top:4px}.mail-body .mail-footer{margin-top:12px;padding-top:10px;border-top:1px solid #ececec;font-size:11px;color:#757575}.mail-body .mail-footer a{color:#1a73e8}.mail-brand{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #ececec}.mail-brand .m-logo{width:24px;height:24px;border-radius:5px;background:#f4f4f4;border:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center}.mail-brand .m-logo img{width:15px;height:15px}.mail-brand span{font-size:12px;font-weight:700}@media(max-width:1080px){.demo-cols{grid-template-columns:1fr}.notif-panel{position:static}.slack-msgs,.disc-msgs{height:380px}.mail-list{height:421px}}