body{background:#f5f7fb;margin:0;padding:0;font-family:Inter,system-ui,sans-serif}.demo-container{flex-direction:column;align-items:center;gap:30px;min-height:100vh;padding:40px 20px;display:flex}.demo-header{text-align:center;flex-direction:column;align-items:center;margin-bottom:20px;display:flex}.toggle.hand-start{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:8px;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;font-weight:500;transition:background .2s,transform .2s;display:flex;box-shadow:0 5px 15px #0000001a}.toggle.hand-start:hover{background:#4338ca;transform:translateY(-2px)}.toggle.hand-end{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-weight:500;transition:background .2s,transform .2s;display:flex;position:fixed;top:20px;box-shadow:0 5px 15px #0000001a}.toggle.hand-end:hover{background:#4338ca;transform:translateY(-2px)}[data-hand=right] .toggle.hand-end{right:30px}[data-hand=left] .toggle.hand-end{left:30px}.cards{flex-direction:column;align-items:center;gap:20px;display:flex}.card{background:#fff;border-radius:14px;width:100%;max-width:380px;padding:24px;box-shadow:0 4px 10px #0000000d,0 20px 40px #00000014}.card-header h2,.card-header p,.card-body{text-align:center;margin:0}.card-header p{color:#6b7280;margin-top:4px}.card-body{color:#374151;margin:16px 0}.card-actions{gap:10px;width:100%;display:flex}.hand-flex-start{justify-content:flex-start}.hand-flex-end{justify-content:flex-end}.primary{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:8px;padding:10px 14px;transition:background .2s}.primary:hover{background:#4338ca}.secondary{cursor:pointer;background:0 0;border:1px solid #d1d5db;border-radius:8px;padding:10px 14px;transition:background .2s}.secondary:hover{background:#f3f4f6}.fab{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:50%;width:56px;height:56px;font-size:22px;position:fixed;bottom:30px;box-shadow:0 10px 25px #0003}[data-hand=right] .fab{right:30px}[data-hand=left] .fab{left:30px}@media (width<=768px){.cards{width:100%;padding:0 10px}.card{width:100%}}