*{box-sizing:border-box}html,body{margin:0;background:transparent;overflow:hidden;font:16px/1.5 system-ui,sans-serif}body{width:520px;transform-origin:top left}.hero-art{height:425px;position:relative;background:radial-gradient(ellipse at 55% 50%,#d7ede9 0%,#edf6f3 49%,transparent 72%);isolation:isolate}.orbit{position:absolute;border:1px solid #bad9d2;border-radius:50%;inset:10px 40px;transform:rotate(-15deg)}.orbit-two{inset:50px 0;transform:rotate(22deg)}.art-label{position:absolute;top:8px;right:55px;font-size:8px;letter-spacing:2px;color:#527d73}.laptop{position:absolute;top:84px;left:12px;width:395px;height:258px;background:#fff;border:7px solid #233f3c;border-radius:13px 13px 6px 6px;box-shadow:0 20px 35px #1740391a;transform:rotate(-5deg);color:#183a34}.laptop-top{border-bottom:1px solid #e3eae7;height:34px;padding:5px 14px;display:flex;justify-content:space-between;align-items:center;font-size:11px}.tiny-brand{color:#0d7d72;font-weight:700}.dots{color:#9baea8}.laptop-content{display:flex;height:210px}.mock-sidebar{width:41px;background:#f5f8f6;padding:18px 12px;display:flex;flex-direction:column;gap:16px}.mock-sidebar i{height:9px;width:14px;background:#d7e7e1;border-radius:2px}.mock-sidebar i:first-child{background:#0d7d72}.mock-main{padding:13px 15px;flex:1}.mock-caption{display:block;font-size:6px;letter-spacing:1px;color:#62776e}.mock-main>strong{font-size:12px}.map{height:94px;margin:8px 0;background:#edf2ed;overflow:hidden;position:relative;border-radius:5px}.map svg{width:100%;height:100%;color:#fff}.map-tag{position:absolute;top:36px;left:53%;font-size:5px;background:#fff;padding:4px 5px;border-radius:3px;white-space:nowrap}.mock-row{display:flex;align-items:center;gap:6px;font-size:7px;border-bottom:1px solid #e5eee9;padding:5px 0}.mock-row>span:last-child{margin-left:auto;color:#0d7d72}.laptop-base{position:absolute;bottom:-16px;left:-22px;right:-22px;height:12px;background:#acbdb7;border-radius:0 0 60% 60%}.phone{position:absolute;right:0;top:137px;width:137px;height:246px;border:6px solid #233f3c;border-radius:24px;background:#fff;transform:rotate(8deg);box-shadow:0 15px 25px #17403930;display:flex;align-items:center;flex-direction:column;color:#183a34}.phone-notch{width:48px;height:10px;background:#233f3c;border-radius:0 0 8px 8px}.phone-shield{margin:30px 0 12px;background:#d7ede9;border-radius:14px;padding:12px;color:#0d7d72;height:61px}.phone-shield svg{height:36px;width:33px}.phone>strong{font-size:11px}.phone>span{font-size:7px;text-align:center;margin-top:5px}.phone-accept{margin-top:15px;color:#0d7d72;background:#e7f4ee;border-radius:4px;font-size:7px;padding:4px 13px}.floating-note{position:absolute;left:14px;bottom:25px;background:white;box-shadow:0 6px 24px #17403912;border:1px solid #e0eae5;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:9px;color:#183a34}.floating-note strong,.floating-note span:not(.note-icon){display:block;font-size:9px}.floating-note span:not(.note-icon){color:#65766e;font-size:8px}.note-icon{background:#d7ede9;border-radius:50%;padding:0 8px;color:#0d7d72;font-size:21px}.demo-label{position:absolute;bottom:-11px;right:15px;font-size:6px;letter-spacing:1px;color:var(--muted)}
.hero-art{width:520px;background:radial-gradient(ellipse at center,#79b9aa22,transparent 70%)}.art-label,.demo-label{color:#b9d9d1}.status-dot{display:inline-block;width:6px;height:6px;background:#0d7d72;border-radius:50%}
body{width:560px;padding:20px}.hero-art{width:520px}.phone{right:16px}.art-label{right:65px}