*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(160deg,#eef2ff,#f8fafc 45%,#ecfeff);color:#0f172a}.page{min-height:100vh;display:grid;place-items:center;padding:1.5rem}.card{width:min(100%,420px);background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:2rem;box-shadow:0 20px 40px #0f172a14}header h1{margin:0 0 .5rem;font-size:1.75rem;letter-spacing:-.02em}header p{margin:0 0 1.75rem;color:#64748b;line-height:1.5}form{display:grid;gap:1.25rem}label{display:grid;gap:.5rem;font-size:.9rem;font-weight:600;color:#334155}input{width:100%;padding:.75rem .9rem;border:1px solid #cbd5e1;border-radius:10px;font:inherit;color:inherit;background:#f8fafc;transition:border-color .15s,box-shadow .15s}input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f133;background:#fff}button{margin-top:.25rem;padding:.85rem 1rem;border:none;border-radius:10px;font:inherit;font-weight:600;color:#fff;background:linear-gradient(135deg,#4f46e5,#6366f1);cursor:pointer;transition:transform .15s,box-shadow .15s}button:hover{transform:translateY(-1px);box-shadow:0 8px 20px #4f46e559}button:active{transform:translateY(0)}.result{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid #e2e8f0}.result h2{margin:0 0 1rem;font-size:1rem;color:#059669}.result dl{margin:0;display:grid;gap:.75rem}.result div{display:grid;gap:.15rem}.result dt{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8}.result dd{margin:0;font-weight:500}