.phone-viewer{position:absolute;inset:0 0 72px;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s ease}.phone-canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline-offset:-9px}.phone-canvas.is-dragging{cursor:grabbing}.phone-canvas:focus-visible{outline:2px solid #698c58;border-radius:20px}.has-3d .phone-viewer{opacity:1;pointer-events:auto}.has-3d .hero-phone{visibility:hidden;pointer-events:none}.phone-controls{position:absolute;z-index:4;bottom:7px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;max-width:100%;white-space:nowrap}.phone-controls[hidden]{display:none}.phone-controls button{width:44px;min-width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:#fffdf5ed;color:#28513c;border:1px solid #cbd6c0;border-radius:50%;font:400 19px/1 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,border-color .2s}.phone-controls button:hover{background:#e7eed9;border-color:#8da17d}.phone-controls button:focus-visible{outline:3px solid #839b68;outline-offset:3px}.phone-controls button[data-phone=screen]{border-radius:24px;min-width:116px;width:auto;padding:0 14px;gap:8px;font-size:11px;font-weight:500}.phone-controls button:disabled{opacity:.55;cursor:wait}.has-3d .app-preview-label{bottom:61px;font-size:9px;letter-spacing:0}.phone-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.has-3d .float-scan,.has-3d .float-plan{pointer-events:none}.has-3d .float-scan{top:95px}.has-3d .float-plan{bottom:135px}.app-hero-art{isolation:isolate}
@media(max-width:1050px){.phone-controls{gap:5px}.phone-controls button[data-phone=screen]{min-width:105px;font-size:10px;padding:0 11px}.has-3d .float-scan{top:20px}.has-3d .float-plan{bottom:100px}.has-3d .app-preview-label{font-size:8px}}
@media(max-width:600px){.phone-viewer{inset:0 0 80px}.phone-controls{gap:7px;bottom:5px}.phone-controls button[data-phone=screen]{min-width:112px;font-size:11px}.has-3d .app-preview-label{bottom:59px;font-size:8px}.has-3d .float-scan{top:18px}.has-3d .float-plan{bottom:112px}}
@media(max-width:360px){.phone-controls{gap:5px}.phone-controls button[data-phone=screen]{min-width:104px;padding:0 10px;font-size:10px}.has-3d .float-scan{top:16px}.has-3d .float-plan{bottom:110px}.has-3d .app-preview-label{font-size:7px}}
@media(prefers-reduced-motion:reduce){.phone-viewer,.phone-controls button{transition:none}}
.phone-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}