.cs-hero-scene,.cs-connection-scene { position: relative; isolation: isolate; min-width: 0; background: transparent; color: #333A36; }
.cs-hero-scene { aspect-ratio: 1/1.1; width: 100%; overflow: clip; }
.cs-connection-scene { width: 100%; height: clamp(400px,40vw,540px); overflow: clip; }
.cs-h-canvas,.cs-c-canvas { position: absolute; inset: 0; }
.cs-window { position: absolute; background: #FCFDFC; border: 1px solid #D0D8CD; border-radius: 11px; overflow: hidden; box-shadow: 0 15px 38px -24px #28322649,0 1px 3px #2832260D; font-family: "Segoe UI",Arial,sans-serif; }
.cs-window svg { width: 15px; height: 15px; stroke-width: 1.5; }
.cs-chrome { display: flex; align-items: center; gap: 9px; height: 35px; padding: 0 12px; font-size: 10px; }
.cs-chrome > strong { font-size: 11px; font-weight: 600; white-space: nowrap; }
.cs-chrome > i { font-style: normal; margin-left: auto; color: inherit; }
.cs-office-mark { width: 19px; height: 20px; display: grid; place-items: center; flex-shrink: 0; color: #FCFDFC; font-weight: 600; font-size: 12px; border-radius: 3px; }
.cs-outlook-chrome { background: #F1F4F8; color: #1568AB; border-bottom: 1px solid #E2E8ED; }
.cs-outlook-mark { background: #1477C7; box-shadow: 3px 2px 0 #70ADE0; }
.cs-excel-chrome { background: #107C41; color: #F4FAF6; }
.cs-excel-mark { background: #0A6032; box-shadow: 3px 2px 0 #299A58; }
.cs-teams-chrome { background: #F0F0F3; color: #464A51; border-bottom: 1px solid #E1E2E7; }
.cs-teams-mark { background: #5B5FC7; box-shadow: 3px 2px 0 #A9ABE7; }
.cs-search-silhouette { height: 16px; width: 32%; margin-left: auto; border-radius: 4px; border: 1px solid #DDE3E7; background: #FBFCFD; }
.cs-avatar-dot { height: 17px; width: 17px; flex-shrink: 0; border-radius: 50%; background: #DED8EA; margin-left: auto; }
.cs-command-strip { display: flex; align-items: center; gap: 15px; height: 28px; padding: 0 13px; background: #F8F9F8; border-bottom: 1px solid #E8EBE7; }
.cs-command-strip > span { height: 4px; width: 27px; background: #D2D8D4; border-radius: 2px; }
.cs-command-strip > .cs-command-active { width: 42px; height: 13px; background: #246FAA; border-radius: 3px; }
.cs-command-strip > i { font-style: normal; font-size: 13px; margin-left: auto; color: #78877E; }
.cs-excel-commands > .cs-command-active { height: 5px; width: 26px; background: #4C6D4D; }
.cs-graphic-line { display: block; height: 5px; width: 88%; background: #D1D8D3; border-radius: 2px; }
.cs-title-line { height: 7px; width: 72%; background: #87928B; }
.cs-line-medium { width: 73%; }.cs-line-short { width: 48%; }
.cs-app-rail { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 15px; border-right: 1px solid #E2E6E7; background: #F3F5F7; color: #7197B5; }
.cs-app-rail > svg:first-child { color: #1A6AAA; }.cs-app-rail > svg { width: 13px; height: 13px; }
.cs-mail-sidebar { min-width: 0; padding: 16px 9px; background: #F8FAFA; border-right: 1px solid #E9EDEE; }
.cs-nav-line { display: block; width: 75%; height: 4px; margin-bottom: 14px; background: #CED8DD; border-radius: 2px; }
.cs-nav-line.is-current { width: calc(100% + 8px); margin-left: -4px; height: 13px; background: #D9EAF7; border-radius: 3px; }
.cs-mail-sidebar > i { display: block; height: 15px; }
.cs-person-silhouette { width: 26px; height: 26px; border-radius: 50%; background: #E4DEEF; flex-shrink: 0; }

/* Handarbeit im Einstieg: kopieren, vergleichen, zurückfragen. */
.cs-h-brand-shape { position: absolute; width: 116%; max-width: none; height: auto; left: -9%; top: -6%; transform: rotate(-17deg); pointer-events: none; }
.cs-h-pencil { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 6; fill: none; stroke: #222629; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cs-pencil-loop,.cs-pencil-head { opacity: .8; }
.cs-pencil-circle { stroke: #C7E64C; stroke-width: 2.3; opacity: 0; transform: rotate(2deg); transform-origin: 440px 290px; transition: opacity .5s; }
[data-cs-step="3"] .cs-pencil-circle,[data-cs-step="4"] .cs-pencil-circle { opacity: .9; }
.cs-h-outlook { top: 9%; left: 3%; width: 81%; height: 43%; z-index: 2; transform: rotate(-6deg); transform-origin: 45% 60%; box-shadow: 0 23px 38px -24px #22262960,0 1px 2px #2226290A; }
.cs-mail-workspace { display: grid; grid-template-columns: 29px 20% minmax(0,1fr); height: calc(100% - 63px); }
.cs-mail-reading { padding: 17px 18px 13px; min-width: 0; }
.cs-mail-reading > .cs-graphic-line:not(.cs-title-line) { margin-top: 8px; height: 4px; }
.cs-sender-silhouette { display: flex; align-items: center; gap: 7px; margin: 12px 0 15px; }
.cs-sender-silhouette > i { width: 20px; height: 20px; border-radius: 50%; background: #E2DFEB; }
.cs-sender-silhouette > span { height: 4px; width: 45%; border-radius: 2px; background: #A2ACA6; }
.cs-h-copy-source { display: flex; align-items: center; gap: 10px; width: 85%; padding: 5px 6px; margin-top: 12px; background: #D9EAF9; border: 1px solid #B3D3EE; }
.cs-h-copy-source > span { height: 4px; width: 56%; border-radius: 1px; background: #739BBA; }.cs-h-copy-source > span:last-child { width: 24%; }
.cs-attachment-silhouette { display: flex; align-items: center; gap: 7px; width: 71%; padding: 6px 7px; margin-top: 11px; border: 1px solid #E0E4E0; border-radius: 4px; background: #F8F9F7; }
.cs-attachment-silhouette > svg { width: 12px; height: 12px; color: #8E9891; }.cs-attachment-silhouette > span { height: 3px; width: 69%; background: #B9C3BC; border-radius: 1px; }
.cs-h-excel-old { top: 43%; right: 5%; width: 66%; height: 30%; transform: rotate(8deg); z-index: 3; }
.cs-h-excel-old .cs-chrome { height: 30px; background: #5B866B; }.cs-h-excel-old .cs-office-mark { width: 15px; height: 16px; font-size: 10px; background: #547B61; box-shadow: none; }
.cs-file-caption { font-size: 9px; color: inherit; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-old-grid { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(4,1fr); height: calc(100% - 30px); opacity: .45; }
.cs-old-grid > i { border-right: 1px solid #D9DFD6; border-bottom: 1px solid #D9DFD6; }.cs-old-grid > i:nth-child(5),.cs-old-grid > i:nth-child(8) { background: #E8EDE5; }
.cs-h-excel { top: 51%; right: 4%; width: 73%; height: 33%; z-index: 4; transform: rotate(2deg); box-shadow: 0 22px 40px -21px #22262966,0 1px 3px #2226290D; }
.cs-h-excel .cs-chrome { height: 31px; }.cs-h-excel .cs-command-strip { height: 24px; }
.cs-formula-silhouette { display: flex; align-items: center; height: 25px; gap: 10px; border-bottom: 1px solid #DCE2D9; padding: 0 10px; }
.cs-formula-silhouette > span { height: 4px; width: 17px; background: #C0C9BC; border-radius: 1px; margin-right: 2px; }.cs-formula-silhouette > i { font-size: 10px; color: #9AA594; }.cs-formula-silhouette > b { height: 4px; width: 35%; border-radius: 1px; background: #C4CDC0; }
.cs-sheet-grid { height: calc(100% - 101px); min-height: 78px; display: grid; grid-template-rows: 17px repeat(4,1fr); }
.cs-sheet-row,.cs-sheet-letters { display: grid; grid-template-columns: 19px 1.05fr 1.3fr 1fr; min-height: 0; }
.cs-sheet-row > span,.cs-sheet-row > i,.cs-sheet-letters > span,.cs-sheet-letters > i { position: relative; min-width: 0; border-right: 1px solid #DCE2D9; border-bottom: 1px solid #DCE2D9; }
.cs-sheet-row > i,.cs-sheet-letters { background: #F0F3ED; }
.cs-sheet-letters > span { display: grid; place-items: center; font-size: 7px; color: #87917F; }
.cs-sheet-row > span { display: flex; align-items: center; padding: 3px 8px; }
.cs-sheet-row > span > b { width: 63%; height: 3px; background: #C3CCC0; border-radius: 1px; }.cs-sheet-row > span:nth-child(3) > b { width: 76%; }.cs-sheet-row > span:last-child > b { width: 43%; }
.cs-h-paste-row > span:nth-child(3) { outline: 1.5px solid #217346; outline-offset: -1.5px; }
.cs-h-paste-row > span > b { opacity: 0; transform: translateY(3px); transition: transform .4s var(--ease),opacity .4s; }
.cs-h-paste-row em { position: absolute; width: 4px; height: 4px; bottom: -1px; right: -1px; background: #217346; }
[data-cs-step="2"] .cs-h-paste-row > span > b,[data-cs-step="3"] .cs-h-paste-row > span > b,[data-cs-step="4"] .cs-h-paste-row > span > b { opacity: 1; transform: none; }
[data-cs-step="3"] .cs-h-excel-old,[data-cs-step="4"] .cs-h-excel-old { transform: rotate(8deg) translateY(-5px); }
.cs-h-excel-old { transition: transform .6s var(--ease); }
.cs-sheet-bottom { display: flex; align-items: center; height: 21px; gap: 12px; padding: 0 12px; background: #F5F7F2; font-size: 11px; color: #A0AC95; }
.cs-sheet-bottom > b { align-self: stretch; width: 43px; border-bottom: 2px solid #217346; background: #FDFEFB; }.cs-sheet-bottom > span:last-child { width: 30px; height: 3px; background: #D4DCCF; border-radius: 1px; }
.cs-h-teams { left: 5%; bottom: 3%; width: 53%; min-height: 99px; z-index: 5; opacity: .6; transform: translateY(7px) rotate(-5deg); transition: opacity .5s,transform .6s var(--ease); box-shadow: 0 14px 30px -19px #22262960; }
.cs-h-teams .cs-chrome { height: 29px; }.cs-h-teams .cs-office-mark { width: 16px; height: 17px; font-size: 10px; }
.cs-h-team-message { display: flex; gap: 8px; padding: 10px 13px 0; }.cs-h-team-message > div { min-width: 0; flex: 1; }.cs-h-team-message .cs-person-silhouette { width: 23px; height: 23px; }.cs-h-team-message .cs-graphic-line { height: 3px; width: 38%; background: #C6C4CF; margin-bottom: 6px; }
.cs-h-team-message p { padding: 7px 9px; border-radius: 3px 9px 9px 9px; background: #F0EEF5; color: #555260; font-size: 11px; line-height: 1.2; opacity: 0; transform: translateY(5px); transition: opacity .45s,transform .45s var(--ease); }
.cs-chat-compose { height: 22px; margin: 7px 13px 10px; border: 1px solid #E6E5EA; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; }.cs-chat-compose > span { width: 47%; height: 3px; background: #E0DEE6; border-radius: 1px; }.cs-chat-compose > svg { width: 11px; height: 11px; color: #9B96B0; }
[data-cs-step="3"] .cs-h-teams,[data-cs-step="4"] .cs-h-teams { opacity: 1; transform: rotate(-5deg); }
[data-cs-step="3"] .cs-h-team-message p,[data-cs-step="4"] .cs-h-team-message p { opacity: 1; transform: none; }
.cs-h-cursor { position: absolute; top: 0; left: 0; z-index: 8; opacity: 1; transform: translate(var(--cs-from-x,170px),var(--cs-from-y,140px)); transition: transform .75s var(--ease),opacity .3s; }
.cs-h-cursor > svg { width: 22px; height: 27px; fill: #2C3530; stroke: #FAFCF8; stroke-width: 1.2; }.cs-h-cursor > span { position: absolute; left: 17px; top: 18px; width: 12px; height: 12px; border-radius: 3px; background: #FAFCF8; border: 1px solid #84907D; opacity: 0; }.cs-h-cursor > span:before { content: ''; position: absolute; left: 3px; top: -4px; width: 8px; height: 9px; border: 1px solid #84907D; border-radius: 2px; background: #FAFCF8; }
[data-cs-step="1"] .cs-h-cursor { transform: translate(var(--cs-mid-x,230px),var(--cs-mid-y,220px)); }[data-cs-step="1"] .cs-h-cursor > span { opacity: 1; }
[data-cs-step="2"] .cs-h-cursor,[data-cs-step="3"] .cs-h-cursor,[data-cs-step="4"] .cs-h-cursor { transform: translate(var(--cs-to-x,270px),var(--cs-to-y,330px)); }[data-cs-step="3"] .cs-h-cursor,[data-cs-step="4"] .cs-h-cursor { opacity: 0; }
.cs-h-duplicate { position: absolute; z-index: 7; left: 12%; top: 62%; width: 49px; height: 56px; background: #F7F8F4; border: 1px solid #C4CBBF; border-radius: 6px; transform: rotate(-12deg); }
.cs-h-duplicate:before { content: ''; position: absolute; inset: 5px -5px -5px 5px; border: 1px solid #CAD4C3; background: #EEF2E9; border-radius: 6px; z-index: -1; }.cs-h-duplicate > i { display: block; width: 54%; height: 3px; margin: 17px auto 0; border-radius: 1px; background: #AFBCA4; }.cs-h-duplicate > i:last-child { width: 38%; margin: 6px 0 0 11px; }

/* Wechselnde Arbeitsabläufe auf der offenen dunklen Bühne. */
.cs-connection-scene { --cs-head-height: 36px; outline: none; }
.cs-connection-scene:focus-visible { outline: 1px solid #C7E64C; outline-offset: 6px; border-radius: 18px; }
.cs-c-brand-form { position: absolute; width: 47%; max-width: none; height: auto; left: 27%; top: -14%; transform: rotate(23deg); opacity: .055; pointer-events: none; }
.cs-routes { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #C7E64C; stroke-width: 2.2; fill: none; z-index: 1; stroke-linecap: round; stroke-linejoin: round; }
.cs-routes-narrow { display: none; }.cs-route-secondary,.cs-route-secondary-tip { stroke: #D9DEDA; stroke-width: 1.7; opacity: .7; }.cs-route-secondary { stroke-dasharray: 7 7; }.cs-route-update,.cs-route-update-tip { stroke: #9CAE83; stroke-width: 1.7; }
.cs-c-source-stack { position: absolute; top: 9%; left: 4%; width: 32%; height: 44%; z-index: 3; transform: rotate(-4deg); }
.cs-c-aux-stack { position: absolute; left: 9%; bottom: 7%; width: 23%; height: 29%; z-index: 2; transform: rotate(-8deg); }
.cs-c-target-stack { position: absolute; right: 4%; top: 14%; width: 30%; height: 48%; z-index: 3; transform: rotate(3deg); }
.cs-c-update-stack { position: absolute; right: 7%; bottom: 6%; width: 27%; height: 23%; z-index: 4; opacity: 0; transform: translateY(12px) rotate(-3deg); transition: opacity .4s,transform .65s var(--ease); }
.cs-app-window { inset: 0; opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none; transition: opacity .45s,transform .65s var(--ease); }
.cs-app-window.is-active { opacity: 1; transform: none; }
.cs-tool-head { display: flex; align-items: center; gap: 9px; height: var(--cs-head-height); padding: 0 12px; border-bottom: 1px solid #E9EBE8; background: #F8F9F7; }
.cs-tool-head > strong { font-size: 12px; font-weight: 600; line-height: 1; color: #3F4547; white-space: nowrap; }.cs-tool-head > i { margin-left: auto; font-size: 13px; font-style: normal; color: #91999B; }
.cs-tool-search { margin-left: auto; height: 13px; width: 26%; border: 1px solid #E2E6E7; border-radius: 4px; background: #FFFFFF80; }
.cs-tool-mark { stroke: none; width: 20px !important; height: 20px !important; flex: 0 0 20px; }.cs-app-slack .cs-tool-mark { stroke-width: 4; stroke-linecap: round; }
.cs-head-gmail { background: #F5F8FD; }.cs-head-slack { background: #FAF7FB; }.cs-head-notion { background: #FAFAF8; }.cs-head-trello { background: #EAF2FD; }.cs-head-hubspot { background: #F8FAFC; }.cs-head-drive { background: #F6F9FC; }.cs-head-asana { background: #FBF7F6; }.cs-head-outlook { background: #EFF5FB; }.cs-head-excel { background: #107C41; }.cs-head-excel > strong,.cs-head-excel > i { color: #FFF; }.cs-head-excel .cs-tool-search { opacity: .3; }
.cs-mark-notion { display: block; object-fit: contain; border: 0; border-radius: 0; background: transparent; }.cs-mark-outlook,.cs-mark-excel { display: grid; place-items: center; border-radius: 3px; background: #1477C7; color: #FFF; font-size: 13px; font-weight: 600; box-shadow: 3px 1px 0 #83B6DF; }.cs-mark-excel { background: #0A6032; box-shadow: 3px 1px 0 #299A58; }
.cs-stroke { display: block; height: 4px; width: 84%; border-radius: 2px; background: #CAD2CF; }.cs-stroke-title { width: 72%; height: 6px; background: #8C9890; }
.cs-mail-mini { display: grid; grid-template-columns: 24% minmax(0,1fr); height: calc(100% - var(--cs-head-height)); background: #F6F8FC; }.cs-mail-mini > aside { padding: 15px 10px; }.cs-mail-mini > aside > b { display: block; height: 22px; border-radius: 7px; background: #C3E4FB; margin-bottom: 19px; }.cs-mail-mini > aside .cs-stroke { height: 3px; margin-bottom: 13px; background: #CCD6E2; }.cs-mail-outlook > aside { background: #F0F5F8; }.cs-mail-outlook > aside > b { height: 16px; background: #BAD8EF; border-radius: 3px; }
.cs-inbox-list { display: grid; grid-template-rows: repeat(4,1fr); padding: 7px; background: #FFF; min-height: 0; }
.cs-inbox-row { position: relative; display: grid; grid-template-columns: 10px 1fr; gap: 6px; align-content: center; border-bottom: 1px solid #EEF0F1; padding: 6px; }.cs-inbox-row > i { width: 7px; height: 7px; border: 1px solid #AEBAC4; border-radius: 2px; grid-row: 1/3; align-self: center; }.cs-inbox-row > span,.cs-inbox-row > b { display: block; width: 60%; height: 3px; border-radius: 1px; background: #AFBCC6; }.cs-inbox-row > b { width: 86%; background: #D5DDE3; }.cs-inbox-row.cs-source-pick { background: #E8F0FC; border-radius: 4px; }.cs-inbox-row > svg { position: absolute; top: calc(50% - 7px); right: 8px; color: #408459; width: 14px; height: 14px; opacity: 0; transform: scale(.5); transition: opacity .3s,transform .45s var(--ease); }
.cs-slack-mini { display: grid; grid-template-columns: 24% minmax(0,1fr); height: calc(100% - var(--cs-head-height)); }.cs-slack-mini > aside { background: #43264B; padding: 17px 10px; }.cs-slack-mini > aside > b { display: block; height: 6px; width: 73%; background: #D0BFD7; border-radius: 2px; margin-bottom: 18px; }.cs-slack-mini > aside .cs-stroke { margin-bottom: 13px; height: 3px; background: #967C9F; }.cs-slack-thread { position: relative; padding: 12px 11px 28px; min-width: 0; }.cs-chat-line { display: flex; gap: 7px; margin-bottom: 12px; }.cs-chat-line > i { width: 19px; height: 19px; flex: 0 0 19px; background: #D8CBE5; border-radius: 4px; }.cs-chat-line > div { flex: 1; min-width: 0; }.cs-chat-line .cs-stroke { height: 3px; margin-top: 3px; }.cs-chat-line .cs-stroke + .cs-stroke { margin-top: 6px; background: #DCE0DD; width: 68%; }.cs-chat-document { display: flex; gap: 7px; align-items: center; padding: 7px; border: 1px solid #DFE3E2; border-radius: 4px; margin-top: 8px; background: #F8FAF8; }.cs-chat-document > svg { color: #9AA9B8; flex-shrink: 0; }.cs-chat-document > span { width: 49%; height: 3px; background: #CBD3D9; }.cs-chat-document > svg:last-child { color: #408459; margin-left: auto; opacity: 0; transform: scale(.5); transition: opacity .3s,transform .45s var(--ease); }.cs-chat-composer { position: absolute; height: 22px; left: 11px; right: 11px; bottom: 10px; border: 1px solid #E1E3E0; border-radius: 4px; padding: 8px; }.cs-chat-composer .cs-stroke { height: 3px; width: 51%; background: #D9DDDA; }
.cs-c-aux-stack { --cs-head-height: 30px; }.cs-c-aux-stack .cs-tool-head > strong { font-size: 10px; }.cs-c-aux-stack .cs-tool-mark { height: 17px !important; width: 17px !important; flex-basis: 17px; }.cs-c-aux-stack .cs-tool-search { display: none; }
.cs-aux-sheet { display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(4,1fr); height: calc(100% - var(--cs-head-height)); }.cs-aux-sheet > i { position: relative; border-bottom: 1px solid #DDE5D7; border-right: 1px solid #DDE5D7; }.cs-aux-sheet > i:after { content: ''; position: absolute; width: 42%; height: 3px; border-radius: 1px; background: #C7D3BF; top: calc(50% - 1px); left: 17%; }.cs-aux-sheet > i:nth-child(-n+4) { background: #E5EDDE; }.cs-aux-sheet > i:nth-child(7) { outline: 1.5px solid #398353; outline-offset: -1.5px; }
.cs-aux-files { padding: 16px 19px; }.cs-mini-folder { position: relative; display: block; width: 28px; height: 20px; border-radius: 3px; background: #E7C969; }.cs-mini-folder:before { content: ''; position: absolute; left: 0; top: -4px; height: 5px; width: 13px; border-radius: 2px 3px 0 0; background: inherit; }.cs-aux-files > div { display: flex; gap: 14px; margin-top: 12px; color: #7B9AC9; }.cs-aux-files > .cs-stroke { margin-top: 11px; height: 3px; width: 66%; }.cs-aux-note { padding: 14px 20px; }.cs-aux-note > b { display: block; height: 13px; width: 12px; border: 1px solid #A8B2A0; border-radius: 2px; margin-bottom: 9px; }.cs-aux-note > .cs-stroke { height: 3px; margin: 6px 0; }.cs-aux-note > div { display: flex; gap: 7px; align-items: center; margin-top: 10px; }.cs-aux-note > div > svg { color: #6E9060; height: 12px; width: 12px; }.cs-aux-note > div > .cs-stroke { height: 3px; width: 50%; }
.cs-ki-pass { position: absolute; left: 43%; top: 60%; width: 12%; height: 21%; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid #68765D; background: #2B3230; border-radius: 18px; color: #F7F8F4; transform: rotate(-5deg); }
.cs-ki-pass > span { font-size: 13px; font-weight: 500; }.cs-ki-pages { position: relative; height: 29px; width: 25px; }.cs-ki-pages > span { display: block; position: absolute; width: 21px; height: 25px; border: 1px solid #BCC9AD; border-radius: 4px; background: #F5F8F0; top: 0; left: 0; }.cs-ki-pages > span:nth-child(2) { left: 4px; top: 4px; }.cs-ki-pages > span:nth-child(3) { left: 8px; top: 8px; background: #C7E64C; border-color: #B1CE42; transition: transform .5s var(--ease); }
.cs-notion-mini { height: calc(100% - var(--cs-head-height)); display: grid; grid-template-columns: 22% minmax(0,1fr); }.cs-notion-mini > aside { padding: 20px 10px; background: #F4F4F0; border-right: 1px solid #ECEDE8; }.cs-notion-mini > aside .cs-stroke { height: 3px; margin-bottom: 15px; }.cs-notion-content { padding: 16px 18px 12px; min-width: 0; position: relative; }.cs-page-symbol { display: block; width: 15px; height: 18px; border: 1px solid #BAC5AD; border-radius: 3px; background: #EEF3E8; margin-bottom: 10px; }.cs-task-list { margin-top: 14px; }.cs-task-row { display: flex; align-items: center; gap: 8px; min-height: 24px; border-bottom: 1px solid #E8EBE4; opacity: .23; transform: translateY(5px); transition: opacity .4s,transform .5s var(--ease); }.cs-task-tick { display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid #B6C7AD; border-radius: 3px; background: #ECF3E5; flex-shrink: 0; }.cs-task-tick > svg { width: 10px; height: 10px; color: #4E813B; opacity: 0; transform: scale(.4); transition: opacity .3s,transform .4s var(--ease); }.cs-task-row > .cs-stroke { height: 3px; width: 59%; }.cs-owner-avatar { display: block; height: 15px; width: 15px; border-radius: 50%; background: #D8C7B9; border: 2px solid #F8F9F6; flex-shrink: 0; }.cs-task-row .cs-owner-avatar { margin-left: auto; opacity: 0; transform: translateX(6px); transition: opacity .3s,transform .4s var(--ease); }.cs-task-row:nth-child(2) .cs-owner-avatar { background: #BFD3D8; }.cs-task-row:nth-child(3) .cs-owner-avatar { background: #CAC2DA; }
.cs-result-label { position: absolute; display: inline-flex; gap: 5px; align-items: center; right: 14px; bottom: 10px; padding: 4px 7px; border-radius: 5px; background: #E5F0DE; color: #3E6C30; font-size: 10px; font-weight: 600; line-height: 1; opacity: 0; transform: translateY(7px); transition: opacity .35s,transform .45s var(--ease); }.cs-result-label > svg { height: 12px; width: 12px; stroke-width: 2; }
.cs-board-mini { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px 12px 35px; height: calc(100% - var(--cs-head-height)); background: #DCE9F8; }.cs-board-col { padding: 10px 8px; border-radius: 6px; background: #F1F4F8; min-width: 0; }.cs-board-col > .cs-stroke { width: 60%; height: 4px; background: #A3B1C4; }.cs-board-ghost { margin-top: 13px; border: 1px dashed #C4CED9; border-radius: 4px; padding: 13px 7px; opacity: .5; }.cs-board-ghost > .cs-stroke { height: 3px; margin: 5px 0; }.cs-board-small { padding: 13px 7px; margin-top: 9px; border: 1px solid #DFE5EC; border-radius: 4px; background: #FFF; }.cs-board-small .cs-stroke { height: 3px; }.cs-board-done { position: relative; background: #EEF4EF; }.cs-board-check { position: absolute; bottom: 10px; right: 9px; color: #5F8C62; opacity: .5; }.cs-board-check > svg { width: 21px; height: 21px; }
.cs-board-moving { position: absolute; top: 29%; left: 5%; width: 40%; min-height: 66px; padding: 10px; border: 1px solid #D2DBE8; border-radius: 5px; background: #FFF; box-shadow: 0 6px 12px #334B6612; opacity: 0; transform: translate(0,-6px) rotate(-3deg); transition: opacity .35s,transform .8s var(--ease); }.cs-board-moving > i { display: block; height: 5px; width: 32%; border-radius: 2px; background: #91B9EA; margin-bottom: 8px; }.cs-board-moving > .cs-stroke { height: 3px; margin-bottom: 5px; }.cs-board-moving > div { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }.cs-board-moving > div > svg { width: 13px; height: 13px; color: #4F8455; opacity: 0; transform: scale(.5); transition: opacity .3s,transform .4s var(--ease); }
.cs-crm-mini { height: calc(100% - var(--cs-head-height)); padding: 11px 13px; background: #FBFCFD; }.cs-crm-tools { display: flex; align-items: center; gap: 10px; height: 18px; margin-bottom: 7px; }.cs-crm-tools > span { height: 3px; width: 27px; border-radius: 1px; background: #BFCBD7; }.cs-crm-tools > b { margin-left: auto; height: 13px; width: 33px; border-radius: 3px; background: #F3A48E; }.cs-crm-list { border: 1px solid #E2E8EF; border-radius: 4px; overflow: hidden; }.cs-crm-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 8px; border-bottom: 1px solid #E5EBF0; }.cs-crm-row:last-child { border-bottom: 0; }.cs-crm-row > i { width: 18px; height: 18px; border-radius: 50%; background: #DCE4EE; flex-shrink: 0; }.cs-crm-row > div { flex: 1; min-width: 0; }.cs-crm-row .cs-stroke { height: 3px; margin: 3px 0; background: #BDC9D5; }.cs-crm-row .cs-stroke + .cs-stroke { width: 61%; background: #D8E0E6; }.cs-crm-owner { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #E3D4CD; color: #967665; flex-shrink: 0; }.cs-crm-owner > svg { width: 12px; height: 12px; }.cs-crm-row > b { display: grid; place-items: center; color: #59926F; }.cs-crm-row > b > svg { width: 13px; height: 13px; }.cs-crm-new { background: #EFF6EF; opacity: .2; transform: translateX(-12px); transition: opacity .4s,transform .65s var(--ease); }.cs-crm-new > .cs-crm-owner,.cs-crm-new > b { opacity: 0; transform: scale(.5); transition: opacity .3s,transform .5s var(--ease); }
.cs-crm-current { display: flex; align-items: center; gap: 12px; margin-top: 11px; }.cs-crm-current > span { width: 52%; height: 4px; border-radius: 3px; background: #E0E8DD; overflow: hidden; }.cs-crm-current > span > i { display: block; height: 100%; width: 100%; background: #7DA16A; transform: scaleX(.18); transform-origin: left; transition: transform .7s var(--ease); }.cs-crm-current > b { display: flex; align-items: center; gap: 4px; margin-left: auto; color: #4F7D45; font-size: 10px; opacity: 0; transform: translateX(-5px); transition: opacity .3s,transform .45s var(--ease); }.cs-crm-current > b > svg { width: 12px; height: 12px; }
.cs-drive-mini { height: calc(100% - var(--cs-head-height)); display: grid; grid-template-columns: 22% minmax(0,1fr); background: #F8FAFD; }.cs-drive-mini > aside { padding: 20px 9px; border-right: 1px solid #E7EDF5; }.cs-drive-mini > aside > .cs-stroke { height: 3px; margin-bottom: 15px; background: #C9D5E3; }.cs-drive-content { position: relative; padding: 16px 14px 37px; }.cs-drive-location { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; }.cs-drive-location > .cs-mini-folder { width: 22px; height: 16px; flex-shrink: 0; }.cs-drive-location > .cs-stroke { width: 47%; height: 4px; background: #A9B8C9; }.cs-drive-files { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; min-height: 74px; height: 57%; }.cs-drive-file { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; padding: 11px 8px; border: 1px solid #D7E3F0; border-radius: 6px; background: #EFF5FC; opacity: .2; transform: translateY(14px) rotate(-4deg); transition: opacity .4s,transform .65s var(--ease); }.cs-drive-file > svg { width: 21px; height: 21px; color: #6F9CD2; }.cs-drive-file > .cs-stroke { height: 3px; background: #BACDE3; }.cs-drive-file > b { position: absolute; display: grid; place-items: center; height: 15px; width: 15px; right: -4px; top: -4px; border: 1px solid #D6E4D0; border-radius: 50%; background: #EAF3E5; color: #5A8947; opacity: 0; transform: scale(.3); transition: opacity .3s,transform .4s var(--ease); }.cs-drive-file > b > svg { width: 10px; height: 10px; }
.cs-c-update-stack { --cs-head-height: 29px; }.cs-c-update-stack .cs-tool-head > strong { font-size: 10px; }.cs-c-update-stack .cs-tool-mark { width: 16px !important; height: 16px !important; flex-basis: 16px; }.cs-c-update-stack .cs-tool-search { display: none; }.cs-notice-body { display: flex; gap: 9px; padding: 12px 14px; }.cs-notice-body > div { flex: 1; min-width: 0; }.cs-notice-body .cs-stroke { margin-top: 3px; height: 3px; width: 73%; background: #C5CCC8; }.cs-notice-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #E5F0DD; color: #558344; flex-shrink: 0; }.cs-notice-avatar > svg { width: 14px; height: 14px; }.cs-notice-result { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 4px; margin-top: 8px; background: #F0F5EB; color: #5A784C; font-size: 10px; line-height: 1; }.cs-notice-result > svg { height: 11px; width: 11px; }
.cs-connection-scene:is([data-cs-step="2"],[data-cs-step="3"],[data-cs-step="4"]) :is(.cs-inbox-row > svg,.cs-chat-document > svg:last-child) { opacity: 1; transform: none; }
.cs-connection-scene:is([data-cs-step="2"],[data-cs-step="3"],[data-cs-step="4"]) :is(.cs-arrive-1,.cs-crm-new) { opacity: 1; transform: none; }
.cs-connection-scene:is([data-cs-step="3"],[data-cs-step="4"]) :is(.cs-arrive-2,.cs-crm-new > .cs-crm-owner,.cs-task-row .cs-owner-avatar) { opacity: 1; transform: none; }
.cs-connection-scene[data-cs-step="2"] .cs-board-moving { opacity: 1; transform: rotate(-3deg); }
.cs-connection-scene:is([data-cs-step="3"],[data-cs-step="4"]) .cs-board-moving { opacity: 1; transform: translateX(124%); }
.cs-connection-scene[data-cs-step="2"] .cs-ki-pages > span:nth-child(3) { transform: translateY(-4px) rotate(5deg); }
.cs-connection-scene[data-cs-step="4"] :is(.cs-arrive-3,.cs-task-tick > svg,.cs-result-label,.cs-board-moving > div > svg,.cs-crm-new > b,.cs-crm-current > b,.cs-drive-file > b) { opacity: 1; transform: none; }
.cs-connection-scene[data-cs-step="4"] .cs-crm-current > span > i { transform: scaleX(1); }
.cs-connection-scene[data-cs-step="4"] .cs-c-update-stack { opacity: 1; transform: rotate(-3deg); }
.cs-transfer-piece { position: absolute; left: 0; top: 0; z-index: 6; display: flex; flex-direction: column; gap: 4px; justify-content: center; width: 26px; height: 32px; padding: 6px; border: 1px solid #B4C875; border-radius: 5px; background: #C7E64C; opacity: 0; transform: translate(var(--cs-from-x,300px),var(--cs-from-y,160px)) scale(.85); transition: transform .8s var(--ease),opacity .3s; }.cs-transfer-piece > i { width: 100%; height: 2px; background: #93A95D; border-radius: 1px; }.cs-transfer-piece > i:last-child { width: 62%; }
.cs-connection-scene[data-cs-step="0"] .cs-transfer-piece { transition: none; }
[data-cs-step="1"] .cs-direct-piece { opacity: 1; transform: translate(var(--cs-mid-x,550px),var(--cs-mid-y,175px)) scale(1); }[data-cs-step="2"] .cs-direct-piece,[data-cs-step="3"] .cs-direct-piece,[data-cs-step="4"] .cs-direct-piece { opacity: 0; transform: translate(var(--cs-to-x,850px),var(--cs-to-y,200px)) scale(.7); }
[data-cs-step="2"] .cs-ai-piece { opacity: 1; transform: translate(var(--cs-ki-x,550px),var(--cs-ki-y,300px)) scale(1); }[data-cs-step="3"] .cs-ai-piece { opacity: 1; transform: translate(var(--cs-to-x,850px),var(--cs-to-y,200px)) scale(.85); }[data-cs-step="4"] .cs-ai-piece { opacity: 0; transform: translate(var(--cs-to-x,850px),var(--cs-to-y,200px)) scale(.55); }
@media(max-width:1100px) {
 .cs-connection-scene { --cs-head-height: 33px; }.cs-tool-head { gap: 7px; padding-inline: 10px; }.cs-tool-head > strong { font-size: 11px; }.cs-c-source-stack { width: 32%; }.cs-c-target-stack { width: 31%; right: 3%; }.cs-c-aux-stack { left: 8%; --cs-head-height: 28px; }.cs-tool-mark { height: 18px !important; width: 18px !important; flex-basis: 18px; }.cs-ki-pass { width: 13%; left: 42%; gap: 10px; border-radius: 16px; }.cs-ki-pass > span { font-size: 12px; }.cs-ki-pages { transform: scale(.8); transform-origin: center; }.cs-c-update-stack { right: 6%; width: 28%; }.cs-notion-content { padding: 13px 14px; }.cs-page-symbol { width: 13px; height: 15px; margin-bottom: 8px; }.cs-task-list { margin-top: 10px; }.cs-task-row { min-height: 22px; }.cs-result-label { font-size: 9px; bottom: 9px; padding: 3px 6px; }.cs-crm-mini { padding: 9px 11px; }.cs-crm-row { min-height: 31px; padding: 6px; gap: 6px; }.cs-crm-current { margin-top: 8px; }.cs-drive-content { padding: 14px 12px 32px; }.cs-drive-files { min-height: 66px; }.cs-drive-file { padding: 9px 6px; }.cs-notice-body { padding: 10px 12px; }.cs-notice-result { margin-top: 7px; }
}
@media(max-width:760px) and (min-width:581px) {
 .cs-connection-scene { height: 400px; --cs-head-height: 30px; }.cs-c-source-stack { top: 13%; left: 3%; width: 33%; height: 45%; }.cs-c-target-stack { top: 17%; right: 3%; width: 32%; height: 49%; }.cs-c-aux-stack { width: 25%; left: 6%; bottom: 8%; height: 27%; --cs-head-height: 26px; }.cs-tool-head { gap: 6px; padding-inline: 8px; }.cs-tool-head > strong { font-size: 10px; }.cs-tool-search { display: none; }.cs-tool-mark { height: 16px !important; width: 16px !important; flex-basis: 16px; }.cs-mail-mini > aside { padding: 13px 7px; }.cs-inbox-list { padding: 4px; }.cs-inbox-row { padding: 5px; grid-template-columns: 7px 1fr; gap: 5px; }.cs-inbox-row > i { height: 6px; width: 6px; }.cs-inbox-row > b,.cs-inbox-row > span { height: 2px; }.cs-slack-mini > aside { padding-inline: 7px; }.cs-slack-thread { padding: 11px 7px 28px; }.cs-chat-line { gap: 5px; }.cs-chat-line > i { width: 14px; height: 14px; flex-basis: 14px; }.cs-chat-document { padding: 5px; gap: 4px; }.cs-chat-document > svg { width: 11px; height: 11px; }.cs-aux-files,.cs-aux-note { padding: 13px; }.cs-aux-files > div { gap: 10px; margin-top: 10px; }.cs-ki-pass { top: 60%; left: 41%; width: 15%; height: 20%; gap: 7px; }.cs-ki-pass > span { font-size: 11px; }.cs-ki-pages { width: 22px; }.cs-notion-mini > aside { padding-inline: 7px; }.cs-notion-content { padding: 12px 10px; }.cs-task-row { gap: 5px; }.cs-task-row > .cs-stroke { width: 52%; }.cs-owner-avatar { width: 13px; height: 13px; }.cs-board-mini { padding: 12px 9px 33px; gap: 7px; }.cs-board-col { padding: 9px 6px; }.cs-board-moving { padding: 8px; left: 6%; width: 39%; min-height: 63px; }.cs-crm-mini { padding: 9px; }.cs-crm-row > i { width: 14px; height: 14px; }.cs-crm-owner { width: 16px; height: 16px; }.cs-crm-row > b > svg { width: 10px; height: 10px; }.cs-crm-current { gap: 7px; }.cs-crm-current > b { font-size: 9px; }.cs-drive-mini > aside { padding-inline: 7px; }.cs-drive-content { padding: 13px 9px 33px; }.cs-drive-files { gap: 5px; }.cs-drive-file { padding: 8px 5px; }.cs-drive-file > svg { width: 17px; height: 17px; }.cs-c-update-stack { width: 29%; right: 4%; height: 23%; bottom: 7%; --cs-head-height: 26px; }.cs-notice-body { padding: 9px; gap: 6px; }.cs-notice-avatar { width: 20px; height: 20px; }.cs-notice-result { font-size: 9px; padding: 4px 5px; }
}
@media(max-width:580px) {
 .cs-connection-scene { height: 565px; --cs-head-height: 33px; }.cs-c-brand-form { width: 100%; left: -15%; top: 13%; transform: rotate(-17deg); opacity: .06; }.cs-routes { stroke-width: 1.7; }.cs-route-secondary,.cs-route-secondary-tip { stroke-width: 1.3; }.cs-routes-wide { display: none; }.cs-routes-narrow { display: block; }.cs-c-source-stack { top: 5%; left: 6%; width: 63%; height: 31%; }.cs-c-aux-stack { top: 23%; left: auto; right: 5%; bottom: auto; width: 39%; height: 20%; transform: rotate(8deg); z-index: 4; --cs-head-height: 28px; }.cs-c-target-stack { top: 49%; right: 6%; width: 65%; height: 30%; }.cs-tool-head > strong { font-size: 11px; }.cs-tool-search { width: 20%; }.cs-c-aux-stack .cs-tool-head { gap: 6px; padding-inline: 8px; }.cs-c-aux-stack .cs-tool-head > strong { font-size: 9px; }.cs-mail-mini > aside { padding: 14px 8px; }.cs-mail-mini > aside > b { height: 19px; margin-bottom: 15px; }.cs-mail-mini > aside .cs-stroke { margin-bottom: 11px; }.cs-inbox-list { padding: 5px; }.cs-inbox-row { padding: 5px; gap: 5px; }.cs-slack-mini > aside { padding: 16px 8px; }.cs-slack-thread { padding: 11px 9px 28px; }.cs-chat-line { margin-bottom: 10px; gap: 6px; }.cs-chat-line > i { height: 17px; width: 17px; flex-basis: 17px; }.cs-chat-document { padding: 5px; gap: 5px; }.cs-chat-composer { height: 19px; bottom: 8px; padding: 7px; }.cs-aux-files { padding: 13px 15px; }.cs-aux-files > div { margin-top: 10px; gap: 10px; }.cs-aux-files > .cs-stroke { margin-top: 8px; }.cs-aux-note { padding: 11px 15px; }.cs-aux-note > b { margin-bottom: 8px; height: 11px; width: 10px; }.cs-aux-note > div { margin-top: 8px; }.cs-ki-pass { left: 7%; top: 43%; width: 22%; height: 13%; flex-direction: column; gap: 3px; border-radius: 17px; }.cs-ki-pages { height: 27px; width: 27px; transform: scale(.8); }.cs-ki-pass > span { font-size: 10px; }.cs-notion-mini > aside { padding: 16px 8px; }.cs-notion-content { padding: 10px 13px 30px; }.cs-page-symbol { display: none; }.cs-task-list { margin-top: 9px; }.cs-task-row { min-height: 22px; gap: 7px; }.cs-result-label { bottom: 7px; right: 11px; font-size: 9px; }.cs-board-mini { padding: 10px 10px 29px; gap: 7px; }.cs-board-col { padding: 9px 7px; }.cs-board-ghost { margin-top: 10px; padding: 9px 6px; }.cs-board-small { padding: 10px 6px; margin-top: 7px; }.cs-board-moving { top: 28%; min-height: 58px; padding: 8px; }.cs-board-moving > i { margin-bottom: 6px; height: 4px; }.cs-board-moving > div { margin-top: 7px; }.cs-board-check { bottom: 7px; right: 7px; }.cs-board-check > svg { height: 16px; width: 16px; }.cs-crm-mini { padding: 7px 10px; }.cs-crm-tools { height: 13px; margin-bottom: 5px; }.cs-crm-row { min-height: 27px; padding: 5px 7px; gap: 6px; }.cs-crm-row > i { width: 15px; height: 15px; }.cs-crm-owner { width: 17px; height: 17px; }.cs-crm-row > b > svg { height: 11px; width: 11px; }.cs-crm-current { margin-top: 7px; }.cs-crm-current > b { font-size: 9px; }.cs-drive-mini > aside { padding: 16px 8px; }.cs-drive-content { padding: 13px 11px 30px; }.cs-drive-location { padding-bottom: 11px; }.cs-drive-files { min-height: 58px; height: 65%; gap: 7px; }.cs-drive-file { padding: 8px 6px; gap: 8px; }.cs-drive-file > svg { height: 18px; width: 18px; }.cs-c-update-stack { right: 9%; bottom: 3%; width: 57%; height: 17%; --cs-head-height: 28px; }.cs-notice-body { padding: 9px 12px; gap: 8px; }.cs-notice-avatar { height: 22px; width: 22px; }.cs-notice-result { margin-top: 7px; font-size: 9px; padding: 5px 6px; }.cs-transfer-piece { width: 22px; height: 28px; padding: 5px; gap: 3px; }
}
@media(max-width:380px) {
 .cs-connection-scene { height: 520px; --cs-head-height: 29px; }.cs-c-source-stack { left: 5%; width: 66%; height: 31%; }.cs-c-aux-stack { right: 5%; width: 42%; height: 24%; --cs-head-height: 27px; }.cs-c-target-stack { right: 5%; width: 67%; height: 31%; }.cs-tool-head { gap: 6px; padding-inline: 8px; }.cs-tool-head > strong { font-size: 10px; }.cs-tool-mark { width: 16px !important; height: 16px !important; flex-basis: 16px; }.cs-tool-search { display: none; }.cs-c-aux-stack .cs-tool-mark { width: 15px !important; height: 15px !important; flex-basis: 15px; }.cs-mail-mini > aside { padding: 13px 7px; }.cs-inbox-row { grid-template-columns: 7px 1fr; gap: 5px; padding: 5px; }.cs-inbox-row > i { width: 6px; height: 6px; }.cs-inbox-row > span,.cs-inbox-row > b { height: 2px; }.cs-inbox-row > svg { height: 11px; width: 11px; right: 6px; }.cs-slack-mini > aside { padding-inline: 7px; }.cs-slack-thread { padding: 10px 7px 24px; }.cs-chat-line > i { height: 14px; width: 14px; flex-basis: 14px; }.cs-chat-line .cs-stroke { height: 2px; }.cs-chat-document > svg { height: 11px; width: 11px; }.cs-chat-document > span { height: 2px; }.cs-ki-pass { left: 6%; width: 22%; height: 13%; }.cs-ki-pass > span { font-size: 9px; }.cs-ki-pages { transform: scale(.7); height: 24px; }.cs-notion-content { padding-inline: 10px; }.cs-notion-mini > aside { padding-inline: 6px; }.cs-task-row { gap: 5px; }.cs-task-row > .cs-stroke { width: 54%; }.cs-owner-avatar { height: 13px; width: 13px; }.cs-board-moving { width: 39%; left: 6%; }.cs-board-col { padding-inline: 6px; }.cs-crm-mini { padding-inline: 8px; }.cs-crm-row { gap: 5px; padding-inline: 5px; }.cs-crm-row > i { width: 12px; height: 12px; }.cs-crm-owner { height: 16px; width: 16px; }.cs-drive-mini > aside { padding-inline: 6px; }.cs-drive-content { padding-inline: 9px; }.cs-drive-files { gap: 5px; }.cs-drive-file { padding: 7px 5px; }.cs-drive-file > svg { width: 16px; height: 16px; }.cs-c-update-stack { width: 59%; right: 7%; height: 17%; bottom: 2%; --cs-head-height: 27px; }.cs-notice-body { padding: 8px 10px; gap: 7px; }.cs-notice-avatar { width: 19px; height: 19px; }.cs-notice-result { padding: 4px 5px; margin-top: 6px; }.cs-transfer-piece { width: 20px; height: 25px; gap: 3px; padding: 4px; }
}

.cs-is-still *,.cs-is-still *:before,.cs-is-still *:after,.motion-paused [data-cs-scene] *,.motion-paused [data-cs-scene] *:before,.motion-paused [data-cs-scene] *:after { animation: none !important; transition: none !important; }
@media(min-width:1450px) { .cs-hero-scene { max-height: 650px; }.cs-h-outlook .cs-chrome { height: 39px; }.cs-h-outlook .cs-mail-workspace { height: calc(100% - 67px); }.cs-mail-reading { padding-top: 20px; }.cs-mail-reading > .cs-graphic-line:not(.cs-title-line) { margin-top: 10px; }.cs-h-copy-source { margin-top: 16px; }.cs-h-teams { min-height: 113px; }.cs-h-team-message p { font-size: 12px; } }
@media(max-width:1100px) { .cs-chrome { gap: 7px; padding-inline: 10px; height: 31px; }.cs-chrome > strong { font-size: 10px; }.cs-office-mark { height: 17px; width: 16px; font-size: 10px; }.cs-command-strip { height: 25px; padding-inline: 10px; gap: 12px; }.cs-command-strip > span { width: 20px; }.cs-command-strip > .cs-command-active { width: 32px; height: 11px; }.cs-mail-workspace { height: calc(100% - 56px); grid-template-columns: 25px 19% minmax(0,1fr); }.cs-mail-reading { padding: 13px 13px 10px; }.cs-sender-silhouette { margin: 10px 0; }.cs-h-copy-source { margin-top: 9px; gap: 7px; padding: 4px 5px; }.cs-attachment-silhouette { margin-top: 8px; padding: 5px; }.cs-mail-reading > .cs-graphic-line:not(.cs-title-line) { height: 3px; margin-top: 6px; }.cs-title-line { height: 5px; }.cs-mail-sidebar { padding-inline: 7px; }.cs-nav-line { margin-bottom: 12px; height: 3px; }.cs-app-rail { gap: 14px; }.cs-app-rail > svg { width: 12px; height: 12px; }.cs-h-excel .cs-chrome { height: 27px; }.cs-h-excel .cs-command-strip { height: 20px; }.cs-file-caption { font-size: 7px; }.cs-formula-silhouette { height: 21px; }.cs-sheet-grid { height: calc(100% - 87px); min-height: 65px; grid-template-rows: 15px repeat(4,1fr); }.cs-sheet-bottom { height: 19px; }.cs-sheet-row > span { padding-inline: 6px; }.cs-h-excel-old .cs-chrome { height: 26px; }.cs-h-teams { min-height: 88px; }.cs-h-teams .cs-chrome { height: 25px; }.cs-h-team-message { gap: 7px; padding: 8px 10px 0; }.cs-h-team-message p { font-size: 10px; padding: 6px 8px; }.cs-h-team-message .cs-person-silhouette { width: 20px; height: 20px; }.cs-chat-compose { margin: 6px 10px 8px; height: 18px; }.cs-h-duplicate { width: 39px; height: 47px; }.cs-h-duplicate > i { margin-top: 14px; } }
@media(max-width:760px) { .cs-hero-scene { max-width: 570px; justify-self: center; }.cs-chrome { gap: 6px; padding-inline: 9px; } }
@media(max-width:580px) { .cs-h-brand-shape { width: 112%; left: -7%; top: -2%; }.cs-h-pencil { stroke-width: 2.4; } .cs-hero-scene { aspect-ratio: 1/1.14; }.cs-h-outlook { top: 10%; left: 4%; width: 82%; height: 43%; }.cs-h-excel-old { top: 44%; right: 7%; width: 66%; }.cs-h-excel { top: 52%; right: 5%; width: 75%; height: 33%; }.cs-h-teams { left: 5%; bottom: 3%; width: 55%; }.cs-h-duplicate { left: 9%; top: 64%; } }
@media(max-width:380px) { .cs-h-outlook .cs-chrome { height: 27px; }.cs-h-outlook .cs-command-strip { height: 22px; }.cs-mail-workspace { height: calc(100% - 49px); grid-template-columns: 21px 17% minmax(0,1fr); }.cs-mail-reading { padding: 10px; }.cs-title-line { height: 4px; }.cs-sender-silhouette { margin: 8px 0; gap: 5px; }.cs-sender-silhouette > i { height: 15px; width: 15px; }.cs-sender-silhouette > span { height: 3px; }.cs-mail-reading > .cs-graphic-line:not(.cs-title-line) { margin-top: 5px; }.cs-h-copy-source { margin-top: 7px; padding: 3px 4px; }.cs-h-copy-source > span { height: 3px; }.cs-attachment-silhouette { margin-top: 7px; padding: 4px 5px; }.cs-attachment-silhouette > svg { height: 10px; width: 10px; }.cs-app-rail { padding-top: 11px; gap: 13px; }.cs-app-rail > svg { height: 10px; width: 10px; }.cs-mail-sidebar { padding: 12px 5px; }.cs-nav-line { margin-bottom: 11px; height: 2px; }.cs-nav-line.is-current { height: 10px; }.cs-mail-sidebar > i { height: 4px; }.cs-h-excel { height: 34%; }.cs-h-excel .cs-chrome { height: 24px; gap: 6px; padding-inline: 8px; }.cs-h-excel .cs-command-strip { height: 17px; }.cs-h-excel .cs-command-strip > .cs-command-active { height: 4px; }.cs-h-excel .cs-chrome > strong { font-size: 9px; }.cs-h-excel .cs-office-mark { width: 14px; height: 15px; font-size: 9px; }.cs-file-caption { font-size: 6px; }.cs-h-excel-old .cs-chrome { height: 24px; gap: 7px; }.cs-h-excel-old .cs-chrome > strong { font-size: 9px; }.cs-formula-silhouette { height: 18px; gap: 8px; }.cs-formula-silhouette > i { font-size: 8px; }.cs-sheet-grid { height: calc(100% - 75px); min-height: 53px; grid-template-rows: 12px repeat(4,1fr); }.cs-sheet-row,.cs-sheet-letters { grid-template-columns: 15px 1.05fr 1.3fr 1fr; }.cs-sheet-letters > span { font-size: 6px; }.cs-sheet-row > span { padding: 2px 5px; }.cs-sheet-row > span > b { height: 2px; }.cs-sheet-bottom { height: 16px; font-size: 9px; }.cs-h-teams { min-height: 77px; }.cs-h-teams .cs-chrome { height: 22px; gap: 7px; padding-inline: 9px; }.cs-h-teams .cs-chrome > strong { font-size: 9px; }.cs-h-teams .cs-office-mark { width: 13px; height: 14px; font-size: 9px; }.cs-h-team-message { padding: 7px 9px 0; gap: 6px; }.cs-h-team-message .cs-person-silhouette { width: 17px; height: 17px; }.cs-h-team-message p { font-size: 9px; padding: 5px 7px; }.cs-h-team-message .cs-graphic-line { height: 2px; margin-bottom: 5px; }.cs-chat-compose { height: 15px; margin: 5px 9px 6px; }.cs-chat-compose > svg { width: 9px; height: 9px; }.cs-h-duplicate { width: 32px; height: 40px; left: 9%; }.cs-h-duplicate > i { margin-top: 12px; height: 2px; }.cs-h-duplicate > i:last-child { margin-top: 5px; margin-left: 8px; }.cs-h-cursor > svg { width: 18px; height: 23px; }.cs-h-cursor > span { left: 14px; top: 16px; transform: scale(.8); } }
@media(prefers-reduced-motion:reduce) { [data-cs-scene] *,[data-cs-scene] *:before,[data-cs-scene] *:after { animation: none !important; transition: none !important; } }