.cf-demo{min-height:100vh;background:#23262b;display:flex;flex-direction:column}.cf-demo-bar{display:flex;align-items:center;gap:14px;padding:10px 18px;background:#17191d;color:#cfd4dc;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:13px;position:-webkit-sticky;position:sticky;top:0;z-index:40}.cf-demo-back{color:#9aa3b0;text-decoration:none;white-space:nowrap}.cf-demo-back:hover{color:#fff}.cf-demo-case{font-weight:700;color:#fff;white-space:nowrap}.cf-demo-steps{display:flex;gap:6px;margin-left:6px}.cf-demo-step{width:24px;height:24px;border-radius:50%;border:1px solid #3a3f47;background:transparent;color:#9aa3b0;font-size:11px;cursor:pointer}.cf-demo-step.is-active{background:#fff;border-color:#fff;color:#17191d;font-weight:700}.cf-demo-label{margin-left:auto;color:#9aa3b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cf-demo-arrows{display:flex;gap:6px}.cf-demo-arrows button{width:28px;height:28px;border-radius:6px;border:1px solid #3a3f47;background:transparent;color:#cfd4dc;cursor:pointer;font-size:14px}.cf-demo-arrows button:disabled{opacity:.35;cursor:default}.cf-demo-stage{flex:1 1;padding:26px clamp(12px,3vw,40px) 60px;display:flex;justify-content:center;align-items:flex-start}.cf-demo-stage>*{width:100%;max-width:1240px}.cf-demo-disclosure{text-align:center;color:#9aa3b0;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;margin:-34px auto 26px;padding:0 16px;max-width:720px}.cf-browser{border-radius:12px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.45);background:#fff}.cf-browser-top{display:flex;align-items:flex-end;gap:14px;padding:8px 14px 0;background:#dee1e6}.cf-browser-dark .cf-browser-top{background:#202124}.cf-dots{display:flex;gap:7px;padding-bottom:12px}.cf-dots i{width:12px;height:12px;border-radius:50%}.cf-dots i:first-child{background:#f5655b}.cf-dots i:nth-child(2){background:#f6bd3b}.cf-dots i:nth-child(3){background:#43c645}.cf-tab{display:flex;align-items:center;gap:8px;background:#fff;border-radius:9px 9px 0 0;padding:7px 12px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;color:#3c4043;min-width:220px;max-width:320px}.cf-browser-dark .cf-tab{background:#35363a;color:#e8eaed}.cf-tab-favicon{width:12px;height:12px;border-radius:3px;background:currentColor;opacity:.55;flex:none}.cf-tab-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cf-tab-x{margin-left:auto;opacity:.55}.cf-browser-urlrow{display:flex;align-items:center;gap:12px;padding:7px 14px;background:#fff;border-bottom:1px solid #e6e8eb}.cf-browser-dark .cf-browser-urlrow{background:#35363a;border-bottom-color:#202124}.cf-nav-arrows{display:flex;gap:10px;color:#5f6368;font-size:14px}.cf-browser-dark .cf-nav-arrows{color:#bdc1c6}.cf-urlbar{flex:1 1;display:flex;align-items:center;gap:8px;background:#f1f3f4;border-radius:99px;padding:6px 14px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12.5px;color:#3c4043}.cf-browser-dark .cf-urlbar{background:#202124;color:#e8eaed}.cf-browser-body{background:#fff}.cf-pdf{border-radius:12px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.45)}.cf-pdf-bar{display:flex;align-items:center;gap:18px;background:#262a2e;color:#e8eaed;padding:10px 16px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12.5px}.cf-pdf-menu{display:flex;flex-direction:column;gap:3px}.cf-pdf-menu i{width:14px;height:2px;background:#e8eaed;display:block}.cf-pdf-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cf-pdf-page{margin-left:auto;color:#bdc1c6}.cf-pdf-page b{background:#17191d;padding:2px 8px;border-radius:3px;color:#fff;margin-right:4px}.cf-pdf-zoom{display:flex;align-items:center;gap:10px;color:#bdc1c6}.cf-pdf-zoom b{background:#17191d;padding:2px 8px;border-radius:3px;color:#fff;font-weight:500}.cf-pdf-actions{display:flex;gap:14px;color:#bdc1c6}.cf-pdf-body{background:#494e54;padding:28px clamp(12px,4vw,70px);display:flex;justify-content:center}.cf-pdf-body>*{width:100%;max-width:980px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.35)}.cf-inbox{display:grid;grid-template-columns:200px 290px 1fr;min-height:640px;background:#f6f8fc;border-radius:12px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.45);font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}.cf-inbox-side{padding:16px 12px;gap:4px}.cf-inbox-account,.cf-inbox-side{display:flex;flex-direction:column}.cf-inbox-account{padding:2px 8px 12px}.cf-inbox-account strong{font-size:13.5px;color:#1f1f1f}.cf-inbox-account span{font-size:11.5px;color:#5e5e5e;overflow:hidden;text-overflow:ellipsis}.cf-compose{display:flex;align-items:center;gap:8px;background:#fff;border:none;box-shadow:0 1px 4px rgba(0,0,0,.18);border-radius:14px;padding:10px 16px;font-size:13px;font-weight:600;color:#3c4043;margin-bottom:10px;width:-moz-fit-content;width:fit-content}.cf-compose span{color:#c5221f;font-size:16px;font-weight:700}.cf-folders{display:flex;flex-direction:column}.cf-folder{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;border-radius:0 99px 99px 0;font-size:12.5px;color:#444746}.cf-folder.is-active{background:#d3e3fd;color:#041e49;font-weight:700}.cf-folder b{font-size:11px;font-weight:600}.cf-labels{margin-top:14px}.cf-labels-head{font-size:12px;font-weight:600;color:#444746;padding:0 12px 6px}.cf-label{display:flex;align-items:center;gap:10px;padding:5px 12px;font-size:12.5px;color:#444746}.cf-label i{width:10px;height:10px;border-radius:3px;flex:none}.cf-inbox-list{background:#fff;border-radius:14px 0 0 14px;margin:10px 0;overflow:hidden;border-right:1px solid #eceef1}.cf-inbox-search{display:flex;align-items:center;gap:10px;margin:10px;background:#eaf1fb;border-radius:99px;padding:8px 16px;font-size:12.5px;color:#5f6368}.cf-msg{padding:9px 14px;border-bottom:1px solid #f0f2f5;cursor:default}.cf-msg.is-selected{background:#d3e3fd}.cf-msg-top{display:flex;justify-content:space-between;gap:8px}.cf-msg-from{font-size:12.5px;font-weight:600;color:#1f1f1f}.cf-msg.is-unread .cf-msg-from,.cf-msg.is-unread .cf-msg-subject{font-weight:700}.cf-msg-time{font-size:11px;color:#5e5e5e;white-space:nowrap}.cf-msg-subject{font-size:12.5px;color:#1f1f1f;margin-top:1px}.cf-msg-snippet{font-size:11.5px;color:#5e5e5e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;justify-content:space-between;gap:8px}.cf-msg-star{color:#c8ccd2;flex:none}.cf-msg-star.is-on{color:#f4b400}.cf-inbox-read{background:#fff;margin:10px 10px 10px 0;border-radius:0 14px 14px 0;padding:0 26px 30px;overflow:hidden}.cf-read-toolbar{display:flex;align-items:center;gap:18px;padding:12px 0;color:#5f6368;font-size:14px;border-bottom:1px solid #f0f2f5;margin-bottom:18px}.cf-read-pager{margin-left:auto;font-size:12px}.cf-index{min-height:100vh;background:#23262b;color:#eef1f5;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;padding:70px clamp(20px,6vw,90px)}.cf-index h1{font-size:clamp(28px,4vw,44px);margin:0 0 10px}.cf-index-lede{color:#9aa3b0;max-width:560px;margin:0 0 40px;line-height:1.55}.cf-index-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,420px));grid-gap:24px;gap:24px}.cf-index-card{display:block;border-radius:14px;padding:26px;text-decoration:none;border:1px solid #3a3f47;transition:transform .15s ease}.cf-index-card:hover{transform:translateY(-3px)}.cf-index-card strong{display:block;font-size:21px;margin-bottom:6px}.cf-index-card span{display:block;font-size:14px;line-height:1.5;opacity:.85}.cf-index-card em{display:inline-block;font-style:normal;font-size:12px;margin-top:16px;opacity:.7}@media (max-width:900px){.cf-inbox{grid-template-columns:1fr}.cf-inbox-list,.cf-inbox-side{display:none}.cf-inbox-read{margin:10px;border-radius:14px}.cf-demo-label{display:none}}