/* A simulated product workspace, not a connection to the visitor's Mac. */
.task-theater{display:block}
.task-display{min-width:0}
.task-window{position:relative;background:#080808;border:1px solid #ffffff36;overflow:hidden}
.task-window-bar{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:8px 22px;border-bottom:1px solid #ffffff20;color:#aaa;font:11px var(--mono)}
.task-window-bar b{font-weight:500;color:#ddd}
.stage-notch{position:absolute;z-index:3;top:-1px;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 48px));padding:12px 18px 16px;border:1px solid #ffffff40;border-top:0;border-radius:0 0 14px 14px;background:#000}
.stage-notch-head{display:flex;justify-content:space-between;gap:18px;align-items:center;color:#eee;font:12px var(--mono)}
.stage-notch-head b{font-weight:500}
.task-window-status{display:flex;align-items:center;gap:7px;color:#b4b4b4;font:10px var(--mono)}
.task-window-status::before{content:"";width:4px;height:4px;background:#ddd}
.task-app-window{width:calc(100% - 112px);max-width:760px;margin:76px auto 112px;background:#101010;border:1px solid #ffffff2e}
.task-app-bar{min-height:34px;padding:7px 14px;border-bottom:1px solid #ffffff20;display:flex;align-items:center;justify-content:space-between;gap:12px;font:11px var(--mono);color:#b4b4b4}
.task-window-controls{display:flex;gap:5px;width:40px}
.task-window-controls i{display:block;width:6px;height:6px;border:1px solid #777}
.task-window-spacer{width:40px}
.task-workspace{position:relative;height:352px;overflow:hidden;background:#101010}
.task-choices{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:min(344px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 4px 6px;border:1px solid #ffffff30;background:#0c0c0c}
.task-choice{display:grid;justify-items:center;gap:7px;min-width:0;min-height:70px;padding:0 3px 4px;color:#aaa;background:none;border:0;cursor:pointer}
.task-app-icon{display:grid;place-items:center;width:42px;height:42px;background:#191919;border:1px solid #ffffff35;color:#ccc;transition:background .15s,color .15s,border-color .15s}
.task-app-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linejoin:miter;stroke-linecap:square}
.task-choice b{font:11px var(--sans);font-weight:400}
.task-choice:hover .task-app-icon{border-color:#aaa;color:#fff}
.task-choice[aria-pressed="true"]{color:#fff}
.task-choice[aria-pressed="true"] .task-app-icon{background:#eee;border-color:#eee;color:#080808}
.task-instruction{margin:16px 0 0;color:#aaa;font-size:13px;text-align:center;line-height:1.5}
.task-scene{position:absolute;inset:0;padding:28px;overflow:hidden}
.task-scene[hidden]{display:none}
.scene-heading{display:flex;justify-content:space-between;gap:12px;color:#b4b4b4;font:12px var(--mono);margin-bottom:24px}
.scene-heading small{font-size:11px;color:#8a8a8a}
.demo-files{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px;max-width:510px;margin:0 auto}
.demo-file{text-align:center;min-width:0;transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .45s;transition-delay:calc(var(--file,0) * 35ms)}
.demo-file i{display:block;position:relative;width:42px;height:52px;margin:0 auto 8px;border:1px solid #888;background:#222}
.demo-file i::before,.demo-file i::after{content:"";position:absolute;left:9px;right:9px;top:17px;height:1px;background:#777}
.demo-file i::after{top:24px;right:15px}
.demo-file span{display:block;font:10px var(--mono);color:#9c9c9c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-theater[data-phase="act"] .demo-file,.task-theater[data-phase="done"] .demo-file{opacity:0;transform:translateY(48px) scale(.65)}
.demo-clear{position:absolute;inset:80px 24px 60px;display:grid;align-content:center;justify-items:center;gap:8px;opacity:0;transition:opacity .5s;pointer-events:none}
.demo-clear b{font-size:32px;letter-spacing:-.04em;font-weight:500;color:#fff}
.demo-clear span{font-size:14px;color:#aaa}
.task-theater[data-phase="done"] .demo-clear{opacity:1}
.stage-approval{display:none;margin-top:16px;padding-top:14px;border-top:1px solid #ffffff3a}
.stage-approval b{font-size:16px;font-weight:500;color:#fff}
.stage-approval p{font-size:12px;line-height:1.5;color:#b4b4b4;margin:8px 0 14px}
.stage-approval .hc-btns span{height:34px;border-radius:0}
.task-theater[data-phase="approve"] .stage-approval,.task-theater[data-phase="yes"] .stage-approval{display:block}
.task-theater[data-phase="yes"] .stage-approval .yes{background:#ccc}
.calendar-grid{position:relative;height:244px;border-top:1px solid #ffffff19}
.calendar-slot{height:58px;border-bottom:1px solid #ffffff19;font:11px var(--mono);color:#888;padding-top:10px}
.calendar-event{position:absolute;left:70px;right:12px;top:8px;height:48px;padding:8px 14px;background:#d9d9d9;color:#111;border-left:3px solid #fff;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
.calendar-event b{font-size:14px;font-weight:600}.calendar-event span{font:11px var(--mono);white-space:nowrap}
.task-theater[data-phase="fetch"] .calendar-event,.task-theater[data-phase="done"] .calendar-event{transform:translateY(174px)}
.mail-compose{background:#161616;border:1px solid #ffffff24;max-width:540px;margin:0 auto;overflow:hidden}
.mail-field{padding:10px 16px;border-bottom:1px solid #ffffff14;color:#b4b4b4;font-size:13px}
.mail-field span{display:inline-block;width:60px;color:#888}
.mail-message{padding:20px 16px;min-height:126px;font-size:16px;line-height:1.7;color:#eee}
.mail-message p{clip-path:inset(0 100% 0 0);transition:clip-path 2.3s steps(30,end)}
.task-theater[data-phase="fetch"] .mail-message p,.task-theater[data-phase="done"] .mail-message p{clip-path:inset(0)}
.mail-status{padding:12px 16px;border-top:1px solid #ffffff14;font:11px var(--mono);color:#aaa}
.screen-document{position:relative;max-width:480px;margin:0 auto;background:#1a1a1a;border:1px solid #ffffff29;padding:20px}
.screen-document h4{font-size:25px;font-weight:500;letter-spacing:-.03em;margin:8px 0 18px;color:#ddd}
.screen-document p{font-size:14px;color:#999;border-top:1px solid #ffffff16;padding:9px 0}
.screen-document .screen-label{font:11px var(--mono);color:#999;border:0;padding:0}
.screen-focus{position:absolute;inset:-5px;border:1px solid #eee;opacity:0;transition:opacity .4s;pointer-events:none}
.task-theater[data-phase="fetch"] .screen-focus,.task-theater[data-phase="done"] .screen-focus{opacity:1}
.screen-scan{position:absolute;top:0;bottom:0;left:0;width:1px;background:#ddd;opacity:0;pointer-events:none}
@keyframes scan-window{0%{left:0;opacity:0}12%{opacity:.8}88%{opacity:.8}100%{left:100%;opacity:0}}
.task-theater[data-phase="fetch"] .screen-scan{animation:scan-window 2.5s ease-in-out both}
.task-command{margin:12px 0 0;color:#eee;font-size:15px;line-height:1.5}
.task-command::before{content:"Say “Hey Fetchi”, then";display:block;font:9px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:#aaa;margin-bottom:5px}
.task-caption{min-height:125px;margin-top:24px;padding:0 2px}
.task-caption h3{font-size:23px;letter-spacing:-.025em;font-weight:500;color:#fff}
.task-caption p{margin-top:8px;font-size:15px;line-height:1.65;color:#b4b4b4}
.task-result{margin-top:12px;font:12px var(--mono);line-height:1.7;color:#ddd;min-height:22px}
.task-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid #ffffff1c;padding-top:14px;margin-top:18px}
.task-controls>span{font:11px var(--mono);color:#999;text-transform:uppercase;letter-spacing:.04em}
.task-controls>div{display:flex;gap:20px}
.task-controls button{min-height:44px;font-size:13px;color:#bbb;cursor:pointer}
.task-controls button:hover{color:#fff}
.task-controls button:disabled{color:#888;cursor:default}
.task-controls [hidden]{display:none}
.task-theater.is-resetting *{transition:none!important;animation:none!important}
.feature-summary{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:38px;padding-top:24px;border-top:1px solid #ffffff1c;color:#aaa;font-size:14px;line-height:1.6}
.feature-summary a{color:#ddd;text-decoration:underline;text-decoration-color:#555;text-underline-offset:4px}
@media(max-width:700px){.task-app-window{width:calc(100% - 40px)}.task-window-bar{padding-left:14px;padding-right:14px;font-size:10px}.stage-notch{width:min(380px,calc(100% - 32px))}}
@media(max-width:540px){.task-window-bar{min-height:34px}.task-window-bar>*{visibility:hidden}.stage-notch{width:calc(100% - 24px);padding:10px 14px 14px}.task-app-window{width:calc(100% - 24px);margin-top:110px;margin-bottom:112px}.task-workspace{height:338px}.task-scene{padding:22px 16px}.scene-heading{font-size:11px}.scene-heading small{font-size:10px}.demo-files{gap:20px 10px}.demo-file i{width:34px;height:44px}.demo-file span{font-size:8px}.calendar-event{left:50px;right:0;padding:8px}.calendar-event b{font-size:13px}.calendar-event span{font-size:10px}.task-command{font-size:14px}.task-caption{min-height:220px}.task-caption h3{font-size:21px}.screen-document{padding:16px}.screen-document h4{font-size:23px}.feature-summary{display:grid;gap:12px}.task-instruction{font-size:12px}.task-app-bar{font-size:10px}}
@media(prefers-reduced-motion:reduce){.task-theater *{transition:none!important;animation:none!important}}