.button{display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.75rem;font-family:var(--font-title),var(--font-body),system-ui,sans-serif;font-weight:700;transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button,.button:focus{outline:2px solid transparent;outline-offset:2px}.button,.button:hover{color:#fff}.button-arcade-orbitron{font-family:var(--font-title),var(--font-body),system-ui,sans-serif;font-size:1rem;line-height:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;position:relative;border:3px solid #1a428a;background:linear-gradient(145deg,#1a428a,#143771);color:#fff;box-shadow:0 6px 0 #112a5a,0 8px 0 #0d2048,0 10px 20px rgba(26,66,138,.3);transform:translateY(0);transition:all .1s ease;padding:12px 24px;border-radius:8px;display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;white-space:nowrap}.button-arcade-orbitron:hover{transform:translateY(2px);box-shadow:0 4px 0 #112a5a,0 6px 0 #0d2048,0 8px 20px rgba(26,66,138,.4);color:#fff}.button-arcade-orbitron:active{transform:translateY(6px);box-shadow:0 0 0 #112a5a,0 2px 0 #0d2048,0 4px 10px rgba(26,66,138,.2)}.button-surface{font-family:var(--font-title),var(--font-body),system-ui,sans-serif;font-size:1rem;line-height:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;position:relative;border:3px solid #ececec;background:linear-gradient(145deg,#f5f5f5,#e6e6e6);color:#111;box-shadow:0 6px 0 #e6e6e6,0 8px 0 #dedede,0 12px 20px rgba(0,0,0,.04);transform:translateY(0);transition:all .1s ease;padding:12px 24px;border-radius:8px;display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;white-space:nowrap}.button-surface:hover{transform:translateY(2px);box-shadow:0 4px 0 #e6e6e6,0 6px 0 #dedede,0 8px 18px rgba(0,0,0,.05);color:#111}.button-surface:active{transform:translateY(6px);box-shadow:0 0 0 #e6e6e6,0 2px 0 #dedede,0 4px 12px rgba(0,0,0,.04);color:#111}