[data-generator=webcrypto_key_pair_generator] .kp-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:center;border:1px solid #6f5686;border-radius:20px;padding:26px 28px;background:radial-gradient(circle at 92% 10%,rgba(246,205,99,.16),transparent 38%),radial-gradient(circle at 0 100%,rgba(155,107,214,.28),transparent 45%),linear-gradient(135deg,#2e2640,#242032 60%)}
[data-generator=webcrypto_key_pair_generator] .kp-hero p{max-width:60ch}
[data-generator=webcrypto_key_pair_generator] .kp-pair{display:grid;justify-items:stretch}
[data-generator=webcrypto_key_pair_generator] .kp-key{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid #6f5686;background:#1b1826}
[data-generator=webcrypto_key_pair_generator] .kp-key b{font-size:12px;letter-spacing:.12em;color:#d2aaff}
[data-generator=webcrypto_key_pair_generator] .kp-key span{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:#f1eaff}
[data-generator=webcrypto_key_pair_generator] .kp-key em{font-style:normal;font-size:12px;color:#b9abc9}
[data-generator=webcrypto_key_pair_generator] .kp-priv{border-color:#f6cd63;background:linear-gradient(135deg,rgba(246,205,99,.12),#1b1826)}
[data-generator=webcrypto_key_pair_generator] .kp-priv b{color:#f6cd63}
[data-generator=webcrypto_key_pair_generator] .kp-link{width:2px;height:18px;margin:0 auto;background:repeating-linear-gradient(#6f5686 0 4px,transparent 4px 7px)}
[data-generator=webcrypto_key_pair_generator] .kp-studio{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
[data-generator=webcrypto_key_pair_generator] .kp-rail{position:sticky;top:12px;display:grid;gap:14px}
[data-generator=webcrypto_key_pair_generator] .kp-rail h2,[data-generator=webcrypto_key_pair_generator] .kp-stage h2{margin:0}
[data-generator=webcrypto_key_pair_generator] #gwForm{display:grid;gap:12px}
[data-generator=webcrypto_key_pair_generator] .kp-group{display:grid;gap:10px;padding:14px;border:1px solid #4a3d5c;border-radius:14px;background:rgba(0,0,0,.18)}
[data-generator=webcrypto_key_pair_generator] .kp-h{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b9abc9}
[data-generator=webcrypto_key_pair_generator] .gw-field{margin:0}
[data-generator=webcrypto_key_pair_generator] .kp-group .gw-actions{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
[data-generator=webcrypto_key_pair_generator] #gwForm .gw-actions{margin:0;display:grid;grid-template-columns:1fr;gap:8px}
[data-generator=webcrypto_key_pair_generator] #gwGenerate{min-height:50px;border:0;background:#f6cd63;color:#231a08;font-weight:800;font-size:17px}
[data-generator=webcrypto_key_pair_generator] #gwGenerate:hover{background:#ffd978}
[data-generator=webcrypto_key_pair_generator] .kp-group .gw-note{margin:0}
[data-generator=webcrypto_key_pair_generator] .kp-group .gw-file-label,[data-generator=webcrypto_key_pair_generator] .kp-group .gw-actions button{margin:0;min-height:44px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
[data-generator=webcrypto_key_pair_generator] .kp-stage{min-height:520px;display:grid;gap:12px;align-content:start}
[data-generator=webcrypto_key_pair_generator] .kp-stage-head{justify-content:space-between;align-items:center;margin:0}
[data-generator=webcrypto_key_pair_generator] .kp-stage>.gw-note{margin:0}
[data-generator=webcrypto_key_pair_generator] .kp-stage .gw-toolbar{margin:0;padding:12px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid #4a3d5c}
[data-generator=webcrypto_key_pair_generator] .kp-export{margin:0}
[data-generator=webcrypto_key_pair_generator] .gw-results{overflow-wrap:anywhere;min-height:220px;border:1px dashed #4a3d5c;border-radius:14px;padding:10px}
[data-generator=webcrypto_key_pair_generator] .gw-results:empty::before{content:'Your keys appear here as public + private key pairs.';display:grid;place-items:center;min-height:200px;color:#8f82a0;font-size:15px;text-align:center}
[data-generator=webcrypto_key_pair_generator] input,[data-generator=webcrypto_key_pair_generator] select{min-height:44px;font-size:16px}
[data-generator=webcrypto_key_pair_generator] button{min-height:44px}
[data-generator=webcrypto_key_pair_generator] #gwReveal{border-color:#f6cd63;color:#f6cd63}
[data-generator=webcrypto_key_pair_generator] .kp-details{border-left:4px solid #f6cd63}
@media(max-width:1000px){[data-generator=webcrypto_key_pair_generator] .kp-studio{grid-template-columns:minmax(0,1fr)}[data-generator=webcrypto_key_pair_generator] .kp-rail{position:static}[data-generator=webcrypto_key_pair_generator] .kp-hero{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){[data-generator=webcrypto_key_pair_generator] .kp-hero{padding:20px 18px}[data-generator=webcrypto_key_pair_generator] .kp-pair{display:none}[data-generator=webcrypto_key_pair_generator] .gw-eyebrow{font-size:11px}[data-generator=webcrypto_key_pair_generator] .gw-actions button{flex:1 1 40%}[data-generator=webcrypto_key_pair_generator] .kp-stage{min-height:0}[data-generator=webcrypto_key_pair_generator] .kp-stage .gw-toolbar{grid-template-columns:minmax(0,1fr)}}