.design-hero .desktop.simulation{height:410px;position:relative}
.sim-apps{position:absolute;top:85px;left:19px;right:19px;bottom:48px}
.sim-window{position:absolute;inset:0;background:#fff;border:1px solid #e6eaf1;border-radius:8px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(8px) scale(.985);transition:opacity .4s,transform .55s cubic-bezier(.2,.7,.2,1),visibility .4s}
.simulation[data-view="tasks"] .todo-window,.simulation[data-view="document"] .work-window,.simulation[data-view="messages"] .chat-window{opacity:1;visibility:visible;transform:none;z-index:2}
.sim-titlebar{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-bottom:1px solid #f1f2f6;font-size:8px;color:#9aa3b2}.sim-titlebar>span:first-child{letter-spacing:1px;color:#b5bdc9}
.todo-content{max-width:360px;margin:auto;padding:18px 24px}.todo-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.todo-heading h3{font-size:20px;letter-spacing:-.6px;font-weight:600;margin:0}.todo-heading>span{font-size:6px;letter-spacing:1px;color:#959faf}
.sim-task{display:flex;align-items:center;gap:8px;min-height:34px;font-size:10px;border-radius:5px;padding:0 7px;margin:0 -7px}.sim-task.done{color:#adb4c0}.sim-task.done>span{font-size:10px;width:12px}.empty-circle{width:11px;height:11px;flex:none;border:1px solid #cbd2df;border-radius:50%}.do-next{margin-left:auto;border:0;background:none;color:#7a8bc6;font-size:17px;cursor:pointer;padding:3px 6px}.sim-task.new-task{animation:task-arrive .45s ease both;background:#f1f4ff}.sim-task.current{background:#edf2ff}.sim-task.current .empty-circle{border-color:#7a8fda}.sim-task>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sim-add{display:flex;align-items:center;border-top:1px solid #edf0f5;margin-top:10px;padding-top:10px}#sim-input{border:0;background:none;min-width:0;flex:1;font:inherit;font-size:11px;padding:5px 0;color:#46516a;outline-offset:2px}#sim-input::placeholder{color:#a1aaba}#sim-add>button{border:0;background:none;color:#8d99b3;font-size:17px;cursor:pointer}
.sim-document{padding:23px 30px;max-width:350px;margin:auto}.sim-document>span{font-size:6px;letter-spacing:1.2px;color:#8e9ab0}.sim-document h3{font-size:24px;font-weight:550;letter-spacing:-.7px;margin:12px 0}.sim-document p{font-size:10px;color:#9aa4b5;margin:0 0 22px}.sim-line{height:4px;background:#edf0f5;margin-bottom:10px;border-radius:2px}.sim-line.short{width:70%}.sim-line.gap{margin-top:23px}
.sim-chat{padding:20px 26px;max-width:360px;margin:auto}.chat-channel{font-size:12px;font-weight:600}.chat-message{display:flex;gap:10px;margin-top:21px}.chat-avatar{width:25px;height:27px;border-radius:7px;display:grid;place-items:center;background:#edf1f8;color:#8996b2;font-size:9px}.chat-message strong{font-size:10px;font-weight:600}.chat-message p{font-size:10px;line-height:1.5;color:#828ea4;margin:4px 0 0}.chat-compose{margin-top:22px;border:1px solid #e9edf4;border-radius:5px;padding:8px;color:#b0b8c7;font-size:9px}
.sim-dock{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:4px;background:#f7f8fb;border:1px solid #edf0f5;padding:3px;border-radius:7px}.sim-dock button{border:0;background:none;font-size:8px;padding:5px 9px;border-radius:4px;color:#929db0;cursor:pointer}.sim-dock button.selected{background:#fff;color:#52638d;box-shadow:0 1px 3px #20345a0b}
.sim-footer{display:flex;align-items:center;gap:15px;justify-content:space-between;margin:19px 4px 0}.sim-footer p{font-size:11px;line-height:1.5;color:#7b879d;margin:0}.sim-footer>div{display:flex;gap:6px}.sim-footer button{border:1px solid #e2e8f3;background:#ffffff80;color:#8490a8;border-radius:50%;width:25px;height:25px;cursor:pointer;font-size:12px}.simulation-label{font-size:7px;letter-spacing:.8px;color:#a2aabd;margin:11px 4px 0}.sim-cursor{position:absolute;z-index:15;left:43%;top:70%;transition:left .7s cubic-bezier(.2,.7,.2,1),top .7s cubic-bezier(.2,.7,.2,1),opacity .3s;opacity:0;pointer-events:none}.simulation.auto .sim-cursor{opacity:1}.task-banner.pulse{animation:banner-confirm .65s ease}
@keyframes task-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes banner-confirm{50%{box-shadow:0 0 0 4px #788ae220}100%{box-shadow:none}}
@media(max-width:560px){.design-hero .desktop.simulation{height:395px}.sim-apps{left:11px;right:11px;top:80px;bottom:46px}.todo-content{padding:19px}.sim-task{font-size:9px}.sim-document{padding:25px}.sim-document h3{font-size:21px}.sim-chat{padding:20px}.chat-message p{font-size:9px}.sim-footer p{font-size:10px}.simulation-label{font-size:6px}}
@media(prefers-reduced-motion:reduce){.sim-cursor{display:none}.sim-window{transition:none}.sim-task.new-task,.task-banner.pulse{animation:none}}
#add-open{font-size:19px;font-weight:300;line-height:1;padding:0 2px}
/* A task only exists in the floating strip after the Do next action. */
.simulation:not(.has-focus) .task-banner{opacity:0;visibility:hidden;transform:translateY(-4px)}
.simulation .task-banner{transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility .3s}
.simulation.has-focus .task-banner{opacity:1;visibility:visible;transform:none}
/* The demonstration uses the product controls, at a readable scale. */
.todo-content{max-width:415px;padding:20px 24px}.todo-heading h3{font-size:21px}.todo-heading>span{font-size:7px}.sim-task{min-height:38px;font-size:12px}.do-next{font-size:19px;border-radius:5px}.do-next:hover{background:#e5ebff}.empty-circle{width:12px;height:12px}
#sim-add{gap:9px;padding-top:13px;margin-top:11px;border-top:1px solid #e9edf5}#sim-input{border:1px solid #e4e9f2;border-radius:6px;padding:10px;font-size:11px;background:#fff;transition:border-color .2s,box-shadow .2s}#sim-input.demo-typing,#sim-input:focus{border-color:#9caeea;box-shadow:0 0 0 3px #8a9de810;outline:none}#sim-add>button{background:#252a35;color:white;border:1px solid #252a35;border-radius:6px;font-size:10px;font-weight:500;padding:10px 11px;white-space:nowrap;transition:transform .15s,background .15s}#sim-add>button>span{margin-left:8px}.demo-pressed{transform:scale(.94)!important;background:#586ed8!important;color:white!important}
@media(max-width:560px){.todo-content{padding:19px 16px}.sim-task{font-size:10px;min-height:35px}#sim-add{gap:6px}#sim-input{padding:9px 7px;font-size:9px}#sim-add>button{font-size:8px;padding:9px 7px}#sim-add>button>span{margin-left:3px}}
.design-hero .desktop.simulation{height:435px}
@media(max-width:560px){.design-hero .desktop.simulation{height:410px}}
#task-items{max-height:120px;overflow:auto;scrollbar-width:thin;scrollbar-color:#dce3f1 transparent;padding:0 7px;margin:0 -7px}
@media(max-width:560px){#task-items{max-height:110px}}