.key-test-area{background:var(--gray-100);border:2px dashed var(--gray-300);border-radius:var(--border-radius-lg);padding:40px;text-align:center;cursor:pointer;margin-bottom:24px}.key-test-area:focus{outline:none;border-color:var(--primary-color);background:var(--gray-50)}.key-result{background:var(--gray-50);border-radius:var(--border-radius-lg);padding:20px;margin-bottom:24px;display:grid;grid-template-columns:repeat(2, 1fr);gap:12px}.key-row{display:flex;gap:12px}.key-row span{width:80px;color:var(--gray-600)}.key-reference{background:var(--gray-50);border-radius:var(--border-radius-lg);padding:16px}.ref-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:8px;margin-top:12px}.ref-grid div{padding:6px;background:white;border-radius:var(--border-radius-sm);text-align:center;font-family:monospace}