:root { --bg:#f2f7f5; --surface:#fcfffe; --surface-soft:#e7f1ee; --ink:#17252d; --muted:#63747a; --line:#d5e1de; --accent:#0b9d89; --accent-2:#4169e1; --accent-soft:rgba(11,157,137,.11); --dark:#10272a; }
.hero::after { position:absolute; z-index:-1; top:18%; right:-5%; width:48vw; height:48vw; border-radius:50%; background:radial-gradient(circle,#38cdb522,transparent 66%); content:""; }
.canvas-window { transform:rotate(-1deg); }
.canvas-board { position:relative; min-height:535px; overflow:hidden; background-color:#f8fcfb; background-image:radial-gradient(#aabfba 1px,transparent 1px); background-size:20px 20px; }
.canvas-tools { position:absolute; z-index:4; top:18px; left:50%; display:flex; padding:5px; border:1px solid var(--line); border-radius:9px; background:white; box-shadow:0 8px 23px #233d3822; gap:3px; transform:translateX(-50%); }
.canvas-tools b { display:grid; width:26px; height:26px; border-radius:5px; color:#60736f; place-items:center; font:10px/1 var(--mono); }.canvas-tools b:first-child{background:#dff4ef;color:var(--accent)}
.presence { position:absolute; z-index:3; top:20px; right:18px; display:flex; align-items:center; }.presence span{display:grid;width:26px;height:26px;margin-left:-5px;border:2px solid white;border-radius:50%;background:#4169e1;color:white;place-items:center;font:7px/1 var(--mono)}.presence span:nth-child(2){background:#f28a5b}.presence small{margin-left:6px;color:var(--muted);font:7px/1 var(--mono)}
.board-title { position:absolute; top:92px; left:58px; display:flex; max-width:310px; flex-direction:column; transform:rotate(-1deg); }.board-title small{color:var(--accent);font:7px/1 var(--mono);letter-spacing:.14em}.board-title strong{margin-top:12px;font-size:22px;line-height:1.12;letter-spacing:-.045em}
.sticky { position:absolute; z-index:2; width:145px; min-height:112px; padding:15px; box-shadow:0 10px 22px #273f3522; }.sticky small{font:7px/1 var(--mono);letter-spacing:.1em}.sticky p{margin:17px 0 0;font-size:10px;line-height:1.45}.sticky-a{top:215px;left:42px;background:#dff3b9;transform:rotate(-4deg)}.sticky-b{top:338px;left:180px;background:#ffd8c5;transform:rotate(3deg)}
.wireframe { position:absolute; top:145px; right:45px; width:230px; height:262px; padding:20px; border:2px solid #5475d2; border-radius:12px; background:white; box-shadow:7px 8px 0 #c6d2f4; }.wireframe span{display:block;width:45%;height:8px;border-radius:10px;background:#1a2931}.wireframe i{display:block;height:5px;margin-top:9px;border-radius:10px;background:#d9e1e4}.wireframe i:nth-of-type(2){width:76%}.wireframe b{display:inline-block;width:46%;height:96px;margin:30px 4px 0 0;border-radius:7px;background:#e5f5f1}.wireframe b:nth-of-type(2){background:#f1eafa}.wireframe small{position:absolute;right:13px;bottom:10px;color:#7184b6;font:7px/1 var(--mono)}
.image-slot { position:absolute; right:190px; bottom:34px; display:flex; width:128px;height:95px;border:2px dashed #9a74cc;border-radius:8px;background:#f7f0ff;align-items:center;justify-content:center;flex-direction:column;transform:rotate(-3deg)}.image-slot span{color:#8b5bc4;font-size:20px}.image-slot small{margin-top:5px;color:#745a92;font:7px/1 var(--mono)}
.connector{position:absolute;height:2px;background:var(--accent);transform-origin:left}.connector::after{position:absolute;right:-2px;top:-3px;width:7px;height:7px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);content:"";transform:rotate(45deg)}.connector.one{top:290px;left:165px;width:155px;transform:rotate(-13deg)}.connector.two{top:392px;left:306px;width:85px;transform:rotate(-36deg)}
.agent-cursor{position:absolute;right:24px;bottom:42px;color:#6b45b4;font-size:18px}.agent-cursor span{padding:4px 6px;border-radius:4px;background:#6b45b4;color:white;font:7px/1 var(--mono)}
.mini-board{padding:18px;background-color:#f8fcfb;background-image:radial-gradient(#b6c9c4 1px,transparent 1px);background-size:14px 14px}.mini-board span,.mini-board strong{position:absolute;padding:7px 10px;border-radius:5px;background:#dff3b9;font:8px/1 var(--mono)}.mini-board strong{right:18px;bottom:17px;background:#ffd8c5}.mini-board b{display:inline-block;width:58px;height:44px;margin:28px 12px 0;border:1px solid #5b78d2;border-radius:5px;background:white}.mini-board i{color:var(--accent);font-style:normal}
.ops-visual{display:flex;padding:15px;flex-direction:column;gap:6px}.ops-visual span{padding:7px;border:1px solid var(--line);border-radius:5px;background:white;font:8px/1 var(--mono)}.ops-visual b{position:absolute;right:15px;bottom:12px;color:var(--accent);font:8px/1 var(--mono)}
.collab-visual{display:flex;padding:20px;align-items:center}.collab-visual span{display:grid;width:38px;height:38px;margin-left:-5px;border:3px solid white;border-radius:50%;background:#4169e1;color:white;place-items:center;font:9px/1 var(--mono)}.collab-visual span:nth-child(2){background:#f28a5b}.collab-visual span:nth-child(3){background:#0b9d89}.collab-visual i{margin-left:auto;color:var(--accent);font:normal 8px/1 var(--mono)}
.share-visual{display:grid;padding:18px;grid-template-columns:54px 1fr;align-items:center}.share-visual b{display:grid;width:45px;height:45px;border-radius:10px;background:var(--ink);color:white;place-items:center;font:10px/1 var(--mono)}.share-visual span{font-size:10px}.share-visual i{grid-column:2;color:var(--accent);font:normal 8px/1 var(--mono)}
@media(max-width:620px){.canvas-board{min-height:500px}.wireframe{right:18px;width:190px}.sticky-a{left:20px}.sticky-b{left:85px}.image-slot{right:155px}.board-title{left:25px}}