/* Workspace illustrations use the app's chrome, with action-led motion. */
.product-workspace-section { padding-block: 85px 100px; background: radial-gradient(ellipse at 72% 45%,#4c335128,transparent 65%); }
.workspace-story-layout { display: grid; grid-template-columns: minmax(0,.61fr) minmax(0,1.39fr); gap: 46px; align-items: center; }
.workspace-story-copy { min-width: 0; }
.workspace-story-copy h2 { font-size: clamp(32px,3.15vw,45px); line-height: 1.2; margin-top: 13px; }
.workspace-story-copy .feature-intro { font-size: 16px; line-height: 1.8; margin-top: 20px; }
.workspace-chapters { display: grid; gap: 10px; margin-top: 29px; }
.workspace-chapters button { display: flex; align-items: center; gap: 11px; padding: 15px 14px; border: 1px solid #76678365; border-radius: 13px; background: #141222; text-align: left; color: #b9adc9; }
.workspace-chapters button[aria-selected="true"] { color: #f0e9fc; background: #30263e; border-color: #baa1d2; box-shadow: inset 3px 0 #c7b0e8; }
.workspace-chapters button:hover { border-color: #baa1d2; }
.workspace-chapters button > span { min-width: 0; }
.workspace-chapters button > .icon { width: 19px; height: 19px; flex: none; color: #bda4df; }
.workspace-chapters button > .icon:last-child { width: 12px; height: 12px; margin-left: auto; }
.workspace-chapters strong { display: block; font-size: 14px; line-height: 1.5; }
.workspace-chapters small { display: block; font-size: 11px; line-height: 1.7; color: #af9fc0; margin-top: 3px; }
.workspace-remembered { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.8; color: #a99ab9; margin-top: 24px; }
.workspace-remembered .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.workspace-movie { min-width: 0; margin: 0; }
.workspace-movie > figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px 13px; }
.workspace-film-label { font-size: 11px; color: #a99ab9; }
.workspace-screen { position: relative; isolation: isolate; border: 1px solid #78648b60; border-radius: 23px; overflow: hidden; background: #1e1b2c; }
.workspace-screen-explainer { position: absolute; z-index: 8; top: 52px; left: 18px; width: min(48%,400px); padding: 13px 15px; border-radius: 12px; background: linear-gradient(115deg,#100e21ed,#100e21c7); box-shadow: 0 6px 22px #05041038; pointer-events: none; opacity: 0; }
.workspace-screen-explainer > strong { display: block; color: #f0e7fc; font-size: 16px; line-height: 1.4; font-weight: 600; }
.workspace-screen-explainer > p { margin-top: 5px; color: #d3c6e2; font-size: 13px; line-height: 1.6; }
.workspace-screen-explainer[data-active="true"] { opacity: 1; }
.workspace-screen-explainer[data-caption-step="unpinned"], .workspace-screen-explainer[data-caption-step="pinned"] { top: 46px; left: 32%; width: min(62%,520px); padding: 10px 14px; }
.workspace-screen-explainer[data-caption-step="ghost"] { top: 140px; }
.workspace-screen-explainer[data-caption-scene="layout"][data-caption-step="compact"], .workspace-screen-explainer[data-caption-scene="layout"][data-caption-step="focus"], .workspace-screen-explainer[data-caption-scene="layout"][data-caption-step="docked"], .workspace-screen-explainer[data-caption-scene="layout"][data-caption-step="arranged"] { left: auto; right: 18px; width: 32%; top: 65px; }
.workspace-screen-explainer[data-caption-scene="layout"][data-caption-step="floating"] { top: auto; bottom: 44px; width: min(46%,390px); }
.workspace-playback, .workspace-step-navigation { display: flex; align-items: center; gap: 7px; }
.workspace-playback button, .workspace-step-navigation button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 5px 7px; border: 1px solid #8a749545; border-radius: 7px; background: #241e32; color: #cdbce0; font-size: 10px; }
.workspace-playback button .icon, .workspace-step-navigation button .icon { width: 12px; height: 12px; }
.workspace-playback button:hover:not(:disabled), .workspace-step-navigation button:hover:not(:disabled) { background: #40304f; border-color: #ac8ec9; }
.workspace-playback button:disabled, .workspace-step-navigation button:disabled { opacity: .35; cursor: default; }
.workspace-step-position { min-width: 33px; text-align: center; font-size: 11px; color: #c5b6d7; font-variant-numeric: tabular-nums; }
[data-workspace-previous] > .icon { rotate: 90deg; }
[data-workspace-next] > .icon { rotate: -90deg; }
.workspace-playback [aria-pressed="true"] { background: #55416a; border-color: #bca0d5; }
.workspace-desktop { --main-x: 19%; --main-y: 25%; --main-w: 77%; --main-h: 65%; --tools-x: 63%; --tools-y: 12%; --tools-w: 33%; --tools-h: 44%; position: relative; height: 475px; overflow: hidden; isolation: isolate; container-type: inline-size; font-family: var(--font-body); background: radial-gradient(ellipse at 10% 100%,#69528324,transparent 70%),linear-gradient(155deg,#1d1c2d,#141625 65%); }
.workspace-desktop { --taskbar-height: 36px; }
/* Palette reference: GLOBO's public HQ screenshot (helloglobo.com/product/globo-hq).
   This remains an unbranded fictional call interface, with no provider assets. */
.workspace-call-app { position: absolute; z-index: 1; inset: 0 0 auto; width: 100%; height: calc(100% - var(--taskbar-height)); overflow: hidden; background: #f4f5f3; }
.workspace-call-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 39px; padding: 8px 12px; background: #444f55; border-bottom: 1px solid #303a3f; }
.workspace-call-bar > strong { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #f4f5f3; font-weight: 500; }
.workspace-call-bar > strong .icon { width: 16px; height: 16px; color: #dde3df; }
.workspace-call-bar .mock-window-controls { color: #d4ddd7; }
.workspace-call-bar .mock-window-controls .mock-window-close { color: #eef2ef; }
.workspace-call-bar .mock-window-controls > span { width: 17px; height: 20px; }
.workspace-call-bar .mock-window-controls .icon { width: 10px; height: 10px; }
.workspace-call-body { position: relative; height: calc(100% - 39px); padding: 18px 15px; color: #4b555b; }
.workspace-call-state { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.workspace-call-state i { width: 5px; height: 5px; background: #2f7f62; border-radius: 50%; }
.workspace-call-state small { margin-left: auto; font-size: 9px; color: #647176; }
.workspace-call-person { position: absolute; inset-inline: 0; top: calc(50% - 55px); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; color: #646e72; }
.workspace-call-person > .icon { width: 43px; height: 43px; border: 1px solid #d5ddd9; border-radius: 50%; padding: 10px; background: #e7eeeb; color: #69766e; }
.workspace-call-wave { position: absolute; inset-inline: 0; top: calc(50% + 22px); display: flex; align-items: center; justify-content: center; gap: 5px; height: 23px; opacity: .6; }
.workspace-call-wave i { width: 3px; height: 9px; border-radius: 2px; background: #d97b4e; }
.workspace-call-wave i:nth-child(2n) { height: 17px; }
.workspace-call-wave i:nth-child(3n) { height: 12px; }
.workspace-call-details { position: absolute; bottom: 52px; left: 9%; right: 9%; padding: 10px 12px; border: 1px solid #d1d8d4; border-radius: 9px; background: #fff; }
.workspace-call-details > strong { display: block; font-size: 11px; line-height: 1.3; font-weight: 600; color: #3a454b; margin-bottom: 7px; }
.workspace-call-fields { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.45fr) minmax(0,.4fr) 86px; gap: 7px; align-items: end; }
.workspace-call-field { min-width: 0; }
.workspace-call-field > small { display: block; font-size: 9px; line-height: 1.2; color: #59666c; margin-bottom: 4px; }
.workspace-call-input { display: flex; align-items: center; gap: 5px; height: 29px; border: 1px solid #bac5c0; border-radius: 5px; padding: 6px 8px; background: #fafbf9; font-size: 11px; line-height: 1.3; color: #364249; }
.workspace-call-input > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.workspace-call-input > span.is-placeholder { color: #738078; }
.workspace-call-input > .icon { width: 11px; height: 11px; flex: none; margin-left: auto; color: #687973; }
.workspace-call-input > i { display: none; height: 11px; width: 1px; background: #354a41; flex: none; }
.workspace-call-save { display: flex; align-items: center; justify-content: center; gap: 4px; height: 29px; border: 1px solid #cbd2ce; border-radius: 5px; padding: 5px 7px; background: #e6eae7; color: #718078; font-size: 11px; white-space: nowrap; }
.workspace-call-save > .icon { display: none; height: 11px; width: 11px; flex: none; }
.workspace-call-type-menu { position: absolute; bottom: 42px; left: 12px; width: 160px; z-index: 2; display: grid; padding: 4px; border: 1px solid #b7c4bd; border-radius: 6px; background: #fff; box-shadow: 0 7px 14px #253b3022; opacity: 0; visibility: hidden; }
.workspace-call-type-menu > span { padding: 6px 8px; font-size: 10px; line-height: 1.4; color: #364249; border-radius: 3px; }
.workspace-call-type-menu > span:first-child { background: #f9e8dc; color: #8b421e; }
[data-call-details="type-menu"] .workspace-call-type-menu { opacity: 1; visibility: visible; }
[data-target="call-type"] .workspace-call-type .workspace-call-input, [data-call-details="type-menu"] .workspace-call-type .workspace-call-input, [data-target="call-reason"] .workspace-call-reason .workspace-call-input, [data-target="call-day"] .workspace-call-day .workspace-call-input { border-color: #bc643d; box-shadow: 0 0 0 1px #d9906033; }
[data-gesture="type"][data-target="call-reason"] .workspace-call-reason .workspace-call-input > i, [data-gesture="type"][data-target="call-day"] .workspace-call-day .workspace-call-input > i { display: inline-block; }
[data-call-details="day-filled"] .workspace-call-save { background: #b4572f; border-color: #a34d28; color: #fff; }
[data-call-details="saved"] .workspace-call-details { border-color: #81ad98; }
[data-call-details="saved"] .workspace-call-save { background: #287653; border-color: #226548; color: #fff; }
[data-call-details="saved"] .workspace-call-save > .icon { display: block; }
.workspace-call-actions { display: flex; align-items: center; justify-content: center; gap: 17px; position: absolute; bottom: 15px; left: 0; right: 0; }
.workspace-call-actions > .icon { width: 15px; height: 15px; color: #63716a; }
.workspace-call-actions > span { display: grid; place-items: center; padding: 6px 12px; border-radius: 6px; background: #c7433e; color: #fff; }
.workspace-call-actions > span .icon { width: 15px; height: 15px; rotate: 135deg; }
.workspace-murmur, .workspace-demo-tools { position: absolute; z-index: 3; left: var(--main-x); top: var(--main-y); width: var(--main-w); height: var(--main-h); border: 1px solid #8a799d; border-radius: 15px; background: #101522; box-shadow: 0 20px 40px #03020b65; }
.workspace-murmur { --app-opacity: 1; background: rgb(16 21 34 / var(--app-opacity)); }
.workspace-app-bar { display: flex; align-items: center; gap: 6px; height: 45px; padding: 7px 10px; border-bottom: 1px solid #454058; border-radius: 14px 14px 0 0; background: #1c2335; }
.workspace-main-title { display: flex; align-items: center; flex: none; }
.workspace-main-title img { width: 98px; height: auto; }
.workspace-language-pair { color: #9ba9c7; font-size: 9px; margin-left: auto; white-space: nowrap; }
.workspace-pin, .workspace-toolbar-control { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none; min-width: 26px; height: 29px; padding: 5px; border: 1px solid transparent; border-radius: 7px; color: #a6a3c5; font-size: 10px; }
.workspace-pin .icon, .workspace-toolbar-control .icon { width: 15px; height: 15px; }
.workspace-pin > span { white-space: nowrap; }
.workspace-app-bar .mock-window-controls { margin-left: 2px; padding-left: 5px; border-left: 1px solid #5c517044; }
.workspace-app-bar .mock-window-controls > span { width: 22px; height: 27px; }
.workspace-app-bar .mock-window-controls .icon { width: 11px; height: 11px; }
.workspace-app-transcript { display: flex; align-items: flex-start; flex-direction: column; gap: 14px; padding: 20px 18px; }
.workspace-app-transcript article { border: 1px solid #3f3e63; border-radius: 11px; background: #20243b; width: fit-content; max-width: 82%; padding: 11px 13px; }
.workspace-app-transcript .workspace-bubble-es { align-self: flex-end; background: #302536; border-color: #564150; }
.workspace-app-transcript .workspace-layout-line { display: none; }
[data-scene="layout"] .workspace-layout-line { display: block; }
.workspace-app-transcript article > span { display: block; font-size: 8px; line-height: 1.2; letter-spacing: .08em; }
.workspace-app-transcript p { color: #e8e1ef; font-size: clamp(13px,1.9cqw,16px); line-height: 1.55; margin-top: 6px; }
.workspace-app-transcript mark { background: #8e9fff1c; color: #b9c7ff; border-bottom: 1px dotted #8e9fff; }
.workspace-app-transcript b { font-weight: 500; color: #f0d09a; border-bottom: 1px dotted #d2ae72; }
.workspace-app-footer { position: absolute; bottom: 0; inset-inline: 0; height: 37px; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #393951; border-radius: 0 0 14px 14px; background: #192132; }
.workspace-footer-timer { display: flex; align-items: center; gap: 5px; border: 1px solid #5d59714d; padding: 4px 6px; border-radius: 10px; color: #a8b4ce; font-size: 9px; }
.workspace-footer-timer .icon { width: 11px; height: 11px; }
.workspace-footer-actions { display: flex; align-items: center; gap: 8px; }
.workspace-footer-actions > i { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #675780; border-radius: 7px; color: #bfaccf; }
.workspace-footer-actions .icon { width: 13px; height: 13px; }
.workspace-footer-actions > b { font-size: 9px; font-weight: 500; border: 1px solid #8b6d94; border-radius: 12px; padding: 4px 9px; background: #bba8f0; color: #1b1629; }
.workspace-settings-popover { position: absolute; top: 51px; right: 20px; width: 240px; padding: 14px; border: 1px solid #76658d; border-radius: 12px; background: #1b2233; box-shadow: 0 12px 28px #03020b70; opacity: 0; visibility: hidden; z-index: 4; }
.workspace-settings-popover > strong { color: #e0d5eb; font-size: 12px; font-weight: 600; }
.workspace-opacity-setting { margin-top: 16px; }
.workspace-opacity-setting > span { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #c0b5d3; gap: 7px; }
.workspace-opacity-setting b { color: #ddcaff; font-weight: 500; }
.workspace-opacity-track { position: relative; height: 5px; border-radius: 5px; background: #4b465b; margin: 13px 0 17px; }
.workspace-opacity-track > i { position: absolute; inset: 0 auto 0 0; width: 100%; background: #b3a1f0; border-radius: inherit; }
.workspace-opacity-track > span { position: absolute; left: 100%; top: 50%; width: 13px; height: 13px; transform: translate(-50%,-50%); border-radius: 50%; background: #c4b1ff; }
.workspace-opacity-track > [data-ws-target="opacity-low"] { left: 30%; visibility: hidden; }
.workspace-opacity-track > [data-ws-target="opacity-full"] { visibility: hidden; }
.workspace-ghost-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #65507050; padding-top: 10px; color: #b7aaca; font-size: 10px; }
.workspace-ghost-setting kbd { border: 1px solid #736185; border-radius: 5px; padding: 4px 9px; font: 10px "Segoe UI",sans-serif; color: #d8c9e7; background: #282334; }
.workspace-demo-tools { left: var(--tools-x); top: var(--tools-y); width: var(--tools-w); height: var(--tools-h); background: #151b29; opacity: 0; visibility: hidden; }
.workspace-tools-bar { height: 35px; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 14px 14px 0 0; border-bottom: 1px solid #52435e; background: #252b40; }
.workspace-tools-bar > strong { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; white-space: nowrap; color: #e1d6ec; font-size: 11px; font-weight: 600; }
.workspace-tools-bar .icon { width: 12px; height: 12px; flex: none; }
.workspace-tools-bar > .icon { color: #b4a3c4; }
.workspace-preset, .workspace-detach { border: 1px solid #6f5b85; border-radius: 6px; padding: 3px 6px; font-size: 8px; color: #bfadd2; white-space: nowrap; background: #1b2131; }
.workspace-tool-panels { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) 29px; gap: 7px; height: calc(100% - 35px); padding: 8px; }
.workspace-note-panel, .workspace-reference-panel { min-height: 0; min-width: 0; overflow: hidden; border: 1px solid #584568; border-radius: 8px; padding: 9px; background: #101724; }
.workspace-note-panel > span { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #bba9cc; }
.workspace-note-panel .icon, .workspace-reference-panel .icon { width: 12px; height: 12px; flex: none; }
.workspace-note-panel p { font-size: 12px; color: #d7c9e2; line-height: 1.6; white-space: pre-line; margin-top: 8px; }
.workspace-note-panel > i { display: block; width: 75%; height: 1px; background: #5b466b3d; margin-top: 11px; }
.workspace-note-panel > i:last-child { width: 50%; }
.workspace-reference-panel { display: none; }
.workspace-reference-tabs { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #bba9cc; border-bottom: 1px solid #67527250; padding-bottom: 4px; }
.workspace-reference-tabs > .icon:last-child { margin-left: auto; }
.workspace-reference-panel > strong { display: block; font-size: 11px; color: #e3d7ed; margin-top: 5px; }
.workspace-reference-panel > strong > small { font-size: 8px; color: #a99abb; font-weight: 400; }
.workspace-reference-panel > b { display: block; font-size: 10px; color: #e2c696; font-weight: 500; margin-top: 3px; }
.workspace-timer-panel { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #5e4b70; border-radius: 7px; color: #bcaaca; font-size: 9px; background: #1a1d2d; }
.workspace-timer-panel .icon { width: 13px; height: 13px; }
.workspace-timer-panel strong { margin-left: auto; color: #edcc95; font-size: 13px; font-variant-numeric: tabular-nums; }
.workspace-preset-menu { position: absolute; top: 32px; right: 50px; display: grid; min-width: 130px; border: 1px solid #947baa; border-radius: 7px; padding: 4px; background: #282235; box-shadow: 0 8px 20px #03020b55; opacity: 0; visibility: hidden; z-index: 5; }
.workspace-preset-menu > span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; color: #bca9d0; font-size: 10px; border-radius: 4px; }
.workspace-preset-menu > span:nth-child(2) { background: #514063; color: #e4d4f3; }
.workspace-preset-menu .icon { width: 11px; height: 11px; }
.workspace-tools-resize { position: absolute; right: -4px; top: 42%; height: 30px; width: 8px; border-right: 3px solid #c6a9ef; opacity: 0; }
.workspace-keyboard-cue { position: absolute; left: 50%; top: 51px; z-index: 7; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 24px); padding: 11px 16px; border: 1px solid #c6a7ee; border-radius: 13px; background: #241b35; box-shadow: 0 8px 24px #09061170; color: #e3cdfb; opacity: 0; transform: translate(-50%,-4px); pointer-events: none; }
.workspace-shortcut-keys { display: flex; align-items: center; gap: 8px; flex: none; }
.workspace-shortcut-keys > span { font-size: 17px; color: #bb9bd8; }
.workspace-keyboard-cue kbd { display: grid; place-items: center; min-width: 43px; border: 1px solid #a98ac9; border-bottom-width: 4px; border-radius: 7px; padding: 7px 12px; font: 700 22px var(--font-body); background: #392747; color: #f3e5ff; }
.workspace-shortcut-label { display: flex; align-items: center; gap: 7px; min-width: 0; }
.workspace-shortcut-label > .icon { width: 20px; height: 20px; flex: none; }
.workspace-shortcut-label > strong { font-size: 14px; line-height: 1.45; color: #f1e3fc; font-weight: 600; }
.workspace-ghost-status { position: absolute; right: 4%; top: 12%; display: flex; align-items: center; gap: 5px; border: 1px solid #a487c16e; border-radius: 7px; padding: 6px 8px; font-size: 10px; color: #ccb0e9; background: #32263f; opacity: 0; }
.workspace-ghost-status .icon { width: 13px; height: 13px; }
.workspace-taskbar { position: absolute; z-index: 6; inset: auto 0 0; height: var(--taskbar-height); display: flex; align-items: center; border-top: 1px solid #5d61754d; background: #171c29; box-shadow: 0 -3px 12px #0a0d1520; }
.workspace-taskbar-start { display: grid; place-items: center; width: 36px; height: 30px; margin-left: 7px; color: #91b4e1; }
.workspace-taskbar-start .icon { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.workspace-taskbar-apps { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; }
.workspace-taskbar-app { position: relative; display: grid; place-items: center; width: 32px; height: 30px; border-radius: 5px; }
.workspace-taskbar-app::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 4px; height: 2px; border-radius: 2px; background: #788296; transform: translateX(-50%); }
.workspace-taskbar-browser .icon { width: 23px; height: 23px; padding: 3px; border: 1px solid #708399; border-radius: 6px; background: #303b4b; color: #a5b9ce; }
.workspace-taskbar-murmur img { width: 24px; height: 24px; object-fit: contain; }
.workspace-taskbar-murmur { background: #ffffff0a; }
.workspace-taskbar-murmur::after { width: 13px; background: #baadf7; }
.workspace-taskbar-clock { margin-left: auto; padding-right: 12px; font-size: 9px; color: #a4afc1; font-variant-numeric: tabular-nums; }
[data-state="unpinned"] .workspace-taskbar-browser, [data-state="ghost-done"] .workspace-taskbar-browser { background: #ffffff0a; }
[data-state="unpinned"] .workspace-taskbar-browser::after, [data-state="ghost-done"] .workspace-taskbar-browser::after { width: 13px; background: #9bbadd; }
[data-state="unpinned"] .workspace-taskbar-murmur, [data-state="ghost-done"] .workspace-taskbar-murmur { background: none; }
[data-state="unpinned"] .workspace-taskbar-murmur::after, [data-state="ghost-done"] .workspace-taskbar-murmur::after { width: 4px; background: #788296; }
[data-target="taskbar-murmur"] .workspace-taskbar-murmur { background: #ffffff14; box-shadow: inset 0 0 0 1px #a897d566; }
.workspace-dock-guide { position: absolute; z-index: 2; left: 7%; top: 56%; width: 56%; height: 36%; border: 2px dashed #b69cd8; border-radius: 11px; background: #a68bca16; opacity: 0; }
.workspace-film-pointer { position: absolute; left: 0; top: 0; z-index: 9; width: 25px; height: 31px; transform: translate(var(--pointer-x,0px),var(--pointer-y,0px)); opacity: 0; filter: drop-shadow(1px 2px 2px #07071390); }
.workspace-film-pointer > .icon { display: block; width: 25px; height: 31px; fill: #fff; stroke: #352644; stroke-width: 1.2; }
.workspace-film-pointer > i { position: absolute; left: -6px; top: -5px; width: 21px; height: 21px; border: 2px solid #d4b3ff; border-radius: 50%; opacity: 0; }
[data-target]:not([data-target=""]) .workspace-film-pointer { opacity: 1; }
[data-gesture="click"] .workspace-film-pointer > i { opacity: 1; }
[data-target][data-gesture="type"] .workspace-film-pointer { opacity: 0; }
[data-gesture="drag"] .workspace-film-pointer > .icon { fill: #ddc4ff; }
[data-gesture^="key"] .workspace-keyboard-cue { opacity: 1; transform: translate(-50%,0); }
[data-gesture="key"] .workspace-keyboard-cue kbd { transform: translateY(3px); background: #cfaff5; color: #25152f; border-color: #e4cdff; box-shadow: 0 0 12px #c7a0ef30; }
[data-motion="true"] .workspace-murmur, [data-motion="true"] .workspace-demo-tools { transition: left var(--window-duration,650ms) cubic-bezier(.25,.6,.3,1), top var(--window-duration,650ms) cubic-bezier(.25,.6,.3,1), width var(--window-duration,650ms) cubic-bezier(.25,.6,.3,1), height var(--window-duration,650ms) cubic-bezier(.25,.6,.3,1), opacity 500ms ease; }
[data-motion="true"] .workspace-film-pointer { transition: transform var(--beat-duration,700ms) cubic-bezier(.25,.6,.3,1), opacity 200ms ease; }
[data-motion="true"] .workspace-keyboard-cue { transition: opacity 180ms ease, transform 180ms ease; }
[data-motion="true"] .workspace-screen-explainer { transition: opacity 240ms ease; }
[data-motion="true"] .workspace-keyboard-cue kbd { transition: transform 120ms ease, background 120ms ease, color 120ms ease; }
[data-motion="true"] .workspace-opacity-track > i { transition: width var(--beat-duration,1000ms) cubic-bezier(.25,.6,.3,1); }
[data-motion="true"] .workspace-opacity-track > span:first-of-type { transition: left var(--beat-duration,1000ms) cubic-bezier(.25,.6,.3,1); }
/* Step jumps show their starting state immediately, even when paused mid-drag. */
[data-gesture="hold"][data-target=""] .workspace-desktop * { transition: none !important; }
[data-motion="true"][data-step="opacity"][data-gesture="drag"] .workspace-film-pointer { transition: transform var(--beat-duration) linear, opacity 200ms ease; }
[data-motion="true"][data-step="opacity"][data-gesture="drag"] .workspace-murmur { transition: opacity var(--beat-duration) linear; }
[data-motion="true"][data-step="opacity"][data-gesture="drag"] .workspace-opacity-track > i { transition: width var(--beat-duration) linear; }
[data-motion="true"][data-step="opacity"][data-gesture="drag"] .workspace-opacity-track > span:first-of-type { transition: left var(--beat-duration) linear; }
[data-state="unpinned"] .workspace-call-app { z-index: 4; border-color: #98a3b4; box-shadow: 0 16px 35px #03030c85; }
[data-state="pinned"] .workspace-pin, [data-state="settings"] .workspace-pin, [data-state="opacity"] .workspace-pin, [data-state="opacity-full"] .workspace-pin, [data-state="ghost"] .workspace-pin, [data-state="ghost-done"] .workspace-pin, [data-state="restored"] .workspace-pin, [data-scene="layout"] .workspace-pin { color: #cbb9ff; background: #8a75c626; border-color: #8e79cd60; }
[data-state="settings"] .workspace-settings-popover, [data-state="opacity"] .workspace-settings-popover, [data-state="opacity-full"] .workspace-settings-popover { opacity: 1; visibility: visible; }
[data-state="compact-settings"] .workspace-settings-popover { opacity: 1; visibility: visible; }
[data-state="settings"] .workspace-control-settings, [data-state="opacity"] .workspace-control-settings, [data-state="opacity-full"] .workspace-control-settings { background: #5d4476; border-color: #ab87cf; color: #e8d3ff; }
[data-state="opacity"] .workspace-murmur { opacity: .72; }
[data-state="opacity"] .workspace-opacity-track > i { width: 30%; }
[data-state="opacity"] .workspace-opacity-track > span:first-of-type { left: 30%; }
[data-state="ghost"] .workspace-murmur, [data-state="ghost-done"] .workspace-murmur { opacity: .23; }
[data-state="ghost"] .workspace-ghost-status, [data-state="ghost-done"] .workspace-ghost-status { opacity: 1; }
[data-scene="layout"] .workspace-desktop { --main-x: 8%; --main-y: 12%; --main-w: 80%; --main-h: 76%; }
[data-scene="layout"] .workspace-call-app { opacity: 0; }
[data-compact="true"] .workspace-desktop { --main-w: 55%; --main-h: 44%; }
[data-state="tools-open"] .workspace-demo-tools, [data-state="tools-free"] .workspace-demo-tools, [data-state="floating"] .workspace-demo-tools, [data-state="docked"] .workspace-demo-tools, [data-state="tools-wide"] .workspace-demo-tools, [data-state="preset-menu"] .workspace-demo-tools, [data-state="arranged"] .workspace-demo-tools { opacity: 1; visibility: visible; }
[data-compact="true"] .workspace-murmur { overflow: hidden; }
[data-compact="true"] .workspace-app-bar { position: absolute; top: 0; inset-inline: 0; z-index: 2; height: 32px; padding: 4px 7px; gap: 4px; }
[data-compact="true"] .workspace-main-title img { width: 76px; }
[data-compact="true"] .workspace-pin > span, [data-compact="true"] .workspace-language-pair { display: none; }
[data-compact="true"] .workspace-pin, [data-compact="true"] .workspace-toolbar-control { min-width: 22px; height: 23px; padding: 3px; }
[data-compact="true"] .workspace-pin { margin-left: auto; }
[data-compact="true"] .workspace-toolbar-control .icon, [data-compact="true"] .workspace-pin .icon { width: 13px; height: 13px; }
[data-compact="true"] .workspace-app-bar .mock-window-controls > span { width: 16px; height: 22px; }
[data-compact="true"] .workspace-app-bar .mock-window-controls .icon { width: 9px; height: 9px; }
[data-compact="true"] .workspace-app-transcript { position: absolute; inset: 0; padding: 10px; gap: 8px; overflow: hidden; }
[data-compact="true"] .workspace-app-transcript article { padding: 7px 9px; }
[data-compact="true"] .workspace-app-transcript article > span { font-size: 7px; }
[data-compact="true"] .workspace-app-transcript p { font-size: 12px; line-height: 1.45; margin-top: 4px; }
[data-compact="true"] .workspace-app-footer { z-index: 2; height: 29px; padding: 4px 7px; }
[data-compact="true"] .workspace-footer-actions > b, [data-compact="true"] .workspace-footer-timer { font-size: 8px; padding-block: 3px; }
[data-compact="true"] .workspace-footer-actions > i { height: 20px; width: 20px; }
[data-compact="true"] .workspace-settings-popover { top: 37px; right: 7px; width: min(195px,calc(100% - 14px)); padding: 9px; border-radius: 9px; }
[data-compact="true"] .workspace-settings-popover > strong { font-size: 10px; }
[data-compact="true"] .workspace-opacity-setting { margin-top: 9px; }
[data-compact="true"] .workspace-opacity-setting > span, [data-compact="true"] .workspace-ghost-setting { font-size: 9px; }
[data-compact="true"] .workspace-opacity-track { margin-block: 11px; }
[data-compact="true"] .workspace-ghost-setting { padding-top: 7px; }
[data-compact="true"] .workspace-ghost-setting kbd { font-size: 9px; padding: 2px 5px; }
/* Bars overlay the captions, just as in the app: hiding/revealing them never reflows text. */
[data-motion="true"][data-compact="true"] .workspace-app-bar,
[data-motion="true"][data-compact="true"] .workspace-app-footer { transition: opacity 220ms ease; }
[data-state="compact-hidden"] .workspace-app-bar,
[data-state="compact-hidden"] .workspace-app-footer { opacity: 0; }
[data-state="floating"] .workspace-desktop { --tools-x: 59%; --tools-y: 23%; }
[data-state="floating"] .workspace-demo-tools { box-shadow: 0 25px 40px #03020b95; }
[data-state="docked"] .workspace-desktop { --tools-x: 8%; --tools-y: 56%; --tools-w: 55%; --tools-h: 36%; }
[data-step="docked"][data-gesture="move"] .workspace-dock-guide, [data-step="docked"][data-gesture="drag"] .workspace-dock-guide { opacity: 1; }
[data-state="tools-wide"] .workspace-desktop, [data-state="preset-menu"] .workspace-desktop, [data-state="arranged"] .workspace-desktop { --tools-x: 8%; --tools-y: 56%; --tools-w: 85%; --tools-h: 36%; }
[data-state="preset-menu"] .workspace-preset-menu { opacity: 1; visibility: visible; }
[data-state="arranged"] .workspace-tool-panels { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); }
[data-state="arranged"] .workspace-note-panel { grid-row: 1 / 3; border-color: #ab8ec5; }
[data-state="arranged"] .workspace-reference-panel { display: block; }
[data-state="arranged"] .workspace-preset { background: #7e5d9b; color: #f2e3ff; }
[data-target="resize-tools"] .workspace-tools-resize { opacity: 1; }
@media (max-width: 1150px) {
  .workspace-screen-explainer[data-caption-step="unpinned"], .workspace-screen-explainer[data-caption-step="pinned"] { top: 42px; padding: 8px 12px; }
  .workspace-screen-explainer[data-caption-step="unpinned"] > strong, .workspace-screen-explainer[data-caption-step="pinned"] > strong { font-size: 15px; }
  .workspace-screen-explainer[data-caption-step="unpinned"] > p, .workspace-screen-explainer[data-caption-step="pinned"] > p { font-size: 12px; line-height: 1.5; margin-top: 3px; }
  .workspace-story-layout { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 28px; }
  .workspace-main-title img { width: 80px; }
  .workspace-language-pair { display: none; }
  .workspace-pin { margin-left: auto; }
  .workspace-pin > span { display: none; }
  .workspace-app-bar .mock-window-controls > span { width: 17px; }
  .workspace-app-transcript p { font-size: 14px; }
  .workspace-tools-bar > strong { font-size: 10px; }
  .workspace-preset, .workspace-detach { font-size: 7px; padding: 3px 4px; }
}
@media (max-width: 900px) {
  .workspace-story-layout { grid-template-columns: 1fr; gap: 27px; }
  .workspace-story-copy { max-width: 690px; }
  .workspace-chapters { grid-template-columns: 1fr 1fr; margin-top: 21px; }
  .workspace-story-copy h2 br { display: none; }
  .workspace-remembered { margin-top: 15px; }
  .workspace-movie { width: 100%; }
  .workspace-main-title img { width: 98px; }
  .workspace-app-transcript p { font-size: 16px; }
  .workspace-pin > span { display: inline; }
}
@media (max-width: 580px) {
  .product-workspace-section { padding-block: 50px 65px; }
  .workspace-chapters { grid-template-columns: 1fr; gap: 8px; }
  .workspace-chapters button { padding: 12px; }
  .workspace-film-label { font-size: 10px; }
  .workspace-playback .workspace-film-label, .workspace-step-navigation button > span { display: none; }
  .workspace-step-navigation button { min-width: 30px; }
  .workspace-screen-explainer { top: 39px; left: 12px; width: calc(100% - 24px); max-width: 330px; padding: 8px 12px; }
  .workspace-screen-explainer > strong { font-size: 15px; }
  .workspace-screen-explainer > p { font-size: 12px; }
  .workspace-screen-explainer[data-caption-scene][data-caption-step] { top: 39px; bottom: auto; left: 12px; right: auto; width: calc(100% - 24px); }
  .workspace-screen-explainer[data-caption-scene][data-caption-step="ghost"] { top: 135px; }
  .workspace-screen-explainer[data-caption-scene="layout"][data-caption-step] { top: 90px; }
  .workspace-screen-explainer[data-caption-scene="layout"][data-caption-step="compact"],
  .workspace-screen-explainer[data-caption-scene="layout"][data-caption-step="focus"] { top: 255px; }
  .workspace-desktop { height: 475px; --main-x: 10%; --main-y: 26%; --main-w: 86%; --main-h: 63%; }
  .workspace-call-bar { height: 33px; padding: 6px 8px; }
  .workspace-call-bar > strong { font-size: 10px; gap: 5px; }
  .workspace-call-bar .mock-window-controls > span { width: 11px; }
  .workspace-call-bar .mock-window-controls .icon { width: 7px; height: 7px; }
  .workspace-call-body { height: calc(100% - 33px); padding: 13px 10px; }
  .workspace-call-details { bottom: 48px; left: 7%; right: 7%; padding: 9px; }
  .workspace-call-fields { grid-template-columns: minmax(0,1fr) 55px; gap: 6px; }
  .workspace-call-field > small { display: none; }
  .workspace-call-input { height: 27px; font-size: 10px; padding: 5px 7px; }
  .workspace-call-type { grid-column: 1; grid-row: 1; }
  .workspace-call-day { grid-column: 2; grid-row: 1; }
  .workspace-call-reason { grid-column: 1 / -1; grid-row: 2; }
  .workspace-call-save { position: absolute; right: 9px; top: 6px; width: 80px; height: 24px; font-size: 10px; padding: 3px 6px; }
  .workspace-call-type-menu { left: 9px; }
  .workspace-main-title img { width: 73px; }
  .workspace-app-bar { gap: 3px; padding-inline: 7px; height: 39px; }
  .workspace-pin > span, .workspace-language-pair { display: none; }
  .workspace-pin { margin-left: auto; }
  .workspace-toolbar-control, .workspace-pin { min-width: 22px; height: 25px; padding: 4px; }
  .workspace-toolbar-control .icon, .workspace-pin .icon { width: 13px; height: 13px; }
  .workspace-app-bar .mock-window-controls { padding-left: 3px; margin-left: 0; }
  .workspace-app-bar .mock-window-controls > span { width: 14px; height: 23px; }
  .workspace-app-bar .mock-window-controls .icon { width: 8px; height: 8px; }
  .workspace-app-transcript { padding: 15px 11px; gap: 12px; }
  .workspace-app-transcript p { font-size: 14px; }
  .workspace-app-transcript article { padding: 10px; max-width: 87%; }
  .workspace-settings-popover { right: 9px; top: 45px; width: 220px; padding: 12px; }
  .workspace-settings-popover > strong { font-size: 11px; }
  [data-scene="layout"] .workspace-desktop { --main-x: 6%; --main-y: 7%; --main-w: 88%; --main-h: 76%; }
  [data-compact="true"] .workspace-desktop { --main-x: 6%; --main-y: 7%; --main-w: 88%; --main-h: 44%; --tools-x: 6%; --tools-y: 51%; --tools-w: 88%; --tools-h: 40%; }
  [data-compact="true"] .workspace-app-transcript p { font-size: 12px; }
  [data-compact="true"] .workspace-main-title img { width: 68px; }
  [data-state="floating"] .workspace-desktop { --tools-x: 13%; --tools-y: 56%; --tools-w: 81%; --tools-h: 36%; }
  [data-state="docked"] .workspace-desktop { --tools-x: 6%; --tools-y: 51%; --tools-w: 88%; --tools-h: 40%; }
  [data-state="tools-wide"] .workspace-desktop, [data-state="preset-menu"] .workspace-desktop, [data-state="arranged"] .workspace-desktop { --tools-x: 6%; --tools-y: 51%; --tools-w: 90%; --tools-h: 40%; }
  .workspace-tools-bar > strong { font-size: 10px; }
  .workspace-note-panel p { font-size: 11px; }
  .workspace-tools-bar { gap: 6px; }
  .workspace-dock-guide { left: 6%; top: 51%; width: 88%; height: 40%; }
  .workspace-keyboard-cue { top: 44px; gap: 10px; padding: 10px 12px; }
  .workspace-shortcut-keys { gap: 6px; }
  .workspace-keyboard-cue kbd { min-width: 34px; font-size: 18px; padding: 6px 9px; }
  .workspace-shortcut-label { gap: 5px; }
  .workspace-shortcut-label > .icon { width: 16px; height: 16px; }
  .workspace-shortcut-label > strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-workspace-demo] *, [data-workspace-demo] *::before, [data-workspace-demo] *::after { transition: none !important; animation: none !important; }
}