/* Shared editorial style for Home and Vision. No fonts or visual libraries required. */
.workplace-page { --wp-ink: #eff6f3; --wp-muted: #b1c4c0; --wp-mint: #a6edcc; --wp-yellow: #f3da8e; --wp-line: #29423f; font-family: Inter, 'Segoe UI', Arial, sans-serif; background: #091715; color: var(--wp-ink); }
.workplace-page::before { display: none; }
.workplace-page button, .workplace-page input { font: inherit; }
.workplace-page a { color: inherit; }
.workplace-page a:focus-visible, .workplace-page button:focus-visible, .workplace-page summary:focus-visible, .workplace-page input:focus-visible { outline: 2px solid var(--wp-yellow); outline-offset: 5px; }
.workplace-page .main-nav { position: absolute; background: #091715; box-shadow: none; height: 72px; border-bottom: 1px solid #203a35; }
.workplace-page .nav-contact { background: #b8e7d0; color: #112d24 !important; border-radius: 6px; }
.workplace-page .nav-trigger.active-nav { color: var(--wp-mint); }
.workplace-page .nav-dropdown:focus-within .nav-submenu { display: block; }
.workplace-page .hamburger-lines { border: 0; background: none; }
.workplace-page .secondary-menu { top: 72px; }
.workplace-main { width: min(1240px, 90%); margin: 0 auto; padding-top: 72px; }
.workplace-main section { padding: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; padding: 12px; background: #122e28; }
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kicker { color: var(--wp-mint); font-size: .75rem; font-weight: 650; letter-spacing: .16em; margin-bottom: 20px; }
.home-heading { padding: 48px 0 34px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; }
.home-heading h1 { font-size: clamp(2.1rem, 3.8vw, 3.4rem); font-weight: 550; line-height: 1.08; letter-spacing: -.045em; }
.home-heading h1 span { color: var(--wp-mint); }
.hero-intro { color: var(--wp-muted); font-size: 1rem; line-height: 1.7; max-width: 370px; justify-self: end; }
.hero-intro a { color: var(--wp-ink); display: inline-block; text-decoration: none; border-bottom: 1px solid #608075; margin-top: 14px; }
.hero-intro a span { margin-left: 12px; color: var(--wp-mint); }
/* The film is one portable DOM scene. The stage resizes; narration and controls stay full-size. */
.film { border: 1px solid #46645b; border-radius: 16px; overflow: hidden; background: #10221e; box-shadow: 0 30px 65px #0003; }
.film-topline { min-height: 47px; padding: 13px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .7rem; letter-spacing: .12em; }
.film-topline > span:first-child { display: flex; gap: 10px; align-items: center; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--wp-mint); flex-shrink: 0; }
.concept-label { color: var(--wp-muted); letter-spacing: .02em; font-size: .75rem; }
.film-viewport { position: relative; height: 480px; overflow: hidden; background: radial-gradient(ellipse at 70% 28%, #f1f6e5 0, #d5e5d7 44%, #bfd4c9 100%); }
.film-world { width: 1000px; height: 470px; position: absolute; top: 0; left: 0; transform-origin: top left; color: #173b31; perspective: 1000px; }
.film-world *, .film-world *::before, .film-world *::after { animation-play-state: paused !important; }
.film[data-playing="true"] .film-world *, .film[data-playing="true"] .film-world *::before, .film[data-playing="true"] .film-world *::after { animation-play-state: running !important; }
.set-floor { position: absolute; left: 65px; top: 245px; width: 880px; height: 200px; border-radius: 50%; background: linear-gradient(160deg, #eff4df, #cee0c3); box-shadow: 0 18px 0 #a9c1b0, 0 27px 0 #a1baa9, 0 40px 30px #44675330, inset 0 1px 0 #fff; transform: rotate(-3deg); transition: background 1s; }
.set-orbit { position: absolute; border: 1px solid #5e8d7623; width: 930px; height: 260px; border-radius: 50%; left: 30px; top: 205px; transform: rotate(-8deg); }
.orbit-two { width: 830px; height: 220px; left: 88px; top: 218px; transform: rotate(7deg); }
.floor-mark { position: absolute; left: 730px; top: 402px; color: #728e7d; font-size: 10px; letter-spacing: .13em; transform: rotate(-3deg); }
.scene-stamp { position: absolute; left: 40px; top: 35px; z-index: 4; transition: opacity .45s; }
.stamp-time { display: block; font-size: 12px; letter-spacing: .12em; margin-bottom: 12px; color: #537264; }
.stamp-title { font-size: 25px; line-height: 1.1; font-weight: 550; letter-spacing: -.035em; display: block; max-width: 270px; }
/* Maya, a deliberately simple, dimensional character. */
.human { position: absolute; left: 194px; top: 166px; width: 130px; height: 210px; z-index: 8; transition: transform 1s, left 1s; }
.human-head { position: absolute; top: 0; left: 34px; width: 56px; height: 65px; border-radius: 44% 47% 40% 40%; background: linear-gradient(110deg, #c07e53, #efb58a 75%, #ba7958); box-shadow: inset 2px -4px 4px #a0684833; z-index: 3; transform: rotate(8deg); }
.human-hair { position: absolute; inset: -12px -2px 17px -9px; border-radius: 49% 43% 23% 38%; background: linear-gradient(130deg, #534641, #302f2b); box-shadow: -6px 21px 0 -3px #39362f; }
.human-hair::after { content: ''; position: absolute; left: -13px; top: 8px; width: 25px; height: 27px; border-radius: 50%; background: #3d3831; }
.human-eye { width: 4px; height: 6px; border-radius: 50%; background: #3a3530; position: absolute; top: 32px; right: 9px; }
.human-nose { position: absolute; top: 36px; right: -5px; border-radius: 50%; background: #e3a47a; width: 12px; height: 13px; }
.human-body { position: absolute; top: 59px; left: 20px; width: 78px; height: 84px; border-radius: 29px 28px 15px 12px; background: linear-gradient(110deg, #b7712d, #e4ae55 56%, #c48a3b); transform: rotate(-7deg); box-shadow: inset 5px 0 8px #a06a3040; z-index: 2; }
.human-arm { position: absolute; top: 87px; left: 75px; width: 72px; height: 21px; border-radius: 15px; background: linear-gradient(#e3ab54 0 65%, #c58d40); transform: rotate(17deg); z-index: 4; transform-origin: 0 50%; animation: human-type 2s ease-in-out infinite; }
.human-arm::after { content: ''; position: absolute; right: -14px; top: 1px; width: 24px; height: 17px; border-radius: 8px; background: #e6ac82; }
.human-leg { position: absolute; top: 129px; width: 31px; height: 79px; background: linear-gradient(90deg, #334c49, #4b6862); border-radius: 8px 8px 12px 12px; z-index: 2; }
.human-leg::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 47px; height: 19px; background: #e9ebd9; border-radius: 8px 16px 6px 6px; box-shadow: 0 4px 0 #a5b2a3; }
.leg-one { left: 65px; transform: rotate(-8deg); }.leg-two { left: 27px; transform: rotate(9deg); }
.chair { position: absolute; top: 91px; left: 0; width: 68px; height: 65px; border-radius: 15px 15px 6px 6px; background: linear-gradient(110deg, #83a08c, #bad0b6); box-shadow: -6px 0 #799782; }
.chair::after { content: ''; position: absolute; width: 9px; height: 63px; top: 55px; left: 20px; background: #537263; transform: rotate(8deg); }
.human-label { position: absolute; top: 235px; width: 220px; left: -40px; text-align: center; font-size: 19px; font-weight: 650; }
.human-label span { display: block; font-weight: 400; font-size: 13px; margin-top: 4px; color: #496657; }
.desk { position: absolute; left: 315px; top: 290px; width: 150px; height: 100px; z-index: 9; transition: left 1s, transform 1s; }
.desk-top { position: absolute; top: 0; width: 164px; height: 40px; background: #f1e5c7; transform: skewY(-9deg); border-radius: 6px; box-shadow: 0 9px 0 #bdad89, -2px 7px 0 #bdad89; }
.desk-leg { width: 10px; height: 93px; position: absolute; top: 25px; left: 13px; background: #978b73; box-shadow: 133px -16px #978b73; transform: skewY(-9deg); }
.laptop { position: absolute; left: 50px; top: -47px; transform: rotate(-8deg); }
.laptop-lid { width: 82px; height: 62px; border-radius: 6px; background: linear-gradient(120deg, #758e83, #b7c7b6); border: 2px solid #c4d2bd; transform: skewY(-4deg) skewX(-8deg); box-shadow: 4px 3px 0 #708377; display: grid; place-items: center; }
.laptop-lid span { color: #eaf0dc; font-size: 26px; }
.laptop-base { width: 112px; height: 19px; background: #b5c5b4; transform: skewX(-30deg); border-radius: 3px; margin-left: -30px; border-bottom: 3px solid #7f9383; }
.coffee { position: absolute; top: -9px; left: 18px; width: 22px; height: 27px; border-radius: 3px 3px 8px 8px; background: linear-gradient(90deg, #c79268, #ecd2aa); border-top: 4px solid #866b4e; }
.coffee::after { content: ''; position: absolute; top: 3px; right: -8px; border: 3px solid #caa67f; width: 9px; height: 11px; border-radius: 7px; }
/* Loose work becomes a shared project as the film progresses. */
.old-work { transition: opacity .5s, transform .9s; }
.loose-window { position: absolute; border: 1px solid #fff9; border-radius: 12px; padding: 18px; background: #f6f6eaf0; box-shadow: 8px 12px 0 #819b8133, 0 18px 28px #35573d14; width: 227px; z-index: 5; animation: drift 5s ease-in-out infinite; }
.loose-window span { display: block; font-size: 13px; color: #607563; margin-bottom: 15px; }
.loose-window b { font-size: 20px; font-weight: 550; }
.loose-window > i { height: 5px; background: #d4dfce; border-radius: 3px; display: block; margin-top: 12px; width: 95%; }
.loose-window > i:last-of-type { width: 66%; }
.loose-window small { display: block; font-size: 13px; margin-top: 14px; color: #6e7361; }
.loose-a { left: 483px; top: 55px; transform: rotate(-8deg); }.loose-b { left: 732px; top: 114px; transform: rotate(7deg); animation-delay: -1.5s; }.loose-c { left: 551px; top: 245px; transform: rotate(-2deg); animation-delay: -3s; }
.sticky-note { position: absolute; top: 302px; left: 829px; background: #f4d58b; padding: 20px; font-size: 20px; transform: rotate(9deg); box-shadow: 4px 6px 0 #937c3840; z-index: 7; }
.busy-path { position: absolute; width: 140px; border-top: 2px dashed #87a28d; top: 234px; left: 415px; transform: rotate(-30deg); }.path-b { top: 321px; left: 439px; transform: rotate(22deg); }
.dispatch-bubble { position: absolute; top: 43px; left: 355px; width: 370px; padding: 22px 26px; background: #fffcef; box-shadow: 6px 9px 0 #90aa9738; border-radius: 16px 16px 16px 0; z-index: 12; opacity: 0; transform: translateY(15px); transition: opacity .6s, transform .6s; }
.dispatch-bubble > span { display: block; color: #66816e; font-size: 12px; letter-spacing: .07em; margin-bottom: 13px; }
.dispatch-bubble strong { font-size: 24px; line-height: 1.1; font-weight: 550; }.dispatch-bubble p { font-size: 15px; line-height: 1.5; margin-top: 13px; color: #58705f; }
/* Small plastic Robots, each with its own color and a stable place in the team. */
.robot { --robot-light: #caebef; --robot-mid: #84c7d0; --robot-dark: #5c9aab; position: absolute; top: 230px; left: 540px; z-index: 10; width: 100px; height: 150px; opacity: 0; transform: translateY(45px); transition: opacity .7s, transform .9s, left .9s, top .9s; }
.robot-pip { --robot-light: #f8d6b2; --robot-mid: #e4ab7a; --robot-dark: #ba825c; left: 690px; transition-delay: .1s; }
.robot-nova { --robot-light: #e5d4ef; --robot-mid: #bba1d5; --robot-dark: #8c72a9; left: 835px; transition-delay: .2s; }
.robot-character { height: 145px; animation: robot-float 3.5s ease-in-out infinite; }.robot-pip .robot-character { animation-delay: -.8s; }.robot-nova .robot-character { animation-delay: -1.8s; }
.robot-head { position: absolute; top: 10px; left: 6px; width: 84px; height: 65px; border-radius: 26px; background: linear-gradient(135deg, #fff, var(--robot-light) 24%, var(--robot-mid) 75%, var(--robot-dark)); box-shadow: inset -5px -5px 7px #213e4930, inset 3px 3px 5px #fff9, 5px 5px 0 var(--robot-dark); z-index: 3; }
.robot-face { position: absolute; inset: 14px 11px 12px; border-radius: 16px; background: linear-gradient(150deg, #233e41, #0c262a); box-shadow: inset 0 3px 4px #0007, 0 1px 0 #fff8; display: flex; gap: 17px; align-items: center; justify-content: center; }
.robot-face > i { display: block; width: 7px; height: 12px; border-radius: 5px; background: #ccf9ed; box-shadow: 0 0 5px #cff; animation: blink 5s infinite; }
.robot-face b { position: absolute; width: 12px; height: 5px; border-bottom: 2px solid #a5d4c6; border-radius: 50%; top: 26px; left: 26px; }
.robot-antenna { position: absolute; top: -5px; left: 48px; width: 4px; height: 21px; background: var(--robot-dark); }
.robot-antenna::before { content: ''; width: 11px; height: 11px; border-radius: 50%; position: absolute; top: -5px; left: -4px; background: var(--robot-light); box-shadow: inset -2px -2px 0 var(--robot-dark); }
.robot-body { position: absolute; left: 24px; top: 80px; width: 52px; height: 48px; background: linear-gradient(110deg, var(--robot-light), var(--robot-mid)); border-radius: 14px 14px 20px 20px; box-shadow: inset -5px -4px 7px #26423a20; }
.robot-core { position: absolute; left: 20px; top: 15px; width: 12px; height: 12px; border: 3px solid #ffffffe0; border-radius: 50%; }
.robot-arm { position: absolute; width: 16px; height: 37px; top: 80px; border-radius: 9px; background: linear-gradient(90deg, var(--robot-light), var(--robot-mid)); transform-origin: 50% 0; }.arm-left { left: 5px; transform: rotate(13deg); }.arm-right { right: 4px; transform: rotate(-20deg); animation: robot-wave 4s ease-in-out infinite; }
.robot-foot { width: 27px; height: 16px; position: absolute; top: 133px; border-radius: 10px 10px 6px 6px; background: var(--robot-mid); box-shadow: 0 3px 0 var(--robot-dark); }.foot-left { left: 18px; }.foot-right { right: 14px; }
.robot-label { position: absolute; width: 130px; left: -15px; top: 175px; text-align: center; }.robot-label strong { display: block; font-size: 17px; }.robot-label span { display: block; font-size: 12px; margin-top: 3px; color: #526e5c; }
.team-platform { position: absolute; left: 512px; top: 322px; width: 428px; height: 67px; border-radius: 50%; background: #d2e7cf; box-shadow: 0 9px 0 #9fbd9c; opacity: 0; transition: opacity .7s; }
.team-platform > span { position: absolute; top: 101px; left: 42px; color: #5b7f64; font-size: 10px; letter-spacing: .09em; }
.work-cards { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.work-card { position: absolute; top: 63px; left: 440px; width: 161px; min-height: 150px; background: #f3f6ec; border: 1px solid #fff; border-radius: 12px; padding: 16px; box-shadow: 6px 7px 0 #78988030; z-index: 6; }.work-pip { left: 620px; top: 48px; }.work-nova { left: 800px; }
.work-status { font-size: 10px; letter-spacing: .06em; display: block; color: #537866; margin-bottom: 12px; }.work-card strong { font-size: 18px; line-height: 1.12; display: block; }.work-card p { font-size: 12px; margin-top: 5px; color: #5f7662; }
.document-lines i { height: 5px; border-radius: 3px; background: #d7e2d1; display: block; margin-top: 10px; }.document-lines i:last-child { width: 62%; }
.mini-bars { height: 49px; display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }.mini-bars i { width: 20%; height: 45%; background: #a2c3a7; border-radius: 3px 3px 0 0; }.mini-bars i:nth-child(2) { height: 75%; }.mini-bars i:nth-child(3) { height: 60%; }.mini-bars i:nth-child(4) { height: 95%; background: #e4bd6f; }
.slide-preview { background: #d9e8d8; padding: 9px; margin-top: 14px; border-radius: 3px; display: flex; gap: 9px; font-size: 12px; }.slide-preview > i { color: #738e73; font-size: 28px; font-style: normal; }
/* The same film set hosts browser, meeting, editor and operating-layer scenes. */
.scene-panel { opacity: 0; position: absolute; left: 430px; top: 35px; width: 530px; border-radius: 14px; overflow: hidden; z-index: 11; background: #f8faef; box-shadow: 7px 12px 0 #96b19a80, 0 20px 40px #37553a20; border: 1px solid #fff; transform: translateY(25px) rotateY(-5deg); transform-origin: left center; transition: opacity .6s, transform .8s; }
.window-bar { background: #e4eddd; min-height: 36px; display: flex; align-items: center; gap: 5px; padding: 11px 15px; font-size: 12px; color: #526a59; border-bottom: 1px solid #d2ddcc; }.window-bar > i { width: 6px; height: 6px; border-radius: 50%; background: #9db7a2; }.window-bar > span { margin-left: 5px; }.window-bar > b { font-size: 10px; margin-left: auto; color: #426f51; font-weight: 500; }
.browser-address { background: #edf2e9; border: 1px solid #d7e1d0; border-radius: 5px; margin: 13px 17px; padding: 7px 13px; color: #66816e; font-size: 12px; }
.venue-preview { display: flex; gap: 21px; padding: 7px 22px 24px; align-items: center; }.venue-preview > div:last-child { flex: 1; }.venue-preview span { font-size: 11px; letter-spacing: .09em; }.venue-preview h3 { font-family: Georgia, serif; font-size: 26px; font-weight: 400; margin: 8px 0; line-height: 1.05; }.venue-preview p { font-size: 12px; color: #7a816b; }
.venue-art { width: 147px; height: 129px; background: #dae5ca; border-radius: 80px 80px 8px 8px; position: relative; overflow: hidden; border: 7px solid #eceddb; }.venue-art::after { content: ''; position: absolute; bottom: 0; height: 30px; width: 100%; background: #b2c298; }.venue-art i { position: absolute; width: 6px; height: 73px; background: #81966b; left: 40px; bottom: 0; }.venue-art i::before { content: ''; position: absolute; bottom: 37px; left: -18px; width: 40px; height: 61px; background: #95ac7f; border-radius: 60% 45% 50% 45%; }.venue-art i:nth-child(2) { left: 88px; bottom: -23px; }.venue-art i:nth-child(3) { left: 130px; bottom: -10px; }
.human-checkpoint { padding: 16px 22px; background: #f6e8b7; display: flex; gap: 12px; align-items: start; flex-wrap: wrap; }.checkpoint-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; border: 1px solid #b09b5e; font-size: 20px; }.human-checkpoint strong { font-size: 17px; }.human-checkpoint p { font-size: 13px; line-height: 1.4; margin-top: 6px; }.takeover-demo { padding: 10px 13px; background: #254d3e; color: #f6f7e9; border-radius: 5px; font-size: 12px; margin-left: auto; align-self: end; }
.live-cursor { position: absolute; font-size: 28px; right: 98px; bottom: 32px; color: #37684d; animation: cursor-move 5s ease-in-out infinite; }.live-cursor span { position: absolute; top: 24px; left: 14px; padding: 4px 9px; border-radius: 3px; font-size: 11px; background: #37684d; color: white; }
.meeting-people { display: flex; gap: 22px; padding: 14px 20px; }.meeting-people > div { display: flex; align-items: center; gap: 8px; font-size: 11px; }.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 600; font-style: normal; }.avatar-sam { background: #e4b971; }.avatar-client { background: #b7cec3; }.avatar-nova { background: #d7c0e6; border-radius: 8px; }
.shared-board { background: #e3ebd4; margin: 0 18px; border-radius: 9px; padding: 20px; }.shared-board > span { font-size: 10px; letter-spacing: .08em; }.shared-board h3 { font-size: 24px; font-weight: 500; letter-spacing: -.035em; margin: 9px 0 17px; }.agenda-blocks { display: flex; gap: 8px; }.agenda-blocks i { font-style: normal; padding: 15px 10px; background: #f9f8e6; border-radius: 6px; font-size: 12px; flex: 1; text-align: center; }.board-edit { margin-top: 13px; border: 1px dashed #91869e; padding: 10px; font-size: 12px; background: #eee6f0; animation: edit-glow 4s ease-in-out infinite; }.board-edit span { float: right; }.meeting-message { padding: 17px 20px; font-size: 13px; }
.ide-scene { left: 410px; top: 32px; width: 550px; }.explorer-layout { display: grid; grid-template-columns: 144px 1fr; min-height: 254px; }.explorer-files { padding: 19px 12px; background: #edf1e6; display: flex; flex-direction: column; gap: 17px; font-size: 12px; }.explorer-files > strong { font-size: 10px; letter-spacing: .1em; color: #6e816d; }.selected-file { background: #d7e4cf; margin: -5px -5px; padding: 5px; border-radius: 4px; }.explorer-editor { padding: 18px 23px; }.editor-tab { font-size: 11px; color: #7c8771; }.explorer-editor h3 { font-size: 23px; font-family: Georgia, serif; line-height: 1.15; font-weight: 400; margin: 14px 0 15px; }.explorer-editor .document-lines { margin-bottom: 20px; }.review-change { font-size: 12px; background: #dcebd1; padding: 9px; color: #48603e; }.review-footer { display: flex; justify-content: space-between; font-size: 10px; margin-top: 17px; color: #6b7e60; }.ide-caption { display: flex; flex-direction: column; gap: 5px; background: #284f3e; color: #f0f5de; padding: 15px 20px; }.ide-caption strong { font-size: 20px; font-weight: 500; }.ide-caption span { font-size: 13px; color: #b7d0b9; }
.os-scene { position: absolute; left: 440px; top: 35px; width: 500px; z-index: 11; opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .7s; }.os-layer { padding: 20px 24px; border-radius: 12px; background: #f5f6e8; box-shadow: 0 7px 0 #a6bca3; border: 1px solid #fff; margin-bottom: 19px; transform: rotateY(-6deg); }.os-layer > span { display: block; font-size: 10px; letter-spacing: .09em; margin-bottom: 14px; color: #5d7962; }.os-layer > div { display: flex; justify-content: space-between; gap: 6px; }.os-layer b { font-size: 16px; font-weight: 500; }.os-tools { margin-left: 30px; background: #eae9f1; box-shadow: 0 7px 0 #b8adc7; }.os-home { margin-left: 15px; background: #d5e7d2; }.os-project { background: #f4e8c4; box-shadow: 0 7px 0 #c3b78f; }.os-locations { font-size: 12px; text-align: center; color: #5b7661; margin-top: 26px; }.os-locations span { margin: 0 9px; }
.results-scene { position: absolute; left: 430px; top: 34px; width: 520px; z-index: 12; opacity: 0; transform: translateY(15px); transition: opacity .6s, transform .8s; }.result-heading > span { display: block; font-size: 11px; letter-spacing: .1em; margin-bottom: 12px; }.result-heading > strong { font-size: 29px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }.result-artifacts { display: flex; gap: 12px; margin-top: 25px; }.result-artifacts > div { flex: 1; padding: 18px 12px; background: #f8f7e7; border: 1px solid #fff; border-radius: 8px; box-shadow: 4px 7px 0 #819b7840; transform: rotate(-3deg); }.result-artifacts > div:nth-child(2) { transform: rotate(2deg); background: #f1e6c9; }.result-artifacts > div:nth-child(3) { transform: rotate(-1deg); background: #e9e1ee; }.result-artifacts i { width: 25px; height: 25px; display: grid; place-items: center; background: #578969; color: #f9fcec; border-radius: 50%; font-style: normal; margin-bottom: 17px; }.result-artifacts b { display: block; font-size: 17px; font-weight: 550; line-height: 1.1; }.result-artifacts span { display: block; font-size: 11px; color: #6d7b63; margin-top: 10px; }.tomorrow-note { font-size: 14px; margin-top: 27px; text-align: center; color: #4f6c58; }
/* Scene visibility and choreography. All text also exists in the readable transcript. */
.film:not([data-view="today"]) .old-work { opacity: 0; transform: translateY(-30px); }
.film:not([data-view="today"]) .human { left: 113px; }.film:not([data-view="today"]) .desk { left: 230px; }
.film:not([data-view="today"]) .robot { opacity: 1; transform: translateY(0); }
.film[data-view="dispatch"] .dispatch-bubble { opacity: 1; transform: translateY(0); }
.film[data-view="dispatch"] .team-platform, .film[data-view="team"] .team-platform { opacity: 1; }
.film[data-view="team"] .robot-scout { left: 474px; }.film[data-view="team"] .robot-pip { left: 654px; }.film[data-view="team"] .robot-nova { left: 834px; }
.film[data-view="team"] .work-cards { opacity: 1; }
.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"], [data-view="results"]) .robot { transform: scale(.62); transform-origin: bottom center; top: 268px; left: 440px; }
.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"], [data-view="results"]) .robot-pip { left: 543px; }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"], [data-view="results"]) .robot-nova { left: 646px; }
.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .robot { top: 272px; left: 28px; z-index: 12; }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .robot-pip { left: 118px; }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .robot-nova { left: 208px; }
.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .human { transform: translateY(-18px) scale(.85); transform-origin: bottom center; }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .desk { transform: translate(-18px, -25px) scale(.85); }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .human-label { display: none; }
.film[data-view="browser"] .browser-scene, .film[data-view="meeting"] .meeting-scene, .film[data-view="editor"] .ide-scene { opacity: 1; transform: translateY(0) rotateY(-5deg); }
.film[data-view="os"] .os-scene, .film[data-view="results"] .results-scene { opacity: 1; transform: translateY(0); }
.film[data-view="results"] .robot { left: 520px; top: 270px; }.film[data-view="results"] .robot-pip { left: 650px; }.film[data-view="results"] .robot-nova { left: 780px; }
.film-caption { padding: 23px 27px 20px; display: flex; gap: 22px; min-height: 118px; align-items: start; border-top: 1px solid #46645b; }
.scene-number { font-size: .75rem; white-space: nowrap; color: #b2cebd; padding-top: 3px; letter-spacing: .07em; }
.film-caption h2 { font-size: clamp(1rem, 1.65vw, 1.25rem); font-weight: 500; margin-bottom: 8px; line-height: 1.3; letter-spacing: -.015em; }.film-caption p { font-size: .9rem; color: #b4c9be; line-height: 1.5; max-width: 940px; }
.film-controls { display: flex; gap: 16px; align-items: center; padding: 0 27px 20px; }.film-controls[hidden], .film-chapters[hidden] { display: none; }.film-controls button { border: 0; cursor: pointer; flex-shrink: 0; }.film-play { color: #153c2a; background: #c4e8cb; display: flex; align-items: center; gap: 10px; border-radius: 5px; min-width: 105px; min-height: 42px; padding: 10px 17px; font-weight: 600 !important; font-size: .85rem !important; }.play-symbol { font-size: 12px; }.film-restart { width: 40px; height: 42px; font-size: 27px !important; background: none; color: #c7d8cc; }.film-controls button:hover { filter: brightness(1.16); }.film-controls input { min-width: 40px; flex: 1; height: 28px; accent-color: #bee4ca; cursor: pointer; }.film-time { font-size: .75rem; font-variant-numeric: tabular-nums; color: #d0ded4; white-space: nowrap; }.sound-note { font-size: .75rem; color: #9fbaaa; padding-left: 12px; border-left: 1px solid #456151; }
.film-chapters { display: grid; grid-template-columns: repeat(8, 1fr); background: #0b1c18; border-top: 1px solid #2e483d; padding: 0 15px; }.film-chapters button { position: relative; padding: 15px 8px; background: transparent; border: 0; color: #a5bdb0; cursor: pointer; font-size: .75rem; min-height: 47px; }.film-chapters button > span { color: #638773; font-size: 10px; margin-right: 6px; }.film-chapters button[aria-current] { color: #eddf9f; }.film-chapters button[aria-current]::before { content: ''; position: absolute; height: 2px; background: #eddf9f; top: -1px; left: 0; right: 0; }.film-chapters button:hover { color: white; background: #183227; }
.film-transcript { border-bottom: 1px solid var(--wp-line); margin-top: 12px; color: var(--wp-muted); }.film-transcript summary { padding: 17px 0; cursor: pointer; font-size: .8rem; list-style: none; }.film-transcript summary span { float: right; }.film-transcript ol { padding: 12px 25px 20px; column-count: 2; column-gap: 40px; }.film-transcript li { font-size: .95rem; line-height: 1.7; margin-bottom: 18px; break-inside: avoid; }.film-transcript > p { font-size: .85rem; line-height: 1.6; padding: 0 0 25px; color: #8aab9d; }
.home-explanation { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12%; padding: 76px 0 !important; }.home-explanation h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.12; }.home-explanation > div > p:not(.kicker) { color: var(--wp-muted); font-size: 1.06rem; line-height: 1.8; margin-bottom: 18px; }.text-link { text-decoration: none; border-bottom: 1px solid #598372; padding-bottom: 6px; font-size: .9rem; line-height: 1.7; }.text-link span { margin-left: 10px; }
.home-analogies { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }.home-analogies article { border-top: 1px solid #567b67; background: #13271f; padding: 35px; }.home-analogies article:last-child { background: #242b20; border-color: #a8975b; }.analogy-tag { display: block; color: var(--wp-mint); font-size: .7rem; letter-spacing: .11em; margin-bottom: 22px; }.home-analogies article:last-child .analogy-tag { color: var(--wp-yellow); }.home-analogies h2 { font-size: 1.9rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.13; margin-bottom: 18px; }.home-analogies p { color: var(--wp-muted); line-height: 1.75; margin-bottom: 23px; }.home-analogies a { font-size: .9rem; text-decoration: none; }.home-analogies a:hover, .resource-links a:hover { text-decoration: underline; }
.home-contact { margin-top: 75px; padding: 40px 0 !important; border-top: 1px solid var(--wp-line); display: flex; justify-content: space-between; align-items: center; gap: 30px; }.home-contact h2 { font-size: 2rem; font-weight: 500; letter-spacing: -.035em; }.home-contact p:not(.kicker) { color: var(--wp-muted); margin-top: 13px; line-height: 1.6; }.primary-link { display: inline-block; padding: 15px 21px; background: var(--wp-mint); color: #173d2a !important; font-size: .9rem; font-weight: 600; border-radius: 5px; text-decoration: none; white-space: nowrap; }.primary-link span { margin-left: 25px; }.primary-link:hover { background: #c9f5df; }
.resource-links { display: flex; gap: 28px; padding: 25px 0; border-top: 1px solid var(--wp-line); font-size: .8rem; color: var(--wp-muted); flex-wrap: wrap; }.resource-links a { text-decoration: none; }.workplace-footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 35px 5%; background: #06110e; color: #9bb5a9; font-size: .75rem; }.workplace-footer > a:first-child { font-size: 1.4rem; font-weight: 550; letter-spacing: -.06em; color: #e2f0e5; text-decoration: none; }.workplace-footer > a:first-child span { color: #a6d8bc; }.workplace-footer > a:last-child { text-decoration: none; }
/* Vision: short passages and diagrams share the same vocabulary as the film. */
.vision-heading { padding: 65px 0 42px; }.vision-heading h1 { font-size: clamp(3rem, 6vw, 5.2rem); line-height: .99; font-weight: 500; letter-spacing: -.055em; margin-bottom: 28px; }.vision-heading h1 span { color: var(--wp-mint); }.vision-heading > p:not(.kicker) { color: var(--wp-muted); font-size: 1.15rem; line-height: 1.65; margin-bottom: 24px; }.vision-status { margin-top: 36px; font-size: .8rem; color: #a3bdad; display: flex; gap: 10px; align-items: center; line-height: 1.6; }.vision-jump { display: flex; gap: 27px; border-block: 1px solid var(--wp-line); padding: 20px 0; flex-wrap: wrap; }.vision-jump a { font-size: .85rem; color: #c0d6c7; text-decoration: none; }.vision-jump a:hover { color: var(--wp-yellow); }
.vision-section-block { padding: 72px 0 !important; border-bottom: 1px solid var(--wp-line); scroll-margin-top: 30px; position: relative; }.anchor-alias { position: absolute; top: 0; }.section-lead { max-width: 770px; margin-bottom: 32px; }.section-lead h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; margin-bottom: 22px; }.section-lead > p:not(.kicker) { color: var(--wp-muted); font-size: 1.1rem; line-height: 1.75; }.section-note { color: #91b1a2; font-size: .85rem; line-height: 1.7; margin-top: 24px; max-width: 900px; }
.day-story { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #749580; gap: 30px; }.day-story article { padding: 22px 0 5px; position: relative; }.day-story article::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: #c4e5bb; border-radius: 50%; }.day-story time { display: block; font-size: 2.7rem; letter-spacing: -.055em; color: #cae6c2; margin-bottom: 28px; font-weight: 400; }.day-label { color: #91b1a2; font-size: .65rem; letter-spacing: .09em; }.day-story h3 { margin: 13px 0; font-size: 1.25rem; font-weight: 500; line-height: 1.22; }.day-story p { color: var(--wp-muted); line-height: 1.75; }
.vocabulary-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #385343; border: 1px solid #385343; border-radius: 9px; overflow: hidden; }.vocabulary-flow article { padding: 30px; background: #14271f; }.term-number { font-size: .75rem; color: #93b39d; }.vocabulary-flow h3 { font-size: 1.6rem; font-weight: 500; margin: 18px 0 14px; }.vocabulary-flow p { color: var(--wp-muted); line-height: 1.7; }.vocabulary-flow .term-question { color: #deebd6; line-height: 1.5; margin-bottom: 18px; min-height: 3em; }.vocabulary-flow strong { display: block; border-top: 1px solid #3d5644; padding-top: 18px; margin-top: 24px; font-size: .8rem; font-weight: 500; color: var(--wp-mint); }.vision-pullquote { color: #d9e6d0; border-left: 2px solid var(--wp-yellow); padding-left: 25px; font-size: 1.5rem; letter-spacing: -.015em; line-height: 1.45; margin-top: 38px; }
.workspace-map { background: #e4ecdc; color: #24412e; border-radius: 12px; overflow: hidden; }.workspace-map-header { background: #cbdac1; padding: 18px 24px; display: flex; gap: 20px; justify-content: space-between; font-size: .8rem; }.workspace-map-header strong { font-weight: 500; }.workspace-map-header > span:first-child { font-size: .7rem; letter-spacing: .12em; }.workspace-map-header > span:last-child { color: #516c50; }.workspace-map-content { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 30px; padding: 35px; }.map-label { display: block; font-size: .65rem; letter-spacing: .09em; color: #5a7257; margin-bottom: 22px; }.workspace-map-content h3 { font-size: 1.3rem; font-weight: 500; line-height: 1.25; }.workspace-map-content ul { list-style: none; margin-top: 22px; }.workspace-map-content li { line-height: 1.5; padding-block: 11px; border-bottom: 1px solid #c7d5bc; font-size: .95rem; }.workspace-map-content li b { font-weight: 600; }.workspace-map-artifact { text-align: center; }.paper-artifact { text-align: left; background: #faf9ec; padding: 23px; box-shadow: 5px 7px 0 #b3c5a750, 0 10px 20px #49633915; border-radius: 3px; transform: rotate(-3deg); }.paper-artifact > span { font-size: .65rem; color: #7c876b; }.paper-artifact h3 { font-family: Georgia, serif; font-size: 2.3rem; letter-spacing: -.04em; margin-block: 20px 30px; }.paper-artifact > i { display: block; height: 6px; background: #e1e6d6; margin-bottom: 9px; }.paper-artifact > i:last-of-type { width: 68%; }.paper-artifact > p { margin-top: 23px; font-size: .75rem; background: #dceacb; padding: 10px; }.workspace-map-artifact > p { font-size: .8rem; color: #5e7455; margin-top: 25px; }
.os-comparison { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: stretch; }.os-comparison article { background: #14281f; padding: 32px; border-top: 2px solid #66896d; }.os-comparison article:last-child { background: #293022; border-color: var(--wp-yellow); }.os-comparison article > span { font-size: .7rem; letter-spacing: .06em; color: #a7bc97; }.os-comparison h3 { margin: 20px 0; font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; }.os-comparison ul { list-style: none; color: var(--wp-muted); line-height: 1.7; }.os-comparison li { padding: 9px 0; border-top: 1px solid #53604460; }.comparison-arrow { display: grid; place-items: center; color: var(--wp-mint); font-size: 26px; }
.control-story { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: center; margin-top: 70px; }.control-story h3 { font-size: 2.2rem; font-weight: 500; line-height: 1.1; letter-spacing: -.04em; margin-bottom: 20px; }.control-story p { color: var(--wp-muted); line-height: 1.75; }.control-task { border: 1px solid #416147; background: #14271e; border-radius: 10px; padding: 27px; }.control-task > span { display: block; font-size: .7rem; letter-spacing: .1em; color: #a8c2a4; margin-bottom: 23px; }.task-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; padding: 17px 0; border-top: 1px solid #344f39; align-items: center; font-size: .85rem; }.task-row b { font-weight: 450; }.task-row > span { font-size: .7rem; color: #abc09f; }.task-dot { width: 6px; height: 6px; border-radius: 50%; background: #b1d8ab; }.task-dot.waiting { background: #e1c173; }.control-task > p { padding: 16px 17px; background: #293a25; margin-top: 10px; font-size: .9rem; color: #d4dcbf; border-radius: 5px; }
.use-case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }.use-case-grid article { padding: 28px 0; border-top: 1px solid #506d54; }.use-case-grid article > span { font-size: .7rem; letter-spacing: .07em; color: #acc599; }.use-case-grid h3 { font-size: 1.6rem; font-weight: 500; letter-spacing: -.025em; margin: 18px 0; }.use-case-grid p { color: var(--wp-muted); line-height: 1.75; max-width: 480px; }.use-case-grid article > div { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; color: #aac697; font-size: .9rem; line-height: 1.6; }.use-case-grid article > div b { font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: #7e9e71; }
.continuity-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; }.continuity-section h2 { font-size: 2.8rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.06; margin-bottom: 27px; }.continuity-section h2 span { color: var(--wp-mint); }.continuity-section > div > p:not(.kicker) { font-size: 1rem; line-height: 1.75; color: var(--wp-muted); margin-bottom: 15px; }.continuity-visual { text-align: center; }.replaceable-engines { display: flex; justify-content: center; gap: 20px; align-items: center; }.replaceable-engines > span { padding: 14px; border: 1px dashed #667658; border-radius: 7px; color: #b1c79e; font-size: .9rem; }.replaceable-engines b { font-weight: 400; color: #adc296; }.continuity-connector { display: block; margin: 20px; color: #89a676; }.durable-project { padding: 32px 20px; background: #dfe8cc; color: #314a2b; border-radius: 10px; box-shadow: 0 8px 0 #778b5b; }.durable-project > span { font-size: .7rem; letter-spacing: .1em; }.durable-project strong { display: block; font-size: 2rem; font-weight: 500; letter-spacing: -.035em; margin: 20px 0; }.durable-project p { font-size: .85rem; }.location-options { display: flex; gap: 35px; justify-content: center; margin-top: 35px; color: #8aa574; font-size: .8rem; }
.roadmap-list article { display: grid; grid-template-columns: 230px 1fr; gap: 35px; padding: 30px 0; border-top: 1px solid #385135; }.roadmap-list article > span { font-size: .7rem; letter-spacing: .08em; color: #afc492; margin-top: 6px; }.roadmap-list h3 { font-size: 1.4rem; font-weight: 500; margin-bottom: 16px; letter-spacing: -.02em; }.roadmap-list p { color: var(--wp-muted); line-height: 1.75; max-width: 730px; }.roadmap-list a { color: #c2d5a4; text-decoration: none; display: inline-block; font-size: .9rem; margin-top: 20px; }.vision-closing { padding: 70px 0 !important; }.vision-closing h2 { font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.07; }.vision-closing p:not(.kicker) { margin: 22px 0 30px; color: var(--wp-muted); line-height: 1.6; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes human-type { 0%, 100% { rotate: 0deg; } 50% { rotate: -3deg; } }
@keyframes robot-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes blink { 0%, 42%, 46%, 100% { scale: 1 1; } 44% { scale: 1 .15; } }
@keyframes robot-wave { 0%, 100% { rotate: 0deg; } 50% { rotate: -12deg; } }
@keyframes cursor-move { 0%, 100% { translate: 0 0; } 45%, 75% { translate: 18px -20px; } }
@keyframes edit-glow { 0%, 100% { background: #eee6f0; } 50% { background: #e3d2eb; } }
@media (max-width: 1000px) { .home-heading { gap: 30px; grid-template-columns: 1.3fr 1fr; }.sound-note { display: none; }.film-chapters { padding-inline: 8px; }.film-chapters button { font-size: .7rem; }.film-chapters button > span { display: none; }.workspace-map-content { grid-template-columns: 1fr 1fr; padding: 26px; }.workspace-map-content > div:last-child { grid-column: 1 / -1; }.workspace-map-content > div:last-child ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 25px; }.workspace-map-header > span:last-child { display: none; }.day-story { grid-template-columns: 1fr 1fr; border: 0; row-gap: 35px; }.day-story article { border-top: 1px solid #749580; }.day-story time { margin-bottom: 20px; }.vocabulary-flow article { padding: 24px; }.control-story { gap: 30px; }.continuity-section { gap: 30px; } }
@media (max-width: 680px) {
    .workplace-main { width: 92%; }.home-heading { display: block; padding: 35px 0 26px; }.home-heading h1 { font-size: clamp(2rem, 6.8vw, 2.75rem); }.home-heading .kicker { font-size: .65rem; margin-bottom: 16px; }.hero-intro { margin-top: 20px; font-size: .95rem; max-width: 100%; }.hero-intro a { margin-top: 9px; }.film { border-radius: 10px; }.film-topline { padding: 12px 14px; flex-wrap: wrap; font-size: .6rem; gap: 7px; }.concept-label { font-size: .65rem; }.film-caption { padding: 19px 16px; gap: 12px; min-height: 151px; }.scene-number { font-size: .65rem; }.film-caption p { font-size: .85rem; }.film-controls { padding: 0 14px 17px; gap: 5px; flex-wrap: wrap; }.film-play { min-width: 83px; padding: 10px 12px; min-height: 44px; gap: 8px; }.film-restart { width: 35px; }.film-time { font-size: .65rem; margin-left: 5px; }.film-chapters { grid-template-columns: repeat(4, 1fr); padding: 0; }.film-chapters button { font-size: .7rem; padding-block: 14px; }.film-chapters button:nth-child(n+5) { border-top: 1px solid #264234; }.film-transcript ol { column-count: 1; }.film-transcript summary { font-size: .75rem; }
    .home-explanation { grid-template-columns: 1fr; gap: 26px; padding: 45px 0 !important; }.home-explanation h2 br { display: none; }.home-explanation > div > p:not(.kicker) { font-size: 1rem; }.home-analogies { grid-template-columns: 1fr; gap: 18px; }.home-analogies article { padding: 25px; }.home-analogies h2 { font-size: 1.7rem; }.home-contact { margin-top: 45px; align-items: start; flex-direction: column; }.home-contact h2 { font-size: 1.8rem; }.workplace-footer { flex-wrap: wrap; line-height: 1.7; gap: 16px; }.workplace-footer p { order: 3; flex-basis: 100%; }.resource-links { gap: 22px; font-size: .75rem; }
    .vision-heading { padding: 42px 0 30px; }.vision-heading h1 { font-size: 3.1rem; }.vision-heading > p:not(.kicker) { font-size: 1rem; }.vision-heading > p > br { display: none; }.vision-jump { gap: 15px 24px; }.vision-jump a { font-size: .8rem; }.vision-section-block { padding: 45px 0 !important; }.section-lead > p:not(.kicker) { font-size: 1rem; }.day-story { gap: 30px 22px; }.day-story time { font-size: 2.3rem; }.day-label { font-size: .6rem; line-height: 1.4; display: block; }.day-story h3 { font-size: 1.1rem; }.day-story p { font-size: .9rem; }.vocabulary-flow { grid-template-columns: 1fr; }.vocabulary-flow .term-question { min-height: 0; }.vision-pullquote { font-size: 1.2rem; }.workspace-map-header { padding: 17px; flex-direction: column; gap: 10px; }.workspace-map-content { grid-template-columns: 1fr; padding: 24px; }.workspace-map-content > div:last-child ul { display: block; }.workspace-map-artifact { margin: 10px 5px; }.os-comparison { grid-template-columns: 1fr; }.comparison-arrow { height: 45px; transform: rotate(90deg); }.os-comparison article { padding: 24px; }.control-story { grid-template-columns: 1fr; margin-top: 45px; }.control-task { padding: 20px; }.task-row { grid-template-columns: 6px 1fr; }.task-row > span { grid-column: 2; }.use-case-grid { grid-template-columns: 1fr; gap: 0; }.continuity-section { grid-template-columns: 1fr; gap: 35px; }.continuity-section h2 { font-size: 2.2rem; }.roadmap-list article { grid-template-columns: 1fr; gap: 18px; }.vision-closing { padding: 45px 0 !important; }
    /* Recompose the set for a portrait stage, instead of shrinking the desktop film. */
    .film-world { width: 620px; height: 580px; }.film-viewport { height: 350px; }.set-floor { width: 620px; height: 215px; left: 0; top: 340px; }.set-orbit { width: 600px; left: 10px; top: 310px; }.orbit-two { width: 570px; left: 25px; top: 340px; }.floor-mark { display: none; }.scene-stamp { top: 25px; left: 27px; }.stamp-time { font-size: 15px; }.stamp-title { font-size: 27px; max-width: 270px; }.human { left: 78px; top: 280px; }.desk { left: 199px; top: 404px; }.human-label { top: 238px; font-size: 22px; }.human-label span { font-size: 15px; }.loose-a { left: 330px; top: 31px; width: 237px; }.loose-b { left: 357px; top: 210px; width: 220px; }.loose-c { left: 329px; top: 377px; width: 254px; }.sticky-note { left: 82px; top: 154px; font-size: 23px; }.busy-path { display: none; }.loose-window b { font-size: 23px; }.loose-window span { font-size: 16px; }.loose-window small { font-size: 16px; }
    .film:not([data-view="today"]) .human { left: 45px; }.film:not([data-view="today"]) .desk { left: 166px; }.dispatch-bubble { left: 247px; top: 37px; width: 345px; padding: 22px; }.dispatch-bubble > span { font-size: 13px; }.dispatch-bubble strong { font-size: 25px; }.dispatch-bubble p { font-size: 17px; }.robot { left: 301px; top: 323px; transform: translateY(25px) scale(.85); }.robot-pip { left: 398px; }.robot-nova { left: 497px; }.film:not([data-view="today"]) .robot { transform: scale(.85); }.robot-label strong { font-size: 20px; }.robot-label span { font-size: 16px; }.team-platform { top: 417px; left: 294px; width: 307px; }.team-platform > span { top: 115px; left: -8px; font-size: 11px; }.work-card { left: 32px; top: 165px; width: 171px; min-height: 175px; }.work-pip { left: 224px; top: 156px; }.work-nova { left: 414px; }.work-status { font-size: 12px; }.work-card strong { font-size: 22px; }.work-card p { font-size: 16px; }.slide-preview { font-size: 14px; }.film[data-view="team"] .human, .film[data-view="team"] .desk { opacity: 0; }.film[data-view="team"] .robot { top: 368px; transform: scale(1); }.film[data-view="team"] .robot-scout { left: 63px; }.film[data-view="team"] .robot-pip { left: 259px; }.film[data-view="team"] .robot-nova { left: 456px; }.film[data-view="team"] .team-platform { left: 33px; width: 552px; top: 453px; }.film[data-view="team"] .team-platform > span { display: none; }
    .scene-panel { left: 36px; top: 146px; width: 548px; transform: translateY(15px); }.window-bar { font-size: 14px; }.window-bar > b { font-size: 12px; }.browser-address { font-size: 14px; }.human-checkpoint strong { font-size: 19px; }.human-checkpoint p { font-size: 16px; }.takeover-demo { font-size: 14px; }.meeting-people > div { font-size: 13px; }.meeting-message { font-size: 16px; }.shared-board > span { font-size: 12px; }.shared-board h3 { font-size: 27px; }.agenda-blocks i, .board-edit { font-size: 15px; }.explorer-files { font-size: 15px; }.explorer-editor h3 { font-size: 25px; }.review-change { font-size: 13px; }.ide-caption span { font-size: 16px; }.os-scene { top: 148px; left: 41px; width: 534px; }.os-layer > span { font-size: 12px; }.os-layer b { font-size: 19px; }.os-locations { font-size: 16px; }.os-layer { padding: 22px; }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .human, .film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .desk { opacity: 0; }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .robot { top: -14px; left: 314px; transform: scale(.55); }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .robot-pip { left: 400px; }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .robot-nova { left: 487px; }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .robot-label { display: none; }.results-scene { left: 30px; top: 142px; width: 560px; }.result-heading > strong { font-size: 30px; }.result-heading > span { font-size: 13px; }.result-artifacts b { font-size: 20px; }.result-artifacts span { font-size: 14px; }.tomorrow-note { font-size: 17px; }.film[data-view="results"] .human, .film[data-view="results"] .desk { opacity: 0; }.film[data-view="results"] .robot { top: 372px; left: 73px; transform: scale(.8); }.film[data-view="results"] .robot-pip { left: 256px; }.film[data-view="results"] .robot-nova { left: 445px; }
}
@media (prefers-reduced-motion: reduce) { .film-world *, .film-world *::before, .film-world *::after { animation: none !important; transition: none !important; }.workplace-page { scroll-behavior: auto; } }
.stamp-title { white-space: pre-line; }
.team-platform > span, .floor-mark { display: none; }
.human-hair { right: 9px; bottom: 23px; }
.human-hair::after { box-shadow: 3px 27px 0 0 #39362f; }
@media (min-width: 681px) { .home-heading { padding-top: 36px; } }
/* Keep character names outside the illustration, clear of furniture and platforms. */
.robot-label, .human-label { display: none !important; }
.human { width: 310px; height: 285px; left: 115px; top: 152px; }
.office-character { display: block; width: 100%; height: 100%; overflow: visible; }
.film:not([data-view="today"]) .human { left: 40px; }
.film-cast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 14px 28px; background: #d4e2cf; color: #254132; }
.film-cast > div { display: flex; align-items: center; gap: 10px; }
.film-cast i { width: 10px; height: 10px; flex-shrink: 0; border-radius: 4px; background: #d6a259; }
.film-cast .cast-scout { background: #568f9d; }.film-cast .cast-pip { background: #be865c; }.film-cast .cast-nova { background: #9278ad; }
.film-cast strong { font-size: .8rem; font-weight: 600; }.film-cast small { display: block; font-size: .75rem; color: #516b57; margin-top: 3px; }
.film-voice { background: #18362a; color: #c7dcca; border: 1px solid #476d52 !important; border-radius: 5px; padding: 10px 13px; font-size: .8rem !important; min-height: 42px; }
.film-voice[aria-pressed="true"] { background: #e8d89b; color: #304127; border-color: #e8d89b !important; }
.film-voice:disabled { cursor: default; color: #99ad9d; }
@media (min-width: 681px) { .film-viewport { background: radial-gradient(ellipse at 65% 20%, #f1f6e5, #d2e2d4 65%, #bbd0c4); } }
@media (max-width: 680px) {
    .human { left: 2px; top: 270px; width: 333px; height: 304px; }
    .film:not([data-view="today"]) .human { left: -10px; }
    .film-cast { gap: 12px; padding: 13px 16px; grid-template-columns: repeat(2, 1fr); }
    .film-cast strong { font-size: .8rem; }.film-cast small { font-size: .7rem; }
    .film-voice { font-size: .75rem !important; margin-left: auto; min-height: 44px; }
    .film-controls input { flex-basis: 26%; }.film-time { margin-right: 6px; }
}
/* A room with a wall projection. The floor is a floor, never a character platform. */
.film-viewport { background: #e3eadd; }
.film-world { background: linear-gradient(100deg, #c5d4c5 0 3%, #e5ecdc 3.15% 100%); }
.office-wall { position: absolute; inset: 0 0 106px; border-bottom: 8px solid #bdcbb7; background: linear-gradient(110deg, #dce5d5, #f2f4e6 70%, #e5ecd9); box-shadow: 0 2px 3px #657d5720; }
.office-wall::before { content: ''; position: absolute; top: 0; left: 28px; bottom: 0; width: 2px; background: #a3b49e; opacity: .3; }
.set-orbit, .team-platform { display: none; }
.set-floor { left: 0; top: 364px; width: 1000px; height: 106px; border-radius: 0; transform: none; background: repeating-linear-gradient(173deg, transparent 0 36px, #b4c2a94d 37px 38px), linear-gradient(#d6dcc7, #c5d1ba); box-shadow: none; }
.projection-screen { position: absolute; top: 25px; left: 393px; width: 580px; height: 323px; background: #f7f9ef; border: 8px solid #d3dccb; border-radius: 7px; box-shadow: 0 10px 20px #5d755022, inset 0 0 25px #d6e7da55; }
.projection-screen::after { content: ''; position: absolute; bottom: -11px; left: -15px; right: -15px; height: 8px; background: #bccbb5; border-radius: 5px; box-shadow: 0 3px 4px #657d5720; }
.projection-screen > span { position: absolute; bottom: 9px; left: 15px; color: #738a6e; font-size: 9px; letter-spacing: .08em; }
.scene-stamp { left: 48px; top: 35px; }.stamp-title { font-size: 24px; max-width: 260px; }.stamp-time { font-size: 11px; }
.human, .film:not([data-view="today"]) .human { left: 55px; top: 150px; width: 310px; height: 285px; }
.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"]) .human { transform: none; }
.loose-window { box-shadow: 2px 4px 0 #cedcc3; padding: 15px; animation: none; border: 1px solid #dce5d1; }.loose-window span { margin-bottom: 9px; font-size: 12px; }.loose-window b { font-size: 18px; }.loose-window small { font-size: 11px; }
.loose-a { left: 423px; top: 49px; width: 220px; transform: rotate(-3deg); }.loose-b { left: 685px; top: 55px; width: 245px; transform: rotate(2deg); }.loose-c { left: 442px; top: 190px; width: 258px; transform: rotate(-1deg); }.sticky-note { left: 758px; top: 212px; font-size: 18px; padding: 16px; }.busy-path { display: none; }
.dispatch-bubble { left: 429px; top: 50px; width: 498px; box-shadow: none; background: #edf2e4; border-radius: 10px; }.dispatch-bubble strong { font-size: 28px; }.dispatch-bubble p { font-size: 17px; }
.robot { top: 300px; }.film:not([data-view="today"]) .robot { transform: scale(.8); transform-origin: bottom center; }.robot-scout, .film[data-view="team"] .robot-scout { left: 460px; }.robot-pip, .film[data-view="team"] .robot-pip { left: 654px; }.robot-nova, .film[data-view="team"] .robot-nova { left: 843px; }
.robot::after { content: ''; position: absolute; top: 153px; left: 8px; width: 88px; height: 12px; border-radius: 50%; background: #59725122; }
.work-card { top: 68px; left: 417px; min-height: 201px; box-shadow: none; border: 1px solid #d4dfce; }.work-pip { left: 601px; top: 68px; }.work-nova { left: 785px; }.work-card strong { font-size: 20px; }.work-card p { font-size: 13px; }.work-status { font-size: 11px; }.work-card .mini-bars { height: 75px; }.work-card .slide-preview { margin-top: 27px; padding: 14px 8px; }
.scene-panel { top: 40px; left: 408px; width: 550px; border-radius: 3px; box-shadow: none; transform: translateY(12px) scale(.86); transform-origin: top left; }
.film[data-view="browser"] .browser-scene, .film[data-view="meeting"] .meeting-scene, .film[data-view="editor"] .ide-scene { transform: scale(.86); left: 430px; top: 43px; }
.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"], [data-view="results"]) .robot { left: 460px; top: 300px; transform: scale(.8); }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"], [data-view="results"]) .robot-pip { left: 654px; }.film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"], [data-view="results"]) .robot-nova { left: 843px; }
.os-scene { left: 426px; top: 42px; width: 505px; }.os-layer { padding: 12px 17px; margin-bottom: 12px; border-radius: 6px; box-shadow: 0 3px 0 #b4c3a8; transform: none; }.os-layer > span { margin-bottom: 10px; }.os-locations { margin-top: 15px; }.os-tools, .os-home { margin-left: 0; }
.results-scene { left: 421px; top: 45px; width: 516px; }.result-heading > strong { font-size: 26px; }.result-heading > span { margin-bottom: 8px; }.result-artifacts { margin-top: 20px; }.result-artifacts > div { padding: 13px; box-shadow: 2px 4px 0 #c5d2b7; }.result-artifacts i { margin-bottom: 12px; }.tomorrow-note { margin-top: 19px; font-size: 13px; }
.laptop-screen text { font-family: Arial, sans-serif; font-size: 9px; }.monitor-scene { display: none; }
.film[data-view="today"] .monitor-today, .film[data-view="dispatch"] .monitor-dispatch, .film[data-view="team"] .monitor-team, .film[data-view="browser"] .monitor-browser, .film[data-view="computer"] .monitor-computer, .film[data-view="meeting"] .monitor-meeting, .film[data-view="editor"] .monitor-editor, .film[data-view="switch"] .monitor-switch { display: inline; }
.sam-head-motion { transform-box: view-box; transform-origin: 100px 115px; animation: sam-look 7.2s ease-in-out infinite; }
.sam-arm-motion { transform-box: view-box; transform-origin: 101px 150px; animation: sam-work 4.6s ease-in-out infinite; }
.sam-eyes { transform-box: view-box; transform-origin: 120px 83px; animation: sam-blink 6.7s ease-in-out infinite; }
.sam-smile { opacity: 0; transform-box: view-box; transform-origin: 121px 104px; }
.sam-mouth-neutral { opacity: 1; }
.sam-far-arm-motion { transform-box: view-box; transform-origin: 113px 143px; animation: sam-far-work 5.3s ease-in-out infinite; }
.sam-gaze { animation: sam-gaze 9s ease-in-out infinite; }
.sam-brows { animation: sam-brows 9s ease-in-out infinite; }
.film:is([data-view="editor"], [data-view="meeting"], [data-view="results"]) .sam-head-motion { animation-name: sam-nod; animation-duration: 6.8s; }
.film:is([data-view="editor"], [data-view="results"]) .sam-arm-motion { animation-name: sam-celebrate; animation-duration: 8s; }
.film[data-view="meeting"] .sam-arm-motion { animation-name: sam-greet; animation-duration: 10s; }
.film:is([data-view="editor"], [data-view="meeting"], [data-view="results"]) .sam-smile { animation: sam-smile 8s ease-in-out infinite; }
.film:is([data-view="editor"], [data-view="meeting"], [data-view="results"]) .sam-mouth-neutral { animation: sam-neutral-mouth 8s ease-in-out infinite; }
.film:is([data-view="editor"], [data-view="results"]) .sam-far-arm-motion { animation: sam-far-gesture 8s ease-in-out infinite; }
.film[data-view="meeting"] .sam-far-arm-motion { animation: sam-far-gesture 10s ease-in-out infinite; }

@keyframes sam-look { 0%, 100% { transform: rotate(0); } 24%, 35% { transform: rotate(4deg); } 57%, 68% { transform: rotate(-2deg); } }
@keyframes sam-work { 0%, 28%, 60%, 100% { transform: rotate(0); } 12%, 42% { transform: rotate(-.8deg); } 77%, 84% { transform: rotate(.4deg); } }
@keyframes sam-blink { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.12); } }
@keyframes sam-nod { 0%, 65%, 100% { transform: rotate(0); } 12%, 34% { transform: rotate(5deg); } 23%, 46% { transform: rotate(-3deg); } }
@keyframes sam-celebrate { 0%, 52%, 100% { transform: rotate(0); } 15%, 35% { transform: rotate(-15deg); } 24% { transform: rotate(-12deg); } }
@keyframes sam-greet { 0%, 44%, 100% { transform: rotate(0); } 12%, 26% { transform: rotate(-18deg); } 19%, 33% { transform: rotate(-13deg); } }
@media (max-width: 680px) {
    .film-world { width: 620px; height: 720px; }
    .office-wall { bottom: 178px; }.set-floor { top: 542px; width: 620px; height: 178px; }
    .scene-stamp { top: 19px; left: 26px; }.stamp-time { font-size: 12px; margin-bottom: 8px; }.stamp-title { font-size: 23px; max-width: 100%; white-space: normal; }
    .projection-screen { left: 23px; top: 111px; width: 574px; height: 328px; }
    .human, .film:not([data-view="today"]) .human { left: 12px; top: 441px; width: 306px; height: 279px; opacity: 1 !important; transform: none !important; }
    .loose-a { left: 51px; top: 137px; width: 220px; }.loose-b { left: 315px; top: 139px; width: 237px; }.loose-c { left: 67px; top: 275px; width: 247px; }.sticky-note { left: 389px; top: 300px; }
    .dispatch-bubble { top: 141px; left: 58px; width: 498px; }.work-card { top: 148px; left: 48px; width: 161px; min-height: 213px; }.work-pip { left: 230px; top: 148px; }.work-nova { left: 412px; }.work-card strong { font-size: 22px; }.work-card p { font-size: 15px; }
    .film .robot, .film[data-view="team"] .robot, .film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"], [data-view="results"]) .robot { top: 503px; left: 308px; transform: scale(.68); transform-origin: bottom center; }
    .film .robot-pip, .film[data-view="team"] .robot-pip, .film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"], [data-view="results"]) .robot-pip { left: 407px; }.film .robot-nova, .film[data-view="team"] .robot-nova, .film:is([data-view="browser"], [data-view="meeting"], [data-view="editor"], [data-view="os"], [data-view="results"]) .robot-nova { left: 508px; }
    .film[data-view="browser"] .browser-scene, .film[data-view="meeting"] .meeting-scene, .film[data-view="editor"] .ide-scene { top: 127px; left: 66px; transform: scale(.89); }
    .os-scene { left: 47px; top: 133px; width: 524px; }.os-layer { padding: 12px 17px; }.os-layer b { font-size: 18px; }.os-layer > span { font-size: 11px; }.os-locations { font-size: 14px; }
    .results-scene { left: 49px; top: 129px; width: 517px; }.result-heading > strong { font-size: 26px; }.result-artifacts b { font-size: 18px; }.result-artifacts span { font-size: 13px; }.tomorrow-note { font-size: 14px; }
}
.copilot-dispatch { display: flex; gap: 12px; margin-top: 17px; flex-wrap: wrap; font-size: 12px; }.copilot-dispatch b { flex-basis: 100%; font-weight: 500; color: #487257; }.copilot-dispatch span { padding: 7px 11px; border: 1px solid #c3d6b8; border-radius: 4px; }
.dispatch-bubble { top: 42px; padding: 16px 22px; }.dispatch-bubble > span { margin-bottom: 10px; }.dispatch-bubble strong { font-size: 24px; }.dispatch-bubble p { font-size: 15px; margin-top: 10px; }
.film-chapters { grid-template-columns: repeat(10, 1fr); padding-inline: 5px; }.film-chapters button { font-size: .7rem; padding-inline: 4px; }.film-chapters button > span { display: none; }
.film[data-view="computer"] .computer-scene, .film[data-view="switch"] .switch-scene { opacity: 1; transform: scale(.86); top: 43px; left: 430px; }
.desktop-menu { display: flex; justify-content: space-between; padding: 13px 16px; background: #d8e5d1; font-size: 13px; }.desktop-menu > strong { font-weight: 500; }.desktop-menu > span { font-size: 11px; color: #5d775c; }
.desktop-work { padding: 15px; background: #e8eee0; position: relative; }.sheet-grid { display: grid; grid-template-columns: 25px 1.7fr 1fr 1fr; background: #c7d5bd; gap: 1px; border: 1px solid #c7d5bd; font-size: 12px; }.sheet-grid > * { padding: 8px; background: #fafbef; font-weight: 400; }.sheet-grid > b { background: #dbe7d3; font-size: 10px; text-align: center; }.sheet-grid > strong { background: #eff4e7; font-weight: 600; }.sheet-grid .active-cell { border: 2px solid #70a477; padding: 6px; background: #daedce; animation: edit-glow 4s ease-in-out infinite; }.desktop-cursor { position: absolute; bottom: 32px; right: 175px; color: #597956; font-size: 26px; animation: cursor-move 6s ease-in-out infinite; }.desktop-cursor > span { font-size: 11px; background: #64895a; color: white; padding: 3px 6px; border-radius: 3px; position: absolute; top: 20px; left: 14px; }.desktop-dock { display: flex; gap: 14px; padding: 11px 16px; background: #cedfc9; font-size: 11px; }.active-app { border-bottom: 2px solid #547e55; padding-bottom: 4px; }.operator-status { padding: 12px 14px; background: #315340; color: #e7f2df; font-size: 11px; display: flex; align-items: center; gap: 6px; }.operator-status span { margin-left: auto; color: #bcd6b3; }.operator-status i { width: 6px; height: 6px; background: #cce4bd; border-radius: 50%; }
.meeting-scene { width: 570px; }.meeting-scene .window-bar > span { font-size: 19px; font-weight: 600; color: #31573f; }.room-context { padding: 10px 14px; color: #718368; font-size: 10px; border-bottom: 1px solid #d8e3cc; }.room-context > span { padding: 0 6px; color: #a1b592; }.meeting-layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: 11px; padding: 12px; }.video-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.video-tile { position: relative; overflow: hidden; height: 86px; background: #dbd1ba; border-radius: 5px; border: 1px solid #c1c9b0; }.video-tile > span { position: absolute; left: 5px; bottom: 5px; font-size: 9px; color: #f0f5e9; background: #293e35c9; padding: 3px 5px; border-radius: 3px; z-index: 5; }.mic-mark { position: absolute; top: 4px; right: 5px; color: #354f3b; font-size: 13px; }.call-person { position: absolute; left: 18px; top: 11px; width: 52px; height: 79px; }.call-face { position: absolute; left: 13px; top: 7px; width: 30px; height: 38px; background: linear-gradient(120deg,#efbc98,#cb9068); border-radius: 45% 45% 43% 43%; z-index: 2; }.call-face::before { content: ''; position: absolute; left: 7px; top: 15px; width: 3px; height: 4px; border-radius: 50%; background: #394038; box-shadow: 12px 0 #394038; }.call-face > b { position: absolute; top: 26px; left: 12px; width: 9px; height: 4px; border-bottom: 1.5px solid #78503c; border-radius: 50%; }.call-shirt { position: absolute; top: 43px; left: 0; width: 56px; height: 50px; background: linear-gradient(110deg,#e4b05c,#c9984a); border-radius: 18px 18px 0 0; }.call-hair { position: absolute; top: 0; left: 8px; width: 39px; height: 35px; background: #554438; border-radius: 50% 50% 25% 20%; z-index: 3; clip-path: polygon(0 0,100% 0,100% 48%,70% 35%,38% 45%,17% 100%,0 100%); }.video-jordan { background: #cad7c7; }.video-jordan .call-hair { background: #49423d; }.video-jordan .call-shirt { background: #829ba7; }.video-jordan .call-face { background: linear-gradient(110deg,#be8864,#966247); }.video-alex { background: #e0dac7; }.video-alex .call-hair { background: #926d43; }.video-alex .call-shirt { background: #879768; }.video-alex .call-face { background: linear-gradient(110deg,#f3c7a5,#d8a27b); }.video-scout { background: #d1e7e2; }.video-pip { background: #ecdfc7; }.video-nova { background: #e5ddec; border: 2px solid #ad95c2; }
.call-robot { position: absolute; left: 17px; top: 19px; width: 56px; height: 67px; --call-color:#9ecfd1; }.call-antenna { position: absolute; left: 27px; top: -7px; width: 3px; height: 12px; background: #759487; }.call-antenna::after { content:'';width:7px;height:7px;border-radius:50%;background:var(--call-color);position:absolute;top:-3px;left:-2px; }.call-robot-head { position:absolute;inset:0 0 28px;background:linear-gradient(135deg,#fbfff2,var(--call-color));border-radius:13px;box-shadow:inset -3px -3px 4px #46776430; }.call-robot-head::before {content:'';position:absolute;inset:8px 7px 7px;background:#264c45;border-radius:9px;}.call-robot-head i {position:absolute;left:17px;top:16px;width:5px;height:7px;border-radius:4px;background:#d1ffea;z-index:2;}.call-robot-head i + i {left:34px;}.call-robot > b {position:absolute;left:10px;top:44px;width:38px;height:27px;border-radius:12px 12px 0 0;background:var(--call-color);}.video-pip .call-robot {--call-color:#e4b580;}.video-nova .call-robot {--call-color:#c2a5d9;}
.meeting-layout .shared-board { margin: 0; padding: 11px; border-radius: 4px; }.meeting-layout .shared-board > span { font-size: 9px; }.meeting-layout .shared-board h3 { font-size: 21px; margin: 10px 0 14px; }.meeting-layout .agenda-blocks { gap: 4px; }.meeting-layout .agenda-blocks i { font-size: 8px; padding: 9px 3px; }.meeting-layout .board-edit { font-size: 11px; padding: 9px; line-height: 1.5; }.meeting-layout .board-edit > span { float: none; font-size: 9px; }.meeting-scene .meeting-message { font-size: 12px; padding: 4px 15px 12px; }.meeting-bottom { display:flex;gap:14px;align-items:center;justify-content:center;padding:9px;background:#31503d;color:#dcebd4;font-size:9px; }.sharing-label {color:#c1e4af;}.end-call-label {background:#965e52;padding:5px 9px;border-radius:3px;}
.workspace-switcher { padding:14px; }.workspace-option {display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #d1ddc6;border-radius:6px;margin-bottom:10px;}.workspace-option > i {font-size:25px;font-style:normal;color:#869b78;}.workspace-option strong {display:block;font-size:17px;font-weight:500;}.workspace-option span {display:block;font-size:12px;margin-top:5px;color:#5d7852;}.workspace-option small {display:block;font-size:11px;margin-top:6px;color:#6c7d60;}.workspace-option > b {font-size:11px;color:#4e714a;margin-left:auto;}.workspace-selected {background:#e1ecd7;border-color:#8fad7c;}.switched-project {margin:0 14px 14px;padding:14px;background:#e1e7ed;border-radius:5px;}.switched-project > span {font-size:10px;letter-spacing:.06em;color:#6c7f89;display:block;margin-bottom:14px;}.switched-project > div {display:flex;justify-content:space-between;gap:20px;font-size:12px;padding-block:5px;}.switched-project b {font-weight:500;}.switched-project div > span {color:#6c7e87;}.workspace-boundary {padding:11px;background:#315340;color:#e7f2dc;font-size:11px;text-align:center;}
.film[data-view="switch"] .switch-scene { transform: scale(.77); left: 462px; }
.film[data-view="meeting"] .meeting-scene { transform: scale(.85); left: 432px; }
.film[data-view="os"] .monitor-os, .film[data-view="results"] .monitor-results { display: inline; }
@media(max-width:680px){.film-chapters {grid-template-columns:repeat(5,1fr);}.film-chapters button {font-size:.65rem;}.film-chapters button:nth-child(5) {border-top:0;}.film-chapters button:nth-child(n+6) {border-top:1px solid #264234;}.dispatch-bubble {top:128px;}.film[data-view="computer"] .computer-scene {top:126px;left:65px;transform:scale(.89);}.film[data-view="meeting"] .meeting-scene {top:125px;left:63px;transform:scale(.87);}.film[data-view="switch"] .switch-scene {top:125px;left:88px;transform:scale(.79);}.film[data-view="computer"] .robot, .film[data-view="switch"] .robot {top:503px;left:308px;transform:scale(.68);}.film[data-view="computer"] .robot-pip, .film[data-view="switch"] .robot-pip {left:407px;}.film[data-view="computer"] .robot-nova, .film[data-view="switch"] .robot-nova {left:508px;}.film[data-view="computer"] .human, .film[data-view="switch"] .human {top:441px;left:12px;width:306px;height:279px;}.film[data-view="os"] .scene-stamp .stamp-title {max-width:510px;}}
/* A few words on the projection. The narration carries the explanation. */
.scene-stamp, .projection-screen > span, .film-caption p { display: none; }
.film-caption { min-height: 0; padding: 16px 24px 12px; }.film-caption h2 { margin: 0; font-size: 1rem; }
.film-start { position: absolute; top: 36%; left: 65%; transform: translate(-50%,-50%); z-index: 20; background: #1c4236; color: #f0f7e8; border: 1px solid #6b9580; box-shadow: 0 12px 30px #193c3430; border-radius: 9px; padding: 18px 24px; font-size: 1rem; cursor: pointer; }.film-start > span { margin-right: 12px; }.film-start[hidden] { display: none; }
.office-window { position:absolute;left:59px;top:34px;width:229px;height:119px;border:9px solid #f9f9eb;border-radius:2px;box-shadow:-5px 5px 0 #bdc9b5,0 10px 22px #abc3a850;overflow:hidden;background:linear-gradient(#cee4e5 0 60%,#b2c5a1 60%); }.office-window::before {content:'';position:absolute;left:98px;top:0;bottom:0;width:7px;background:#f7f6e6;z-index:2;}.office-window::after {content:'';position:absolute;top:48px;left:0;right:0;height:5px;background:#f7f6e6;z-index:2;}.office-window i {position:absolute;width:110px;height:120px;left:-25px;top:37px;border-radius:50%;background:#8eaa7e;}.office-window b {position:absolute;width:100px;height:100px;right:-24px;top:27px;border-radius:50%;background:#a2bb8c;}
.film .robot { opacity: 0 !important; pointer-events: none; }
.film[data-view="team"] .robot {top:115px;transform:scale(.86);transform-origin:top center;left:448px;}
.film[data-view="team"] .robot-pip {left:634px;}.film[data-view="team"] .robot-nova {left:817px;}
.film[data-view="team"][data-reveal="1"] .robot-scout,.film[data-view="team"][data-reveal="2"] .robot-scout,.film[data-view="team"][data-reveal="3"] .robot-scout,.film[data-view="team"][data-reveal="2"] .robot-pip,.film[data-view="team"][data-reveal="3"] .robot-pip,.film[data-view="team"][data-reveal="3"] .robot-nova {opacity:1 !important;}
.robot::after {display:none;}.work-card {top:257px;min-height:0;background:none;border:0;padding:0;text-align:center;opacity:0;transition:opacity .5s;}.work-card .work-status,.work-card p,.work-card .document-lines,.work-card .mini-bars,.work-card .slide-preview {display:none;}.work-card strong {font-size:17px;font-weight:500;}
.film[data-view="team"][data-reveal="1"] .work-scout,.film[data-view="team"][data-reveal="2"] .work-scout,.film[data-view="team"][data-reveal="3"] .work-scout,.film[data-view="team"][data-reveal="2"] .work-pip,.film[data-view="team"][data-reveal="3"] .work-pip,.film[data-view="team"][data-reveal="3"] .work-nova {opacity:1;}
.dispatch-bubble > span {font-size:11px;}.dispatch-bubble p {display:none;}.dispatch-bubble strong {font-size:28px;line-height:1.2;}.dispatch-bubble {top:79px;}.copilot-dispatch {margin-top:26px;}.copilot-dispatch b {font-size:14px;}.copilot-dispatch span {font-size:13px;}
.loose-window > span {display:none;}.loose-window small {display:none;}.loose-a {top:70px;}.loose-b {top:66px;}.loose-c {top:196px;}.sticky-note {top:212px;}
@media(max-width:680px){.office-window {display:none;}.projection-screen {top:30px;}.loose-a{top:62px;}.loose-b{top:56px;}.loose-c{top:188px;}.sticky-note{top:216px;}.human,.film:not([data-view="today"]) .human{top:359px !important;left:110px !important;width:372px !important;height:340px !important;}.film-world {height:690px;}.office-wall {bottom:169px;}.set-floor{top:521px;height:169px;}.film-start {left:50%;top:24%;padding:16px 20px;white-space:nowrap;}.dispatch-bubble{top:76px;}.film[data-view="team"] .robot{top:105px;left:81px;transform:scale(.9);}.film[data-view="team"] .robot-pip{left:266px;}.film[data-view="team"] .robot-nova{left:450px;}.work-card{top:261px;left:49px;min-height:0;}.work-pip{left:233px;top:261px;}.work-nova{left:417px;top:261px;}.film[data-view="browser"] .browser-scene,.film[data-view="computer"] .computer-scene,.film[data-view="meeting"] .meeting-scene,.film[data-view="editor"] .ide-scene{top:46px;}.film[data-view="switch"] .switch-scene{top:45px;}.os-scene{top:53px;}.results-scene{top:49px;}.film-caption{padding:14px 16px;gap:10px;}.film-caption h2{font-size:.9rem;}.film-controls{gap:8px;}.film-voice{flex:0 0 auto;}.scene-number{font-size:.6rem;}}
.film-volume { display:flex;align-items:center;gap:8px;color:#a4bda9;font-size:.7rem; }.film-volume .voice-volume {width:75px;min-width:50px;flex:none;}.volume-value {font-variant-numeric:tabular-nums;min-width:28px;}.film-volume > span {font-size:.65rem;}
@media(max-width:680px){.film-volume {margin-left:auto;gap:7px;}.film-volume .voice-volume {width:85px;}.film-controls .film-voice {margin-left:0;}.film-controls > #film-seek {flex:1;}.film-controls > .film-time{margin-right:0;}.film-volume > span{font-size:.7rem;}.film-volume:before{content:'';}.film-controls{display:grid;grid-template-columns:auto auto 1fr auto;}.film-volume{grid-column:2 / -1;}.film-voice{grid-column:1;}.film-controls > input{width:100%;}}
/* Additional workspaces use the same projection and desktop, not a different stage. */
.film-chapters { grid-template-columns:repeat(6,1fr); }.film-chapters button:nth-child(n+7) {border-top:1px solid #264234;}.film-chapters button {min-height:42px;font-size:.75rem;}
.sam-intro {position:absolute;top:45px;left:427px;font-size:26px;font-weight:550;letter-spacing:-.035em;}.sam-intro > span {display:block;font-size:13px;font-weight:400;letter-spacing:0;color:#647a5e;margin-top:7px;}
.loose-a {top:125px;left:426px;width:224px;}.loose-b {top:123px;left:682px;width:252px;}.loose-c {top:225px;left:430px;width:267px;}.sticky-note {top:240px;left:754px;font-size:15px;padding:12px 18px;}.loose-window b{font-size:17px;}.loose-window > i{height:4px;margin-top:9px;}.loose-window .mini-bars{height:37px;margin-top:9px;}
.film[data-view="research"] .research-scene,.film[data-view="configure"] .configure-scene {opacity:1;transform:scale(.92);left:429px;top:44px;}
.research-scene{width:550px;}.experiment-heading{padding:16px 19px 10px;}.experiment-heading h3{font-size:25px;font-weight:500;letter-spacing:-.035em;}.experiment-heading p{font-size:12px;color:#63785a;margin-top:9px;}.experiment-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:5px 19px 15px;}.experiment-charts > div{background:#e8eee2;padding:12px;border-radius:5px;}.experiment-charts span{display:block;font-size:11px;color:#62755e;margin-bottom:10px;}.experiment-charts svg{display:block;width:100%;height:85px;}.experiment-artifacts{display:flex;justify-content:space-between;gap:12px;background:#dce8d4;padding:11px 19px;font-size:11px;}.illustrative-chart{padding:11px 19px;font-size:10px;color:#72856c;}
.configure-scene{width:550px;}.robot-builder{display:grid;grid-template-columns:1fr 1fr;gap:23px;padding:19px;}.builder-step{font-size:9px;color:#78906c;letter-spacing:.05em;}.capability-shelf h3{font-size:22px;font-weight:500;letter-spacing:-.03em;margin:15px 0;}.capability-item{display:flex;align-items:center;gap:10px;border:1px solid #d5dfcd;border-radius:5px;padding:11px 9px;margin-bottom:8px;font-size:12px;}.capability-item i{font-style:normal;font-size:15px;color:#6b8760;}.capability-item b{margin-left:auto;font-weight:500;color:#6e9663;}.selected-capability{background:#e1edd6;}.capability-shelf > small{font-size:9px;color:#7e8f73;}.configured-robot{position:relative;height:95px;display:flex;align-items:center;padding-left:90px;}.configured-robot .call-robot{left:14px;top:21px;}.configured-robot > strong{font-size:22px;font-weight:500;}.robot-configuration dl>div{padding:10px 0;border-top:1px solid #d6e1cc;}.robot-configuration dt{font-size:9px;color:#7c8b70;margin-bottom:5px;}.robot-configuration dd{font-size:12px;}.film[data-view="configure"] .configure-scene{transform:scale(.87);left:437px;top:38px;}.film[data-view="research"] .research-scene{transform:scale(.9);}.switch-scene .switched-project{display:none;}.workspace-option{padding:12px;margin-bottom:8px;}.workspace-switcher{padding:12px;}.workspace-option strong{font-size:16px;}
.film[data-view="research"] .monitor-research,.film[data-view="configure"] .monitor-configure{display:inline;}
@media(max-width:680px){.film-chapters{grid-template-columns:repeat(4,1fr);}.film-chapters button{font-size:.7rem;}.film-chapters button:nth-child(n+5){border-top:1px solid #264234;}.sam-intro{left:57px;top:47px;font-size:28px;}.sam-intro>span{font-size:14px;}.loose-a{left:51px;top:129px;width:224px;}.loose-b{left:306px;top:127px;width:250px;}.loose-c{left:55px;top:229px;width:267px;}.sticky-note{left:383px;top:244px;}.film[data-view="configure"] .configure-scene{left:73px;top:43px;transform:scale(.87);}.film[data-view="research"] .research-scene{left:63px;top:45px;transform:scale(.9);}}
.robot-setup-note {margin-top:30px;max-width:780px;}.robot-setup-note h3{font-size:1.35rem;font-weight:500;margin-bottom:13px;}.robot-setup-note p{color:var(--wp-muted);font-size:1rem;line-height:1.8;}.workspace-scope-map{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;}.workspace-scope-map article{padding:25px;border:1px solid #456349;border-radius:7px;background:#15291e;}.workspace-scope-map article>span{font-size:.7rem;color:#a9c995;letter-spacing:.1em;}.workspace-scope-map h3{font-size:1.25rem;font-weight:500;margin:16px 0;}.workspace-scope-map p{font-size:1rem;line-height:1.8;color:var(--wp-muted);}.workspace-scope-map small{font-size:.75rem;color:#90ae80;display:block;line-height:1.6;margin-top:18px;}@media(max-width:680px){.workspace-scope-map{grid-template-columns:1fr;}}

/* Background work is part of WebChat, beside the project and its task activity. */
.background-scene { width: 560px; }
.film[data-view="background"] .background-scene { opacity: 1; }
.film[data-view="background"] .monitor-background { display: inline; }
.background-request { margin: 14px 16px; padding: 12px; background: #e7eddb; font-size: 16px; line-height: 1.3; border-radius: 5px; }
.background-tasks { padding: 0 18px; }
.background-tasks > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #dae3d1; }
.background-tasks strong { font-size: 14px; font-weight: 500; }
.background-tasks small { display: block; font-size: 10px; color: #728267; margin-top: 4px; }
.background-tasks > div > b { margin-left: auto; font-size: 10px; color: #67805c; font-weight: 400; }
.task-pulse { width: 10px; height: 10px; border-radius: 50%; background: #83bcc5; animation: task-progress 2s ease-in-out infinite; }
.task-pulse.amber { background: #dfb675; animation-delay: .7s; }
.task-pulse.violet { background: #b6a0c6; animation: none; }
.background-log { margin: 12px 18px; border-radius: 4px; background: #24483d; color: #e4ecda; padding: 11px 14px; display: flex; gap: 30px; }
.background-log > span { font-size: 10px; color: #afd0b8; }
.background-log code { font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.6; }
.background-log i { font-style: normal; color: #b7d1ad; }
.background-controls { display: flex; align-items: center; gap: 9px; padding: 10px 18px; background: #dce7d3; font-size: 10px; }
.background-controls > span { margin-right: auto; color: #6c7d63; }
.background-controls > b { padding: 5px 10px; border-radius: 3px; background: #f4f6e9; font-weight: 400; }
@keyframes task-progress { 50% { opacity: .4; } }
.video-sam .call-shirt { background: linear-gradient(110deg, #a9cadd, #668fa7); }
.live-cursor { bottom: 110px; right: 36px; }
.ide-caption { padding: 10px 20px; }
.ide-caption strong { font-size: 17px; }
.film-chapters { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 680px) { .film-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .film-chapters button { font-size: .65rem; } }

/* One timeline, with compact chapter markers and only the active scene's name. */
.film-timeline { flex: 1 1 280px; min-width: 0; }
.film-current-scene { display: block; color: #bdd0c2; font-size: .72rem; margin-bottom: 2px; }
.film-timeline #film-seek { display: block; width: 100%; margin: 0; height: 23px; }
.film-timeline .film-chapters { display: flex; justify-content: space-between; gap: 0; border: 0; padding: 0; background: none; }
.film-timeline .film-chapters button { flex: 0 1 28px; width: 28px; min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 3px; display: grid; place-items: center; background: none; }
.film-timeline .film-chapters button > i { width: 6px; height: 6px; border-radius: 50%; background: #5c7968; }
.film-timeline .film-chapters button[aria-current] > i { width: 9px; height: 9px; background: #bce5c9; }
.film-timeline .film-chapters button:hover > i { background: #e6ecd1; }
.film-time[hidden] { display: none; }
.builder-team { display: flex; gap: 10px; padding: 0 20px 12px; }
.builder-colleague { position: relative; flex: 1; height: 51px; border-top: 1px solid #d7e0ca; display: flex; align-items: center; padding-left: 72px; }
.builder-colleague .call-robot { left: 5px; top: 7px; transform: scale(.54); transform-origin: top left; }
.builder-colleague > span { font-size: 12px; color: #59704e; }
.builder-proof .call-robot-head { background: linear-gradient(130deg,#f2d9b5,#dab380); }
.builder-proof .call-antenna, .builder-proof .call-robot > b { background: #d7b178; }
.builder-layout .call-robot-head { background: linear-gradient(130deg,#e1d2ed,#b399cb); }
.builder-layout .call-antenna, .builder-layout .call-robot > b { background: #b399cb; }
.film[data-playing="true"][data-reveal="0"] .configured-robot, .film[data-playing="true"][data-reveal="0"] .builder-colleague,
.film[data-playing="true"][data-reveal="1"] .builder-colleague,
.film[data-playing="true"][data-reveal="2"] .builder-layout { opacity: 0; }
.configured-robot, .builder-colleague { transition: opacity .6s; }
@media (max-width: 680px) {
    .film-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .film-timeline { order: -1; flex-basis: 100%; }
    .film-play { min-width: 75px; padding: 10px 12px; }
    .film-voice { margin-left: auto; }
    .film-volume { flex: 1 1 100%; justify-content: flex-end; }
    .film-controls .film-volume input { max-width: 125px; }
    .film-time { margin-left: 0; }
}
/* Keep the projected interfaces wide enough to read without crossing the frame. */
.configure-scene { width: 650px; }
.robot-builder { gap: 24px; padding: 12px 18px; }
.capability-shelf h3 { margin: 10px 0; }
.capability-item { padding: 8px 9px; margin-bottom: 6px; }
.configured-robot { height: 67px; }
.configured-robot .call-robot { top: 5px; transform: scale(.8); transform-origin: top left; }
.robot-configuration dl > div { padding: 7px 0; }
.robot-configuration dt { margin-bottom: 3px; }
.background-scene { width: 670px; }
.background-request { margin: 10px 16px; padding: 9px 12px; }
.background-tasks > div { padding: 7px 0; }
.background-log { margin: 9px 18px; padding: 8px 12px; }
.meeting-scene { width: 660px; }
/* Fade through the clean projection; never crossfade two layers of text. */
.old-work, .dispatch-bubble, .scene-panel, .os-scene, .results-scene { transition: opacity .3s ease; }
.film[data-transitioning="true"] :is(.old-work, .dispatch-bubble, .scene-panel, .os-scene, .results-scene) { opacity: 0 !important; transition: opacity .16s ease-out; }
.workplace-page .hamburger-lines .line { background: var(--wp-mint); box-shadow: none; }
.workplace-page .nav-trigger > span { color: var(--wp-mint); }
.workplace-footer > a:first-child img { display: block; width: 172px; height: auto; }
@media (max-width: 680px) {
    .vision-heading h1 { font-size: 2.5rem; }
    .day-story { grid-template-columns: 1fr; }
    .day-story p { font-size: 1rem; }
}
.film-timeline .film-chapters button::before, .film-timeline .film-chapters button::after { display: none; }
.film-timeline .film-chapters button { flex: 1 1 0; min-width: 0; width: auto; }

/* Long reading passages share the site's justified alignment. */
.home-explanation p:not(.kicker), .home-analogies p, .film-transcript li, .film-transcript > p {
    text-align: justify;
    text-align-last: start;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.workplace-main .home-install { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 36px 0; margin-top: 40px; border-top: 1px solid var(--wp-line); border-bottom: 1px solid var(--wp-line); }
.home-install h2 { margin-bottom: 14px; font-size: 1.8rem; font-weight: 550; letter-spacing: -.03em; }
.home-install p { color: var(--wp-muted); line-height: 1.75; }
@media (max-width: 680px) { .workplace-main .home-install { align-items: flex-start; flex-direction: column; } }

@keyframes sam-far-work { 0%, 32%, 70%, 100% { transform: rotate(0); } 15%, 52% { transform: rotate(.8deg); } 82% { transform: rotate(-.6deg); } }
@keyframes sam-far-gesture { 0%, 12%, 55%, 100% { transform: rotate(0); } 25%, 37% { transform: rotate(-9deg); } 45% { transform: rotate(-5deg); } }
@keyframes sam-gaze { 0%, 48%, 100% { transform: translate(0, 0); } 18%, 35% { transform: translate(1px, -1px); } 62%, 79% { transform: translate(-.7px, .5px); } }
@keyframes sam-brows { 0%, 48%, 100% { transform: translateY(0); } 20%, 35% { transform: translateY(-.9px); } 65%, 80% { transform: translateY(.4px); } }
@keyframes sam-smile { 0%, 7%, 52%, 100% { opacity: 0; transform: scale(1); } 17%, 38% { opacity: 1; transform: scale(1.08, 1.3); } }
@keyframes sam-neutral-mouth { 0%, 7%, 52%, 100% { opacity: 1; } 17%, 38% { opacity: 0; } }