*{box-sizing:border-box}body{background-color:#f3f4f6;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden}.centerArea{justify-content:center;align-items:center;min-height:100vh;display:flex}.floating-nav{z-index:1000;background:#fff;border:1px solid #e5e7eb;border-radius:16px;flex-direction:column;gap:12px;padding:10px;display:flex;position:fixed;top:50%;left:20px;transform:translateY(-50%);box-shadow:0 10px 25px #0000001a}.nav-btn{color:#4b5563;cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex;position:relative}.nav-btn:hover{color:#111827;background-color:#f3f4f6}.nav-btn.active{color:#fff;background-color:#2563eb}.nav-btn svg{width:22px;height:22px}.nav-btn:after{content:attr(data-tooltip);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#1f2937;border-radius:6px;padding:4px 8px;font-size:12px;transition:opacity .2s;position:absolute;left:55px}.nav-btn:hover:after{opacity:1}.preview-container{justify-content:center;align-items:center;width:100%;padding:40px;display:none}.preview-container.active{display:flex}.macbook-wrapper{width:1200px;max-width:100%;position:relative}.macbook-frame{z-index:2;pointer-events:none;width:100%;height:auto;display:block;position:relative}.macbook-screen{z-index:1;zoom:.55;background-color:#fff;border:none;width:75%;height:76%;position:absolute;top:12%;left:12.5%}.device-wrapper{width:360px;max-width:100%;position:relative}.device-frame{z-index:2;pointer-events:none;width:100%;height:auto;display:block;position:relative}.device-screen{z-index:1;zoom:.85;background-color:#fff;border:none;border-radius:20px;width:93%;height:87%;position:absolute;top:7%;left:3%}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2000;opacity:0;pointer-events:none;background:#0006;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .2s;display:flex;position:fixed;top:0;left:0}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-card{background:#fff;border-radius:16px;width:100%;max-width:400px;padding:24px;box-shadow:0 20px 25px -5px #0000001a}.modal-card h3{color:#111827;margin:0 0 8px;font-size:18px}.modal-card p{color:#6b7280;margin:0 0 16px;font-size:14px}.form-group{margin-bottom:20px}.form-input{border:1px solid #d1d5db;border-radius:8px;outline:none;width:100%;padding:10px 14px;font-size:14px;transition:border-color .2s}.form-input:focus{border-color:#2563eb}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:500}.btn-secondary{color:#374151;background-color:#f3f4f6}.btn-secondary:hover{background-color:#e5e7eb}.btn-primary{color:#fff;background-color:#2563eb}.btn-primary:hover{background-color:#1d4ed8}